\n \n \n \n \n \n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `addParam` function?\n - The `addParam` function adds a parameter with a given name and value to the URL string, and handles cases where multiple parameters with the same name and different values already exist in the URL.\n\n2. What is the purpose of the `removeParam` function?\n - The `removeParam` function removes a parameter with a given name and value from the URL string, and handles cases where multiple parameters with the same name and different values exist in the URL.\n\n3. What is the purpose of the `clearAllAttributes` function?\n - The `clearAllAttributes` function deletes all parameters with names that start with \"attributes[\" and end with \"]\" from the URL string.","metadata":{"source":".autodoc/docs/markdown/app/utils/router.md"}}],["141",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/app/utils/till.ts)\n\nThis code is a utility module for working with dates and times in the larger zoo project. It imports the dayjs library, which is a lightweight alternative to Moment.js for parsing, validating, manipulating, and formatting dates and times in JavaScript. The module extends dayjs with the relativeTime plugin, which allows for the calculation of human-readable relative time strings like \"2 hours ago\" or \"in 5 minutes\".\n\nThe module exports two constants and one function. The first constant, DATE_REGEX, is a regular expression that matches a date and time string in the format \"YYYY-MM-DD HH:MM:SS\". This can be used to extract date and time information from raw strings in other parts of the project.\n\nThe second constant is not exported, but is used internally by the timeTill function. It is a string template that formats the output of the fromNow method of dayjs to only include the relative time value (e.g. \"2 hours\").\n\nThe timeTill function takes a single argument, a string representing a date and time in the format \"YYYY-MM-DD HH:MM:SS\". It uses dayjs to parse the string into a date object, and then calculates the relative time between that date and the current time using the fromNow method. The function returns a human-readable string indicating the time remaining until the target time, in the format \"X hours\" or \"Y minutes\", etc.\n\nHere is an example of how this module might be used in the larger zoo project:\n\n```javascript\nimport { timeTill, DATE_REGEX } from 'zoo/date-utils'\n\nconst rawString = 'The event starts at 2022-01-01 12:00:00'\nconst match = rawString.match(DATE_REGEX)\nconst targetTime = match ? match[0] : undefined\n\nif (targetTime) {\n const timeRemaining = timeTill(targetTime)\n console.log(`The event starts in ${timeRemaining}.`)\n} else {\n console.log('Could not find a valid date and time in the string.')\n}\n```\n\nIn this example, we use the DATE_REGEX constant to extract a date and time string from a raw string. We then pass that string to the timeTill function to calculate the relative time until the target time. Finally, we log a message to the console indicating how much time is left until the event starts.\n## Questions: \n 1. What is the purpose of the `dayjs` library and how is it being used in this code?\n - The `dayjs` library is being used to manipulate and format dates and times. It is being imported and extended with the `relativeTime` plugin, which allows for the calculation of relative time differences. \n2. What is the expected format of the `timeString` parameter in the `timeTill` function?\n - The `timeString` parameter is expected to be in the format \"YYYY-MM-DD HH:MM:SS\". \n3. What is the output format of the `timeTill` function?\n - The `timeTill` function returns a human-readable string indicating the time remaining until the target time, using the `fromNow` method of the `dayjs` library. The output format is a string with a number and a unit of time (e.g. \"2 hours\", \"5 minutes\", etc.).","metadata":{"source":".autodoc/docs/markdown/app/utils/till.md"}}],["142",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/app/utils/titleCase.ts)\n\nThe `titleCase` function in the `zoo` project is designed to convert a given word to title case format. Title case is a writing style where the first letter of each word is capitalized, except for certain small words like \"and\", \"the\", and \"of\". This function takes a single parameter, `word`, which is the word to be converted to title case. \n\nThe function uses a regular expression to match all words in the input string and then applies a callback function to each match. The callback function takes the matched word and returns a modified version of it in title case format. The modified version is created by capitalizing the first letter of the word using the `toUpperCase()` method and then converting the rest of the word to lowercase using the `toLowerCase()` method. \n\nThis function can be used in a variety of ways within the larger `zoo` project. For example, it could be used to format animal names or exhibit titles in a consistent and professional manner. It could also be used to format user input in forms or search queries to ensure that the input is correctly formatted and matches the expected format. \n\nHere is an example of how to use the `titleCase` function:\n\n```typescript\nimport titleCase from './titleCase';\n\nconst animalName = 'giraffe';\nconst formattedName = titleCase(animalName);\nconsole.log(formattedName); // Output: \"Giraffe\"\n```\n\nIn this example, the `titleCase` function is imported from the `titleCase.ts` file and used to format the `animalName` variable. The resulting `formattedName` variable is then logged to the console, which outputs \"Giraffe\".\n## Questions: \n 1. What does the `titleCase` function do?\n - The `titleCase` function takes a string input and converts it to title case format, where the first letter of each word is capitalized and the rest are in lowercase.\n2. What is the input parameter for the `titleCase` function?\n - The input parameter for the `titleCase` function is a string called `word`.\n3. What regular expression is used in the `replace` method of the `titleCase` function?\n - The regular expression used in the `replace` method of the `titleCase` function is `/\\w\\S*/g`, which matches any word character followed by zero or more non-space characters.","metadata":{"source":".autodoc/docs/markdown/app/utils/titleCase.md"}}],["143",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/app/utils/truncate.ts)\n\nThe code above provides two functions that are used to truncate Ethereum addresses and ENS names. The purpose of these functions is to ensure that the addresses and names do not overflow when displayed on a user interface. \n\nThe `truncateAddress` function takes an Ethereum address as its first argument and an optional `shrinkIndicator` as its second argument. The function then returns a truncated version of the address with the middle characters removed. The `slice` method is used to remove the middle characters of the address. The first four characters of the address are concatenated with the `shrinkIndicator` (if provided) and the last four characters of the address. If no `shrinkIndicator` is provided, an ellipsis (`…`) is used as the default indicator. \n\nThe `truncateEns` function takes an ENS name as its first argument and an optional `shrinkIndicator` as its second argument. The function returns a truncated version of the ENS name if and only if the name is longer than 24 characters. The `slice` method is used to remove the middle characters of the name. The first 20 characters of the name are concatenated with the `shrinkIndicator` (if provided) and the last three characters of the name. If no `shrinkIndicator` is provided, an ellipsis (`…`) is used as the default indicator. If the name is shorter than or equal to 24 characters, the function returns the original name without any truncation. \n\nThese functions can be used in a larger project to ensure that Ethereum addresses and ENS names are displayed in a user-friendly way. For example, a web3 application that displays Ethereum addresses and ENS names could use these functions to ensure that the addresses and names fit within a certain space on the user interface. \n\nExample usage of `truncateAddress`:\n```\nconst address = '0x1234567890123456789012345678901234567890'\nconst truncatedAddress = truncateAddress(address)\nconsole.log(truncatedAddress) // '0x12...7890'\n```\n\nExample usage of `truncateEns`:\n```\nconst ensName = 'myverylongensname.eth'\nconst truncatedEnsName = truncateEns(ensName)\nconsole.log(truncatedEnsName) // 'myvery...eth'\n```\n## Questions: \n 1. What is the purpose of the `truncateAddress` function?\n \n The `truncateAddress` function takes an Ethereum address and a visual indicator and returns a shortened version of the address with the middle characters removed, to prevent overflow.\n\n2. What is the purpose of the `truncateEns` function?\n \n The `truncateEns` function takes an ENS name and a visual indicator and returns a shortened version of the name with the middle characters removed, but only if the name is longer than 24 characters and would otherwise overflow.\n\n3. What is the purpose of the `shrinkInidicator` parameter?\n \n The `shrinkInidicator` parameter is a visual indicator that is used to show that the address or name has been truncated. If it is not provided, the default indicator of '…' is used.","metadata":{"source":".autodoc/docs/markdown/app/utils/truncate.md"}}],["144",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/app/utils/wrappedContracts.ts)\n\nThis code defines a constant variable called `wrappedContracts` which is a Record object that maps numbers to Ethereum contract addresses. The keys of the Record object are numbers that represent the Ethereum network ID, and the values are the corresponding contract addresses for that network. \n\nThis code is likely used in a larger project that interacts with Ethereum smart contracts. The purpose of this code is to provide a convenient way to access the contract addresses for different Ethereum networks. By using this Record object, developers can easily retrieve the contract address for a specific network ID without having to hardcode the address in their code. \n\nFor example, if a developer wants to interact with a contract on the Ethereum mainnet, they can use the `wrappedContracts` object to retrieve the contract address like this:\n\n```\nimport wrappedContracts from 'zoo'\n\nconst mainnetAddress = wrappedContracts[1]\n```\n\nThis will set the `mainnetAddress` variable to the contract address for the Ethereum mainnet. Similarly, if the developer wants to interact with a contract on the Polygon network, they can retrieve the contract address like this:\n\n```\nconst polygonAddress = wrappedContracts[137]\n```\n\nOverall, this code provides a simple and flexible way to manage contract addresses for different Ethereum networks in a larger project.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines a constant object `wrappedContracts` that maps network IDs to contract addresses.\n\n2. What is the data type of `wrappedContracts`?\n - The data type of `wrappedContracts` is `RecordWelcome to my website
\n\tCheck out our latest products!
\n\t\n\t- \n\t\t
- Product 1 \n\t\t
- Product 2 \n\t\t
- Product 3 \n\t
Endangered Animals
\n- \n
- \n
Sumatran Elephant
\n![\"Sumatran](\"leo.png\")
\n Scientific Name: Elephas Maximus Sumatranus
\nSumatran elephants feed on a variety of plants and deposit seeds wherever they go, contributing to a healthy forest ecosystem. They also share their lush forest habitat with other endangered species.
\n \n \n
` tag. The \"image\" property is used to display a picture of the animal using an `![]()
` tag. The \"head\" property is used to display the scientific name of the animal in a `
` tag. The \"desc\" property is used to display a brief description of the animal in another `
` tag. By using the data from the JSON object, the webpage can provide valuable information about endangered animals to users.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a list of animals in a zoo, along with their images and descriptions.\n\n2. What information is included in the animal descriptions?\n- The animal descriptions include the scientific name of the species, as well as information about their habitat, diet, and conservation status.\n\n3. Are there any other types of data that could be included for each animal?\n- Depending on the needs of the project, additional data such as the animal's lifespan, behavior, or physical characteristics could be included for each animal.","metadata":{"source":".autodoc/docs/markdown/core/src/animals.md"}}],["521",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/animation/index.tsx)\n\nThis code is a collection of functions that use the GreenSock Animation Platform (GSAP) library to create various fade-in animations triggered by scrolling. The `import` statements at the beginning of the file bring in the necessary modules from the GSAP library, including the `ScrollTrigger` plugin. The `registerPlugin` method is then called to register the `ScrollTrigger` plugin with GSAP.\n\nThe `fadeInOnScroll` function takes an HTML element as a parameter and returns a GSAP animation that fades in the element when it enters the viewport during scrolling. The `duration` parameter sets the length of the animation, and the `y` parameter determines the distance the element moves vertically as it fades in. The `scrollTrigger` object specifies the trigger element, the point at which the animation should start (`start: \"top 90%\"`), and the toggle actions that should occur when the element enters and leaves the viewport.\n\nThe `fadeInFromRight` and `fadeInFromLeft` functions are similar to `fadeInOnScroll`, but they animate the element sliding in from the right or left side of the screen, respectively. The `x` parameter determines the distance the element moves horizontally as it fades in.\n\nThe `fadeInFromRightFast` and `fadeInFromLeftFast` functions are similar to their non-\"Fast\" counterparts, but they have shorter animation durations and use a different easing function (`Power4.easeInOut`) for a snappier animation.\n\nThe `fadeInOnScrollAndStagger` function is similar to `fadeInOnScroll`, but it also applies a stagger effect to the animation, causing the elements to fade in one after another with a slight delay. The `trigger` parameter specifies the element that triggers the animation, and the `end` parameter specifies the point at which the animation should end.\n\nThese functions can be used in a larger project to add visual interest and interactivity to a webpage. For example, they could be used to animate the appearance of images or text as the user scrolls down the page. Here is an example of how the `fadeInOnScroll` function could be used to fade in an HTML element with the ID \"myElement\" when it enters the viewport during scrolling:\n\n```\nimport { fadeInOnScroll } from \"zoo\";\n\nconst myElement = document.querySelector(\"#myElement\");\nfadeInOnScroll(myElement);\n```\n## Questions: \n 1. What is the purpose of the `gsap` and `ScrollTrigger` imports?\n- The `gsap` and `ScrollTrigger` imports are used for animation and scroll-triggered animation respectively.\n\n2. What do the `fadeInFromRight`, `fadeInFromRightFast`, `fadeInFromLeft`, and `fadeInFromLeftFast` functions do?\n- These functions animate an element's opacity and position (either from the left or right) when it enters the viewport during scrolling.\n\n3. What is the purpose of the `stagger` property in the `fadeInOnScrollAndStagger` function?\n- The `stagger` property is used to apply a staggered animation effect to multiple elements, with a specified delay between each element's animation.","metadata":{"source":".autodoc/docs/markdown/core/src/animation/index.md"}}],["522",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/animation/loading-circle.json)\n\nThe code is a JSON file that defines an animation project called \"347-loader-18\". The project has a single composition called \"Watermark\" that contains two layers. The first layer is an empty layer called \"comp_0\" that has no content. The second layer is a shape layer called \"Shape Layer 9\" that contains an animated ellipse with a stroke and fill. \n\nThe stroke and fill colors of the ellipse are controlled by two color effects called \"Primary\" and \"Secondary\" respectively. These effects are linked to color controls that can be adjusted to change the colors of the ellipse. The stroke width of the ellipse is controlled by a slider effect called \"Stroke\". The size of the ellipse is fixed at 57x57 pixels, but its position and scale can be adjusted using the \"Axis\" and \"Scale\" effects respectively. \n\nThe purpose of this code is to define an animated loading icon that can be used in a larger project. The loading icon can be customized by adjusting the color, stroke width, position, and scale of the ellipse. The code can be imported into an animation software like Adobe After Effects to create the actual animation. \n\nHere is an example of how the color of the ellipse can be changed using the \"Primary\" effect:\n\n```\nvar primaryColor = [1, 0, 0]; // set primary color to red\nvar primaryEffect = thisComp.layer('Color & Stroke Change').effect('Primary')('Color');\nprimaryEffect.setValue(primaryColor);\n```\n\nThis code sets the primary color of the ellipse to red by getting a reference to the \"Primary\" effect and calling its `setValue()` method with an array of RGB values.\n## Questions: \n 1. What is the purpose of this code?\n- This code appears to be defining the properties and animations for a shape layer in an Adobe After Effects project.\n\n2. What effects or controls are being applied to the shape layer?\n- The shape layer has a \"Color & Stroke Change\" effect applied to it, which includes controls for primary and secondary colors, stroke width, and scale.\n\n3. What is the significance of the \"NULL 2\" and \"NULL\" layers?\n- These layers appear to be null objects used to control the position, scale, and rotation of the shape layer. \"NULL 2\" is used to control the position and scale, while \"NULL\" is used to control the rotation.","metadata":{"source":".autodoc/docs/markdown/core/src/animation/loading-circle.md"}}],["523",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/bootstrap.ts)\n\nThis code file contains a set of functions and extensions to existing classes that are used in the larger zoo project. \n\nThe first section of the code imports various dependencies, including `BigNumber` and `Fraction` from the `@ethersproject/bignumber` package, as well as `React` and `Zero` from other packages. It also imports a function called `parseUnits` from `@ethersproject/units`. \n\nThe next section of the code checks if the code is running in a browser environment and in development mode. If so, it imports and runs a package called `why-did-you-render`, which is used for debugging and optimizing React components. \n\nThe remaining code defines several extensions to the `BigNumber` and `String` classes. \n\nThe `mulDiv` function extends the `BigNumber` class and takes two arguments, `multiplier` and `divisor`, both of which are `BigNumberish` types. It returns a new `BigNumber` that is the result of multiplying the original `BigNumber` by the `multiplier` and dividing by the `divisor`. If the `divisor` is zero or negative, it returns `Zero`. \n\nThe `toFraction` function also extends the `BigNumber` class and takes an optional argument `decimals`, which defaults to 18. It returns a new `Fraction` object that represents the `BigNumber` as a fraction with the specified number of decimal places. \n\nThe `toFixed` function extends the `BigNumber` class and takes two optional arguments, `decimals` and `maxFractions`, both of which default to 18 and 8, respectively. It returns a string representation of the `BigNumber` with the specified number of decimal places and maximum number of fractions. \n\nThe `toBigNumber` function extends the `String` class and takes an argument `decimals`. It attempts to parse the string as a `BigNumber` with the specified number of decimal places using the `parseUnits` function. If parsing fails, it returns `BigNumber.from(0)`.\n\nThese extensions to the `BigNumber` and `String` classes provide additional functionality that is used throughout the zoo project. For example, the `mulDiv` function is used to calculate the price of tokens in various trading pairs, while the `toFraction` and `toFixed` functions are used to format token amounts and prices for display. The `toBigNumber` function is used to convert user input from strings to `BigNumber` objects.\n## Questions: \n 1. What is the purpose of the `Fraction` entity and how is it used in this code?\n - The `Fraction` entity is imported from `./entities/Fraction` and is used to convert a `BigNumber` to a fraction with a specified number of decimals.\n2. What is the significance of the `mulDiv` function added to the `BigNumber` prototype?\n - The `mulDiv` function multiplies a `BigNumber` by a multiplier and divides it by a divisor, returning the result as a `BigNumber`. If the divisor is zero or negative, it returns `Zero`.\n3. Why is the `whyDidYouRender` library being used in this code, and what options are being passed to it?\n - The `whyDidYouRender` library is being used to track unnecessary re-renders in development mode. The options being passed to it include tracking all pure components, tracking hooks, logging owner reasons, and collapsing groups.","metadata":{"source":".autodoc/docs/markdown/core/src/bootstrap.md"}}],["524",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AccountDetails/Copy.tsx)\n\nThe `CopyHelper` component is a reusable React component that provides a UI for copying text to the clipboard. It is designed to be used in other parts of the `zoo` project where copying text is required. \n\nThe component imports two icons from the `@heroicons/react/outline` package: `CheckCircleIcon` and `ClipboardCopyIcon`. It also imports the `useCopyClipboard` hook from a custom `useCopyClipboard` module, the `classNames` function from a custom `functions` module, and the `Typography` component from a custom `Typography` module. Additionally, it imports the `useLingui` hook and `t` function from the `@lingui/react` and `@lingui/macro` packages respectively.\n\nThe `CopyHelper` component takes three props: `className`, `toCopy`, and `children`. `className` is an optional string that can be used to add additional CSS classes to the component. `toCopy` is a required string that represents the text to be copied to the clipboard. `children` is an optional prop that can be used to pass in additional React components to be rendered alongside the copy icon.\n\nThe component uses the `useCopyClipboard` hook to manage the state of whether or not the text has been copied to the clipboard. It also uses the `useLingui` hook to provide internationalization support for the \"Copied\" text that is displayed when the text is successfully copied.\n\nThe component renders a `div` element with a `classNames` function that combines the default classes with any additional classes passed in via the `className` prop. The `onClick` event is set to call the `setCopied` function with the `toCopy` prop as an argument when the component is clicked.\n\nIf the text has been successfully copied, the component renders a `div` element with the \"Copied\" text and a `CheckCircleIcon`. If the text has not been copied, the component renders a `div` element with any additional components passed in via the `children` prop and a `ClipboardCopyIcon`.\n\nOverall, the `CopyHelper` component provides a simple and reusable UI for copying text to the clipboard, with support for internationalization and customization via the `className` and `children` props. An example usage of this component would be in a form where a user needs to copy a generated code or URL to the clipboard.\n## Questions: \n 1. What does this code do?\n - This code exports a React component called `CopyHelper` that provides a UI for copying text to the clipboard and displaying a success message upon successful copy.\n\n2. What dependencies does this code rely on?\n - This code relies on several external dependencies, including `@heroicons/react/outline`, `react`, `useCopyClipboard`, `../../functions`, `../Typography`, `@lingui/react`, and `@lingui/macro`.\n\n3. What props does the `CopyHelper` component accept?\n - The `CopyHelper` component accepts three props: `className` (optional), `toCopy` (required), and `children` (optional). The `toCopy` prop specifies the text to be copied to the clipboard, and the `children` prop is used to render any additional content alongside the copy icon.","metadata":{"source":".autodoc/docs/markdown/core/src/components/AccountDetails/Copy.md"}}],["525",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AccountDetails/Transaction.tsx)\n\nThe `Transaction` component is a React functional component that displays information about a transaction on the Ethereum blockchain. It imports several dependencies from various packages, including `@zoolabs/zdk`, `@heroicons/react/outline`, and `@lingui/react`. \n\nThe component takes a single prop, `hash`, which is the hash of the transaction to display. It then uses several hooks to retrieve information about the transaction from the Redux store, including `useActiveWeb3React` and `useAllTransactions`. \n\nThe component then renders a div that displays the transaction summary and status. The summary is either the transaction hash or a user-defined summary if one exists. The status is displayed as an icon, with different icons representing pending, successful, cancelled, or failed transactions. \n\nIf the transaction was submitted using the Archer network, additional information is displayed, including the nonce and tip amount. If the transaction is pending, the component also displays a countdown timer indicating how long until the transaction expires. If the transaction has expired, the component displays an \"Expired\" message. \n\nFinally, if the transaction is pending, the component allows the user to cancel the transaction by clicking a \"Cancel\" button. This sends a request to the Archer network to cancel the transaction, and updates the transaction status in the Redux store. \n\nThis component is likely used in other parts of the project to display information about transactions, such as in a transaction history or on a confirmation page after submitting a transaction.\n## Questions: \n 1. What is the purpose of the `Transaction` component?\n- The `Transaction` component is used to display information about a transaction, including its status, summary, and deadline.\n\n2. What is the `calculateSecondsUntilDeadline` function used for?\n- The `calculateSecondsUntilDeadline` function is used to calculate the number of seconds until a transaction's deadline, which is used to determine whether the transaction has expired.\n\n3. What is the `cancelPending` function used for?\n- The `cancelPending` function is used to cancel a pending transaction by sending a request to the Archer Relay API with the transaction's raw data and authorization headers. If the cancellation is successful, the transaction is marked as cancelled in the application state.","metadata":{"source":".autodoc/docs/markdown/core/src/components/AccountDetails/Transaction.md"}}],["526",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AccountDetails/index.tsx)\n\nThe code is a React component that renders the account details of a user's wallet. It imports various dependencies such as React, Image, and Button from different modules. It also imports some functions and constants from other files such as `getExplorerLink` and `SUPPORTED_WALLETS`. \n\nThe component takes in several props such as `toggleWalletModal`, `pendingTransactions`, `confirmedTransactions`, `ENSName`, and `openOptions`. It then uses these props to render the account details of the user's wallet. \n\nThe component first uses the `useActiveWeb3React` hook to get the current chain ID, account, and connector of the user's wallet. It then uses the `useSelector` hook to get the user's ZOO balance from the Redux store. \n\nThe component then defines several functions such as `formatConnectorName` and `getStatusIcon` that are used to format and display the user's wallet connector and status icon. \n\nThe component then renders the user's account details such as their wallet address, balance, and recent transactions. It also provides buttons to disconnect the wallet, change the wallet, view the wallet on an explorer, and copy the wallet address. \n\nThe component also defines a `WalletIcon` component that renders the icon of the user's wallet connector. It also defines a `renderTransactions` function that renders the user's recent transactions. \n\nOverall, this component is an important part of the larger project as it provides users with a way to view and manage their wallet details and transactions. It can be used in various parts of the project such as the wallet modal and the dashboard. \n\nExample usage:\n\n```jsx\nimport AccountDetails from \"./components/AccountDetails\";\n\nfunction App() {\n return (\n
\n console.log(\"Toggle wallet modal\")}\n pendingTransactions={[\"0x123abc\", \"0x456def\"]}\n confirmedTransactions={[\"0x789ghi\"]}\n ENSName=\"mywallet.eth\"\n openOptions={() => console.log(\"Open wallet options\")}\n />\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `AccountDetails` component?\n- The `AccountDetails` component is responsible for rendering the account details of the user, including their wallet balance, recent transactions, and wallet connector information.\n\n2. What libraries and hooks are being used in this file?\n- This file is using several libraries and hooks, including React, Next.js, Lingui, and Feather icons. It is also using custom hooks such as `useActiveWeb3React` and `useDispatch`, as well as Redux for state management.\n\n3. What is the purpose of the `WalletIcon` component?\n- The `WalletIcon` component is a reusable component that renders an image of a wallet icon along with any children components passed to it. It is used in the `getStatusIcon` function to display the appropriate wallet icon based on the user's wallet connector.","metadata":{"source":".autodoc/docs/markdown/core/src/components/AccountDetails/index.md"}}],["527",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AddressInputPanel/index.tsx)\n\nThe `AddressInputPanel` component is a React functional component that renders an input field for an Ethereum address. It takes in three props: `id`, `value`, and `onChange`. The `id` prop is an optional string that is used to set the ID of the component's root element. The `value` prop is a string that represents the current value of the input field. The `onChange` prop is a callback function that is called whenever the value of the input field changes.\n\nThe component uses the `useLingui` hook from the `@lingui/react` package to provide internationalization support. It also uses the `useENS` hook from a custom `useENS` hook to resolve Ethereum addresses to their corresponding ENS names.\n\nThe component renders a div element with a class of `flex flex-row bg-dark-800 rounded items-center h-[68px]`. This div contains two child elements: a div element with a class of `flex justify-between w-full px-5 sm:w-2/5` and a div element with a class of `flex w-full h-full border-2 rounded-r sm:w-3/5 border-dark-800`. The first child element contains two span elements: one with a class of `text-[18px] text-primary` that displays the text \"Send to:\", and one with a class of `text-sm underline cursor-pointer text-blue` that displays the text \"Remove\" and calls the `onChange` callback with a value of `null` when clicked. The second child element contains an `Input.Address` component that renders an input field for an Ethereum address.\n\nThe component also sets the `error` variable to `true` if the `value` prop is not an empty string and the `loading` and `address` variables returned by the `useENS` hook are both `false`. If `error` is `true`, the component adds a red border to the root div element.\n\nThis component can be used in a larger project that requires an input field for Ethereum addresses. It provides internationalization support and ENS resolution, and allows for customization through the `id`, `value`, and `onChange` props. Here is an example of how this component can be used:\n\n```\nimport AddressInputPanel from './AddressInputPanel'\n\nfunction MyComponent() {\n const [address, setAddress] = useState('')\n\n const handleAddressChange = useCallback((value) => {\n setAddress(value)\n }, [])\n\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `AddressInputPanel` that renders an input field for an Ethereum address and uses the ENS (Ethereum Name Service) to resolve the address from a human-readable name.\n\n2. What are the dependencies of this code?\n- This code imports several modules from external packages, including `React`, `@lingui/macro`, `@lingui/react`, and a custom `Input` component. It also uses a custom `useENS` hook defined elsewhere in the project.\n\n3. What props does the `AddressInputPanel` component accept?\n- The `AddressInputPanel` component accepts three props: `id` (an optional string), `value` (a string representing the current value of the input field), and `onChange` (a callback function that is called whenever the input value changes).","metadata":{"source":".autodoc/docs/markdown/core/src/components/AddressInputPanel/index.md"}}],["528",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Alert/index.tsx)\n\nThe code defines an Alert component that can be used to display messages to users. The component takes in several props, including a title, message, type, showIcon, dismissable, show, and setShow. The title and message props are used to display the content of the alert, while the type prop determines the color and icon used to display the alert. The showIcon prop determines whether or not to display the icon associated with the alert type. The dismissable prop determines whether or not the user can dismiss the alert. The show and setShow props are used to control the visibility of the alert.\n\nThe component uses the useState hook to manage the visibility of the alert. The defaultShow state is used to determine whether or not to show the alert by default. The setShow prop is used to update the show state when the user dismisses the alert.\n\nThe component renders a div with the appropriate color and icon based on the type prop. The title and message props are displayed within the div. If the dismissable prop is true, a button is displayed that allows the user to dismiss the alert. The button updates the show state when clicked.\n\nThis component can be used throughout the larger project to display alerts to users. For example, it could be used to display error messages when a user enters invalid input or to display information messages when a user successfully completes an action. Here is an example of how the component could be used:\n\n```\n\n {animals.map(animal => (\n
\n );\n};\n```\n\nIn this example, an array of animal objects is defined with a `name` and `description` property. The `Zoo` component maps over this array and renders an `AnimalInfo` component for each animal, passing in the `name` and `description` as props. This results in a list of animals with their names, descriptions, and a link to learn more.\n## Questions: \n 1. What is the purpose of the AnimalInfo component?\n The AnimalInfo component is designed to display information about an animal, including a title, content, and a \"Learn more\" link.\n\n2. What styling classes are applied to the AnimalInfo component?\n The AnimalInfo component has several styling classes applied to it, including \"px-2\", \"py-6\", \"lg:px-6\", \"lg:basis-1/3\", \"lg:bg-black100\", and \"lg:rounded-3xl\". These classes control the padding, background color, and layout of the component.\n\n3. What is the purpose of the \"rel\" attribute on the \"Learn more\" link?\n The \"rel\" attribute on the \"Learn more\" link is set to \"noreferrer\", which tells the browser not to send the referrer information when the link is clicked. This can help protect the user's privacy.","metadata":{"source":".autodoc/docs/markdown/core/src/components/AnimalFamily/AnimalInfo.md"}}],["530",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AnimalFamily/index.tsx)\n\nThe code above defines a React component called `AnimalFamily`. This component takes in four props: `image`, `name`, `title`, and `content`. It then returns a JSX element that renders an animal family card with an image, name, and a button to buy an NFT. \n\nThe `Image` component is imported from the `next/image` library and is used to display the animal image. The `Link` component is imported from the `next/link` library and is used to wrap the \"Buy NFT\" button, which links to the `/nft` page. \n\nThe `AnimalInfo` component is imported from the `pages/animal-info` file, which is not shown in this code snippet. It is likely that this component contains additional information about the animal family that is displayed when the user clicks on the animal card. \n\nThis component is likely used in a larger project that involves displaying information about different animal families. It can be used by passing in different props for each animal family, such as the image URL, name, and any additional information. \n\nHere is an example of how this component can be used in another file:\n\n```\nimport AnimalFamily from \"zoo/AnimalFamily\";\n\nconst animalFamilies = [\n {\n image: \"lion.jpg\",\n name: \"Lion Family\",\n title: \"The King of the Jungle\",\n content: \"The lion family is known for its strength and courage.\",\n },\n {\n image: \"elephant.jpg\",\n name: \"Elephant Family\",\n title: \"The Gentle Giants\",\n content: \"The elephant family is known for its intelligence and empathy.\",\n },\n];\n\nconst Zoo = () => {\n return (\n \n {animalFamilies.map((family) => (\n
\n );\n};\n\nexport default Zoo;\n```\n\nIn this example, the `Zoo` component renders multiple `AnimalFamily` components by mapping over an array of animal families. Each `AnimalFamily` component is passed in the relevant props for that animal family. This allows for easy and dynamic rendering of different animal families in the larger project.\n## Questions: \n 1. What is the purpose of the `AnimalFamily` component?\n- The `AnimalFamily` component is used to display information about an animal, including an image, name, and a link to buy an NFT.\n\n2. What libraries or frameworks are being used in this code?\n- The code is using the `next/image` and `next/link` libraries, as well as a custom `AnimalInfo` component located in the `pages` directory.\n\n3. What is the expected output of this code?\n- The expected output of this code is a styled component that displays an animal image, name, and a link to buy an NFT. The `AnimalInfo` component is also included in the output, but its purpose is not clear from this code snippet alone.","metadata":{"source":".autodoc/docs/markdown/core/src/components/AnimalFamily/index.md"}}],["531",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AnimalInfo/index.tsx)\n\nThe code defines a React component called `AnimalFamilyInfo` that displays information about an animal family. The component takes in four props: `name` (a string representing the name of the animal family), `image` (a string representing the filename of the image to display), `descriptionHead` (a string representing the heading of the description), and `description` (a string representing the description of the animal family).\n\nThe component returns a div that contains three child divs. The first child div contains an image of the animal family, which is displayed using the `next/image` component. The second child div contains the name of the animal family, which is displayed as a heading. The third child div contains the description of the animal family, which is displayed as a paragraph of text. The description also includes a link to learn more about the animal family.\n\nThe component uses CSS classes to style the different elements of the component. The image is displayed with a black background and rounded corners, while the name and description are displayed with a white background. The description also has a green link to learn more about the animal family.\n\nThis component can be used in a larger project that displays information about different animal families. The component can be reused for each animal family, with the `name`, `image`, `descriptionHead`, and `description` props being passed in as needed. For example, the component could be used in a zoo website to display information about different animal families, such as lions, tigers, and bears. \n\nExample usage:\n\n```\n\n
\n );\n}\n\nexport default App;\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n - This code is a React component that sets up a Babylon.js scene and renders it on a canvas element. It takes in various props to customize the scene and render loop.\n\n2. What dependencies does this code have?\n - This code imports several modules from the Babylon.js library, including Engine, Scene, SceneLoader, FreeCamera, Vector3, and Color4. It also imports React and useRef from the React library.\n\n3. What props can be passed to this component and what do they do?\n - This component accepts several props, including antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady, and clearColor. These props can be used to customize the Babylon.js scene and render loop, such as setting the antialiasing level, engine options, and scene options, as well as defining callbacks for when the scene is ready and when each frame is rendered. The clearColor prop sets the background color of the scene.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Babylon/SceneComponent.md"}}],["533",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Babylon/index.tsx)\n\nThe `BabylonAnim` component is a React component that renders a 3D animal model using the Babylon.js library. The component takes several props that allow customization of the animal model and camera position. The component also has an optional AR mode that can be enabled by setting the `isArAble` prop to `true`.\n\nThe `onSceneReady` function is called when the Babylon.js scene is ready. It creates an `ArcRotateCamera` and attaches it to the canvas. It then loads the 3D animal model using the `SceneLoader.ImportMeshAsync` method and sets its position and rotation. It also creates lights and an environment for the scene.\n\nThe `onRender` function is called on every frame render and can be used to update the scene. In this case, it calculates the time since the last frame render.\n\nThe component returns a `SceneComponent` that renders the Babylon.js scene and a button for AR mode if enabled. The `SceneComponent` takes the `onSceneReady` and `onRender` functions as props.\n\nThis component can be used in a larger project that requires 3D models to be rendered using Babylon.js. The component can be customized by passing different props to change the animal model, camera position, and enable AR mode. The `onSceneReady` and `onRender` functions can also be modified to add additional functionality to the scene. \n\nExample usage:\n\n```\nimport BabylonAnim from \"./BabylonAnim\";\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `BabylonAnim` component?\n- The `BabylonAnim` component is responsible for rendering a 3D animal model using Babylon.js library and allows for AR functionality.\n\n2. What is the significance of the `useRef` hook being used to create the `animalModel` variable?\n- The `useRef` hook is used to create a reference to the animal model that is loaded asynchronously using `SceneLoader.ImportMeshAsync()`, which allows for manipulation of the model's properties.\n\n3. What is the purpose of the `onRender` function?\n- The `onRender` function is called on every frame render and is used to calculate the time elapsed since the last frame using `scene.getEngine().getDeltaTime()`. However, it is currently not being used for any other purpose.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Babylon/index.md"}}],["534",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Back/index.tsx)\n\nThis code defines a React component called `Back` that renders a link to go back to the previous page in the browser history. The component uses the `useLingui` hook from the `@lingui/react` library to enable internationalization (i18n) of the text displayed in the link. The `t` function from the `@lingui/macro` library is used to mark the text for translation. The `useRouter` hook from the `next/router` library is used to access the router object and its `back` method, which navigates to the previous page in the browser history.\n\nThe `Back` component is intended to be used in a larger project that uses React and Next.js for server-side rendering. It can be included in any page or component that needs to provide a way for the user to go back to the previous page. The component can be customized by changing the text displayed in the link, as well as the styles applied to the link.\n\nHere is an example of how the `Back` component can be used in a Next.js page:\n\n```\nimport Back from '../components/Back'\n\nconst MyPage = () => {\n return (\n \n
\n )\n}\n\nexport default MyPage\n```\n\nIn this example, the `Back` component is included at the end of the page content to provide a way for the user to go back to the previous page. When the user clicks on the link, the `router.back` method is called, which navigates to the previous page in the browser history. The text displayed in the link is translated based on the user's language preference, as determined by the `useLingui` hook.\n## Questions: \n 1. What is the purpose of the `useLingui` hook and the `@lingui/macro` package?\n- The `useLingui` hook and `@lingui/macro` package are used for internationalization (i18n) and localization (l10n) of the application's text content.\n\n2. What is the purpose of the `useRouter` hook from the `next/router` package?\n- The `useRouter` hook is used to access the Next.js router object, which allows for programmatic navigation between pages in the application.\n\n3. What is the purpose of the `Back` component and how is it used?\n- The `Back` component is a reusable component that renders a link with a back arrow icon and localized text for \"Go Back\". It is used to provide a consistent UI element for navigating back to the previous page in the application.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Back/index.md"}}],["535",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Badge/index.tsx)\n\nThis code defines a React component called `Badge` that can be used to display a badge with different colors and sizes. The component takes in three optional props: `color`, `size`, and `children`. The `color` prop can be set to one of four possible values: \"default\", \"blue\", \"pink\", or \"gradient\". The `size` prop can be set to one of three possible values: \"default\", \"medium\", or \"large\". The `children` prop is used to pass in the content that should be displayed inside the badge.\n\nThe `COLOR` object defines the styles for each of the four possible badge colors. The `SIZE` object defines the font size for each of the three possible badge sizes. The `Badge` function takes in the `color`, `size`, and `className` props, and uses them to dynamically apply the appropriate styles to the badge. The `className` prop is used to allow for additional custom styles to be applied to the badge.\n\nThis component can be used in a larger project to display badges with different colors and sizes. For example, it could be used to display badges indicating the status of an item (e.g. \"new\", \"popular\", \"on sale\", etc.). Here is an example of how the `Badge` component could be used:\n\n```\nimport Badge from \"./Badge\";\n\nfunction App() {\n return (\n My Page
\nThis is my page content.
\n\n New \n Popular \n On Sale \n
\n );\n}\n```\n\nThis would display three badges with different colors, sizes, and content.\n## Questions: \n 1. What are the possible values for `BadgeColor` and `BadgeSize`?\n- `BadgeColor` can be one of \"default\", \"blue\", \"pink\", or \"gradient\". `BadgeSize` can be one of \"default\", \"medium\", or \"large\".\n\n2. What is the purpose of the `COLOR` and `SIZE` constants?\n- `COLOR` and `SIZE` are objects that define the CSS classes for different badge colors and sizes respectively. These classes are used in the `Badge` component to style the badge.\n\n3. What is the purpose of the `Badge` component and what props does it accept?\n- The `Badge` component is a reusable component that renders a badge with a specified color and size. It accepts `color`, `size`, `children`, and `className` props.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Badge/index.md"}}],["536",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Banner/index.tsx)\n\nThe `Banner` component is a React functional component that displays a banner at the top of the screen. The banner can be of two types: \"default\" or \"network_migration\". The default banner displays a link to a BSC Scan page, while the network_migration banner displays a link to migrate the network to get new tokens. \n\nThe component imports several other components and hooks from the project, including `XIcon` from `@heroicons/react/outline`, `Copy` from `components/AccountDetails/Copy`, `Typography` from `components/Typography`, `useNetworkMigrationModalToggle` from `state/application/hooks`, and `NetworkMigrationModal` from `modals/NetworkMigrationModal`.\n\nThe component uses the `useState` hook to manage the state of the `showBanner` variable, which determines whether the banner is displayed or not. The `toggleNetworkMigrationModal` function is used to toggle the state of the network migration modal.\n\nThe component returns a fragment that conditionally renders the banner based on the value of `showBanner` and the `type` prop. If `showBanner` is true and `type` is \"network_migration\", the component renders a banner with a link to migrate the network. If `showBanner` is true and `type` is \"default\", the component renders a banner with a link to a BSC Scan page. If `showBanner` is false, the component does not render anything.\n\nThe banner is styled using Tailwind CSS classes, and includes an X icon that can be clicked to dismiss the banner. The `NetworkMigrationModal` component is also rendered at the bottom of the banner.\n\nThis component can be used in the larger project to display important information or calls to action at the top of the screen. The `type` prop can be used to customize the content of the banner based on the context in which it is used. The `showBanner` state can be controlled by other components or hooks to show or hide the banner based on certain conditions.\n## Questions: \n 1. What is the purpose of the `Banner` component?\n- The `Banner` component is used to display a banner with different content based on the `type` prop passed to it.\n\n2. What is the `useNetworkMigrationModalToggle` hook used for?\n- The `useNetworkMigrationModalToggle` hook is used to toggle the visibility of the `NetworkMigrationModal` component.\n\n3. What is the purpose of the `Copy` component?\n- The `Copy` component is used to copy a URL to the clipboard when clicked, and it also renders a child component with the URL as a link.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Banner/index.md"}}],["537",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Blocklist/index.tsx)\n\nThe code above is a React component called `Blocklist` that checks if a user's Ethereum address is blocked. The purpose of this component is to prevent users with blocked addresses from accessing certain parts of the application. \n\nThe component imports `React` and `useMemo` from the `react` library, as well as `BLOCKED_ADDRESSES` and `useActiveWeb3React` from other files in the project. \n\nThe `Blocklist` component takes in a `children` prop, which is a `ReactNode` type. This prop is used to render the children components of the `Blocklist` component. \n\nThe `useActiveWeb3React` hook is used to get the user's Ethereum address from the active Web3 React context. The `useMemo` hook is used to memoize the result of the `Boolean` function that checks if the user's address is in the `BLOCKED_ADDRESSES` array. \n\nIf the user's address is in the `BLOCKED_ADDRESSES` array, the `blocked` variable will be `true`, and the component will return a `` element with the text \"Blocked address\". Otherwise, the component will return the `children` components.\n\nThis component can be used in the larger project to prevent users with blocked addresses from accessing certain parts of the application. For example, it can be used to prevent users with known fraudulent addresses from interacting with the application's smart contracts. \n\nHere is an example of how the `Blocklist` component can be used in another component:\n\n```\nimport React from 'react'\nimport Blocklist from './Blocklist'\n\nexport default function MyComponent() {\n return (\n \n \n )\n}\n```\n## Questions: \n 1. What is the purpose of the `BLOCKED_ADDRESSES` constant?\n- `BLOCKED_ADDRESSES` is a constant that likely contains a list of addresses that are not allowed to access certain parts of the application.\n\n2. What is the `useMemo` hook used for in this code?\n- The `useMemo` hook is used to memoize the result of a function that determines whether the current user's account is in the `BLOCKED_ADDRESSES` list. This can improve performance by avoiding unnecessary re-renders.\n\n3. What does the `Blocklist` component do if the user's account is blocked?\n- If the user's account is in the `BLOCKED_ADDRESSES` list, the `Blocklist` component will render a simple message saying \"Blocked address\". Otherwise, it will render its children.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Blocklist/index.md"}}],["538",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/BlogCards/index.tsx)\n\nThe code above is a React component that renders a section containing a list of blog articles and a link to the Zoo Medium page. The component takes in an object called `data` as a prop, which is an array of objects representing each blog article. \n\nThe `section` element has a class name of `pb-16 px-6 lg:max-w-7xl lg:mx-auto`, which sets the padding and maximum width of the section for different screen sizes. The `div` element inside the section has a class name of `flex flex-col items-center mb-16 lg:grid lg:grid-cols-3 lg:place-items-stretch lg:gap-12`, which sets the layout of the blog articles for different screen sizes. \n\nThe `data` array is mapped over using the `map` method, which returns an `Article` component for each object in the array. The `Article` component is imported from the `components/blog/articles` file. The `key` prop is set to the `name` property of each article object to ensure that each component has a unique identifier. \n\nThe `div` element after the `map` method is used to render a link to the Zoo Medium page. The link has a class name of `border border-green text-green text-sm md:text-base font-semibold px-8 py-3 md:px-6 lg:px-16 rounded-full hover:cursor-pointer`, which sets the styling of the link. The `href` attribute is set to the Zoo Medium page URL, and the `target` attribute is set to `_blank` to open the link in a new tab. The `rel` attribute is set to `noreferrer` to prevent security risks. \n\nFinally, the `BlogCards` component is exported as the default export of the file. This component can be used in other parts of the Zoo project to render a list of blog articles and a link to the Zoo Medium page. \n\nExample usage:\n\n```\nimport BlogCards from \"components/blog/cards\";\n\nconst BlogPage = () => {\n const articles = [\n { name: \"Article 1\", content: \"...\" },\n { name: \"Article 2\", content: \"...\" },\n { name: \"Article 3\", content: \"...\" },\n ];\n\n return (\n ![](\"nft-image.png\")
,\n name: \"Cool NFT\",\n address: \"0x1234567890abcdef\",\n price: \"1.23\",\n days: \"5\",\n yields: \"10%\",\n currency: \"ETH\",\n};\n\nconst NftCardPage = () => {\n return (\n \n \n \n )\n}\n```\n\nIn this example, the `MyComponent` component imports the `Carousel` and `Slide` components and uses them to create a carousel of three slides, each with an image and a caption. The `Carousel` component takes care of the layout and behavior of the carousel, while the `Slide` component defines the content of each slide.\n## Questions: \n 1. What is the purpose of the `Swiper` library and how is it being used in this code?\n - The `Swiper` library is being used to create a carousel component with pagination and navigation. It is imported and configured with various options such as `slidesPerView`, `spaceBetween`, and `loop`.\n2. What is the purpose of the `Carousel` component and how is it being used?\n - The `Carousel` component is a wrapper around the `Swiper` component that accepts `children` as props. It is being used to render a carousel with the specified options and the child components passed to it.\n3. Why are the `Pagination` and `Navigation` modules being imported separately and passed as props to the `Swiper` component?\n - The `Pagination` and `Navigation` modules are being imported separately and passed as props to the `Swiper` component to enable pagination and navigation functionality. This allows for more modular and customizable usage of the `Swiper` library.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Carousel/index.md"}}],["544",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CartSideNav/index.tsx)\n\nThe `CartSideNav` component is a React component that renders a shopping cart side navigation bar. It imports the `useState` hook from the `react` library and the `useAppSelector` hook from a custom `state/hooks` module. It also imports the `CartItem` type from a custom `types/cart` module.\n\nThe component renders a shopping cart icon with the number of items in the cart. When the icon is clicked, a dropdown menu appears with a list of items in the cart. Each item in the list displays an image, name, size, color, and quantity. The user can edit the quantity of an item by clicking the edit button and entering a new quantity in the input field that appears. The user can also delete an item from the cart by clicking the delete button.\n\nThe `CartSideNav` component uses the `useAppSelector` hook to retrieve the `CartItems` array from the Redux store. The `useState` hook is used to manage the state of the `toggleCart`, `quantity`, and `showInput` variables. The `toggleCart` variable is used to toggle the visibility of the dropdown menu. The `quantity` variable is used to store the new quantity entered by the user. The `showInput` variable is used to toggle the visibility of the quantity input field.\n\nThe component returns a JSX fragment that conditionally renders the shopping cart icon and the dropdown menu. The icon and the number of items in the cart are only displayed if there is at least one item in the cart. The dropdown menu is only displayed if the `toggleCart` variable is true.\n\nThe dropdown menu is implemented using a `ul` element with a list of `div` elements that display the details of each item in the cart. The `map` method is used to iterate over the `CartItems` array and render a `div` element for each item. The `key` attribute is set to the `index` of each item to improve performance.\n\nOverall, the `CartSideNav` component provides a user-friendly way to view and manage the items in the shopping cart. It can be easily integrated into a larger e-commerce application to improve the user experience.\n## Questions: \n 1. What is the purpose of the `useAppSelector` hook and how is it used in this code?\n - The `useAppSelector` hook is used to extract data from the Redux store and is passed a callback function that takes the store state as an argument. In this code, it is used to extract an array of `CartItem` objects from the store state.\n2. What is the purpose of the `toggleCart` state variable and how is it used in this code?\n - The `toggleCart` state variable is used to toggle the visibility of the cart side navigation when the cart icon is clicked. It is initialized to `false` and toggled using the `setToggleCart` function when the cart icon is clicked.\n3. What is the purpose of the `showInput` state variable and how is it used in this code?\n - The `showInput` state variable is used to toggle the visibility of the quantity input field when the edit button is clicked. It is initialized to `false` and toggled using the `setShowInput` function when the edit button is clicked.","metadata":{"source":".autodoc/docs/markdown/core/src/components/CartSideNav/index.md"}}],["545",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Checkbox/index.tsx)\n\nThis code defines a React component called `Checkbox` that renders an HTML checkbox input element. The component takes in a `color` prop, which is a string that can be one of three values: \"pink\", \"blue\", or \"indigo\". The `set` prop is a function that is called whenever the checkbox is checked or unchecked, and it takes in a boolean value that represents the new checked state of the checkbox.\n\nThe `COLOR` object is used to map each color string to a CSS class that is applied to the checkbox element when it is checked. These classes define the background color and focus ring color of the checkbox.\n\nThe `Checkbox` component renders an `input` element with the `type` attribute set to \"checkbox\". It also sets an `onChange` event handler that calls the `set` function with the new checked state of the checkbox. The `className` prop is used to add additional CSS classes to the checkbox element, and it defaults to an empty string if not provided.\n\nThis component can be used in other parts of the project to render a checkbox input element with a specific color and behavior. For example, it could be used in a form to allow the user to select one or more options. Here is an example usage of the `Checkbox` component:\n\n```jsx\nimport Checkbox from \"./Checkbox\";\n\nfunction MyForm() {\n const [isChecked, setIsChecked] = useState(false);\n\n return (\n \n );\n}\n```\n\nIn this example, the `Checkbox` component is used to render a pink checkbox with the label \"Option 1\". The `setIsChecked` function is called whenever the checkbox is checked or unchecked, and it updates the `isChecked` state variable accordingly.\n## Questions: \n 1. What is the purpose of the `QuestionHelper` and `Settings` imports?\n - It is unclear from this code snippet what the `QuestionHelper` and `Settings` modules are used for. Further investigation into the codebase may be necessary to determine their purpose.\n\n2. What is the significance of the `Color` type and `COLOR` object?\n - The `Color` type is a union of three string literals, and the `COLOR` object maps each of these strings to a CSS class string. It is likely that this code is used to generate checkboxes with different colors based on the `color` prop passed to the `Checkbox` component.\n\n3. What is the purpose of the `set` function in the `CheckboxProps` interface?\n - The `set` function is a callback that is called when the checkbox is checked or unchecked. It is likely that this function is used to update the state of the parent component that renders the `Checkbox`.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Checkbox/index.md"}}],["546",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CloseIcon/index.tsx)\n\nThe code above defines a React component called `CloseIcon`. This component renders an `X` icon from the `react-feather` library and applies a `cursor-pointer` class to it. The `props` parameter allows for additional props to be passed in and spread onto the `X` element.\n\nThis component can be used in a larger project as a reusable icon for closing or dismissing a modal, dialog, or other UI element. For example, in a modal component, the `CloseIcon` component can be used as the close button to dismiss the modal when clicked.\n\nHere is an example of how the `CloseIcon` component can be used in a modal component:\n\n```\nimport React from 'react'\nimport CloseIcon from './CloseIcon'\n\nconst Modal = ({ isOpen, onClose, children }) => {\n return (\n \n \n);\n```\n## Questions: \n 1. What is the purpose of the `Column` and `ColumnCenter` components?\n- The `Column` component is a flex container that vertically centers its children, while the `ColumnCenter` component is a variant of `Column` that horizontally centers its children as well.\n2. What are the possible values for the `gap` and `justify` props in the `AutoColumn` component?\n- The `gap` prop can be set to `\"sm\"`, `\"md\"`, `\"lg\"`, or a custom string value, while the `justify` prop can be set to `\"stretch\"`, `\"center\"`, `\"start\"`, `\"end\"`, `\"flex-start\"`, `\"flex-end\"`, or `\"space-between\"`.\n3. What is the purpose of the `classNames` function imported from \"../../functions\"?\n- The `classNames` function is likely a utility function that concatenates multiple class names together with a space separator, allowing for more flexible and dynamic class name generation in the components. However, without seeing the implementation of the `classNames` function, it is difficult to say for certain.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Column/index.md"}}],["548",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ComingSoon/index.tsx)\n\nThis code defines a React component called `ComingSoon` that displays a \"Coming Soon\" message and a link to the home page of the website. The component imports the `React` and `useEffect` modules from the `react` package, as well as the `Link` component from the `next/link` package. It also imports an `fadeInOnScroll` function from an `animation` module.\n\nThe `ComingSoon` component renders a div that contains another div with a `flex` layout. The inner div contains a heading that says \"Coming Soon\" and a link to the home page. The `comingSoonRef` variable is a reference to the inner div, which is used to apply an animation effect when the component is scrolled into view. The `useEffect` hook is used to call the `fadeInOnScroll` function with the `comingSoonRef` reference as an argument when the component is mounted.\n\nThis component can be used in a larger project to display a \"Coming Soon\" message on a page that is not yet ready for public access. The animation effect adds a visual cue to draw attention to the message. The `Link` component can be customized to link to any page on the website, not just the home page. Here is an example of how the `ComingSoon` component can be used in a React application:\n\n```\nimport React from \"react\";\nimport ComingSoon from \"./ComingSoon\";\n\nconst MyPage = () => {\n return (\n \n \n );\n}\n```\n\nIn the example above, a `Container` component is imported and used to create a container with a maximum width of \"lg\" and an additional CSS class of \"my-container\". The `h1` element is rendered within the container.\n## Questions: \n 1. What is the purpose of the `classNames` function imported from \"../../functions\"?\n- A smart developer might ask what the `classNames` function does and how it is used in this code. The `classNames` function is likely used to concatenate multiple class names together and return a single string that can be used as a value for the `className` prop.\n\n2. What is the significance of the `MAX_WIDTH` object?\n- A smart developer might ask why the `MAX_WIDTH` object is defined and how it is used in this code. The `MAX_WIDTH` object maps different string values to CSS class names that set the maximum width of the container. This object is used to dynamically set the `className` prop of the `div` element based on the `maxWidth` prop passed to the `Container` component.\n\n3. What is the purpose of the `Container` component?\n- A smart developer might ask what the `Container` component does and how it is used in this code. The `Container` component is a reusable component that renders a `div` element with a maximum width based on the `maxWidth` prop passed to it. It also accepts a `className` prop and any additional props that can be spread onto the `div` element.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Container/index.md"}}],["550",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CurrencyInputPanel/FiatValue.tsx)\n\nThe code above is a React component that renders a fiat value and a price impact. It imports `Currency`, `CurrencyAmount`, and `Percent` from the `@zoolabs/zdk` library, as well as `React` and `useMemo` from the `react` library, and `t` and `warningSeverity` from other files in the project. \n\nThe `FiatValue` component takes two props: `fiatValue` and `priceImpact`. `fiatValue` is a `CurrencyAmount` object that represents a fiat value, or null/undefined if there is no fiat value. `priceImpact` is a `Percent` object that represents the price impact, or undefined if there is no price impact. \n\nThe component first uses `useMemo` to compute a `priceImpactClassName` based on the `priceImpact` prop. If `priceImpact` is undefined, `priceImpactClassName` is also undefined. If `priceImpact` is less than 0, `priceImpactClassName` is \"text-green\". Otherwise, `priceImpactClassName` is computed based on the `severity` of the `priceImpact`, which is determined using the `warningSeverity` function imported from another file. If `severity` is less than 1, `priceImpactClassName` is \"text-secondary\". If `severity` is less than 3, `priceImpactClassName` is \"text-yellow\". Otherwise, `priceImpactClassName` is \"text-red\". \n\nThe component then returns a div that contains the fiat value and price impact. If `fiatValue` is not null/undefined, the fiat value is rendered as a string with a dollar sign and commas for thousands separators. If `priceImpact` is not undefined, the price impact is rendered as a string with a percent sign and a class name based on `priceImpactClassName`. \n\nThis component can be used in a larger project that involves displaying fiat values and price impacts. It can be imported into other React components and used like any other React component. For example, it could be used in a trading interface to display the fiat value and price impact of a trade. \n\nExample usage:\n\n```\nimport { FiatValue } from \"./FiatValue\";\n\nfunction TradeSummary({ fiatValue, priceImpact }) {\n return (\n console.log(\"Panel clicked!\")}\n onCurrencySelect={(currency) => console.log(`Selected currency: ${currency.symbol}`)}\n currency={{ symbol: \"ETH\" }}\n disableCurrencySelect={false}\n otherCurrency={{ symbol: \"USDC\" }}\n id=\"currency-select-panel\"\n showCommonBases={true}\n/>\n```\n## Questions: \n 1. What is the purpose of this code and where is it used in the project?\n- This code is a React component called `CurrencySelectPanel` that renders a panel for selecting a currency. It is likely used in a part of the project where currency selection is required.\n\n2. What dependencies does this code have and what are they used for?\n- This code has several dependencies including `@heroicons/react`, `@zoolabs/zdk`, and `@lingui/macro`. These dependencies are used for icons, currency-related functionality, and internationalization respectively.\n\n3. What props does the `CurrencySelectPanel` component accept and what are their types?\n- The `CurrencySelectPanel` component accepts several props including `onClick`, `onCurrencySelect`, `currency`, `disableCurrencySelect`, `otherCurrency`, `id`, and `showCommonBases`. Their types are defined in the `CurrencySelectPanelProps` interface and include optional functions, booleans, and currency objects.","metadata":{"source":".autodoc/docs/markdown/core/src/components/CurrencySelectPanel/index.md"}}],["554",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CurrencySwitch/index.tsx)\n\nThe code above is a React component that exports a switch button that toggles between two currencies, ZOO and BNB. The switch button is styled using Material UI's `styled` function and is composed of three main parts: the switch base, the switch thumb, and the switch track. \n\nThe switch base is the underlying structure of the switch button and is styled to have a width of 80 pixels, a height of 40 pixels, and no padding. The switch thumb is the circular button that moves along the switch track when the switch is toggled. The switch thumb is styled to have a width and height of 32 pixels, a background image of the Zoo logo, and a white background color. The switch track is the bar that the switch thumb moves along when the switch is toggled. The switch track is styled to have a border radius of 20 pixels and a dark background color.\n\nThe `CurrencySwitch` component takes two props: `checked` and `checkFunc`. `checked` is a boolean that determines whether the switch is toggled or not, and `checkFunc` is a function that is called when the switch is toggled. The `CurrencySwitch` component renders a `FormGroup` component that contains a `Stack` component with three child components: two `h6` elements that display the currency names and the `UiSwitch` component that is the styled switch button. \n\nThis component can be used in a larger project that requires a switch button to toggle between two options. For example, in a cryptocurrency trading app, this switch button can be used to toggle between two currencies that the user wants to trade. \n\nExample usage:\n\n```\nimport CurrencySwitch from './CurrencySwitch'\n\nfunction TradingPage() {\n const [isZooSelected, setIsZooSelected] = useState(true)\n\n const handleCurrencyToggle = () => {\n setIsZooSelected(!isZooSelected)\n }\n\n return (\n \n \n \n```\n## Questions: \n 1. What external libraries or frameworks are being used in this code?\n- The code is importing the `Button` and `Tooltip` components from the `@mui/material` library, and is also using the `React` library.\n\n2. What is the purpose of the `CustomTooltip` component?\n- The `CustomTooltip` component is a custom wrapper around the `Tooltip` component from the `@mui/material` library, which adds some custom styling and behavior to the tooltip.\n\n3. What props can be passed to the `CustomTooltip` component?\n- The `CustomTooltip` component accepts three props: `title` (a string that specifies the tooltip text), `children` (any valid React node that will be wrapped by the tooltip), and `center` (an optional boolean that determines whether the tooltip should be centered above the wrapped content).","metadata":{"source":".autodoc/docs/markdown/core/src/components/CustomTooltip/index.md"}}],["557",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Dots/index.tsx)\n\nThe code above defines a React component called `Dots` that renders a span element with a CSS class that adds an animated ellipsis to the end of the text content. The component takes two props: `children` and `className`. The `children` prop is optional and defaults to an empty span element. The `className` prop is also optional and is used to add additional CSS classes to the span element.\n\nThe `Dots` component uses the `classNames` function from a file located in the `functions` directory to concatenate the CSS classes passed in the `className` prop with the default CSS classes. The resulting CSS classes are applied to the span element using the `className` attribute.\n\nThe CSS classes applied to the span element include `after:inline-block`, which sets the display property to inline-block, `dots`, which sets the font size and color of the text, `after:animate-ellipsis`, which adds an animation that displays three dots in sequence, and `after:w-4` and `after:text-left`, which set the width and text alignment of the ellipsis animation.\n\nThis component can be used in the larger project to display a loading indicator or to indicate that content is being loaded asynchronously. For example, the `Dots` component could be used in a button component to indicate that a form is being submitted or in a table component to indicate that data is being fetched from a server.\n\nHere is an example of how the `Dots` component can be used in a React component:\n\n```\nimport Dots from \"./components/Dots\";\n\nfunction LoadingIndicator() {\n return (\n \n```\n\nThis would render two logos, one for USD and one for BTC, with a size of 24 pixels and a margin of 4 pixels on the top and bottom. The logos would be separated by a margin of 2 pixels.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `DoubleCurrencyLogo` that renders two currency logos side by side.\n\n2. What are the required inputs for this component?\n- The required inputs for this component are two currency objects (`currency0` and `currency1`) and an optional `size` value.\n\n3. What is the `classNames` function used for?\n- The `classNames` function is used to concatenate multiple class names together for the `div` element that wraps the two currency logos.","metadata":{"source":".autodoc/docs/markdown/core/src/components/DoubleLogo/index.md"}}],["560",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Empty/index.tsx)\n\nThe code above is a React component called `Empty` that renders an empty container with optional children and a customizable className. This component is part of the larger `zoo` project and can be used to display empty states in various parts of the application.\n\nThe `Empty` component is a functional component that takes in two props: `children` and `className`. The `children` prop is optional and can be used to pass in any child elements that should be rendered inside the empty container. The `className` prop is also optional and can be used to add any additional CSS classes to the container.\n\nThe `Empty` component uses the `classNames` function from the `styling` module to generate a dynamic className for the container. The `classNames` function takes in any number of arguments, which can be strings or objects, and returns a concatenated string of all the valid class names. In this case, the `classNames` function is used to combine the following classes: \"flex\", \"flex-col\", \"justify-center\", \"items-center\", \"py-4\", \"px-3\", \"rounded\", and \"min-h-empty\". These classes are all part of the Tailwind CSS framework and are used to style the empty container.\n\nOnce the className is generated, it is passed to the `div` element as a prop. The `div` element is the main container for the `Empty` component and is rendered with the generated className and any child elements passed in through the `children` prop.\n\nOverall, the `Empty` component is a simple and reusable component that can be used to display empty states in various parts of the `zoo` application. Here is an example of how the `Empty` component can be used:\n\n```\nimport Empty from \"./components/Empty\";\n\nconst MyComponent = () => {\n const data = [];\n\n return (\n \" in the component declaration?\n \"FC\" stands for \"Function Component\" and is a shorthand way of declaring a component that takes props and returns JSX. \"React.HTMLAttributes\" is a type definition for the props that this component can accept, specifically HTML attributes that can be applied to a div element.\n\n3. What is the purpose of the \"classNames\" function imported from \"../../functions/styling\"?\n The \"classNames\" function is likely a utility function for generating CSS class names based on the arguments passed to it. This can make it easier to apply dynamic or conditional styling to components.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Empty/index.md"}}],["561",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/EndangeredSpecies/index.tsx)\n\nThe code is a React component that renders a UI for a feature called \"Endangered Species\" in the larger project. The UI consists of a series of cards that describe different actions that can be taken with animal NFTs. The component imports several hooks and functions from other parts of the project to handle interactions with the blockchain and state management.\n\nThe component uses the `useActiveWeb3React` hook to get the user's account, library, and chain ID from the active Web3 context. It also uses the `useBuyZoo` hook to get a function that can be called to buy the project's native token, $ZOO. The `useState` hook is used to manage several boolean flags that control the display of different UI elements.\n\nThe UI is structured as a series of cards that describe different actions that can be taken with animal NFTs. Each card contains an icon, a title, and a description. The first card describes the overall purpose of the feature and how it relates to non-profit organizations. The remaining cards describe actions that can be taken with animal NFTs, such as hatching, feeding, growing, and breeding. The UI also includes a call-to-action button that triggers the `handleFunds` function when clicked.\n\nThe `handleFunds` function is imported from a utility file and takes the user's chain ID and a `buyZoo` function as arguments. It uses the `faucet` hook to get some test tokens and then calls the `buyZoo` function to buy $ZOO tokens with those test tokens. Finally, it dispatches an action to update the user's $ZOO balance.\n\nOverall, this code provides a UI for the \"Endangered Species\" feature and handles interactions with the blockchain and state management. It can be used as a standalone component or integrated into a larger project. Here is an example of how this component might be used in a larger project:\n\n```jsx\nimport React from \"react\";\nimport EndangeredSpecies from \"zoo/EndangeredSpecies\";\n\nconst HomePage = () => {\n return (\n \n \n \n )\n}\n\nexport default Header\n```\n\nIn this example, the `ThemeSwitcher` component is included in the `Header` component, allowing the user to toggle between light and dark themes from the header of the website.\n## Questions: \n 1. What library is being used for theming and icon rendering?\n- The code is using `next-themes` library for theming and `@fortawesome/react-fontawesome` and `@fortawesome/free-solid-svg-icons` for icon rendering.\n\n2. What is the purpose of the `ThemeSwitcher` component?\n- The `ThemeSwitcher` component is responsible for rendering a button that toggles between light and dark themes when clicked.\n\n3. How is the button's text color determined based on the current theme?\n- The button's text color is determined by checking if the current theme is `'dark'`. If it is, the text color is set to white, otherwise it is set to black.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Header/ThemeSwitcher.md"}}],["573",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Header/drop.tsx)\n\nThis code defines a React component called `DropTopBar` that renders a navigation bar for the Zoo project website. The navigation bar includes a logo, links to various pages on the website, a dropdown menu for additional links, a button to open a cart side panel, and a button to connect a wallet. The component imports various dependencies, including `@zoolabs/zdk`, `next/router`, `@headlessui/react`, and `@heroicons/react/outline`. \n\nThe `DropTopBar` component takes an object `props` as input, which can include boolean values for `banner`, `isModal`, and `transparent`. These values determine the appearance of the navigation bar. \n\nThe component uses various hooks to access data from the Redux store and the Web3 provider. For example, it uses the `useActiveWeb3React` hook to get the user's account, chain ID, library, and connector. It also uses the `useETHBalances` hook to get the user's ETH balance, and the `useZoobalance` hook to get the user's ZOO balance. \n\nThe component renders a `Popover` component from `@headlessui/react`, which provides a dropdown menu for additional links. The dropdown menu includes links to the marketplace, chart, community, and learn pages. \n\nThe component also renders a `Web3Status` component, which displays the user's wallet connection status and allows the user to connect or disconnect their wallet. When the user is connected to a wallet, the component displays a `NetworkPopup` component, which shows the user's ETH and ZOO balances and allows the user to switch networks. \n\nFinally, the component renders a `CartSideNav` component, which displays the user's cart items in a side panel. \n\nThis component is used as the header for various pages on the Zoo project website, providing a consistent navigation experience across the site. For example, it is used on the homepage, marketplace, and community pages.\n## Questions: \n 1. What is the purpose of the `DropTopBar` component?\n- The `DropTopBar` component is a header navigation bar that includes links to various pages, a logo, a wallet connection status, and a shopping cart.\n\n2. What libraries and hooks are being imported and used in this file?\n- The file imports and uses several libraries and hooks, including `@zoolabs/zdk`, `React`, `next/router`, `@headlessui/react`, `@lingui/macro`, `useActiveWeb3React`, `useETHBalances`, `useLingui`, `useZoobalance`, `useAppSelector`, `CartSideNav`, `NetworkModal`, and `NetworkPopup`.\n\n3. What is the purpose of the `More`, `Community`, and `Learn` components?\n- The `More` component is a dropdown menu that includes additional links to various pages. The `Community` and `Learn` components are buttons that link to specific pages related to the project.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Header/drop.md"}}],["574",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Icons/close-icon.tsx)\n\nThis code defines a React component called `CloseIcon`. The component returns an SVG element that displays a white X inside a circle. The X is created using a `path` element with a specific set of coordinates that form the shape of the X. The `fill` attribute of the `path` element is set to white, which fills the X with white color.\n\nThis component can be used in a larger project as an icon for a close button or to indicate that an action will close or cancel something. The component can be imported into another React component and used like any other React component. For example, if we have a `Modal` component that needs a close button, we can import the `CloseIcon` component and use it like this:\n\n```\nimport React from \"react\";\nimport CloseIcon from \"./CloseIcon\";\n\nconst Modal = () => {\n return (\n \n \n \n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component that renders a modal using the Headless UI library.\n\n2. What props does the `HeadlessUIModal` component accept?\n- The `HeadlessUIModal` component accepts three props: `isOpen` (a boolean indicating whether the modal should be open), `onDismiss` (a function to be called when the modal is dismissed), and `children` (optional React nodes to be rendered inside the modal).\n\n3. What is the purpose of the `Transition` and `Dialog` components from the Headless UI library?\n- The `Transition` component is used to animate the modal when it enters and exits the screen, while the `Dialog` component provides the basic structure and behavior of the modal (such as closing when the user clicks outside of it).","metadata":{"source":".autodoc/docs/markdown/core/src/components/Modal/HeadlessUIModal.md"}}],["594",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Modal/index.tsx)\n\nThe `Modal` component in this file is used to create a modal dialog box that can be used in a larger project. The component takes in several props that can be used to customize the modal's appearance and behavior. \n\nThe `isOpen` prop is used to determine whether the modal is currently open or closed. The `onDismiss` prop is a callback function that is called when the user clicks outside the modal or presses the escape key. \n\nThe `minHeight` and `maxHeight` props are used to set the minimum and maximum height of the modal, respectively. The `padding` prop is used to set the amount of padding around the content of the modal. The `maxWidth` prop is used to set the maximum width of the modal. \n\nThe `isMax` prop is used to determine whether the modal should take up the entire screen. The `isFullWidth` prop is used to determine whether the modal should take up the full width of the screen. The `backgroundColor` prop is used to set the background color of the modal. \n\nThe `scrollable` prop is used to determine whether the modal should be scrollable if its content exceeds its maximum height. The `transitionProps` prop is an object that can be used to pass additional props to the `Transition` component that is used to animate the modal.\n\nThe `Modal` component renders a `Transition` component that is used to animate the modal when it is opened or closed. The `Dialog` component is used to create the actual modal dialog box. \n\nThe content of the modal is rendered inside a `div` element with the class `flex flex-col w-full h-full p-6 overflow-y-auto rounded bg-dark-900`. The `minHeight` and `maxHeight` props are used to set the minimum and maximum height of this `div` element. \n\nOverall, this `Modal` component provides a flexible and customizable way to create modal dialog boxes in a larger project. Here is an example of how the `Modal` component can be used:\n\n```\nimport Modal from './Modal';\n\nfunction App() {\n const [isOpen, setIsOpen] = useState(false);\n\n const handleOpenModal = () => {\n setIsOpen(true);\n };\n\n const handleCloseModal = () => {\n setIsOpen(false);\n };\n\n return (\n \n About\n \n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a custom NavLink component that wraps around the Next.js Link component and adds an active class to the link when it matches the current URL.\n\n2. What are the required dependencies for this code to work?\n- This code requires the following dependencies to be imported: Link and LinkProps from 'next/link', React and Children from 'react', and useRouter from 'next/router'.\n\n3. How does the isActive variable determine if a link is active?\n- The isActive variable is determined by checking if the current URL matches the href or as props of the NavLink component. If the exact prop is true, it checks for an exact match, otherwise it checks if the current URL starts with the href or as props.","metadata":{"source":".autodoc/docs/markdown/core/src/components/NavLink/index.md"}}],["600",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/NewNFTCard/index.tsx)\n\nThe code is a React component that renders a card displaying information about a specific NFT (non-fungible token) item. The component takes in two props: `nftItem`, which is an object containing information about the NFT, and `onClick`, which is a function that is called when the user clicks on the \"View Item\" button.\n\nThe component first imports several modules, including `dynamic` from the `next/dynamic` package, `getAge` from a `functions` module, `Image` from the `next/image` package, `React`, and `moment`. It then defines an interface for the `IndexProps` object that is passed to the component.\n\nThe `NewNFTCard` component renders a div that contains several elements. The first element is a div that displays the NFT's initials in a circle, with the background color of the circle determined by the first letter of the NFT's attributes. The second element is a video or 3D model of the NFT, depending on the value of the `kind` property of the `nftItem` object. If `kind` is 0 or 2, a video is displayed, otherwise a 3D model is displayed using the `ModelViewer` component. The third element displays the age of the NFT and the time since it was created. The fourth element displays the name of the NFT, its ID, and whether it is an \"Origin\" NFT. The fifth element is a div that displays the ZOO logo and some text. The final element is a div that displays a \"View Item\" button, which calls the `onClick` function when clicked.\n\nThis component can be used in a larger project that involves displaying information about NFTs. It can be used to display a single NFT item, and can be reused multiple times to display multiple NFT items. Here is an example of how the component can be used:\n\n```\nimport NewNFTCard from \"./NewNFTCard\";\n\nconst nftItem = {\n id: 1,\n name: \"My NFT\",\n kind: 0,\n token_uri: \"https://example.com/nft.mp4\",\n glb_animation_url: \"https://example.com/nft.glb\",\n usdz_animation_url: \"https://example.com/nft.usdz\",\n timestamp: 1631234567,\n stage: 1,\n attributes: [\n {\n trait_type: \"Type\",\n value: [\"Egg\"],\n },\n ],\n};\n\nfunction handleClick() {\n console.log(\"View item clicked\");\n}\n\nfunction App() {\n return (\n Popover content
} show={showPopover}>\n \n\n```\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code defines a `Popover` component that can be used to display content in a pop-up window. It uses the `usePopper` hook from the `react-popper` library to position the pop-up relative to a reference element, and also includes an arrow element that can be positioned using the same hook.\n\n2. What are the required and optional props for the `Popover` component?\n- The `Popover` component requires `content`, `show`, and `children` props. The `content` prop should be a React node that will be displayed in the pop-up, the `show` prop is a boolean that determines whether the pop-up is visible, and the `children` prop is the reference element that the pop-up will be positioned relative to. The `placement` prop is optional and determines the initial placement of the pop-up relative to the reference element.\n\n3. What libraries and hooks are used in this code?\n- This code uses the `react`, `@popperjs/core`, `react-popper`, and `@headlessui/react` libraries. It also uses the `useState` and `useCallback` hooks from React, as well as a custom `useInterval` hook that is not defined in this file.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Popover/index.md"}}],["606",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Popups/PopupItem.tsx)\n\nThe `PopupItem` component is a React component that renders a popup notification. It takes in three props: `removeAfterMs`, `content`, and `popKey`. \n\nThe `removeAfterMs` prop is a number that represents the duration in milliseconds after which the popup should be removed. If it is `null`, the popup will not be removed automatically. \n\nThe `content` prop is an object that contains the content of the popup. If the `content` object has a property called `txn`, the component will render a `TransactionPopup` component with the `hash`, `success`, and `summary` properties of the `txn` object. \n\nThe `popKey` prop is a string that represents the unique key of the popup. \n\nThe component uses the `useRemovePopup` hook to get a function that removes the popup from the state. It then uses the `useCallback` hook to memoize the `removeThisPopup` function, which removes the popup with the `popKey` key. \n\nThe component also uses the `useEffect` hook to set a timeout that removes the popup after `removeAfterMs` milliseconds. If `removeAfterMs` is `null`, the effect will not be triggered. \n\nThe component renders a div with a class of `mb-4` that contains a div with a class of `relative w-full overflow-hidden rounded bg-dark-700`. Inside this div, there is another div with a class of `flex flex-row p-4` that contains the `popupContent` and a div with a class of `cursor-pointer hover:text-white` that contains an `XIcon` component. The `XIcon` component is used to close the popup when clicked. \n\nIf `removeAfterMs` is not `null`, the component also renders an `AnimatedFader` component that fades out the popup after `removeAfterMs` milliseconds. \n\nOverall, the `PopupItem` component is a reusable component that can be used to render popup notifications with different content and durations. Here is an example of how it can be used:\n\n```\nThis content is only visible to users with non-blocked addresses
\n \n
\n );\n};\n```\n## Questions: \n 1. What is the purpose of the `Article` component being imported?\n- The `Article` component is being imported from a module called `components/blog/articles`, but without further context it is unclear what this component does or how it is used in this code.\n\n2. What is the expected shape of the `data` prop being passed to `BlogCards`?\n- The `data` prop is being destructured from the `props` object and passed to the `map` function, but it is unclear what type of data this prop is expected to contain or what properties each object in the array should have.\n\n3. What is the purpose of the link in the second `div` element?\n- The link in the second `div` element points to a Medium page, but it is unclear what relevance this has to the `BlogCards` component or the `data` being passed to it.","metadata":{"source":".autodoc/docs/markdown/core/src/components/BlogCards/index.md"}}],["539",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Button/index.tsx)\n\nThe `Button` component is a reusable React component that renders a button element with customizable styles. It takes in several props, including `color`, `size`, and `variant`, which determine the appearance of the button. The `color` prop specifies the color scheme of the button, with options including blue, pink, gradient, gray, default, red, green, and indigo. The `size` prop determines the size of the button, with options including xs, sm, lg, default, and none. The `variant` prop determines the type of button, with options including outlined, filled, empty, and link.\n\nThe `Button` component also includes two additional components, `ButtonConfirmed` and `ButtonError`, which are variations of the `Button` component. `ButtonConfirmed` is used to render a button that is confirmed, with a green outline and a checkmark icon. `ButtonError` is used to render a button that indicates an error, with a red color scheme.\n\nThe `Button` component uses the `classNames` function from the `functions` module to dynamically generate class names based on the props passed to the component. These class names are used to apply the appropriate styles to the button element.\n\nOverall, the `Button` component is a flexible and customizable component that can be used throughout the project to render buttons with consistent styles. Here is an example of how the `Button` component can be used:\n\n```\nimport Button from \"./Button\";\n\nfunction MyComponent() {\n return (\n Blog
\n\n \n
\n );\n}\n```\n## Questions: \n 1. What are the different types of button variants available in this code?\n- There are four types of button variants available: outlined, filled, empty, and link.\n\n2. What are the different types of button colors available in this code?\n- There are eight types of button colors available: blue, pink, gradient, gray, default, red, green, and indigo.\n\n3. What is the purpose of the `ButtonConfirmed` and `ButtonError` functions?\n- `ButtonConfirmed` and `ButtonError` are functions that return a `Button` component with specific props and styles based on whether the `confirmed` or `error` boolean props are true or false. They are used to render buttons with specific styles for confirmation or error messages.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Button/index.md"}}],["540",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/BuyEggSection/index.tsx)\n\nThe `BuyEggSection` component is a React functional component that renders a section of the Zoo project's user interface. The section displays a list of available eggs for purchase, which are used to mint NFT animals. The component imports several dependencies, including icons from the Heroicons library, a custom loader component, and a Next.js `Link` component. \n\nThe component uses several hooks to manage state and data fetching. The `useGif` hook is used to access the global state of the project's GIF mode. The `useSelector` hook is used to access the `availableEggs` property of the Redux store, which contains an array of egg objects. The `useGetAvailableEggs` hook is used to fetch the available eggs from the project's backend API. Finally, the `useZooKeeper` hook is used to access the current user's zookeeper object.\n\nThe component renders a header and a paragraph of text that provide information about the available eggs. If the `isLoadingEggs` state variable is true, the component renders a custom loader component. Otherwise, the component renders a grid of egg objects, each of which contains an animation of the egg and a button that links to the egg's marketplace page. \n\nThe egg objects are rendered using the `availableEggs` array, which is mapped over to create a new array of egg components. Each egg component contains a `div` element that displays the egg's animation, which is rendered using a `video` element. The egg component also contains a button that links to the egg's marketplace page. \n\nOverall, the `BuyEggSection` component provides a user-friendly interface for purchasing eggs and minting NFT animals in the Zoo project. The component is designed to be reusable and can be easily integrated into other parts of the project's user interface.\n## Questions: \n 1. What is the purpose of the `useGif` hook and how is it used in this code?\n - The `useGif` hook is imported from a context called `GifContext` and is used to access the `gifMode` property from the context's state.\n2. What is the significance of the `isLoadingEggs` state variable and how is it used?\n - `isLoadingEggs` is a boolean state variable that is used to conditionally render a loading spinner while the `getAvailableEggs` function is fetching data.\n3. What is the purpose of the `CustomLoader` component and when is it rendered?\n - The `CustomLoader` component is a loading spinner that is rendered when `isLoadingEggs` is true, indicating that the `getAvailableEggs` function is fetching data.","metadata":{"source":".autodoc/docs/markdown/core/src/components/BuyEggSection/index.md"}}],["541",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/BuyNftCard/index.tsx)\n\nThe code defines a React component called `BuyNftCard` that renders a card displaying information about a non-fungible token (NFT) for sale. The component takes in several props, including an image, name, address, price, days, yields, and currency. \n\nThe `image` prop is a React node that represents the image of the NFT. The `name` prop is a string that represents the name of the NFT. The `address` prop is a string that represents the address of the NFT. The `price` prop is a string that represents the price of the NFT. The `days` prop is a string that represents the number of days left for the NFT sale. The `yields` prop is a string that represents the yield of the NFT. The `currency` prop is a string that represents the currency used for the price of the NFT. \n\nThe component renders a div that contains the NFT image and information about the NFT. The NFT image is displayed using the `image` prop. The NFT information is displayed using the `name`, `address`, `price`, `days`, `yields`, and `currency` props. The NFT name is displayed using the `name` prop. The NFT address is displayed using the `address` prop. The NFT price and currency are displayed using the `price` and `currency` props. The NFT days left is displayed using the `days` prop. The NFT yield is displayed using the `yields` prop. \n\nThe component is exported as the default export of the module, which means it can be imported and used in other parts of the project. For example, if there is a page that displays a list of NFTs for sale, the `BuyNftCard` component can be used to render each NFT card. \n\nExample usage:\n\n```\nimport BuyNftCard from \"./BuyNftCard\";\n\nconst nft = {\n image: ,\n name: \"Cool NFT\",\n address: \"0x1234567890abcdef\",\n price: \"1.23\",\n days: \"5\",\n yields: \"10%\",\n currency: \"ETH\",\n};\n\nconst NftCardPage = () => {\n return (\n \n
\n );\n};\n```\n## Questions: \n 1. What is the purpose of this component?\n- This component is a card component for buying NFTs (non-fungible tokens).\n\n2. What props does this component accept?\n- This component accepts the following props: `image`, `name`, `address`, `days`, `price`, `yields`, and `currency`.\n\n3. What is the default value for the `currency` prop?\n- The default value for the `currency` prop is `\"ZOO\"`.","metadata":{"source":".autodoc/docs/markdown/core/src/components/BuyNftCard/index.md"}}],["542",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Card/index.tsx)\n\nThe code above is a React component that exports a Card component. The Card component is a reusable component that can be used to display content in a card format. The component takes in several props, including header, footer, backgroundImage, title, description, children, and className. \n\nThe Card component is composed of a Header component and a div that contains the content of the card. The Header component is optional and can be used to display a header at the top of the card. The div that contains the content of the card is styled with a background image, a title, and a description. The background image is optional and can be set using the backgroundImage prop. The title and description are also optional and can be set using the title and description props, respectively. \n\nThe Card component can be used in a larger project to display content in a card format. For example, it can be used to display a list of products, a list of blog posts, or a list of events. The Card component can be customized by passing in different props to change the background image, title, and description. \n\nThe Header component is a simple component that takes in a className and children prop. The className prop is used to add additional styling to the header, while the children prop is used to render the content of the header. The Header component can be used in other components to display a header. \n\nBelow is an example of how the Card component can be used:\n\n```\nimport Card from \"./Card\";\n\nfunction ProductCard({ product }) {\n return (\n \n
\n \n );\n}\n```\n\nIn the example above, the Card component is used to display a product card. The product card displays the product image as the background image, the product name as the title, and the product description as the description. The content of the card is a div that displays the product price and an \"Add to Cart\" button.\n## Questions: \n 1. What is the purpose of the `Header` function and how is it used within the `Card` component?\n \n The `Header` function is a separate component that takes in a `className` and `children` prop and returns a div element with the `className` and `children` passed in. It is used within the `Card` component to render the header of the card if it is provided as a prop.\n\n2. What props can be passed into the `Card` component and what is their purpose?\n \n The `Card` component can receive several props including `header`, `footer`, `backgroundImage`, `title`, `description`, `children`, and `className`. These props are used to customize the content and styling of the card component.\n\n3. What is the purpose of the `classNames` function imported from \"../../functions/styling\" and how is it used within the `Header` component?\n \n The `classNames` function is used to concatenate multiple class names together into a single string. It is used within the `Header` component to combine the `className` prop passed into the component with the default class names for the header div element.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Card/index.md"}}],["543",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Carousel/index.tsx)\n\nThe code above defines a React component called `Carousel` that uses the Swiper library to create a carousel of slides. The `Swiper` component is imported from the `swiper/react` module, along with the `SwiperSlide`, `Pagination`, and `Navigation` components. The `swiper/css`, `swiper/css/pagination`, and `swiper/css/navigation` modules are also imported to provide the necessary CSS styles for the carousel.\n\nThe `Carousel` component takes a single prop called `children`, which is expected to be an array of `SwiperSlide` components. These components represent the individual slides in the carousel and can contain any valid React content.\n\nThe `Swiper` component is configured with several props that control its behavior. The `slidesPerView` prop determines how many slides are visible at once, while the `spaceBetween` prop sets the distance between each slide. The `slidesPerGroup` prop specifies how many slides should be scrolled at once, and the `loop` prop enables infinite looping of the slides. The `pagination` prop enables pagination for the carousel and accepts an object with various options, such as `clickable` to allow clicking on the pagination bullets. The `navigation` prop enables navigation arrows for the carousel. Finally, the `modules` prop is used to specify which Swiper modules should be loaded, in this case `Pagination` and `Navigation`.\n\nThe `Carousel` component returns a div that wraps the `Swiper` component and sets some styling using Tailwind CSS classes. The `Swiper` component is passed the `children` prop, which should be an array of `SwiperSlide` components.\n\nThis code can be used in a larger project to create a carousel of images, videos, or any other content that can be displayed in a slide format. The `Carousel` component can be imported and used in any React component that needs a carousel. For example:\n\n```\nimport Carousel from './Carousel'\nimport Slide from './Slide'\n\nconst MyComponent = () => {\n return (\n \n {product.price}\n
\n \n \n
\n )\n}\n\nexport default Modal\n```\n\nIn this example, the `CloseIcon` component is used as the close button for the modal. When the `CloseIcon` is clicked, the `onClose` function is called to close the modal. The `children` prop is used to render the content of the modal.\n\nOverall, the `CloseIcon` component is a simple and reusable component that can be used in various UI elements to provide a consistent and recognizable way to close or dismiss them.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines a React component called `CloseIcon` that renders an `X` icon from the `react-feather` library and applies a `cursor-pointer` class to it.\n\n2. What other props can be passed to the `CloseIcon` component?\n - Any additional props passed to the `CloseIcon` component will be spread onto the `X` element, so any valid props for the `X` element from the `react-feather` library can be used.\n\n3. Is the `react-feather` library a required dependency for this code to work?\n - Yes, the `react-feather` library is imported and used in this code, so it must be installed and available in the project for this component to render properly.","metadata":{"source":".autodoc/docs/markdown/core/src/components/CloseIcon/index.md"}}],["547",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Column/index.tsx)\n\nThis code defines a set of React components for creating flexible and responsive column layouts. The components are designed to be used within a larger project, such as a web application or website, to help structure content and layout elements on a page.\n\nThe `Column` component is a basic building block for creating a column layout. It takes in any number of child elements and renders them vertically stacked within a container. The `ColumnCenter` component is a variation of `Column` that centers its child elements horizontally within the container. Both components accept additional CSS classes and HTML attributes as props.\n\nThe `AutoColumn` component is a more advanced version of `Column` that uses CSS grid to create a flexible and responsive layout. It allows for more fine-grained control over the spacing and alignment of child elements, and includes props for specifying the size of the gaps between columns and the horizontal alignment of elements within each column.\n\nOverall, these components provide a useful set of tools for creating flexible and responsive column layouts within a React application. They can be used in a variety of contexts, such as displaying lists of items, organizing form fields, or laying out content on a page. Here is an example of how the `Column` component might be used to create a simple layout:\n\n```\nimport React from \"react\";\nimport { Column } from \"./components/layout\";\n\nconst MyComponent = () => (\n \n
\n My Heading
\nSome text goes here.
\n \n\n
\n );\n};\n\nexport default MyPage;\n```\n\nIn this example, the `ComingSoon` component is used to display a message on the `MyPage` component. When the `MyPage` component is rendered, it will display the \"Coming Soon\" message below the heading.\n## Questions: \n 1. What is the purpose of the `fadeInOnScroll` function imported from \"animation\"?\n- The `fadeInOnScroll` function is used to animate the `comingSoonRef` element when it is scrolled into view.\n\n2. What is the significance of the `comingSoonRef` variable being assigned to `React.useRef()`?\n- The `comingSoonRef` variable is used to reference the `div` element that contains the \"Coming Soon\" text and the link to the home page. It is assigned to `React.useRef()` so that it can be passed to the `fadeInOnScroll` function to trigger the animation.\n\n3. What is the purpose of the `Link` component imported from \"next/link\"?\n- The `Link` component is used to create a link to the home page of the website. When clicked, it will navigate the user to the home page without causing a full page refresh.","metadata":{"source":".autodoc/docs/markdown/core/src/components/ComingSoon/index.md"}}],["549",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Container/index.tsx)\n\nThe code above is a React component that exports a container with a maximum width. The component is part of a larger project called \"zoo\". \n\nThe `MAX_WIDTH` object contains CSS classes that define the maximum width of the container. The keys of the object represent the different sizes of the container, and the values are the corresponding CSS classes. The sizes range from \"full\" to \"xs\", with \"2xl\" being the default size.\n\nThe `Container` component takes three props: `children`, `maxWidth`, and `className`. The `children` prop is used to render any child components within the container. The `maxWidth` prop is used to set the maximum width of the container. If no `maxWidth` prop is provided, the default value of \"2xl\" is used. The `className` prop is used to add any additional CSS classes to the container.\n\nThe `classNames` function is imported from a file located in the `functions` directory. This function is used to concatenate the CSS classes passed in as props with the CSS classes defined in the `MAX_WIDTH` object.\n\nThe `Container` component returns a `div` element with the concatenated CSS classes and any additional props passed in using the spread operator. The `children` prop is rendered within the `div` element.\n\nThis component can be used throughout the larger \"zoo\" project to create containers with a maximum width. Developers can customize the maximum width of the container by passing in a `maxWidth` prop, or they can use the default value of \"2xl\". They can also add any additional CSS classes to the container using the `className` prop. \n\nExample usage:\n\n```\nimport Container from \"./path/to/Container\";\n\nfunction App() {\n return (\n Welcome to My Page
\nHello, world!
\n\n
\n );\n}\n```\n## Questions: \n 1. What external libraries or dependencies are being used in this code?\n- The code is importing from \"@zoolabs/zdk\", \"@lingui/macro\", and \"../../functions/prices\".\n\n2. What is the purpose of the `FiatValue` function and what are its input parameters?\n- The `FiatValue` function takes in two parameters: `fiatValue` which is a nullable `CurrencyAmount` object, and `priceImpact` which is an optional `Percent` object. The purpose of the function is to return a JSX element that displays the `fiatValue` and `priceImpact` in a specific format.\n\n3. What is the purpose of the `priceImpactClassName` variable and how is it determined?\n- The `priceImpactClassName` variable is determined using a `useMemo` hook and is used to determine the CSS class name for the `priceImpact` element. The class name is determined based on the value of `priceImpact` and the `warningSeverity` function from the `../../functions/prices` module.","metadata":{"source":".autodoc/docs/markdown/core/src/components/CurrencyInputPanel/FiatValue.md"}}],["551",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CurrencyInputPanel/index.tsx)\n\nThe `CurrencyInputPanel` component is a reusable UI component that provides an input field for users to enter a token amount and select a token from a dropdown menu. It is used in the larger project to allow users to input token amounts for various actions, such as swapping tokens or providing liquidity.\n\nThe component imports several dependencies, including `React`, `@zoolabs/zdk`, and various other UI components and hooks. It also defines an interface `CurrencyInputPanelProps` that specifies the props that can be passed to the component.\n\nThe component renders a container `div` with a dark background and rounded corners. Within this container, there are two main sections: a token selection section and an input section.\n\nThe token selection section displays a token logo, token symbol, and dropdown arrow. If a `Pair` prop is passed to the component, it displays a double token logo instead. If a `Currency` prop is passed, it displays the corresponding token logo. If neither prop is passed, it displays an animation of a hand selecting a coin. The token symbol is displayed next to the logo, and if the user clicks on the section, a dropdown menu appears allowing the user to select a different token. If the `disableCurrencySelect` prop is set to `true`, the dropdown arrow is not displayed and the user cannot select a different token.\n\nThe input section displays an input field for the user to enter a token amount, as well as a \"Max\" button that sets the input field to the user's maximum token balance. If a `Currency` prop is passed, it displays the user's token balance next to the input field. If a `fiatValue` prop is passed, it displays the fiat value of the user's token balance. If the `hideInput` prop is set to `true`, the input section is not displayed.\n\nThe component also includes a `CurrencySearchModal` that is displayed when the user clicks on the token selection section. This modal allows the user to search for and select a different token.\n\nOverall, the `CurrencyInputPanel` component provides a flexible and reusable UI component for token input and selection. It can be used in various contexts throughout the larger project to allow users to interact with different tokens.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `CurrencyInputPanel` that renders a UI panel for selecting and inputting a currency amount.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several modules from external libraries, including `@zoolabs/zdk`, `react`, `@heroicons/react/outline`, `lottie-react`, and `@lingui/react`.\n\n3. What props can be passed to the `CurrencyInputPanel` component?\n- The `CurrencyInputPanel` component accepts several optional props, including `value`, `onUserInput`, `onMax`, `showMaxButton`, `label`, `onCurrencySelect`, `currency`, `disableCurrencySelect`, `hideBalance`, `pair`, `hideInput`, `otherCurrency`, `fiatValue`, `priceImpact`, `id`, `showCommonBases`, `renderBalance`, `locked`, and `customBalanceText`.","metadata":{"source":".autodoc/docs/markdown/core/src/components/CurrencyInputPanel/index.md"}}],["552",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CurrencyLogo/index.tsx)\n\nThis code defines a React component called `CurrencyLogo` that renders a logo for a given cryptocurrency. The logo is fetched from various sources, including the SushiSwap token icon repository and the TrustWallet asset repository. The component takes a `currency` prop, which is an object that represents the cryptocurrency to display. The `currency` object must have a `symbol` property that represents the currency's ticker symbol, and may also have a `chainId` property that represents the ID of the blockchain on which the currency is issued. If the `currency` object is not provided or is invalid, the component will render a default \"unknown\" logo.\n\nThe `CurrencyLogo` component first calls the `useHttpLocations` hook to fetch the logo URI for the given currency. If the currency is a wrapped token, the component will use the `logoURI` property of the `WrappedTokenInfo` object, or the `logoURI` property of the `tokenInfo` object if the former is not defined. The `useHttpLocations` hook returns an array of possible logo URLs based on the URI, which are then used to fetch the logo image.\n\nIf the currency is a native token (e.g. ETH or BNB), the component will use a pre-defined logo URL based on the currency's `chainId`. If the currency is a token other than a wrapped token, the component will call the `getCurrencyLogoUrls` function to generate an array of possible logo URLs based on the currency's `symbol` and `chainId`. The `getCurrencyLogoUrls` function first generates a URL based on the currency's symbol, then generates two additional URLs based on the currency's `chainId` and address. These URLs are then returned as an array.\n\nThe `CurrencyLogo` component then generates an array of logo URLs by concatenating the URI locations returned by `useHttpLocations` with the default logo URLs generated by `getCurrencyLogoUrls`. If the currency is a native token, the component will also include the pre-defined logo URL for the currency's `chainId`. If the currency is invalid or not provided, the component will include the \"unknown\" logo URL.\n\nFinally, the `CurrencyLogo` component renders a `Logo` component with the generated logo URLs, as well as the `width`, `height`, `alt`, `className`, and other props passed to it. The `Logo` component is defined in a separate file and is not included in this code snippet.\n\nThis component can be used in various parts of the larger project to display logos for different cryptocurrencies. For example, it could be used in a wallet interface to display the logos of the user's assets, or in a trading interface to display the logos of the tokens being traded. Here is an example usage of the `CurrencyLogo` component:\n\n```jsx\nimport { Currency } from \"@zoolabs/zdk\";\nimport CurrencyLogo from \"./CurrencyLogo\";\n\nfunction MyComponent() {\n const currency: Currency = { symbol: \"ETH\", chainId: 1 };\n return Trade Summary
\n\n
\n )\n}\n```\n\nIn the example above, the `TradingPage` component renders the `CurrencySwitch` component and a paragraph that displays the currently selected currency. The `TradingPage` component also has a state variable `isZooSelected` that determines whether the ZOO currency is selected or not. The `handleCurrencyToggle` function is called when the switch button is toggled and updates the `isZooSelected` state variable.\n## Questions: \n 1. What is the purpose of this code?\n This code exports a React component called `CurrencySwitch` that renders a switch with two labels, \"ZOO\" and \"BNB\", and an image of a zoo logo.\n\n2. What is the significance of the `styled` function from `@mui/material/styles`?\n The `styled` function is used to create a custom styled component based on the `Switch` component from `@mui/material/Switch`. The custom component is called `UiSwitch` and has specific styles applied to it.\n\n3. What are the props accepted by the `CurrencySwitch` component?\n The `CurrencySwitch` component accepts two props: `checked`, a boolean value that determines whether the switch is checked or not, and `checkFunc`, a function that is called when the switch is toggled.","metadata":{"source":".autodoc/docs/markdown/core/src/components/CurrencySwitch/index.md"}}],["555",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CustomLoader/index.tsx)\n\nThis code defines two React components, `CirclularLoader` and `CustomLoader`, which can be used to display a circular loading animation on a web page. \n\nThe `CirclularLoader` component returns a div containing an SVG element that draws a circle with two paths. The first path is filled with a light gray color and represents the outer circle, while the second path is filled with a dark gray color and represents the spinning animation. The `animate-spin` class applied to the SVG element causes the second path to rotate around the center of the circle, creating the loading animation. \n\nThe `CustomLoader` component returns a div that centers the `CirclularLoader` component using the `flex` and `justify-center` classes from Tailwind CSS. This component can be used as a wrapper around other content that needs to be loaded asynchronously, providing a visual cue to the user that the content is being loaded. \n\nTo use these components in a React project, they can be imported from the `zoo` module and rendered in the desired location within the component tree. For example, to display the `CustomLoader` component while fetching data from an API, the following code could be used:\n\n```\nimport React, { useState, useEffect } from \"react\";\nimport CustomLoader from \"zoo\";\n\nconst MyComponent = () => {\n const [data, setData] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n fetch(\"https://api.example.com/data\")\n .then((response) => response.json())\n .then((data) => {\n setData(data);\n setIsLoading(false);\n });\n }, []);\n\n return (\n Trading Page
\n{isZooSelected ? 'ZOO' : 'BNB'} selected
\n\n {isLoading ? (\n
\n );\n};\n```\n\nIn this example, the `useState` hook is used to manage the state of the `data` and `isLoading` variables. The `useEffect` hook is used to fetch data from an API when the component mounts, and sets the `data` and `isLoading` states accordingly. The `CustomLoader` component is rendered while the data is being fetched, and the fetched data is rendered when it becomes available.\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a custom loader component that displays a circular spinner animation.\n\n2. What is the significance of the two paths in the SVG element?\n- The first path is filled with gray color and represents the outer circle of the spinner, while the second path is filled with a darker gray color and represents the rotating part of the spinner.\n\n3. Why is the viewBox attribute set to \"3 3 18 18\" in the SVG element?\n- The viewBox attribute defines the position and dimensions of the SVG viewport. In this case, it is set to \"3 3 18 18\" to center the spinner within the viewport and to ensure that it is visible.","metadata":{"source":".autodoc/docs/markdown/core/src/components/CustomLoader/index.md"}}],["556",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CustomTooltip/index.tsx)\n\nThis code defines a React component called `CustomTooltip` that wraps the `Tooltip` component from the Material-UI library. The purpose of this component is to provide a customizable tooltip that can be used throughout the larger project. \n\nThe `CustomTooltip` component takes in three props: `title`, `children`, and `center`. The `title` prop is a string that represents the text that will be displayed in the tooltip. The `children` prop is any valid React component that will be wrapped by the tooltip. The `center` prop is an optional boolean that determines whether the tooltip should be centered above the wrapped component or aligned to the left of it.\n\nThe `CustomTooltip` component returns a `Tooltip` component with customized styles and placement based on the props passed in. The `PopperProps` prop is used to customize the styles of the tooltip. In this case, the tooltip has a black background, white text, and a box shadow. The `title` prop is set to the `title` prop passed in to the `CustomTooltip` component. The `placement` prop is set to either \"top\" or \"top-start\" based on the `center` prop passed in.\n\nAn example of how this component could be used in the larger project is to provide additional information or context when hovering over certain elements. For example, if there is a button that performs a specific action, a tooltip could be added to explain what that action does. The `CustomTooltip` component allows for customization of the tooltip's appearance and placement, making it a versatile tool for providing additional information throughout the project. \n\nExample usage:\n\n```\n{/* Render data here */}
\n )}\n \n
\n );\n}\n```\n\nIn the example above, the `LoadingIndicator` component renders a div element with the `Dots` component and a span element with the text \"Loading...\". The `Dots` component adds an animated ellipsis to the end of the text content, indicating that content is being loaded.\n## Questions: \n 1. What is the purpose of the `classNames` function being imported from \"../../functions\"?\n- The `classNames` function is likely used to concatenate and conditionally apply CSS classes to the `span` element in the `Dots` component.\n\n2. What is the purpose of the `style jsx` block?\n- The `style jsx` block is used to define a CSS style that will be scoped to the `Dots` component.\n\n3. What is the purpose of the `after` pseudo-element being used in the `className` prop?\n- The `after` pseudo-element is being used to add a period after the `span` element, which is styled to look like animated ellipsis.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Dots/index.md"}}],["558",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/DoubleGlowShadow/index.tsx)\n\nThe `DoubleGlowShadow` component is a React functional component that conditionally renders a double glow shadow effect around its children. The component imports the `isMobile` function from the `react-device-detect` library and the `FC` type from the `react` library. It also imports the `classNames` function from a `functions` module located in a parent directory.\n\nThe `DoubleGlowShadow` component takes in two props: `className` and `children`. The `className` prop is optional and is used to add additional CSS classes to the component. The `children` prop is also optional and represents the children components that will be wrapped by the `DoubleGlowShadow` component.\n\nThe component first checks if the `isMobile` function returns `true`. If it does, the component returns a div with a class of `shadow-swap` that wraps the `children` prop. This div does not have any shadow effects.\n\nIf the `isMobile` function returns `false`, the component returns a div that has three child divs. The first and second child divs are positioned absolutely and have a background color of blue and pink respectively. They are positioned on opposite sides of the parent div and have a width of 3/5 of the parent div's width. They also have a rounded border and a z-index of 0. These two divs create the double glow effect.\n\nThe third child div is positioned relatively and has a CSS filter of `drop-shadow`. This creates a shadow effect around the `children` prop. The `children` prop is wrapped by this div.\n\nThe `DoubleGlowShadow` component can be used in a larger project to add a double glow shadow effect around components. It can be used to highlight important components or to add a visual effect to a page. Here is an example of how the component can be used:\n\n```\nimport DoubleGlowShadow from \"./components/DoubleGlowShadow\";\n\nfunction App() {\n return (\n \n \n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `react-device-detect` library being imported?\n- The `react-device-detect` library is being used to check if the user is on a mobile device or not.\n\n2. What is the purpose of the `DoubleGlowShadow` component?\n- The `DoubleGlowShadow` component is used to add a double glow shadow effect to its child components. If the user is on a mobile device, it will display a different shadow effect.\n\n3. What is the purpose of the `classNames` function being imported from \"../../functions\"?\n- The `classNames` function is being used to concatenate multiple class names together for the `className` prop of the `div` element being returned by the `DoubleGlowShadow` component.","metadata":{"source":".autodoc/docs/markdown/core/src/components/DoubleGlowShadow/index.md"}}],["559",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/DoubleLogo/index.tsx)\n\nThe code above defines a React component called `DoubleCurrencyLogo`. This component is responsible for rendering two currency logos side by side. It takes in several props, including `currency0` and `currency1`, which are both of type `Currency`. These props represent the two currencies that the component will display logos for. The `size` prop determines the size of the logos, and the `className` and `logoClassName` props are used to apply custom CSS classes to the component and the logos themselves, respectively.\n\nThe component returns a `div` element that contains two `CurrencyLogo` components. These components are imported from the `CurrencyLogo` file located in the `../CurrencyLogo` directory. The `CurrencyLogo` component takes in several props, including `className`, `currency`, and `size`. The `className` prop is used to apply custom CSS classes to the logo, while the `currency` prop is used to determine which currency the logo should represent. The `size` prop determines the size of the logo.\n\nThe `DoubleCurrencyLogo` component uses the `classNames` function from the `functions` file located in the `../../functions` directory to apply custom CSS classes to the `div` element that contains the logos. This function takes in any number of arguments, which can be either strings or objects. If an argument is a string, it will be added to the class list as-is. If an argument is an object, its keys will be used as class names if their corresponding values are truthy.\n\nThis component can be used in the larger project to display two currency logos side by side, which may be useful in various contexts such as a trading platform or a wallet application. Here is an example of how this component might be used:\n\n```\nHello World
\n\n {data.length === 0 ? (\n No data available \n ) : (\n // Render data\n )}\n
\n );\n};\n```\n## Questions: \n 1. What is the purpose of this component?\n This component is called \"Empty\" and it renders a div with some default styling and any children passed to it. It is likely used to display an empty state for a component or page.\n\n2. What is the significance of the \"FC\" and \"React.HTMLAttributes\n
\n );\n};\n\nexport default HomePage;\n```\n## Questions: \n 1. What is the purpose of this component and what does it render?\n- This component is called `EndangeredSpecies` and it renders a section of a web page that displays information about a game involving NFT animals. It also includes a button to buy $ZOO currency.\n\n2. What libraries and hooks are being imported and used in this code?\n- This code imports and uses React, useState, Image, useDispatch, useSelector, useBuyZoo, useActiveWeb3React, useFaucet, getZooBalance, and handleFunds.\n\n3. What is the purpose of the `handleFunds` function and how is it used in this code?\n- The `handleFunds` function is imported from a utility file called `handleFunds` and it is used as a callback function for the `onClick` event of the \"Buy $ZOO\" button. It takes in the `chainId` and `buyZoo` variables as arguments and executes a transaction to buy $ZOO currency.","metadata":{"source":".autodoc/docs/markdown/core/src/components/EndangeredSpecies/index.md"}}],["562",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ExpertModePanel/index.tsx)\n\nThe code defines a React component called `ExpertModePanel` that renders a panel with a title and a close button. The component takes three props: `active`, a boolean that determines whether the panel is visible or not; `onClose`, a function that is called when the close button is clicked; and `children`, which is used to render the content of the panel.\n\nThe component uses the `useLingui` hook from the `@lingui/react` library to provide internationalization support. The `i18n` object returned by the hook is used to translate the text \"Expert Mode\" using the `t` macro from the `@lingui/macro` library.\n\nIf the `active` prop is `false`, the component simply renders its children. Otherwise, it renders a div with two nested divs: one for the title and close button, and one for the content. The title div has a fixed height and a dark background color, and contains the translated text and a close button that calls the `onClose` function when clicked. The content div has a border and a darker background color, and contains the `children` passed to the component.\n\nThis component can be used in a larger project to provide a customizable panel that can be shown or hidden based on a boolean value. The `ExpertModePanel` component can be imported and used in other React components like this:\n\n```jsx\nimport ExpertModePanel from './ExpertModePanel';\n\nfunction MyComponent() {\n const [expertMode, setExpertMode] = useState(false);\n\n return (\n Welcome to the Zoo!
\n\n \n setExpertMode(false)}>\n \n
\n );\n}\n```\n\nIn this example, the `MyComponent` function defines a state variable `expertMode` that determines whether the `ExpertModePanel` is visible or not. When the \"Show expert mode\" button is clicked, the `expertMode` state is set to `true`, which causes the `ExpertModePanel` to be rendered with its content. When the close button is clicked, the `expertMode` state is set to `false`, which hides the panel.\n## Questions: \n 1. What is the purpose of the `ExpertModePanel` component?\n \n The `ExpertModePanel` component is a React component that renders a panel for expert mode with a title, close button, and content.\n\n2. What is the role of the `useLingui` hook in this code?\n \n The `useLingui` hook is used to access the i18n object, which provides internationalization support for the component. It is used to translate the text content of the component.\n\n3. What is the significance of the `FC` type in the component definition?\n \n The `FC` type is a shorthand for the `FunctionComponent` type, which is a type of React component that takes props as input and returns JSX as output. It is used to define the type of the `ExpertModePanel` component.","metadata":{"source":".autodoc/docs/markdown/core/src/components/ExpertModePanel/index.md"}}],["563",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ExternalLink/index.tsx)\n\nThe `ExternalLink` component in this file is a reusable React component that renders an anchor tag (``) with some additional functionality. It takes in several props, including `href` (the URL to link to), `target` (the target window or frame to open the link in), `rel` (the relationship between the current document and the linked document), `color` (the color scheme to use for the link), `startIcon` and `endIcon` (optional icons to display before or after the link text), and any other props that can be passed to an anchor tag.\n\nWhen the link is clicked, the `handleClick` function is called. If the link is set to open in a new tab (`target=\"_blank\"`) or if the user is holding down the Ctrl or Command key, the link is opened normally and an outbound link event is tracked using the `ReactGA` library. If the link is set to open in the same tab (`target=\"_self\"`) and the user is not holding down any modifier keys, the default behavior of the anchor tag is prevented, an outbound link event is tracked using `ReactGA`, and the page is redirected to the linked URL.\n\nThe `COLOR` object defines two color schemes for the link: `default` and `blue`. These color schemes are used to set the text color and opacity of the link based on whether it is being hovered over or focused on.\n\nThis component can be used throughout the larger project to create links that track outbound link events using `ReactGA`. It provides a consistent and customizable way to render external links with additional functionality. Here's an example of how it could be used:\n\n```jsx\nimport ExternalLink from \"./path/to/ExternalLink\";\n\nfunction MyComponent() {\n return (\n This is the content of the expert mode panel.
\n\n \n Click me!\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a React component called `ExternalLink` that renders an anchor element with some additional functionality for tracking outbound link clicks using ReactGA.\n\n2. What dependencies does this code have?\n- This code imports `React`, `ReactGA`, and `classNames` from external packages.\n\n3. What props can be passed to the `ExternalLink` component?\n- The `ExternalLink` component accepts several props, including `target`, `href`, `children`, `rel`, `className`, `color`, `startIcon`, and `endIcon`.","metadata":{"source":".autodoc/docs/markdown/core/src/components/ExternalLink/index.md"}}],["564",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ExternalLinkIcon/index.tsx)\n\nThe code above is a React component that renders an external link icon with some additional functionality. The component takes in several props, including the `target` attribute, `href` attribute, and `rel` attribute. The `target` attribute specifies where to open the linked document, while the `href` attribute specifies the URL of the linked document. The `rel` attribute specifies the relationship between the current document and the linked document.\n\nThe component also uses the `ReactGA` library to track outbound link clicks. When the link is clicked, the `handleClick` function is called. If the link is set to open in a new tab (`target=\"_blank\"`) or if the user is holding down the `ctrl` or `meta` key, the link is opened in a new tab and a GA event is tracked. If the link is not set to open in a new tab, the default behavior is prevented, a GA event is tracked, and the user is redirected to the linked document.\n\nThe component returns an anchor tag with the appropriate attributes and event handlers. The `ExternalLink` component from the `react-feather` library is also rendered within the anchor tag to display the external link icon.\n\nThis component can be used throughout the larger project to render external links with consistent styling and tracking functionality. For example, it could be used in a navigation menu to link to external resources or in a list of related links at the bottom of a page. Here is an example usage of the component:\n\n```\n\n Total:
\n );\n}\n```\n\nIn this example, the `FormattedCurrencyAmount` component is used to format the `currencyAmount` object with 2 significant digits for display in a shopping cart total.\n## Questions: \n 1. What is the purpose of the `@zoolabs/zdk` import?\n- The `@zoolabs/zdk` import is used to import the `Currency`, `CurrencyAmount`, `Fraction`, and `JSBI` modules from the `zdk` library.\n\n2. What is the significance of the `CURRENCY_AMOUNT_MIN` constant?\n- The `CURRENCY_AMOUNT_MIN` constant represents the minimum amount of currency that can be displayed and is set to 1/1000000th of the currency unit.\n\n3. What does the `FormattedCurrencyAmount` function do?\n- The `FormattedCurrencyAmount` function takes in a `currencyAmount` object and an optional `significantDigits` parameter and returns a formatted string representation of the currency amount. If the amount is equal to 0, it returns \"0\". If the amount is greater than the `CURRENCY_AMOUNT_MIN`, it returns the amount formatted to the specified number of significant digits. Otherwise, it returns a string indicating that the amount is less than the minimum displayable amount.","metadata":{"source":".autodoc/docs/markdown/core/src/components/FormattedCurrencyAmount/index.md"}}],["567",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Gas/index.tsx)\n\nThis code is a React component that fetches gas price data from the Ethereum Gas Station API using the useSWR library. The component is named Gas and it is exported as the default export of the module. \n\nThe component uses the useLingui hook from the @lingui/react library to enable internationalization of the text displayed in the component. The i18n object returned by useLingui is destructured from the hook's return value.\n\nThe useSWR hook is used to fetch data from the Ethereum Gas Station API. The first argument to useSWR is the URL to fetch data from. The second argument is a function that fetches the data and returns it as a JSON object. The SWRResponse type is used to define the shape of the data returned by the API and the error object returned in case of an error.\n\nIf there is an error while fetching the data, the component returns a div element with the text \"failed to load\" translated to the current language using the i18n object. If the data is still being fetched, the component returns a div element with the text \"loading...\" translated to the current language using the i18n object. If the data has been fetched successfully, the component returns a div element with the average gas price divided by 10.\n\nThis component can be used in a larger project to display the current average gas price on the Ethereum network. The component can be imported and rendered in any React component that needs to display the gas price. For example, the component can be used in a dashboard that displays various metrics related to the Ethereum network. \n\nExample usage:\n\n```\nimport React from 'react';\nimport Gas from './Gas';\n\nfunction Dashboard() {\n return (\n \n
\n );\n}\n\nexport default Dashboard;\n```\n## Questions: \n 1. What is the purpose of the `useSWR` hook and how is it used in this code?\n - The `useSWR` hook is used to fetch data from an external API and cache the response. In this code, it is used to fetch gas price data from the `ethgasstation.info` API and return the average gas price divided by 10.\n \n2. What is the `useLingui` hook and how is it used in this code?\n - The `useLingui` hook is used for internationalization (i18n) and localization of text in the application. In this code, it is used to translate the text displayed in the `div` elements when the data is loading or fails to load.\n \n3. What is the purpose of the `Gas` component and how is it used in the `zoo` project?\n - The `Gas` component is responsible for fetching and displaying gas price data from an external API. It can be used in the `zoo` project to display gas prices for transactions or other relevant information.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Gas/index.md"}}],["568",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/GradientDot/index.tsx)\n\nThis code defines a set of functions and a React component that are used to generate color gradients based on a percentage value. The `gradientColor` function takes a percentage value as input and returns a color code that corresponds to a specific color gradient. The color gradients are defined using a set of if statements that check the percentage value against a range of values. If the percentage value falls within a specific range, the function returns a corresponding color code. If the percentage value is outside of the defined ranges, the function returns a default color code.\n\nThe `gradientColorAsc` function is similar to `gradientColor`, but it returns a color gradient that is reversed. The `GradientDot` component is a React component that takes a percentage value as input and renders a small dot with a background color that corresponds to the percentage value. The `desc` prop is used to determine whether the color gradient should be descending or ascending. If `desc` is true, the `gradientColor` function is used to generate the color gradient. If `desc` is false, the `gradientColorAsc` function is used instead.\n\nThis code can be used in a larger project to generate color gradients for various UI elements based on a percentage value. For example, it could be used to generate a color gradient for a progress bar or a chart that displays data as a percentage. The `GradientDot` component could be used to display a small dot next to a percentage value to indicate the progress of a task or process. Overall, this code provides a simple and flexible way to generate color gradients based on a percentage value.\n## Questions: \n 1. What is the purpose of the `gradientColor` and `gradientColorAsc` functions?\n - The `gradientColor` and `gradientColorAsc` functions return a color code based on the input percentage value. The color codes returned are used to create a gradient dot in the `GradientDot` component.\n\n2. What is the `GradientDot` component used for?\n - The `GradientDot` component is used to display a small dot with a color gradient based on the input percentage value. It takes in a `percent` prop and an optional `desc` prop to determine the color gradient direction.\n\n3. What is the expected input type for the `percent` prop in the `GradientDot` component?\n - The expected input type for the `percent` prop in the `GradientDot` component is `any`, but it is immediately converted to a float using `parseFloat` in the `gradientColor` and `gradientColorAsc` functions.","metadata":{"source":".autodoc/docs/markdown/core/src/components/GradientDot/index.md"}}],["569",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Header/Community.tsx)\n\nThe code is a React component that renders a dropdown menu for the \"Learn\" section of a website called \"Zoo\". The dropdown menu is implemented using the `Menu` and `Transition` components from the `@headlessui/react` library. The menu is triggered by a button labeled \"Learn\" with a chevron icon next to it. When the button is clicked, the menu items are displayed in a dropdown list.\n\nThe menu items are implemented as links to different pages on the Zoo website or external resources. The links are implemented using the `Link` component from the `next/link` library or the `a` tag with a `href` attribute. The menu items include links to pages such as \"Our Animals\", \"Whitepaper\", \"About\", \"Reward Calculator\", \"FAQs\", and \"Zoo Foundation\". There is also a link to an external resource called \"Buy Guide\" and a link to an internal page called \"DAO\".\n\nThe menu items are styled using CSS classes from the Tailwind CSS library. The menu items have a black background with white text, and the active menu item has a darker background color. The menu items are also rounded and have a shadow effect.\n\nThis component can be used in the larger Zoo project to provide a consistent and easy-to-use navigation menu for the \"Learn\" section of the website. The component can be easily customized by adding or removing menu items or changing the styling. For example, if the Zoo website adds a new page to the \"Learn\" section, a new menu item can be added to the component by adding a new `Menu.Item` element with a `Link` or `a` tag. Similarly, if the Zoo website changes its color scheme, the CSS classes can be updated to reflect the new design. \n\nExample usage:\n\n```jsx\nimport Learn from \"./Learn\";\n\nfunction App() {\n return (\n Dashboard
\nCurrent gas price:
\n \n \n \n \n {/* rest of the page */}\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `Learn` component?\n- The `Learn` component is responsible for rendering a dropdown menu with links to various pages on the website.\n\n2. What is the purpose of the `Menu` and `Transition` components?\n- The `Menu` component is used to create a dropdown menu, while the `Transition` component is used to animate the opening and closing of the menu.\n\n3. What is the significance of the `z-999` class in the `Menu.Items` component?\n- The `z-999` class sets the z-index of the dropdown menu to 999, ensuring that it appears on top of other elements on the page.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Header/Community.md"}}],["570",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Header/Learn.tsx)\n\nThis code defines a React component called `Community` that renders a dropdown menu with links to various social media platforms. The menu is implemented using the `Menu` and `Transition` components from the `@headlessui/react` library. The dropdown menu is triggered by a button labeled \"Community\" with a chevron icon to indicate that it can be expanded. When the button is clicked, the menu expands to show a list of links to social media platforms such as Discord, Telegram, Instagram, Twitter, and Medium. The links are implemented using the `Menu.Item` component and are styled to change color when hovered over or clicked. \n\nThis component can be used in a larger project to provide users with easy access to the project's social media pages. It can be easily customized by adding or removing links to social media platforms as needed. For example, if the project has a Reddit page, a link to that page can be added to the menu by creating a new `Menu.Item` component and setting the `href` attribute to the URL of the Reddit page. \n\nHere is an example of how the `Community` component can be used in a larger project:\n\n```jsx\nimport Community from \"./Community\";\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `Menu` and `Transition` components from the \"@headlessui/react\" library?\n- The `Menu` component creates a dropdown menu, while the `Transition` component provides animation effects when the menu is opened or closed.\n\n2. What is the purpose of the `Link` component from the \"next/link\" library?\n- The `Link` component is used to create a hyperlink to another page within the Next.js application.\n\n3. What is the purpose of the `Community` function?\n- The `Community` function returns a dropdown menu with links to various social media platforms and communication channels related to the \"zoo\" project.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Header/Learn.md"}}],["571",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Header/MarketPlace.tsx)\n\nThis code defines a React component called `Marketplace` that renders a dropdown menu with links to different pages within the larger project. The dropdown menu is implemented using the `Menu` and `Transition` components from the `@headlessui/react` library. The `ChevronDownIcon` component from the `@heroicons/react` library is also used to display a downward-pointing arrow next to the menu label.\n\nWhen the user clicks on the menu label (\"Marketplace\"), the dropdown menu is displayed with three links: \"All NFTs\", \"Pools\", and \"Egg Drop\" (which is currently commented out). Each link is implemented as a `Menu.Item` component that wraps a `Link` component from the `next/link` library. The `active` prop passed to each `Menu.Item` component is used to determine whether the link is currently selected, and the corresponding CSS classes are applied to style the link accordingly.\n\nThe `Marketplace` component is designed to be used as a reusable UI element within the larger project, wherever a dropdown menu with links to different pages is needed. For example, it could be used in a navigation bar or sidebar component to allow users to quickly navigate to different sections of the project. Here is an example of how the `Marketplace` component could be used in a navigation bar:\n\n```jsx\nimport Marketplace from \"./Marketplace\";\n\nexport default function NavigationBar() {\n return (\n \n );\n}\n```\n\nIn this example, the `Marketplace` component is used to render a \"Marketplace\" dropdown menu in the navigation bar, along with a \"Sign In\" button. The `flex` and `items-center` classes are used to horizontally align the two elements. The `py-4` and `px-8` classes are used to add padding to the navigation bar. The `bg-black` and `text-white` classes are used to set the background and text colors, respectively.\n## Questions: \n 1. What is the purpose of the `Menu` and `Transition` components from the \"@headlessui/react\" library?\n- The `Menu` component creates a dropdown menu, while the `Transition` component provides animation effects when the menu is opened or closed.\n\n2. What is the significance of the `Fragment` component being used in the `Transition` component?\n- The `Fragment` component is used to group multiple child components without adding extra nodes to the DOM, which can improve performance.\n\n3. Why are there commented out lines of code for a \"Egg Drop\" menu item?\n- It is unclear why the \"Egg Drop\" menu item is commented out, but it may have been temporarily removed or is not yet implemented.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Header/MarketPlace.md"}}],["572",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Header/ThemeSwitcher.tsx)\n\nThe `ThemeSwitcher` component is responsible for toggling between light and dark themes in the `zoo` project. It imports the `useTheme` hook from the `next-themes` library, which provides the current theme and a function to set the theme. It also imports two icons from the `@fortawesome/free-solid-svg-icons` library, which are used to represent the moon and sun for the dark and light themes respectively. \n\nThe component renders a `Button` component with a conditional class name and style based on the current theme. The class name is set to `text-white` if the theme is dark and `text-black` if the theme is light. The style sets the width and height of the button to 44 pixels and centers its content. \n\nWhen the button is clicked, the `onClick` function is called, which toggles the theme by calling the `setTheme` function with either `'light'` or `'dark'` as an argument. The icon displayed on the button also changes based on the current theme. If the theme is dark, the moon icon is displayed, and if the theme is light, the sun icon is displayed. \n\nThis component can be used in any part of the `zoo` project where a theme switcher is needed. For example, it could be included in a navigation bar or a settings page. Here is an example of how the `ThemeSwitcher` component could be used in a `Header` component:\n\n```\nimport ThemeSwitcher from './ThemeSwitcher'\n\nconst Header = () => {\n return (\n Welcome to the Zoo Project!
\nCheck out our social media pages for the latest updates.
\n\n
\n );\n};\n\nexport default Modal;\n```\n\nIn this example, the `CloseIcon` component is used inside a `button` element to create a close button for the modal. When the button is clicked, the modal can be closed. The `CloseIcon` component can be customized by passing props to it, such as `width` and `height`, to adjust its size. Overall, this code provides a simple and reusable component for displaying a close icon in a React project.\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a React component called `CloseIcon` which renders an SVG icon of a close button.\n\n2. What props can be passed to the `CloseIcon` component?\n- The `CloseIcon` component accepts any props that can be passed to an SVG element, as indicated by the spread operator `{...props}`. However, the code does not specify any required or default props.\n\n3. What is the significance of the `fill` attribute in the `path` element?\n- The `fill` attribute sets the color to fill the interior of the SVG path. In this case, it is set to white (`#fff`).","metadata":{"source":".autodoc/docs/markdown/core/src/components/Icons/close-icon.md"}}],["575",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Icons/facebook-icon.tsx)\n\nThis code defines a React component called `FacebookIcon` that renders an SVG icon of the Facebook logo. The component takes in several props, including `width`, `height`, `color`, and `className`, which can be used to customize the appearance of the icon. The `IconProps` type is imported from the `react-feather` library, which suggests that this component may be used in conjunction with other icons from that library.\n\nThe SVG icon itself consists of two `path` elements that define the shape of the logo. The first `path` element creates a circle with a radius of 6.667 units, which serves as the background of the logo. The second `path` element creates the actual \"f\" shape of the logo, which is centered within the circle.\n\nThis component can be used in a larger project to display the Facebook logo in various contexts, such as in a social media sharing widget or as part of a user's profile information. Here is an example of how the `FacebookIcon` component could be used in a React component:\n\n```\nimport React from \"react\";\nimport FacebookIcon from \"./FacebookIcon\";\n\nconst SocialMediaButton = ({ platform, url }) => {\n let icon;\n if (platform === \"facebook\") {\n icon = Modal Title
\nModal content goes here
\n \n\n
\n);\n\nexport default BuildingListItem;\n```\n\nIn this example, the `BuildingListItem` component displays information about a building, including its name and address. The `BuildingIcon` component is used to display an icon representing the building. The `color` prop is set to `#f00`, which will make the icon red. The `BuildingIcon` component is imported from the module that defines the icon.\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a React component that renders an SVG icon.\n\n2. What library or package is being used in this code?\n- This code imports the `React` and `IconProps` modules from the `react` and `react-feather` packages, respectively.\n\n3. What does the SVG icon look like?\n- The SVG icon consists of two paths that form a shape resembling a zoo entrance gate. The first path creates the outline of the gate, while the second path creates the shape of an animal inside the gate.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Icons/instagram-icon.md"}}],["577",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Icons/menu-icon.tsx)\n\nThis code defines a React component called `MenuIcon`. The component returns an SVG element that displays three horizontal lines, which are commonly used to represent a menu icon. The SVG element has a width and height of 24 pixels and is filled with no color. The `path` element within the SVG element defines the shape of the icon using three horizontal lines, each starting at the left edge of the SVG and spanning its width. The `stroke` attribute sets the color of the lines to white, and the `strokeWidth` attribute sets their thickness to 2 pixels. The `strokeLinecap` and `strokeLinejoin` attributes set the style of the line endings and corners to be rounded.\n\nThis component can be used in a larger project as a reusable menu icon that can be easily added to any part of the UI. For example, it can be used as a button to toggle a navigation menu on and off. Here is an example of how the `MenuIcon` component can be used in a React component:\n\n```\nimport React from \"react\";\nimport MenuIcon from \"./MenuIcon\";\n\nconst Navigation = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const toggleMenu = () => {\n setIsOpen(!isOpen);\n };\n\n return (\n \n );\n};\n\nexport default Navigation;\n```\n\nIn this example, the `MenuIcon` component is used as the icon for a button that toggles a navigation menu on and off. The `isOpen` state variable is used to determine whether the menu is currently open or closed. When the button is clicked, the `toggleMenu` function is called, which toggles the value of `isOpen`. If `isOpen` is true, the menu is displayed as an unordered list of links. If `isOpen` is false, the menu is hidden.\n## Questions: \n 1. What does this code do?\n This code exports a React component called MenuIcon that renders an SVG icon with three horizontal lines.\n\n2. What is the purpose of the \"props\" parameter in the MenuIcon function?\n The \"props\" parameter is used to pass any additional props to the SVG element, such as className or onClick.\n\n3. Why is the stroke color set to \"#fff\" and the strokeWidth set to 2?\n The stroke color is set to white (#fff) and the strokeWidth is set to 2 to create a visible contrast against the background and make the icon more prominent.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Icons/menu-icon.md"}}],["578",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Icons/twitter-icon.tsx)\n\nThe code defines a React component called `TwitterIcon` that renders an SVG icon of the Twitter logo. The component takes in several props, including `width`, `height`, `color`, and `className`, which are used to customize the appearance of the icon. The `IconProps` type is imported from the `react-feather` library, which suggests that this component may be used in conjunction with other icons from that library.\n\nThe SVG path data for the Twitter logo is defined within the `path` element of the SVG. The `fill` attribute of the `path` element is set to the `color` prop passed into the component, which allows the icon to be rendered in different colors.\n\nThis component can be used in a larger project to display a Twitter icon wherever it is needed. For example, it could be used in a social media sharing component to allow users to share content on Twitter. Here is an example of how the `TwitterIcon` component could be used in a React component:\n\n```\nimport React from \"react\";\nimport TwitterIcon from \"./TwitterIcon\";\n\nconst ShareOnTwitterButton = () => {\n return (\n \n );\n};\n```\n\nIn this example, the `TwitterIcon` component is used within a button element to create a \"Share on Twitter\" button. The `color` prop is set to the Twitter brand color (#1DA1F2) to match the Twitter logo.\n## Questions: \n 1. What library is being used to render the icon?\n- The `react-feather` library is being used to render the icon.\n\n2. What is the purpose of the `...rest` parameter in the `TwitterIcon` function?\n- The `...rest` parameter is used to capture any additional props that are passed to the component and pass them down to the underlying `svg` element.\n\n3. What is the significance of the values assigned to the `width`, `height`, and `color` props?\n- The `width` and `height` props determine the size of the icon, while the `color` prop determines the color of the icon. These values can be overridden when the component is used.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Icons/twitter-icon.md"}}],["579",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Image/index.tsx)\n\nThis code exports a React component called `Image` that wraps the `NextImage` component from the `next/image` package. The `Image` component is used to display images in the application. It accepts several props, including `src`, `width`, `height`, `layout`, `loader`, and `style`. \n\nThe `Image` component uses a `useBlur` flag to determine whether to display a blurred placeholder image while the actual image is loading. If the `height` and `width` props are both greater than or equal to 40, the blurred placeholder image is displayed. Otherwise, an empty placeholder is used. \n\nThe `loader` prop is used to specify the image loader function. By default, the `cloudinaryLoader` function from the `cloudinary` module is used. However, the `loader` prop can be used to override this default and provide a custom image loader function. \n\nThe `cloudinaryLoader` function is not defined in this file, but it is imported from the `cloudinary` module. This function is used to generate a URL for the image using the Cloudinary image service. \n\nThe `normalize` function is used to remove the leading slash from the `src` prop, if it exists. This is necessary because the Cloudflare loader function expects the `src` prop to be a relative path without a leading slash. \n\nThe `cloudFlareLoader` function is used to generate a URL for the image using the Cloudflare image service. This function takes the `src`, `width`, and `quality` props as arguments and returns a URL that includes these parameters. \n\nThe `shimmer` function generates an SVG placeholder image with a shimmer effect. This function takes the `width` and `height` props as arguments and returns an SVG string. \n\nOverall, this code provides a flexible and customizable way to display images in the application. The `Image` component can be used with different image loaders and can display a blurred placeholder image while the actual image is loading.\n## Questions: \n 1. What is the purpose of the `cloudinaryLoader` function imported from `../../functions/cloudinary`?\n- This code does not provide information on the purpose of the `cloudinaryLoader` function. \n\n2. What is the purpose of the `normalize` function?\n- The `normalize` function is used to remove the leading slash from the `src` parameter if it exists.\n\n3. What is the purpose of the `shimmer` function?\n- The `shimmer` function returns an SVG string that is used as a placeholder image while the actual image is being loaded. The SVG string is animated to create a shimmer effect.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Image/index.md"}}],["580",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Input/Address/index.tsx)\n\nThe `AddressInput` component is a React functional component that renders an input field for a user to enter a wallet address or ENS name. It is part of a larger project called `zoo`. \n\nThe component takes in several props, including `value`, `onUserInput`, `placeholder`, `className`, `align`, and `fontSize`. The `value` prop is the current value of the input field, while `onUserInput` is a callback function that is called whenever the user types into the input field. The `placeholder` prop is the text that is displayed in the input field when it is empty. The `className` prop is a string of CSS classes that are applied to the input field. The `align` prop specifies whether the text in the input field should be aligned to the left or right. The `fontSize` prop specifies the font size of the text in the input field.\n\nThe component uses the `useENS` hook to resolve the ENS name entered by the user into an Ethereum address. The `enforcer` function is called whenever the user types into the input field. It checks that the input is a number between 0 and 100 and calls the `onUserInput` callback with the input if it passes the check.\n\nThe component renders an `input` element with various props and styles. The `value` prop is set to the `value` prop passed into the component. The `onChange` prop is set to the `enforcer` function. The `inputMode`, `title`, `autoComplete`, `autoCorrect`, `autoCapitalize`, and `spellCheck` props are set to various values to provide a good user experience. The `placeholder` prop is set to the `placeholder` prop passed into the component. The `pattern` prop is set to a regular expression that matches Ethereum addresses. The `className` prop is set to a combination of the `className` prop passed into the component and some additional classes based on the `align` prop. The `style` prop is set to an object with a `fontSize` property based on the `fontSize` prop.\n\nThe `AddressInput` component is exported as the default export of the module.\n## Questions: \n 1. What is the purpose of the `useENS` hook being imported from `../../../hooks/useENS`?\n- The `useENS` hook is used to retrieve the ENS name and address of the value passed to the `AddressInput` component.\n\n2. What is the purpose of the `enforcer` function?\n- The `enforcer` function is used to validate and enforce input restrictions on the `AddressInput` component. It checks if the input is a number less than or equal to 100 and passes it to the `onUserInput` function.\n\n3. What is the purpose of the `align` prop being passed to the `AddressInput` component?\n- The `align` prop is used to specify the alignment of the text in the input field, either \"right\" or \"left\".","metadata":{"source":".autodoc/docs/markdown/core/src/components/Input/Address/index.md"}}],["581",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Input/Numeric/index.tsx)\n\nThis code exports a React component called `Input` that renders an HTML input element. The component is designed to be used for numerical input, and includes several options and restrictions to enforce this. \n\nThe `Input` component takes several props, including `value`, `onUserInput`, `placeholder`, and `className`. The `value` prop is the current value of the input, and `onUserInput` is a callback function that is called whenever the user types into the input. The `placeholder` prop is the text that is displayed in the input when it is empty, and `className` is a string of CSS classes that can be used to style the input.\n\nThe `Input` component enforces several restrictions on the input. It only allows numerical input, and replaces commas with periods to ensure that the input uses the correct decimal separator. It also sets several HTML attributes on the input, including `inputMode`, `title`, `autoComplete`, `autoCorrect`, `type`, `pattern`, `placeholder`, `min`, `minLength`, `maxLength`, and `spellCheck`. These attributes ensure that the input is properly formatted and validated.\n\nThe `Input` component also includes a regular expression called `inputRegex`, which is used to match escaped \".\" characters in the input. This regular expression is used to ensure that the input only contains valid numerical characters.\n\nOverall, the `Input` component is a useful tool for enforcing numerical input in a React application. It can be used in a variety of contexts, such as in a form for entering prices or quantities. Here is an example of how the `Input` component might be used in a larger React application:\n\n```\nimport React, { useState } from \"react\";\nimport Input from \"./Input\";\n\nfunction PriceForm() {\n const [price, setPrice] = useState(\"\");\n\n const handlePriceChange = (newPrice) => {\n setPrice(newPrice);\n };\n\n return (\n \n );\n}\n```\n## Questions: \n 1. What is the purpose of the `Input` component?\n \n The `Input` component is a memoized React component that renders an HTML input element with specific options and properties.\n\n2. What is the purpose of the `enforcer` function?\n \n The `enforcer` function checks if the user input is valid based on a regular expression and calls the `onUserInput` function if it is valid.\n\n3. What is the purpose of the `inputRegex` regular expression?\n \n The `inputRegex` regular expression matches a string that contains digits and escaped periods (i.e., \"\\\\.\") in a non-capturing group. It is used to validate user input in the `enforcer` function.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Input/Numeric/index.md"}}],["582",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Input/Percent/index.tsx)\n\nThe `Input` component in this file is a reusable React component that renders an HTML input element. It takes in several props, including `value`, `onUserInput`, `placeholder`, `className`, `align`, and `fontSize`. The `value` prop is the current value of the input, while `onUserInput` is a callback function that is called whenever the user types into the input. The `placeholder` prop is the text that is displayed in the input when it is empty, while `className` and `fontSize` are used to style the input.\n\nThe `Input` component enforces several constraints on the user's input. It only allows numeric input, and it limits the length of the input to 3 characters. Additionally, it replaces any commas in the input with periods, since the input is used in a financial context where periods are used as decimal separators. Finally, it only allows input values that are less than or equal to 100.\n\nThe `Input` component is memoized using React's `React.memo` function, which means that it will only re-render if its props have changed. This can help improve performance in cases where the component is used frequently and its props are not changing often.\n\nThe `Input` component is exported as both a named export (`Input`) and a default export. The named export is used to import the component into other files, while the default export is used to import the component into files that are not TypeScript-aware.\n\nHere is an example of how the `Input` component might be used in a larger project:\n\n```jsx\nimport React, { useState } from \"react\";\nimport Input from \"./path/to/Input\";\n\nfunction MyComponent() {\n const [value, setValue] = useState(\"\");\n\n const handleUserInput = (input) => {\n setValue(input);\n };\n\n return (\n {building.name}
\n{building.address}
\n\n
\n );\n}\n```\n\nIn this example, the `MyComponent` function renders an instance of the `Input` component. It passes in a `value` state variable and a `handleUserInput` callback function as props to the `Input` component. Whenever the user types into the input, the `handleUserInput` function is called with the new input value, and the `value` state variable is updated accordingly. The `placeholder`, `className`, `align`, and `fontSize` props are also passed in to customize the appearance of the input.\n## Questions: \n 1. What is the purpose of the `enforcer` function?\n- The `enforcer` function checks if the input value is valid and within a certain range, and if so, calls the `onUserInput` function with the input value.\n\n2. What is the significance of the `inputRegex` variable?\n- The `inputRegex` variable is a regular expression that matches any string that contains only digits (0-9) and escaped \".\" characters.\n\n3. What is the purpose of the `align` prop?\n- The `align` prop is used to specify the alignment of the text within the input field, and can be set to either \"right\" or \"left\".","metadata":{"source":".autodoc/docs/markdown/core/src/components/Input/Percent/index.md"}}],["583",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Input/index.tsx)\n\nThe code above is a module that exports an object called `Input`. This object contains three properties: `Address`, `Numeric`, and `Percent`. Each of these properties is a reference to a module that is imported from a file located in the `zoo` project. \n\nThe `Address` module is likely used to represent a physical address, while the `Numeric` module is likely used to represent numerical values. The `Percent` module is likely used to represent percentages. \n\nBy exporting these modules as properties of the `Input` object, other modules within the `zoo` project can easily import and use them. For example, a module that needs to represent a physical address could import the `Address` module like this:\n\n```\nimport { Address } from 'zoo/Input'\n```\n\nThis code would import the `Address` module from the `Input` object exported by the `zoo` project. The module could then use the `Address` module to represent physical addresses.\n\nOverall, this code is a simple way to organize and export commonly used modules within the `zoo` project. By exporting them as properties of an object, other modules can easily import and use them without having to worry about the specific file paths or module names.\n## Questions: \n 1. What is the purpose of this code?\n This code exports an object called `Input` that contains three modules: `Address`, `Percent`, and `Numeric`.\n\n2. What are the dependencies of this code?\n This code depends on three other modules located in the same directory: `Address.js`, `Numeric.js`, and `Percent.js`.\n\n3. How can this code be used in other parts of the project?\n Other parts of the project can import the `Input` object from this module and use its properties (`Address`, `Percent`, and `Numeric`) as needed. For example: `import { Address } from './zoo/Input'`.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Input/index.md"}}],["584",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/LanguageSwitch/index.tsx)\n\nThe `LangSwitcher` component is responsible for rendering a dropdown menu that allows users to switch between different languages on the website. The component is built using the `Menu` and `Transition` components from the `@headlessui/react` library, as well as several other third-party libraries such as `next/router` and `cookie-cutter`.\n\nWhen the component is rendered, it first retrieves the current locale, available locales, and current URL path using the `useRouter` hook from `next/router`. It then renders a button that displays the current language flag and a chevron icon to indicate that it is a dropdown menu. When the button is clicked, the `Menu` component is activated and displays a list of available languages.\n\nEach language in the list is rendered as a `Menu.Item` component, which contains a link to the current page with the `locale` query parameter set to the corresponding language code. When a language is selected, the `cookie-cutter` library is used to set a cookie with the selected language code, which is then used to set the `locale` query parameter on subsequent page loads.\n\nOverall, the `LangSwitcher` component provides a simple and intuitive way for users to switch between different languages on the website. It can be easily integrated into other components and pages using the `import` statement, as shown below:\n\n```\nimport LangSwitcher from './path/to/LangSwitcher'\n\nfunction MyComponent() {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code is a React component that renders a language switcher dropdown menu with flags and language names.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including `@headlessui/react`, `@heroicons/react/solid`, `next/link`, `next/image`, `classnames`, `next/router`, and `cookie-cutter`.\n\n3. What is the format of the `LANG_TO_COUNTRY` object?\n- The `LANG_TO_COUNTRY` object maps language codes to their corresponding country names in various languages. The keys are language codes (e.g. \"en\" for English), and the values are strings representing the country name in that language (e.g. \"English\" for the \"en\" key).","metadata":{"source":".autodoc/docs/markdown/core/src/components/LanguageSwitch/index.md"}}],["585",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/LineGraph/index.tsx)\n\nThe code is a React component that renders a line graph. The component takes in an array of data points, where each data point is an object with an x and y value. The component also takes in optional stroke and strokeWidth props that determine the color and thickness of the line. The component uses the `@visx/scale` library to create x and y scales based on the data points. The x scale maps the x values of the data points to the width of the graph, and the y scale maps the y values of the data points to the height of the graph. The component then renders an SVG element with a `LinePath` component from the `@visx/shape` library. The `LinePath` component takes in the data points and uses the x and y scales to draw a line connecting the points. If the stroke prop is an object with a `gradient` property, the component also renders a `LinearGradient` component from the `@visx/gradient` library to create a gradient stroke. The component uses the `react-virtualized-auto-sizer` library to automatically resize the graph to fit its container. \n\nThis component can be used in a larger project to display time-series data or any other data that can be represented as a line graph. The component is flexible and can be customized with different stroke colors and thicknesses. The component can also be used with a gradient stroke to create a more visually appealing graph. The component is responsive and will automatically resize to fit its container, making it easy to use in different parts of a larger application. \n\nExample usage:\n\n```\nimport LineGraph from './LineGraph'\n\nconst data = [\n { x: 0, y: 0 },\n { x: 1, y: 1 },\n { x: 2, y: 2 },\n { x: 3, y: 3 },\n { x: 4, y: 4 },\n]\n\nfunction App() {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a LineGraph component that renders a line graph using data passed in as props.\n\n2. What external libraries are being used in this code?\n- This code imports several external libraries including `react-virtualized-auto-sizer`, `react`, `@visx/scale`, `@visx/shape`, `lodash`, and `@visx/gradient`.\n\n3. What props does the LineGraph component accept?\n- The LineGraph component accepts a `data` prop which is an array of objects with `x` and `y` properties, a `stroke` prop which can be either an object with a `solid` property or an object with `gradient` property containing `from` and `to` properties, and a `strokeWidth` prop which is a number.","metadata":{"source":".autodoc/docs/markdown/core/src/components/LineGraph/index.md"}}],["586",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/List/index.tsx)\n\nThe code above defines two React components, `Item` and `List`, which can be used to display a list of items in a visually appealing way. \n\nThe `Item` component takes in an object `item` and an optional string `className` as props. It returns a `li` element with the `item` object as its content. The `className` prop is used to add additional CSS classes to the `li` element, which can be used to customize the appearance of the item. \n\nThe `List` component takes in an array of objects `items` and an optional string `className` as props. It returns a `ul` element with each object in the `items` array rendered as an `Item` component. The `key` prop is set to the index of the item in the array to ensure that each item is uniquely identified. The `className` prop is used to add additional CSS classes to the `ul` element, which can be used to customize the appearance of the list. \n\nThe `List` component also has a static property `Item` which refers to the `Item` component. This allows the `Item` component to be accessed as a property of the `List` component, which can be useful for organizing related components. \n\nOverall, this code provides a simple and reusable way to display a list of items with customizable styling. It can be used in a variety of contexts within a larger project, such as displaying a list of products on an e-commerce site or a list of articles on a blog. \n\nExample usage:\n\n```\nimport List from './List';\n\nconst items = [\n { name: 'Item 1', price: 10 },\n { name: 'Item 2', price: 20 },\n { name: 'Item 3', price: 30 },\n];\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `classNames` function being imported from \"../../functions\"?\n- The `classNames` function is likely used to concatenate multiple class names together for the `className` prop of the `li` and `ul` elements.\n\n2. What is the expected shape of the `item` prop passed to the `Item` component?\n- The `item` prop can be of any type since its type is defined as `any` in the `ItemProps` interface.\n\n3. How can the `Item` component be used outside of the `List` component?\n- The `Item` component can be used outside of the `List` component by importing it separately and passing in the required `item` and optional `className` props.","metadata":{"source":".autodoc/docs/markdown/core/src/components/List/index.md"}}],["587",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ListLogo/index.tsx)\n\nThe code above is a React component that renders a logo image. It imports the `Logo` component from a file located at `../Logo` and the `useHttpLocations` hook from a file located at `../../hooks/useHttpLocations`. \n\nThe `ListLogo` component takes in four props: `logoURI`, `style`, `size`, and `alt`. `logoURI` is a required string that represents the URI of the logo image. `style` is an optional object that represents the CSS styles to apply to the logo image. `size` is an optional string that represents the width and height of the logo image, with a default value of `'24px'`. `alt` is an optional string that represents the alternative text for the logo image.\n\nThe `useHttpLocations` hook is called with `logoURI` as its argument, which returns an array of strings representing the possible locations of the logo image. These locations are then passed as the `srcs` prop to the `Logo` component, along with the other props.\n\nThe `Logo` component is responsible for rendering the actual logo image. It takes in the `alt`, `width`, `height`, `srcs`, and `style` props. The `alt` prop is used as the alternative text for the image. The `width` and `height` props are used to set the dimensions of the image. The `srcs` prop is an array of strings representing the possible locations of the image, which are tried in order until a valid image is found. The `style` prop is an object representing the CSS styles to apply to the image.\n\nOverall, this component can be used to easily render a logo image in a React application. It provides flexibility in terms of the size and style of the image, and handles the logic of finding the image at the correct location. An example usage of this component would be:\n\n```\nMy Shopping List
\n\n
\n );\n}\n```\n## Questions: \n 1. What does this code do?\n- This code exports a function called `Loader` that returns an SVG element representing a spinning circle with a customizable size and stroke color.\n\n2. What are the default values for `size` and `stroke`?\n- The default value for `size` is `'16px'` and the default value for `stroke` is `'#FFFFFF'`.\n\n3. What is the purpose of the `...rest` parameter?\n- The `...rest` parameter is used to pass any additional props to the SVG element, allowing for additional customization and styling beyond the `size` and `stroke` parameters.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Loader/index.md"}}],["589",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Logo/bridgeLogo.tsx)\n\nThe code defines a React component called `Logo` that renders an image. The component takes in several props, including the `src` of the image, its `width` and `height`, an optional `alt` text, a `className`, and a `style` object. \n\nThe component first renders a `div` element with a `rounded` class and some styles for width, height, and centering the image. Inside this `div`, an `img` element is rendered with the `src` prop passed in, or a default image if `src` is falsy. The `onError` event is commented out, but it appears to handle cases where the `src` image fails to load. If this happens, the `src` is added to a `BAD_SRCS` object and the component is refreshed. \n\nThis component is likely used throughout the larger project to display logos or images. It provides a fallback image if the desired image fails to load, and also adds failed `src` values to a `BAD_SRCS` object for debugging purposes. \n\nExample usage:\n```\nimport Logo from \"./Logo\";\n\nfunction App() {\n return (\n Loading data...
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `BAD_SRCS` object?\n- The `BAD_SRCS` object is used to keep track of token addresses that have failed to load.\n\n2. What is the purpose of the `Logo` component?\n- The `Logo` component renders an image by sequentially trying a list of URIs, and then eventually a fallback triangle alert.\n\n3. What is the purpose of the `alt` prop in the `LogoProps` type?\n- The `alt` prop is used to provide alternative text for the image in case it cannot be displayed.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Logo/bridgeLogo.md"}}],["590",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Logo/index.tsx)\n\nThe `Logo` component in the `zoo` project is a React functional component that renders an image. It takes in a list of URIs as `srcs`, and sequentially tries each URI until it finds one that works. If none of the URIs work, it displays a fallback image of a triangle alert. \n\nThe `Logo` component is used to display logos of tokens in the larger project. It is designed to handle cases where the token logo URI is incorrect or unavailable. The component uses the `Image` component from the `../Image` file to display the image. The `Image` component takes in a `src` prop, which is the URI of the image to be displayed. If the URI is incorrect or unavailable, the `onError` callback is triggered. In the `Logo` component, the `onError` callback updates the `BAD_SRCS` object with the URI that failed, and triggers a state update to re-render the component with the next URI in the list.\n\nThe `Logo` component also takes in other props such as `width`, `height`, `style`, `alt`, and `className`. These props are passed down to the `Image` component to customize the image display. The `Logo` component also uses the `cloudinaryLoader` function from the `../../functions/cloudinary` file as the `loader` prop for the `Image` component. The `cloudinaryLoader` function is responsible for loading the image from the cloudinary CDN.\n\nHere is an example usage of the `Logo` component:\n\n```\nimport Logo from \"./Logo\";\n\nconst tokenLogoSrcs = [\n \"https://example.com/token-logo.png\",\n \"https://example.com/token-logo-2.png\",\n \"https://example.com/token-logo-3.png\",\n];\n\nconst MyComponent = () => {\n return (\n \n
\n );\n};\n```\n\nIn this example, the `Logo` component is used to display the logo of a token. The `srcs` prop is an array of URIs to try, and the `width` and `height` props set the size of the image. The `alt` prop is used to provide alternative text for the image.\n## Questions: \n 1. What is the purpose of the `Logo` component?\n- The `Logo` component renders an image by sequentially trying a list of URIs and eventually a fallback triangle alert.\n\n2. What is the `BAD_SRCS` object used for?\n- The `BAD_SRCS` object is used to keep track of URIs that have failed to load, so that they can be skipped in future attempts to load the image.\n\n3. What is the `cloudinaryLoader` function used for?\n- The `cloudinaryLoader` function is used as a loader for the `Image` component, which loads the image from a cloudinary URL.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Logo/index.md"}}],["591",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Main/index.tsx)\n\nThis code defines a React component called `Main` that renders a main section of a web page. The component takes in several props, including `children`, which is a required prop that represents the content to be rendered inside the main section. The `isModal` prop is optional and is used to indicate whether the main section is being rendered as part of a modal dialog. The `innerClassName` prop is also optional and is used to specify additional CSS classes to be applied to the inner container of the main section. Finally, the `bgColor` prop is optional and is used to specify the background color of the main section, with a default value of \"#333\".\n\nThe `Main` component renders a `main` HTML element with several CSS classes that center the content vertically and horizontally within the main section. The `bgColor` prop is used to set the background color of the main section. The `style` prop is used to set the height of the main section to \"max-content\", which allows the height of the section to expand to fit its content.\n\nInside the `main` element, there is a `div` element that contains the `children` prop. The `innerClassName` prop is used to add any additional CSS classes to this `div` element. If the `isModal` prop is not set, the `div` element is also given a top margin of 12 pixels on small screens and 20 pixels on large screens.\n\nThis `Main` component can be used in a larger React application to render the main content of a web page or modal dialog. For example, it could be used in a layout component that wraps other components and provides a consistent layout for the entire application. Here is an example of how the `Main` component could be used:\n\n```\nimport Main from \"./Main\";\n\nfunction App() {\n return (\n \n ... \n \n \n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `Main` component?\n - The `Main` component is a functional component that renders a `main` element with flexible and responsive styles, and it accepts children, isModal, innerClassName, and bgColor props.\n\n2. What is the significance of the `bgColor` prop?\n - The `bgColor` prop is an optional prop that sets the background color of the `main` element, and it defaults to a dark gray color.\n\n3. What is the purpose of the `innerClassName` prop?\n - The `innerClassName` prop is an optional prop that sets the class name of the inner `div` element, which wraps the children of the `Main` component. It allows for additional styling or customization of the inner content.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Main/index.md"}}],["592",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Menu/index.tsx)\n\nThe `Menu` component in this file is responsible for rendering a dropdown menu that displays a list of links to various resources related to the Sushi project. The menu is triggered by clicking on a button that displays an icon of three horizontal lines. When the button is clicked, a popover appears below it, displaying the list of links.\n\nThe `Menu` component imports several other components and functions from various libraries and files. These include the `Popover` and `Transition` components from the `@headlessui/react` library, the `ExternalLink` component from another file, and the `classNames` and `t` functions from the `styling` and `macro` files respectively.\n\nThe `items` function takes an `i18n` object as an argument and returns an array of objects, each representing a link in the menu. Each object has a `name`, `description`, and `href` property, which correspond to the name of the link, a short description of the resource it points to, and the URL of the resource.\n\nThe `Menu` component uses the `useLingui` hook to access the `i18n` object, which is then passed to the `items` function to generate the list of links. The resulting array of link objects is stored in the `solutions` variable.\n\nThe `Menu` component returns a `Popover` component, which wraps the button and popover content. The `Popover` component takes a function as a child, which receives an object with an `open` property that indicates whether the popover is currently open or closed. The function returns the button and popover content, which are conditionally rendered based on the value of `open`.\n\nThe button is rendered using the `Popover.Button` component and displays an icon of three horizontal lines. The `classNames` function is used to conditionally apply CSS classes to the button based on whether the popover is open or closed.\n\nThe popover content is rendered using the `Transition` and `Popover.Panel` components. The `Transition` component provides animation when the popover is opened or closed. The `Popover.Panel` component contains the actual content of the popover, which is a list of links generated by mapping over the `solutions` array and rendering an `ExternalLink` component for each link.\n\nThe `ExternalLink` component is responsible for rendering an anchor tag that opens the link in a new tab when clicked. It takes a `href` prop that specifies the URL of the link, and renders the `name` and `description` properties of the link object as the link text.\n\nOverall, the `Menu` component provides a reusable dropdown menu that can be used to display a list of links to various resources related to the Sushi project. It uses several other components and functions to achieve this, including the `Popover`, `Transition`, and `ExternalLink` components, as well as the `classNames` and `t` functions.\n## Questions: \n 1. What is the purpose of this code?\n- This code is a React component that renders a menu with links to various resources related to Sushi, including documentation, development resources, open source projects, tools, and a Discord community.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including \"@headlessui/react\" for the popover and transition components, \"next/image\" for rendering the menu icon, \"@lingui/core\" and \"@lingui/react\" for internationalization support, and a custom \"classNames\" function for styling.\n\n3. What is the structure of the data used to generate the menu items?\n- The menu items are generated from an array of objects, where each object represents a single menu item and includes properties for the item's name, description, and href (URL). The array is generated by calling the \"items\" function and passing in an \"i18n\" object from the \"@lingui/core\" library.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Menu/index.md"}}],["593",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Modal/HeadlessUIModal.tsx)\n\nThe `HeadlessUIModal` component is a reusable modal component that can be used in a React project. It is built using the `@headlessui/react` library, which provides a set of completely unstyled, fully accessible UI components that can be used to build custom UIs. \n\nThe `HeadlessUIModal` component takes in three props: `isOpen`, `onDismiss`, and `children`. The `isOpen` prop is a boolean that determines whether the modal is open or closed. The `onDismiss` prop is a function that is called when the modal is dismissed. The `children` prop is used to pass in the content that will be displayed inside the modal.\n\nThe component uses the `Transition.Root` component from `@headlessui/react` to handle the transition between the open and closed states of the modal. When the `isOpen` prop is `true`, the modal is displayed. When the `isOpen` prop is `false`, the modal is hidden.\n\nThe modal itself is built using the `Dialog` component from `@headlessui/react`. The `Dialog` component provides the basic structure for the modal, including the overlay and the content area. The `Dialog` component takes in several props, including `open`, which determines whether the modal is open or closed, and `onClose`, which is called when the modal is closed.\n\nThe content of the modal is passed in using the `children` prop. The content is wrapped in a `Transition.Child` component, which handles the transition of the content when the modal is opened or closed.\n\nThe `HeadlessUIModal` component is a flexible and reusable component that can be used to display any kind of content in a modal. It is fully accessible and provides a smooth transition between the open and closed states of the modal. \n\nExample usage:\n\n```\nimport HeadlessUIModal from './HeadlessUIModal';\n\nfunction MyComponent() {\n const [isOpen, setIsOpen] = useState(false);\n\n function handleOpenModal() {\n setIsOpen(true);\n }\n\n function handleCloseModal() {\n setIsOpen(false);\n }\n\n return (\n <>\n \n Welcome to my website!
\nThis is the main content of my website.
\nModal Title
\nModal content goes here.
\n\n \n \n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a React component called `Modal` that renders a customizable modal dialog box.\n\n2. What are the required props for the `Modal` component?\n- The only required props are `isOpen` and `onDismiss`, which respectively determine whether the modal is visible and what happens when the modal is dismissed.\n\n3. What are some of the optional props that can be passed to the `Modal` component?\n- Some of the optional props include `minHeight`, `maxHeight`, `padding`, `maxWidth`, `isMax`, `isFullWidth`, `backgroundColor`, `scrollable`, and `transitionProps`, which allow for customization of the modal's appearance and behavior.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Modal/index.md"}}],["595",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ModalHeader/BidModalHeader.tsx)\n\nThe code defines a React functional component called `BidModalHeader` that renders a header for a bidding modal. The component takes in three props: `className`, `onBack`, and `showAccount`. `className` is a string that specifies additional CSS classes to apply to the component. `onBack` is a function that is called when the user clicks on a chevron left icon, which is rendered as a circular button. `showAccount` is a boolean that determines whether to show a `Web3Status` component, which displays the user's connected wallet status.\n\nThe `useActiveWeb3React` hook is used to retrieve the user's connected wallet account. The `Web3Status` component is only rendered if `showAccount` is true, and it displays the user's wallet status using the `i18n` internationalization library and the `t` macro from the `@lingui/macro` package.\n\nThis component can be used in a larger project that involves bidding on items using a blockchain network. The `BidModalHeader` component can be included in a bidding modal that allows users to place bids on items. The component provides a back button and a wallet status indicator, which are useful for navigating the modal and displaying the user's wallet status. The `className` prop can be used to customize the component's appearance, and the `onBack` prop can be used to specify a custom function to handle the back button click event. Overall, this component provides a simple and reusable header for a bidding modal in a blockchain-based application.\n## Questions: \n 1. What is the purpose of the `BidModalHeader` component?\n - The `BidModalHeader` component is used to render the header section of a bidding modal.\n2. What is the role of the `Web3Status` component in this code?\n - The `Web3Status` component is used to display the status of the user's Web3 wallet connection.\n3. What is the significance of the `FC` type in the component declaration?\n - The `FC` type is a shorthand for `FunctionComponent` and indicates that the component is a function component that accepts props.","metadata":{"source":".autodoc/docs/markdown/core/src/components/ModalHeader/BidModalHeader.md"}}],["596",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ModalHeader/index.tsx)\n\nThe code above is a React component called `ModalHeader` that renders a header for a modal. The component takes in four optional props: `title`, `className`, `onClose`, and `onBack`. \n\nIf the `onBack` prop is provided, a `ChevronLeftIcon` is rendered on the left side of the header. When clicked, the `onBack` function is called. If the `title` prop is provided, a `Typography` component is rendered in the center of the header with the provided title. If the `onClose` prop is provided, an `XIcon` is rendered on the right side of the header. When clicked, the `onClose` function is called.\n\nThe `ModalHeader` component is useful for creating consistent and reusable headers for modals throughout a project. By passing in different `title`, `onClose`, and `onBack` functions, the header can be customized for different modals. \n\nHere is an example of how the `ModalHeader` component can be used:\n\n```\nimport ModalHeader from \"./ModalHeader\";\n\nfunction MyModal() {\n const handleBack = () => {\n // handle going back\n };\n\n const handleClose = () => {\n // handle closing modal\n };\n\n return (\n Modal Content
\nThis is the content of the modal.
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `ModalHeader` that renders a header for a modal with an optional title, back button, and close button.\n\n2. What external dependencies does this code rely on?\n- This code imports two icons from the `@heroicons/react/outline` package and a `Typography` component from a local file.\n\n3. What props can be passed to the `ModalHeader` component?\n- The `ModalHeader` component accepts four optional props: `title` (a string), `className` (a string), `onClose` (a function), and `onBack` (a function).","metadata":{"source":".autodoc/docs/markdown/core/src/components/ModalHeader/index.md"}}],["597",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ModelViewer/index.tsx)\n\nThe `ModelViewer` component is a React component that renders a 3D model viewer using the `model-viewer` library from Google. The component takes several props, including the paths to the GLB and USDZ files for the 3D model, the zoom level, and a boolean flag for whether to use the USDZ file. The component also includes a list of animal models that can be used as the current 3D model.\n\nThe component renders a `div` element that contains the `model-viewer` element, which is created using a template string that includes the props passed to the component. The `model-viewer` element includes several attributes that control its behavior, such as `loading`, `reveal`, `camera-controls`, `auto-rotate`, `autoplay`, and `ar`. These attributes enable features such as automatic rotation, autoplay, and augmented reality (AR) support.\n\nThe `useEffect` hook is used to perform any necessary cleanup when the component is unmounted, but it does not currently have any functionality.\n\nThe `ModelViewer` component can be used in a larger project to display 3D models of animals or other objects. For example, it could be used in an educational app to teach children about different animals, or in an e-commerce app to allow customers to view products in 3D. The component could be customized by passing different props, such as different 3D models or zoom levels, to suit the needs of the specific use case.\n\nExample usage:\n\n```\nimport ModelViewer from \"./ModelViewer\";\n\nfunction App() {\n return (\n \n {/* modal content */}\n
\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n \n This code defines a React component called `ModelViewer` that renders a 3D model using the `model-viewer` library. The component takes in several props that allow customization of the model and its behavior.\n\n2. What are the default values for the props of this component?\n \n The default values for the props are as follows:\n - `glb`: \"/models/Tiger/TIGER_BABY.glb\"\n - `usdz`: \"/models/Tiger/TIGER_BABY.usdz\"\n - `zoom`: \"auto\"\n - `usdzFile`: false\n - `multiple`: false\n - `onClick`: () => {}\n - `className`: \"\"\n\n3. What is the purpose of the `useEffect` hook in this code?\n \n The `useEffect` hook is currently empty and serves no purpose. It is likely included as a placeholder for future code that may need to be executed when the component mounts or unmounts.","metadata":{"source":".autodoc/docs/markdown/core/src/components/ModelViewer/index.md"}}],["598",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Moonpaybtn/MoonpayBtn.tsx)\n\nThis code defines a React component called `MoonPayBtn` that renders a button labeled \"Buy Crypto\". When the button is clicked, a dropdown menu appears that contains an embedded iframe from the MoonPay API. The iframe allows users to buy cryptocurrency using a MoonPay account.\n\nThe component uses the `useState` hook to manage the state of the dropdown menu. When the button is clicked, the `handleOnClick` function is called, which toggles the value of the `IsActive` state variable. This causes the dropdown menu to appear or disappear depending on its current state.\n\nThe `Transition` component from the `@headlessui/react` library is used to animate the appearance and disappearance of the dropdown menu. The `Menu` component from the same library is used to define the structure of the dropdown menu. The `Menu.Button` component defines the appearance of the button that triggers the dropdown menu, and the `Menu.Items` component defines the contents of the dropdown menu.\n\nThe `Menu.Item` component is used to wrap the MoonPay iframe. The `allow` attribute of the iframe specifies the permissions required for the iframe to function properly. The `src` attribute specifies the URL of the MoonPay API, along with an API key and a currency code.\n\nThis component can be used in a larger project that requires a way for users to buy cryptocurrency using a MoonPay account. The component can be imported and rendered wherever it is needed in the project. For example:\n\n```\nimport MoonPayBtn from \"./components/MoonPayBtn\";\n\nfunction App() {\n return (\n 3D Animal Viewer
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the MoonPayBtn component?\n- The MoonPayBtn component is used to render a button that allows users to buy cryptocurrency through MoonPay.\n\n2. What is the purpose of the handleOnClick function?\n- The handleOnClick function toggles the IsActive state when the button is clicked.\n\n3. What is the purpose of the commented out axios post request in the handleSubmit function?\n- The axios post request is commented out and not functional, so it is unclear what its purpose was intended to be.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Moonpaybtn/MoonpayBtn.md"}}],["599",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/NavLink/index.tsx)\n\nThe code above is a React component that creates a navigation link that can be used in a web application. The component is called `NavLink` and it imports `Link` and `LinkProps` from the `next/link` module, as well as `React` and `Children` from the `react` module, and `useRouter` from the `next/router` module.\n\nThe `NavLink` component takes several props, including `children`, which is the content of the link, `exact`, which is a boolean that determines whether the link should match the current URL exactly or not, and `activeClassName`, which is a string that represents the class name to be applied to the link when it is active.\n\nThe `useRouter` hook is used to get information about the current route, including the current URL path, the route, the query parameters, and the base path. The `child` variable is used to get the child element of the `children` prop, which is the content of the link.\n\nThe `isActive` variable is used to determine whether the link is active or not. If `exact` is true, the link will only be active if the `as` prop or the `href.pathname` prop or the `href` prop matches the current URL exactly. If `exact` is false, the link will be active if the current URL starts with the `as` prop or the `href.pathname` prop or the `href` prop.\n\nThe `className` variable is used to determine the class name of the link. If the link is active, the `activeClassName` prop is added to the class name of the link. Otherwise, the class name of the link remains the same.\n\nFinally, the `NavLink` component returns a `Link` component from the `next/link` module, which wraps the child element of the `children` prop. The `className` prop of the child element is set to the `className` variable, which determines whether the link is active or not.\n\nThis component can be used in a larger project to create navigation links that are styled differently when they are active. For example, in a web application with a navigation bar, the `NavLink` component can be used to create links that are highlighted when the user is on the corresponding page. Here is an example of how the `NavLink` component can be used:\n\n```\nWelcome to My Crypto App
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `NewNFTCard` component?\n- The `NewNFTCard` component is used to display information about a specific NFT item, including its image or animation, name, age, and ID.\n\n2. What is the role of the `ModelViewer` component?\n- The `ModelViewer` component is used to display a 3D model of an NFT item, and it takes in two props (`glb` and `usdz`) that specify the URLs of the model's GLB and USDZ files.\n\n3. What is the significance of the `ssr: false` option in the `dynamic` import statement?\n- The `ssr: false` option indicates that the `ModelViewer` component should not be server-side rendered, and should instead be loaded on the client side only. This is because the `ModelViewer` component relies on the `window` object, which is not available during server-side rendering.","metadata":{"source":".autodoc/docs/markdown/core/src/components/NewNFTCard/index.md"}}],["601",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/NftCard/index.tsx)\n\nThe `NftCard` component is a React component that renders a card displaying information about a non-fungible token (NFT). The component takes in several props, including an image, name, address, days left, highest bid, price, yields per day, and currency. \n\nThe component is designed to be used in a larger project that involves displaying NFTs to users. The `NftCard` component can be used to display information about a single NFT, and can be repeated multiple times to display information about multiple NFTs. \n\nThe component renders a card with a black background and a rounded border. The card contains an image of the NFT, as well as information about the NFT's name, price, address, days left, highest bid, and yields per day. The currency used for the price and yields can be specified using the `currency` prop, which defaults to \"ZOO\". \n\nThe `NftCard` component is designed to be flexible and customizable. The image prop can be any valid React node, allowing for the use of images, videos, or other media types. The component also uses Tailwind CSS classes to style the card, making it easy to customize the appearance of the card to match the design of the larger project. \n\nHere is an example of how the `NftCard` component could be used in a larger React project:\n\n```\nimport React from \"react\";\nimport NftCard from \"./NftCard\";\n\nconst NftList = ({ nfts }) => {\n return (\n \n {nfts.map((nft) => (\n
\n );\n};\n\nexport default NftList;\n```\n\nIn this example, the `NftList` component takes in an array of NFT objects and maps over them to render an `NftCard` component for each NFT. The `image` prop is passed as an `img` element with the `src` and `alt` attributes set to the corresponding values from the NFT object. The other props are passed directly from the NFT object.\n## Questions: \n 1. What are the required props for the NftCard component?\n- The required props for the NftCard component are \"image\", while \"name\", \"price\", \"address\", \"days\", \"highestBid\", \"yields\", and \"currency\" are optional.\n\n2. What is the default value for the \"currency\" prop?\n- The default value for the \"currency\" prop is \"ZOO\".\n\n3. What is the purpose of the NftCard component?\n- The NftCard component is a reusable component that displays information about a non-fungible token (NFT), including its image, name, price, address, days left, highest bid, and yields per day.","metadata":{"source":".autodoc/docs/markdown/core/src/components/NftCard/index.md"}}],["602",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Paper/index.tsx)\n\nThe code above is a React component called `Paper` that returns a div element with rounded corners and any children passed to it. The component takes in three props: `children`, `className`, and `...rest`. \n\nThe `children` prop is used to pass any child elements to the `Paper` component. These child elements will be rendered inside the div element returned by the component. \n\nThe `className` prop is used to add any additional classes to the div element. This allows for custom styling of the `Paper` component. \n\nThe `...rest` prop is used to pass any additional props to the div element. This allows for flexibility in how the `Paper` component is used and styled. \n\nOverall, the purpose of this component is to provide a reusable and customizable paper-like element that can be used throughout the larger project. It can be used to wrap other components or elements to give them a consistent look and feel. \n\nHere is an example of how the `Paper` component can be used in a larger project:\n\n```\nimport React from \"react\";\nimport Paper from \"./Paper\";\n\nfunction App() {\n return (\n \n \n \n
\n );\n}\n\nexport default App;\n```\n\nIn this example, the `Paper` component is used to wrap a heading and paragraph element. The `className` prop is used to add a custom class to the `Paper` component, which can be used to style it in CSS.\n## Questions: \n 1. What is the purpose of the `Paper` component?\n The `Paper` component is a functional component that returns a JSX element with a `div` tag that has a `rounded` class and any additional classes passed in through the `className` prop. It also renders any children passed in as props.\n\n2. What is the significance of the `...rest` parameter in the `Paper` function?\n The `...rest` parameter is a spread operator that allows any additional props passed into the `Paper` component to be spread into the `div` tag as attributes. This allows for flexibility in passing in additional props without having to explicitly define them in the component.\n\n3. What is the purpose of the `JSX.Element` type in the function signature?\n The `JSX.Element` type is a type definition for the return value of a JSX expression. In this case, it ensures that the `Paper` component returns a valid JSX element.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Paper/index.md"}}],["603",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/PercentInputPanel/index.tsx)\n\nThe code defines a React component called `PercentInputPanel` that renders a panel with an input field for a percentage value. The component takes three props: `value`, `onUserInput`, and `id`. \n\nThe `value` prop is a string that represents the current value of the input field. The `onUserInput` prop is a callback function that is called whenever the user types into the input field. The function is passed the new value of the input field as a string argument. The `id` prop is a string that is used as the `id` attribute of the outermost `div` element that is rendered by the component.\n\nThe component renders a `div` element with the `id` specified by the `id` prop. The `div` has a dark background color and is rounded. Inside the `div`, there are two child elements: a label and an input field. The label says \"Amount to Remove\" and is left-aligned. The input field is a custom component called `Input.Percent` that is imported from another file. The `Input.Percent` component takes several props, including `className`, `value`, `onUserInput`, and `align`. The `className` prop is set to \"token-amount-input\". The `value` prop is set to the `value` prop passed to the `PercentInputPanel` component. The `onUserInput` prop is set to a callback function that simply calls the `onUserInput` prop passed to the `PercentInputPanel` component with the new value of the input field. The `align` prop is set to \"right\". \n\nThe `PercentInputPanel` component is likely used in a larger project to allow users to input a percentage value. The `onUserInput` callback function is likely used to update the state of the parent component that renders the `PercentInputPanel` component. Here is an example of how the `PercentInputPanel` component might be used in a parent component:\n\n```\nimport React, { useState } from 'react'\nimport PercentInputPanel from './PercentInputPanel'\n\nexport default function MyComponent() {\n const [percentValue, setPercentValue] = useState('50')\n\n function handlePercentInput(newValue) {\n setPercentValue(newValue)\n }\n\n return (\n Hello World!
\nThis is some text inside the paper element.
\n\n
\n )\n}\n```\n\nIn this example, the `MyComponent` component renders a `PercentInputPanel` component with an initial value of \"50\". Whenever the user types into the input field, the `handlePercentInput` function is called with the new value of the input field. The `handlePercentInput` function updates the state of the `MyComponent` component with the new value. The current value of the input field is displayed below the `PercentInputPanel` component.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `PercentInputPanel` that renders an input field for a percentage value.\n\n2. What props does the `PercentInputPanel` component accept?\n- The `PercentInputPanel` component accepts three props: `value` (string), `onUserInput` (function that takes a string argument), and `id` (string).\n\n3. What other components are being used in this code?\n- This code imports a component called `Input` from a file located at `../Input`. Within the `PercentInputPanel` component, it uses a subcomponent of `Input` called `Input.Percent`.","metadata":{"source":".autodoc/docs/markdown/core/src/components/PercentInputPanel/index.md"}}],["604",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Polling/index.tsx)\n\nThis code defines a React component called `Polling` that displays the current block number of a specified Ethereum chain and a spinning animation. The block number is obtained using the `useBlockNumber` hook from the `application` state, which is provided by the `useActiveWeb3React` hook. The `chainId` is also obtained from `useActiveWeb3React`. \n\nThe component uses the `useState` hook to keep track of whether it is mounted or not. The `useEffect` hook is used to set a timer that updates the `isMounted` state variable every second. This is done to prevent a memory leak when the component is unmounted. The timer is cleared when the component is unmounted using the `clearTimeout` function.\n\nThe `ExternalLink` component is used to wrap the block number and spinning animation. The `href` attribute of the `ExternalLink` is set to a link to the block explorer for the specified chain and block number. If either the `chainId` or `blockNumber` is not available, the `href` attribute is set to an empty string. The `className` attribute of the `ExternalLink` is set to either `text-high-emphesis` or `text-low-emphesis` depending on the value of `isMounted`. \n\nThe block number is displayed using a `div` element, and the spinning animation is displayed using an SVG element. The `animate-spin` class is added to the SVG element when `isMounted` is `true`, causing the animation to spin. \n\nThis component can be used in a larger project to display the current block number of a specified Ethereum chain and provide a link to the block explorer for that block. It can be used in conjunction with other components to build a dashboard or monitoring tool for Ethereum applications. \n\nExample usage:\n\n```\nimport Polling from './Polling'\n\nfunction App() {\n return (\n You entered: {percentValue}%
\n\n
\n )\n}\n```\n## Questions: \n 1. What does this code do?\n- This code is a React component called `Polling` that renders a link with a block number and a spinning animation. The link points to a blockchain explorer and the block number is obtained from the `useBlockNumber` hook.\n\n2. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to set a timer that updates the `isMounted` state after 1 second. It also clears the timer and sets `isMounted` to false when the component unmounts. The `useEffect` hook is triggered whenever the `blockNumber` changes.\n\n3. What are the dependencies of this component?\n- This component depends on the `React` library, the `useEffect` and `useState` hooks from React, the `ExternalLink` component from a relative path, the `getExplorerLink` function from a `functions/explorer` module, and the `useActiveWeb3React` and `useBlockNumber` hooks from `hooks/useActiveWeb3React` and `state/application/hooks` modules, respectively.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Polling/index.md"}}],["605",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Popover/index.tsx)\n\nThe `Popover` component in this file is a reusable UI component that provides a popover functionality. It takes in three props: `content`, `show`, and `children`. The `content` prop is the content that will be displayed in the popover, the `show` prop is a boolean that determines whether or not the popover is visible, and the `children` prop is the element that will trigger the popover when clicked.\n\nThe component uses the `usePopper` hook from the `react-popper` library to position the popover relative to the trigger element. The `usePopper` hook takes in three arguments: the reference element (the trigger element), the popper element (the popover), and an options object that specifies the placement of the popover, the strategy for positioning, and any modifiers to apply. The `Popover` component sets the reference element, popper element, and arrow element using the `useState` hook.\n\nThe `Popover` component also uses the `useInterval` hook from a custom `useInterval` hook to update the position of the popover every 100ms when the `show` prop is true. The `updateCallback` function is a memoized callback that calls the `update` function returned by the `usePopper` hook.\n\nThe `Popover` component returns a `HeadlessuiPopover` component from the `@headlessui/react` library that provides the accessibility and keyboard navigation for the popover. The `HeadlessuiPopover` component has two child components: the reference element and the `HeadlessuiPopover.Panel` component. The reference element wraps the `children` prop and sets the `setReferenceElement` function as a ref. The `HeadlessuiPopover.Panel` component is the actual popover that is displayed when the trigger element is clicked. It sets the `setPopperElement` function as a ref and applies the styles and attributes returned by the `usePopper` hook. It also includes an arrow element that sets the `setArrowElement` function as a ref.\n\nOverall, this `Popover` component can be used in a larger project to provide a popover functionality for any element that needs it. It is reusable and customizable with the `content`, `show`, and `placement` props. Here is an example of how it can be used:\n\n```\n\n \n \n \n
\n );\n};\n\nexport default MyComponent;\n```\n## Questions: \n 1. What is the purpose of this code?\n This code defines a React component called `QuestionHelper` that renders a tooltip with a question mark icon. The tooltip can be triggered by clicking or hovering over the icon or its parent element.\n\n2. What are the props that can be passed to the `QuestionHelper` component?\n The `QuestionHelper` component accepts two optional props: `text` and `children`. `text` is the content of the tooltip, and `children` is the content that should be wrapped by the tooltip icon and trigger the tooltip.\n\n3. What is the purpose of the `useCallback` hook in this code?\n The `useCallback` hook is used to memoize the `open` and `close` functions that toggle the visibility of the tooltip. This can improve performance by preventing unnecessary re-renders of the component when these functions are passed as props to child components.","metadata":{"source":".autodoc/docs/markdown/core/src/components/QuestionHelper/index.md"}}],["612",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/RenderAsync/index.tsx)\n\nThe code defines a React component called `RenderAsync` that allows for rendering of asynchronous data. The component takes in three props: `children`, `promise`, and `loader`. \n\nThe `children` prop is a function that takes in the data returned by the `promise` and returns a React node. This is what will be rendered once the `promise` is resolved. \n\nThe `promise` prop is a Promise object that resolves to the data that will be rendered. \n\nThe `loader` prop is a React node that will be rendered while the `promise` is still resolving. This can be used to display a loading spinner or other indicator to the user that data is being fetched. \n\nThe component uses the `useState` and `useEffect` hooks from React to manage the state of the data returned by the `promise`. When the component mounts, it checks if the `promise` prop is an instance of a Promise object. If it is, it creates an async function that awaits the resolution of the `promise` and sets the data returned by the `promise` using the `setData` function from the `useState` hook. \n\nOnce the `data` state is set, the `children` function is called with the `data` as an argument and the result is returned as a React node. If the `data` state is not set yet, the `loader` prop is returned instead. \n\nThis component can be used in a larger project to handle rendering of data that is fetched asynchronously. For example, it can be used to fetch and render data from an API endpoint. Here is an example usage of the component:\n\n```\nimport RenderAsync from './RenderAsync'\n\nfunction MyComponent() {\n const [data, setData] = useState()\n\n const fetchData = async () => {\n const resp = await fetch('https://example.com/api/data')\n const json = await resp.json()\n setData(json)\n }\n\n return (\n My Component
\n\n
\n )}\n {data.title}
\n{data.description}
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `ScrollableGraph` component?\n - The `ScrollableGraph` component is used to render a graph with scrollable functionality based on the provided data.\n\n2. What is the `AutoSizer` component used for?\n - The `AutoSizer` component is used to automatically calculate the width and height of its child component based on the available space.\n\n3. What type of data does the `ScrollableGraph` component expect to receive?\n - The `ScrollableGraph` component expects to receive an object with optional properties such as `compact`, `margin`, `data`, `title`, `labels`, `note`, and `colors`. The `data` property is required.","metadata":{"source":".autodoc/docs/markdown/core/src/components/ScrollableGraph/index.md"}}],["617",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Search/index.tsx)\n\nThe code above defines a React component called `Search` that renders a search input field with a search icon. The component takes in several props, including `term`, `search`, `className`, and `inputProps`. \n\nThe `term` prop is a string that represents the current search term entered by the user. The `search` prop is a function that is called whenever the user types in the search input field. The `className` prop is an optional string that represents the CSS class name(s) to apply to the component. The `inputProps` prop is an optional object that contains additional props to apply to the input field.\n\nThe component renders a `div` element with a `relative` position and a `rounded` class. The `className` prop is applied to this `div` element. Inside the `div`, there is an `input` element that has several CSS classes applied to it. The `input` element has an `onChange` event listener that calls the `search` function with the current value of the input field whenever the user types in the field. The `value` prop of the `input` element is set to the `term` prop, which represents the current search term entered by the user. The `placeholder` prop of the `input` element is set to a string that prompts the user to enter a search term.\n\nFinally, there is a `div` element with an `absolute` position that contains a search icon. The search icon is imported from the `react-feather` library and is rendered using the `Search` component. The `size` prop of the `SearchIcon` component is set to `16`.\n\nThis component can be used in a larger project to render a search input field with a search icon. The `term` and `search` props can be used to manage the state of the search input field and perform a search operation respectively. The `className` and `inputProps` props can be used to customize the appearance and behavior of the search input field. \n\nExample usage:\n\n```\n\n \n {/* main content of the app */}\n \n
\n )\n}\n\nexport default App\n```\n\nIn this example, the `App` component renders a `Sidebar` component with an array of three items. These items represent links to the home page, about page, and contact page of the application. The `Sidebar` component then renders these links in a sidebar on the left side of the screen. The `main` element contains the main content of the application, which will be displayed to the right of the sidebar.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a React component called `Sidebar` that renders a list of links using the `NavLink` component.\n\n2. What props does the `Sidebar` component expect?\n The `Sidebar` component expects a single prop called `items`, which is an array of objects containing `href` and `text` properties for each link.\n\n3. What CSS classes are being used in this code?\n This code uses several CSS classes from a custom stylesheet, including `mt-4`, `space-y-4`, `font-bold`, `text-high-emphesis`, `bg-dark-800`, `border-transparent`, `rounded`, `hover:bg-dark-900`, and `ml-5`.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Sidebar/index.md"}}],["621",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Slider/index.ts)\n\nThis code defines two styled components, `PrettoSlider` and `MarketTypeSlider`, which are customized versions of the `Slider` component from the Material UI library. \n\nThe `PrettoSlider` component has a black track and thumb with a white value label that appears when the user interacts with the slider. The thumb has a border and a hover effect. The value label is positioned above the thumb and rotated at a 45-degree angle. This component could be used in a variety of contexts where a slider is needed, such as adjusting the volume of a media player or selecting a value from a range.\n\nThe `MarketTypeSlider` component has a gray track and a black thumb with a white value label. The thumb has a thicker border and a hover effect. The value label is positioned above the thumb and rotated at a 45-degree angle. This component could be used in a financial application where the user needs to select a market type or range.\n\nBoth components use the `styled` function from Material UI to apply CSS styles to the `Slider` component. The styles are defined using the `&` operator to target child elements of the `Slider` component. The `borderRadius` property is used to create a rounded edge on the value label. The `transform` property is used to position and rotate the value label. \n\nTo use these components in a React application, they can be imported from this file and used like any other React component. For example:\n\n```\nimport { PrettoSlider, MarketTypeSlider } from './SliderStyles';\n\nfunction MyComponent() {\n const [value, setValue] = useState(50);\n\n const handleSliderChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n \n
\n );\n}\n```\n\nIn this example, the `PrettoSlider` and `MarketTypeSlider` components are used to display two sliders that update the `value` state when the user interacts with them.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines two custom styled sliders using the Material UI library.\n\n2. What are the differences between the `PrettoSlider` and `MarketTypeSlider` styles?\n - The `PrettoSlider` has a black track and a smaller thumb with a white border, while the `MarketTypeSlider` has a dark gray track with no border radius and a larger thumb with a thicker black border.\n\n3. Can these styles be customized further?\n - Yes, the styles can be further customized by modifying the properties defined in the `PrettoSlider` and `MarketTypeSlider` objects, or by creating additional styled sliders using the same approach.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Slider/index.md"}}],["622",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/SplitPane/index.tsx)\n\nThe code above is a React functional component that exports a SplitPane component. The SplitPane component takes in two props, left and right, which are both JSX elements. The purpose of this component is to split the screen into two sections, with the left prop taking up the left half of the screen and the right prop taking up the right half of the screen. \n\nThe SplitPane component uses the flexbox layout to achieve this split screen effect. The outermost div has a class of \"flex\" which sets the display property to flex. The \"flex-1\" class sets the flex-grow property to 1, which allows the div to grow to fill the available space. The \"items-center\" class centers the child elements vertically, and the \"flex-col md:flex-row\" classes set the flex-direction to column on small screens and row on medium screens. The \"justify-between\" class evenly distributes the child elements along the main axis, which is either the vertical or horizontal axis depending on the screen size.\n\nThe left and right props are each wrapped in a div with a class of \"w-full md:w-1/2\". This sets the width of each child element to 100% on small screens and 50% on medium screens, allowing them to take up half of the screen each.\n\nThis component can be used in a larger project to split the screen into two sections, such as a dashboard with a list of items on the left and a detailed view of the selected item on the right. Here is an example of how this component can be used:\n\n```\nimport React from 'react';\nimport SplitPane from './SplitPane';\n\nfunction Dashboard() {\n return (\n \n \n
\n );\n};\n```\n\nIn this example, the Svg component is used inside a div element with a width of 50px and a color of red. The spin prop is set to true, which applies the spinStyle CSS constant and animates the SVG element.\n## Questions: \n 1. What is the purpose of the `rotate` keyframe animation?\n - The `rotate` keyframe animation is used to rotate an element 360 degrees over a period of 2 seconds in a linear fashion.\n\n2. What is the purpose of the `spinStyle` CSS property?\n - The `spinStyle` CSS property is used to apply the `rotate` keyframe animation to an element in order to make it spin.\n\n3. What are the default props for the `Svg` component?\n - The default props for the `Svg` component include a `color` of \"text\", a `width` of \"20px\", an `xmlns` of \"http://www.w3.org/2000/svg\", and a `spin` of false.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Svg/Svg.md"}}],["625",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Svg/index.tsx)\n\nThis code exports the `Svg` component from the `Svg` file and its associated `SvgProps` type from the `types` file. The `Svg` component is likely a reusable component that can be used throughout the larger project to render SVG graphics. \n\nBy exporting the `Svg` component, other files in the project can import and use it as needed. For example, if a component needs to render an SVG graphic, it can import the `Svg` component and pass in the necessary props. \n\nSimilarly, by exporting the `SvgProps` type, other files can import and use it to ensure that the correct props are passed to the `Svg` component. This helps to ensure that the component is used correctly and reduces the likelihood of errors. \n\nHere is an example of how this code might be used in a larger project:\n\n```\nimport React from \"react\";\nimport { Svg } from \"./zoo\";\n\nconst MyComponent = () => {\n return (\n \n \n
\n );\n};\n```\n\nIn this example, the `Svg` component is imported from the `zoo` module and used to render a blue circle with a radius of 50. The `width` and `height` props are also passed to the `Svg` component to specify the size of the SVG graphic. \n\nOverall, this code plays an important role in the larger project by providing a reusable `Svg` component and associated `SvgProps` type that can be used throughout the project to render SVG graphics.\n## Questions: \n 1. **What is the purpose of the `Svg` component?** \nA smart developer might want to know what functionality the `Svg` component provides and how it is used within the `zoo` project.\n\n2. **What is the `SvgProps` type used for?** \nA smart developer might want to know what props are expected to be passed to the `Svg` component and what their types are.\n\n3. **Are there any other components or types exported from this file?** \nA smart developer might want to know if there are any other important exports from this file that are not immediately visible in the code snippet provided.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Svg/index.md"}}],["626",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Svg/types.ts)\n\nThis code defines an interface called `SvgProps` that extends the `SVGAttributes` interface from the `react` library and the `SpaceProps` interface from the `styled-system` library. The `SVGAttributes` interface provides a set of attributes that can be used with SVG elements, while the `SpaceProps` interface provides a set of props for adding margin, padding, and other spacing-related styles to components.\n\nThe `SvgProps` interface also includes two additional properties: `theme` and `spin`. The `theme` property is an optional object of type `DefaultTheme` from the `styled-components` library, which allows for theming of SVG components. The `spin` property is a boolean that can be used to add a spinning animation to the SVG component.\n\nThis interface can be used as a type for props passed to SVG components in a React application. For example, if we have an SVG component called `MySvgComponent`, we can define its props as follows:\n\n```\nimport { SvgProps } from 'path/to/zoo'\n\ninterface MySvgComponentProps extends SvgProps {\n // additional props specific to MySvgComponent\n}\n\nconst MySvgComponent: React.FC\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `numberWithCommas` function imported from \"functions/format\"?\n- The `numberWithCommas` function is used to format a number with commas for readability.\n\n2. What is the significance of the `useMemo` hook that is commented out?\n- The `useMemo` hook is used to memoize the result of a function so that it is only recomputed when its dependencies change. In this case, it is likely used to compute a class name based on the `priceImpact` prop.\n\n3. What is the purpose of the `priceImpact` prop and how is it used in the component?\n- The `priceImpact` prop is used to display the percentage change in price impact. If it is provided, the component will display this value with a sign and a percentage symbol.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Swap/FiatValue.md"}}],["629",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Swap/Header.tsx)\n\nThe `ExchangeHeader` component is a React functional component that renders a header for a token exchange feature. It receives several props, including `input` and `output`, which are objects representing the input and output tokens for the exchange, respectively. It also receives `allowedSlippage`, a value representing the maximum allowed slippage for the exchange, and `crossChain`, a boolean indicating whether the exchange is cross-chain or not. \n\nThe component renders a container with two sections: one on the left and one on the right. The left section contains a link to the swap page, which is only rendered if either `input` or `output` is not defined. If both `input` and `output` are defined, the left section displays either \"Cross-Chain\" or \"Instant Trade\" depending on the value of `crossChain`. The right section contains three icons: a refresh icon, a filter icon, and a settings icon. Clicking on the refresh icon calls the `fetchUserBalances` function, which retrieves the user's token balances. Clicking on the filter icon opens a modal that allows the user to adjust the slippage tolerance for the exchange. Clicking on the settings icon opens a settings modal that is not implemented in this code.\n\nThe `SlippageModal` component is a child component of `ExchangeHeader` that renders the modal for adjusting the slippage tolerance. It receives three props: `autoRefresh`, a boolean indicating whether auto-refresh is enabled or not, `autoRefreshHandler`, a function that toggles the value of `autoRefresh`, and `isSlipToleranceModal`, a boolean indicating whether the modal is open or not. The modal contains several input fields and switches that allow the user to adjust various settings related to the exchange.\n\nThis component can be used as a header for a token exchange feature in a larger project. It provides a simple and intuitive interface for users to initiate and customize token exchanges. The `ExchangeHeader` component can be easily integrated into other components and pages in the project, and the `SlippageModal` component can be reused in other parts of the project that require a modal for adjusting settings. \n\nExample usage:\n\n```jsx\nimport ExchangeHeader from \"components/ExchangeHeader\";\n\nfunction ExchangePage() {\n const inputToken = { address: \"0x123abc\", symbol: \"ETH\" };\n const outputToken = { address: \"0x456def\", symbol: \"USDT\" };\n const allowedSlippage = 0.5;\n const crossChain = true;\n\n return (\n {asset.name}
\nCurrent value:
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `ExchangeHeader` component?\n- The `ExchangeHeader` component is used to display the header section of a page related to exchanging tokens, and it takes in various props related to the exchange.\n\n2. What is the `SlippageModal` component used for?\n- The `SlippageModal` component is used to display a modal that allows the user to adjust the slippage tolerance and other settings related to the token exchange.\n\n3. What is the purpose of the `getQuery` function?\n- The `getQuery` function takes in two parameters, `input` and `output`, and returns an object that contains the addresses of the input and output currencies if they are provided. If only the input currency is provided, the output currency is set to \"ETH\". If neither input nor output currencies are provided, the function returns null.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Swap/Header.md"}}],["630",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Swap/ListCard.tsx)\n\nThe code defines a React component called `ListCard` that renders a card with some information. The component takes in several props, including `label`, `fee`, `amount`, `className`, and `background`. \n\nThe `label` prop is a string that represents the label of the card, the `fee` prop is a string that represents the estimated gas fee, and the `amount` prop is a string that represents the amount of something. The `className` prop is an optional string that can be used to add additional CSS classes to the component, and the `background` prop is an optional string that represents the background color of the card.\n\nThe component returns a `div` element that contains the information passed in through the props. The `amount` prop is displayed as a heading, and the `fee` prop is displayed as a smaller text with an \"Est. gas fee\" label. The `label` prop is displayed as a smaller text in a black box that is positioned above the card.\n\nThe component also includes an image of an information icon that is displayed next to the \"Est. gas fee\" text. The image is imported from the `next/image` module.\n\nThis component can be used in a larger project to display information in a card format. The `ListCard` component can be imported into other components and used to display information in a consistent and visually appealing way. For example, it could be used to display information about different animals in a zoo, such as their name, habitat, and diet. \n\nHere is an example of how the `ListCard` component could be used in another component:\n\n```\nimport ListCard from \"./ListCard\";\n\nconst AnimalCard = ({ name, habitat, diet }) => {\n return (\n {diet}
\n \n );\n};\n\nexport default AnimalCard;\n```\n\nIn this example, the `AnimalCard` component takes in `name`, `habitat`, and `diet` props, and passes them to the `ListCard` component. The `name` prop is used as the `label` prop, the `habitat` prop is used as the `amount` prop, and the `diet` prop is displayed as a paragraph inside the `ListCard` component. The `background` prop is set to a green color to represent the animal's natural habitat.\n## Questions: \n 1. What is the purpose of the `ListCard` component?\n - The `ListCard` component is a reusable component that renders a card with a label, fee, and amount.\n\n2. What is the `Image` component being imported from and how is it being used?\n - The `Image` component is being imported from the `next/image` module and is being used to render an image of an info icon with a specific width and height.\n\n3. What is the purpose of the `background` prop in the `ListCardProps` interface?\n - The `background` prop is an optional string that allows the user to specify a custom background color for the card. If no value is provided, the default background color is used.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Swap/ListCard.md"}}],["631",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Swap/TransactionDetail.tsx)\n\nThe `TransactionDetail` component is responsible for rendering the details of a transaction in the Zoo project. It receives several props, including `evmToAddress`, `amount`, `token`, and `bridgeState`, which are used to display information about the transaction.\n\nThe component uses the `useState` hook to manage the state of whether or not to show the transaction details. It also uses two additional state variables, `isHashCopied` and `isSigCopied`, to keep track of whether the user has copied the transaction hash or signature.\n\nThe `useActiveWeb3React` hook is used to get access to the web3 library, which is used to calculate the gas price for the transaction.\n\nThe `copyTextToClipboard` function is used to copy text to the clipboard. It first checks if the `navigator.clipboard` API is available, and if not, falls back to using the `document.execCommand` method.\n\nThe component renders a div that contains the transaction details. When the user clicks on the div, the `show` state variable is toggled, and the details are either shown or hidden.\n\nIf the details are shown, the component renders several divs that display information about the transaction, including the protocol fee, transaction state, and bridge transaction signature and hash. The `shortenString` function from the `format` module is used to shorten the signature and hash strings for display purposes.\n\nEach of the signature and hash divs contains a copy button that, when clicked, copies the corresponding value to the clipboard and displays a \"Copied!\" message.\n\nOverall, the `TransactionDetail` component provides a user-friendly way to view the details of a transaction in the Zoo project and copy important information to the clipboard. It can be used in conjunction with other components in the project to provide a comprehensive user interface for interacting with the blockchain. \n\nExample usage:\n\n```jsx\nimport TransactionDetail from 'path/to/TransactionDetail';\n\nconst MyComponent = () => {\n const evmToAddress = '0x123...';\n const amount = 100;\n const token = { symbol: 'ZOO' };\n const bridgeState = { status: 'COMPLETED', signature: '0xabc...', hashedTxId: '0xdef...' };\n\n return (\n\n
\n );\n};\n```\n## Questions: \n 1. What is the purpose of the `TransactionDetail` component?\n- The `TransactionDetail` component is used to display details about a transaction, including the transaction state, protocol fee, and bridge transaction signature and hash.\n\n2. What is the `useActiveWeb3React` hook used for?\n- The `useActiveWeb3React` hook is used to get the active Web3 provider and library, which are used to retrieve the gas price for the transaction.\n\n3. What is the purpose of the `copyTextToClipboard` function?\n- The `copyTextToClipboard` function is used to copy text to the user's clipboard, and it uses the `navigator.clipboard` API if available, falling back to the `document.execCommand` method if not.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Swap/TransactionDetail.md"}}],["632",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Switch/index.tsx)\n\nThis code exports a customized Switch component from the Material-UI library. The purpose of this component is to provide a toggle switch that can be used in a React application. The component is styled using the `styled` function from Material-UI, which allows for custom CSS to be applied to the component.\n\nThe `MuiSwitch` component is created by passing the `Switch` component from Material-UI to the `styled` function. The CSS styles are defined using a JavaScript object that is passed as an argument to the `styled` function. The styles define the width, height, padding, and other properties of the switch. The `&` symbol is used to refer to the current element, and the `.` symbol is used to refer to a child element.\n\nThe `active` style is applied when the switch is clicked. This style changes the width of the thumb and moves the switch to the right. The `checked` style is applied when the switch is in the \"on\" position. This style changes the color of the thumb and the background color of the track.\n\nThe `thumb` and `track` styles define the appearance of the thumb and track elements of the switch. The `thumb` style applies a box shadow and a transition effect to the thumb element. The `track` style applies a border radius, opacity, and background color to the track element.\n\nThis component can be used in a React application by importing it and rendering it in a component. For example:\n\n```\nimport React from \"react\";\nimport MuiSwitch from \"./MuiSwitch\";\n\nfunction MyComponent() {\n const [checked, setChecked] = React.useState(false);\n\n const handleChange = () => {\n setChecked(!checked);\n };\n\n return (\n \n
\n );\n}\n```\n\nIn this example, the `MuiSwitch` component is rendered inside a `div` element. The `checked` and `onChange` props are passed to the component to control its state. When the switch is toggled, the `handleChange` function is called to update the state.\n## Questions: \n 1. What is the purpose of this code?\n \n This code exports a styled Switch component from the Material UI library.\n\n2. What are the props that can be passed to this component?\n \n The component accepts all the props that can be passed to the Switch component from Material UI library.\n\n3. What is the significance of the \"&\" symbol used in the CSS selectors?\n \n The \"&\" symbol is used to refer to the parent selector in nested CSS selectors. In this code, it is used to refer to the MuiSwitch component itself.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Switch/index.md"}}],["633",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Table/TransactionRow.tsx)\n\nThe code defines a React functional component called `TransactionRow` that renders a table row with transaction details. The component takes in five props: `from_address`, `to_address`, `value`, `block_timestamp`, and `transaction_hash`. \n\nThe `shortenAddress` function from the `functions` module is imported to shorten the `from_address` and `to_address` strings to a more readable format. The `abbreviateNumber` function from the `functions/abbreviateNumbers` module is imported to abbreviate the `value` number to a more readable format. The `moment` library is imported to format the `block_timestamp` as a human-readable date and time string.\n\nThe component returns a table row (`| From | \nTo | \nValue | \nDate | \nTransaction Hash | \n
|---|
| Name | \nHabitat | \n
|---|---|
| Lion | \nAfrica | \n
| Panda | \nAsia | \n
\n
\n );\n};\n```\n## Questions: \n 1. What is the purpose of the `Button` component being imported from \"components/Button\"?\n- The smart developer might ask why the `Button` component is being imported and what its role is in the `ToastAction` component. \n\n2. What is the `getExternalLinkProps` function and where is it defined?\n- The smart developer might ask what the `getExternalLinkProps` function does and where it is defined in the codebase.\n\n3. Why is the `Link` component from \"react-router-dom\" commented out?\n- The smart developer might ask why the `Link` component is commented out and if there is a reason for not using it in the `ToastAction` component.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Toast/ToastAction.md"}}],["638",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Toast/ToastContainer.tsx)\n\nThe code defines a React component called `ToastContainer` that renders a container for displaying toast notifications. Toast notifications are small messages that appear on the screen to provide feedback to the user about an action or event. The `ToastContainer` component uses the `TransitionGroup` component from the `react-transition-group` library to animate the appearance and disappearance of toast notifications.\n\nThe `ToastContainer` component takes in several props, including an array of `toasts` to display, a function `onRemove` to call when a toast is removed, a time-to-live `ttl` for each toast, and a `stackSpacing` value to determine the vertical spacing between stacked toasts. The component also uses a custom hook called `useMatchBreakpoints` to determine the screen size and adjust the positioning of the toasts accordingly.\n\nThe `StyledToastContainer` component is a styled component that defines the CSS styles for the toast container and the toast animations. The `enter` and `appear` classes set the initial opacity of the toast to 0.01, while the `exit` class sets the final opacity to 0.01. The `enter-active` and `appear-active` classes set the transition effect for the toast to fade in over 250ms with an ease-in effect, while the `exit-active` class sets the transition effect to fade out over 250ms with an ease-out effect.\n\nThe `ToastContainer` component maps over the `toasts` array and renders a `Toast` component for each toast. The `Toast` component takes in the `toast` object, the `onRemove` function, the `ttl` value, and a `style` object that sets the position and z-index of the toast. The `style` object uses the `isXs`, `isSm`, and `isMd` values from the `useMatchBreakpoints` hook to determine whether to position the toast from the top or bottom of the screen.\n\nOverall, this code provides a reusable and customizable component for displaying toast notifications in a React application. It can be used in conjunction with other components and libraries to create a comprehensive user interface for the application. Here is an example of how the `ToastContainer` component can be used:\n\n```\nimport React, { useState } from \"react\";\nimport ToastContainer from \"./ToastContainer\";\n\nconst App = () => {\n const [toasts, setToasts] = useState([]);\n\n const addToast = (message) => {\n const newToast = { id: Date.now(), message };\n setToasts((prevToasts) => [...prevToasts, newToast]);\n setTimeout(() => removeToast(newToast.id), 4000);\n };\n\n const removeToast = (id) => {\n setToasts((prevToasts) => prevToasts.filter((t) => t.id !== id));\n };\n\n return (\n A new version of the app is available!
\n\n \n
\n );\n};\n\nexport default App;\n```\n## Questions: \n 1. What is the purpose of the `useMatchBreakpoints` hook being imported?\n- The `useMatchBreakpoints` hook is likely used to determine the screen size and adjust the positioning of the toasts accordingly.\n\n2. What is the purpose of the `TransitionGroup` component being used?\n- The `TransitionGroup` component is likely used to animate the entrance and exit of the toasts.\n\n3. What is the purpose of the `stackSpacing` prop being passed to the `ToastContainer` component?\n- The `stackSpacing` prop is likely used to specify the amount of space between each toast when they are stacked on top of each other.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Toast/ToastContainer.md"}}],["639",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Toast/index.tsx)\n\nThis code exports three items from the `zoo` project's `ToastContainer` module: the `ToastContainer` component, the `toastTypes` object, and several types related to toasts. \n\nThe `ToastContainer` component is a container for displaying toast notifications to users. Toast notifications are small, temporary messages that appear on the screen to provide feedback or information to the user. The `ToastContainer` component is customizable and can be styled to fit the design of the application. \n\nThe `toastTypes` object contains constants that define the different types of toast notifications that can be displayed. These types include success, error, warning, and info. Developers can use these constants to create their own custom toast notifications or to style the default notifications provided by the `ToastContainer` component. \n\nThe types exported by this module include `ToastContainerProps`, which defines the props that can be passed to the `ToastContainer` component, and `Toast`, which defines the shape of a single toast notification. Additionally, the `Types as ToastTypes` statement exports an alias for the `types` object as `ToastTypes`. This allows developers to import the `toastTypes` object using a more descriptive name. \n\nOverall, this code provides a convenient way for developers to use and customize toast notifications in their applications. Here is an example of how the `ToastContainer` component and `toastTypes` object could be used in a React application:\n\n```\nimport { ToastContainer, toastTypes } from 'zoo';\n\nfunction App() {\n const handleButtonClick = () => {\n // Display a success toast notification\n toastTypes.success('Button clicked!');\n };\n\n return (\n \n \n
\n );\n}\n```\n## Questions: \n 1. **What is the purpose of the `ToastContainer` and `Toast` components?** The `ToastContainer` component is likely responsible for rendering and managing toast notifications, while the `Toast` component represents an individual toast notification. \n2. **What is the `types` export and what does it contain?** The `types` export likely contains various type definitions related to toast notifications, such as the shape of a `Toast` object or the available types of toast notifications. \n3. **What is the significance of the `Types` export in the type definition?** The `Types` export is likely an alias for the `toastTypes` export, allowing developers to import the available toast types using a more descriptive name.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Toast/index.md"}}],["640",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Toast/types.ts)\n\nThis code defines a set of interfaces and types related to displaying toast notifications in a web application. Toast notifications are small messages that appear on the screen to provide feedback or alerts to the user. \n\nThe `types` object defines three different types of toast notifications: DANGER, WARNING, and INFO. These types are represented as strings that can be used to style the toast notification appropriately. \n\nThe `Types` type is a union type that represents all possible values of the `types` object. This type is used to ensure that the `type` property of the `Toast` interface is always one of the valid types defined in the `types` object. \n\nThe `ToastAction` interface defines the structure of an action that can be associated with a toast notification. This includes a `text` property that describes the action and a `url` property that specifies the URL to navigate to when the action is clicked. \n\nThe `Toast` interface defines the structure of a toast notification. Each toast has an `id` property that uniquely identifies it, a `type` property that specifies the type of the toast (using one of the values from the `types` object), a `title` property that provides a short description of the toast, an optional `description` property that provides additional information, and an optional `action` property that specifies an action associated with the toast. \n\nThe `ToastContainerProps` interface defines the properties that can be passed to a component that displays a collection of toast notifications. This includes an array of `toasts` to display, a `stackSpacing` property that specifies the spacing between stacked toasts, a `ttl` property that specifies the time-to-live (in milliseconds) for each toast, and an `onRemove` callback function that is called when a toast is dismissed. \n\nThe `ToastProps` interface defines the properties that can be passed to a component that displays a single toast notification. This includes the `toast` object to display, the `onRemove` callback function, the `ttl` property, and a `style` property that can be used to apply custom styles to the toast. \n\nOverall, this code provides a set of interfaces and types that can be used to define and display toast notifications in a web application. By using these interfaces and types, developers can ensure that their toast notifications are consistent and easy to manage. \n\nExample usage:\n\n```typescript\nimport { Toast, ToastContainerProps, ToastProps } from 'zoo';\n\nconst toasts: Toast[] = [\n {\n id: '1',\n type: 'warning',\n title: 'Warning!',\n description: 'Something went wrong.',\n action: {\n text: 'Retry',\n url: '/retry',\n },\n },\n {\n id: '2',\n type: 'info',\n title: 'Information',\n description: 'Your changes have been saved.',\n },\n];\n\nfunction handleRemove(id: string) {\n // Remove the toast with the specified ID\n}\n\nfunction renderToast(toast: Toast) {\n return (\n \n
\n )\n}\n```\n\nIn this example, the `App` component has a state variable called `isDarkMode` that determines whether the app is in dark mode or not. The `toggleDarkMode` function updates the `isDarkMode` state variable when the toggle switch is clicked. The `ListToggle` component is rendered with the `isActive` prop set to `isDarkMode`, the `bgColor` prop set to `#4A5568`, and the `toggle` prop set to `toggleDarkMode`. The `className` of the `div` element that wraps the app is set to `\"dark\"` if `isDarkMode` is true, which applies some dark mode styles to the app. The `p` element contains some text that will be styled differently in dark mode.\n## Questions: \n 1. What is the purpose of this code?\n - This code exports a React component called `ListToggle` that renders a toggle switch with customizable background color and text labels for on and off states.\n\n2. What are the required props for the `ListToggle` component?\n - The `ListToggle` component requires `isActive` (a boolean indicating whether the toggle is on or off) and `toggle` (a function to be called when the toggle is clicked) props. It also accepts optional `id` (a string for the HTML `id` attribute) and `bgColor` (a string for the background color of the toggle when it is on) props.\n\n3. What CSS classes are applied to the `ListToggle` component?\n - The `ListToggle` component applies different CSS classes based on the `isActive` prop. When `isActive` is true, it applies the classes `bg-dark-700` and `text-high-emphesis`, and when `isActive` is false, it applies the classes `bg-dark-800` and `text-primary`. It also applies the classes `rounded-full`, `flex`, `items-center`, `outline-none`, `cursor-pointer`, `border-none`, `py-1`, `px-3`, and `space-x-3` to both states.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Toggle/ListToggle.md"}}],["642",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Toggle/index.tsx)\n\nThe code defines a React component called `Toggle` that renders a switch UI element using the `Switch` component from the `@headlessui/react` library. The `Toggle` component takes three props: `id`, `isActive`, and `toggle`. \n\nThe `isActive` prop is a boolean that determines whether the switch is on or off. The `toggle` prop is a function that is called when the switch is toggled. The `id` prop is optional and can be used to set the `id` attribute of the switch element.\n\nThe `Switch` component renders a checkbox input element that is visually styled as a switch. The `checked` prop of the `Switch` component is set to the `isActive` prop of the `Toggle` component, so the switch is initially rendered in the on or off position based on the value of `isActive`. The `onChange` prop of the `Switch` component is set to the `toggle` prop of the `Toggle` component, so when the switch is toggled, the `toggle` function is called.\n\nThe `classNames` function from the `../../functions` module is used to conditionally apply CSS classes to the switch element based on the value of `isActive`. If `isActive` is true, the switch is given a blue background color, otherwise it is given a dark gray background color.\n\nThe switch element consists of two nested `span` elements. The first `span` element is visually hidden and provides an accessible label for the switch. The second `span` element contains two nested `span` elements that represent the switch handle. The first nested `span` element is positioned to the left or right of the switch based on the value of `isActive`, and is given a dark gray background color. The second nested `span` element is positioned on top of the first nested `span` element and is given a white background color. When `isActive` is true, the second nested `span` element is visible and contains a checkmark icon, otherwise it is hidden and contains a cross icon.\n\nThis `Toggle` component can be used in any React application that needs to render a switch UI element. It provides a simple and customizable way to toggle a boolean value. An example usage of the `Toggle` component is shown below:\n\n```\nimport Toggle from './Toggle'\n\nfunction App() {\n const [isActive, setIsActive] = useState(false)\n\n const handleToggle = () => {\n setIsActive(!isActive)\n }\n\n return (\n This is some text that will be styled differently in dark mode.
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `Toggle` component?\n- The `Toggle` component is a switch component that takes in an `id`, `isActive` boolean value, and a `toggle` function as props and returns a switch element with two states.\n\n2. What is the `classNames` function used for?\n- The `classNames` function is used to conditionally concatenate class names based on the values of the `isActive` prop and other static class names.\n\n3. What is the purpose of the `Switch` component from the `@headlessui/react` library?\n- The `Switch` component is a customizable switch component that provides accessible keyboard navigation and screen reader support. It takes in `checked`, `onChange`, and `className` props and returns a switch element.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Toggle/index.md"}}],["643",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Tooltip/index.tsx)\n\nThe code in this file provides functionality for creating tooltips and mouseover tooltips in a React project. \n\nThe `Tooltip` component takes in a `text` prop, which is the content that will be displayed in the tooltip. It then renders a `Popover` component with the `content` prop set to a div containing the `text` prop. The `Popover` component is imported from another file and is responsible for rendering the tooltip itself. The `Tooltip` component also spreads any additional props passed to it onto the `Popover` component.\n\nThe `TooltipContent` component is similar to the `Tooltip` component, but instead of taking in a `text` prop, it takes in a `content` prop. This component is meant to be used when the content of the tooltip is more complex than just a string of text. It also renders a `Popover` component with the `content` prop set to the `content` prop passed to it.\n\nThe `MouseoverTooltip` component is a variation of the `Tooltip` component that only shows the tooltip when the user hovers over the component it is wrapping. It takes in any props that the `Tooltip` component takes in, except for the `show` prop. It then renders a `div` that wraps around the `children` prop passed to it. When the user hovers over this `div`, the `show` state is set to `true`, which causes the tooltip to be displayed.\n\nThe `MouseoverTooltipContent` component is similar to the `MouseoverTooltip` component, but instead of taking in a `text` prop or a `content` prop, it takes in both a `content` prop and a `children` prop. It renders a `div` that wraps around the `children` prop passed to it, and when the user hovers over this `div`, the `show` state is set to `true`, which causes the tooltip to be displayed. The `content` prop is passed to the `TooltipContent` component, which is responsible for rendering the tooltip itself.\n\nOverall, these components provide a simple and flexible way to add tooltips and mouseover tooltips to a React project. They can be used in a variety of ways, such as providing additional information about a UI element or displaying a preview of content. Here is an example of how the `Tooltip` component could be used:\n\n```\nimport { Tooltip } from 'zoo';\n\nfunction MyComponent() {\n return (\n \n \n Hover over me!\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `Popover` component and how is it used in this code?\n \n The `Popover` component is imported and used to render tooltip content in this code. It takes in a `content` prop which is a ReactNode and renders it in a popover.\n\n2. What is the difference between the `Tooltip` and `TooltipContent` components?\n \n The `Tooltip` component is used to render a tooltip with text content, while the `TooltipContent` component is used to render a tooltip with arbitrary content.\n\n3. What is the purpose of the `MouseoverTooltip` and `MouseoverTooltipContent` components?\n \n The `MouseoverTooltip` and `MouseoverTooltipContent` components are variations of the `Tooltip` and `TooltipContent` components respectively, with added functionality to show and hide the tooltip on mouseover events.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Tooltip/index.md"}}],["644",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/TransactionSettings/index.tsx)\n\nThe `TransactionSettings` component is responsible for rendering and managing the user's transaction settings, specifically the slippage tolerance and transaction deadline. It imports several hooks from the `user` slice of the global state, including `useUserSlippageTolerance`, `useSetUserSlippageTolerance`, and `useUserTransactionTTL`. It also imports several utility functions and components from various packages.\n\nThe component takes in a `placeholderSlippage` prop, which is used to display a default slippage tolerance value in the input field. It then initializes several state variables using the `useState` hook, including `slippageInput`, `slippageError`, `deadlineInput`, and `deadlineError`. It also initializes a reference to the slippage input field using the `useRef` hook.\n\nThe `parseSlippageInput` function is responsible for parsing and validating the user's input for the slippage tolerance. It first sets the `slippageInput` state variable to the user's input and clears the `slippageError` state variable. If the input is empty, it sets the user's slippage tolerance to \"auto\". Otherwise, it attempts to parse the input as a number and convert it to a percentage. If the parsed value is not an integer between 0 and 5000, it sets the user's slippage tolerance to \"auto\" and sets the `slippageError` state variable to `SlippageError.InvalidInput`. Otherwise, it sets the user's slippage tolerance to the parsed value as a `Percent` object.\n\nThe `parseCustomDeadline` function is responsible for parsing and validating the user's input for the transaction deadline. It first sets the `deadlineInput` state variable to the user's input and clears the `deadlineError` state variable. If the input is empty, it sets the transaction deadline to the default value. Otherwise, it attempts to parse the input as a number and convert it to seconds. If the parsed value is not an integer between 60 and 10800 (3 hours), it sets the `deadlineError` state variable to `DeadlineError.InvalidInput`. Otherwise, it sets the transaction deadline to the parsed value.\n\nThe component then renders two input fields for the slippage tolerance and transaction deadline, respectively. The slippage tolerance input field includes a button to toggle between \"auto\" and custom values, as well as a `QuestionHelper` component to display additional information. The transaction deadline input field includes a label for \"minutes\" and a `QuestionHelper` component. If there are any errors with the user's input, the component displays an error message below the input field.\n\nOverall, the `TransactionSettings` component provides a user-friendly interface for managing transaction settings and ensures that the user's input is properly validated before being used in the application. It can be used in various contexts throughout the larger project, wherever transaction settings need to be managed.\n## Questions: \n 1. What is the purpose of the `TransactionSettings` component?\n- The `TransactionSettings` component is used to display and allow users to adjust their slippage tolerance and transaction deadline settings.\n\n2. What are the possible values for the `SlippageError` and `DeadlineError` enums?\n- The `SlippageError` enum has three possible values: `InvalidInput`, `RiskyLow`, and `RiskyHigh`. The `DeadlineError` enum has one possible value: `InvalidInput`.\n- These enums are used to track and display errors related to user input for slippage tolerance and transaction deadline settings.\n\n3. What is the purpose of the `useUserSlippageTolerance`, `useSetUserSlippageTolerance`, and `useUserTransactionTTL` hooks?\n- The `useUserSlippageTolerance` hook retrieves the current slippage tolerance setting for the user.\n- The `useSetUserSlippageTolerance` hook is used to update the user's slippage tolerance setting.\n- The `useUserTransactionTTL` hook retrieves the current transaction deadline setting for the user.","metadata":{"source":".autodoc/docs/markdown/core/src/components/TransactionSettings/index.md"}}],["645",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Typography/index.tsx)\n\nThis code defines a `Typography` component that can be used to render text with different styles and weights. The component takes in several props, including `variant`, `weight`, `component`, `className`, and `clickable`. \n\nThe `variant` prop determines the size of the text and can be set to one of several predefined values, including `hero`, `h1`, `h2`, `h3`, `lg`, `base`, `sm`, and `xs`. The `weight` prop determines the font weight and can be set to either `400` or `700`. The `component` prop determines the HTML element that the text should be rendered as and defaults to `div`. The `className` prop allows for additional CSS classes to be added to the component. The `clickable` prop determines whether the text should be clickable or not.\n\nThe `Typography` component uses the `classNames` function from the `functions` module to generate a list of CSS classes based on the props passed in. It then creates a new React element using the `React.createElement` function and passes in the generated CSS classes, `onClick` handler (if provided), and any other props passed in. Finally, it renders the `children` prop, which represents the text to be displayed.\n\nThis component can be used throughout the larger project to render text with consistent styles and weights. For example, it could be used to render headings, paragraphs, or buttons. Here is an example of how the `Typography` component could be used to render a heading:\n\n```\nHover over this text to see a tooltip!
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code is a React component that renders a network switcher UI element for a web3 application.\n\n2. What dependencies does this code have?\n- This code imports several dependencies including `next/image`, `react`, and custom hooks and components from other files in the project.\n\n3. What is the expected behavior when the user interacts with this UI element?\n- When the user clicks on the network switcher UI element, a modal component called `NetworkModal` is displayed, allowing the user to select a different network to connect to.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Web3Network/index.md"}}],["650",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Web3ReactManager/GnosisManager.tsx)\n\nThe code above is a React component called `GnosisManager` that utilizes the `@gnosis.pm/safe-apps-web3-react` library to connect to a Gnosis Safe multisig wallet. \n\nThe `useSafeAppConnection` hook is used to establish a connection to the Gnosis Safe multisig wallet through the `SafeAppConnector` object. The `SafeAppConnector` object is created using the `new` keyword and is imported from the `@gnosis.pm/safe-apps-web3-react` library. \n\nThe `useSafeAppConnection` hook takes in the `SafeAppConnector` object as an argument and returns a boolean value indicating whether or not the connection to the Gnosis Safe multisig wallet was successful. This value is stored in the `triedToConnectToSafe` variable. \n\nThe `GnosisManager` component returns `null`, indicating that it does not render any content to the user interface. Instead, it is used as a utility component to establish a connection to the Gnosis Safe multisig wallet. \n\nThis code can be used in a larger project that requires interaction with a Gnosis Safe multisig wallet. For example, if a project requires the ability to send and receive funds from a Gnosis Safe multisig wallet, this code can be used to establish a connection to the wallet and perform the necessary transactions. \n\nHere is an example of how this code can be used in a larger project:\n\n```\nimport React from 'react'\nimport GnosisManager from './GnosisManager'\n\nfunction App() {\n return (\n \n
\n )\n}\n\nexport default App\n```\n\nIn the example above, the `GnosisManager` component is imported and used within the `App` component. Other components can also be added to the `App` component to interact with the Gnosis Safe multisig wallet, such as a component to send funds or a component to view transaction history.\n## Questions: \n 1. What is the purpose of the `useEffect` and `useState` hooks imported from React?\n - The `useEffect` hook is likely used to handle side effects, such as updating state or making API calls, and the `useState` hook is likely used to manage component state.\n \n2. What is the `@gnosis.pm/safe-apps-web3-react` package used for?\n - The `@gnosis.pm/safe-apps-web3-react` package is likely used to connect to the Gnosis Safe multisig wallet using the Web3 API.\n \n3. What is the purpose of the `triedToConnectToSafe` variable returned by the `useSafeAppConnection` hook?\n - The `triedToConnectToSafe` variable is likely used to determine whether or not the component was able to successfully connect to the Gnosis Safe multisig wallet.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Web3ReactManager/GnosisManager.md"}}],["651",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Web3ReactManager/index.tsx)\n\nThe `Web3ReactManager` component is responsible for managing the connection to the Ethereum network via the Web3 React library. It is used in the larger project to ensure that the user is connected to the Ethereum network before allowing them to interact with the application. \n\nThe component imports several dependencies, including React, `useEffect`, `useState`, `Loader`, `NetworkContextName`, `dynamic`, `t`, `useEagerConnect`, `useInactiveListener`, `useLingui`, and `useActiveWeb3React`. \n\nThe `GnosisManagerNoSSR` component is imported using the `dynamic` function from Next.js, which allows for server-side rendering of components. \n\nThe `Web3ReactManager` component takes in a single prop, `children`, which is a JSX element. \n\nThe component first initializes several variables using the `useActiveWeb3React` hook, which provides information about the current state of the user's connection to the Ethereum network. It then uses the `useEagerConnect` hook to try to connect to an injected provider, if it exists and has already granted access. \n\nIf the connection is not active and there is no error, the component logs a message to the console. \n\nThe `useInactiveListener` hook is used to listen for login events on the injected provider when there is no account connected. \n\nThe component then sets up a delayed loader state using `useState` and `useEffect`. \n\nIf the connection has not been eagerly tried, the component returns `null`. If the account context is not active and there is a network error, the component displays an error message. If neither context is active, the component displays a loader. \n\nFinally, the component returns the `GnosisManagerNoSSR` component and the `children` prop. \n\nOverall, the `Web3ReactManager` component is an important part of the larger project's infrastructure, ensuring that the user is connected to the Ethereum network before allowing them to interact with the application.\n## Questions: \n 1. What is the purpose of the `Web3ReactManager` component?\n- The `Web3ReactManager` component manages the connection to a web3 provider and displays appropriate UI based on the connection status.\n\n2. What is the significance of the `GnosisManagerNoSSR` component?\n- The `GnosisManagerNoSSR` component is dynamically imported and rendered without server-side rendering, which can improve performance by reducing the initial bundle size.\n\n3. What are the `useEagerConnect` and `useInactiveListener` hooks used for?\n- The `useEagerConnect` hook attempts to eagerly connect to an injected provider, while the `useInactiveListener` hook listens for login events on the provider when there is no account connected.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Web3ReactManager/index.md"}}],["652",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Web3Status/index.tsx)\n\nThe `Web3Status` component is responsible for displaying the user's wallet status and allowing them to connect to a wallet. It imports several dependencies such as React, `useMemo`, `AbstractConnector`, `Image`, `Loader`, `styled-components`, `useLingui`, `useTheme`, `UserIcon`, and `HatchEggModal`. It also imports several functions and constants from other files in the project such as `SUPPORTED_WALLETS`, `injected`, `isTransactionRecent`, `useAllTransactions`, `TransactionDetails`, `NetworkContextName`, `shortenAddress`, `useENSName`, and `useWalletModalToggle`.\n\nThe `Web3Status` component is a wrapper for the `Web3StatusInner` component, which is responsible for rendering the user's wallet status. The `Web3StatusInner` component uses the `useActiveWeb3React` hook to get the user's account and connector. If the user is connected to a wallet, it displays their account address or ENS name, along with an icon representing their wallet type. If the user has pending transactions, it displays the number of pending transactions and a loading spinner. If the user is not connected to a wallet, it displays a button to connect to a wallet.\n\nThe `Web3Status` component also renders a `WalletModal` component, which displays the user's pending and confirmed transactions and allows them to cancel pending transactions. The `WalletModal` component is only rendered if the user is connected to a wallet.\n\nOverall, the `Web3Status` component is an important part of the project's user interface, as it allows users to connect to a wallet and view their transaction status. It is used in several places throughout the project, such as in the header and footer of the website.\n## Questions: \n 1. What is the purpose of this code file?\n- This code file contains a React component for displaying the user's web3 status and wallet information.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, Next.js, styled-components, @lingui/macro, and @heroicons/react.\n\n3. What functionality does the `StatusIcon` function provide?\n- The `StatusIcon` function takes a `Connector` object as a prop and returns an icon component based on the type of connector. It currently supports several different types of connectors, including MetaMask, WalletConnect, Coinbase Wallet, and more.","metadata":{"source":".autodoc/docs/markdown/core/src/components/Web3Status/index.md"}}],["653",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ZooItem/index.tsx)\n\nThe `ZooItem` component is a React component that renders a single item in the Zoo marketplace. It takes in four props: `src`, `infoTitle`, `infoDesc`, and `authenticityPrice`. \n\nThe component is divided into two main sections: the first section displays an image of the item, along with a \"Make Offer\" button, while the second section displays information about the item, including its title, description, and details such as the transaction hash, token ID, and token standard. The second section also includes a \"Proof of Authenticity\" section, which displays the price of the item's authenticity proof, a link to the transaction on Etherscan, and a link to view the item on IPS.\n\nThe component uses several third-party libraries, including Next.js, which provides server-side rendering and other features for React applications, and the `Image` component from Next.js, which optimizes images for performance. The component also uses the `Link` component from Next.js to create links to other pages in the application.\n\nThe component is designed to be reusable, allowing it to be used to display any item in the Zoo marketplace. For example, the component could be used to display a painting, a sculpture, or a rare collectible. The component's props allow it to be customized for each item, with the `src` prop specifying the image source, the `infoTitle` prop specifying the item's title, the `infoDesc` prop specifying the item's description, and the `authenticityPrice` prop specifying the price of the item's authenticity proof.\n\nHere is an example of how the `ZooItem` component could be used in a larger project:\n\n```\nimport ZooItem from './ZooItem';\n\nconst items = [\n {\n src: '/painting.jpg',\n infoTitle: 'Mona Lisa',\n infoDesc: 'A painting by Leonardo da Vinci',\n authenticityPrice: '0.1 ETH',\n },\n {\n src: '/sculpture.jpg',\n infoTitle: 'David',\n infoDesc: 'A sculpture by Michelangelo',\n authenticityPrice: '0.2 ETH',\n },\n];\n\nfunction Marketplace() {\n return (\n My Gnosis Safe Multisig Wallet
\n\n {items.map((item) => (\n
\n );\n}\n```\n\nIn this example, the `Marketplace` component renders a list of items using the `ZooItem` component. The `items` array contains two objects, each representing an item in the marketplace. The `ZooItem` component is used to render each item, with the `src`, `infoTitle`, `infoDesc`, and `authenticityPrice` props set to the corresponding values for each item.\n## Questions: \n 1. What is the purpose of the `ZooItem` component?\n- The `ZooItem` component is a Next.js page component that renders a single item in the zoo.\n\n2. What props does the `ZooItem` component expect?\n- The `ZooItem` component expects four props: `src` (a string representing the image source), `infoTitle` (a string representing the title of the item), `infoDesc` (a string representing the description of the item), and `authenticityPrice` (a string representing the price of the item).\n\n3. What is the purpose of the `Link` component from Next.js?\n- The `Link` component from Next.js is used to create client-side navigation between pages in a Next.js app. In this code, it is used to create a link to the Etherscan transaction and to the IPS view of the item.","metadata":{"source":".autodoc/docs/markdown/core/src/components/ZooItem/index.md"}}],["654",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/alertMessage.ts)\n\nThe code above is a function that exports a notification system using the `react-toastify` library. The purpose of this code is to provide a simple and customizable way to display notifications to the user. \n\nThe `notify` function takes two parameters: `message` and `type`. The `message` parameter is a string that represents the message to be displayed in the notification. The `type` parameter is also a string that represents the type of notification to be displayed. The `type` parameter can be one of three values: \"error\", \"success\", or any other value, which will display an \"info\" notification.\n\nThe function uses a switch statement to determine which type of notification to display based on the `type` parameter. If the `type` parameter is \"error\", the function will display an error notification using the `toast.error` method from the `react-toastify` library. If the `type` parameter is \"success\", the function will display a success notification using the `toast.success` method. If the `type` parameter is any other value, the function will display an info notification using the `toast.info` method.\n\nThis code can be used in the larger project to provide a consistent and user-friendly way to display notifications to the user. For example, if there is an error in the application, the `notify` function can be called with the \"error\" type and an appropriate error message to alert the user. Similarly, if a task is completed successfully, the `notify` function can be called with the \"success\" type and a success message to inform the user. \n\nHere is an example of how the `notify` function can be used in a React component:\n\n```\nimport { notify } from \"./notify\";\n\nconst MyComponent = () => {\n const handleClick = () => {\n // do some task\n notify(\"Task completed successfully!\", \"success\");\n };\n\n return (\n \n );\n};\n```\n\nIn the example above, the `notify` function is imported from the `notify` file and used to display a success notification when the button is clicked and the task is completed successfully.\n## Questions: \n 1. What is the purpose of the `react-toastify` library and how is it being used in this code?\n - The `react-toastify` library is being used to display toast notifications. It is imported and used to display different types of notifications based on the `type` parameter passed to the `notify` function.\n2. What are the possible values for the `type` parameter in the `notify` function?\n - The possible values for the `type` parameter are \"error\", \"success\", and any other value which will result in an \"info\" notification being displayed.\n3. Are there any other functions or components in this file that are not being exported?\n - No, there are no other functions or components in this file that are not being exported. The `notify` function is the only export from this file.","metadata":{"source":".autodoc/docs/markdown/core/src/components/alertMessage.md"}}],["655",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/blog/articles.tsx)\n\nThe code defines a React functional component called `Article` that takes in an object `article` as a prop. The `article` object has properties such as `name`, `image`, `link`, `date`, `writtenBy`, and `isNew`. The component returns a JSX element that displays the article information in a styled format.\n\nThe JSX element is a `div` with a class name of `mb-8 lg:mb-8 bg-dark-blue flex flex-col w-full max-w-sm md:max-w-lg border border-opacity-30 rounded`. This element contains two child elements: an anchor tag and a `div` with a class name of `px-4 py-8`. The anchor tag has an `href` attribute that is set to the `link` property of the `article` object. The `div` with a class name of `px-4 py-8` contains the rest of the article information.\n\nThe `div` with a class name of `mb-4 rounded overflow-hidden border-b border-opacity-30 bg-dark` contains an `Image` component from the `next/image` library. The `src` attribute of the `Image` component is set to the `image` property of the `article` object. The `width` and `height` attributes are set to `100%` and the `layout` attribute is set to `responsive`. The `objectFit` attribute is set to `contain`.\n\nThe `div` with a class name of `flex justify-between items-center mb-4` contains two child elements: a `p` tag and a `div` tag. The `p` tag displays the text \"New\" if the `isNew` property of the `article` object is `true`. Otherwise, it displays nothing. The `div` tag contains two child elements: an `Image` component and a `p` tag. The `src` attribute of the `Image` component is set to `\"/img/logo.png\"`. The `width` and `height` attributes are set to `24`. The `alt` attribute is set to an empty string. The `p` tag displays the text \"Zoo Labs\".\n\nThe `div` with a class name of `px-4 py-8` contains a `h3` tag, a `p` tag, and another `p` tag. The `h3` tag displays the `name` property of the `article` object. The `p` tag displays the text \"Written by: \" followed by the `writtenBy` property of the `article` object. The other `p` tag displays the `date` property of the `article` object.\n\nThis component can be used to display articles in a blog or news section of a website. The `Article` component can be imported into another component and passed an `article` object as a prop. Here is an example of how the `Article` component can be used:\n\n```\nimport Article from \"./Article\";\n\nconst articles = [\n {\n name: \"New article\",\n image: \"/img/article.png\",\n link: \"https://example.com/article\",\n date: \"May 1, 2022\",\n writtenBy: \"John Doe\",\n isNew: true,\n },\n {\n name: \"Another article\",\n image: \"/img/another-article.png\",\n link: \"https://example.com/another-article\",\n date: \"April 1, 2022\",\n writtenBy: \"Jane Doe\",\n isNew: false,\n },\n];\n\nconst ArticleList = () => {\n return (\n \n {articles.map((article) => (\n \n ))}\n
\n );\n};\n\nexport default ArticleList;\n```\n\nIn this example, an array of `articles` is defined. The `ArticleList` component maps over the `articles` array and renders an `Article` component for each article. The `key` prop of each `Article` component is set to the `link` property of the article object.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `Article` that displays information about an article, including its name, image, link, date, author, and whether it is new.\n\n2. What external dependencies does this code rely on?\n- This code imports two external dependencies: `react` and `next/image`.\n\n3. What is the structure of the `Props` interface and how is it used in the component?\n- The `Props` interface defines an object with properties `name`, `image`, `link`, `date`, `writtenBy`, and `isNew`, all of which are of type `string` except for `isNew`, which is of type `boolean`. This interface is used to destructure the `article` prop passed to the `Article` component, allowing the component to access the values of these properties.","metadata":{"source":".autodoc/docs/markdown/core/src/components/blog/articles.md"}}],["656",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/market/marketitem.json)\n\nThis code defines a JSON object that contains information about different animals in a zoo. Each animal is represented as a separate object within the array, with properties such as an ID, name, image, and 3D model files in both USDZ and GLB formats. Additionally, each animal has a \"type\" property that specifies whether it is an \"egg\" or an \"animal\".\n\nThis code can be used in a larger project that involves creating a virtual zoo experience. The JSON object can be used to populate a user interface that displays information about each animal, including its name, image, and 3D model. The \"type\" property can be used to categorize the animals and display them in different sections of the UI. For example, the \"egg\" animals could be displayed in an incubation section, while the \"animal\" animals could be displayed in a habitat section.\n\nHere is an example of how this code could be used in a React component:\n\n```jsx\nimport React from \"react\";\nimport animals from \"./zoo\";\n\nfunction Zoo() {\n return (\n \n
\n );\n}\n```\n\nIn this example, the `animals` array is imported from the `zoo` file and used to display information about each animal in the UI. The `filter` method is used to separate the animals into two sections based on their \"type\" property, and the `map` method is used to render each animal's name, image, and 3D model using the `Welcome to the Zoo!
\n\n
\n Egg Animals
\n {animals.filter((animal) => animal.type === \"egg\").map((animal) => (\n\n 
\n
\n ))}\n {animal.name}
\n\n
\n Animal Animals
\n {animals.filter((animal) => animal.type === \"animal\").map((animal) => (\n\n \n
\n ))}\n {animal.name}
\n\n \n Click me!\n \n
\n );\n};\n\nexport default MyComponent;\n```\n\nIn this example, the `getExternalLinkProps` function is used to spread the `target` and `rel` properties onto the `a` element. This ensures that the link will open in a new tab and have the appropriate security measures applied.\n## Questions: \n 1. What does the `getExternalLinkProps` function do?\n - The `getExternalLinkProps` function returns an object with two properties, `target` and `rel`, which are used for external links.\n\n2. Why is the `target` property set to `_blank`?\n - The `target` property is set to `_blank` to open the link in a new tab or window, instead of replacing the current page.\n\n3. What is the purpose of the `rel` property and why is it set to `noreferrer noopener`?\n - The `rel` property is used to specify the relationship between the current document and the linked document. `noreferrer` is used to prevent the browser from sending the referrer header, and `noopener` is used to prevent the new page from being able to access the window object of the previous page. This helps to improve security and privacy.","metadata":{"source":".autodoc/docs/markdown/core/src/config/getExternalLinkProps.md"}}],["669",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/index.ts)\n\nThe code above is a simple configuration file for the zoo project. It imports the `ChainId` enum from the `@zoolabs/zdk` library and defines a `config` object with an empty object as its value for the `MAINNET` chain ID. \n\nThe purpose of this file is to provide a central location for storing configuration options for the zoo project. By defining the `config` object, developers can easily access and modify configuration options for the `MAINNET` chain ID throughout the project. \n\nFor example, if the project needed to define a default gas price for transactions on the `MAINNET` chain, the `config` object could be updated to include a `gasPrice` property with the desired value. This value could then be accessed throughout the project by importing the `config` object and referencing the `gasPrice` property.\n\n```\nimport config from 'zoo/config'\n\nconst gasPrice = config[ChainId.MAINNET].gasPrice || 1000000000\n```\n\nIn the example above, the `config` object is imported and the `gasPrice` property is accessed for the `MAINNET` chain ID. If the `gasPrice` property is not defined in the `config` object, a default value of `1000000000` is used.\n\nOverall, this configuration file provides a simple and flexible way for developers to manage configuration options for the zoo project.\n## Questions: \n 1. What is the purpose of the `ChainId` import from `@zoolabs/zdk`?\n - The `ChainId` import is likely used to define different configurations for different blockchain networks.\n2. Why is the `config` object empty for the `MAINNET` chain ID?\n - It's possible that the `config` object is intended to be populated with specific configurations for each chain ID, but has not yet been implemented for the `MAINNET` chain ID.\n3. What is the intended use of the `config` object and how is it used in the rest of the `zoo` project?\n - Without further context, it's difficult to determine the intended use of the `config` object and how it is used in the rest of the `zoo` project.","metadata":{"source":".autodoc/docs/markdown/core/src/config/index.md"}}],["670",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/index.ts)\n\nThis code defines a mapping of Chainlink price feed addresses for various blockchain networks. The purpose of this code is to provide a centralized location for accessing the addresses of Chainlink price feeds on different networks. \n\nThe code imports mappings for different networks from separate files and defines a type for the ChainlinkPriceFeedMap object. This object contains key-value pairs where the key is the address of the Chainlink price feed and the value is an object containing information about the price feed, such as the from and to tokens, decimals, and warning messages. \n\nThe code also defines a constant CHAINLINK_PRICE_FEED_MAP, which is an object that maps ChainId values to the corresponding ChainlinkPriceFeedMap for that network. ChainId is an enum defined in the @zoolabs/zdk library that represents the different blockchain networks. \n\nThis code can be used in the larger project to easily access the addresses of Chainlink price feeds on different networks. For example, if a function in the project needs to retrieve the address of a Chainlink price feed on the BSC network, it can simply access the BSC object in the CHAINLINK_PRICE_FEED_MAP constant. \n\nExample usage:\n\n```\nimport { ChainId } from '@zoolabs/zdk'\nimport { CHAINLINK_PRICE_FEED_MAP } from './path/to/zoo'\n\nconst bscPriceFeeds = CHAINLINK_PRICE_FEED_MAP[ChainId.BSC]\nconst ethUsdPriceFeed = bscPriceFeeds['0x8AC76a51cc950d9822D68b83fE1Ad97B32Cd580d']\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a mapping of Chainlink price feed addresses for various blockchain networks.\n\n2. What is the `ChainId` type from `@zoolabs/zdk` used for?\n- The `ChainId` type is used as a key in the `CHAINLINK_PRICE_FEED_MAP` object to associate each Chainlink price feed mapping with a specific blockchain network.\n\n3. What information is included in each Chainlink price feed mapping?\n- Each mapping includes the `from` and `to` currency symbols, the number of decimals for each currency, and optional warning and address fields.","metadata":{"source":".autodoc/docs/markdown/core/src/config/oracles/chainlink/index.md"}}],["671",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/arbitrum.ts)\n\nThis code defines a constant object called `ARBITRUM_CHAINLINK_MAPPING` that maps various cryptocurrency pairs to their corresponding Chainlink oracle addresses and other relevant information. The purpose of this code is to provide a centralized location for storing this mapping information, which can be used throughout the larger project to retrieve price data from the Chainlink oracle network.\n\nEach key in the object represents a unique cryptocurrency pair, and the corresponding value is an object that contains the following properties:\n- `from`: the address of the token contract for the \"from\" currency in the pair\n- `to`: the address of the token contract for the \"to\" currency in the pair\n- `decimals`: the number of decimal places used by the price feed for this pair\n- `fromDecimals`: the number of decimal places used by the \"from\" currency token contract\n- `toDecimals`: the number of decimal places used by the \"to\" currency token contract\n\nFor example, the first key-value pair in the object maps the WETH/USD pair to the Chainlink oracle address `0x82aF49447D8a07e3bd95BD0d56f35241523fBab1`. The `from` property is set to the address of the WETH token contract, `0x639Fe6ab55C921f74e7fac1ee960C0B6293ba612`, and the `to` property is set to a special \"dummy\" address that represents USD. The `decimals` property is set to 8, indicating that the price feed uses 8 decimal places, and the `fromDecimals` property is set to 18, indicating that the WETH token contract uses 18 decimal places.\n\nThis code can be used throughout the larger project to retrieve price data from the Chainlink oracle network. For example, if the project needs to retrieve the current price of WETH in USD, it can use the `ARBITRUM_CHAINLINK_MAPPING` object to look up the Chainlink oracle address for the WETH/USD pair, and then use that address to query the Chainlink price feed for the current price. By centralizing this mapping information in a single location, the project can avoid hard-coding addresses and other information throughout the codebase, which can make it easier to maintain and update the project over time.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines a mapping of various token pairs to their corresponding Chainlink oracle addresses and decimal values.\n\n2. What tokens are included in this mapping?\n - The mapping includes WETH, WBTC, LINK, USDC, USDT, and YFI.\n\n3. What is the significance of the `to` address being set to `0x0000000000000000000000000000000000000001` for each token pair?\n - This address is the Chainlink aggregator address, which is used to retrieve the price data for the specified token pair.","metadata":{"source":".autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/arbitrum.md"}}],["672",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/avalanche.ts)\n\nThe code defines a constant object called `AVALANCHE_CHAINLINK_MAPPING` that maps various cryptocurrency pairs to their corresponding Chainlink oracle contract addresses and other relevant information. The pairs include AAVE/USD, AVAX/USD, WBTC/USD, DAI/USD, ETH/USD, LINK/USD, USDC/USD, and USDT/USD. \n\nEach pair is represented as a key-value pair in the object, where the key is the oracle contract address and the value is an object containing the following properties:\n- `from`: the address of the token contract used as the \"from\" currency in the pair\n- `to`: the address of the token contract used as the \"to\" currency in the pair\n- `decimals`: the number of decimal places used by the oracle contract to represent the price of the pair\n- `fromDecimals`: the number of decimal places used by the \"from\" token contract\n- `toDecimals`: the number of decimal places used by the \"to\" token contract\n\nThis code is likely used in the larger project to facilitate the retrieval of price data for the specified cryptocurrency pairs from the Chainlink oracle network. For example, a function in the project may use this mapping to determine which oracle contract to query for the price of a particular pair, and then use the `decimals`, `fromDecimals`, and `toDecimals` properties to properly format the retrieved price data. \n\nAn example usage of this code in a larger project could be a function that takes a cryptocurrency pair as input and returns the current price of that pair. The function could use the `AVALANCHE_CHAINLINK_MAPPING` object to determine which oracle contract to query, and then use the `decimals`, `fromDecimals`, and `toDecimals` properties to format the retrieved price data before returning it.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a mapping of various cryptocurrency pairs to their corresponding Chainlink oracle addresses on the Avalanche network.\n\n2. What is the format of each entry in the mapping?\n Each entry is a key-value pair where the key is the oracle address and the value is an object containing information about the cryptocurrency pair, including the source and destination tokens, their respective decimal places, and the oracle's decimal place.\n\n3. What is the significance of the `to` address being set to `0x0000000000000000000000000000000000000001`?\n This address is a placeholder value that indicates the destination token is the native token of the network (in this case, Avalanche's AVAX token).","metadata":{"source":".autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/avalanche.md"}}],["673",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/heco.ts)\n\nThe code defines a constant object called `HECO_CHAINLINK_MAPPING` that maps certain Ethereum addresses to specific token information. Each key in the object is an Ethereum address, and each value is an object that contains information about the token associated with that address. The information includes the Ethereum address of the contract that the token is from (`from`), the Ethereum address of the contract that the token is being converted to (`to`), the number of decimal places for the token (`decimals`), the number of decimal places for the `from` token (`fromDecimals`), and the number of decimal places for the `to` token (`toDecimals`).\n\nThis code is likely used in a larger project that involves converting tokens from one type to another. The `from` and `to` addresses indicate the contracts that are involved in the conversion, and the decimal information is necessary for correctly calculating the conversion rate. This mapping could be used in a variety of contexts, such as a decentralized exchange or a token swap platform.\n\nExample usage:\n\n```\nimport HECO_CHAINLINK_MAPPING from './path/to/HECO_CHAINLINK_MAPPING.js'\n\nconst tokenAddress = '0x8a054991B803F6a6958Ba9695Cc8D366C8a30a69'\nconst tokenInfo = HECO_CHAINLINK_MAPPING[tokenAddress]\nconsole.log(tokenInfo.decimals) // outputs 8\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a mapping of addresses to objects containing various properties such as `from`, `to`, `decimals`, `fromDecimals`, and `toDecimals`.\n\n2. What is the significance of the addresses used in this code?\n- The addresses are likely related to the HECO blockchain and Chainlink, but without more context it is unclear what specific purpose they serve.\n\n3. What is the expected output or usage of this code?\n- It is unclear from this code alone what the expected output or usage is, but it is likely that this mapping will be used in other parts of the `zoo` project.","metadata":{"source":".autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/heco.md"}}],["674",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/kovan.ts)\n\nThe code defines a constant object called `KOVAN_CHAINLINK_MAPPING` that maps various Ethereum contract addresses to their respective Chainlink oracle addresses. Chainlink is a decentralized oracle network that provides off-chain data to smart contracts on the blockchain. \n\nThe object contains key-value pairs where the keys are Ethereum contract addresses and the values are objects containing the following properties:\n- `from`: the address of the contract that is requesting data from the Chainlink oracle\n- `to`: the address of the Chainlink oracle contract that provides the requested data\n- `decimals`: the number of decimal places used by the contract's token\n- `fromDecimals`: the number of decimal places used by the contract's token when requesting data from the oracle\n- `toDecimals`: the number of decimal places used by the oracle when providing data to the contract\n\nThis mapping is useful for developers who are building smart contracts on the Ethereum blockchain and need to retrieve data from external sources using Chainlink. By using this mapping, developers can easily look up the Chainlink oracle address for a given contract and configure their smart contract to request data from the correct oracle with the correct decimal precision.\n\nFor example, if a developer is building a smart contract that needs to retrieve the price of ETH in USD from an external source using Chainlink, they can use the `KOVAN_CHAINLINK_MAPPING` object to find the correct oracle address and decimal precision to use in their contract. \n\n```\nimport KOVAN_CHAINLINK_MAPPING from 'zoo'\n\nconst ethUsdOracleAddress = KOVAN_CHAINLINK_MAPPING['0x22B58f1EbEDfCA50feF632bD73368b2FdA96D541'].to\nconst ethUsdDecimals = KOVAN_CHAINLINK_MAPPING['0x22B58f1EbEDfCA50feF632bD73368b2FdA96D541'].toDecimals\n\n// Use ethUsdOracleAddress and ethUsdDecimals in smart contract code to request ETH/USD price data from Chainlink\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a mapping of addresses to objects that contain information about token conversions on the Kovan Chainlink network.\n\n2. What is the significance of the 'from', 'to', 'decimals', 'fromDecimals', and 'toDecimals' properties in each object?\n- The 'from' and 'to' properties represent the addresses of the tokens being converted, while the 'decimals', 'fromDecimals', and 'toDecimals' properties represent the number of decimal places used by each token.\n\n3. How might this code be used in a larger project?\n- This code could be imported into other files in the project to provide a convenient way to access information about token conversions on the Kovan Chainlink network.","metadata":{"source":".autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/kovan.md"}}],["675",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/rpc.ts)\n\nThis code defines an object called `rpc` that maps different Ethereum chain IDs to their corresponding RPC (Remote Procedure Call) endpoints. The purpose of this code is to provide a centralized location for storing and accessing these endpoints, which can be used by other parts of the project to interact with the Ethereum network.\n\nThe `rpc` object is defined using ES6 object literal syntax, with each chain ID as a key and its corresponding RPC endpoint as the value. The endpoints are URLs that point to Ethereum nodes that can process requests for that particular chain. For example, the `MAINNET` chain ID maps to the `https://speedy-nodes-nyc.moralis.io/758308e03c71d6246942fad2/eth/ropsten` endpoint, which is a Moralis node that runs on the Ethereum mainnet.\n\nBy exporting this `rpc` object, other parts of the project can import it and use it to interact with the Ethereum network. For example, a smart contract deployment script might use this object to specify which chain to deploy the contract on and which endpoint to use for that chain. Here's an example of how this object might be used:\n\n```\nimport rpc from 'zoo/rpc'\n\nconst chainId = 'MAINNET'\nconst endpoint = rpc[chainId]\n\n// Use the endpoint to interact with the Ethereum network\n```\n\nIn this example, the `rpc` object is imported from the `zoo/rpc` module. The `chainId` variable is set to `'MAINNET'`, which is one of the keys in the `rpc` object. The `endpoint` variable is then set to the value of `rpc[chainId]`, which is the URL for the Ethereum mainnet endpoint. This endpoint can then be used to interact with the Ethereum network, such as by sending transactions or querying contract data.\n\nOverall, this code provides a simple and flexible way to manage Ethereum RPC endpoints for different chains in a centralized location, which can be used by other parts of the project to interact with the Ethereum network.\n## Questions: \n 1. What is the purpose of this code?\n- This code exports an object containing RPC URLs for various blockchain networks based on their ChainId.\n\n2. What is the `ChainId` import coming from?\n- The `ChainId` import is coming from the `@zoolabs/zdk` library.\n\n3. Why are some of the RPC URLs commented out?\n- Some of the RPC URLs are commented out because they are for networks that are not currently being used or tested in the project.","metadata":{"source":".autodoc/docs/markdown/core/src/config/rpc.md"}}],["676",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/token-lists.ts)\n\nThis code defines a set of URLs that point to token lists used in the larger project. These token lists are used to import and search for tokens across various decentralized exchanges. The `UNSUPPORTED_LIST_URLS` constant is an array of URLs that point to lists of tokens that are not supported by the project. The `DEFAULT_LIST_OF_LISTS` constant is an array of URLs that point to token lists that are searched across by default. The order of the URLs in this array determines the priority of the token import. The `DEFAULT_ACTIVE_LIST_URLS` constant is an array of URLs that point to token lists that are actively searched across. \n\nFor example, if a user wants to import a token into the project, the project will search across the token lists in `DEFAULT_ACTIVE_LIST_URLS` to see if the token is supported. If the token is not found, the project will search across the token lists in `DEFAULT_LIST_OF_LISTS` in order of priority until the token is found or all lists have been searched. If the token is still not found, the project will search across the token lists in `UNSUPPORTED_LIST_URLS` to see if the token is unsupported. \n\nThis code is important because it allows the project to import and search for tokens across multiple decentralized exchanges. By defining a set of token lists, the project can ensure that it is searching across all relevant exchanges and can prioritize the import of tokens based on the order of the lists. \n\nExample usage:\n\n```\nimport { DEFAULT_ACTIVE_LIST_URLS, DEFAULT_LIST_OF_LISTS } from 'zoo'\n\n// search for a token across the default active lists\nconst token = 'ETH'\nconst activeLists = DEFAULT_ACTIVE_LIST_URLS\nfor (const list of activeLists) {\n const tokens = await fetch(list).then((res) => res.json())\n if (tokens.includes(token)) {\n console.log(`${token} found in ${list}`)\n break\n }\n}\n\n// search for a token across the default lists of lists\nconst listsOfLists = DEFAULT_LIST_OF_LISTS\nfor (const list of listsOfLists) {\n const tokens = await fetch(list).then((res) => res.json())\n if (tokens.includes(token)) {\n console.log(`${token} found in ${list}`)\n break\n }\n}\n```\n## Questions: \n 1. What is the purpose of the `UNSUPPORTED_LIST_URLS` array?\n- The `UNSUPPORTED_LIST_URLS` array is used to mark unsupported tokens and contains a single URL to a list of unsupported tokens from the Blockchain Association.\n\n2. What is the difference between `DEFAULT_LIST_OF_LISTS` and `DEFAULT_ACTIVE_LIST_URLS`?\n- `DEFAULT_LIST_OF_LISTS` is an array of token list URLs that are searched across in order of priority, while `DEFAULT_ACTIVE_LIST_URLS` is an array of token list URLs that are considered 'active' and always searched across.\n\n3. What is the significance of the `OPTIMISM_LIST` constant?\n- The `OPTIMISM_LIST` constant is a URL to a token list that is included in the `DEFAULT_LIST_OF_LISTS` array and is searched across for token imports.","metadata":{"source":".autodoc/docs/markdown/core/src/config/token-lists.md"}}],["677",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/types.ts)\n\nThe code above defines an interface called `Config` that specifies the properties of a connector configuration object. This object is used to configure a web3 connector that allows a user to interact with a blockchain network. The `Config` interface has five properties:\n\n1. `title`: a string that represents the name of the connector.\n2. `icon`: a React functional component that renders an SVG icon for the connector.\n3. `connectorId`: a string that represents the unique identifier of the connector.\n4. `connector`: an instance of the `AbstractConnector` class that represents the actual connector implementation.\n5. `color`: a string that represents the color associated with the connector.\n\nThe `AbstractConnector` class is imported from the `@web3-react/abstract-connector` package, which provides an abstract base class for implementing web3 connectors. The `FC` type is imported from the `react` package and is used to define the `icon` property of the `Config` interface.\n\nThe `SvgProps` type is imported from a file located in the `../components` directory and is used as a prop type for the `icon` property of the `Config` interface. The `ConnectorNames` type is imported from a file located in the `../constants/types` directory and is used as the type for the `connectorId` property of the `Config` interface.\n\nOverall, this code defines a configuration object that is used to configure a web3 connector for interacting with a blockchain network. The `Config` interface specifies the properties of this object, including the name, icon, unique identifier, implementation, and color of the connector. This configuration object is likely used in other parts of the `zoo` project to instantiate and configure web3 connectors for interacting with different blockchain networks. \n\nExample usage:\n\n```typescript\nimport { Config } from \"./config\";\n\nconst myConfig: Config = {\n title: \"My Connector\",\n icon: MyIconComponent,\n connectorId: \"my-connector\",\n connector: new MyConnector(),\n color: \"#123456\"\n};\n```\n## Questions: \n 1. What is the purpose of this code file within the `zoo` project?\n- This code file defines an interface called `Config` and imports various dependencies for the `zoo` project.\n\n2. What is the `AbstractConnector` and `ConnectorNames` being used for?\n- The `AbstractConnector` and `ConnectorNames` are being used as types for the `connector` and `connectorId` properties in the `Config` interface.\n\n3. What is the `icon` property in the `Config` interface?\n- The `icon` property is a React functional component that takes in `SvgProps` as its props and is used to display an icon associated with the connector in the `zoo` project.","metadata":{"source":".autodoc/docs/markdown/core/src/config/types.md"}}],["678",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/wallets.ts)\n\nThis code defines a set of connectors for various wallets that can be used to interact with the Zoo project. The code imports the `AbstractConnector` class from the `@web3-react/abstract-connector` library, which is used as a base class for the wallet connectors. It also imports the `ChainId` enum from the `@zoolabs/zdk` library, which is used to specify the chain ID for the RPC URLs.\n\nThe code defines several wallet connectors, including `injected`, `metaMask`, `walletConnect`, `coinbaseWallet`, and `Binance`. Each connector is defined as an instance of a connector class, such as `InjectedConnector` or a custom connector class. The `supportedChainIds` variable is defined as an array of chain IDs that are supported by the Zoo project.\n\nThe `SUPPORTED_WALLETS` object defines a set of wallet connectors that are supported by the Zoo project. Each wallet connector is defined as an object with properties such as `connector`, `name`, `iconName`, `description`, `href`, `color`, `primary`, `mobile`, and `mobileOnly`. The `connector` property is a reference to the connector instance for the wallet. The `name` property is the name of the wallet. The `iconName` property is the name of the icon file for the wallet. The `description` property is a brief description of the wallet. The `href` property is a URL for the wallet. The `color` property is a hex code for the color of the wallet. The `primary` property is a boolean that indicates whether the wallet is the primary wallet. The `mobile` property is a boolean that indicates whether the wallet is available on mobile devices. The `mobileOnly` property is a boolean that indicates whether the wallet is only available on mobile devices.\n\nThis code can be used in the larger Zoo project to provide users with a set of wallet connectors that they can use to interact with the project. For example, the `SUPPORTED_WALLETS` object can be used to display a list of supported wallets on a web page or in a mobile app. The `connector` property of each wallet object can be used to connect to the wallet and interact with the Zoo project. For example, the `metaMask` connector can be used to connect to the MetaMask wallet and interact with the Zoo project using the MetaMask browser extension. Similarly, the `walletConnect` connector can be used to connect to the WalletConnect app and interact with the Zoo project on a mobile device.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines various web3 connectors for different wallets and networks.\n\n2. What is the difference between `metaMask` and `walletConnect` connectors?\n- `metaMask` is a connector for the MetaMask browser extension, while `walletConnect` is a connector for various mobile wallets such as Trust Wallet and Rainbow Wallet.\n\n3. Why are some parts of the code commented out?\n- It is possible that these parts of the code were previously used but are no longer needed, or they may be under development and not yet ready for use.","metadata":{"source":".autodoc/docs/markdown/core/src/config/wallets.md"}}],["679",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/coinbaseWallet.ts)\n\nThis code imports the `CoinbaseWallet` class from the `@web3-react/coinbase-wallet` package and the `initializeConnector` function from the `@web3-react/core` package. It also imports the `URLS` object from the `config/chains` file.\n\nThe purpose of this code is to initialize a connector for the Coinbase Wallet, which is a cryptocurrency wallet that can be used to interact with the Ethereum blockchain. The `initializeConnector` function takes a generic type parameter of `CoinbaseWallet`, which is passed as an argument to the function. The function returns an array containing an instance of the `CoinbaseWallet` class and a set of hooks that can be used to interact with the wallet.\n\nThe `CoinbaseWallet` class takes two arguments: `actions` and an object containing the `url` and `appName` properties. The `actions` argument is an object that contains methods for interacting with the Ethereum blockchain, such as `getChainId` and `getAccount`. The `url` property is set to the first URL in the `URLS` array, which is an array of arrays containing URLs for different Ethereum networks. The `appName` property is set to `'web3-react'`.\n\nThis code can be used in the larger project to enable users to connect their Coinbase Wallet to the Ethereum blockchain and interact with smart contracts. For example, the `coinbaseWallet` instance can be passed to the `useWeb3React` hook from the `@web3-react/core` package to provide access to the user's Ethereum account and enable them to sign transactions. \n\nExample usage:\n\n```\nimport { useWeb3React } from '@web3-react/core'\nimport { coinbaseWallet } from 'zoo'\n\nfunction MyComponent() {\n const { account, library } = useWeb3React()\n \n async function signTransaction() {\n const signer = library.getSigner(account)\n const tx = await signer.sendTransaction({ to: '0x...', value: 100 })\n console.log(tx.hash)\n }\n \n return (\n \n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n This code initializes a connector for the Coinbase Wallet using the `@web3-react` library and sets the URL and app name for the wallet.\n\n2. What is the significance of the `URLS` variable from the `config/chains` module?\n The `URLS` variable likely contains an array of URLs for different blockchain networks, and this code is using the URL at index 1, position 0 for the Coinbase Wallet connection.\n\n3. What other connectors can be initialized using the `initializeConnector` function?\n The `initializeConnector` function can be used to initialize connectors for other wallets or blockchain providers, as long as they are compatible with the `@web3-react` library.","metadata":{"source":".autodoc/docs/markdown/core/src/connectors/coinbaseWallet.md"}}],["680",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/eip1193.ts)\n\nThis code is a part of a larger project called \"zoo\" and it imports several packages from the ethers.js and web3-react libraries. The purpose of this code is to initialize a connector for the EIP-1193 standard, which is an interface for interacting with Ethereum smart contracts. \n\nThe code first creates an instance of the `Eip1193Bridge` class from the `@ethersproject/experimental` package and a `JsonRpcProvider` instance from the `@ethersproject/providers` package. It then creates a new class called `Eip1193BridgeWithoutAccounts` that extends the `Eip1193Bridge` class and overrides the `request` method. This method checks if the requested method is either \"eth_requestAccounts\" or \"eth_accounts\" and returns an empty array if it is. Otherwise, it calls the `request` method of the parent class.\n\nNext, the code creates an instance of the `Eip1193BridgeWithoutAccounts` class using the `JsonRpcProvider` instance and gets a signer from it. Finally, it calls the `initializeConnector` function from the `@web3-react/core` package to create a connector for the EIP-1193 standard. This function takes a callback function that creates a new instance of the `EIP1193` class from the `@web3-react/eip1193` package and passes it the `actions` and `eip1193Provider` parameters. It also takes an array of chain IDs, which in this case is `[1]` for the Ethereum mainnet.\n\nThe resulting connector is an array that contains two elements: the `eip1193` object and the `hooks` object. The `eip1193` object is an instance of the `EIP1193` class that can be used to interact with Ethereum smart contracts using the EIP-1193 standard. The `hooks` object contains several hooks that can be used to access the `eip1193` object and its properties in a React component.\n\nHere is an example of how this code might be used in a larger project:\n\n```javascript\nimport { useWeb3React } from \"@web3-react/core\";\n\nfunction MyComponent() {\n const { active, error, account, library } = useWeb3React();\n\n async function getBalance() {\n const balance = await library.getBalance(account);\n console.log(`Balance: ${balance.toString()}`);\n }\n\n return (\n \n {active ? (\n \n ) : (\n
\n );\n}\n```\n\nIn this example, the `useWeb3React` hook from the `@web3-react/core` package is used to access the `eip1193` object and its properties in a React component. The `getBalance` function uses the `library` property to call the `getBalance` method of the Ethereum provider and logs the result to the console. The `active` and `error` properties are used to conditionally render a button or an error message based on whether the user is connected to a wallet or not.\n## Questions: \n 1. What libraries are being imported in this code?\n- The code is importing `Eip1193Bridge` from `@ethersproject/experimental`, `JsonRpcProvider` from `@ethersproject/providers`, `initializeConnector` from `@web3-react/core`, and `EIP1193` from `@web3-react/eip1193`.\n\n2. What is the purpose of the `Eip1193BridgeWithoutAccounts` class?\n- The `Eip1193BridgeWithoutAccounts` class extends the `Eip1193Bridge` class and overrides the `request` method to return an empty array if the method is either \"eth_requestAccounts\" or \"eth_accounts\". This is likely done to prevent the user from accessing account information.\n\n3. What is the purpose of the `initializeConnector` function and what does it return?\n- The `initializeConnector` function takes a callback function that creates a new instance of `EIP1193` and an array of chain IDs. It returns an array with two elements: the `eip1193` object and a `hooks` object that contains various hooks for interacting with the `eip1193` object.","metadata":{"source":".autodoc/docs/markdown/core/src/connectors/eip1193.md"}}],["681",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/empty.ts)\n\nThe code above is a module that initializes a connector for the Web3 React library. The purpose of this code is to provide a way to connect to a Web3 provider, which is necessary for interacting with the Ethereum blockchain. \n\nThe `initializeConnector` function is imported from the `@web3-react/core` library, which is a core component of the Web3 React library. This function takes a generic type parameter, which in this case is `Empty`. The `Empty` type is imported from the `@web3-react/empty` library, which is a package that provides an empty connector implementation. \n\nThe `empty` constant is then exported, which is an instance of the `Empty` connector. This connector is used when there is no Web3 provider available, which can happen if the user is not logged into a wallet or if the wallet does not support Web3. \n\nThe `hooks` constant is also exported, which is an object that contains various hooks that can be used to interact with the Web3 provider. These hooks include `useWeb3React`, which is a hook that provides access to the current Web3 provider and account, and `useEagerConnect`, which is a hook that attempts to connect to the Web3 provider as soon as possible. \n\nOverall, this module provides a way to initialize a connector for the Web3 React library, which is necessary for interacting with the Ethereum blockchain. The `empty` connector is used when there is no Web3 provider available, and the `hooks` object provides various hooks that can be used to interact with the Web3 provider. \n\nExample usage:\n\n```javascript\nimport { empty, hooks } from 'zoo'\n\n// Use the empty connector if there is no Web3 provider available\nconst connector = hooks.useWeb3React() || empty\n\n// Use the connector to interact with the Ethereum blockchain\nconst provider = connector.getProvider()\nconst signer = connector.getSigner()\n```\n## Questions: \n 1. What is the purpose of the `initializeConnector` function and how does it work?\n- The `initializeConnector` function is used to initialize a connector for the Web3 React library. It takes a generic type parameter and a callback function that returns an instance of the generic type.\n\n2. What is the `Empty` type and how is it used in this code?\n- The `Empty` type is a type definition from the `@web3-react/empty` package. It is used as the generic type parameter for the `initializeConnector` function to specify the type of connector being initialized.\n\n3. What is the significance of the `empty` and `hooks` variables being exported from this module?\n- The `empty` variable is the instance of the `Empty` type returned by the `initializeConnector` function. The `hooks` variable contains the Web3 React hooks that can be used to interact with the initialized connector. Exporting these variables allows other modules to use them in their own code.","metadata":{"source":".autodoc/docs/markdown/core/src/connectors/empty.md"}}],["682",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/index.ts)\n\nThis code defines several Web3 connectors for different blockchain networks. These connectors allow users to interact with the blockchain using their wallets. The connectors are defined using different libraries such as `@binance-chain/bsc-connector`, `@web3-react/injected-connector`, `@web3-react/portis-connector`, `@web3-react/torus-connector`, `@web3-react/walletconnect-connector`, and `@web3-react/walletlink-connector`. \n\nThe RPC object contains the URLs for different blockchain networks. The supportedChainIds array contains the chain IDs for different blockchain networks. The connectors are defined for different blockchain networks such as Ethereum mainnet, Binance Smart Chain, Avalanche, and others. \n\nThe `injected` connector is used to connect to the user's wallet using the `@web3-react/injected-connector` library. The `walletconnect` connector is used to connect to the user's wallet using the WalletConnect protocol. The `fortmatic` connector is used to connect to the user's wallet using the Fortmatic library. The `portis` connector is used to connect to the user's wallet using the Portis library. The `walletlink` connector is used to connect to the user's wallet using the WalletLink library. The `torus` connector is used to connect to the user's wallet using the Torus library. The `binance` connector is used to connect to the user's wallet using the Binance Chain library.\n\nThese connectors can be used in the larger project to allow users to interact with the blockchain using their wallets. For example, the `injected` connector can be used to connect to the user's MetaMask wallet, while the `walletconnect` connector can be used to connect to the user's Trust Wallet. The `fortmatic` connector can be used to connect to the user's Fortmatic wallet, while the `portis` connector can be used to connect to the user's Portis wallet. The `walletlink` connector can be used to connect to the user's Coinbase Wallet, while the `torus` connector can be used to connect to the user's Torus wallet. The `binance` connector can be used to connect to the user's Binance Chain wallet. \n\nExample usage of the `injected` connector:\n\n```\nimport { useWeb3React } from '@web3-react/core';\nimport { injected } from './path/to/connectors';\n\nfunction App() {\n const { activate, active } = useWeb3React();\n\n const connectWallet = () => {\n activate(injected);\n };\n\n return (\n {error ? error.message : \"Connect your wallet\"}
\n )}\n \n {active ? (\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code imports various connectors for different blockchain networks and defines RPC URLs for each network.\n\n2. What is the significance of the `supportedChainIds` array?\n- The `supportedChainIds` array lists the chain IDs that are supported by the `InjectedConnector` and other connectors.\n\n3. Why are some connectors only available for the mainnet?\n- Some connectors, such as `WalletConnectConnector`, `FortmaticConnector`, `PortisConnector`, `WalletLinkConnector`, and `TorusConnector`, are only available for the mainnet because they are designed for use with Ethereum and not other blockchain networks.","metadata":{"source":".autodoc/docs/markdown/core/src/connectors/index.md"}}],["683",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/metaMask.ts)\n\nThe code above is importing two modules from the '@web3-react' library: 'initializeConnector' and 'MetaMask'. The purpose of this code is to initialize the MetaMask connector for the Web3 React library. \n\nThe 'initializeConnector' function is used to create a connector instance for a specific Web3 provider. In this case, it is being used to create a connector for the MetaMask provider. The 'MetaMask' module is a class that provides an implementation of the Web3 provider interface for the MetaMask browser extension. \n\nThe code is using the 'initializeConnector' function to create an instance of the 'MetaMask' class and passing in a callback function that will be used to handle any actions that need to be performed by the connector. The resulting instance is then exported as 'metaMask'. \n\nThe 'hooks' variable is also being exported, which is an object containing various hooks that can be used to interact with the MetaMask connector. These hooks include 'useEagerConnect', 'useInactiveListener', and 'useMetaMask'. \n\nThis code can be used in the larger project to provide a way for users to connect to the Ethereum network using the MetaMask browser extension. For example, if the project has a feature that requires interaction with a smart contract on the Ethereum network, the MetaMask connector can be used to provide the necessary connection. \n\nHere is an example of how this code could be used in a React component:\n\n```\nimport { useWeb3React } from '@web3-react/core';\nimport { metaMask } from './zoo';\n\nfunction MyComponent() {\n const { activate, deactivate, active } = useWeb3React();\n\n const connectToMetaMask = async () => {\n await activate(metaMask);\n }\n\n const disconnectFromMetaMask = async () => {\n await deactivate();\n }\n\n return (\n Wallet connected
\n ) : (\n \n )}\n\n {active ? (\n \n ) : (\n \n )}\n
\n );\n}\n```\n\nIn this example, the 'metaMask' instance created in the 'zoo' file is being passed to the 'activate' function from the 'useWeb3React' hook to connect to the MetaMask provider. The 'deactivate' function can be used to disconnect from the provider. The 'active' variable is used to determine whether the user is currently connected to the provider.\n## Questions: \n 1. What is the purpose of the `initializeConnector` function and how does it work?\n- The `initializeConnector` function is used to initialize a connector for the Web3 React library. It takes in a generic type parameter and a callback function that creates a new instance of the connector. In this case, the generic type is `MetaMask` and the callback function creates a new instance of the `MetaMask` connector with the provided `actions`.\n\n2. What is the `MetaMask` import and how does it relate to the `@web3-react/metamask` package?\n- The `MetaMask` import is a class that represents the MetaMask connector for the Web3 React library. It is imported from the `@web3-react/metamask` package, which provides the implementation for the MetaMask connector.\n\n3. What is the purpose of the `metaMask` and `hooks` variables and how are they used?\n- The `metaMask` variable is an instance of the `MetaMask` connector that has been initialized with the provided `actions`. The `hooks` variable is an object that contains various hooks for interacting with the `metaMask` connector, such as `useEagerConnect` and `useInactiveListener`. These variables can be used to integrate the MetaMask connector into a React application.","metadata":{"source":".autodoc/docs/markdown/core/src/connectors/metaMask.md"}}],["684",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/network.ts)\n\nThe code above is responsible for initializing a connector for the Web3 React library, specifically for the Network component. The purpose of this code is to provide a way for the application to connect to different Ethereum networks, such as the mainnet or testnets, and interact with smart contracts and other decentralized applications.\n\nThe code imports the necessary modules from the Web3 React library and the configuration file for the different network URLs. It then uses the `initializeConnector` function to create a new instance of the `Network` component, passing in an object with the necessary actions and the URLS configuration. The `Object.keys(URLS).map((chainId) => Number(chainId))` code maps over the keys of the URLS object and converts them to numbers, which are then passed as an array to the `initializeConnector` function.\n\nThe resulting `network` object and `hooks` array can then be used in the larger project to interact with the Ethereum networks. For example, the `network` object can be used to get the current network ID, check if the user is connected to the network, and switch between different networks. The `hooks` array provides access to various hooks that can be used to interact with the network, such as `useBlockNumber` to get the current block number or `useEthers` to get access to the Ethereum provider.\n\nHere is an example of how this code might be used in a larger project:\n\n```javascript\nimport { network, hooks } from 'zoo'\n\n// check if user is connected to the network\nif (network.active) {\n console.log(`Connected to network ${network.chainId}`)\n}\n\n// switch to a different network\nnetwork.switchTo('ropsten')\n\n// get the current block number\nconst blockNumber = hooks.useBlockNumber()\n\n// interact with a smart contract\nconst contract = new ethers.Contract(address, abi, provider)\nconst result = await contract.someFunction()\n``` \n\nOverall, this code provides an essential component for connecting to Ethereum networks and interacting with decentralized applications in the larger project.\n## Questions: \n 1. What is the purpose of the `initializeConnector` function and how does it work?\n- The `initializeConnector` function is used to initialize a connector for a specific network. It takes in a function that creates a new instance of the network class and an array of chain IDs to support.\n\n2. What is the `Network` class and what does it do?\n- The `Network` class is a class from the `@web3-react/network` library that provides a way to connect to a specific Ethereum network. It takes in a set of actions and a URL for the network.\n\n3. What is the `URLS` object and where is it defined?\n- The `URLS` object is a configuration object that contains URLs for different Ethereum networks. It is defined in a file located at `config/chains`.","metadata":{"source":".autodoc/docs/markdown/core/src/connectors/network.md"}}],["685",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/url.ts)\n\nThe code above is a module that initializes a Web3 connector for the Zoo project. The Web3 connector is a library that allows the project to interact with the Ethereum blockchain. \n\nThe code imports two libraries: `@web3-react/core` and `@web3-react/url`. The `@web3-react/core` library provides the core functionality for the Web3 connector, while `@web3-react/url` provides a specific implementation of the connector that uses a URL to connect to the Ethereum network. \n\nThe code also imports a configuration file called `config/chains`, which contains a list of URLs for different Ethereum networks. \n\nThe `initializeConnector` function is called with two arguments: a generic type `Url` and a callback function that creates a new instance of the `Url` class. The `Url` class is provided by the `@web3-react/url` library and represents a Web3 connector that uses a URL to connect to the Ethereum network. \n\nThe callback function takes two arguments: `actions` and `URLS[1][0]`. The `actions` argument is an object that contains methods for interacting with the Ethereum network, such as sending transactions and querying balances. The `URLS[1][0]` argument is a URL string that specifies the Ethereum network to connect to. \n\nThe `initializeConnector` function returns an array with two elements: `url` and `hooks`. The `url` element is an instance of the `Url` class that was created by the callback function. The `hooks` element is an object that contains methods for interacting with the `Url` instance. \n\nThis module can be used in other parts of the Zoo project to interact with the Ethereum network. For example, the `url` instance can be passed to other Web3 libraries to send transactions or query balances. The `hooks` object can be used to access the methods provided by the `Url` class, such as `useEphemeralKey` and `useAccount`. \n\nHere is an example of how this module might be used in another part of the Zoo project:\n\n```\nimport { url } from 'zoo/web3'\n\nconst balance = await url.getBalance('0x1234567890123456789012345678901234567890')\nconsole.log(`Balance: ${balance}`)\n```\n\nIn this example, the `url` instance is imported from the `zoo/web3` module and used to query the balance of an Ethereum address. The `getBalance` method is provided by the `Url` class and returns the balance of the specified address. The balance is then logged to the console.\n## Questions: \n 1. What is the purpose of the `initializeConnector` function and how does it work?\n- The `initializeConnector` function is used to initialize a connector for a specific blockchain network. It takes in a generic type parameter and a callback function that creates a new instance of the connector. The resulting array contains the connector instance and a set of hooks for interacting with it.\n\n2. What is the `Url` class and where does it come from?\n- The `Url` class is a connector implementation for connecting to a blockchain network via a URL. It is imported from the `@web3-react/url` package.\n\n3. What is the `URLS` constant and how is it used in this code?\n- The `URLS` constant is a configuration object that contains URLs for various blockchain networks. It is imported from the `config/chains` module and used to provide the URL for the `Url` connector instance created in the callback function passed to `initializeConnector`. In this case, the URL for the second network in the `URLS` array is used.","metadata":{"source":".autodoc/docs/markdown/core/src/connectors/url.md"}}],["686",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/walletConnect.ts)\n\nThe code above is a module that initializes a connector for the WalletConnect wallet using the Web3 React library. The purpose of this code is to provide a way for users to connect their WalletConnect wallet to the zoo project and interact with the Ethereum blockchain.\n\nThe code imports the `initializeConnector` function from the `@web3-react/core` library and the `WalletConnect` class from the `@web3-react/walletconnect` library. It also imports the `URLS` object from the `config/chains` file.\n\nThe `initializeConnector` function takes two arguments: a function that creates a new instance of the `WalletConnect` class and an array of chain IDs. The function that creates a new instance of the `WalletConnect` class takes an `actions` object and an object with an `rpc` property set to the `URLS` object imported earlier. The `actions` object is used to interact with the Web3 React library and the `rpc` property is used to specify the Ethereum RPC endpoint to use.\n\nThe `Object.keys(URLS).map((chainId) => Number(chainId))` expression creates an array of chain IDs by converting the keys of the `URLS` object to numbers.\n\nThe `initializeConnector` function returns an array with two elements: the `WalletConnect` instance and an object with hooks that can be used to interact with the `WalletConnect` instance.\n\nThis code can be used in the larger zoo project to provide users with a way to connect their WalletConnect wallet to the project and interact with the Ethereum blockchain. For example, the `walletConnect` instance can be used to send transactions or read data from the blockchain. The hooks can be used to subscribe to events or get the current state of the `WalletConnect` instance.\n\nExample usage:\n\n```\nimport { walletConnect, hooks } from 'zoo'\n\n// Connect to the WalletConnect wallet\nwalletConnect.connect()\n\n// Subscribe to the \"accountsChanged\" event\nhooks.useWalletConnectAccounts((accounts) => {\n console.log('Accounts changed:', accounts)\n})\n\n// Send a transaction\nconst txHash = await walletConnect.sendTransaction({\n to: '0x123...',\n value: '1000000000000000000',\n})\nconsole.log('Transaction sent:', txHash)\n```\n## Questions: \n 1. What is the purpose of the `initializeConnector` function and how is it used in this code?\n - The `initializeConnector` function is used to create a new instance of the `WalletConnect` class and initialize it with the specified `rpc` URLS. It returns an array containing the `walletConnect` instance and `hooks` object for interacting with the `WalletConnect` instance.\n\n2. What is the `WalletConnect` class and what does it do?\n - The `WalletConnect` class is a class provided by the `@web3-react/walletconnect` package that allows for connecting to a wallet using the WalletConnect protocol. It provides methods for connecting, disconnecting, and interacting with the connected wallet.\n\n3. What is the `URLS` constant and how is it used in this code?\n - The `URLS` constant is an object containing URLs for different blockchain networks. It is used to specify the `rpc` URL when initializing the `WalletConnect` instance. The `Object.keys(URLS).map((chainId) => Number(chainId))` expression is used to extract the chain IDs from the `URLS` object and convert them to numbers, which are then passed to the `initializeConnector` function.","metadata":{"source":".autodoc/docs/markdown/core/src/connectors/walletConnect.md"}}],["687",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/argent-wallet-detector.ts)\n\nThis code exports two constants related to the Argent Wallet Detector. The first constant, `ARGENT_WALLET_DETECTOR_ABI`, imports the ABI (Application Binary Interface) from a JSON file located in the same directory. The ABI is a standardized way of defining the interface for a smart contract on the Ethereum blockchain. In this case, the ABI is for the Argent Wallet Detector contract.\n\nThe second constant, `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS`, is a string that represents the Ethereum address of the Argent Wallet Detector contract on the Ethereum mainnet. This address is used to interact with the contract and call its functions.\n\nThis code is likely used in other parts of the larger project to interact with the Argent Wallet Detector contract. For example, if the project has a feature that requires detecting whether a given Ethereum address is an Argent wallet, it could use the `ARGENT_WALLET_DETECTOR_ABI` to call the `isWallet(address)` function on the contract at the `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS`. \n\nHere is an example of how this code could be used in a larger project:\n\n```\nimport { ARGENT_WALLET_DETECTOR_ABI, ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS } from './zoo/argent-wallet-detector'\n\nconst web3 = new Web3(provider)\n\nconst argentWalletDetectorContract = new web3.eth.Contract(ARGENT_WALLET_DETECTOR_ABI, ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS)\n\nconst isArgentWallet = async (address) => {\n const result = await argentWalletDetectorContract.methods.isWallet(address).call()\n return result\n}\n\nconst address = '0x123abc...'\nconst isWallet = await isArgentWallet(address)\nconsole.log(`Is ${address} an Argent wallet? ${isWallet}`)\n```\n\nIn this example, the code imports the `ARGENT_WALLET_DETECTOR_ABI` and `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS` constants from the `zoo/argent-wallet-detector` module. It then creates a new instance of the `web3.eth.Contract` class using the ABI and mainnet address. Finally, it defines an `isArgentWallet` function that calls the `isWallet` function on the contract and returns the result. The function is then called with a sample Ethereum address and the result is logged to the console.\n## Questions: \n 1. What is the purpose of the `ARGENT_WALLET_DETECTOR_ABI` import?\n - The `ARGENT_WALLET_DETECTOR_ABI` import is likely used to access the ABI (Application Binary Interface) for the Argent Wallet Detector contract, which defines how to interact with the contract's functions and data.\n\n2. What is the significance of the `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS` constant?\n - The `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS` constant likely represents the Ethereum mainnet address of the Argent Wallet Detector contract, which is used to interact with the contract on the Ethereum blockchain.\n\n3. How are the exported constants used in the `zoo` project?\n - It is unclear from this code snippet how the exported constants are used in the `zoo` project, but they may be used to interact with the Argent Wallet Detector contract in some way. Further context would be needed to determine their exact usage.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/argent-wallet-detector.md"}}],["688",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/argent-wallet.json)\n\nThis code defines two functions, `wc_multiCall` and `isValidSignature`, which are likely part of a larger project involving smart contracts on the Ethereum blockchain. \n\nThe `wc_multiCall` function takes in an array of transaction tuples, each containing an address, a uint256 value, and a bytes data field. The function then executes all of these transactions in a single function call, returning an array of bytes containing the results of each transaction. This is a useful optimization for cases where multiple transactions need to be executed in a single block, as it reduces the number of individual function calls and can save on gas costs. \n\nHere is an example of how `wc_multiCall` might be used in a larger project:\n\n```\n// create an array of transaction tuples\nlet transactions = [\n {\n to: \"0x123abc...\",\n value: 100,\n data: \"0xabcdef...\"\n },\n {\n to: \"0x456def...\",\n value: 50,\n data: \"0x789ghi...\"\n }\n]\n\n// call wc_multiCall with the transactions array\nlet results = await contract.wc_multiCall(transactions);\n\n// process the results of each transaction\nfor (let i = 0; i < results.length; i++) {\n console.log(\"Transaction \" + i + \" result: \" + results[i]);\n}\n```\n\nThe `isValidSignature` function takes in a message hash and a signature, and returns a bytes4 value indicating whether the signature is valid for the given message. This is likely used for authentication purposes, to ensure that only authorized parties can execute certain functions within the smart contract. \n\nHere is an example of how `isValidSignature` might be used in a larger project:\n\n```\n// create a message hash and a signature\nlet messageHash = web3.utils.sha3(\"Hello, world!\");\nlet signature = \"0x123456...\";\n\n// call isValidSignature with the message hash and signature\nlet isValid = await contract.isValidSignature(messageHash, signature);\n\n// check the result of the signature validation\nif (isValid == \"0x1626ba7e\") {\n console.log(\"Signature is valid!\");\n} else {\n console.log(\"Signature is invalid.\");\n}\n```\n\nOverall, these functions provide useful functionality for interacting with smart contracts on the Ethereum blockchain, and can be used to optimize transaction execution and ensure secure authentication.\n## Questions: \n 1. What is the purpose of the `wc_multiCall` function?\n - The `wc_multiCall` function takes in an array of transactions and executes them in a batch, returning an array of the results.\n\n2. What is the purpose of the `isValidSignature` function?\n - The `isValidSignature` function takes in a message hash and a signature and returns a bytes4 value indicating whether the signature is valid for the given message.\n\n3. What is the expected input and output format for these functions?\n - Both functions take in specific input parameters and return specific output types as defined in the function definitions. The `wc_multiCall` function takes in an array of tuples containing an address, uint256 value, and bytes data, and returns an array of bytes arrays. The `isValidSignature` function takes in a bytes32 message hash and a bytes signature, and returns a bytes4 value.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/argent-wallet.md"}}],["689",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/bar.json)\n\nThe code provided is a Solidity smart contract that defines the interface for an ERC20 token. ERC20 is a standard interface for tokens on the Ethereum blockchain, and this contract defines the functions and events that are required to be implemented for a token to be considered ERC20 compliant.\n\nThe contract includes a constructor that takes an address of another ERC20 token called Sushi. The contract also includes functions for getting the name, symbol, and decimals of the token, as well as the total supply and the balance of a particular address. Additionally, there are functions for approving an address to spend a certain amount of tokens on behalf of the caller, transferring tokens from one address to another, and checking the amount of tokens that an address is allowed to spend on behalf of another address.\n\nThe contract also includes two functions called `enter` and `leave`. These functions are not part of the ERC20 standard, but are specific to the project that this contract is a part of. It is unclear what these functions do without additional context about the project.\n\nOverall, this contract provides the basic functionality required for an ERC20 token, and can be used as a starting point for creating a new token. Developers can inherit from this contract and implement their own logic for the `enter` and `leave` functions to create a custom token for their project. Here is an example of how this contract can be inherited:\n\n```\ncontract MyToken is ERC20Token {\n constructor(address _sushi) ERC20Token(_sushi) {\n // additional constructor logic for MyToken\n }\n\n // additional functions and logic for MyToken\n}\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code defines a contract for a token called \"sushi\" and includes functions for transferring tokens, checking balances, and managing allowances.\n\n2. What is the significance of the \"constructor\" function?\n- The constructor function is called when the contract is first deployed and initializes the contract with the address of the \"sushi\" token.\n\n3. What is the difference between the \"transfer\" and \"transferFrom\" functions?\n- The \"transfer\" function allows a user to transfer tokens from their own account to another user's account, while the \"transferFrom\" function allows a user to transfer tokens from another user's account if they have been granted permission to do so through the \"approve\" function.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/bar.md"}}],["690",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/chainlink-oracle.json)\n\nThe code provided is a Solidity smart contract that defines a set of functions for interacting with a decentralized oracle. Oracles are used in blockchain systems to provide external data to smart contracts. This particular oracle is designed to provide exchange rate data for different currency pairs.\n\nThe contract defines six functions, each with a specific purpose. The `getDataParameter` function is a pure function that takes in three parameters: `multiply`, `divide`, and `decimals`. It returns a `bytes` array that can be used as input to the `get` and `peek` functions. The purpose of this function is to generate the input data required for the other functions to retrieve exchange rate data.\n\nThe `get` function takes in a `bytes` array as input and returns a boolean value and a uint256 value. The boolean value indicates whether the data was successfully retrieved, while the uint256 value represents the exchange rate data. This function is used to retrieve the latest exchange rate data for a given currency pair.\n\nThe `peek` function is similar to the `get` function, but it does not modify the state of the contract. It takes in a `bytes` array as input and returns a boolean value and a uint256 value. The boolean value indicates whether the data is available, while the uint256 value represents the exchange rate data. This function is used to check the availability of exchange rate data without actually retrieving it.\n\nThe `peekSpot` function is a view function that takes in a `bytes` array as input and returns a uint256 value representing the exchange rate data. This function is used to retrieve the latest exchange rate data for a given currency pair without modifying the state of the contract.\n\nFinally, the `name` and `symbol` functions are view functions that return the name and symbol of the oracle, respectively. These functions are used to retrieve metadata about the oracle.\n\nOverall, this contract provides a set of functions for retrieving exchange rate data from a decentralized oracle. These functions can be used by other smart contracts in the larger project to obtain external data for various purposes. For example, a smart contract that facilitates cross-border payments may use this oracle to obtain exchange rate data for different currency pairs.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a set of functions for interacting with a smart contract related to financial data.\n\n2. What are the inputs and outputs of the \"get\" function?\n- The \"get\" function takes in a byte array called \"data\" and returns a boolean value and a uint256 value.\n\n3. What is the difference between the \"peek\" and \"peekSpot\" functions?\n- The \"peek\" function returns a boolean value and a uint256 value based on the input byte array, while the \"peekSpot\" function only returns a uint256 value and does not have a boolean output.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/chainlink-oracle.md"}}],["691",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/clone-rewarder.json)\n\nThe code provided is a Solidity smart contract that is part of the larger project called \"zoo\". The purpose of this contract is to manage rewards for users who provide liquidity to a MasterChef V2 contract. The contract emits events to log various actions such as initializing the contract, adding a new pool, setting a pool, updating a pool, and transferring ownership. \n\nThe contract has several functions that allow users to interact with it. The `init` function is used to initialize the contract with the MasterChef V2 contract address, reward token address, and master LP token address. The `setRewardPerSecond` function is used to set the reward rate per second. The `pendingToken` function is used to calculate the pending reward for a user for a specific pool. The `pendingTokens` function is used to calculate the pending rewards for a user across all pools. The `onSushiReward` function is called by the MasterChef V2 contract to distribute rewards to users who provide liquidity. \n\nThe contract also has several view functions that allow users to retrieve information about the contract state. The `poolInfo` function is used to retrieve information about a specific pool such as the accumulated reward per share and the last reward time. The `rewardPerSecond` function is used to retrieve the current reward rate per second. The `rewardRates` function is used to retrieve an array of reward rates for each pool. The `rewardToken` function is used to retrieve the reward token address. \n\nOverall, this contract plays an important role in managing rewards for users who provide liquidity to the MasterChef V2 contract. It allows users to calculate their pending rewards and provides functions for setting and retrieving reward rates and other contract state information. \n\nExample usage:\n\n```\n// Initialize the contract with the MasterChef V2 contract address, reward token address, and master LP token address\nawait zoo.init(masterChefV2Address, rewardTokenAddress, masterLPTokenAddress);\n\n// Set the reward rate per second\nawait zoo.setRewardPerSecond(100);\n\n// Retrieve the current reward rate per second\nconst rewardRate = await zoo.rewardPerSecond();\n\n// Calculate the pending reward for a user for a specific pool\nconst pendingReward = await zoo.pendingToken(poolId, userAddress);\n\n// Calculate the pending rewards for a user across all pools\nconst { rewardTokens, rewardAmounts } = await zoo.pendingTokens(poolId, userAddress);\n\n// Retrieve information about a specific pool\nconst { accToken1PerShare, lastRewardTime } = await zoo.poolInfo(poolId);\n\n// Retrieve the reward token address\nconst rewardTokenAddress = await zoo.rewardToken();\n```\n## Questions: \n 1. What is the purpose of this code and how does it relate to the overall zoo project?\n- This code is a smart contract for a reward system in the zoo project. It allows users to earn rewards by staking tokens in a pool.\n\n2. What are the inputs and outputs of the `onSushiReward` function?\n- The inputs of the `onSushiReward` function are the pool ID, user address, recipient address, token ID, and LP token amount. There are no outputs.\n\n3. What events are emitted by this contract and what information do they provide?\n- This contract emits several events including `LogInit`, `LogOnReward`, `LogPoolAddition`, `LogRewardPerSecond`, `LogSetPool`, `LogUpdatePool`, and `OwnershipTransferred`. These events provide information such as the reward token, owner address, reward per second, LP token address, user address, pool ID, amount staked, and more.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/clone-rewarder.md"}}],["692",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/complex-rewarder.json)\n\nThis code defines a set of constructors, events, and functions for a smart contract that manages a pool of rewards for a decentralized finance (DeFi) project called \"zoo\". The contract is designed to distribute rewards to users who provide liquidity to the project's pools.\n\nThe constructor takes three inputs: the address of the reward token, the amount of reward tokens to be distributed per second, and the address of the project's MasterChef V2 contract. The contract emits an event called \"LogInit\" when it is initialized.\n\nThe contract also defines several events that are emitted during various operations. These events include \"LogOnReward\", which is emitted when a user receives a reward, \"LogPoolAddition\", which is emitted when a new pool is added to the contract, and \"LogUpdatePool\", which is emitted when a pool is updated.\n\nThe contract also defines several functions that can be called by users or other contracts. These functions include \"add\", which adds a new pool to the contract, \"massUpdatePools\", which updates all pools in the contract, and \"set\", which updates the allocation points for a specific pool.\n\nOne important function is \"onSushiReward\", which is called by the MasterChef V2 contract when a user earns a reward. This function updates the user's reward debt and emits a \"LogOnReward\" event.\n\nAnother important function is \"updatePool\", which updates the reward distribution for a specific pool. This function calculates the amount of rewards that have been earned since the last update and distributes them to the pool's users.\n\nOverall, this contract is an essential component of the zoo DeFi project, as it manages the distribution of rewards to users who provide liquidity to the project's pools. Developers working on the project can use this contract to add new pools, update reward allocations, and distribute rewards to users.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n - This code defines a contract for a reward distribution system for a decentralized application. It includes functions for adding and updating reward pools, distributing rewards to users, and transferring ownership of the contract.\n2. What types of inputs and outputs are used in this code?\n - The inputs and outputs include various data types such as addresses, uint256 integers, and structs. The functions have different state mutability, with some being nonpayable and others being view-only.\n3. What events are emitted by this code and what information do they provide?\n - This code emits several events, including LogInit, LogOnReward, LogPoolAddition, LogRewardPerSecond, LogSetPool, LogUpdatePool, and OwnershipTransferred. These events provide information about the initialization of the contract, reward distribution to users, addition and modification of reward pools, and ownership transfers.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/complex-rewarder.md"}}],["693",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/compound-oracle.json)\n\nThis code defines three functions that are part of a smart contract. The smart contract is likely part of a larger project related to a decentralized finance (DeFi) application. \n\nThe first function, `get`, takes in a single parameter of type `bytes` and returns two values: a boolean and a uint256. The purpose of this function is not clear from the code alone, but it likely retrieves some data from the smart contract or blockchain. The function is marked as `nonpayable`, meaning it cannot receive any ether (the cryptocurrency used on the Ethereum blockchain) as part of its execution.\n\nThe second function, `getDataParameter`, takes in three parameters: two strings and a uint256. It returns a single value of type `bytes`. This function is marked as `pure`, meaning it does not read from or modify the state of the smart contract. Instead, it likely performs some computation on the input parameters and returns a byte array that can be used as input to another function in the smart contract.\n\nThe third function, `peek`, takes in a single parameter of type `bytes` and returns two values: a boolean and a uint256. This function is marked as `view`, meaning it does not modify the state of the smart contract. Instead, it likely reads some data from the smart contract or blockchain and returns it to the caller.\n\nOverall, these functions are likely part of a larger set of functions that make up a DeFi application. The `get` and `peek` functions likely retrieve data from the smart contract or blockchain, while the `getDataParameter` function likely performs some computation on input parameters to prepare them for use in other functions. These functions may be used by other parts of the DeFi application to perform various tasks, such as calculating interest rates or executing trades. \n\nExample usage of these functions would depend on the specific implementation of the DeFi application. However, a possible example usage of the `getDataParameter` function could be as follows:\n\n```\n// prepare input parameters\nstring memory collateralSymbol = \"ETH\";\nstring memory assetSymbol = \"DAI\";\nuint256 division = 100;\n\n// call getDataParameter function\nbytes memory data = getDataParameter(collateralSymbol, assetSymbol, division);\n\n// use returned data as input to another function\nbool success = someOtherFunction(data);\n```\n## Questions: \n 1. What is the purpose of this code and how is it used within the zoo project?\n Answer: This code defines three functions with inputs, outputs, and state mutability. It is likely used as part of the smart contract functionality within the zoo project.\n\n2. What is the difference between the state mutability of the `get` and `peek` functions?\n Answer: The `get` function is nonpayable, meaning it cannot receive Ether as part of its execution, while the `peek` function is view, meaning it does not modify the state of the contract.\n\n3. What is the purpose of the `getDataParameter` function and what are its inputs and outputs?\n Answer: The `getDataParameter` function takes in three inputs (two strings and a uint256) and returns a bytes output. Its purpose is not clear from this code alone, but it is likely used to generate data for another function or contract within the zoo project.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/compound-oracle.md"}}],["694",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/cvx-rewarder.json)\n\nThe code provided is a Solidity smart contract for a staking pool that allows users to stake a specific token and earn rewards in another token. The contract is part of a larger project called \"zoo\" and is designed to be used in a decentralized finance (DeFi) ecosystem.\n\nThe constructor function takes in several parameters, including the staking token, reward token, reward manager, and two different MasterChef contracts. The chefPid parameter is used to identify the specific pool in the MasterChef contract that this staking pool is associated with.\n\nThe contract emits several events, including RewardAdded, RewardPaid, Staked, and Withdrawn, which are used to track rewards and staking activity.\n\nThe contract includes several functions for interacting with the staking pool. The addExtraReward function allows the reward manager to add additional rewards to the pool. The balanceOf function returns the balance of the staking token for a specific user. The earned function returns the amount of rewards earned by a specific user. The getReward function allows a user to claim their rewards. The stake function allows a user to stake a specific amount of the staking token. The withdraw function allows a user to withdraw their staked tokens and claim their rewards.\n\nThe contract also includes functions for interacting with the associated MasterChef contracts. The onSushiReward function is called by the SushiSwap MasterChef contract when rewards are distributed, and it updates the user's balance in the staking pool. The pendingTokens function returns the pending rewards for a specific user in both the staking token and reward token.\n\nOverall, this contract provides a way for users to earn rewards by staking a specific token and is designed to be used in a larger DeFi ecosystem.\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code appears to be a smart contract for a staking and reward system, likely for a decentralized finance (DeFi) platform. It allows users to stake a certain token and receive rewards in another token, with the rewards being distributed based on a set rate and duration.\n\n2. What external contracts or systems does this code interact with?\n- This code interacts with several external contracts and systems, including the staking token, reward token, reward manager, SushiSwap MasterChef contract, and Convex Finance MasterChef contract. It also appears to have functions for adding and clearing extra rewards.\n\n3. What events and functions are available for developers to use in this code?\n- Developers can use several events and functions in this code, including events for when rewards are added or paid out, and functions for staking, withdrawing, and claiming rewards. There are also functions for getting information about the current rewards and reward rate, as well as interacting with the external contracts and systems mentioned above.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/cvx-rewarder.md"}}],["695",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/eip-2612.json)\n\nThis code defines two functions as part of a larger project called zoo. The first function, called \"nonces\", is a view function that takes in an address as an input and returns a uint256 value. This function is marked as constant, meaning it does not modify the state of the contract, and is therefore free to execute without requiring any gas fees. The purpose of this function is not clear from the code alone, but it likely serves as a way to retrieve a nonce value associated with a particular address.\n\nThe second function, called \"DOMAIN_SEPARATOR\", is also a view function that takes no inputs and returns a bytes32 value. Like the first function, it is marked as constant and does not modify the state of the contract. The purpose of this function is also not clear from the code alone, but it likely serves as a way to retrieve a domain separator value associated with the contract.\n\nOverall, these functions appear to be part of a larger smart contract that is used to manage some aspect of the zoo project. Without more context, it is difficult to say exactly how these functions fit into the larger picture. However, it is clear that they are designed to be read-only functions that do not modify the state of the contract, and can therefore be executed without requiring any gas fees. \n\nHere is an example of how the \"nonces\" function might be used in a larger project:\n\n```\n// Assume we have a web3 instance and a contract instance called \"zooContract\"\n\nconst ownerAddress = \"0x1234567890123456789012345678901234567890\";\n\nzooContract.methods.nonces(ownerAddress).call((err, result) => {\n if (err) {\n console.error(err);\n } else {\n console.log(`Nonce for ${ownerAddress}: ${result}`);\n }\n});\n```\n\nThis code would retrieve the nonce value associated with the given owner address by calling the \"nonces\" function on the zooContract instance. The result would be logged to the console.\n## Questions: \n 1. What is the purpose of this code and how is it used in the zoo project?\n This code defines two functions, `nonces` and `DOMAIN_SEPARATOR`, which are likely used for some kind of authentication or security feature within the zoo project.\n\n2. What is the expected input and output for the `nonces` function?\n The `nonces` function takes in a single input parameter, `owner`, which is of type `address`. It returns a single output parameter of type `uint256`.\n\n3. What is the purpose of the `DOMAIN_SEPARATOR` function and how is it used?\n The `DOMAIN_SEPARATOR` function likely generates a unique identifier for the zoo project, which can be used for various security and authentication purposes. It does not take any input parameters and returns a single output parameter of type `bytes32`.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/eip-2612.md"}}],["696",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/ens-registrar.json)\n\nThe code provided is a Solidity contract that interacts with the Ethereum Name Service (ENS). ENS is a decentralized domain name system built on the Ethereum blockchain that allows users to register human-readable domain names and associate them with Ethereum addresses, smart contracts, and other resources. \n\nThe contract contains several functions that allow users to manage ENS records, including setting and retrieving ownership, resolver, and time-to-live (TTL) information for a given ENS node. The contract also includes functions for setting and checking operator approval, which allows an operator to manage ENS records on behalf of the owner.\n\nOne important function in the contract is `setRecord`, which allows a user to set the owner, resolver, and TTL for a given ENS node. This function takes four arguments: the ENS node, the new owner address, the new resolver address, and the new TTL value. Once called, the function updates the ENS record for the specified node with the new information.\n\nAnother important function is `setSubnodeOwner`, which allows a user to set the owner of a subdomain of a given ENS node. This function takes three arguments: the ENS node, the subdomain label, and the new owner address. The function returns the new ENS node for the subdomain. \n\nOverall, this contract provides a set of tools for managing ENS records within a larger project. Developers can use this contract to build applications that interact with ENS, such as decentralized domain name registrars or decentralized content distribution networks.\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code is related to the Ethereum Name Service (ENS) and provides functions for managing ownership and resolution of domain names on the Ethereum blockchain.\n\n2. What events are emitted by this code and what information do they provide?\n- This code emits several events including ApprovalForAll, NewOwner, NewResolver, NewTTL, and Transfer. These events provide information about changes in ownership, resolution, and approval status for domain names on the Ethereum blockchain.\n\n3. What are some of the key functions provided by this code and what do they do?\n- This code provides functions for setting and getting ownership, resolution, and time-to-live (TTL) information for domain names on the Ethereum blockchain. It also provides a function for setting approval status for a given operator.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/ens-registrar.md"}}],["697",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/erc20.json)\n\nThis code defines a set of functions and events for a smart contract that implements a standard token on the Ethereum blockchain. The token is identified by a name and a symbol, and has a fixed number of decimal places. The total supply of the token is also defined. \n\nThe functions defined in this code allow users to interact with the token. The `balanceOf` function returns the balance of a given address. The `transfer` function allows a user to transfer tokens to another address. The `approve` function allows a user to grant permission to another address to spend tokens on their behalf. The `allowance` function returns the amount of tokens that an approved address is allowed to spend. The `transferFrom` function allows an approved address to spend tokens on behalf of another address. \n\nThe events defined in this code allow users to track token transfers and approvals. The `Transfer` event is emitted whenever tokens are transferred from one address to another. The `Approval` event is emitted whenever an address is approved to spend tokens on behalf of another address. \n\nThis code can be used as a starting point for creating a custom token on the Ethereum blockchain. Developers can modify the code to define the specific parameters of their token, such as the name, symbol, and total supply. They can also add additional functions and events to customize the behavior of the token. \n\nHere is an example of how the `balanceOf` function can be used in a larger project:\n\n```\nconst tokenAddress = '0x123456789abcdef'; // replace with actual token address\nconst userAddress = '0x987654321fedcba'; // replace with actual user address\n\nconst tokenContract = new web3.eth.Contract(tokenAbi, tokenAddress);\n\ntokenContract.methods.balanceOf(userAddress).call((err, balance) => {\n if (err) {\n console.error(err);\n } else {\n console.log(`User has a balance of ${balance} tokens`);\n }\n});\n```\n\nThis code creates a new instance of the token contract using the ABI (Application Binary Interface) and address of the deployed contract. It then calls the `balanceOf` function with the user's address as an argument, and logs the user's token balance to the console.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n This code defines a set of functions and events for a smart contract related to a token. It includes functions for transferring tokens, approving transfers, checking balances, and more.\n\n2. What is the significance of the \"payable\" and \"stateMutability\" properties in the function definitions?\n The \"payable\" property indicates whether the function can receive Ether as part of a transaction, while the \"stateMutability\" property indicates whether the function changes the state of the contract (e.g. by modifying storage variables) and whether it requires any gas to execute.\n\n3. What is the purpose of the \"Approval\" and \"Transfer\" events?\n The \"Approval\" event is emitted when a token holder approves a transfer of tokens to another address, while the \"Transfer\" event is emitted when tokens are transferred from one address to another. These events can be used to track the movement of tokens and trigger external actions based on those movements.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/erc20.md"}}],["698",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/erc20_bytes32.json)\n\nThis code represents a smart contract on the Ethereum blockchain. The contract has two functions: `name` and `symbol`. These functions are marked as constant, meaning they do not modify the state of the contract and are free to execute. \n\nThe `name` function returns a bytes32 value representing the name of the contract. The `symbol` function returns a bytes32 value representing the symbol of the contract. \n\nThis code is likely part of a larger project that involves creating and managing tokens on the Ethereum blockchain. The `name` and `symbol` functions are commonly used in token contracts to provide basic information about the token. For example, a token contract for a fictional zoo might have a name of \"ZooToken\" and a symbol of \"ZOO\". \n\nTo interact with this contract, a user would need to use a tool such as Remix or Truffle to deploy the contract to the Ethereum network. Once deployed, the user could then call the `name` and `symbol` functions to retrieve the corresponding values. \n\nExample usage in Solidity code:\n\n```\ncontract MyToken {\n function name() public view returns (bytes32) {\n return \"ZooToken\";\n }\n\n function symbol() public view returns (bytes32) {\n return \"ZOO\";\n }\n}\n```\n## Questions: \n 1. What is the purpose of this code? \n- This code defines two functions `name` and `symbol` with their respective inputs and outputs. \n\n2. What is the data type of the inputs and outputs for the `name` and `symbol` functions? \n- Both functions have an input and output of type `bytes32`. \n\n3. What is the stateMutability of the `name` and `symbol` functions? \n- Both functions have a stateMutability of `view`, meaning they do not modify the state of the contract and can be called without sending a transaction.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/erc20_bytes32.md"}}],["699",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/factory.json)\n\nThe code provided is a Solidity smart contract that defines a set of functions and events for creating and managing pairs of tokens on a decentralized exchange. The contract is part of a larger project called \"zoo\" and is likely used in conjunction with other contracts to create a fully functional decentralized exchange.\n\nThe contract has a constructor function that takes an address parameter and sets it as the \"feeToSetter\" variable. This variable is used to determine who has the authority to set the fee charged for trading on the exchange. The contract also defines an event called \"PairCreated\" that is emitted whenever a new token pair is created on the exchange.\n\nThe contract has several functions for managing pairs of tokens on the exchange. The \"createPair\" function takes two token addresses as parameters and creates a new pair of tokens on the exchange. The \"getPair\" function takes two token addresses as parameters and returns the address of the corresponding token pair on the exchange. The \"allPairs\" function returns an array of all token pairs on the exchange, and the \"allPairsLength\" function returns the length of the array.\n\nThe contract also has functions for managing the fee charged for trading on the exchange. The \"feeTo\" function returns the address of the account that receives the trading fee, and the \"setFeeTo\" function sets the address of the account that receives the trading fee. The \"setFeeToSetter\" function sets the address of the account that has the authority to set the trading fee. Finally, the \"setMigrator\" function sets the address of a contract that can be used to migrate liquidity from other exchanges to this one.\n\nOverall, this contract provides the basic functionality for creating and managing pairs of tokens on a decentralized exchange. It can be used in conjunction with other contracts to create a fully functional decentralized exchange. Here is an example of how the \"createPair\" function might be used:\n\n```\n// create a new pair of tokens on the exchange\naddress tokenA = 0x1234567890123456789012345678901234567890;\naddress tokenB = 0x0987654321098765432109876543210987654321;\naddress pair = ZooExchange.createPair(tokenA, tokenB);\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a smart contract for creating and managing pairs of tokens on a decentralized exchange.\n\n2. What events can trigger the \"PairCreated\" event?\n- The \"PairCreated\" event is triggered when a new pair of tokens is created using the \"createPair\" function.\n\n3. What is the difference between the \"feeTo\" and \"feeToSetter\" functions?\n- The \"feeTo\" function returns the address that receives the trading fees, while the \"feeToSetter\" function returns the address that has permission to update the fee recipient address.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/factory.md"}}],["700",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/faucet.json)\n\nThe code provided is a single function called `drip`. It is written in Solidity, a programming language used for creating smart contracts on the Ethereum blockchain. \n\nThe function has no input parameters and no output values. It is marked as `nonpayable`, meaning it cannot receive any Ether (the cryptocurrency used on the Ethereum network) as part of its execution. \n\nWithout any context or additional information, it is difficult to determine the exact purpose of this function within the larger project. However, based on its name and the fact that it does not accept any input parameters, it is possible that this function is intended to perform a simple action or trigger an event. \n\nFor example, it could be used to simulate the sound of water dripping in an exhibit within the zoo project. The function could be called periodically to emit a sound or trigger a visual effect, creating a more immersive experience for users interacting with the project. \n\nHere is an example of how the `drip` function could be called within a larger Solidity contract:\n\n```\ncontract ZooExhibit {\n function simulateDrip() public {\n drip();\n }\n}\n```\n\nIn this example, the `simulateDrip` function is part of a larger contract representing an exhibit within the zoo project. When called, it simply invokes the `drip` function to simulate the sound of water dripping within the exhibit. \n\nOverall, while the `drip` function is relatively simple and does not provide much functionality on its own, it could be a useful component within a larger project like zoo. By providing a way to trigger simple actions or events, it can help create a more engaging and interactive experience for users.\n## Questions: \n 1. What is the purpose of the `drip` function?\n - The `drip` function does not have any inputs or outputs and is nonpayable, so it likely performs some internal state change or action within the contract.\n\n2. Is this the entire code for the `zoo` project or just a small portion?\n - It is unclear from this code snippet whether this is the entire code for the `zoo` project or just a small portion. More context is needed to determine the scope of the project.\n\n3. What programming language is this code written in?\n - It is not specified in the code snippet what programming language this code is written in. More information is needed to determine the language used.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/faucet.md"}}],["701",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/limit-order-helper.json)\n\nThe code provided is a Solidity smart contract that is part of the larger project called \"zoo\". The contract contains three functions, a constructor, a view function, and a payable function. \n\nThe constructor function takes in a single parameter, `_bentoBox`, which is of type `contract IBentoBox`. This function is non-payable, meaning it cannot receive any ether, and is only called once during the deployment of the contract. The purpose of this function is to initialize the `bentoBox` variable with the `_bentoBox` parameter. \n\nThe view function is named `bentoBox` and returns a single output of type `contract IBentoBox`. This function is used to retrieve the value of the `bentoBox` variable. The `view` modifier indicates that this function does not modify the state of the contract and is free to execute without any gas cost. \n\nThe third function is named `depositAndApprove` and is a payable function. It takes in six parameters, `user`, `masterContract`, `approved`, `v`, `r`, and `s`. The `user` parameter is of type `address` and represents the address of the user who is depositing funds. The `masterContract` parameter is also of type `address` and represents the address of the contract that will receive the funds. The `approved` parameter is of type `bool` and indicates whether the user has approved the transfer of funds. The `v`, `r`, and `s` parameters are used for signature verification. \n\nThe purpose of this function is to deposit funds into the `bentoBox` contract and approve the transfer of funds. The function first transfers the funds from the user's address to the `bentoBox` contract. It then calls the `approve` function on the `bentoBox` contract to approve the transfer of funds to the `masterContract`. Finally, it calls the `deposit` function on the `bentoBox` contract to deposit the funds into the `masterContract`. \n\nHere is an example of how this function can be used:\n\n```\n// Assume the contract has already been deployed and initialized with a valid IBentoBox contract address\nfunction depositFunds() public payable {\n address user = msg.sender;\n address masterContract = 0x1234567890123456789012345678901234567890;\n bool approved = true;\n uint8 v = 27;\n bytes32 r = 0x1234567890123456789012345678901234567890123456789012345678901234;\n bytes32 s = 0x5678901234567890123456789012345678901234567890123456789012345678;\n \n ZooContract zc = ZooContract(address);\n zc.depositAndApprove{value: msg.value}(user, masterContract, approved, v, r, s);\n}\n```\n\nIn this example, the `depositFunds` function is called by a user who wants to deposit funds into the `masterContract`. The function creates a new instance of the `ZooContract` contract and calls the `depositAndApprove` function with the necessary parameters. The `value` keyword is used to send the amount of ether sent with the transaction to the `depositAndApprove` function.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a smart contract with a constructor and two functions for interacting with a BentoBox contract.\n\n2. What is the IBentoBox contract and how is it used in this code?\n- The IBentoBox contract is an interface that defines the functions that can be called on a BentoBox contract. It is used as an input parameter in the constructor and an output parameter in the bentoBox function.\n\n3. What does the depositAndApprove function do and how is it used?\n- The depositAndApprove function takes in several parameters including a user address, a master contract address, and a boolean value for approval. It allows a user to deposit funds into the BentoBox contract and approve a master contract to use those funds. It requires a signature from the user to verify the transaction.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/limit-order-helper.md"}}],["702",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/maker.json)\n\nThis code defines a smart contract that is part of the larger zoo project. The contract is responsible for converting tokens between different bridges. The contract has a constructor that takes in four addresses: `_factory`, `_bar`, `_sushi`, and `_weth`. These addresses are used to initialize the contract's state variables.\n\nThe contract has several functions that can be used to interact with it. The `bridgeFor` function takes in a token address and returns the address of the bridge associated with that token. The `convert` function takes in two token addresses and converts them using the associated bridge. The `convertMultiple` function takes in arrays of token addresses and converts them using their associated bridges.\n\nThe contract also has functions for setting and transferring ownership. The `setBridge` function can be used to set the bridge associated with a particular token. The `transferOwnership` function can be used to transfer ownership of the contract to a new owner.\n\nThe contract emits several events, including `LogBridgeSet`, `LogConvert`, and `OwnershipTransferred`. These events can be used to track changes to the contract's state.\n\nOverall, this contract plays an important role in the larger zoo project by facilitating the conversion of tokens between different bridges. Developers working on the project can use this contract to ensure that tokens can be easily converted and transferred between different parts of the project. Here is an example of how the `convert` function might be used:\n\n```\n// Convert 1 ETH to 100 USDT\nzoo.convert(ethAddress, usdtAddress, {value: 1 ether, gas: 500000});\n```\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- Without additional context, it is unclear what the purpose of this code is and what problem it solves. It appears to be a smart contract with functions related to converting tokens and setting bridges, but more information is needed to fully understand its purpose.\n\n2. What is the significance of the different event types and what information do they provide?\n- The code includes three different event types: LogBridgeSet, LogConvert, and OwnershipTransferred. It is unclear what information each event provides and why they are important. Additional documentation or comments within the code would be helpful in understanding their significance.\n\n3. What are the expected inputs and outputs for the convert and convertMultiple functions?\n- The convert and convertMultiple functions are both nonpayable and do not have any outputs listed. It is unclear what the expected inputs are for these functions and what actions they perform. Additional documentation or comments within the code would be helpful in understanding their functionality.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/maker.md"}}],["703",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/masterchef.json)\n\nThis code defines a smart contract for a decentralized application (dApp) called \"zoo\". The contract is written in Solidity, a programming language used for creating smart contracts on the Ethereum blockchain. \n\nThe contract contains several functions that allow users to interact with the dApp. These functions include adding and updating pools, depositing and withdrawing tokens, and migrating pools. \n\nThe constructor function initializes the contract with several parameters, including the SushiToken contract address, the developer address, the SUSHI token reward per block, the starting block number, and the bonus end block number. \n\nThe add function allows users to add a new pool to the dApp. A pool is a collection of liquidity provider (LP) tokens that users can deposit to earn rewards in SUSHI tokens. The function takes in the allocation point, which determines the percentage of the total SUSHI rewards that the pool will receive, the LP token contract address, and a boolean value that determines whether to update all pools before adding the new one. \n\nThe deposit function allows users to deposit LP tokens into a specific pool to earn SUSHI rewards. The function takes in the pool ID and the amount of LP tokens to deposit. \n\nThe withdraw function allows users to withdraw their deposited LP tokens from a specific pool. The function takes in the pool ID and the amount of LP tokens to withdraw. \n\nThe migrate function allows users to migrate their LP tokens from one pool to another. The function takes in the pool ID and the migrator contract address. \n\nOverall, this contract provides the functionality for users to participate in a decentralized exchange (DEX) by providing liquidity and earning rewards in SUSHI tokens. The contract can be used in conjunction with other contracts and interfaces to create a fully functional dApp. \n\nExample usage:\n\nTo add a new pool to the dApp:\n```\nzoo.add(100, lpTokenAddress, true);\n```\n\nTo deposit LP tokens into a pool:\n```\nzoo.deposit(poolID, lpTokenAmount);\n```\n\nTo withdraw LP tokens from a pool:\n```\nzoo.withdraw(poolID, lpTokenAmount);\n```\n\nTo migrate LP tokens from one pool to another:\n```\nzoo.migrate(poolID, migratorAddress);\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code is a smart contract for a project called zoo. It appears to be a staking contract for a token called SushiToken, allowing users to deposit and withdraw tokens to earn rewards.\n\n2. What is the significance of the \"BONUS_MULTIPLIER\" variable?\n- The \"BONUS_MULTIPLIER\" variable is a constant that determines the bonus multiplier for rewards during a certain period of time. It is likely used in conjunction with the start and end block variables to determine the reward rate for stakers.\n\n3. What is the purpose of the \"migrate\" function and what does it do?\n- The \"migrate\" function allows for the migration of staked tokens from one contract to another using a \"Migrator\" contract. This could be useful if the staking contract is being upgraded or replaced with a new contract.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/masterchef.md"}}],["704",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/minichef-v2.json)\n\nThe code provided is a Solidity smart contract for a project called MiniChefV2, which appears to be a decentralized application (dApp) for yield farming on the Ethereum blockchain. Yield farming is a process where users can earn rewards by providing liquidity to a decentralized exchange (DEX) or liquidity pool (LP) on a blockchain network. \n\nThe MiniChefV2 contract has several functions that allow users to deposit, withdraw, and harvest rewards from various liquidity pools. The contract also has functions for adding and updating pools, setting reward allocations, and setting the rate at which rewards are distributed. \n\nThe contract has a constructor function that takes an input of a contract address for the SUSHI token, which is the native token of the SushiSwap DEX. The contract has several events that are emitted when certain actions are taken, such as depositing, withdrawing, or updating a pool. \n\nOne notable function is the `batch` function, which allows users to execute multiple function calls in a single transaction. This can be useful for optimizing gas costs and reducing the number of transactions needed to perform certain actions. \n\nOverall, the MiniChefV2 contract appears to be a key component of the larger project, providing the functionality for users to participate in yield farming on the SushiSwap DEX. Developers building on top of the MiniChefV2 contract can leverage its functions to create their own dApps or integrate it into existing projects. \n\nExample usage of the `deposit` function:\n```\nfunction deposit(uint256 pid, uint256 amount, address to) public {\n PoolInfo storage pool = poolInfo[pid];\n UserInfo storage user = userInfo[pid][msg.sender];\n updatePool(pid);\n if (user.amount > 0) {\n uint256 pending = user.amount.mul(pool.accSushiPerShare).div(1e12).sub(user.rewardDebt);\n if (pending > 0) {\n safeSushiTransfer(msg.sender, pending);\n }\n }\n if (amount > 0) {\n pool.lpToken.safeTransferFrom(address(msg.sender), address(this), amount);\n user.amount = user.amount.add(amount);\n }\n user.rewardDebt = user.amount.mul(pool.accSushiPerShare).div(1e12);\n emit Deposit(msg.sender, pid, amount, to);\n}\n```\nThe `deposit` function takes three inputs: `pid` is the ID of the pool to deposit into, `amount` is the amount of liquidity to deposit, and `to` is the address to send any rewards to. The function first updates the pool information, then calculates any pending rewards for the user and transfers them to their address. If the user is depositing liquidity, the function transfers the tokens to the contract and updates the user's amount. Finally, the user's reward debt is updated and an event is emitted.\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code is a smart contract for a project called zoo that allows users to deposit and withdraw tokens in exchange for rewards. It solves the problem of incentivizing users to provide liquidity to the platform.\n\n2. What are the different events that can be emitted by this contract and what do they represent?\n- There are several events that can be emitted by this contract, including Deposit, EmergencyWithdraw, Harvest, LogPoolAddition, LogSetPool, LogSushiPerSecond, LogUpdatePool, OwnershipTransferred, and Withdraw. These events represent different actions taken by users or the contract, such as depositing tokens, withdrawing tokens, or updating pool information.\n\n3. What are some of the functions available in this contract and what do they do?\n- Some of the functions available in this contract include add, deposit, emergencyWithdraw, harvest, set, and withdraw. These functions allow users to add liquidity to the platform, deposit and withdraw tokens, and update pool information. The emergencyWithdraw function can be used in case of an emergency, while the harvest function allows users to claim their rewards. The set function can be used to update pool information, such as the allocation points and rewarder.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/minichef-v2.md"}}],["705",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/multicall2.json)\n\nThe code provided is a Solidity smart contract that contains a set of functions for interacting with the Ethereum blockchain. The contract is called Multicall2 and is designed to allow multiple function calls to be made in a single transaction, reducing gas costs and improving efficiency.\n\nThe main functions in the contract are `aggregate` and `blockAndAggregate`. Both functions take a list of function calls as input and return the results of those calls. The difference between the two functions is that `blockAndAggregate` also returns the block number and block hash of the current block.\n\nThe `aggregate` function returns the block number and an array of return data for each function call. The `blockAndAggregate` function returns the block number, block hash, and an array of return data for each function call.\n\nOther functions in the contract provide information about the current block, such as `getBlockNumber`, `getBlockHash`, `getCurrentBlockTimestamp`, and `getCurrentBlockGasLimit`. There is also a function called `getEthBalance` that returns the balance of an Ethereum address.\n\nThe `tryAggregate` and `tryBlockAndAggregate` functions are similar to `aggregate` and `blockAndAggregate`, but they return a boolean indicating whether all function calls were successful, along with the return data.\n\nOverall, the Multicall2 contract provides a convenient way to make multiple function calls in a single transaction, reducing gas costs and improving efficiency. It can be used in a variety of Ethereum applications, such as decentralized exchanges, where multiple function calls may need to be made in a single transaction.\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code provides a set of functions for querying various information about the Ethereum blockchain, such as block number, block hash, current timestamp, and ETH balance of an address. It also provides functions for aggregating multiple calls into a single call, which can be useful for reducing gas costs.\n\n2. What is the expected input and output format for the `aggregate` and `blockAndAggregate` functions?\n- Both functions take in an array of `Multicall2.Call` tuples, where each tuple contains an Ethereum address and a byte array representing the data to be called on that address. The `aggregate` function returns the block number and an array of return data for each call, while the `blockAndAggregate` function returns the block number, block hash, and an array of `Multicall2.Result` tuples, where each tuple contains a boolean indicating success and the return data for a single call.\n\n3. What is the difference between the `tryAggregate` and `tryBlockAndAggregate` functions compared to the regular `aggregate` and `blockAndAggregate` functions?\n- The `tryAggregate` and `tryBlockAndAggregate` functions have an additional boolean input parameter `requireSuccess`, which determines whether the function should revert if any of the calls fail. The regular functions will still return data for all calls, even if some of them fail.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/multicall2.md"}}],["706",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/pegged-oracle.json)\n\nThis code defines three functions that are part of a smart contract. The smart contract is likely part of a larger project related to a zoo, but the specifics of that project are not relevant to understanding this code.\n\nThe first function, `get`, takes a single input parameter of type `bytes` and returns two values: a boolean and a uint256. The function is marked as `nonpayable`, meaning it cannot receive payments. The purpose of this function is not clear from the code alone, as the input parameter is not described and the function body is not provided.\n\nThe second function, `getDataParameter`, takes a single input parameter of type `uint256` and returns a value of type `bytes`. The function is marked as `pure`, meaning it does not read or modify the state of the contract. The purpose of this function is also not clear from the code alone, as the input parameter is not described and the function body is not provided.\n\nThe third function, `peek`, takes a single input parameter of type `bytes` and returns two values: a boolean and a uint256. The function is marked as `view`, meaning it does not modify the state of the contract. The purpose of this function is not clear from the code alone, as the input parameter is not described and the function body is not provided.\n\nWithout additional context or documentation, it is difficult to determine how these functions may be used in the larger project. However, it is clear that they are intended to interact with the contract's state in some way, and that they are designed to be called from outside the contract (since they are marked as `nonpayable`, `pure`, and `view`). \n\nHere is an example of how the `get` function might be called from a JavaScript program using the web3.js library:\n\n```\nconst contract = new web3.eth.Contract(contractAbi, contractAddress);\n\nconst data = \"0x12345678\"; // replace with actual data\ncontract.methods.get(data).call((err, result) => {\n if (err) {\n console.error(err);\n } else {\n const success = result[0];\n const value = result[1];\n console.log(`Success: ${success}, Value: ${value}`);\n }\n});\n```\n\nThis code assumes that `contractAbi` is an array containing the ABI (Application Binary Interface) of the smart contract, and that `contractAddress` is a string containing the address of the deployed contract. The `get` function is called with the `data` parameter, and the result is logged to the console.\n## Questions: \n 1. What is the purpose of this code and how does it fit into the overall functionality of the zoo project?\n- This code defines three functions with inputs, outputs, and state mutability. It is likely part of a larger smart contract system that interacts with a blockchain.\n\n2. What do the inputs and outputs of each function represent?\n- The inputs and outputs are defined using the \"internalType\" and \"type\" fields. For example, the \"get\" function takes in a bytes parameter named \"data\" and returns a bool and uint256 value.\n\n3. What is the difference between the state mutability types \"nonpayable\", \"pure\", and \"view\"?\n- \"nonpayable\" means that the function does not modify the state of the contract and does not accept Ether. \"pure\" means that the function does not read or modify the state of the contract. \"view\" means that the function does not modify the state of the contract but can read from it.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/pegged-oracle.md"}}],["707",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/router-slim.json)\n\nThis code defines two functions that can be used to swap tokens on a decentralized exchange. The first function, `swapExactETHForTokens`, allows the user to swap a specified amount of Ether for a specified amount of a different token. The function takes in four parameters: `amountOutMin`, which is the minimum amount of the token the user wants to receive; `path`, which is an array of addresses representing the path of tokens to trade, starting with Ether and ending with the desired token; `to`, which is the address that will receive the traded tokens; and `deadline`, which is the timestamp by which the transaction must be included in a block. The function is marked as `payable`, meaning that the user must send Ether along with the transaction in order to execute the swap.\n\nThe second function, `swapExactTokensForTokens`, allows the user to swap a specified amount of one token for a specified amount of another token. The function takes in five parameters: `amountIn`, which is the amount of the input token to trade; `amountOutMin`, which is the minimum amount of the output token the user wants to receive; `path`, which is an array of addresses representing the path of tokens to trade, starting with the input token and ending with the output token; `to`, which is the address that will receive the traded tokens; and `deadline`, which is the timestamp by which the transaction must be included in a block. The function is marked as `nonpayable`, meaning that the user does not need to send any Ether along with the transaction in order to execute the swap.\n\nThese functions are likely part of a larger project that involves interacting with a decentralized exchange, such as Uniswap or SushiSwap. They could be used by developers building applications that allow users to easily swap tokens without having to manually go through the exchange interface. For example, a decentralized finance (DeFi) application could use these functions to allow users to swap between different tokens within the app. Here is an example of how the `swapExactETHForTokens` function could be called:\n\n```\nconst { ethers } = require('ethers');\n\nconst provider = new ethers.providers.JsonRpcProvider();\nconst signer = provider.getSigner();\n\nconst contractAddress = '0x1234567890123456789012345678901234567890';\nconst contractABI = [\n {\n \"inputs\": [\n { \"internalType\": \"uint256\", \"name\": \"amountOutMin\", \"type\": \"uint256\" },\n { \"internalType\": \"address[]\", \"name\": \"path\", \"type\": \"address[]\" },\n { \"internalType\": \"address\", \"name\": \"to\", \"type\": \"address\" },\n { \"internalType\": \"uint256\", \"name\": \"deadline\", \"type\": \"uint256\" }\n ],\n \"name\": \"swapExactETHForTokens\",\n \"outputs\": [{ \"internalType\": \"uint256[]\", \"name\": \"amounts\", \"type\": \"uint256[]\" }],\n \"stateMutability\": \"payable\",\n \"type\": \"function\"\n }\n];\n\nconst contract = new ethers.Contract(contractAddress, contractABI, signer);\n\nconst amountOutMin = ethers.utils.parseUnits('100', 'ether');\nconst path = ['0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', '0x6b175474e89094c44da98b954eedeac495271d0f'];\nconst to = '0x1234567890123456789012345678901234567890';\nconst deadline = Math.floor(Date.now() / 1000) + 60 * 10; // 10 minutes from now\n\nconst tx = await contract.swapExactETHForTokens(amountOutMin, path, to, deadline, { value: ethers.utils.parseUnits('1', 'ether') });\nawait tx.wait();\n```\n\nThis code uses the `ethers` library to interact with the contract at `contractAddress` using the `contractABI`. It then calls the `swapExactETHForTokens` function with the specified parameters, including sending 1 Ether along with the transaction. The function returns an array of `amounts`, which represents the actual amounts of tokens received in the trade. The code waits for the transaction to be confirmed on the blockchain before continuing.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines two functions for swapping tokens on a blockchain network.\n\n2. What are the inputs and outputs of the `swapExactETHForTokens` function?\n - The inputs are `amountOutMin` (minimum amount of output tokens), `path` (array of token addresses), `to` (recipient address), and `deadline` (timestamp). The output is an array of `amounts` of output tokens.\n\n3. What is the difference in `stateMutability` between the two functions?\n - The `swapExactETHForTokens` function is `payable`, meaning it can receive Ether along with its function call. The `swapExactTokensForTokens` function is `nonpayable`, meaning it cannot receive Ether.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/router-slim.md"}}],["708",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/sushi.json)\n\nThe code provided is a JSON representation of the ABI (Application Binary Interface) for a smart contract. The ABI is a specification that defines how to interact with a smart contract, including the functions and events it exposes, their inputs and outputs, and their types. \n\nThe smart contract represented by this ABI is likely a token contract, as it includes functions such as `balanceOf`, `transfer`, `approve`, `allowance`, and `totalSupply`. The contract also includes functions related to delegation of voting power, such as `delegate`, `getCurrentVotes`, and `getPriorVotes`. \n\nThe ABI also includes several events that can be emitted by the contract, such as `Transfer`, `Approval`, `DelegateChanged`, `DelegateVotesChanged`, and `OwnershipTransferred`. These events can be used to track changes to the state of the contract and trigger actions in other parts of the system.\n\nDevelopers can use this ABI to interact with the smart contract from their applications or other smart contracts. For example, a developer could use the `balanceOf` function to check the balance of a particular address, or the `transfer` function to send tokens from one address to another. The delegation functions could be used to allow token holders to delegate their voting power to other addresses.\n\nHere is an example of how a developer might use this ABI to interact with the contract using the web3.js library:\n\n```\nconst Web3 = require('web3');\nconst abi = [ ... ]; // insert the ABI provided in the question\nconst contractAddress = '0x123...'; // insert the address of the deployed contract\n\nconst web3 = new Web3('https://mainnet.infura.io/v3/your-project-id');\nconst contract = new web3.eth.Contract(abi, contractAddress);\n\n// Get the balance of an address\nconst balance = await contract.methods.balanceOf('0x456...').call();\nconsole.log(`Balance: ${balance}`);\n\n// Transfer tokens to another address\nconst tx = await contract.methods.transfer('0x789...', 100).send({ from: '0x456...' });\nconsole.log(`Transaction hash: ${tx.transactionHash}`);\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code defines a smart contract with various functions related to token management, including transferring tokens, checking balances, and delegating voting power.\n\n2. What is the significance of the different event types defined in this code?\n- The different event types defined in this code allow for tracking and logging of important actions within the smart contract, such as approvals, transfers, and changes in ownership or voting power.\n\n3. How does the delegation functionality work in this smart contract?\n- The delegation functionality allows token holders to delegate their voting power to another address, which can then be used to vote on proposals within the associated governance system. This is done through the `delegate` and `delegateBySig` functions, and is tracked through the `DelegateChanged` and `DelegateVotesChanged` events.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/sushi.md"}}],["709",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/swaave.json)\n\nThe code provided is a Solidity smart contract that defines a set of functions related to saving and swapping tokens. The contract has a constructor function that takes no inputs and does not return anything. \n\nThe first function defined in the contract is called `saave`, which takes a single input parameter of type `uint256` and does not return anything. This function is used to save a certain amount of tokens to the contract. The second function, `saaveTo`, takes two input parameters: an address and a `uint256` amount, and saves the specified amount of tokens to the specified address. Both of these functions have a `stateMutability` of `nonpayable`, meaning they cannot receive any Ether along with the function call.\n\nThe next two functions, `swaave` and `swaaveTo`, are used to swap Ether for tokens. `swaave` is a payable function, meaning it can receive Ether along with the function call, and it does not take any input parameters. `swaaveTo` takes two input parameters: an address and a `uint256` amount, and swaps the specified amount of Ether for tokens and sends them to the specified address. Both of these functions have a `stateMutability` of `payable`.\n\nThe remaining four functions are used to withdraw tokens or Ether from the contract. `unSaave` and `unSaaveTo` are used to withdraw saved tokens, while `unSwaave` and `unSwaaveTo` are used to withdraw swapped Ether. All four of these functions take the same input parameters as their corresponding `saave` and `swaave` functions, respectively. All four of these functions have a `stateMutability` of `nonpayable`.\n\nFinally, the contract includes a fallback function with a `stateMutability` of `payable`. This function is executed when the contract receives Ether without a specific function call. \n\nOverall, this contract provides a basic set of functions for saving and swapping tokens and Ether. It can be used as a building block for more complex financial applications within the larger project. Here is an example of how the `saave` function could be called:\n\n```\ncontract MyContract {\n address public zooContractAddress = 0x1234567890123456789012345678901234567890;\n \n function saveTokens(uint256 amount) public {\n IZoo(zooContractAddress).saave(amount);\n }\n}\n\ninterface IZoo {\n function saave(uint256 amount) external;\n}\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n Answer: Without additional context, it is unclear what this code does or what its purpose is. It appears to define a set of functions related to saving and swapping tokens, but more information is needed to understand its full functionality.\n\n2. What is the expected input and output for each function?\n Answer: The code provides some information about the input and output for each function, such as the data types and names of the parameters and whether the function is payable or nonpayable. However, it does not provide information about the expected behavior or output of each function, which would be helpful for understanding how to use them.\n\n3. Are there any dependencies or external contracts required for this code to function properly?\n Answer: It is unclear from this code whether there are any dependencies or external contracts required for it to function properly. Additional context or documentation would be needed to determine if there are any other contracts or libraries that need to be deployed or imported for this code to work as intended.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/swaave.md"}}],["710",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/timelock.json)\n\nThe code provided is a Solidity smart contract that defines a governance mechanism for a decentralized application. The contract is designed to allow for the execution of transactions on behalf of the application, with the ability to cancel or delay transactions if necessary. \n\nThe contract includes a constructor function that takes two arguments: an address for the contract's administrator and a delay time for transaction execution. The contract also includes several events that are emitted when certain actions are taken, such as canceling or executing a transaction. \n\nThe contract includes several functions that allow for the management of the governance mechanism. The `acceptAdmin` function allows the administrator to accept their role, while the `setPendingAdmin` function allows for the appointment of a new administrator. The `setDelay` function allows for the adjustment of the delay time for transaction execution. \n\nThe `queueTransaction` function allows for the queuing of a transaction, which can then be executed after the specified delay time has passed. The `executeTransaction` function allows for the execution of a transaction that has been queued, while the `cancelTransaction` function allows for the cancellation of a queued transaction. \n\nOverall, this contract provides a governance mechanism for a decentralized application that allows for the execution of transactions while providing the ability to cancel or delay transactions if necessary. This contract can be used as a building block for larger decentralized applications that require a governance mechanism. \n\nExample usage of this contract could include a decentralized exchange that uses this contract to manage the execution of trades. The contract could be used to ensure that trades are executed in a timely manner while also providing the ability to cancel or delay trades if necessary.\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code implements a contract that allows for delayed execution of transactions, with the ability to cancel or queue transactions. It solves the problem of needing to execute transactions at a specific time or after a certain delay.\n\n2. What are the different events defined in this code and when are they emitted?\n- There are four different events defined in this code: `CancelTransaction`, `ExecuteTransaction`, `NewAdmin`, and `NewDelay`. They are emitted when a transaction is cancelled, executed, the admin address is changed, and the delay time is changed, respectively.\n\n3. What are the different functions defined in this code and what do they do?\n- There are several functions defined in this code, including a constructor, getters for various constants, and functions for accepting a new admin, cancelling and executing transactions, setting the delay time, and setting a pending admin. The `receive` function is also defined to allow the contract to receive payments.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/timelock.md"}}],["711",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/uniswap-v2-factory.json)\n\nThe code provided is a Solidity smart contract that defines a set of functions and events for creating and managing pairs of tokens on a decentralized exchange. The contract is part of the larger project called \"zoo\" and is likely used in conjunction with other contracts to create a fully functional exchange.\n\nThe contract has a constructor function that takes an address parameter and sets it as the \"_feeToSetter\" variable. This variable is used to determine who has the ability to set the fee charged for trades on the exchange. The contract also defines an event called \"PairCreated\" that is emitted whenever a new token pair is created on the exchange.\n\nThe contract has several functions that allow for the creation and management of token pairs. The \"createPair\" function takes two token addresses as parameters and creates a new pair on the exchange. The function returns the address of the newly created pair. The \"getPair\" function takes two token addresses as parameters and returns the address of the corresponding pair on the exchange.\n\nThe contract also has functions for setting the fee charged for trades on the exchange. The \"setFeeTo\" function takes an address parameter and sets it as the \"_feeTo\" variable, which determines where the fees collected from trades are sent. The \"setFeeToSetter\" function takes an address parameter and sets it as the \"_feeToSetter\" variable, which determines who has the ability to set the fee charged for trades on the exchange.\n\nOverall, this contract provides the basic functionality for creating and managing token pairs on a decentralized exchange. It is likely used in conjunction with other contracts to create a fully functional exchange. Below is an example of how the \"createPair\" function could be used:\n\n```\n// Assume we have two token addresses: tokenA and tokenB\n// We want to create a new pair on the exchange\naddress newPair = zoo.createPair(tokenA, tokenB);\n```\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code defines a smart contract that creates and manages pairs of tokens on a decentralized exchange. It allows users to trade tokens without the need for a centralized exchange.\n\n2. What events can trigger the `PairCreated` event and what information does it provide?\n- The `PairCreated` event is triggered when a new token pair is created on the exchange. It provides the addresses of the two tokens being paired, the address of the new pair contract, and a uint256 value.\n\n3. What is the difference between the `feeTo` and `feeToSetter` functions?\n- The `feeTo` function returns the address that receives the trading fees collected by the exchange. The `feeToSetter` function returns the address that has permission to update the `feeTo` address.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/uniswap-v2-factory.md"}}],["712",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/uniswap-v2-router-02-no-eth.json)\n\nThe code provided is a JSON representation of a smart contract's ABI (Application Binary Interface). ABI is a standard interface for smart contracts that defines how to interact with them. It specifies the methods and their inputs and outputs that can be called by external parties. \n\nThe smart contract in question is related to a decentralized exchange (DEX) and provides various functions for swapping and adding/removing liquidity from a liquidity pool. The functions include `swapExactTokensForTokens`, `swapExactTokensForTokensSupportingFeeOnTransferTokens`, `swapTokensForExactTokens`, `addLiquidity`, `removeLiquidity`, and `removeLiquidityWithPermit`. \n\nThe `swapExactTokensForTokens` function allows users to swap a specific amount of one token for another token. The `swapExactTokensForTokensSupportingFeeOnTransferTokens` function is similar but supports tokens that have a transfer fee. The `swapTokensForExactTokens` function allows users to specify the amount of the output token they want to receive and the maximum amount of the input token they are willing to spend. \n\nThe `addLiquidity` function allows users to add liquidity to a pool by depositing equal values of two tokens. The `removeLiquidity` function allows users to remove liquidity from a pool and receive back the deposited tokens. The `removeLiquidityWithPermit` function is similar but allows users to approve the transaction using a permit instead of a signature. \n\nOverall, this smart contract provides the necessary functions for users to interact with a liquidity pool on a DEX. Developers can use this contract as a building block to create their own DEX or integrate it into an existing project. For example, a developer could use this contract to create a DEX that supports swapping between specific tokens or to add liquidity to a pool for a specific token pair.\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code provides a set of functions for swapping and adding/removing liquidity between different tokens on a decentralized exchange. It allows users to trade tokens without the need for a centralized exchange.\n\n2. What is the expected input and output format for each function?\n- Each function has a specific set of input parameters and output values, which are defined in the code. The input parameters include addresses of tokens, amounts of tokens, and deadlines for transactions. The output values include amounts of tokens and liquidity.\n\n3. Are there any security measures in place to prevent unauthorized access or malicious attacks?\n- The code includes a function for removing liquidity with a permit, which requires a digital signature from the token owner. This helps to prevent unauthorized access to the tokens. However, it is unclear if there are any other security measures in place to prevent malicious attacks.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/uniswap-v2-router-02-no-eth.md"}}],["713",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/weth.json)\n\nThe code provided is a JSON representation of the ABI (Application Binary Interface) for a smart contract. The ABI is a specification that defines how to interact with a smart contract, including the functions it exposes, their inputs and outputs, and the events it emits. \n\nThe smart contract appears to be a basic implementation of an ERC20 token, a standard interface for fungible tokens on the Ethereum blockchain. The functions defined in the ABI include `transfer`, `transferFrom`, `approve`, `balanceOf`, `allowance`, `totalSupply`, `name`, `symbol`, `decimals`, `deposit`, and `withdraw`. These functions are commonly used in ERC20 tokens to manage the transfer of tokens between addresses, check balances, and approve transfers on behalf of other addresses. \n\nThe smart contract also emits four events: `Approval`, `Transfer`, `Deposit`, and `Withdrawal`. These events are used to notify external applications of state changes within the smart contract. For example, the `Transfer` event is emitted whenever tokens are transferred between addresses, allowing external applications to track the movement of tokens. \n\nOverall, this code provides a blueprint for how to interact with the smart contract and use its functions to manage ERC20 tokens. Developers can use this ABI to build applications that interact with the smart contract, such as wallets, exchanges, and other token management tools. \n\nHere is an example of how to use the `transfer` function to send tokens from one address to another:\n\n```\nconst contract = new web3.eth.Contract(abi, contractAddress);\n\n// Transfer 100 tokens from sender to recipient\ncontract.methods.transfer(recipientAddress, 100).send({from: senderAddress})\n .then((receipt) => {\n console.log('Tokens transferred successfully');\n })\n .catch((error) => {\n console.error('Error transferring tokens:', error);\n });\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n - This code defines a set of functions and events for a smart contract that manages a token. It allows for transfers, approvals, and balance checks of the token.\n2. What is the significance of the \"payable\" and \"stateMutability\" properties in the function definitions?\n - The \"payable\" property indicates whether a function can receive Ether as part of a transaction, while the \"stateMutability\" property indicates whether a function changes the state of the contract or only reads from it.\n3. What is the purpose of the events defined in this code?\n - The events are used to notify external systems when certain actions occur within the contract, such as when a transfer or approval is made, or when Ether is deposited or withdrawn.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/weth.md"}}],["714",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/zenko.json)\n\nThis code defines a set of functions that facilitate the conversion of various types of assets in and out of the BentoBox smart contract. The BentoBox is a smart contract that acts as a shared pool of assets for other smart contracts to use. The functions in this code allow for the conversion of assets to and from the BentoBox, as well as to and from other types of assets such as Compound cTokens and Kashi margin tokens.\n\nThe `exchangeRateStoredInternal` function takes a Compound cToken address as input and returns the current exchange rate between the cToken and its underlying asset. This function is used to calculate the underlying asset value of a given cToken balance.\n\nThe `fromBento` function takes an ERC20 token address and a share amount as input and returns the corresponding amount of the token. This function is used to convert BentoBox shares back into their underlying asset.\n\nThe `fromCtoken` function takes a Compound cToken address and a cToken amount as input and returns the corresponding amount of the underlying asset. This function is used to convert cTokens back into their underlying asset.\n\nThe `fromKashi` function takes a Kashi margin token address and a margin token amount as input and returns the corresponding share amount. This function is used to convert Kashi margin tokens back into their underlying asset.\n\nThe `toBento` function takes an ERC20 token address and an amount as input and returns the corresponding share amount. This function is used to convert an asset into BentoBox shares.\n\nThe `toCtoken` function takes a Compound cToken address and an underlying asset amount as input and returns the corresponding cToken amount. This function is used to convert an underlying asset into cTokens.\n\nThe `toKashi` function takes a Kashi margin token address and an underlying asset amount as input and returns the corresponding fraction of the margin token. This function is used to convert an underlying asset into Kashi margin tokens.\n\nOverall, these functions provide a convenient way for other smart contracts to interact with the BentoBox and other asset types in a standardized way. For example, a lending protocol could use these functions to convert assets into BentoBox shares and then use those shares to provide liquidity to other protocols.\n## Questions: \n 1. What is the purpose of this code file?\n- This code file contains functions related to exchanging tokens between different protocols such as Compound and Kashi.\n\n2. What are the input and output types for each function?\n- Each function has a different set of input and output types, which are specified in the \"inputs\" and \"outputs\" fields of each function object.\n\n3. Are there any other dependencies or requirements for using these functions?\n- It is unclear from this code file whether there are any other dependencies or requirements for using these functions, such as the need for specific versions of smart contracts or external libraries.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/abis/zenko.md"}}],["715",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/addresses.ts)\n\nThis code defines a JavaScript object called `addresses` that contains six key-value pairs. Each key represents a specific cryptocurrency exchange and each value represents the address of a smart contract on that exchange's blockchain. The exchanges and their corresponding smart contract addresses are as follows:\n\n- LBTC_Eth: \"0x526903Ee6118de6737D11b37f82fC7f69B13685D\"\n- LBTC_Lux: \"0x8c07F93A76213c0BE738ded6110403b6d0ceE286\"\n- LETH_Eth: \"0xAA3AE951A7925F25aE8Ad65b052a76Bd8f052598\"\n- LETH_Lux: \"0x41e51eFcdA08fDFB84f4b1caa4b7f03c67FA431b\"\n- Teleport_Eth: \"0x60D9B4552b67792D4E65B4D3e27de0EfbCd219bA\"\n- Teleport_Lux: \"0x69baCe12fCf05CdbAd519b5B2fd5037383811A89\"\n\nThis code is likely used in the larger project to facilitate transactions between different cryptocurrencies on different exchanges. By storing the smart contract addresses in this object, the project can easily reference them when needed without having to hardcode them into the code. For example, if the project needs to execute a transaction on the LBTC_Eth exchange, it can simply reference `addresses.LBTC_Eth` instead of hardcoding the address into the code.\n\nHere is an example of how this code might be used in the larger project:\n\n```\nimport addresses from 'zoo';\n\nconst lbtcEthAddress = addresses.LBTC_Eth;\nconst teleportLuxAddress = addresses.Teleport_Lux;\n\n// Use the addresses to execute a transaction on the LBTC_Eth exchange\n// or the Teleport_Lux exchange\n```\n## Questions: \n 1. What is the purpose of this code?\n - This code exports an object containing addresses for various token pairs on different networks.\n\n2. What do the keys in the `addresses` object represent?\n - The keys represent the token pair and the network they are on, with the format `TOKEN1_TOKEN2: \"NETWORK\"`.\n\n3. Are these addresses static or dynamic?\n - It's unclear from this code alone whether these addresses are static or dynamically generated at runtime.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/addresses.md"}}],["716",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/chainIds.ts)\n\nThe code above defines an enum called `ChainId` which represents the different blockchain networks that the project can interact with. The purpose of this code is to provide a way for the project to easily switch between different networks without having to hardcode the network IDs throughout the codebase.\n\nThe `ChainId` enum contains several network IDs, including `MAINNET`, `RINKEBY`, `GÖRLI`, `BSC`, and `BSC_TESTNET`. These IDs correspond to the Ethereum mainnet, Rinkeby testnet, Göerli testnet, Binance Smart Chain mainnet, and Binance Smart Chain testnet, respectively.\n\nBy using this enum, the project can easily switch between different networks by simply changing the value of a single variable. For example, if the project needs to interact with the Rinkeby testnet, it can set the `chainId` variable to `ChainId.RINKEBY`. This makes the code more modular and easier to maintain.\n\nHere's an example of how this enum might be used in the larger project:\n\n```typescript\nimport { ChainId } from 'zoo';\n\nconst chainId = ChainId.RINKEBY;\n\n// Use the chainId variable throughout the project to interact with the Rinkeby testnet\n```\n\nOverall, the `ChainId` enum provides a simple and flexible way for the project to interact with different blockchain networks.\n## Questions: \n 1. What is the purpose of this code and how is it used in the zoo project?\n This code defines an enum called ChainId that lists the different chain IDs for various networks. It is likely used in the zoo project to specify which network to interact with when making transactions or retrieving data.\n\n2. Why are the HARDHAT chain IDs commented out?\n It is unclear from the code why the HARDHAT chain IDs are commented out. It is possible that they are not currently being used in the project or were added for testing purposes only.\n\n3. Are there any other chain IDs that could be added to this enum?\n Yes, there are many other chain IDs that could potentially be added to this enum depending on the needs of the project. For example, additional test networks or other public blockchains could be included.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/chainIds.md"}}],["717",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/contracts.ts)\n\nThe code in this file is responsible for retrieving contract information from a JSON file and organizing it into a usable format. The JSON file is imported at the beginning of the file and contains contract information for various networks. \n\nThe first part of the code creates two arrays: `networkIds` and `networkNames`. `networkIds` is an array of the keys in the `contractsJSON` object, which correspond to the network IDs. `networkNames` is an array of all the contract names for all networks. \n\nThe next part of the code creates an object called `contractsByChainIdAndNetwork`. This object is organized by network ID and contains an object for each network that contains all the contracts for that network. Each contract is represented by an object that contains the contract's bytecode, ABI, and other information. \n\nThe final part of the code defines two functions: `getContractsByKey` and two exports: `addresses` and `abis`. `getContractsByKey` takes a string argument `key` and returns an object that contains all the contracts for all networks organized by contract name and the value of the specified `key`. The `addresses` export is the result of calling `getContractsByKey` with the argument `'address'`, and the `abis` export is the result of calling `getContractsByKey` with the argument `'abi'`. \n\nThis code is likely used in the larger project to retrieve contract information and use it in other parts of the codebase. For example, the `addresses` and `abis` exports could be used to interact with the contracts on the various networks.\n## Questions: \n 1. What is the purpose of the `contracts.json` file being imported at the beginning of the code?\n- The `contracts.json` file is being imported to provide data for the creation of `contractsByChainIdAndNetwork` object.\n\n2. What is the purpose of the `getContractsByKey` function?\n- The `getContractsByKey` function is used to extract specific data from the `contractsByChainIdAndNetwork` object and return it in a specific format.\n\n3. Why does the code include a comment that says \"By the way, this function is terrible. Change it at your own peril\"?\n- The comment is a warning to other developers that the `getContractsByKey` function is not well-written and should be refactored with caution.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/contracts.md"}}],["718",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/index.ts)\n\nThis code exports various constants and variables that are used throughout the zoo project. \n\nThe `POOL_DENY` constant is an array of pool IDs that are not allowed to be used in the project. \n\nThe `AVERAGE_BLOCK_TIME_IN_SECS` constant is the average block time in seconds, which is used to avoid ongoing proposals past the displayed time. \n\nThe `MERKLE_ROOT` constant is the URL of the merkle root used for vesting. \n\nThe `NetworkContextName` constant is the name of the network context. \n\nThe `INITIAL_ALLOWED_SLIPPAGE` constant is the default allowed slippage in basis points. \n\nThe `DEFAULT_DEADLINE_FROM_NOW` constant is the default deadline from now, denominated in seconds. \n\nThe `BIG_INT_SECONDS_IN_WEEK` constant is the number of seconds in a week, represented as a big integer. \n\nThe `BIG_INT_ZERO` constant is a big integer with a value of zero. \n\nThe `ONE_BIPS` constant is one basis point, represented as a percent. \n\nThe `BIPS_BASE` constant is a big integer with a value of 10,000, which is the base for basis points. \n\nThe `ALLOWED_PRICE_IMPACT_LOW`, `ALLOWED_PRICE_IMPACT_MEDIUM`, and `ALLOWED_PRICE_IMPACT_HIGH` constants are used for warning states when the price impact exceeds a certain threshold. \n\nThe `PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN` constant is the minimum price impact without a fee that requires the user to confirm the transaction. \n\nThe `BLOCKED_PRICE_IMPACT_NON_EXPERT` constant is the maximum price impact for non-expert mode. \n\nThe `MIN_ETH` constant is the minimum amount of ETH that can be sent. \n\nThe `BETTER_TRADE_LESS_HOPS_THRESHOLD` constant is the threshold for better trades with less hops. \n\nThe `ZERO_PERCENT` and `ONE_HUNDRED_PERCENT` constants are used to represent zero and one hundred percent, respectively. \n\nThe `BLOCKED_ADDRESSES` constant is an array of blocked addresses. \n\nThe `ANALYTICS_URL` constant is an object that maps chain IDs to analytics URLs. \n\nThe `EIP_1559_ACTIVATION_BLOCK` constant is an object that maps chain IDs to EIP-1559 activation blocks. \n\nThese constants and variables are used throughout the zoo project to provide default values and other configuration options. For example, the `INITIAL_ALLOWED_SLIPPAGE` constant is used to set the default allowed slippage for trades, while the `BLOCKED_ADDRESSES` constant is used to block certain addresses from being used in the project.\n## Questions: \n 1. What is the purpose of the `POOL_DENY` array?\n- The `POOL_DENY` array contains a list of pool IDs that are denied for use in the project.\n\n2. What is the significance of the `MERKLE_ROOT` constant?\n- The `MERKLE_ROOT` constant contains the URL for the merkle root used for vesting in the project.\n\n3. What is the purpose of the `ANALYTICS_URL` object?\n- The `ANALYTICS_URL` object contains URLs for analytics pages for different chain IDs used in the project.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/index.md"}}],["719",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/ipfs.ts)\n\nThis code is responsible for exporting a default object that maps different ChainIds to a specific JSON file containing IPFS upload information. The `ChainId` object is imported from the `@zoolabs/zdk` library, which is likely a library specific to the larger zoo project. \n\nThe purpose of this code is to provide a way for the zoo project to easily access IPFS upload information for different ChainIds. The `localhostUploads` variable is imported from a separate file located at `../ipfs/localhost.json`, which likely contains the actual IPFS upload information. \n\nThe exported object uses the `ChainId` object as keys and the `localhostUploads` variable as values. This means that when the zoo project needs to access IPFS upload information for a specific ChainId, it can simply import this object and access the corresponding value. \n\nFor example, if the zoo project needs to access IPFS upload information for the `MAINNET` ChainId, it can import this object and access the `localhostUploads` value for the `MAINNET` key like so:\n\n```\nimport ipfsUploads from './path/to/this/file'\n\nconst mainnetUploads = ipfsUploads[ChainId.MAINNET]\n```\n\nOverall, this code provides a simple and organized way for the zoo project to access IPFS upload information for different ChainIds.\n## Questions: \n 1. What is the purpose of the `ChainId` import from `@zoolabs/zdk`?\n - The `ChainId` import is likely used to specify different chains for the `localhostUploads` object based on the current chain ID.\n\n2. What is the `localhost.json` file and where is it located?\n - The `localhost.json` file is likely a configuration file containing information about the local IPFS node. Its location is relative to the current file's location in the `../ipfs/` directory.\n\n3. Why is the `localhostUploads` object assigned to multiple chain IDs?\n - The `localhostUploads` object is likely used for testing purposes and is assigned to multiple chain IDs to ensure compatibility across different chains during development and testing.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/ipfs.md"}}],["720",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/moralis.ts)\n\nThe code defines a configuration object for the Moralis backend service, which is used in the larger zoo project. The configuration object contains two properties: `applicationID` and `serverURL`. The `applicationID` property is an object that maps different chain IDs to their respective application IDs. The `serverURL` property is an object that maps different chain IDs to their respective server URLs.\n\nThe `moralisConfig` function takes a `chainId` parameter and returns an object with the `applicationID` and `serverURL` properties for the specified chain ID. This function is used to retrieve the Moralis configuration for a specific chain ID, which is then used to connect to the Moralis backend service.\n\nFor example, if the `chainId` is `97`, the `moralisConfig` function will return an object with the `applicationID` and `serverURL` properties for the `97` chain ID. This object can then be used to connect to the Moralis backend service for the `97` chain.\n\nHere is an example usage of the `moralisConfig` function:\n\n```\nimport moralisConfig from 'zoo';\n\nconst chainId = 97;\nconst config = moralisConfig(chainId);\n\n// Use the config object to connect to the Moralis backend service\nMoralis.initialize(config.applicationID);\nMoralis.serverURL = config.serverURL;\n```\n\nOverall, this code provides a convenient way to manage the Moralis configuration for different chain IDs in the zoo project.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines a configuration object with application IDs and server URLs for different chain IDs, and exports a function that returns the configuration for a given chain ID.\n\n2. What are the possible values for `chainId` parameter in the `moralisConfig` function?\n - The possible values for `chainId` parameter are 1337, 97, and 56, which correspond to different blockchain networks.\n\n3. Why are some lines of code commented out?\n - Some lines of code are commented out to indicate that they are not currently being used, but may be used in the future or in a different context.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/moralis.md"}}],["721",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/token-lists/sushiswap-v2-unsupported.tokenlist.json)\n\nThis code represents a JSON file that contains information about a list of unsupported tokens for the SushiSwap V2 platform. The purpose of this file is to provide a reference for developers and users to identify which tokens are not supported by the platform. \n\nThe file contains several key pieces of information. The \"name\" field provides a human-readable name for the list. The \"timestamp\" field indicates when the list was last updated. The \"version\" field specifies the version of the list using semantic versioning. The \"tags\" field can be used to add additional metadata to the list. The \"logoURI\" field provides a link to an image that can be used to represent the list. The \"keywords\" field contains an array of keywords that can be used to search for the list. Finally, the \"tokens\" field contains an array of objects that represent the unsupported tokens. \n\nEach token object contains several fields. The \"name\" field provides a human-readable name for the token. The \"address\" field contains the Ethereum address of the token contract. The \"symbol\" field contains the ticker symbol for the token. The \"decimals\" field specifies the number of decimal places used by the token. The \"chainId\" field specifies the Ethereum chain ID on which the token is deployed. Finally, the \"logoURI\" field provides a link to an image that can be used to represent the token.\n\nDevelopers and users can use this file to check whether a particular token is supported by the SushiSwap V2 platform. For example, a developer building a trading bot could use this file to filter out unsupported tokens when selecting which tokens to trade. Similarly, a user could use this file to check whether a particular token can be traded on the platform before attempting to make a trade. \n\nOverall, this file serves as an important reference for developers and users of the SushiSwap V2 platform, providing a comprehensive list of unsupported tokens and their associated metadata.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a list of unsupported tokens for SushiSwap V2, including one token called \"Gold Tether\" with its address, symbol, and logo.\n\n2. What is the format of the logoURI?\n The logoURI is in IPFS format, indicating that the logo image is stored on the InterPlanetary File System.\n\n3. Are there any other tags besides the empty object?\n No, there are no other tags defined in this code.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/token-lists/sushiswap-v2-unsupported.tokenlist.md"}}],["722",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/types.ts)\n\nThis code defines two related data structures used in the larger zoo project. The first is an enum called `ConnectorNames` which lists the names of different types of connectors that can be used to interact with the zoo platform. These connectors include `Injected`, which refers to a browser extension like MetaMask, `WalletConnect`, which is a mobile wallet integration, and `BSC`, which is a reference to the Binance Smart Chain. \n\nThe second data structure is an object called `NETWORK_SYMBOL`. This object maps different `ChainId` values to their corresponding network symbols. `ChainId` is an enum defined in the `@zoolabs/zdk` library, which is imported at the top of the file. The `NETWORK_SYMBOL` object is defined using a TypeScript feature called an index signature, which allows for dynamic keys to be defined on an object. In this case, the keys are `ChainId` values and the values are strings representing the network symbols. \n\nThis code is likely used throughout the larger zoo project to provide a centralized way of referring to different types of connectors and network symbols. For example, other parts of the project may use the `ConnectorNames` enum to determine which type of connector to use for a given user. Similarly, the `NETWORK_SYMBOL` object may be used to display network information to users or to perform network-specific operations. \n\nHere is an example of how the `ConnectorNames` enum might be used in the larger project:\n\n```\nimport { ConnectorNames } from 'zoo';\n\nconst connector = getConnector(); // some function that returns a ConnectorNames value\nif (connector === ConnectorNames.Injected) {\n // use MetaMask or other injected connector\n} else if (connector === ConnectorNames.WalletConnect) {\n // use WalletConnect\n} else if (connector === ConnectorNames.BSC) {\n // use Binance Smart Chain\n} else {\n // handle other cases\n}\n```\n\nAnd here is an example of how the `NETWORK_SYMBOL` object might be used:\n\n```\nimport { ChainId, getNetwork } from '@zoolabs/zdk';\nimport { NETWORK_SYMBOL } from 'zoo';\n\nconst chainId = getNetwork().chainId; // get the current chain ID from the ZDK library\nconst networkSymbol = NETWORK_SYMBOL[chainId]; // look up the network symbol based on the chain ID\nconsole.log(`Current network symbol: ${networkSymbol}`);\n```\n## Questions: \n 1. What is the purpose of the `ConnectorNames` enum?\n - The `ConnectorNames` enum is used to define the different types of connectors that can be used to connect to the zoo project, including `Injected`, `WalletConnect`, and `BSC`.\n\n2. What is the `NETWORK_SYMBOL` constant used for?\n - The `NETWORK_SYMBOL` constant is used to map the `ChainId` enum values to their corresponding network symbols, such as `ETH` for the `MAINNET` and `RINKEBY` chains.\n\n3. Why are some of the `ChainId` values commented out in the `NETWORK_SYMBOL` constant?\n - Some of the `ChainId` values are commented out in the `NETWORK_SYMBOL` constant because they are not currently being used in the zoo project, but may be used in the future.","metadata":{"source":".autodoc/docs/markdown/core/src/constants/types.md"}}],["723",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/context/GifContext.tsx)\n\nThis code defines a React context and provider for managing a toggle between displaying GIFs and images. The `GifContext` is created using `React.createContext` and initialized with an `initialState` object. The `initialState` object is set to an empty object if the code is running on the server, and otherwise it is set to an object with a `gifMode` property that is either \"gif\" or \"image\", depending on whether the `localStorage` has a \"gifMode\" item. \n\nTwo actions are defined: `toggleGif` and `toggleImage`. Both actions set the \"gifMode\" item in `localStorage` to either \"gif\" or \"image\", respectively, and then dispatch an action object with a `type` property of either \"TOGGLE_GIFMODE\" or \"TOGGLE_IMAGEMODE\" and a `payload` property of either \"gif\" or \"image\". \n\nA reducer function is defined that takes a `state` object and an `action` object as arguments. The reducer function returns a new state object with the `gifMode` property set to the `payload` property of the action object, depending on the `type` property of the action object. \n\nFinally, a `GifProvider` component is defined that takes a `props` object as an argument. The `GifProvider` component uses `React.useReducer` to create a state object and a dispatch function based on the `reducer` function and `initialState`. The `GifProvider` component returns a `GifContext.Provider` component that wraps its children and provides the `state` object and `dispatch` function as values to the `GifContext`. \n\nThis code can be used in a larger project to manage a toggle between displaying GIFs and images. Other components in the project can use the `useGif` hook to access the `state` object and `dispatch` function from the `GifContext`. For example, a component that displays a list of images or GIFs could use the `state.gifMode` property to determine whether to display images or GIFs, and could use the `toggleGif` and `toggleImage` actions to update the `gifMode` property.\n## Questions: \n 1. What is the purpose of the `GifProvider` component?\n- The `GifProvider` component is used to provide a context for the `GifContext` and its state and dispatch values to be used by other components.\n\n2. What is the significance of the `localStorage` object in this code?\n- The `localStorage` object is used to store the `gifMode` value, which is retrieved and used as the initial state of the `GifContext` if the code is running in a browser environment.\n\n3. What is the difference between the `toggleGif` and `toggleImage` functions?\n- The `toggleGif` function sets the `gifMode` value in `localStorage` to \"gif\" and dispatches an action with a payload of \"gif\", while the `toggleImage` function sets the `gifMode` value in `localStorage` to \"image\" and dispatches an action with a payload of \"image\". These functions are used to toggle between two different modes for displaying images or gifs.","metadata":{"source":".autodoc/docs/markdown/core/src/context/GifContext.md"}}],["724",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/data/events.json)\n\nThis code is a JSON file containing information about upcoming events related to the zoo project. The file contains an array of objects, with each object representing a single event. Each event object has several properties, including an ID, title, description, date, time, and location.\n\nThe purpose of this code is to provide a centralized location for storing and accessing information about upcoming events related to the zoo project. This information can be used by developers, project managers, and other stakeholders to plan and coordinate their work around these events.\n\nFor example, a developer working on a feature related to NFT Animals may want to know when the next Animal Party is scheduled so they can coordinate their work around that event. They can access this information from the JSON file and plan accordingly.\n\nSimilarly, a project manager may want to use this information to plan marketing campaigns around these events or to ensure that key stakeholders are available to attend important meetings or presentations.\n\nOverall, this code serves as a valuable resource for anyone involved in the zoo project, providing a centralized location for important event information that can be easily accessed and used to plan and coordinate work.\n## Questions: \n 1. What is the purpose of this code?\n This code contains information about two events related to the ZOO project, including their titles, descriptions, dates, times, and locations.\n\n2. What is the format of the data being used in this code?\n The data is in JSON format, with each event represented as an object containing key-value pairs for its various attributes.\n\n3. What other types of information might be included in the ZOO project?\n It is unclear from this code what other types of information or functionality might be included in the ZOO project beyond events and NFT creatures/eggs. Further exploration of the project's code and documentation would be necessary to determine this.","metadata":{"source":".autodoc/docs/markdown/core/src/data/events.md"}}],["725",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/data/market.json)\n\nThis code defines a list of dictionaries, each representing an animal in a zoo. Each dictionary contains four key-value pairs: \"name\", \"image\", \"usdz\", and \"glb\". \n\nThe \"name\" key holds a string representing the name of the animal. The \"image\" key holds a string representing the file path to an image of the animal. The \"usdz\" key holds a string representing the file path to a USDZ 3D model of the animal, and the \"glb\" key holds a string representing the file path to a GLB 3D model of the animal.\n\nThis code is likely used in a larger project that involves displaying information about animals in a zoo, including images and 3D models. The list of dictionaries could be used to populate a database or to generate HTML pages dynamically. For example, the following Python code could be used to loop through the list and generate HTML code to display each animal's name, image, and 3D model:\n\n```\nfor animal in zoo:\n html = f\"{animal['name']}
\"\n html += f\"\"\n html += f\"
SLP Analytics
\nThis page displays analytics for the SushiSwap Liquidity Pair (SLP).
\nWelcome to the dashboard
\nThis is where you can view all your analytics data.
\n\n
\n );\n}\n\nexport default App;\n```\n\nIn this example, the `InfoCard` component is used twice to display different types of information. The first `InfoCard` displays the total sales amount, while the second `InfoCard` displays the number of new users.\n## Questions: \n 1. What is the purpose of the `formatNumber` function imported from the `functions` module?\n- The code does not use the `formatNumber` function, so a smart developer might wonder if it is necessary to import it or if it can be removed.\n\n2. What is the significance of the `InfoCardProps` interface?\n- The `InfoCardProps` interface defines the expected props for the `InfoCard` component, including the `text` and `number` props. A smart developer might wonder if there are any other props that can be passed to this component.\n\n3. What is the purpose of the `bg-dark-900` and `border-dark-700` CSS classes?\n- These CSS classes are used to style the `InfoCard` component, but a smart developer might wonder if they are part of a larger CSS framework or if they are custom classes defined within the project.","metadata":{"source":".autodoc/docs/markdown/core/src/features/analytics/Bar/InfoCard.md"}}],["736",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/ChartCard.tsx)\n\nThe `ChartCard` component is responsible for rendering a card that displays a chart along with some related information. The component takes in several props, including `header`, `subheader`, `figure`, `change`, `chart`, `currentTimespan`, `timespans`, and `setTimespan`. \n\nThe `header` and `subheader` props are used to display some text information at the top of the card. The `figure` and `change` props are used to display a numerical value and its change over the past 24 hours, respectively. The `chart` prop is used to display a line graph, and the `currentTimespan`, `timespans`, and `setTimespan` props are used to allow the user to switch between different time spans for the chart.\n\nThe component is implemented using JSX and Tailwind CSS classes. The `classNames` function is imported from a `functions` module, and is used to conditionally apply different CSS classes based on the state of the component. The `formatNumber` function is also imported from the `functions` module, and is used to format the `figure` prop as a string with commas and an optional decimal point.\n\nThe `ColoredNumber` component is imported from a `ColoredNumber` module, and is used to display the `change` prop as a colored number with a percentage sign. The `LineGraph` component is imported from a `LineGraph` module, and is used to display the `chart` prop as a line graph with a gradient stroke.\n\nOverall, the `ChartCard` component provides a reusable way to display a chart with related information in a visually appealing and interactive way. It can be used in a larger project to display various types of data, such as financial data or user analytics. Here is an example of how the component might be used:\n\n```\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the result of the `type.getData` function, which is called with four arguments: `exchange`, `exchange1d`, `exchange2d`, and `dayData`. This means that the function will only be re-executed if one of these arguments changes.\n\n2. What is the significance of the `DashboardChartCardProps` interface?\n- The `DashboardChartCardProps` interface defines the props that can be passed to the `DashboardChartCard` component. In this case, it specifies that the `type` prop must be either `'liquidity'` or `'volume'`.\n\n3. What is the purpose of the `useActiveWeb3React` hook in this code?\n- The `useActiveWeb3React` hook is used to get the `chainId` value, which is then passed as an argument to several other hooks (`useBlock`, `useFactory`, and `useDayData`). This allows these hooks to retrieve data specific to the current blockchain network.","metadata":{"source":".autodoc/docs/markdown/core/src/features/analytics/Dashboard/DashboardChartCard.md"}}],["739",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Dashboard/DashboardTabs.tsx)\n\nThis code is a React component that renders a set of tabs for a dashboard view. The component imports a `Tabs` component from a file located at `./../Tabs`. The `Tabs` component is likely a reusable component that renders a set of tabs based on an array of tab objects. \n\nThe `DashboardTabs` component defines an array of tab objects called `tabs`. Each tab object has a `name` property and a `type` property. The `name` property is a string that represents the name of the tab, and the `type` property is a string that represents the type of data that the tab displays. \n\nThe `DashboardTabs` component takes two props: `currentType` and `setType`. The `currentType` prop is a string that represents the currently selected tab type, and the `setType` prop is a function that updates the currently selected tab type. \n\nThe `DashboardTabs` component renders the `Tabs` component and passes in the `tabs` array, `currentType`, and `setType` props. This causes the `Tabs` component to render a set of tabs based on the `tabs` array, with the currently selected tab highlighted based on the `currentType` prop. When a user clicks on a tab, the `setType` function is called with the `type` property of the clicked tab object as an argument, which updates the `currentType` prop and causes the `Tabs` component to re-render with the newly selected tab highlighted.\n\nThis component can be used in a larger project to render a set of tabs for a dashboard view that allows users to switch between different types of data. For example, in a cryptocurrency trading platform, the `Top Farms` tab could display a list of the top liquidity pools, the `Top Pairs` tab could display a list of the top trading pairs, and the `Top Tokens` tab could display a list of the top tokens by market cap. The `DashboardTabs` component could be used to render these tabs and allow users to switch between them to view different types of data. \n\nExample usage:\n\n```\nimport DashboardTabs from './DashboardTabs'\n\nfunction Dashboard() {\n const [currentType, setCurrentType] = useState('pools')\n\n function setType(type) {\n setCurrentType(type)\n }\n\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `Tabs` import and where is it located?\n- The `Tabs` import is used in this file and is located in a file located at `./../Tabs`.\n2. What is the expected data structure of the `tabs` array?\n- The `tabs` array is expected to contain objects with a `name` property (string) and a `type` property (string).\n3. What is the expected input for the `DashboardTabs` function and what does it return?\n- The `DashboardTabs` function expects two props: `currentType` (string) and `setType` (function). It returns a JSX element that renders the `Tabs` component with the `tabs`, `currentType`, and `setType` props passed in.","metadata":{"source":".autodoc/docs/markdown/core/src/features/analytics/Dashboard/DashboardTabs.md"}}],["740",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Farms/FarmList.tsx)\n\nThe `FarmList` component is a React component that renders a table of farming pools. It takes an array of `pools` as a prop, where each pool is an object containing information about the pool's pair, rewards, liquidity, and APR. The component uses several other components and hooks to render the table, including `Table`, `DoubleCurrencyLogo`, `useCurrency`, `Image`, `ColoredNumber`, `formatNumber`, `formatNumberScale`, and `formatPercent`.\n\nThe `FarmListName` component is a subcomponent of `FarmList` that renders the name and logo of a pool's pair. It takes a `pair` prop, which is an object containing information about the pair's tokens, name, and type. It uses the `useCurrency` hook to get the currency objects for the pair's tokens, and the `DoubleCurrencyLogo` component to render the pair's logo.\n\nThe `Rewards` component is another subcomponent of `FarmList` that renders the rewards for a pool. It takes a `rewards` prop, which is an array of objects containing information about each reward's icon, token, and reward per day. It uses the `Image` component to render each reward's icon, and the `formatNumber` function to format each reward's reward per day.\n\nThe `FarmList` component uses the `useMemo` hook to memoize the `defaultSortBy` and `columns` variables. `defaultSortBy` is an object that specifies the default sorting for the table, and `columns` is an array of objects that specify the columns of the table. Each column object has a `Header` property that specifies the column header, an `accessor` property that specifies the data accessor for the column, a `Cell` property that specifies the cell renderer for the column, and an `align` property that specifies the alignment of the column. The `apr` column also has a `sortType` property that specifies a custom sorting function based on the annual APR.\n\nFinally, the `FarmList` component renders the `Table` component with the `columns` and `data` props, and the `defaultSortBy` prop if specified. If `pools` is falsy, the component renders nothing.\n\nThis component can be used to display a list of farming pools with their APR, liquidity, and rewards. It can be customized by changing the `columns` array to add or remove columns, or by changing the `Cell` property of each column to customize the rendering of each cell. It can also be styled using CSS classes or inline styles. Here is an example usage of the `FarmList` component:\n\n```jsx\nimport FarmList from './FarmList'\n\nconst pools = [\n {\n pair: {\n token0: {\n id: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',\n },\n token1: {\n id: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',\n },\n name: 'UNI-ETH',\n type: 'Sushi Farm',\n },\n rewards: [\n {\n icon: '/tokens/uni.png',\n token: 'UNI',\n rewardPerDay: 1000,\n },\n {\n icon: '/tokens/sushi.png',\n token: 'SUSHI',\n rewardPerDay: 500,\n },\n ],\n liquidity: 1000000,\n apr: {\n annual: 1000,\n monthly: 100,\n daily: 10,\n },\n },\n // more pools...\n]\n\nfunction App() {\n return \n
\n )\n}\n```\n\nIn this example, the Tabs component is passed an array of three tabs with different names and types. The currentType state variable is initialized to 'tab1', so the first tab is selected by default. The content for each tab is conditionally rendered based on the currentType variable. When the user clicks on a different tab, the setType function is called with the new type, causing the component to re-render with the new tab selected and the corresponding content displayed.\n## Questions: \n 1. What is the purpose of the `Tabs` component?\n- The `Tabs` component is used to render a set of tabs based on the `tabs` prop and handle tab selection based on the `currentType` and `setType` props.\n\n2. What is the `classNames` function and where is it imported from?\n- The `classNames` function is imported from a file located at `../../functions` and is used to conditionally concatenate CSS class names based on the provided arguments.\n\n3. What is the expected shape of the `tabs` prop?\n- The `tabs` prop is expected to be an array of objects, where each object represents a tab and has a `name` and `type` property.","metadata":{"source":".autodoc/docs/markdown/core/src/features/analytics/Tabs.md"}}],["747",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/CurrencyCard.tsx)\n\nThe code above defines a React component called `CurrencyCard`. This component is responsible for rendering a card that displays information about a cryptocurrency token. The component takes two props: `token` and `symbol`. The `token` prop is a string that represents the token's unique identifier, while the `symbol` prop is a string that represents the token's symbol.\n\nThe component imports two things: `CurrencyLogo` and `useCurrency`. `CurrencyLogo` is a custom component that renders an SVG logo for a given cryptocurrency. `useCurrency` is a custom hook that takes a token's unique identifier and returns an object that contains information about the token, such as its name, symbol, and logo URL.\n\nThe `CurrencyCard` component renders a div element with a dark background color and rounded corners. Inside this div, there is another div element that contains two child elements: a `CurrencyLogo` component and a div element that displays the token's symbol. The `CurrencyLogo` component is passed the `currency` object returned by the `useCurrency` hook, as well as a `size` prop that determines the size of the logo.\n\nThis component can be used in a larger project that displays information about cryptocurrency tokens. For example, it could be used in a dashboard that displays the user's portfolio of tokens. The `CurrencyCard` component could be used to render a card for each token in the user's portfolio, displaying the token's logo and symbol. \n\nHere is an example of how the `CurrencyCard` component could be used in a larger project:\n\n```\nimport CurrencyCard from './components/CurrencyCard'\n\nfunction Portfolio() {\n const tokens = ['eth', 'btc', 'uni']\n\n return (\n Tab 1 content
}\n {currentType === 'tab2' && Tab 2 content
}\n {currentType === 'tab3' && Tab 3 content
}\n \n {tokens.map((token) => (\n
\n )\n}\n```\n\nIn this example, the `Portfolio` component renders a list of `CurrencyCard` components, one for each token in the `tokens` array. The `key` prop is set to the token's unique identifier, and the `symbol` prop is set to the token's symbol in uppercase letters.\n## Questions: \n 1. What is the purpose of the `CurrencyCard` component?\n- The `CurrencyCard` component is used to display a token's symbol and logo.\n\n2. What is the `useCurrency` hook and where is it defined?\n- The `useCurrency` hook is used to retrieve a currency object based on a given token. It is defined in the `Tokens` module located in the `hooks` directory.\n\n3. What styling classes are applied to the `CurrencyCard` component?\n- The `CurrencyCard` component has a `p-3` padding, a `rounded` border, and a `bg-dark-900` background color. It also uses flexbox to horizontally align the logo and symbol, and has a hidden `text-lg` element for the symbol on small screens.","metadata":{"source":".autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/CurrencyCard.md"}}],["748",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/TokenChartCard.tsx)\n\nThe `TokenChartCard` component is used to display a chart card that shows either the liquidity or volume of a specific token. The component takes in three props: `type`, `name`, and `token`. The `type` prop specifies whether the chart should display liquidity or volume data. The `name` prop is a string that represents the name of the token. The `token` prop is a string that represents the token's address.\n\nThe `TokenChartCard` component uses several hooks from the `graph` and `hooks` services to fetch data needed to display the chart. The `useActiveWeb3React` hook is used to get the current chain ID. The `useBlock` hook is used to get the block number for the current day, as well as the block numbers for the previous two days. The `useTokens` hook is used to get information about the token, such as its liquidity and volume. The `useNativePrice` hook is used to get the native price of the token. The `useDayData` hook is used to get daily data for the token.\n\nThe `types` object is used to define the header and data for each chart type. The `getData` function is used to calculate the figure, change, and chart data for the chart. The `figure` represents the current value of the liquidity or volume. The `change` represents the percentage change in liquidity or volume over the past day or two days. The `chart` represents an array of data points that can be used to display a chart.\n\nThe `useState` hook is used to keep track of the current timespan for the chart. The `chartTimespans` array is used to define the available timespans for the chart.\n\nThe `data` variable is calculated using the `useMemo` hook. The `data` variable is an object that contains the figure, change, and chart data for the chart. The `ChartCard` component is used to display the chart card with the data.\n\nOverall, the `TokenChartCard` component is a reusable component that can be used to display a chart of the liquidity or volume of a specific token. The component uses several hooks to fetch data needed to display the chart, and the `types` object is used to define the header and data for each chart type. The `useState` hook is used to keep track of the current timespan for the chart, and the `ChartCard` component is used to display the chart card with the data.\n## Questions: \n 1. What does this code do?\n- This code exports a React component called `TokenChartCard` that renders a chart card based on the `type`, `name`, and `token` props passed to it. The chart displays either liquidity or volume data for the specified token over a specified time period.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies imported from other files in the project, including `useBlock`, `useDayData`, `useNativePrice`, `useTokens`, and `useActiveWeb3React`. These dependencies are used to fetch data from external APIs and the blockchain.\n\n3. What is the purpose of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the result of calling the `type.getData` function with the current values of several variables. This helps to optimize performance by avoiding unnecessary re-renders of the component when these variables change.","metadata":{"source":".autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TokenChartCard.md"}}],["749",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/TopFarmsList.tsx)\n\nThis code defines a React component called `TopFarmsList` that renders a table of top farms. The component takes a single prop called `farms`, which is an array of objects representing each farm. Each farm object has three properties: `pair`, `roi`, and `rewards`. The `pair` property is an object with two properties, `token0` and `token1`, each of which has an `id` and a `symbol`. The `roi` property is a number representing the return on investment for the farm, and the `rewards` property is an array of objects, each of which has an `icon` property that is a JSX element.\n\nThe `TopFarmsList` component uses the `useMemo` hook to define a `columns` array that is used to render the table. The `columns` array has three objects, each of which represents a column in the table. The first column is called \"Token Pair\" and displays the farm's pair of tokens as a `FarmListname` component. The `FarmListname` component takes a single prop called `pair`, which is an object with two properties, `token0` and `token1`, each of which has an `id` and a `symbol`. The `FarmListname` component uses the `useCurrency` hook to get the currency object for each token and renders a `DoubleCurrencyLogo` component with the two currencies and their symbols. The second column is called \"ROI (1Y)\" and displays the farm's return on investment as a percentage using the `formatPercent` function. The third column is called \"Rewards\" and displays the farm's rewards as a list of icons.\n\nFinally, the `TopFarmsList` component renders a `Table` component with the `columns` array and the `farms` prop as the data. The `Table` component is conditionally rendered using the `&&` operator to only render if `farms` is truthy. The `Table` component also has a `defaultSortBy` prop that sorts the table by the \"ROI (1Y)\" column in descending order.\n\nThis code is used to display a table of top farms in a larger project, likely a decentralized finance (DeFi) application. The `TopFarmsList` component could be used in a dashboard or analytics page to show users which farms are performing the best. The `FarmListname` component could also be reused in other parts of the application to display a pair of tokens with their symbols and logos.\n## Questions: \n 1. What is the purpose of the `TopFarmsList` component?\n- The `TopFarmsList` component is used to render a table of top farms, including their token pair, ROI, and rewards.\n\n2. What is the `FarmListName` component used for?\n- The `FarmListName` component is used to render the name of a farm's token pair, including the logos of the two currencies and their symbols.\n\n3. What libraries and hooks are being used in this code?\n- The code is importing `useMemo` from the `react` library, and is also using the `Table` component from a custom component file. Additionally, it is using the `useCurrency` hook and the `formatPercent` function from custom hook and function files, respectively.","metadata":{"source":".autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TopFarmsList.md"}}],["750",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/TransactionList.tsx)\n\nThe code is a React component that renders a table of transaction data. The component takes in an array of transaction objects as a prop, and each transaction object contains information about the transaction, such as the symbols being swapped, the incoming and outgoing amounts, the address, and the time. \n\nThe component uses the `useTable`, `usePagination`, and `useSortBy` hooks from the `react-table` library to create a paginated and sortable table. The `columns` variable is an array of objects that define the columns of the table. Each object has a `Header` property that specifies the column header, an `accessor` property that specifies the data field to display in the column, and a `Cell` property that specifies how to render the data in the cell. The `align` property specifies the alignment of the column content.\n\nThe `Table` function is a helper function that takes in the `columns` and `data` props and returns the table markup. The `getTableProps`, `getTableBodyProps`, `headerGroups`, `prepareRow`, `rows`, `page`, `nextPage`, `previousPage`, `canPreviousPage`, `canNextPage`, `setPageSize`, `pageIndex`, and `pageSize` variables are all provided by the `useTable` hook and are used to render the table.\n\nThe `TransactionList` function is the main component that renders the table using the `Table` function and the `columns` and `transactions` props. The `transactions` prop is an array of transaction objects that are passed to the `data` prop of the `useTable` hook. If there are no transactions, an empty array is passed instead.\n\nThe `Cell` properties of the `Type`, `Value`, `Address`, and `Time` columns use helper functions from the `functions` module to format the data. The `formatNumber` function formats the number with commas and rounds it to two decimal places. The `shortenAddress` function shortens the Ethereum address to the first and last four characters. The `formatDateAgo` function formats the date as a relative time string (e.g. \"2 hours ago\").\n\nOverall, this component provides a reusable and customizable table for displaying transaction data in a paginated and sortable format. It can be used in various parts of the larger project that require transaction data to be displayed in a table format.\n## Questions: \n 1. What is the purpose of the `TransactionList` component?\n- The `TransactionList` component is used to display a table of transaction data, including the type of transaction, its value, incoming and outgoing amounts, address, and time.\n\n2. What libraries are being used in this code?\n- The code is using several libraries, including `react`, `react-table`, and `@heroicons/react/outline`.\n\n3. What is the purpose of the `Table` function?\n- The `Table` function is a helper function used by the `TransactionList` component to render the table of transaction data. It uses the `useTable`, `useSortBy`, and `usePagination` hooks from the `react-table` library to handle sorting and pagination of the data.","metadata":{"source":".autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TransactionList.md"}}],["751",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/TokenList.tsx)\n\nThe `TokenList` module is a React component that renders a table of token data. It takes in an array of `Token` objects, which contain information about a token's address, symbol, liquidity, volume, price, and price change over the past day and week. The component also accepts an optional array of `TokenListColumnType` values, which determine which columns are displayed in the table. \n\nThe `TokenList` component uses the `Table` component from `../../../components/Table` to render the table. The `Table` component takes in an array of `Column` objects, which define the columns of the table. The `TokenListColumns` object defines the columns that can be displayed in the table, including the token name, price, liquidity, price change, volume change, and a line graph of the token's price over the past week. \n\nThe `TokenListName` component is used to render the token name column. It takes in a `token` object and uses the `useCurrency` hook from `../../../hooks/Tokens` to get the currency associated with the token's address. It then renders the currency logo and token symbol in a `div` element. \n\nThe `TokenListColumns` object defines the other columns of the table. The `price`, `liquidity`, `priceChange`, and `volumeChange` columns use the `formatNumber` and `formatPercent` functions from `../../../functions` to format the data. The `lastWeekGraph` column renders a line graph of the token's price over the past week using the `LineGraph` component from `../../../components/LineGraph`. \n\nOverall, the `TokenList` component provides a flexible and customizable way to display token data in a table format. It can be used in the larger project to display token data in various contexts, such as on a dashboard or analytics page. \n\nExample usage:\n\n```\nimport TokenList from './TokenList'\n\nconst tokens = [\n {\n token: {\n address: '0x123abc',\n symbol: 'ABC',\n },\n liquidity: 1000,\n volume1d: 500,\n volume1w: 3000,\n price: 1.23,\n change1d: 0.05,\n change1w: -0.1,\n },\n // more token objects...\n]\n\nconst enabledColumns = ['name', 'price', 'liquidity', 'priceChange', 'volumeChange', 'lastWeekGraph']\n\nfunction MyComponent() {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `TokenList` component?\n- The `TokenList` component is used to display a table of token data, including columns for name, price, liquidity, price change, volume change, and a line graph of the token's performance over the last week.\n\n2. What is the `Token` interface used for?\n- The `Token` interface defines the shape of an object that contains data about a token, including its address, symbol, liquidity, volume, price, and price change over the last day and week.\n\n3. What is the `TokenListColumns` object used for?\n- The `TokenListColumns` object is a mapping of column names to their respective configurations, including the column header, data accessor, cell renderer, and sorting behavior. It is used to define the columns that should be displayed in the `TokenList` table.","metadata":{"source":".autodoc/docs/markdown/core/src/features/analytics/Tokens/TokenList.md"}}],["752",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/BalancePanel.tsx)\n\nThe `BalancePanel` component is a React functional component that displays the user's wallet and BentoBox balances for a specific currency. It is part of the larger `zoo` project and is used in the limit order feature of the application.\n\nThe component imports several hooks and functions from other files in the project. These include `useDerivedLimitOrderInfo` and `useLimitOrderActionHandlers` from the `limit-order/hooks` file, `maxAmountSpend` from the `functions` file, and `setFromBentoBalance` from the `limit-order/actions` file. It also imports various components from the `components` folder and external libraries such as `react-redux` and `@lingui/react`.\n\nThe component renders a `div` element with two child `div` elements, each displaying the balance for a specific currency. The first child `div` displays the balance in BentoBox, while the second child `div` displays the balance in the user's wallet. Each child `div` contains two `Typography` components, one displaying the label (\"In Bento:\" or \"In Wallet:\") and the other displaying the balance amount and currency symbol. The balance amount is obtained from the `walletBalances` and `bentoboxBalances` objects, which are derived from the `useDerivedLimitOrderInfo` hook. The currency symbol is obtained from the `currencies` object, which is also derived from the same hook.\n\nThe `handleMaxInput` function is defined using the `useCallback` hook and is called when the user clicks on the balance amount in either child `div`. The function takes a boolean argument `bento` that determines whether the balance amount is from BentoBox or the user's wallet. If `bento` is true, the function sets the input field value to the exact BentoBox balance amount and dispatches an action to set the `fromBentoBalance` flag to true. If `bento` is false, the function sets the input field value to the maximum spendable amount from the user's wallet (obtained using the `maxAmountSpend` function) and dispatches an action to set the `fromBentoBalance` flag to false.\n\nOverall, the `BalancePanel` component provides a simple and intuitive way for users to view and select their balance amounts for a specific currency when making a limit order.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React functional component called `BalancePanel` that displays the user's wallet and Bento balances for a specific currency, and allows the user to input the maximum amount they want to spend.\n\n2. What other components or modules does this code depend on?\n- This code imports several modules from other files in the `limit-order`, `swap`, and `components` directories, as well as from external libraries such as `react-redux` and `@lingui/react`.\n\n3. What is the significance of the `useCallback` hook in this code?\n- The `useCallback` hook is used to memoize the `handleMaxInput` function, which is passed as a prop to child components. This can improve performance by preventing unnecessary re-renders of child components when the function reference changes.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/BalancePanel.md"}}],["753",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/ConfirmLimitOrderModal.tsx)\n\nThe `ConfirmLimitOrderModal` component is a React functional component that renders a modal for confirming a limit order. The modal is composed of two parts: the top content and the bottom content. The top content displays the details of the limit order, including the amount of input currency to be paid, the exchange rate, and the amount of output currency to be received. The bottom content displays additional details of the limit order, including the minimum amount of output currency to be received, the order expiration time, and the recipient address. The bottom content also includes a button to confirm the limit order.\n\nThe `ConfirmLimitOrderModal` component imports several functions and hooks from other files in the project. The `formatNumber` and `shortenAddress` functions are used to format numbers and addresses, respectively. The `useActiveWeb3React` and `useUSDCPrice` hooks are used to retrieve the active Web3 provider and the current USDC price, respectively. The `useDerivedLimitOrderInfo` and `useLimitOrderState` hooks are used to retrieve the derived limit order information and the limit order state, respectively.\n\nThe `ConfirmLimitOrderModal` component also imports several components from other files in the project. The `Button` component is used to render the confirm button. The `ConfirmationModalContent` component is used to render the modal content. The `CurrencyLogo` component is used to render the logos of the input and output currencies. The `Modal` component is used to render the modal.\n\nThe `ConfirmLimitOrderModal` component exports itself as the default export of the file, which can be imported and used in other files in the project.\n\nExample usage:\n\n```jsx\nimport ConfirmLimitOrderModal from \"./ConfirmLimitOrderModal\";\n\nfunction MyComponent() {\n const [open, setOpen] = useState(false);\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleConfirm = () => {\n // Handle limit order confirmation\n };\n\n return (\n <>\n \n \n USD}\n />\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code and where is it used in the project?\n- This code defines a React component called `CurrencyInput` that renders a custom input field with a numeric value and optional max button and error message. It is likely used in a form or input section of the project.\n\n2. What external dependencies does this code rely on?\n- This code imports several external dependencies including `React`, `Button`, `Input`, `classNames`, `t`, and `useLingui`. These dependencies are likely defined in other files or packages within the project.\n\n3. What are the required and optional props for the `CurrencyInput` component?\n- The `CurrencyInput` component requires an `id`, `showMaxButton` boolean, `onUserInput` function, and `value` string prop. It also accepts an optional `error` string and `endAdornment` ReactNode prop, as well as an optional `onMax` function prop if `showMaxButton` is true.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/CurrencyInput.md"}}],["755",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/CurrencyInputPanel.tsx)\n\nThe code defines a React component called `CurrencyInputPanel` that renders a panel for inputting currency values. The component takes in several props, including an `id` string, an optional `error` string, a `className` string, and several React nodes for adornments and input components. \n\nThe component renders a div with the given `id`, and conditionally renders the `topAdornment`, `bottomAdornment`, and `error` props if they are provided. The main content of the panel is a flex container with two child divs: one for the `selectComponent` prop and one for the `inputComponent` prop. The `selectComponent` is rendered in a div that takes up the full width of the container, while the `inputComponent` is rendered in a div that takes up 2/5 of the width on larger screens. \n\nThe `classNames` function is used to conditionally apply CSS classes to the container and child divs based on the `className` and `inputComponent` props. The `ExclamationIcon` component from the `@heroicons/react/solid` library is used to render an error icon next to the `error` message if it is provided. \n\nThis component could be used in a larger project to provide a consistent UI for inputting currency values. Developers could pass in different `selectComponent` and `inputComponent` props to customize the appearance and functionality of the panel. The `error` prop could be used to display validation errors to the user. Here is an example of how the component could be used:\n\n```\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code and where is it used in the project?\n- This code defines a React component called `CurrencySelect` that renders a button for selecting a currency, and includes a modal for searching and selecting a currency. It is likely used in various parts of the project where currency selection is needed.\n\n2. What props does the `CurrencySelect` component accept and what are their types?\n- The `CurrencySelect` component accepts several props including `currency`, `otherCurrency`, `showCommonBases`, `onSelect`, `disabled`, `label`, `currencyList`, `includeNativeCurrency`, and `allowManageTokenList`. Their types are defined in the `CurrencySelectProps` interface.\n\n3. What external libraries and components are used in this code?\n- This code imports several external libraries and components including `React`, `ChevronDownIcon` from `@heroicons/react/solid`, `Currency` from `@zoolabs/zdk`, `CurrencyLogo` from `../../../components/CurrencyLogo`, `CurrencySearchModal` from `../../../modals/SearchModal/CurrencySearchModal`, `Lottie` from `lottie-react`, and `classNames` and `t` from `@lingui/macro`. It also includes an animation data file called `select-coin.json`.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/CurrencySelect.md"}}],["757",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/LimitOrderButton.tsx)\n\nThe `LimitOrderButton` component is a React functional component that renders a button for creating a limit order. The component imports various hooks and components from different files in the project. \n\nThe component takes in a `currency` prop, which is an instance of the `Currency` class from the `@zoolabs/zdk` library. The `color` prop is used to set the color of the button. \n\nThe component uses the `useActiveWeb3React` hook to get the current user's account, chain ID, library, and connector. It also uses the `useLimitOrderState` and `useDerivedLimitOrderInfo` hooks to get the current limit order state and derived limit order information, respectively. \n\nThe component uses the `useLimitOrderApproveCallback` hook to get the current approval state of the limit order and to handle the approval process. It also uses the `useApproveCallback` hook to handle token approvals. \n\nThe component renders different buttons based on the current state of the limit order and token approvals. If the user is not connected to a wallet, the component renders a button to connect the wallet. If there is an input error, the component renders a disabled button with the error message. If the token needs to be approved, the component renders a button to approve the token. If the limit order needs to be approved, the component renders a button to approve the limit order. If the token has been approved and the user needs to deposit the token into BentoBox, the component renders a button to deposit the token. If the user has already deposited the token into BentoBox, the component renders a button to create the limit order. \n\nThe `handler` function is called when the user clicks the button to create the limit order. It creates a new `LimitOrder` instance from the `@zoolabs/zdk` library and signs the order with the user's provider. If the order is successfully sent, a popup is added to the UI to indicate that the limit order has been created. \n\nOverall, the `LimitOrderButton` component provides a user-friendly interface for creating limit orders and handles the approval and deposit processes for the user. It can be used in a larger project that involves limit orders and token swaps. \n\nExample usage:\n\n```jsx\nimport LimitOrderButton from \"./LimitOrderButton\";\n\nfunction MyComponent() {\n const currency = new Currency(\"ETH\");\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `LimitOrderButton` component?\n- The `LimitOrderButton` component is used to handle the creation of a limit order and the necessary approvals and deposits.\n\n2. What external libraries and hooks are being used in this code?\n- The code is using external libraries and hooks such as `@zoolabs/zdk`, `@lingui/macro`, `react-redux`, and `useActiveWeb3React`.\n\n3. What is the role of the `useLimitOrderApproveCallback` hook?\n- The `useLimitOrderApproveCallback` hook is used to handle the approval of a limit order and returns the approval state, fallback method, permit status, and functions to approve and execute the order.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/LimitOrderButton.md"}}],["758",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/LimitPriceInputPanel.tsx)\n\nThe `LimitPriceInputPanel` component is a React functional component that renders a panel for inputting a limit price for a limit order. The component imports several functions and hooks from other files in the project, including `setLimitPrice` action creator, `useLimitOrderState` and `useDerivedLimitOrderInfo` hooks, and `Input` component. \n\nThe component takes a single prop `onBlur` which is a callback function that is called when the input field loses focus. The component renders a container `div` with two child `div`s. The first child `div` contains a label and a button that sets the input value to the current market price. The second child `div` contains an input field and a label that displays the exchange rate between the input and output currencies. \n\nThe component uses the `useLimitOrderState` hook to get the current limit price value from the Redux store and the `useDerivedLimitOrderInfo` hook to get the current exchange rate and currency symbols for the input and output currencies. The component also uses the `useDispatch` hook to get the dispatch function from the Redux store and the `useLingui` hook to get the internationalization function from the Lingui library. \n\nThe `handleInput` function is a callback function that is called when the input field value changes. It dispatches the `setLimitPrice` action with the new value and calls the `onBlur` callback function with the same value. The `disabled` variable is a boolean that is true if either the input or output currency is not set.\n\nThe `Input.Numeric` component is a custom input field component that only allows numeric input. It takes several props including `disabled`, `className`, `placeholder`, `id`, `value`, `onUserInput`, and `onBlur`. The `value` prop is set to the current limit price value from the Redux store. The `onUserInput` prop is set to the `handleInput` function. The `onBlur` prop is set to a callback function that calls the `onBlur` prop passed to the component.\n\nThis component can be used in a larger project that involves trading cryptocurrencies. It provides a user interface for inputting a limit price for a limit order and displays the current exchange rate between the input and output currencies. The component can be customized by passing different props to the `Input.Numeric` component or by modifying the CSS classes of the container `div`.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `LimitPriceInputPanel` that renders an input panel for setting a limit price for a trading order.\n\n2. What external dependencies does this code have?\n- This code imports several modules from external packages, including `react`, `react-redux`, and `@lingui/react`.\n\n3. What props does the `LimitPriceInputPanel` component expect?\n- The `LimitPriceInputPanel` component expects a single prop called `onBlur`, which is a function that takes a string value as its argument and has no return value.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/LimitPriceInputPanel.md"}}],["759",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/MyOrders.tsx)\n\nThis code defines a React functional component called `MyOrders` that renders a link to the user's open orders page. The component imports several dependencies, including `React`, `Badge`, `ClipboardListIcon`, `NavLink`, `t`, `useLimitOrders`, and `useLingui`. \n\nThe `MyOrders` component uses the `useLingui` hook to access the `i18n` object, which provides internationalization support for the component. The `useLimitOrders` hook is used to retrieve the user's pending limit orders. \n\nThe component returns a `NavLink` component that wraps an anchor tag. The anchor tag contains two divs: one with the text \"My Orders\" and a `Badge` component that displays the total number of pending orders, and another with a `ClipboardListIcon` component that is only displayed on smaller screens. \n\nThis component can be used in a larger project to provide users with a quick link to their open orders page. The `Badge` component can be used to display the number of pending orders, which can help users keep track of their orders. The `useLimitOrders` hook can be used to retrieve the user's pending orders from the backend. The `useLingui` hook can be used to provide internationalization support for the component. \n\nExample usage:\n\n```\nimport MyOrders from './MyOrders'\n\nfunction App() {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What does this code do?\n- This code exports a React functional component called `MyOrders` that renders a link to a page for viewing a user's open orders, along with a badge indicating the number of pending orders.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including React, @heroicons/react, @lingui/macro, and @lingui/react. It also imports two custom components, Badge and NavLink, from the project's components directory.\n\n3. What is the purpose of the useLimitOrders hook?\n- The useLimitOrders hook is used to retrieve information about a user's pending limit orders, which is then displayed in the badge next to the \"My Orders\" link.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/MyOrders.md"}}],["760",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/OrderExpirationDropdown.tsx)\n\nThe `OrderExpirationDropdown` component is a React functional component that renders a dropdown menu for selecting the expiration time of a limit order. The component imports several dependencies, including `NeonSelect` and `NeonSelectItem` from a custom `Select` component, `useDispatch` and `useLimitOrderState` hooks from the `limit-order` state, and `useLingui` from the `@lingui/react` library for internationalization.\n\nThe component defines a `handler` function that dispatches a `setOrderExpiration` action to update the `orderExpiration` state with the selected expiration time. The `items` object maps each expiration time option to a corresponding label for display in the dropdown menu.\n\nThe component returns a JSX element that renders a `div` container with a label and a question helper icon, followed by a `NeonSelect` component that renders the dropdown menu. The `NeonSelect` component receives the `orderExpiration.label` value as its `value` prop, which is the label of the currently selected expiration time. The `NeonSelect` component also maps each item in the `items` object to a `NeonSelectItem` component, passing the expiration time as the `value` prop and the corresponding label as the child element. The `handler` function is called when an item is clicked, passing the expiration time as the second argument.\n\nThis component can be used in a larger project that involves limit orders, allowing users to select the expiration time for their orders. The component is reusable and can be easily integrated into other components or pages that require a similar functionality. For example, the component can be used in a trading page where users can place limit orders, or in a settings page where users can configure their order preferences.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines a React component called `OrderExpirationDropdown` that renders a dropdown menu for selecting the expiration time of an order.\n2. What is the role of the `useLimitOrderState` hook?\n - The `useLimitOrderState` hook is used to retrieve the current order expiration value from the Redux store.\n3. What is the purpose of the `QuestionHelper` component?\n - The `QuestionHelper` component renders a tooltip with explanatory text when hovered over, and is used here to provide additional information about the meaning of \"order expiration\".","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/OrderExpirationDropdown.md"}}],["761",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/PayFromToggle.tsx)\n\nThe `PayFromToggle` component is a React functional component that renders a toggle switch with two options: \"BentoBox\" and \"Wallet\". The purpose of this component is to allow the user to select the source of funds for a limit order transaction. \n\nThe component imports several dependencies, including `React`, `useState`, `Switch` from the `@headlessui/react` library, `Typography`, `useDispatch`, and `useLingui`. It also imports `setFromBentoBalance` and `useLimitOrderState` from the `limit-order` module in the project's state.\n\nThe component uses the `useLingui` hook to access the project's internationalization (i18n) functionality. It also uses the `useLimitOrderState` hook to access the current state of the limit order module, specifically the `fromBentoBalance` property. The `useDispatch` hook is used to dispatch the `setFromBentoBalance` action when the toggle switch is changed.\n\nThe `PayFromToggle` component returns a JSX element that renders the toggle switch. The switch has two labels, one for \"BentoBox\" and one for \"Wallet\", and a round toggle button that can be moved between the two labels. The current selection is determined by the `fromBentoBalance` property in the limit order state. When the toggle switch is changed, the `handleChange` function is called, which dispatches the `setFromBentoBalance` action with the opposite value of the current `fromBentoBalance` property.\n\nThis component can be used in the larger project wherever a user needs to select the source of funds for a limit order transaction. For example, it could be used in a form that allows the user to enter the details of a limit order, including the source of funds. The `PayFromToggle` component provides a simple and intuitive way for the user to select the desired source of funds. \n\nExample usage:\n\n```\nimport PayFromToggle from './PayFromToggle'\n\nfunction LimitOrderForm() {\n return (\n \n )\n}\n```\n## Questions: \n 1. What does this code do?\n- This code exports a React functional component called `PayFromToggle` that renders a toggle switch with two options: \"BentoBox\" and \"Wallet\". When the toggle is switched, it dispatches an action to update the state of `fromBentoBalance`.\n\n2. What dependencies does this code have?\n- This code imports several dependencies from external packages, including `React`, `@headlessui/react`, `@lingui/macro`, `react-redux`, and a custom `Typography` component and some state-related modules from a `../../../` path.\n\n3. What is the purpose of the `useLingui` hook?\n- The `useLingui` hook is used to access the `i18n` object provided by the Lingui library, which allows for internationalization and localization of the text displayed in the component. The `i18n._(t`Pay from:`)` syntax is used to translate the text \"Pay from:\" to the appropriate language based on the user's locale.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/PayFromToggle.md"}}],["762",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/PriceRatio.tsx)\n\nThe `PriceRatio` component is a React functional component that displays the exchange rate between two currencies. It is part of the larger `zoo` project and imports the `Currency` and `Price` classes from the `@zoolabs/zdk` library, as well as the `useState` and `FC` (Functional Component) hooks from the `react` library, and two custom hooks `useDerivedLimitOrderInfo` and `useLimitOrderState` from the `../../../state/limit-order/hooks` module.\n\nThe component renders a div containing two sub-divs. The first sub-div displays the exchange rate between the two currencies, which is calculated using the `Price` class. The exchange rate is displayed in the format \"1 [input currency symbol] = [exchange rate] [output currency symbol]\". The exchange rate is calculated based on the `parsedAmounts` and `currentPrice` values obtained from the `useDerivedLimitOrderInfo` hook. If both `parsedAmounts[Field.INPUT]` and `parsedAmounts[Field.OUTPUT]` are defined, the exchange rate is calculated using these values. Otherwise, the `currentPrice` value is used. The `inverted` state variable is used to toggle the input and output currencies in the exchange rate display.\n\nThe second sub-div contains a clickable icon that toggles the `inverted` state variable when clicked. This causes the input and output currencies to be swapped in the exchange rate display.\n\nThis component can be used in the larger `zoo` project to display the exchange rate between two currencies in a user interface. It can be imported and rendered in any other React component that requires this functionality. For example:\n\n```\nimport PriceRatio from './components/PriceRatio';\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `useDerivedLimitOrderInfo` and `useLimitOrderState` hooks imported from `../../../state/limit-order/hooks`?\n- These hooks are likely used to retrieve and manage state related to limit orders in the application.\n\n2. What is the significance of the `PriceRatio` component and where is it used in the application?\n- The `PriceRatio` component appears to be responsible for displaying the exchange rate between two currencies, and it may be used in various parts of the application where currency exchange is relevant.\n\n3. What is the purpose of the `inverted` state variable and how is it used in the component?\n- The `inverted` state variable is used to determine whether the exchange rate should be displayed in the original or inverted format, and it is toggled by clicking on a button in the component. This may be useful for users who prefer to see the exchange rate in a different format.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/PriceRatio.md"}}],["763",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetails.tsx)\n\nThe code in this file defines two React components: `TradeSummary` and `AdvancedLiquidityDetails`. These components are part of a larger project called \"zoo\" and are used to display information related to a user's liquidity pool tokens and fees.\n\nThe `TradeSummary` component renders a summary of the user's pool tokens, pool share, liquidity provider fee, and network fee. This information is displayed using the `RowBetween` and `RowFixed` components from the `../../../components/Row` module and the `AutoColumn` component from the `../../../components/Column` module. The `RowBetween` component is used to display two items side-by-side with equal spacing between them, while the `RowFixed` component is used to display a single item without any spacing. The `AutoColumn` component is used to stack the rows vertically.\n\nThe `AdvancedLiquidityDetails` component simply renders the `TradeSummary` component within an `AutoColumn` component with a gap of 0 pixels. This component is exported along with an interface called `AdvancedLiquidityDetailsProps` that has a single optional property called `show`.\n\nOverall, these components are used to display important information related to a user's liquidity pool tokens and fees in a clear and concise manner. They can be easily integrated into other parts of the \"zoo\" project to provide users with a better understanding of their liquidity pool activity. Here is an example of how the `AdvancedLiquidityDetails` component might be used:\n\n```\nimport AdvancedLiquidityDetails from 'zoo/components/AdvancedLiquidityDetails'\n\nfunction MyPage() {\n return (\n Exchange Rates
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `TradeSummary` function?\n- The `TradeSummary` function returns a JSX component that displays information about the user's pool tokens, pool share, liquidity provider fee, and network fee.\n\n2. What is the `AdvancedLiquidityDetails` function used for?\n- The `AdvancedLiquidityDetails` function returns a JSX component that includes the `TradeSummary` component and is wrapped in an `AutoColumn` component with a gap of \"0px\". It also includes an optional `show` prop.\n\n3. What are the `RowBetween` and `RowFixed` components used for?\n- The `RowBetween` and `RowFixed` components are imported from the `Row` module and are used to create rows of content with flexible and fixed widths, respectively. They are used in the `TradeSummary` function to display the different pieces of information.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetails.md"}}],["764",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetailsDropdown.tsx)\n\nThis code defines a React component called `AdvancedSwapDetailsDropdown` that renders a styled dropdown menu containing advanced liquidity details for a swap. The component imports another React component called `AdvancedLiquidityDetails` from a file located at `./AdvancedLiquidityDetails`. \n\nThe `AdvancedDetailsFooter` styled component defines the appearance of the dropdown menu. It has a dark background color and rounded borders at the bottom. The `show` prop determines whether the dropdown menu is visible or hidden. When `show` is true, the dropdown menu is translated to a position where it is visible. When `show` is false, the dropdown menu is translated to a position where it is hidden. \n\nThe `AdvancedSwapDetailsDropdown` component takes a `show` prop and passes any other props it receives to the `AdvancedLiquidityDetails` component. The `show` prop determines whether the dropdown menu is visible or hidden. If `show` is true, the `AdvancedDetailsFooter` component is rendered with `show` set to true and the `AdvancedLiquidityDetails` component is rendered inside it. If `show` is false, only the `AdvancedDetailsFooter` component is rendered with `show` set to false. \n\nThis component can be used in a larger project that involves swapping tokens on a decentralized exchange. When a user wants to see advanced liquidity details for a swap, they can click on a button or link that triggers the `AdvancedSwapDetailsDropdown` component to appear. The `show` prop can be toggled by the button or link to show or hide the dropdown menu. \n\nExample usage:\n\n```\nimport AdvancedSwapDetailsDropdown from './AdvancedSwapDetailsDropdown'\n\nfunction SwapPage() {\n const [showAdvancedDetails, setShowAdvancedDetails] = useState(false)\n\n function handleToggleAdvancedDetails() {\n setShowAdvancedDetails(!showAdvancedDetails)\n }\n\n return (\n My Liquidity Pool Details
\n\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `AdvancedLiquidityDetails` component and where is it imported from?\n - The `AdvancedLiquidityDetails` component is imported from a file located at `./AdvancedLiquidityDetails`. Its purpose is not clear from this code snippet alone.\n2. What is the purpose of the `AdvancedDetailsFooter` styled component and how is it being used?\n - The `AdvancedDetailsFooter` styled component is a container with specific styling properties. It is being used to wrap the `AdvancedLiquidityDetails` component and is conditionally rendered based on the `show` prop passed to the `AdvancedSwapDetailsDropdown` component.\n3. What is the purpose of the `AdvancedSwapDetailsDropdown` component and what props does it accept?\n - The `AdvancedSwapDetailsDropdown` component is a functional component that conditionally renders the `AdvancedDetailsFooter` and `AdvancedLiquidityDetails` components based on the `show` prop passed to it. It accepts the same props as the `AdvancedLiquidityDetails` component, which are defined in the `AdvancedLiquidityDetailsProps` interface.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetailsDropdown.md"}}],["765",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/liquidity/ConfirmAddModalBottom.tsx)\n\nThe `ConfirmAddModalBottom` function is a React component that renders a modal dialog box for confirming the addition of liquidity to a pool in a decentralized exchange. The component takes several props, including `noLiquidity`, `price`, `currencies`, `parsedAmounts`, `poolTokenPercentage`, and `onAdd`. \n\nThe `noLiquidity` prop is a boolean that indicates whether the pool being added to has any existing liquidity. The `price` prop is a `Fraction` object that represents the exchange rate between the two currencies being added to the pool. The `currencies` prop is an object that maps `Field` values to `Currency` objects, where `Field` is an enum representing the two currencies being added to the pool. The `parsedAmounts` prop is an object that maps `Field` values to `CurrencyAmount` objects, representing the amounts of each currency being added to the pool. The `poolTokenPercentage` prop is a `Percent` object representing the share of the pool being added to. Finally, the `onAdd` prop is a callback function that is called when the user confirms the addition of liquidity.\n\nThe component renders a dialog box with information about the exchange rate, the amounts of each currency being added, and the share of the pool being added to. It also renders a button that allows the user to confirm the addition of liquidity. The text of the button changes depending on whether the pool being added to has existing liquidity or not.\n\nThe component uses the `useLingui` hook from the `@lingui/react` package to provide internationalization support. It also uses the `Button` component from the `../../../components/Button` module.\n\nExample usage:\n\n```jsx\nimport { ConfirmAddModalBottom } from \"@zoolabs/zdk-react\";\nimport { Currency, CurrencyAmount, Fraction, Percent } from \"@zoolabs/zdk\";\n\nfunction MyComponent() {\n const currencies = {\n [Field.CURRENCY_A]: new Currency(\"ETH\", 18, \"Ethereum\"),\n [Field.CURRENCY_B]: new Currency(\"USDC\", 6, \"USD Coin\"),\n };\n const parsedAmounts = {\n [Field.CURRENCY_A]: CurrencyAmount.fromRawAmount(currencies[Field.CURRENCY_A], \"1\"),\n [Field.CURRENCY_B]: CurrencyAmount.fromRawAmount(currencies[Field.CURRENCY_B], \"1000000\"),\n };\n const price = new Fraction(1, 2000);\n const poolTokenPercentage = new Percent(50);\n const onAdd = () => {\n // handle addition of liquidity\n };\n return (\n \n
\n );\n}\n``` \n\nOverall, this code provides a way for different parts of the `zoo` project to access and use components related to liquidity details and pricing.\n## Questions: \n 1. **What is the purpose of this code file?**\\\nA smart developer might wonder what the overall purpose of this code file is and how it fits into the larger project. Based on the code, it appears to be exporting various components related to liquidity details and removal from the `zoo` project.\n\n2. **What do the exported components do?**\\\nA developer might want to know more about the specific functionality of each exported component. Based on their names, `AdvancedLiquidityDetails`, `AdvancedLiquidityDetailsDropdown`, `LiquidityHeader`, `LiquidityPrice`, and `RemoveLiquidityReceiveDetails`, it seems that they are related to displaying and managing liquidity information.\n\n3. **Are there any dependencies or requirements for using these components?**\\\nA developer might want to know if there are any dependencies or requirements for using these exported components. Without more information, it is unclear if these components require any specific libraries or configurations to work properly.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/index.md"}}],["770",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/open-order/CompletedOrders.tsx)\n\nThis code defines a React functional component called `CompletedOrders` that displays a list of completed orders. The component imports several dependencies, including `React`, `Badge`, `CurrencyLogo`, `Lottie`, `OrderStatus`, `Pagination`, `loadingCircle`, `t`, `useLimitOrders`, and `useLingui`. \n\nThe `CompletedOrders` component uses the `useLimitOrders` hook to retrieve a list of completed orders. If there are completed orders, the component displays a header with the total number of completed orders, a table of completed orders, and a pagination component. If there are no completed orders, the component displays a message indicating that there are no orders.\n\nThe table of completed orders displays the following columns: \n\n- Receive: The token that the user received in the trade.\n- Pay: The token that the user paid in the trade.\n- Rate: The exchange rate between the two tokens.\n- Filled: The status of the order (filled, cancelled, or expired).\n\nEach row in the table represents a completed order and displays the following information:\n\n- The amount of the token that the user received.\n- The symbol of the token that the user received.\n- The amount of the token that the user paid.\n- The symbol of the token that the user paid.\n- The exchange rate between the two tokens.\n- The status of the order.\n\nThe background color of each row depends on the status of the order. If the order is filled, the background color is green. If the order is cancelled, the background color is gray. If the order is expired, the background color is red.\n\nThe `Pagination` component allows the user to navigate between pages of completed orders.\n\nThis component can be used in a larger project that involves trading tokens. It provides a way for users to view their order history and track the status of their completed orders. The component can be customized to fit the design of the larger project. For example, the colors of the rows can be changed to match the color scheme of the project.\n## Questions: \n 1. What is the purpose of this code?\n- This code is a React component that displays a list of completed orders with pagination and some additional information.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, Lottie, and @lingui/macro.\n\n3. What data is being displayed in the completed orders list?\n- The completed orders list displays information about each completed order, including the amount of tokens received and paid, the exchange rate, and the order status (filled, cancelled, or expired).","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/open-order/CompletedOrders.md"}}],["771",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/open-order/OpenOrders.tsx)\n\nThe `OpenOrders` component is a React functional component that displays a list of open limit orders. It imports several components from the `zoo` project, including `Badge`, `Button`, `CurrencyLogo`, `Pagination`, and `TransactionConfirmationModal`. It also imports several hooks from the `zoo` project, including `useLimitOrderContract`, `useLimitOrders`, `useLingui`, and `useTransactionAdder`. Finally, it imports the `LimitOrder` class from the `@zoolabs/zdk` package and the `Lottie` component from the `lottie-react` package.\n\nThe component first initializes several variables using the imported hooks, including `i18n`, `pending`, `limitOrderContract`, `addTransaction`, and `hash`. `i18n` is used for internationalization, `pending` is used to track the status of the limit orders, `limitOrderContract` is used to interact with the limit order contract, `addTransaction` is used to add a transaction to the transaction list, and `hash` is used to store the hash of the transaction.\n\nThe component then defines a `cancelOrder` function that cancels a limit order and adds a transaction to the transaction list. The function takes a `limitOrder` object and a `summary` string as arguments, calls the `cancelOrder` method of the `limitOrderContract` object, adds the resulting transaction to the transaction list using the `addTransaction` function, and updates the `hash` state variable with the hash of the transaction. Finally, the function waits for the transaction to complete and updates the limit orders using the `mutate` function.\n\nThe component then returns a JSX element that displays the list of open limit orders. If there are no open limit orders, it displays a message encouraging the user to place an order. If there are open limit orders, it displays a table with information about each order, including the input and output tokens, the exchange rate, and the percentage of the order that has been filled. It also provides a button to cancel each order. The component uses the `Pagination` component to allow the user to navigate between pages of orders.\n\nOverall, the `OpenOrders` component provides a user-friendly interface for managing open limit orders in the `zoo` project. It uses several components and hooks from the project to provide a seamless user experience.\n## Questions: \n 1. What is the purpose of the `OpenOrders` component?\n- The `OpenOrders` component displays a list of open limit orders and allows the user to cancel them.\n\n2. What external libraries or components are being used in this file?\n- The file imports several components from external libraries, including `Badge` and `Button` from a custom component library, `Lottie` for animations, and `TransactionConfirmationModal` from a modal library.\n\n3. What hooks are being used in this file and what are they used for?\n- The file uses several custom hooks, including `useLimitOrderContract` for interacting with a limit order contract, `useLimitOrders` for fetching and managing open limit orders, `useLingui` for internationalization, and `useTransactionAdder` for adding transactions to the transaction history.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/open-order/OpenOrders.md"}}],["772",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/open-order/Pagination.tsx)\n\nThe `Pagination` component is a reusable React component that generates a pagination control for a list of items. It takes in four props: `currentPage`, `onChange`, `totalPages`, and `pageNeighbours`. \n\nThe `currentPage` prop is the current page number, `onChange` is a callback function that is called when a page is clicked, `totalPages` is the total number of pages, and `pageNeighbours` is the number of pages to show on either side of the current page.\n\nThe component generates a list of page numbers based on the `totalPages` and `pageNeighbours` props. It then renders a list of buttons, with the current page highlighted, and \"Previous\" and \"Next\" buttons on either end of the list. If there are more pages than can be displayed, the component will add ellipses to indicate that there are more pages available.\n\nThe `range` function is a helper function that generates an array of numbers between two given numbers. It takes in three arguments: `from`, `to`, and `step`. It returns an array of numbers between `from` and `to`, incremented by `step`.\n\nThe `Pagination` component uses the `range` function to generate the list of page numbers. It then uses the `reduce` method to generate an array of buttons for each page number. The buttons are wrapped in an array, with the \"Previous\" and \"Next\" buttons in their own arrays. The `reduce` method returns an array of three arrays: one for the \"Previous\" buttons, one for the page buttons, and one for the \"Next\" buttons.\n\nThe `classNames` function is a utility function that generates a string of class names based on the arguments passed to it. It is used to generate the class names for the buttons.\n\nThe `Pagination` component returns a `nav` element containing the list of buttons. If there is only one page, the component returns an empty fragment.\n\nExample usage:\n\n```jsx\n\n
\n );\n}\n```\n\nIn this example, the `TradeConfirmation` component receives a `trade` object that includes a `priceImpact` property of type `Percent`. The `FormattedPriceImpact` component is used to display the formatted price impact percentage with the appropriate text color based on the severity level.\n## Questions: \n 1. What is the purpose of the `Percent` import from `@zoolabs/zdk`?\n - The `Percent` import is likely used to handle percentage calculations in the code.\n2. What is the significance of the `ONE_BIPS` constant imported from `../../../constants`?\n - It is unclear from this code snippet what the `ONE_BIPS` constant is used for. Further investigation into the `constants` file may be necessary to determine its purpose.\n3. How is the `warningSeverity` function from `../../../functions/prices` used in this code?\n - The `warningSeverity` function is used to determine which CSS class to apply to the `div` element's `className` attribute based on the severity of the `priceImpact` value.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/swap/FormattedPriceImpact.md"}}],["777",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/MinerTip.tsx)\n\nThe code is a React component that renders a slider for selecting a miner tip amount. The component imports several hooks from the `@zoolabs/zdk` and `../../../state/user/hooks` libraries. It also imports a `useArcherMinerTips` hook from `../../../hooks/useArcherMinerTips`. \n\nThe `getMarkLabel` function returns a string label for each mark on the slider based on its index and the length of the marks array. The `getMarkSlippage` function returns a number representing the slippage tolerance for each mark on the slider based on its index. The `getMarksFromTips` function takes a record of miner tips and returns an object with keys representing the index of each mark on the slider and values representing the label, price, slippage, style, and class name for each mark. \n\nThe `MinerTip` component uses several hooks to manage state. It uses `useToggleSettingsMenu` to toggle a settings menu, `useUserArcherTipManualOverride` to get the user's manual tip override setting, `useUserArcherETHTip` to get the user's ETH tip amount, `useUserArcherGasPrice` to set the user's gas price, and `useArcherMinerTips` to get the miner tips data. \n\nThe component uses `React.useState` to manage the state of the slider value. It uses `React.useMemo` to memoize the `getMarksFromTips` function and the `marks` object. It uses `React.useCallback` to memoize the `handleChange` function. It uses `React.useEffect` to set the initial value of the slider and the user's gas price based on the middle mark of the `marks` object. \n\nThe component renders a `Typography` component with the text \"Miner Tip\" and the user's ETH tip amount. If the user has not set a manual tip override and there are no miner tips data, the component returns `null`. Otherwise, it renders a `StyledSlider` component with the `marks`, `max`, `onChange`, `value`, and `step` props. \n\nThis component can be used in a larger project to allow users to select a miner tip amount based on the current miner tips data. The component provides a user-friendly interface for selecting a miner tip amount and handles the logic of setting the user's gas price based on the selected tip amount.\n## Questions: \n 1. What is the purpose of this code?\n- This code is a React component that renders a slider for selecting a miner tip amount based on gas prices and slippage tolerance.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several functions and components from external libraries such as \"@zoolabs/zdk\", \"react\", and \"styled-components\". It also imports several custom hooks from the project's state and hooks directories.\n\n3. What is the significance of the `useEffect` hook in this code?\n- The `useEffect` hook is used to set the initial value of the slider and the gas price based on the middle value of the marks object. It also updates the slider value and gas price whenever the marks object or user tip manual override changes.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/swap/MinerTip.md"}}],["778",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/SwapModalFooter.tsx)\n\nThis code exports a React component called `SwapModalFooter` that renders the footer section of a swap modal. The component takes in four props: `trade`, `onConfirm`, `swapErrorMessage`, and `disabledConfirm`. \n\nThe `trade` prop is an object of type `V2Trade` that represents the trade being made. The `onConfirm` prop is a function that is called when the user confirms the swap. The `swapErrorMessage` prop is a ReactNode that represents an error message to be displayed if the swap fails. The `disabledConfirm` prop is a boolean that determines whether the confirm button is disabled.\n\nThe component renders a `div` element with a dark background color and some padding. Inside this `div`, there is a `ButtonError` component that represents the confirm button. When clicked, the `onConfirm` function is called. The button is disabled if the `disabledConfirm` prop is true. The text of the button is localized using the `i18n` object from the `useLingui` hook.\n\nIf the `swapErrorMessage` prop is not null, the component also renders a `SwapCallbackError` component that displays the error message.\n\nThe commented-out code inside the `div` element appears to be some additional UI elements that were not included in the final version of the component.\n\nThis component can be used in a larger project that involves swapping between different currencies. It provides a reusable footer section for the swap modal that includes a confirm button and the ability to display error messages. The `trade` prop allows the component to display information about the trade being made, such as the price and liquidity provider fee. The `disabledConfirm` prop allows the parent component to disable the confirm button if necessary, such as when the user has not entered all required information.\n## Questions: \n 1. What dependencies does this code use?\n- This code imports several dependencies including `@zoolabs/zdk`, `react`, `@lingui/macro`, and `@lingui/react`.\n\n2. What is the purpose of the `SwapModalFooter` function?\n- The `SwapModalFooter` function is responsible for rendering the footer of a swap modal, including a confirmation button and a potential error message.\n\n3. What props does the `SwapModalFooter` function expect?\n- The `SwapModalFooter` function expects four props: `trade`, which is a trade object; `onConfirm`, which is a function to be called when the confirmation button is clicked; `swapErrorMessage`, which is an optional error message to display; and `disabledConfirm`, which is a boolean indicating whether the confirmation button should be disabled.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapModalFooter.md"}}],["779",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/SwapModalHeader.tsx)\n\nThis code defines a React component called `SwapModalHeader` that renders the header section of a swap modal. The component takes in several props, including the trade object, allowed slippage, recipient address, and other details related to the swap. \n\nThe component first imports several dependencies, including React, `react-feather`, and `@zoolabs/zdk`. It also imports several utility functions from `../../../functions` and other components from the project. \n\nInside the component, it uses the `useState` hook to manage the state of a boolean variable called `showInverted`. It also uses several other hooks, including `useLingui` and `useActiveWeb3React`, to access internationalization and web3-related functionality. \n\nThe component then calculates the fiat value of the input and output amounts using the `useUSDCValue` hook. It also calculates the severity of the price impact using the `warningSeverity` function from `../../../functions`. \n\nThe component renders several elements, including the input and output amounts, the trade price, and advanced swap details. It also conditionally renders an alert message if the price has been updated and the user needs to accept the changes. Finally, it displays a message indicating whether the input or output amount is estimated and the recipient address if applicable. \n\nThis component is likely used in a larger project related to swapping tokens on a decentralized exchange. It provides a user-friendly interface for displaying key details related to a swap, including the input and output amounts, price, and estimated transaction details.\n## Questions: \n 1. What is the purpose of the `SwapModalHeader` component?\n- The `SwapModalHeader` component is responsible for rendering the header section of a swap modal, including details about the input and output currencies, trade price, and advanced swap details.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies, including `react-feather`, `@zoolabs/zdk`, `@lingui/macro`, and `useActiveWeb3React`.\n\n3. What is the significance of the `showAcceptChanges` prop?\n- The `showAcceptChanges` prop determines whether or not to display a message indicating that the price of the trade has been updated and prompting the user to accept the changes.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapModalHeader.md"}}],["780",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/SwapRoute.tsx)\n\nThis code defines a React component called `SwapRoute` that renders a visual representation of the route taken by a trade between two currencies. The component takes a single prop called `trade`, which is an object of type `Trade` that represents the trade being made. The `Trade` object is defined in the `@zoolabs/zdk` library, which is imported at the top of the file along with the `Currency` and `TradeType` types.\n\nThe `SwapRoute` component renders a series of currency symbols separated by chevron icons. The currency symbols are extracted from the `path` property of the `Trade` object's `route` property. The `path` property is an array of `Currency` objects that represent the sequence of currencies involved in the trade. The `unwrappedToken` function is used to extract the `Currency` object from a wrapped token object, which is necessary because some currencies may be wrapped in other tokens for use on different blockchains.\n\nThe component uses the `Fragment` component from React to group the currency symbols and chevron icons together. The `isLastItem` variable is used to determine whether or not to render a chevron icon after the current currency symbol. If the current currency symbol is the last one in the `path` array, no chevron icon is rendered.\n\nThe `SwapRoute` component is exported as the default export of the file, and its `displayName` property is set to `\"SwapRoute\"`. This allows the component to be easily identified in React developer tools. The component is likely used in a larger project that involves trading between different currencies, and provides a visual representation of the route taken by a trade. Here is an example of how the `SwapRoute` component might be used in a larger React component:\n\n```\nimport { Trade } from \"@zoolabs/zdk\";\nimport SwapRoute from \"./SwapRoute\";\n\nfunction TradeDetails({ trade }: { trade: Trade }) {\n return (\n Trade Confirmation
\nPrice Impact:
\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `SwapRoute` component?\n - The `SwapRoute` component takes in a `Trade` object and renders a series of currency symbols with chevron icons in between them to represent the path of the trade route.\n\n2. What is the `unwrappedToken` function and where is it defined?\n - The `unwrappedToken` function is imported from a file located at `../../../functions/currency/wrappedCurrency`. It takes in a token object and returns the underlying currency object.\n\n3. What is the significance of the `memo` and `displayName` properties on the `SwapRoute` component?\n - The `memo` property is used to memoize the component and improve performance by preventing unnecessary re-renders. The `displayName` property is used to give the component a display name for debugging purposes.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapRoute.md"}}],["781",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/TradePrice.tsx)\n\nThe `TradePrice` component is a React component that displays the exchange rate between two currencies. It takes in a `Price` object from the `@zoolabs/zdk` library, which represents the exchange rate between two currencies, and a boolean `showInverted` flag that determines whether to display the exchange rate in the base-to-quote or quote-to-base direction. The component also takes in a `setShowInverted` function that updates the `showInverted` flag, and an optional `className` string for custom styling.\n\nThe component first uses the `useLingui` hook from the `@lingui/react` library to access the current language and translation functions. It then formats the exchange rate using the `toSignificant` method of the `Price` object, which returns a string representation of the exchange rate with a specified number of significant digits. If `showInverted` is true, the exchange rate is displayed in the quote-to-base direction, and if it is false, the exchange rate is displayed in the base-to-quote direction. If an error occurs during formatting, the exchange rate is set to \"0\".\n\nThe component then generates two label strings based on the `showInverted` flag and the currencies in the `Price` object. The `flipPrice` function is a callback that toggles the `showInverted` flag when the component is clicked.\n\nFinally, the component returns a div element with the exchange rate and labels displayed, along with an icon that indicates that the exchange rate can be flipped by clicking on the component. The component also applies custom styling based on the `className` prop.\n\nThis component can be used in a larger project that involves currency exchange, such as a cryptocurrency trading platform. It provides a user-friendly way to display exchange rates and allows users to easily switch between base-to-quote and quote-to-base rates. Here is an example of how the component can be used in a React application:\n\n```\nimport { Currency, Price } from \"@zoolabs/zdk\";\nimport TradePrice from \"./TradePrice\";\n\nfunction App() {\n const price = new Price(new Currency(\"USD\"), new Currency(\"EUR\"), \"1.2345\");\n const [showInverted, setShowInverted] = useState(false);\n\n return (\n Trade Details
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `TradePrice` component?\n- The `TradePrice` component is used to display the exchange rate between two currencies in a specific format.\n\n2. What external libraries are being used in this code?\n- The code is importing `Currency` and `Price` from the `@zoolabs/zdk` library, as well as `Typography`, `classNames`, `t`, and `useLingui` from other external libraries.\n\n3. What happens if there is an error when formatting the price?\n- If there is an error when formatting the price, the `formattedPrice` variable is set to the string \"0\".","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/swap/TradePrice.md"}}],["782",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/UnsupportedCurrencyFooter.tsx)\n\nThis code defines a React component called `UnsupportedCurrencyFooter` that renders a footer section for a user interface. The footer displays a button that, when clicked, opens a modal dialog that lists any unsupported assets in the user's wallet. The modal dialog also provides additional information about why certain assets may not be available for trading.\n\nThe component imports several other components from the `../../../components` directory, including `RowBetween`, `AutoColumn`, `Button`, `CloseIcon`, `CurrencyLogo`, `ExternalLink`, and `Modal`. It also imports two classes from the `@zoolabs/zdk` library: `Currency` and `Token`. The `useActiveWeb3React` and `useUnsupportedTokens` hooks are also imported from the `../../../hooks` directory.\n\nThe `UnsupportedCurrencyFooter` component takes two props: `show` and `currencies`. The `show` prop is a boolean that determines whether the footer is visible or not. The `currencies` prop is an array of `Currency` or `undefined` objects that represent the assets in the user's wallet.\n\nThe component renders a `DetailsFooter` styled component that contains a `Modal` component. The `Modal` component is only visible when the `showDetails` state variable is `true`. The `showDetails` state variable is initially set to `false` using the `useState` hook.\n\nThe `tokens` variable is defined using the `currencies` prop and the `chainId` variable from the `useActiveWeb3React` hook. The `tokens` variable is an array of `Token` objects that represent the assets in the user's wallet.\n\nThe `unsupportedTokens` variable is defined using the `useUnsupportedTokens` hook. The `unsupportedTokens` variable is an object that maps the addresses of unsupported assets to their corresponding `Token` objects.\n\nThe `DetailsFooter` component contains a `Button` component that, when clicked, sets the `showDetails` state variable to `true`, which causes the `Modal` component to become visible. The `Modal` component contains a list of unsupported assets, along with their logos, symbols, and addresses. The `Modal` component also provides additional information about why certain assets may not be available for trading.\n\nOverall, this code provides a way for users to view any unsupported assets in their wallet and learn more about why certain assets may not be available for trading. This component can be used as part of a larger user interface for a decentralized exchange or other blockchain-based application.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `UnsupportedCurrencyFooter` that displays a button which, when clicked, opens a modal that lists any unsupported currencies in the user's wallet.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several components from the `../../../components` directory, as well as the `@zoolabs/zdk` library and the `styled-components` library.\n\n3. What is the significance of the `useUnsupportedTokens` hook?\n- The `useUnsupportedTokens` hook is used to retrieve a list of unsupported tokens from the `unsupportedTokens` object, which is then used to determine which currencies in the user's wallet are unsupported and should be displayed in the modal.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/swap/UnsupportedCurrencyFooter.md"}}],["783",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/confirmPriceImpactWithoutFee.ts)\n\nThe code in this file is responsible for confirming a user's intention to proceed with a trade based on the price impact of the trade. The code imports two constants, ALLOWED_PRICE_IMPACT_HIGH and PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN, from a file located in the project's constants directory. It also imports the Percent class from the '@zoolabs/zdk' package.\n\nThe confirmPriceImpactWithoutFee function takes in a priceImpactWithoutFee parameter, which is the price impact of the trade without the fee. The function then checks if the price impact is greater than or equal to PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN. If it is, the function prompts the user to confirm their intention to proceed with the trade by typing the word \"confirm\". If the user types \"confirm\", the function returns true, indicating that the trade can proceed. If the user does not type \"confirm\", the function returns false, indicating that the trade should not proceed.\n\nIf the price impact is less than PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN, the function checks if it is greater than or equal to ALLOWED_PRICE_IMPACT_HIGH. If it is, the function prompts the user to confirm their intention to proceed with the trade by displaying a confirmation dialog box. If the user clicks \"OK\", the function returns true, indicating that the trade can proceed. If the user clicks \"Cancel\", the function returns false, indicating that the trade should not proceed.\n\nIf the price impact is less than ALLOWED_PRICE_IMPACT_HIGH, the function returns true, indicating that the trade can proceed without any confirmation.\n\nThis function is likely used in the larger project to ensure that users are aware of the potential price impact of their trades and to prevent accidental or unintended trades with high price impacts. Here is an example of how this function might be used in the larger project:\n\n```\nimport confirmPriceImpactWithoutFee from './path/to/confirmPriceImpactWithoutFee'\n\nconst priceImpactWithoutFee = new Percent(0.05) // 5% price impact without fee\nconst shouldProceed = confirmPriceImpactWithoutFee(priceImpactWithoutFee)\n\nif (shouldProceed) {\n // proceed with trade\n} else {\n // do not proceed with trade\n}\n```\n## Questions: \n 1. What are the values of `ALLOWED_PRICE_IMPACT_HIGH` and `PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN`?\n - `ALLOWED_PRICE_IMPACT_HIGH` and `PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN` are constants imported from a file located at `../../../constants`.\n2. What is the purpose of the `Percent` class imported from `@zoolabs/zdk`?\n - The `Percent` class is likely used to represent percentage values in the code, possibly including the `priceImpactWithoutFee` parameter.\n3. What happens if the user does not confirm the price impact for the swap?\n - If the user does not confirm the price impact for the swap, the function will return `false`.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/swap/confirmPriceImpactWithoutFee.md"}}],["784",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/styleds.tsx)\n\nThis code file imports several libraries and exports a few styled components and a React function component. \n\nThe `React` and `ReactNode` libraries are imported from the `react` package. The `styled` and `css` libraries are imported from the `styled-components` package. The `AlertTriangle` icon is imported from the `react-feather` package. The `Slider` component is imported from the `rc-slider` package.\n\nThe `ArrowWrapper` styled component is exported. It takes a boolean `clickable` prop and applies padding to the component. If `clickable` is true, it also applies a hover effect that changes the cursor to a pointer and reduces the opacity of the component.\n\nThe `BottomGrouping` styled component is exported. It applies a margin to the top of the component.\n\nThe `SwapCallbackError` function component is exported. It takes an object with an error property that can be any valid React node. It returns a div that contains the `AlertTriangle` icon and the error message.\n\nThe `StyledSlider` styled component is exported. It applies custom styles to the `Slider` component imported from `rc-slider`. It sets the margin, width, and color of the slider. It also sets the color of the slider marks, rail, track, handle, and dot.\n\nThese styled components and function component can be used in other components of the `zoo` project to create a consistent look and feel. For example, the `ArrowWrapper` component can be used to wrap arrow icons that should be clickable. The `StyledSlider` component can be used to create sliders with a custom appearance. The `SwapCallbackError` component can be used to display error messages in a consistent format.\n## Questions: \n 1. What is the purpose of the `ArrowWrapper` component and how is it used?\n - The `ArrowWrapper` component is a styled div that can be made clickable based on the `clickable` prop. It is likely used to wrap an arrow icon or element that can be clicked to trigger an action.\n2. What is the `StyledSlider` component and what are its styled sub-components?\n - The `StyledSlider` component is a styled version of the `Slider` component from the `rc-slider` library. Its styled sub-components include the rail, track, handle, and dot of the slider, as well as the text labels for the marks.\n3. What is the purpose of the `SwapCallbackError` component and what does it render?\n - The `SwapCallbackError` component renders an error message with a red alert icon. It takes an `error` prop that can be any React node, likely a string or JSX element, to display as the error message.","metadata":{"source":".autodoc/docs/markdown/core/src/features/exchange-v1/swap/styleds.md"}}],["785",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/BalancePanel.tsx)\n\nThe `BalancePanel` component is a React functional component that renders a panel displaying the balance of a given token and allows the user to input a value for that token. It is part of the larger `zoo` project and is used to display and manage balances in various parts of the application.\n\nThe component takes several props, including a `label` and `symbol` for the token, a `value` representing the current input value, a `balance` representing the current balance of the token, and a `field` indicating whether the input is for the input or output token. The component also has an optional `showMax` prop that, when true, displays a \"Max\" button that sets the input value to the maximum balance.\n\nThe component uses several hooks from the `inari` state, including `useDerivedInariState`, `useInariState`, and `useSelectedInariStrategy`. These hooks provide access to various state variables and functions related to the Inari protocol, which is used to swap tokens.\n\nThe `BalancePanel` component renders a panel with the token logo, a numeric input field, and a \"Max\" button (if `showMax` is true). When the user inputs a value, the `dispatchValue` function is called, which updates the input and output values in the state using the `setValues` action. If the \"Max\" button is clicked, the `onMax` function is called, which sets the input value to the maximum balance.\n\nThe `BalancePanel` component is used throughout the `zoo` project to display and manage token balances. For example, it may be used in a swap interface to allow the user to input the amount of tokens they wish to swap. Overall, the `BalancePanel` component provides a simple and reusable way to display token balances and manage user input.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code defines a React component called `BalancePanel` that displays information about a token balance and allows the user to input a value for swapping tokens.\n2. What external libraries or dependencies does this code use?\n- This code imports several modules from external libraries including `@zoolabs/zdk`, `react`, and `@lingui/react`.\n3. What props does the `BalancePanel` component accept and what is their purpose?\n- The `BalancePanel` component accepts several props including `label`, `token`, `value`, `symbol`, `balance`, `field`, and `showMax`. These props are used to display information about the token balance and to allow the user to input a value for swapping tokens.","metadata":{"source":".autodoc/docs/markdown/core/src/features/inari/BalancePanel.md"}}],["786",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/Button.tsx)\n\nThe `InariButton` component is a reusable button component that is used in the Inari section of the larger project. The purpose of this component is to provide a button that can be used to execute a transaction on the Inari strategy. The component is imported from various other files in the project, including hooks, components, and state.\n\nThe component takes in various props, including `children` and `rest`. The `children` prop is used to render the text inside the button, while the `rest` prop is used to pass any additional props to the button component.\n\nThe component uses various hooks to get the necessary data for the button. These hooks include `useLingui`, `useActiveWeb3React`, `useDerivedInariState`, `useSelectedInariStrategy`, and `useBentoMasterApproveCallback`. These hooks are used to get the user's account, the input value for the transaction, the balances, and the approval state.\n\nThe component then checks various conditions to determine what should be rendered inside the button. If the user is not connected to a wallet, the button is disabled and displays the text \"Connect Wallet\". If the user has not entered an amount for the transaction, the button is disabled and displays the text \"Enter an amount\". If the user does not have enough balance for the transaction, the button is disabled and displays the text \"Insufficient Balance\".\n\nIf the user needs to approve the transaction, the component displays a progress bar with the steps required for approval. If the approval is pending, the button is disabled and displays a loading animation. If the approval has not been granted, the button is enabled and displays the text \"Approve Inari to spend [currency symbol]\". If the approval has been granted, the button is enabled and displays the text \"Execute\".\n\nOnce the user clicks the button, the `onExecute` function is called, which sets the `pending` state to true, executes the transaction, and sets the `pending` state to false. If the user needs to get a permit to send with the execute function, the `handleGetPermit` function is called.\n\nOverall, the `InariButton` component provides a reusable button that can be used to execute transactions on the Inari strategy. The component checks various conditions to ensure that the user has entered the correct information and has the necessary approvals before executing the transaction.\n## Questions: \n 1. What is the purpose of this code and where is it used in the project?\n- This code defines a React component called `InariButton` that is used to handle user interactions with a button related to the Inari strategy. It is used in various parts of the project where the Inari strategy is used.\n\n2. What external libraries or dependencies does this code rely on?\n- This code relies on several external libraries and dependencies, including `React`, `@zoolabs/zdk`, `@lingui/react`, and `ProgressSteps` and various custom hooks defined in other parts of the project.\n\n3. What are the different conditions under which the button can be disabled or display different text?\n- The button can be disabled or display different text under several conditions, including when the user is not connected to a wallet, when the user has not entered a valid amount, when the user has insufficient balance, and when the user needs to approve Inari to spend a certain currency. The button can also display a loading indicator when a transaction is pending.","metadata":{"source":".autodoc/docs/markdown/core/src/features/inari/Button.md"}}],["787",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/InariDescription.tsx)\n\nThis code defines a React functional component called `InariDescription` that renders a header section for a specific entity in the larger project. The component imports the `React` library and the `FC` (FunctionComponent) type from the `react` module, as well as the `Typography` component and a custom hook called `useDerivedInariState` from other files in the project.\n\nThe `InariDescription` component takes no props, but uses the `useDerivedInariState` hook to retrieve the `general` object from the `inari` state. This object contains information about the entity, such as its name and description.\n\nThe component then renders a `div` element with a CSS class of `grid` and a gap of 2 units between its child elements. Inside the `div`, it renders two `Typography` components. The first one displays the name of the entity in a large font size and with a high emphasis color, while the second one displays its description in a regular font size.\n\nThis component can be used in other parts of the project to display the header section of any entity that has a `general` object in its `inari` state. For example, if the project has a `zoo` entity, the `InariDescription` component can be used to display its name and description in the header section of the `zoo` page.\n\nHere's an example of how the `InariDescription` component can be used in a `zoo` page:\n\n```\nimport React from 'react'\nimport InariDescription from './InariDescription'\n\nconst ZooPage = () => {\n return (\n \n
\n )\n}\n\nexport default ZooPage\n```\n## Questions: \n 1. What is the purpose of the `InariHeaderProps` interface?\n - The `InariHeaderProps` interface is used to define the props that can be passed to the `InariDescription` component.\n\n2. What is the `useDerivedInariState` hook and where is it defined?\n - The `useDerivedInariState` hook is defined in the `../../state/inari/hooks` file and is used to access the derived state of the `inari` slice of the Redux store.\n\n3. What is the `Typography` component and where is it defined?\n - The `Typography` component is defined in the `../../components/Typography` file and is used to render text with different styles and variants.","metadata":{"source":".autodoc/docs/markdown/core/src/features/inari/InariDescription.md"}}],["788",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/OutputPanel.tsx)\n\nThis code defines a React functional component called `OutputPanel` that renders a `CurrencyInputPanel` component with some custom props. The `CurrencyInputPanel` component is imported from a file located at `../exchange-v1/limit-order/CurrencyInputPanel`. The `OutputPanel` component takes in a single prop called `label` of type string. \n\nThe `CurrencyInputPanel` component is a custom input component that allows users to input a currency value. It consists of two main components: a select component and an input component. The select component is a `Typography` component that displays the currency symbol and label passed in as a prop. The input component is a `div` element with a custom class that styles it to look like an input field. \n\nThe `OutputPanel` component customizes the `CurrencyInputPanel` component by passing in the following props:\n- `id`: a string that sets the id of the `CurrencyInputPanel` component to \"token-output\"\n- `className`: a string that sets the class of the `CurrencyInputPanel` component to \"rounded p-0 px-5 border-2 border-dark-800 flex items-center\"\n- `selectComponent`: a JSX element that renders the `Typography` component with the `label` prop passed in as its child\n- `inputComponent`: a JSX element that renders a `div` element with a custom class that styles it to look like an input field\n\nThis component can be used in a larger project that requires a custom input component for currency values. It can be imported and used in any React component that needs to display an output currency value. For example, in a financial application that displays the total value of a user's portfolio, the `OutputPanel` component can be used to display the value in the user's preferred currency. \n\nExample usage:\n```\nimport React from 'react';\nimport OutputPanel from './OutputPanel';\n\nconst PortfolioValue = () => {\n const totalValue = 10000; // total value of user's portfolio\n const currency = 'USD'; // user's preferred currency\n\n return (\n \n
\n );\n};\n\nexport default PortfolioValue;\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n This code defines a React functional component called OutputPanel that renders a CurrencyInputPanel with a label and an input component.\n\n2. What are the props that can be passed to the OutputPanel component?\n The only prop that can be passed to the OutputPanel component is a string label.\n\n3. What other components are being imported and used in this code?\n This code imports two other components: CurrencyInputPanel and Typography, both from different files in the project.","metadata":{"source":".autodoc/docs/markdown/core/src/features/inari/OutputPanel.md"}}],["789",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/SideSwitch.tsx)\n\nThe code defines a React functional component called SideSwitch that renders a toggle switch with two labels: \"Withdraw\" and \"Deposit\". The switch is implemented using the Switch component from the Headless UI library. The state of the switch is controlled by the zapIn variable obtained from the useInariState hook, which is part of the Inari state management system. The setZapIn function from the Inari actions is used to update the state of the switch when it is toggled. The labels are localized using the Lingui library, which provides internationalization support for React applications.\n\nThe SideSwitch component is likely used in a larger project that involves some kind of financial transaction system, where users can either withdraw or deposit funds. The switch allows the user to toggle between these two modes. The use of the Inari state management system suggests that the project is complex and requires a robust state management solution. The use of the Lingui library suggests that the project is intended for use in multiple languages and locales.\n\nHere is an example of how the SideSwitch component might be used in a parent component:\n\n```\nimport React from 'react'\nimport SideSwitch from './SideSwitch'\n\nconst TransactionForm = () => {\n return (\n Portfolio Value
\n\n
\n )\n}\n\nexport default TransactionForm\n```\n\nIn this example, the SideSwitch component is rendered as part of a larger transaction form. The form allows the user to enter transaction details, such as the amount to withdraw or deposit. The SideSwitch component allows the user to toggle between these two modes.\n## Questions: \n 1. What is the purpose of this code and where is it used in the project?\n - This code is a React component called `SideSwitch` that renders a switch with labels for \"Withdraw\" and \"Deposit\". It is likely used in a UI component related to financial transactions.\n2. What external libraries or dependencies does this code rely on?\n - This code relies on several external libraries including `@headlessui/react`, `@heroicons/react/outline`, `@lingui/macro`, `@lingui/react`, and custom hooks from `../../state/inari/hooks` and `../../state/hooks`.\n3. What state is being managed by this component and how is it updated?\n - The `zapIn` state is being managed by this component and is updated by dispatching the `setZapIn` action with the opposite boolean value of the current `zapIn` state when the switch is toggled. The `zapIn` state is obtained from the `useInariState` hook and the `setZapIn` action is dispatched using the `useAppDispatch` hook.","metadata":{"source":".autodoc/docs/markdown/core/src/features/inari/SideSwitch.md"}}],["790",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/StrategySelector.tsx)\n\nThe code above is a React component called `StrategySelector` that renders a list of strategies and allows the user to select one. The component is part of a larger project called `zoo` and imports several functions and hooks from other files in the project.\n\nThe `StrategySelector` component receives no props and uses three hooks: `useInariState`, `useInariStrategies`, and `useAppDispatch`. These hooks are used to retrieve the current strategy ID, a list of available strategies, and a dispatch function to update the state of the application.\n\nThe component renders a `div` element with a class of `flex flex-col gap-4 z-10 relative`. Inside this `div`, the component maps over the list of strategies and renders a `div` element for each one. Each `div` element has a `key` attribute set to the strategy's ID and an `onClick` event listener that dispatches an action to update the current strategy ID when the user clicks on it.\n\nThe `classNames` function is used to conditionally set the `className` attribute of each `div` element based on whether the strategy is currently selected or not. If the strategy is selected, the `className` attribute is set to `'border-gradient-r-blue-pink-dark-800'`, otherwise it is set to `'bg-dark-900'`. The `classNames` function also adds several other classes to each `div` element, including `'cursor-pointer'`, `'border'`, `'border-transparent'`, `'pl-5'`, `'py-2'`, `'rounded'`, `'whitespace-nowrap'`, `'w-full'`, `'font-bold'`, `'h-[48px]'`, `'flex'`, `'items-center'`, and `'text-sm'`. These classes are used to style the `div` elements to look like buttons.\n\nFinally, the `div` elements display the name of each strategy, which is retrieved from the `general.name` property of each strategy object.\n\nOverall, the `StrategySelector` component is a reusable UI component that allows the user to select a strategy from a list of available strategies. It is likely used in conjunction with other components and functions in the `zoo` project to provide a complete user interface for managing and analyzing data related to animal behavior. An example usage of this component might look like:\n\n```\nimport StrategySelector from './components/StrategySelector'\n\nfunction App() {\n return (\n Transaction Form
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this component and how is it used within the larger project?\n - This component appears to be a strategy selector that is used within the Inari feature of the project. It renders a list of strategies and allows the user to select one. It is likely used in conjunction with other components to provide a complete user interface for managing Inari strategies.\n2. What is the `useInariState` hook and what data does it provide?\n - The `useInariState` hook is imported from a file located at `../../state/inari/hooks` and appears to provide access to the current Inari state, including the selected strategy ID.\n3. What is the purpose of the `classNames` function and where is it defined?\n - The `classNames` function is imported from a file located at `../../functions` and appears to be used to conditionally apply CSS classes to the rendered `div` element based on the current strategy ID. It likely provides a convenient way to generate complex class names based on dynamic data.","metadata":{"source":".autodoc/docs/markdown/core/src/features/inari/StrategySelector.md"}}],["791",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/StrategyStepDisplay.tsx)\n\nThe `StrategyStepDisplay` component is a React functional component that displays a list of steps in a strategy. It receives no props and uses the `useDerivedInariState` hook to retrieve the `general` property from the Inari state. \n\nThe component renders a `div` element with a class of `flex items-center gap-3 text-high-emphesis`. Inside this `div`, the component maps over the `general.steps` array and creates a `Typography` component for each step. The `Typography` component receives a `weight` prop of `700` and a `variant` prop of `lg`, and displays the text of the step.\n\nAfter mapping over the `general.steps` array, the component uses the `reduce` method to concatenate the `Typography` components with an `ArrowRightIcon` component in between each one. The `reduce` method takes two arguments: a callback function and an initial value. The callback function takes two arguments: an accumulator and the current value. The initial value is `null`.\n\nThe callback function checks if the accumulator is `null`. If it is, it returns the current value. If it is not, it returns a `div` element containing the accumulator, an `ArrowRightIcon` component, and the current value. The `ArrowRightIcon` component has a `width` prop of `16` and a `height` prop of `16`. The `div` element has a class of `rounded-full p-1 bg-dark-800 border-[3px] border-dark-900 relative z-10`.\n\nThe resulting JSX is then rendered inside the `div` element with the `flex items-center gap-3 text-high-emphesis` class.\n\nThis component can be used in a larger project to display a list of steps in a strategy. For example, it could be used in a financial planning app to display the steps a user needs to take to achieve their financial goals. Here is an example of how the component could be used:\n\n```\nSelect a strategy:
\n| \n | \n \n | \n \n | \n
|---|---|---|
| {item.name} | \n{item.age} | \n{item.date} | \n
\n
\n )\n}\n\nexport default BorrowMarket\n```\n## Questions: \n 1. What is the purpose of the `MarketHeader` function and what are its expected inputs and outputs?\n- The `MarketHeader` function is a React component that returns a `Card.Header` element with a title, search input, and search icon. It takes in two props: `type` (default value of 'Borrow') and `lists`, and returns a JSX element.\n\n2. What is the purpose of the `onSearch` function and how is it used?\n- The `onSearch` function is called when the user types into the search input and updates the search term for each list in the `lists` array. It is used as an event handler for the `onChange` event of the search input.\n\n3. What is the purpose of the `classNames` function and where is it imported from?\n- The `classNames` function is used to conditionally apply CSS classes to the `Card.Header` element based on the value of the `type` prop. It is imported from a file located at `../../functions`.","metadata":{"source":".autodoc/docs/markdown/core/src/features/kashi/MarketHeader.md"}}],["797",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/kashi/SmartNumberInput.tsx)\n\nThe `SmartNumberInput` function is a React component that renders a form input field with additional functionality for handling numeric values. The component takes in several props that allow for customization of the input field and its behavior. \n\nThe component renders two main sections: a header section and an input section. The header section displays a title, a button to toggle between using a BentoBox or a Wallet, and a maximum value. The input section displays a numeric input field and a button to set the input value to the maximum value. \n\nThe `SmartNumberInput` component is designed to be used in a larger project where numeric input fields are required. The component can be customized to fit the specific needs of the project by passing in different props. For example, the `color` prop can be used to change the color of the input field and the `useBento` prop can be used to determine whether the input value is coming from a BentoBox or a Wallet. \n\nHere is an example of how the `SmartNumberInput` component can be used in a React project:\n\n```\nimport SmartNumberInput from './SmartNumberInput'\n\nfunction MyForm() {\n const [value, setValue] = useState('')\n const max = BigNumber.from(1000)\n\n return (\n \n )\n}\n```\n\nIn this example, the `SmartNumberInput` component is used in a form to handle numeric input for a token. The `value` and `setValue` props are used to control the value of the input field, and the `max` prop is used to set the maximum value of the input field. The `showMax` prop is set to `true` to display the maximum value button.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code defines a React component called `SmartNumberInput` that renders a form input field with some additional features such as a toggle button and a maximum value display.\n\n2. What external libraries or dependencies does this code rely on?\n- This code imports two components from the `react-feather` library, as well as the `BigNumber` class from the `@ethersproject/bignumber` library. It also uses two custom components called `Button` and `Input` that are presumably defined elsewhere in the project.\n\n3. What are the optional props that can be passed to this component and what do they do?\n- The `SmartNumberInput` component accepts several optional props, including `color` (which determines the color scheme of the component), `token` (which is an object containing information about a cryptocurrency token), `value` (which is the current value of the input field), `setValue` (which is a function to update the value of the input field), and several others. These props control various aspects of the component's behavior and appearance, such as whether to display a maximum value button, whether to use a BentoBox or wallet balance, and whether the component is disabled.","metadata":{"source":".autodoc/docs/markdown/core/src/features/kashi/SmartNumberInput.md"}}],["798",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/kashi/TradeReview.tsx)\n\nThe `TradeReview` component is a React component that displays a summary of a trade that is about to be executed on a decentralized exchange. The component takes two props: `trade` and `allowedSlippage`. `trade` is an object that represents the trade to be executed, while `allowedSlippage` is a number that represents the maximum amount of slippage that is allowed for the trade.\n\nThe component first imports several modules from the `@zoolabs/zdk` library, as well as several React components and hooks. It then defines the `TradeReview` function component, which returns a JSX element that displays the trade summary.\n\nThe component first checks if a trade object has been passed as a prop. If not, it displays a message indicating that no liquidity was found to do the swap. If a trade object is present, the component displays several pieces of information about the trade, including the minimum amount of output currency that will be received, the price impact of the trade, and the liquidity provider fee.\n\nThe component also checks if the trade has a route with more than two tokens. If so, it displays the route that the trade will take through the tokens.\n\nThe `TradeReview` component is likely used in a larger project that involves executing trades on a decentralized exchange. It provides users with a summary of the trade they are about to execute, including important information such as the minimum amount of output currency they will receive and the price impact of the trade. This information can help users make informed decisions about whether to proceed with the trade or not.\n## Questions: \n 1. What is the purpose of the `TradeReview` component?\n- The `TradeReview` component is used to display information about a trade, including the minimum amount received, price impact, liquidity provider fee, and route.\n\n2. What libraries and hooks are being imported in this file?\n- The file is importing `@zoolabs/zdk`, `React`, `useMemo`, `@lingui/macro`, `useActiveWeb3React`, and `useLingui`.\n\n3. What is the significance of the `allowedSlippage` prop?\n- The `allowedSlippage` prop is used to determine the minimum amount of output currency that must be received in a trade, taking into account the maximum allowable slippage.","metadata":{"source":".autodoc/docs/markdown/core/src/features/kashi/TradeReview.md"}}],["799",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/kashi/TransactionReview.tsx)\n\nThe `TransactionReviewView` function in this file is a React component that renders a transaction review. It takes a single prop, `transactionReview`, which is an array of objects representing each line of the review. Each object has three properties: `name`, `from`, and `to`, which represent the name of the transaction, the sender of the transaction, and the recipient of the transaction, respectively. Additionally, each object has a `direction` property, which is an enum value from the `Direction` enum defined in `TransactionReview.ts`.\n\nThe component first checks if `transactionReview` is truthy and has a length greater than 0. If so, it renders a heading (\"Transaction Review\") and a list of lines, where each line is rendered as a flexbox with two columns: the name of the transaction in the left column, and the sender and recipient in the right column. The direction of the transaction is indicated by an arrow icon between the sender and recipient, with the icon pointing right for a flat transaction, up for a positive transaction, and down for a negative transaction.\n\nThis component can be used in the larger project to display a summary of a transaction review to the user. For example, it could be used in a wallet application to show the user a summary of the transactions they have made or received. Here is an example usage of the component:\n\n```jsx\nimport TransactionReviewView from './TransactionReviewView'\n\nconst transactionReview = [\n {\n name: 'Transaction 1',\n from: 'Alice',\n to: 'Bob',\n direction: Direction.UP,\n },\n {\n name: 'Transaction 2',\n from: 'Charlie',\n to: 'Alice',\n direction: Direction.FLAT,\n },\n {\n name: 'Transaction 3',\n from: 'Bob',\n to: 'Eve',\n direction: Direction.DOWN,\n },\n]\n\nfunction MyComponent() {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `TransactionReviewView` function?\n- The `TransactionReviewView` function is a React component that renders a list of transaction review lines.\n\n2. What is the `TransactionReview` entity and where is it defined?\n- The `TransactionReview` entity is used as a type for the `transactionReview` prop passed to the `TransactionReviewView` component. It is defined in a file located at `../../entities/TransactionReview`.\n\n3. What is the purpose of the `ArrowRight`, `ArrowUpRight`, and `ArrowDownRight` components imported from `react-feather`?\n- These components are icons that are used to indicate the direction of a transaction review line. The `ArrowRight` component is used for a flat direction, `ArrowUpRight` for an up direction, and `ArrowDownRight` for a down direction.","metadata":{"source":".autodoc/docs/markdown/core/src/features/kashi/TransactionReview.md"}}],["800",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/kashi/WarningsList.tsx)\n\nThe code above is a React component that renders a list of warnings. It imports the `Alert` component from the `../../components/Alert` file and the `Warnings` entity from the `../../entities/Warnings` file. The `WarningsList` function takes a single parameter, `warnings`, which is an array of `Warnings` objects. \n\nThe `WarningsList` function returns a list of `Alert` components, one for each warning in the `warnings` array. The `map` function is used to iterate over the `warnings` array and create an `Alert` component for each warning. The `key` prop is set to the index of the warning in the array, and the `type` prop is set to `'error'` if the warning is marked as `breaking`, and `'warning'` otherwise. The `message` prop is set to the `message` property of the warning object. Finally, the `className` prop is set to `'mb-4'` to add some margin to each `Alert` component.\n\nThis component can be used in the larger project to display a list of warnings to the user. For example, if the project has a build process that checks for potential issues or breaking changes, the `WarningsList` component can be used to display these warnings to the user. The `Warnings` entity can be populated with the results of the build process, and passed to the `WarningsList` component to display the warnings. \n\nHere is an example of how the `WarningsList` component can be used in a larger project:\n\n```\nimport React from 'react'\nimport WarningsList from './WarningsList'\nimport { getBuildWarnings } from './build'\n\nfunction App() {\n const warnings = getBuildWarnings()\n\n return (\n \n
\n )\n}\n\nexport default App\n```\n\nIn this example, the `App` component calls the `getBuildWarnings` function to get an array of `Warnings` objects, and passes it to the `WarningsList` component as a prop. The `WarningsList` component then renders a list of `Alert` components for each warning in the array.\n## Questions: \n 1. What is the purpose of the `Alert` component being imported?\n- The `Alert` component is being used to display warning messages in the `WarningsList` component.\n\n2. What is the `Warnings` entity and where is it defined?\n- The `Warnings` entity is being used as a type for the `warnings` prop in the `WarningsList` component. It is defined in a file located at `zoo/entities/Warnings`.\n\n3. What determines whether the `Alert` component displays an error or warning message?\n- The `type` prop of the `Alert` component is determined by the `breaking` property of each `warning` object. If `breaking` is true, the type will be set to `'error'`, otherwise it will be set to `'warning'`.","metadata":{"source":".autodoc/docs/markdown/core/src/features/kashi/WarningsList.md"}}],["801",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/kashi/Withdraw.tsx)\n\nThe `LendWithdrawAction` function is a React component that handles the withdrawal of assets from a Kashi market. The component takes a `pair` object as a prop, which contains information about the asset pair being traded in the market. The component renders a form that allows the user to specify the amount of the asset they wish to withdraw, and provides feedback on the potential transaction.\n\nThe component uses several hooks to manage state and perform actions. The `useActiveWeb3React` hook retrieves the current Ethereum account from the user's web3 provider. The `useKashiApprovalPending` hook checks whether the user has approved the Kashi market to spend their assets. The `useKashiApproveCallback` hook handles the approval process and returns several functions that are used in the withdrawal process.\n\nThe component uses several pieces of information from the `pair` object to calculate the maximum amount of the asset that can be withdrawn, and to determine the amount of the asset that the user wishes to withdraw. The `minimum` function is used to ensure that the calculated values do not exceed certain limits.\n\nThe component also performs several checks to ensure that the withdrawal is valid. The `Warnings` class is used to store any warnings that may be generated during the withdrawal process. If any warnings are present, they are displayed to the user. The `TransactionReview` class is used to store information about the potential transaction, such as the amount of the asset being withdrawn and the resulting changes to the user's balances.\n\nFinally, the component renders a button that initiates the withdrawal process. When the button is clicked, the `onCook` function is called with the `pair` object and an `onExecute` function as arguments. The `onExecute` function calculates the fraction of the asset to be withdrawn and calls the `removeAsset` function on a `KashiCooker` object to initiate the withdrawal. The `onCook` function then returns a string indicating the success of the withdrawal.\n\nExample usage:\n\n```jsx\nMy App
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `CurrencyInputPanel` that renders a panel for inputting currency amounts and displays information about the selected currency.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several modules from external libraries, including `@zoolabs/zdk`, `next/image`, `@lingui/macro`, and `useUSDCPrice`.\n\n3. What props does the `CurrencyInputPanel` component expect?\n- The `CurrencyInputPanel` component expects three props: `field`, which specifies the currency field to which this panel corresponds; `meowshiState`, which contains information about the currencies and input fields; and `showMax`, which determines whether a \"Max\" button should be displayed to allow the user to input the maximum available balance for the selected currency.","metadata":{"source":".autodoc/docs/markdown/core/src/features/meowshi/CurrencyInputPanel.md"}}],["804",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/meowshi/HeaderToggle.tsx)\n\nThe `HeaderToggle` component is a React functional component that renders a toggle switch with two options: \"Meow\" and \"Un-Meow\". The toggle switch is implemented using the `RadioGroup` component from the `@headlessui/react` library. \n\nThe component takes in a prop called `meowshiState`, which is an object that contains two properties: `meow` and `switchCurrencies`. `meow` is a boolean value that represents the current state of the toggle switch, and `switchCurrencies` is a function that toggles the value of `meow`. \n\nWhen the component is rendered, it displays the toggle switch with two options: \"Meow\" and \"Un-Meow\". The currently selected option is highlighted with a gradient background color. When the user clicks on one of the options, the `switchCurrencies` function is called to toggle the value of `meow`. \n\nIn addition to the toggle switch, the component also displays a text box that shows the conversion rate between xSUSHI and MEOW. The text box is styled with a gradient border and a rounded border radius. \n\nThis component can be used in the larger project to allow users to toggle between different modes or settings. For example, it could be used to toggle between light mode and dark mode, or between different languages. The `HeaderToggle` component can be easily customized by changing the text and styling to fit the specific needs of the project. \n\nExample usage:\n\n```\nimport HeaderToggle from './HeaderToggle'\n\nfunction App() {\n const [meowshiState, setMeowshiState] = useState({ meow: true })\n\n const handleSwitchCurrencies = () => {\n setMeowshiState({ meow: !meowshiState.meow })\n }\n\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a React component called `HeaderToggle` that renders a radio group with two options and a text element.\n\n2. What props does the `HeaderToggle` component expect?\n- The `HeaderToggle` component expects a prop called `meowshiState` of type `MeowshiState`.\n\n3. What external libraries or components are being used in this code?\n- This code imports `React`, `RadioGroup` from `@headlessui/react`, `Typography`, and `classNames`.","metadata":{"source":".autodoc/docs/markdown/core/src/features/meowshi/HeaderToggle.md"}}],["805",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/meowshi/MeowshiButton.tsx)\n\nThe `MeowshiButton` component is a React functional component that renders a button for converting between SUSHI and xSUSHI tokens using the Meowshi protocol. The component imports various hooks, components, and utility functions from different files in the project. \n\nThe component takes a single prop `meowshiState` which is an object containing the current state of the Meowshi protocol. The state includes the currencies being converted, the input and output fields, and a boolean flag indicating whether the user wants to convert from SUSHI to xSUSHI or vice versa. \n\nThe component first initializes various state variables using the `useState` hook. It then uses the `useActiveWeb3React` hook to get the current user's account and chain ID. It also uses the `useTokenBalance` hook to get the user's SUSHI and xSUSHI token balances. \n\nThe component then uses the `useMeowshi` hook to get the current approval state and to approve, convert, and unconvert tokens using the Meowshi protocol. It also uses the `tryParseAmount` function to parse the input and output amounts entered by the user. \n\nThe component then renders different buttons depending on the current approval state and network. If the user is not connected to a wallet, the component renders a disabled button prompting the user to connect to a wallet. If the user is on a network other than the mainnet, the component renders a disabled button indicating that the network is not yet supported. If the user has not yet approved the Meowshi protocol to spend their tokens, the component renders a button prompting the user to approve the protocol. If the user has approved the protocol, the component renders a button that, when clicked, opens a confirmation modal and converts the tokens. \n\nOverall, this component provides a simple and user-friendly way for users to convert between SUSHI and xSUSHI tokens using the Meowshi protocol. It can be used in the larger project as a building block for more complex features that involve token conversions. \n\nExample usage:\n\n```jsx\nimport MeowshiButton from './MeowshiButton';\n\nconst MyComponent = () => {\n const meowshiState = {\n currencies: {\n input: SUSHI,\n output: XSUSHI\n },\n fields: {\n input: '10',\n output: ''\n },\n meow: true\n };\n\n return (\n \n
\n );\n};\n```\n## Questions: \n 1. What is the purpose of the `MeowshiButton` component?\n- The `MeowshiButton` component is used to render a button that allows the user to convert between two different currencies.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including `@zoolabs/zdk`, `@ethersproject/units`, `@lingui/macro`, and several custom hooks and components.\n\n3. What conditions must be met for the button to be enabled?\n- The button is enabled if the user is connected to a wallet, the network is set to `ChainId.MAINNET`, and the user has approved the necessary token allowance. Additionally, the button is disabled if the user's balance is insufficient or if no amount has been entered.","metadata":{"source":".autodoc/docs/markdown/core/src/features/meowshi/MeowshiButton.md"}}],["806",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/migration/index.ts)\n\nThe code above is a simple export statement that defines an array called `MigrationSupported`. This array contains three elements, which are constants imported from the `@zoolabs/zdk` library: `ChainId.MAINNET`, `ChainId.BSC`, and `ChainId.MATIC`. \n\nThe purpose of this code is to provide a list of supported blockchain networks for the migration of assets in the larger zoo project. The `ChainId` constants represent unique identifiers for different blockchain networks, and by including them in the `MigrationSupported` array, the code ensures that assets can be migrated between these networks. \n\nFor example, if a user wants to migrate an asset from the Binance Smart Chain (BSC) to the Polygon (MATIC) network, they can use the `MigrationSupported` array to check if this migration is supported. They can do this by checking if both `ChainId.BSC` and `ChainId.MATIC` are included in the array. If they are, the migration is supported, and the user can proceed with the migration. \n\nHere's an example of how this code might be used in the larger zoo project:\n\n```javascript\nimport { MigrationSupported } from 'zoo'\n\nconst sourceChain = ChainId.BSC\nconst targetChain = ChainId.MATIC\n\nif (MigrationSupported.includes(sourceChain) && MigrationSupported.includes(targetChain)) {\n // Perform asset migration from BSC to MATIC\n} else {\n console.log('Asset migration not supported for the selected source and target chains.')\n}\n```\n\nIn this example, the `MigrationSupported` array is imported from the `zoo` module. The `sourceChain` and `targetChain` variables are set to `ChainId.BSC` and `ChainId.MATIC`, respectively. The `includes()` method is then used to check if both `sourceChain` and `targetChain` are included in the `MigrationSupported` array. If they are, the asset migration can proceed. If not, an error message is logged to the console. \n\nOverall, this code provides a simple and flexible way to manage asset migrations between different blockchain networks in the larger zoo project.\n## Questions: \n 1. What is the purpose of this code?\n - This code exports an array of supported chain IDs for migration in the `zoo` project.\n\n2. What is the `ChainId` module and where does it come from?\n - The `ChainId` module is imported from the `@zoolabs/zdk` package, which is likely a custom library developed by the `zoo` project team.\n\n3. Are there any other modules or functions that depend on this `MigrationSupported` array?\n - Without further context, it is unclear whether other parts of the `zoo` project depend on this array. However, it is possible that other migration-related functions or modules may reference this array.","metadata":{"source":".autodoc/docs/markdown/core/src/features/migration/index.md"}}],["807",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/miso/Article.tsx)\n\nThe code above defines a React functional component called `Article`. This component takes in two props: `title` and `content`. The `title` prop is optional and has a default value of an empty string. The `content` prop is required and has no default value. \n\nThe purpose of this component is to render an article with a title and content. The article is contained within a `div` element with a class of `col-span-12 md:col-span-6 xl:col-span-4 xl:mx-8`, which is a CSS class used for grid layout. The title is rendered within a nested `div` element with a class of `self-end mb-3 text-lg font-bold md:text-xl text-high-emphesis md:mb-7`. This class is used for styling the title to be bold and larger on medium and large screens. The content is rendered within another nested `div` element with a class of `pr-3 mb-2 text-sm leading-5 text-white opacity-50 md:text-base md:mb-4 md:pr-0`. This class is used for styling the content to be smaller and less opaque than the title, and to have some padding on the right side.\n\nThis component can be used in a larger project to display articles with a consistent layout and styling. For example, if a blog website was being built with React, this component could be used to render each blog post with a title and content. Here is an example of how this component could be used:\n\n```\nimport React from 'react';\nimport Article from './Article';\n\nfunction BlogPost({ title, content }) {\n return (\n \n );\n}\n\nexport default BlogPost;\n```\n\nIn this example, the `BlogPost` component takes in `title` and `content` props and passes them down to the `Article` component. This allows for consistent styling and layout of each blog post on the website.\n## Questions: \n 1. What is the purpose of the `Article` function?\n- The `Article` function is a React component that renders an article with a title and content.\n\n2. What is the data type of the `title` and `content` props?\n- The `title` prop is of type `any` and is optional, while the `content` prop is of type `any` and is required.\n\n3. What is the purpose of the CSS classes used in the JSX code?\n- The CSS classes are used to style the article component, including the font size, color, and layout.","metadata":{"source":".autodoc/docs/markdown/core/src/features/miso/Article.md"}}],["808",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/miso/Articles.tsx)\n\nThe code above is a React component called `Articles` that takes in an array of objects as a prop, where each object represents an article with a `title` and `content`. The component then maps over the array and renders an `Article` component for each object in the array, passing in the `title` and `content` as props. \n\nThe `Article` component is imported from a file located at `./Article`, which suggests that this code is part of a larger project with multiple components. The purpose of this code is to render a list of articles on a webpage, where each article is represented by an `Article` component. \n\nThis component can be used in a variety of ways within the larger project. For example, it could be used to display a list of blog posts, news articles, or any other type of content that is organized into articles. \n\nHere is an example of how this component could be used in a larger project:\n\n```jsx\nimport React from 'react'\nimport Articles from './Articles'\n\nconst articles = [\n {\n title: 'The Importance of Exercise',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'\n },\n {\n title: 'Healthy Eating Habits',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'\n },\n {\n title: 'Mental Health Awareness',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'\n }\n]\n\nfunction App() {\n return (\n \n
\n )\n}\n\nexport default App\n```\n\nIn this example, the `Articles` component is used to render a list of three articles with titles and content. The `articles` array is passed in as a prop to the `Articles` component, which then maps over the array and renders an `Article` component for each object in the array. The resulting output would be a list of three articles with titles and content displayed on the webpage.\n## Questions: \n 1. What is the purpose of the `Article` component being imported?\n - The `Article` component is being imported to be used in the `Articles` function.\n\n2. What is the expected data structure for the `articles` prop?\n - The `articles` prop is expected to be an array of objects with properties `title` and `content`.\n\n3. What does the `key` prop do in the `Article` component being returned?\n - The `key` prop is used to uniquely identify each `Article` component when rendering a list of them, and is set to `article-${i}` where `i` is the index of the current `article` in the `articles` array.","metadata":{"source":".autodoc/docs/markdown/core/src/features/miso/Articles.md"}}],["809",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/CurrencyInputPanel.tsx)\n\nThe `CurrencyInputPanel` component is a reusable UI component that provides an input field for users to enter a currency amount, along with an optional button to set the input field to the maximum available balance for the selected currency. The component also displays the currency symbol and logo, along with the current balance and fiat value of the selected currency.\n\nThe component takes in several props, including the current value of the input field, a callback function to handle user input, a boolean flag to show or hide the \"max\" button, the current balance of the selected currency, the fiat value of the selected currency, and various other optional flags to customize the appearance of the component.\n\nInternally, the component uses several other components and hooks from the `@zoolabs/zdk`, `@heroicons/react/outline`, `@lingui/react`, and `lottie-react` libraries to render the currency logo, fiat value, and animation for the \"max\" button. The component also uses the `classNames` and `formatCurrencyAmount` functions from the `../../functions` module to apply CSS classes and format currency amounts, respectively.\n\nOverall, the `CurrencyInputPanel` component provides a flexible and customizable input field for users to enter currency amounts, along with useful information about the selected currency's balance and fiat value. This component can be used in various parts of the larger project, such as in trading interfaces or wallet management pages. \n\nExample usage:\n\n```jsx\nimport { CurrencyAmount, Currency } from \"@zoolabs/zdk\";\nimport CurrencyInputPanel from \"./CurrencyInputPanel\";\n\nfunction MyComponent() {\n const [value, setValue] = useState(\"\");\n const currencyBalance = new CurrencyAmountArticles
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code defines a React component called `CurrencyInputPanel` that renders a panel for inputting a currency amount, including an optional currency logo, input field, and balance information.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies, including `@zoolabs/zdk`, `@heroicons/react/outline`, `lottie-react`, `@lingui/macro`, and several custom components and hooks defined elsewhere in the project.\n\n3. What are the optional props that can be passed to the `CurrencyInputPanel` component?\n- The `CurrencyInputPanel` component accepts several optional props, including `value`, `onUserInput`, `onMax`, `showMaxButton`, `currency`, `id`, `currencyBalance`, `fiatValue`, `priceImpact`, `hideBalance`, `hideInput`, and `hideIcon`. These props control the behavior and appearance of the component, such as the initial input value, whether to show a \"max\" button, and whether to hide the currency logo or balance information.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/CurrencyInputPanel.md"}}],["810",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/FarmList.tsx)\n\nThe `FarmList` component is a React component that renders a list of farms. It receives two props: `farms`, which is an array of farm objects, and `term`, which is a search term used to filter the farms. \n\nThe component uses the `useSortableData` hook to enable sorting of the farms by different criteria such as symbol, TVL, and APR. The sorting is triggered by clicking on the corresponding column header, which calls the `requestSort` function with the appropriate key. The current sort configuration is stored in the `sortConfig` object, which is used to display an up or down arrow next to the column header to indicate the sort direction.\n\nThe component also uses the `useInfiniteScroll` hook to enable infinite scrolling of the farms. The `numDisplayed` state variable keeps track of the number of farms currently displayed, and is updated by the `setNumDisplayed` function when the user scrolls to the bottom of the list. The `InfiniteScroll` component from the `react-infinite-scroll-component` library is used to detect when the user has reached the bottom of the list and trigger the loading of more farms.\n\nEach farm in the list is rendered using the `FarmListItem` component, which receives a single `farm` prop. The `FarmListItem` component is not shown in this code snippet, but it is likely responsible for rendering the individual farm details such as the farm name, symbol, TVL, and APR.\n\nOverall, the `FarmList` component provides a flexible and interactive way to display and sort a list of farms, while also enabling infinite scrolling to handle large lists. It can be used as a standalone component or as part of a larger project that involves displaying and managing farms. \n\nExample usage:\n\n```jsx\nimport FarmList from './FarmList'\n\nconst farms = [\n { symbol: 'ETH-USDT', tvl: 1000000, roiPerYear: 0.1 },\n { symbol: 'BTC-USDT', tvl: 2000000, roiPerYear: 0.2 },\n { symbol: 'USDC-USDT', tvl: 3000000, roiPerYear: 0.3 },\n]\n\nfunction App() {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `useSortableData` hook?\n - The `useSortableData` hook is used to sort the `farms` array based on the user's request.\n\n2. What is the purpose of the `InfiniteScroll` component?\n - The `InfiniteScroll` component is used to render a list of `FarmListItem` components and load more items as the user scrolls down the page.\n\n3. What is the purpose of the `Dots` component?\n - The `Dots` component is used to display a loading animation while the `farms` data is being fetched.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/FarmList.md"}}],["811",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/FarmListItem.tsx)\n\nThe `FarmListItem` component is a React component that renders a single farm item in a list of farms. It takes a `farm` object as a prop, which contains information about the farm, such as the tokens being farmed, the TVL (total value locked), rewards, and ROI (return on investment).\n\nThe component uses the `Disclosure` component from the `@headlessui/react` library to create a collapsible section for each farm item. When the user clicks on the farm item, the section expands to show more details about the farm.\n\nThe component uses several other components and functions from the project, such as `DoubleLogo`, `Image`, `QuestionHelper`, and `useCurrency`. It also imports the `PairType` enum from another file.\n\nThe component renders the farm item using a grid layout with four columns. The first column displays the tokens being farmed, along with their logos and symbols. The second column displays the TVL of the farm. The third column displays the rewards being earned by the farm, along with their icons and reward rates. The fourth column displays the ROI of the farm, along with a tooltip that shows the reward APR and fee APY.\n\nThe component uses several utility functions to format numbers and percentages, such as `formatNumber` and `formatPercent`. It also uses the `classNames` function to conditionally apply CSS classes based on whether the farm item is open or closed.\n\nOverall, the `FarmListItem` component is a reusable component that can be used to display a list of farms in the larger project. It provides a consistent and user-friendly way to view and interact with farms, and can be customized and extended as needed.\n## Questions: \n 1. What is the purpose of the `FarmListItem` component?\n- The `FarmListItem` component is used to display information about a farm, including its tokens, TVL, rewards, and ROI.\n\n2. What is the `Disclosure` component from `@headlessui/react` used for?\n- The `Disclosure` component is used to create a collapsible section that can be expanded or collapsed by clicking a button.\n\n3. What is the `QuestionHelper` component used for?\n- The `QuestionHelper` component is used to display a tooltip with additional information about a farm's reward APR and fee APY.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/FarmListItem.md"}}],["812",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/FarmListItemDetails.tsx)\n\nThe `FarmListItemDetails` component is a React component that renders a panel containing information about a farm. The component imports several dependencies, including `React`, `useState`, `PairType` from an enum file, `Disclosure`, `Tab`, and `Transition` from the `@headlessui/react` library, `t` and `useLingui` from the `@lingui` library, `useActiveWeb3React` from a custom hook, `Token` and `ZERO` from the `@zoolabs/zdk` library, `getAddress` from the `@ethersproject/address` library, and several custom hooks and components.\n\nThe component takes a `farm` object as a prop, which contains information about the farm, including the pair ID and type. The component uses this information to create a `liquidityToken` object, which is an instance of the `Token` class from the `@zoolabs/zdk` library. The `liquidityToken` object is used to retrieve the `stakedAmount` of the farm using the `useUserInfo` hook.\n\nThe component renders a `Transition` component from the `@headlessui/react` library, which animates the panel when it is shown or hidden. The panel is a `Disclosure.Panel` component from the same library, which contains an `InformationDisclosure` component and a `div` element. The `InformationDisclosure` component displays information about the farm, including the name, APR, and TVL. The `div` element contains the investment details and manage position tabs.\n\nThe `div` element contains a `toggleView` state variable, which determines whether the investment details or manage position tab is displayed. The `toggleView` variable is toggled when the user clicks the manage position or investment details button. If the investment details tab is selected, the `InvestmentDetails` component is rendered. If the manage position tab is selected, a `Tab.Group` component is rendered, which contains two `Tab` components and two `Tab.Panel` components. The `Tab` components display the text \"Lending\" or \"Liquidity\" depending on the type of pair, and \"Staking\". The `Tab.Panel` components contain the `ManageKashiPair` or `ManageSwapPair` component and the `ManageBar` component, respectively.\n\nOverall, the `FarmListItemDetails` component is a reusable component that can be used to display information about a farm and allow the user to manage their position or view investment details. It uses several custom hooks and components to retrieve and display the necessary information.\n## Questions: \n 1. What is the purpose of the `FarmListItemDetails` component?\n- The `FarmListItemDetails` component is responsible for rendering the details of a farm, including investment details and the ability to manage a user's position.\n\n2. What libraries and hooks are being used in this code?\n- This code is using several libraries and hooks, including React, @headlessui/react, @lingui/macro, @lingui/react, and @zoolabs/zdk. It is also using custom hooks from the `../../hooks` and `./hooks` files.\n\n3. What is the purpose of the `liquidityToken` variable?\n- The `liquidityToken` variable is creating a new `Token` object using the `Token` class from the `@zoolabs/zdk` library. It is used to represent the liquidity token for a given farm, which is used to calculate the staked amount for a user's position.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/FarmListItemDetails.md"}}],["813",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/FarmMenu.tsx)\n\nThe `Menu` component in the `zoo` project is responsible for rendering a menu of links to different farms. The farms are filtered based on the chain ID and the user's account. The component imports several dependencies, including `ChainId` from the `@zoolabs/zdk` library, `NavLink` from the `../../components/NavLink` file, and two hooks from the `../../hooks` and `../../state/application/hooks` files.\n\nThe `Menu` component takes a single prop, `positionsLength`, which is not used in the component. The component then uses the `useActiveWeb3React` hook to get the user's account and chain ID. It also uses the `useWalletModalToggle` hook to toggle the wallet modal when the user clicks on the \"Your Farms\" link.\n\nThe component then renders a list of links to different farms. If the user is logged in (`account` is truthy), the \"Your Farms\" link is an active link that takes the user to their portfolio of farms. If the user is not logged in, the \"Your Farms\" link is a non-active link that opens the wallet modal when clicked.\n\nThe component then renders a horizontal divider and links to \"All Farms\", \"Kashi Farms\", \"SushiSwap Farms\", and \"2x Reward Farms\". The \"Kashi Farms\" and \"SushiSwap Farms\" links are only rendered if the chain ID is `ChainId.MAINNET`. The \"2x Reward Farms\" link is only rendered if the chain ID is `ChainId.MAINNET` or `ChainId.MATIC`.\n\nOverall, the `Menu` component provides a convenient way for users to navigate to different farms in the `zoo` project. Developers can use this component in the larger project by importing it and rendering it wherever a menu of farm links is needed. For example, the component could be used in the project's header or sidebar to provide easy access to different farms.\n## Questions: \n 1. What is the purpose of the `Menu` component?\n - The `Menu` component is responsible for rendering a menu of links to different farms based on the user's account and chain ID.\n\n2. What is the significance of the `useActiveWeb3React` and `useWalletModalToggle` hooks?\n - The `useActiveWeb3React` hook is used to retrieve the user's account and chain ID from the active Web3 provider, while the `useWalletModalToggle` hook is used to toggle the display of the wallet modal.\n\n3. What is the purpose of the `NavLink` component?\n - The `NavLink` component is used to create links that are aware of the current route and can apply custom styles when active.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/FarmMenu.md"}}],["814",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/InformationDisclosure.tsx)\n\nThe `InformationDisclosure` component is a React component that displays information on how to participate in a liquidity pool or Kashi market. It is used in the larger project to provide users with a clear understanding of how to participate in the project's liquidity pools and Kashi markets.\n\nThe component uses the `Disclosure` and `Transition` components from the `@headlessui/react` library to create a collapsible panel that displays the information. When the panel is closed, a `QuestionMarkCircleIcon` is displayed, and when it is open, a `XCircle` icon is displayed to close it.\n\nThe component receives a `farm` prop, which is an object that contains information about the liquidity pool or Kashi market. The component uses this information to display the appropriate instructions for participating in the pool or market.\n\nThe component uses the `Typography` component from the `../../components/Typography` file to display text. It also uses the `NavLink` component from the `../../components/NavLink` file to create links to other pages in the project.\n\nThe component is used in the larger project to provide users with a clear understanding of how to participate in the project's liquidity pools and Kashi markets. It is displayed on the project's website and can be accessed by users who are interested in participating in the project. \n\nExample usage:\n\n```jsx\nimport InformationDisclosure from './InformationDisclosure'\n\nconst MyComponent = () => {\n const farm = {\n pair: {\n type: PairType.SWAP,\n token0: {\n id: '0x123',\n symbol: 'ETH'\n },\n token1: {\n id: '0x456',\n symbol: 'USDC'\n }\n }\n }\n\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `InformationDisclosure` component?\n- The `InformationDisclosure` component is used to display information on how to participate in a farm, including steps to provide liquidity, deposit tokens, and harvest rewards.\n\n2. What libraries and components are being imported in this file?\n- The file is importing React, Fragment, `Disclosure` and `Transition` components from `@headlessui/react`, `QuestionMarkCircleIcon` from `@heroicons/react/solid`, `XCircle` from `react-feather`, `useLingui` and `t` from `@lingui/react`, `Typography` from `../../components/Typography`, `PairType` from `./enum`, and `NavLink` from `../../components/NavLink`.\n\n3. What is the purpose of the `useLingui` hook and `t` function?\n- The `useLingui` hook is used for internationalization and localization of the text displayed in the component. The `t` function is used to translate the text into the appropriate language based on the user's locale.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/InformationDisclosure.md"}}],["815",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/InvestmentDetails.tsx)\n\nThe `InvestmentDetails` component is a React functional component that displays information about a particular investment in a farming pool. The component takes a single prop `farm`, which is an object containing information about the farming pool. \n\nThe component imports several hooks and components from various packages and files. The `useLingui` hook and `Typography` component are imported from the `@lingui` package and are used for internationalization. The `Image` component is imported from the `../../components/Image` file and is used to display images. The `useKashiPair` hook is imported from the `../kashi/context` file and is used to get information about a Kashi pair. The `useActiveWeb3React` hook is imported from the `../../hooks` file and is used to get information about the active Web3 connection. The `CurrencyAmount`, `JSBI`, `Token`, `USDC`, and `ZERO` objects are imported from the `@zoolabs/zdk` package and are used for currency calculations. The `getAddress` function is imported from the `@ethersproject/address` package and is used to get the address of a contract. The `PairType` enum is imported from the `./enum` file and is used to determine the type of farming pool. The `usePendingSushi` and `useUserInfo` hooks are imported from the `./hooks` file and are used to get information about pending Sushi rewards and user information, respectively. The `easyAmount` and `formatNumber` functions are imported from the `../../functions` file and are used for formatting numbers. The `BigNumber` object is imported from the `@ethersproject/bignumber` package and is used for big number calculations. The `usePendingReward` and `useMasterChef` hooks are imported from the `./usePendingReward` and `./useMasterChef` files, respectively, and are used to get information about pending rewards and the MasterChef contract.\n\nThe component renders a div that contains two sections: one for displaying information about the user's deposits and one for displaying information about the user's rewards. The deposits section displays the amount of liquidity tokens staked by the user, the value of the staked tokens in USD, and the amount of each token staked. The rewards section displays the amount of pending Sushi and other rewards, the value of the pending rewards in USD, and a button to harvest the rewards.\n\nThe component uses several hooks to get the necessary information for rendering the deposit and reward sections. The `useKashiPair` hook is used to get information about a Kashi pair, which is used to calculate the amount of KMP staked by the user. The `useUserInfo` hook is used to get information about the user's staked amount, which is used to calculate the amount of each token staked. The `usePendingReward` and `usePendingSushi` hooks are used to get information about the user's pending rewards. The `useMasterChef` hook is used to get the `harvest` function, which is called when the user clicks the harvest button.\n\nThe component also uses several functions to calculate the necessary values for rendering the deposit and reward sections. The `onHarvest` function is called when the user clicks the harvest button and calls the `harvest` function from the `useMasterChef` hook. The `positionFiatValue` function calculates the value of the staked tokens in USD. The `rewardValue` function calculates the value of the pending rewards in USD.\n\nOverall, the `InvestmentDetails` component is a reusable component that can be used to display information about a particular investment in a farming pool. It uses several hooks and functions to get and calculate the necessary information for rendering the deposit and reward sections.\n## Questions: \n 1. What is the purpose of the `InvestmentDetails` component?\n- The `InvestmentDetails` component is used to display information about a particular investment, including the user's deposits, rewards, and details about the investment pair.\n\n2. What external libraries and APIs are being used in this code?\n- The code is using several external libraries and APIs, including Lingui for internationalization, Next.js for routing, and the ZDK library for working with tokens and currencies.\n\n3. What is the difference between `PairType.KASHI` and `PairType.SWAP`?\n- `PairType.KASHI` and `PairType.SWAP` are two different types of pairs that can be used for investments. Kashi pairs are used for lending and borrowing, while swap pairs are used for trading one token for another.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/InvestmentDetails.md"}}],["816",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/KashiDeposit.tsx)\n\nThe `KashiDeposit` component is a React component that allows users to deposit assets into a Kashi market. Kashi is a lending and borrowing platform built on top of the Aave protocol. The component imports various dependencies such as `@lingui/macro`, `@zoolabs/zdk`, and `@ethersproject/bignumber`. \n\nThe component takes in two props: `pair` and `useBento`. `pair` is an object that contains information about the asset pair being deposited, such as the asset address and balance. `useBento` is a boolean that determines whether the deposit should be made to the BentoBox, which is a smart contract that optimizes gas usage for token transfers.\n\nThe component renders a `CurrencyInputPanel` that allows users to input the amount of assets they want to deposit. The component also calculates the user's asset balance and displays it on the panel. If the user has insufficient balance or has not entered an amount, an error message is displayed.\n\nThe component also renders a button that allows users to approve the Kashi contract to spend their assets. If the user has not approved the contract, the button will display \"Approve Kashi\". If the user has already approved the contract, the button will display \"Confirm Deposit\". If the user is using BentoBox, the component will also render a button that allows users to approve the BentoBox contract to spend their assets.\n\nWhen the user clicks the \"Confirm Deposit\" button, the `onCook` function is called with the `pair` object and an `onDeposit` function as arguments. The `onDeposit` function adds the user's assets to the Kashi market. If the exchange rate for the asset pair is zero, the `updateExchangeRate` function is called to update the exchange rate. \n\nOverall, the `KashiDeposit` component provides a user-friendly interface for depositing assets into a Kashi market. It handles the approval process and provides error messages if necessary. The component can be used in conjunction with other Kashi components to create a full-fledged lending and borrowing platform. \n\nExample usage:\n\n```\nimport KashiDeposit from './KashiDeposit';\n\nconst MyComponent = () => {\n const pair = {\n asset: {\n address: '0x123...',\n balance: '1000000000000000000',\n tokenInfo: {\n symbol: 'USDC'\n }\n },\n currentExchangeRate: '1000000000000000000'\n };\n\n return (\n \n
\n )\n}\n\nexport default MyKashiPair\n```\n\nIn this example, the `MyKashiPair` component renders a heading and the `ManageKashiPair` component, passing in the `farm` prop. The `ManageKashiPair` component handles the UI for managing the Kashi pair, while the `MyKashiPair` component provides the overall structure and context for the Kashi pair.\n## Questions: \n 1. What is the purpose of the `ManageKashiPair` component?\n- The `ManageKashiPair` component is used to manage deposits and withdrawals for a Kashi pair.\n\n2. What libraries and frameworks are being used in this code?\n- The code is using several libraries and frameworks, including `@headlessui/react`, `@heroicons/react/solid`, `@lingui/macro`, `@lingui/react`, and `React`.\n\n3. What is the significance of the `useBento` state variable?\n- The `useBento` state variable is used to determine whether to deposit/withdraw from the user's wallet or from the BentoBox smart contract.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/ManageKashiPair.md"}}],["820",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/ManageSwapPair.tsx)\n\nThe code defines a React component called `ManageSwapPair` that renders a UI for adding or removing liquidity from a token pair in a decentralized exchange. The component imports several dependencies, including React, `useState` hook, `Switch` component from the `@headlessui/react` library, and icons from the `@heroicons/react/solid` library. It also imports `Settings` component, `PoolAddLiquidity` and `PoolRemoveLiquidity` components, and a custom hook called `useCurrency` from other files in the project.\n\nThe component takes a single prop called `farm`, which is an object containing information about the token pair. The component initializes a state variable called `toggle` using the `useState` hook, which determines whether the UI should display the \"Add Liquidity\" or \"Remove Liquidity\" view. The component then uses the `useCurrency` hook to fetch information about the two tokens in the pair and renders a UI that displays a toggle switch and a `Settings` component.\n\nThe toggle switch is implemented using the `Switch` component from the `@headlessui/react` library. When the user toggles the switch, the `toggle` state variable is updated, which triggers a re-render of the component. Depending on the value of `toggle`, the component conditionally renders either the `PoolAddLiquidity` or `PoolRemoveLiquidity` component, passing in the two tokens as props.\n\nOverall, this component provides a high-level UI for managing liquidity in a decentralized exchange. It can be used as part of a larger project that implements a decentralized exchange, allowing users to add or remove liquidity from token pairs. Here is an example of how this component can be used in a parent component:\n\n```\nimport ManageSwapPair from './ManageSwapPair'\n\nconst MyExchange = () => {\n const tokenPair = { token0: { id: 'token0' }, token1: { id: 'token1' } }\n\n return (\n Kashi Pair
\n\n
\n )\n}\n```\n## Questions: \n 1. What does this code do?\n- This code exports a React component called `ManageSwapPair` that renders a UI for adding or removing liquidity from a pool.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries, including `React`, `@headlessui/react`, `@heroicons/react/solid`, and `@lingui/core`.\n\n3. What is the purpose of the `useCurrency` hook?\n- The `useCurrency` hook is used to retrieve information about a currency token based on its ID, which is passed in as an argument. This information is then used to render the UI for adding or removing liquidity.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/ManageSwapPair.md"}}],["821",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/enum.ts)\n\nThis file contains three enums: Chef, Rewarder, and PairType. These enums are used to define a set of related constants that can be used throughout the project. \n\nThe Chef enum defines four constants: MASTERCHEF, MASTERCHEF_V2, MINICHEF, and an implicit default value of 0. These constants are likely used to represent different types of chefs in the project, such as different levels of experience or different roles within the zoo.\n\nThe Rewarder enum defines three constants: SIMPLE, COMPLEX, and ALCX, with an implicit default value of 0. These constants are likely used to represent different types of rewarders in the project, such as different reward structures or different types of tokens.\n\nThe PairType enum defines two constants: SWAP and KASHI, with an implicit default value of 0. These constants are likely used to represent different types of pairs in the project, such as different trading pairs or different types of liquidity pools.\n\nOverall, these enums provide a convenient way to define and use related constants throughout the project. For example, if a function needs to take a Chef as an argument, it can use the Chef enum to ensure that only valid Chef values are passed in. Similarly, if a function needs to return a Rewarder, it can use the Rewarder enum to ensure that only valid Rewarder values are returned. \n\nExample usage:\n\n```\nfunction cookMeal(chef: Chef, ingredients: string[]): string {\n // code to cook a meal using the given ingredients and chef\n}\n\nconst myChef = Chef.MASTERCHEF;\nconst myIngredients = ['chicken', 'rice', 'vegetables'];\nconst myMeal = cookMeal(myChef, myIngredients);\n```\n## Questions: \n 1. What is the purpose of these enums?\n - These enums are used to define different types of chefs, rewarders, and pair types in the zoo project. They likely have specific functionality or characteristics associated with them.\n\n2. Are there any other enums used in the zoo project?\n - It's unclear from this code snippet whether there are other enums used in the zoo project. Further investigation of the codebase would be necessary to determine this.\n\n3. How are these enums used in the zoo project?\n - Without additional context, it's difficult to determine exactly how these enums are used in the zoo project. However, it's likely that they are used to define and differentiate between different types of objects or functionality within the project.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/enum.md"}}],["822",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/hooks.ts)\n\nThe `zoo` project is a blockchain-based project that involves farming and staking of tokens. The code in this file provides a set of utility functions and hooks that are used to interact with the smart contracts that power the farming and staking functionality. \n\nThe code imports several constants and functions from other modules in the `zoo` project, including `ChainId`, `CurrencyAmount`, `MASTERCHEF_ADDRESS`, `MASTERCHEF_V2_ADDRESS`, `MINICHEF_ADDRESS`, `Chef`, `useSingleCallResult`, `useSingleContractMultipleData`, `useMasterChefContract`, `useMasterChefV2Contract`, `useMiniChefContract`, `Contract`, `SUSHI`, `Zero`, `useActiveWeb3React`, `zip`, and `concat`. \n\nThe `useChefContract` function returns the contract instance for a given chef, which is used to interact with the smart contract for that chef. The `useChefContracts` function returns an array of contract instances for a given array of chefs. The `useUserInfo` function returns the amount of a given token that a user has staked in a given farm. The `usePendingSushi` function returns the amount of SUSHI tokens that a user has earned from a given farm. The `usePendingToken` function returns an array of pending tokens for a given farm and contract. The `useChefPositions` function returns an array of positions for a given chef, including the pending SUSHI and token rewards, the amount of tokens staked, and the chef type. The `usePositions` function returns an array of all positions across all chefs. The `useInfiniteScroll` hook is used to manage the number of items displayed in a list of farms, to minimize the rendering cost of the list.\n\nThese functions and hooks are used throughout the `zoo` project to interact with the smart contracts that power the farming and staking functionality. For example, `useUserInfo` and `usePendingSushi` are used to display the amount of tokens that a user has staked and earned in the UI. `usePositions` is used to display a list of all positions across all chefs. The `useInfiniteScroll` hook is used to manage the rendering cost of the farm list. Overall, this file provides a set of utility functions and hooks that are essential to the functionality of the `zoo` project.\n## Questions: \n 1. What is the purpose of the `useChefContract` function and how is it used?\n- The `useChefContract` function returns the contract instance for a given chef type (MasterChef, MasterChefV2, or MiniChef) and is used to interact with the corresponding smart contract.\n\n2. What is the purpose of the `usePendingSushi` function and how is it used?\n- The `usePendingSushi` function returns the pending SUSHI rewards for a given farm and is used to display the amount of SUSHI that a user can claim as rewards.\n\n3. What is the purpose of the `usePositions` function and how is it used?\n- The `usePositions` function returns an array of all the user's positions across all chef types and is used to display the user's farms and their corresponding information (such as pending rewards and staked amount).","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/hooks.md"}}],["823",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/useMasterChef.ts)\n\nThe `useMasterChef` function is a custom React hook that provides access to deposit, withdraw, and harvest functions for a given chef contract. The hook takes a `chef` parameter of type `Chef`, which is an enum that specifies the type of chef contract to interact with. \n\nThe hook uses several other hooks to retrieve the necessary data for interacting with the chef contract. The `useActiveWeb3React` hook retrieves the current user's Ethereum account, while the `useSushiContract` and `useChefContract` hooks retrieve the SushiSwap token contract and the chef contract, respectively. \n\nThe `deposit` function takes two parameters: `pid`, which is the pool ID of the pool to deposit into, and `amount`, which is the amount of tokens to deposit. The function first checks which type of chef contract is being used and then calls the appropriate `deposit` function on the contract with the given `pid` and `amount`. If the chef contract is not the `MASTERCHEF` contract, the function also passes the current user's account as a third parameter. The function returns the transaction hash of the deposit transaction.\n\nThe `withdraw` function is similar to the `deposit` function, but instead of depositing tokens, it withdraws tokens from the specified pool. The function takes the same two parameters as the `deposit` function: `pid` and `amount`. The function checks which type of chef contract is being used and then calls the appropriate `withdraw` function on the contract with the given `pid` and `amount`. If the chef contract is not the `MASTERCHEF` contract, the function also passes the current user's account as a third parameter. The function returns the transaction hash of the withdraw transaction.\n\nThe `harvest` function is used to claim rewards from the specified pool. The function takes a single parameter, `pid`, which is the pool ID of the pool to harvest rewards from. The function first checks which type of chef contract is being used and then calls the appropriate `harvest` function on the contract with the given `pid` and the current user's account. If the chef contract is the `MASTERCHEF_V2` contract, the function also checks if there are enough SUSHI tokens in the contract to harvest. If there are not enough tokens, the function batches two harvest functions together to ensure that the user receives all of their rewards. The function returns the transaction hash of the harvest transaction.\n\nOverall, this hook provides a convenient way for developers to interact with chef contracts in the SushiSwap ecosystem. Developers can use this hook to build interfaces that allow users to deposit, withdraw, and claim rewards from various pools. Here is an example of how this hook might be used in a larger project:\n\n```\nimport { useMasterChef, Chef } from 'zoo'\n\nfunction Pool({ pid }) {\n const { deposit, withdraw, harvest } = useMasterChef(Chef.MASTERCHEF_V2)\n\n const handleDeposit = async (amount) => {\n const tx = await deposit(pid, amount)\n console.log(`Deposit transaction hash: ${tx.hash}`)\n }\n\n const handleWithdraw = async (amount) => {\n const tx = await withdraw(pid, amount)\n console.log(`Withdraw transaction hash: ${tx.hash}`)\n }\n\n const handleHarvest = async () => {\n const tx = await harvest(pid)\n console.log(`Harvest transaction hash: ${tx.hash}`)\n }\n\n return (\n My Decentralized Exchange
\n\n \n \n \n
\n )\n}\n```\n\nIn this example, the `Pool` component uses the `useMasterChef` hook to retrieve the `deposit`, `withdraw`, and `harvest` functions for the `MASTERCHEF_V2` contract. The component then defines three event handlers that call these functions with the appropriate parameters when the user clicks on the corresponding buttons. When a transaction is successfully executed, the component logs the transaction hash to the console.\n## Questions: \n 1. What is the purpose of the `useMasterChef` function?\n- The `useMasterChef` function returns an object with three functions: `deposit`, `withdraw`, and `harvest`, which are used to interact with a smart contract related to a specific chef.\n\n2. What is the significance of the `Chef` enum?\n- The `Chef` enum is used to determine which chef's contract to interact with, as different chefs have different functions and parameters.\n\n3. What is the purpose of the `harvest` function and how does it work?\n- The `harvest` function is used to claim rewards from the chef's contract. Depending on the chef, it may involve different steps such as checking pending rewards, batching in a harvest, or simply calling the `harvest` function.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/useMasterChef.md"}}],["824",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/usePendingReward.ts)\n\nThe `usePending` function is a React hook that calculates the pending rewards for a given farm. It imports several hooks and functions from other files in the project, including `useCallback`, `useEffect`, `useMemo`, `useState`, `useActiveWeb3React`, `useBlockNumber`, `useCloneRewarderContract`, `useComplexRewarderContract`, and `getContract`. \n\nThe function first defines an object called `REWARDERS` that maps chain IDs to rewarder contract addresses. It then defines a `usePending` function that takes a `farm` object as an argument. This `farm` object contains information about the farm, including its ID, reward token, and chef. \n\nWithin the `usePending` function, several hooks are used to get information about the current user's account, the current block number, and the rewarder contract for the given farm. The `useMemo` hook is used to memoize the `contract` object, which maps chain IDs to rewarder contracts. \n\nThe `useEffect` hook is used to fetch the pending rewards for the given farm. If the user is connected to a wallet, the rewarder contract exists, and the farm is a MasterChefV2 or MiniChef farm, the `fetchPendingReward` function is called. This function uses the `pendingTokens` function of the rewarder contract to get the pending rewards for the given farm and user account. It then formats the pending rewards as a string and sets the `balance` state variable to this value. \n\nFinally, the `usePending` function returns the `balance` state variable, which represents the pending rewards for the given farm. This hook can be used in other components to display the pending rewards for a given farm. \n\nExample usage:\n\n```\nimport usePending from './path/to/usePending'\n\nfunction Farm({ farm }) {\n const pendingRewards = usePending(farm)\n\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `usePending` function?\n- The `usePending` function is used to fetch the pending rewards for a given farm and return the formatted balance.\n\n2. What is the purpose of the `REWARDERS` object?\n- The `REWARDERS` object is used to store the rewarder contract addresses for different chain IDs.\n\n3. What is the purpose of the commented out `useRewarderContract` function?\n- It is unclear what the purpose of the `useRewarderContract` function is, as it is currently commented out and not used in the code. It appears to be related to fetching a rewarder contract for a given farm, but more context is needed to understand its intended use.","metadata":{"source":".autodoc/docs/markdown/core/src/features/onsen/usePendingReward.md"}}],["825",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/trade/Header.tsx)\n\nThe `ExchangeHeader` component is a React functional component that renders a header for the exchange page of the Zoo project. The header contains three buttons for swapping, creating limit orders, and adding/removing liquidity, respectively. The component also includes a gas fee estimator and a settings button.\n\nThe component takes three props: `input`, `output`, and `allowedSlippage`. `input` and `output` are optional Currency objects that represent the input and output tokens for the exchange. `allowedSlippage` is an optional Percent object that represents the maximum allowed slippage for the exchange.\n\nThe `getQuery` function is a helper function that takes `input` and `output` as arguments and returns an object with `inputCurrency` and `outputCurrency` properties. If `input` is not provided, the `inputCurrency` property defaults to `\"ETH\"`. If neither `input` nor `output` is provided, the function returns `undefined`.\n\nThe `ExchangeHeader` component uses the `useLingui` hook from the `@lingui/react` package to provide internationalization support. It also uses the `useActiveWeb3React` hook from the Zoo project to get the current chain ID.\n\nThe component renders a `div` element with two child elements: a `div` element containing the three buttons, and a `div` element containing the gas fee estimator and the settings button.\n\nThe three buttons are implemented as `NavLink` components from the Zoo project. Each `NavLink` component has an `href` prop that points to a different page of the exchange, depending on the current input and output tokens. The `getQuery` function is used to generate the query parameters for the `href` prop.\n\nThe gas fee estimator is implemented as a `Gas` component from the Zoo project. It displays the estimated gas fee for the current transaction.\n\nThe settings button is implemented as a `Settings` component from the Zoo project. It opens a modal dialog that allows the user to adjust the slippage tolerance and other settings.\n\nOverall, the `ExchangeHeader` component provides a convenient and user-friendly interface for the exchange page of the Zoo project. It allows users to easily swap tokens, create limit orders, and add/remove liquidity, while also providing important information about gas fees and settings.\n## Questions: \n 1. What is the purpose of the `ExchangeHeader` component?\n- The `ExchangeHeader` component is used to render the header section of the exchange page, which includes navigation links, gas settings, and other components.\n\n2. What libraries and hooks are being imported in this file?\n- The file is importing several libraries and hooks, including `@zoolabs/zdk`, `React`, `@lingui/macro`, `@lingui/react`, and `next/router`. It is also importing several components from other files in the project.\n\n3. What is the `getQuery` function used for?\n- The `getQuery` function is used to generate a query object based on the input and output currencies passed to the `ExchangeHeader` component. This query object is used to construct links for the navigation links in the header.","metadata":{"source":".autodoc/docs/markdown/core/src/features/trade/Header.md"}}],["826",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/user/TransactionList.tsx)\n\nThe code is a React component that renders a list of transactions. It takes in an array of transactions as a prop and maps over them to render each transaction as a separate div element. Each transaction div contains information about the tokens being traded, a link to view the transaction on the blockchain explorer, and a checkmark icon to indicate that the transaction was successful.\n\nThe component uses several other components and hooks from the project, including `Image` and `Dots` components, and the `useActiveWeb3React` and `useLingui` hooks. It also imports two icons from the `react-feather` library.\n\nThe `getExplorerLink` function is imported from a `functions/explorer` file, which is not included in this code snippet. This function likely generates a URL to view a transaction on a blockchain explorer based on the chain ID and transaction hash.\n\nThe component checks if there are any transactions to render. If there are, it maps over the transactions and renders each one as a div element. If there are no transactions, it renders a loading spinner.\n\nThis component can be used in a larger project that involves trading tokens on a decentralized exchange. It provides a visual representation of the user's transaction history and allows them to view the details of each transaction on the blockchain explorer. The component can be customized with different styles and icons to fit the project's design. Here is an example of how the component can be used in a parent component:\n\n```\nimport TransactionList from './TransactionList'\n\nfunction MyComponent() {\n const transactions = [\n {\n tx_hash: '0x123abc',\n token_0: {\n logo_url: 'https://example.com/token0.png',\n symbol: 'TOKEN0'\n },\n token_1: {\n logo_url: 'https://example.com/token1.png',\n symbol: 'TOKEN1'\n },\n description: 'Swapped TOKEN0 for TOKEN1'\n },\n // more transactions...\n ]\n\n return (\n {farm.name}
\nPending rewards: {pendingRewards}
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code is a React component that renders a list of transactions with their corresponding token logos and descriptions.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and components, including `react-feather`, `@lingui/macro`, `@lingui/react`, and custom functions from `../../functions/explorer` and `../../hooks/useActiveWeb3React`.\n\n3. What is the expected format of the `transactions` prop?\n- The `transactions` prop is expected to be an array of objects, where each object contains a `tx_hash` property and two nested objects with `logo_url` and `symbol` properties for each token involved in the transaction.","metadata":{"source":".autodoc/docs/markdown/core/src/features/user/TransactionList.md"}}],["827",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/abbreviateNumbers.ts)\n\nThe code above defines a function called `abbreviateNumber` that takes in a number as an argument and returns an abbreviated version of that number. The purpose of this function is to make large numbers more readable by abbreviating them with a letter that represents the magnitude of the number. For example, instead of displaying 1000000, the function would return 1M.\n\nThe function works by checking the magnitude of the input number and then dividing it by the appropriate factor to get the abbreviated version. If the number is greater than or equal to 1000000000000, the function divides it by 1000000000000 and appends a 'T' to the end. If the number is greater than or equal to 1000000000, the function divides it by 1000000000 and appends a 'B' to the end. If the number is greater than or equal to 1000000, the function divides it by 1000000 and appends an 'M' to the end. If the number is greater than or equal to 1000, the function divides it by 1000 and appends a 'K' to the end. If the number is less than 1000, the function returns the original number.\n\nThis function can be useful in a variety of contexts where large numbers need to be displayed in a more readable format. For example, it could be used in a financial application to display large sums of money, or in a data visualization tool to display large quantities of data. Here is an example of how the function could be used:\n\n```\nconst num = 1234567890;\nconst abbreviatedNum = abbreviateNumber(num);\nconsole.log(abbreviatedNum); // Output: 1.2B\n```\n\nIn this example, the function takes in the number 1234567890 and returns the abbreviated version 1.2B, which represents 1.2 billion.\n## Questions: \n 1. What is the purpose of this function?\n This function abbreviates large numbers by converting them into a shorter format with a letter suffix indicating the magnitude (e.g. \"1.5M\" for 1,500,000).\n\n2. What is the input type for this function?\n The input type for this function is a number.\n\n3. What is the output type for this function?\n The output type for this function is either a string (if the number is abbreviated) or a number (if the number is not large enough to be abbreviated).","metadata":{"source":".autodoc/docs/markdown/core/src/functions/abbreviateNumbers.md"}}],["828",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/analytics.ts)\n\nThis code is a set of functions that utilize the ReactGA library to log user activity on a website. The ReactGA library is a third-party analytics tool that allows developers to track user behavior and gain insights into how users interact with their website. \n\nThe `logPageView` function logs a page view by setting the page property to the current window location and then calling the `pageview` method. This function can be used to track which pages on the website are being viewed and how often they are being viewed. \n\nThe `logEvent` function logs a custom event with a specified category and action. This function can be used to track specific user interactions on the website, such as button clicks or form submissions. \n\nThe `logException` function logs an exception with a specified description and fatal flag. This function can be used to track errors or unexpected behavior on the website. \n\nOverall, these functions provide a way for developers to gain insights into how users are interacting with their website and identify areas for improvement. By using the ReactGA library, developers can easily integrate analytics tracking into their website without having to build their own tracking system from scratch. \n\nExample usage:\n\n```\nimport { logPageView, logEvent, logException } from 'zoo'\n\n// Log a page view\nlogPageView()\n\n// Log a custom event\nlogEvent('Button Click', 'Submit Form')\n\n// Log an exception\nlogException('Error: Invalid input', true)\n```\n## Questions: \n 1. What is ReactGA and how is it being used in this code?\n ReactGA is a library for tracking user interactions with a website using Google Analytics. It is being used to log page views, events, and exceptions.\n\n2. What is the purpose of the logPageView function?\n The logPageView function is used to log a page view with Google Analytics, setting the page path to the current window location.\n\n3. What is the purpose of the logException function?\n The logException function is used to log an exception with Google Analytics, with an optional description and flag for whether it is fatal. This can be used to track errors and issues on the website.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/analytics.md"}}],["829",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/approveAmountCalldata.ts)\n\nThe code is a module that exports two functions related to the ERC20 token standard. The first function, `toHex`, takes a `BigintIsh` argument and returns a hexadecimal string representation of the number. The second function, `approveAmountCalldata`, takes a `CurrencyAmount` object and a `spender` address as arguments and returns an object with `to`, `data`, and `value` properties. \n\nThe `to` property is set to the address of the ERC20 token contract associated with the `Currency` object in the `amount` argument. The `data` property is set to the encoded function data for the `approve` function of the ERC20 contract, with the `spender` argument and the `quotient` of the `amount` argument passed as parameters. The `value` property is set to `'0x0'`, indicating that no ether is being sent along with the transaction.\n\nThe purpose of this module is to provide a convenient way to generate the necessary data for an `approve` transaction for an ERC20 token. This is useful for allowing a third party to spend a certain amount of tokens on behalf of the token owner. The `toHex` function is used to convert the `quotient` of the `amount` argument to a hexadecimal string, which is required for the `approve` function call. The `ERC20_INTERFACE` constant is an instance of the `Interface` class from the `@ethersproject/abi` package, which is used to encode the function call data for the `approve` function.\n\nExample usage:\n\n```\nimport { CurrencyAmount, Token } from '@zoolabs/zdk'\nimport approveAmountCalldata from '@zoolabs/zdk/dist/approveAmountCalldata'\n\nconst token = new Token(1, '0x123...', 18, 'USDT', 'Tether')\nconst amount = CurrencyAmount.fromRawAmount(token, '100')\nconst spender = '0x456...'\n\nconst calldata = approveAmountCalldata(amount, spender)\nconsole.log(calldata)\n// Output: { to: '0x123...', data: '0x095ea7b3...123', value: '0x0' }\n```\n## Questions: \n 1. What is the purpose of the `toHex` function?\n- The `toHex` function converts a `BigintIsh` value to a hexadecimal string with a '0x' prefix.\n\n2. What is the `ERC20_INTERFACE` object used for?\n- The `ERC20_INTERFACE` object is an instance of the `Interface` class from the `@ethersproject/abi` library, which defines the ABI (Application Binary Interface) of an ERC20 token contract.\n\n3. What does the `approveAmountCalldata` function do?\n- The `approveAmountCalldata` function takes a `CurrencyAmount` object and a spender address as inputs, and returns an object with `to`, `data`, and `value` properties that represent the calldata needed to approve the spender to spend the specified amount of tokens.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/approveAmountCalldata.md"}}],["830",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/archerRouter.ts)\n\nThe code is a TypeScript module that exports an abstract class called `ArcherRouter` and several interfaces and types. The `ArcherRouter` class has a single static method called `swapCallParameters` that produces the on-chain method name to call and the hex encoded parameters to pass as arguments for a given trade. The method takes three arguments: `factoryAddress`, `trade`, and `options`. \n\nThe `factoryAddress` argument is a string representing the address of the factory contract that created the pair of tokens being traded. The `trade` argument is an instance of the `Trade` class from the `@zoolabs/zdk` library, which represents a trade between two tokens. The `options` argument is an object that extends the `TradeOptions` interface and adds three additional properties: `ethTip`, `ttl`, and `recipient`. \n\nThe `ethTip` property is an optional `CurrencyAmount` object that represents the amount of ETH to tip the miners who process the transaction. The `ttl` property is a number representing the time-to-live of the transaction in seconds. The `recipient` property is a string representing the address of the recipient of the transaction.\n\nThe `swapCallParameters` method first checks if the input or output currency is Ether and throws an error if both are Ether. It then validates the `ttl` property and the `ethTip` property, ensuring that the `ethTip` currency is Ether on the mainnet. It then calculates the `amountIn` and `amountOut` values for the trade, converts them to hexadecimal strings, and creates an `ArcherTrade` object with the `amountIn`, `amountOut`, `path`, `to`, and `deadline` properties. The `path` property is an array of token addresses representing the path of the trade. The `to` property is the recipient of the transaction, and the `deadline` property is the deadline for the transaction in hexadecimal format.\n\nThe method then determines the method name to call based on the `tradeType` property of the `trade` argument and whether the input or output currency is Ether. It sets the `args` and `value` properties of the `ArcherSwapParameters` object based on the method name and the `ethTip` property. Finally, it returns the `methodName`, `args`, and `value` properties as an `ArcherSwapParameters` object.\n\nThis code is part of the larger `zoo` project and is used to facilitate trades on the Archer Swap decentralized exchange. Developers can use the `ArcherRouter` class and the `swapCallParameters` method to execute trades on the Archer Swap exchange programmatically. For example, a developer could use the following code to execute a trade between two tokens:\n\n```\nimport { ArcherRouter } from 'zoo'\n\nconst factoryAddress = '0x1234567890abcdef'\nconst trade = new Trade(...)\nconst options = {\n ethTip: new Ether(...),\n ttl: 3600,\n recipient: '0x9876543210fedcba',\n allowedSlippage: 0.1,\n}\n\nconst swapParams = ArcherRouter.swapCallParameters(factoryAddress, trade, options)\n// Use swapParams to execute the trade on the Archer Swap exchange\n```\n## Questions: \n 1. What is the purpose of the `ArcherRouter` class?\n- The `ArcherRouter` class represents the Archer Router and has static methods for helping execute trades.\n\n2. What is the `swapCallParameters` method used for?\n- The `swapCallParameters` method is used to produce the on-chain method name to call and the hex encoded parameters to pass as arguments for a given trade.\n\n3. What is the purpose of the `validateAndParseAddress` function?\n- The `validateAndParseAddress` function is used to validate and parse an Ethereum address, and returns the checksummed address if it is valid. If the address is not valid, it throws an error.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/archerRouter.md"}}],["831",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/array/chunkArray.ts)\n\nThe code provided is a utility function that is used to chunk an array into smaller arrays. The purpose of this function is to evenly distribute items among the chunks while ensuring that each chunk does not exceed a specified gas limit. \n\nThe function takes in an array of items and an optional gas limit parameter. If the gas limit parameter is not specified, the function uses a default value of 2,000,000. The function then iterates through each item in the array and calculates the gas required by each item. If the current chunk is empty or the current item would not push the chunk over the gas limit, the item is added to the current chunk and the cumulative gas is incremented. If the current item would push the chunk over the gas limit, the current chunk is pushed to the chunks array, and a new chunk is created with the current item. \n\nOnce all items have been iterated through, the function checks if there are any remaining items in the current chunk and pushes it to the chunks array if there are. The function then returns the chunks array.\n\nThis function can be used in the larger project to split up large arrays into smaller chunks that can be processed more efficiently. For example, if the project is processing a large number of transactions, this function can be used to split the transactions into smaller chunks that can be processed in parallel. \n\nExample usage:\n\n```\nconst transactions = [/* array of transactions */];\nconst chunks = chunkArray(transactions, 500_000); // split transactions into chunks of 500,000 or less\nfor (const chunk of chunks) {\n // process each chunk of transactions\n}\n```\n## Questions: \n 1. What is the purpose of the `chunkArray` function?\n- The `chunkArray` function takes an array of items and evenly distributes them into smaller arrays called chunks, based on a gas limit. \n\n2. What is the significance of the `gasRequired` property in this code?\n- The `gasRequired` property is used to calculate the gas required by each item in the `chunkArray` function. If an item doesn't specify a `gasRequired` value, it defaults to `DEFAULT_GAS_REQUIRED`.\n\n3. Why is the `CONSERVATIVE_BLOCK_GAS_LIMIT` value hard-coded?\n- The `CONSERVATIVE_BLOCK_GAS_LIMIT` value is hard-coded as a conservative estimate of the current block gas limit. This is likely done to ensure that the `chunkArray` function doesn't exceed the gas limit and cause errors or unexpected behavior.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/array/chunkArray.md"}}],["832",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/array/index.ts)\n\nThis code exports a function called `chunkArray` from a module located in the `zoo` project. The purpose of the `chunkArray` function is to take an array and split it into smaller arrays of a specified size. This can be useful in situations where you need to process large amounts of data in smaller, more manageable chunks.\n\nThe `chunkArray` function takes two arguments: the array to be chunked and the size of each chunk. It then returns an array of arrays, where each sub-array contains the specified number of elements from the original array.\n\nHere is an example of how the `chunkArray` function can be used:\n\n```\nimport { chunkArray } from 'zoo';\n\nconst myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst chunkSize = 3;\n\nconst chunkedArray = chunkArray(myArray, chunkSize);\n\nconsole.log(chunkedArray);\n// Output: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]\n```\n\nIn this example, we import the `chunkArray` function from the `zoo` project and use it to split an array of numbers into smaller arrays of size 3. The resulting `chunkedArray` variable contains an array of arrays, where each sub-array contains 3 elements from the original array (except for the last sub-array, which contains the remaining elements).\n\nOverall, this code provides a useful utility function for working with arrays in the `zoo` project. By exporting it as a module, it can be easily used in other parts of the project where array manipulation is needed.\n## Questions: \n 1. **What does the `chunkArray` function do?** \n The code exports the `chunkArray` function from a file located at `./chunkArray`, so a smart developer might want to investigate that file to understand what the function does.\n\n2. **What other functions or variables are exported from the `zoo` module?** \n The code only exports the `chunkArray` function, so a smart developer might want to check other files in the `zoo` module to see if there are any other exports.\n\n3. **Is the `chunkArray` function used anywhere else in the `zoo` module?** \n The code only exports the `chunkArray` function, so a smart developer might want to search the `zoo` module for any other files that import and use the `chunkArray` function.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/array/index.md"}}],["833",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/assets.ts)\n\nThe code above defines several constants and functions related to NFTs (non-fungible tokens) in the context of the zoo project. The `import` statements at the top of the file bring in two external dependencies: `ChainId` from the `@zoolabs/zdk` library, and the `_` (underscore) utility library.\n\nThe constants defined in this file are `TYPE_VALIDATOR`, `TYPE_ATM`, `TYPE_WALLET`, and `TYPE_CASH`, which are strings representing different types of NFTs that can be owned in the zoo project.\n\nThe `newNft` function takes three arguments: `tokenId` (a unique identifier for the NFT), `type` (one of the constants defined above), and `props` (an optional object containing additional properties to be added to the NFT object). This function returns an object representing a new NFT, with the `tokenId`, `type`, `image`, and `video` properties set based on the input arguments. The `image` and `video` properties are hardcoded to point to files in the `/nfts` directory with filenames based on the `type` argument.\n\nThe remaining functions (`getOwnedNfts`, `getValidatorNfts`, `getAtmNfts`, `getWalletNfts`, and `getCashNfts`) all return arrays of NFT objects. `getOwnedNfts` returns an array of three NFTs of different types, while the other functions each return an array of six NFTs of a specific type. These functions use the `newNft` function to create the NFT objects, with the `tokenId` values incremented by a fixed amount for each NFT in the array.\n\nOverall, this code provides a way to create and retrieve NFT objects with various properties and types, which can be used in other parts of the zoo project. For example, these functions could be used to populate a user's NFT collection or to display NFTs in a marketplace. Here is an example usage of the `getOwnedNfts` function:\n\n```\nconst ownedNfts = getOwnedNfts()\nconsole.log(ownedNfts)\n// Output:\n// [\n// { tokenId: 1, type: 'Validator', image: '/nfts/validator.gif', video: '/nfts/validator.mov' },\n// { tokenId: 2, type: 'ATM', image: '/nfts/atm.gif', video: '/nfts/atm.mov' },\n// { tokenId: 3, type: 'Wallet', image: '/nfts/wallet.gif', video: '/nfts/wallet.mov' }\n// ]\n```\n## Questions: \n 1. What is the purpose of the `ChainId` import from `@zoolabs/zdk`?\n - It is not clear from this code snippet what the `ChainId` import is used for or how it relates to the rest of the code. Further investigation or context is needed to understand its purpose.\n\n2. What is the expected format of the `props` parameter in the `newNft` function?\n - The `newNft` function takes in a `props` parameter, but it is not clear what properties are expected or what format they should be in. Additional documentation or comments within the code may be helpful in clarifying this.\n\n3. How are the generated NFTs intended to be used within the `zoo` project?\n - While the code generates various types of NFTs, it is not clear from this snippet how they are intended to be used within the larger `zoo` project. Further context or documentation is needed to understand their purpose and how they fit into the project as a whole.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/assets.md"}}],["834",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/bentobox.ts)\n\nThis code provides two functions, `toAmount` and `toShare`, that are used to convert between token amounts and shares in the context of the larger project. The project likely involves some sort of decentralized exchange or trading platform that uses a custom token standard called BentoBox. \n\nThe `toAmount` function takes in a `token` object and a `shares` value, both of which are of type `BigNumber`. The function then returns the equivalent token amount based on the BentoBox token standard. This is done by multiplying the `shares` value by the `bentoAmount` property of the `token` object and then dividing by the `bentoShare` property of the `token` object. The resulting value is also of type `BigNumber`.\n\nHere is an example usage of the `toAmount` function:\n\n```\nimport { BigNumber } from '@ethersproject/bignumber'\nimport { toAmount } from 'zoo'\n\nconst token = {\n bentoAmount: BigNumber.from(1000000000000000000), // 1 token = 10^18 wei\n bentoShare: BigNumber.from(1000000000000000000) // 1 share = 10^18 wei\n}\n\nconst shares = BigNumber.from(500000000000000000) // 0.5 shares\n\nconst amount = toAmount(token, shares) // returns BigNumber(500000000000000000)\n```\n\nThe `toShare` function is similar to `toAmount`, but instead takes in a `token` object and an `amount` value, both of which are of type `BigNumber`. The function then returns the equivalent share value based on the BentoBox token standard. This is done by multiplying the `amount` value by the `bentoShare` property of the `token` object and then dividing by the `bentoAmount` property of the `token` object. The resulting value is also of type `BigNumber`.\n\nHere is an example usage of the `toShare` function:\n\n```\nimport { BigNumber } from '@ethersproject/bignumber'\nimport { toShare } from 'zoo'\n\nconst token = {\n bentoAmount: BigNumber.from(1000000000000000000), // 1 token = 10^18 wei\n bentoShare: BigNumber.from(1000000000000000000) // 1 share = 10^18 wei\n}\n\nconst amount = BigNumber.from(500000000000000000) // 0.5 tokens\n\nconst shares = toShare(token, amount) // returns BigNumber(500000000000000000)\n```\n\nOverall, these functions provide a convenient way to convert between token amounts and shares in the context of the BentoBox token standard used in the larger project.\n## Questions: \n 1. What is the purpose of the `BigNumber` import from `@ethersproject/bignumber`?\n- The `BigNumber` import is used to perform arithmetic operations on large numbers with precision.\n\n2. What do the `toAmount` and `toShare` functions do?\n- The `toAmount` function takes in a `token` object and a `shares` value, and returns the equivalent amount of the token based on the token's `bentoAmount` and `bentoShare` values. The `toShare` function takes in a `token` object and an `amount` value, and returns the equivalent number of shares based on the token's `bentoAmount` and `bentoShare` values.\n\n3. What are the expected data types for the `token`, `shares`, and `amount` parameters?\n- The `token` parameter is expected to be an object with `bentoAmount` and `bentoShare` properties. The `shares` and `amount` parameters are expected to be instances of the `BigNumber` class.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/bentobox.md"}}],["835",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/block.ts)\n\nThis file is a module that exports an empty object. The purpose of this file is to serve as a placeholder for future code that may be added to the `zoo` project. By exporting an empty object, this file allows other modules in the project to import it without causing any errors or issues. \n\nFor example, if another module in the `zoo` project needs to import this file, it can do so with the following code:\n\n```\nimport {} from './zoo';\n```\n\nThis code simply imports the empty object from the `zoo` module, which can then be used as needed in the importing module. \n\nWhile this file may seem insignificant on its own, it plays an important role in the larger `zoo` project. By providing a consistent way for modules to import and use each other, the project can be more easily maintained and updated over time. Additionally, by using modules to organize the code, the project can be more easily scaled and extended as needed. \n\nOverall, while this file may not contain any actual code, it serves an important purpose in the larger `zoo` project by providing a consistent way for modules to interact with each other.\n## Questions: \n 1. **What is the purpose of this file?**\\\nA smart developer might wonder why this file only contains an export statement and no other code. The purpose of this file could be to serve as an entry point for the entire `zoo` module, exporting all the necessary functions and variables from other files within the module.\n\n2. **What is being exported from this file?**\\\nThe export statement in this file is empty, which could lead a developer to question what exactly is being exported. It's possible that this file is simply exporting everything from other files within the `zoo` module, or it could be exporting a specific function or variable that is defined elsewhere.\n\n3. **Is this file necessary for the `zoo` module to function?**\\\nSince this file doesn't contain any actual code, a developer might wonder if it's necessary for the `zoo` module to include this file at all. It's possible that this file is simply serving as a placeholder or convention for organizing the module's code, but it's also possible that it's required for the module to function properly.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/block.md"}}],["836",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/bridgeFiltering.ts)\n\nThe code in this file provides utility functions for filtering and sorting tokens in a larger project called zoo. The file imports the Token and TokenInfo types from other modules, as well as a validation function and a hook from the React library. \n\nThe `createTokenFilterFunction` function takes a search query as input and returns a filter function that can be applied to a list of tokens. If the search query is an Ethereum address, the filter function checks if the token's address matches the query. Otherwise, it splits the search query into parts and checks if each part is a substring of the token's name or symbol. The function returns true if the token matches the search query and false otherwise.\n\nThe `filterTokens` function takes a list of tokens and a search query as input and returns a filtered list of tokens that match the search query. It uses the `createTokenFilterFunction` function to create a filter function and applies it to the list of tokens using the `filter` method.\n\nThe `useSortedTokensByQuery` hook takes a list of tokens and a search query as input and returns a sorted list of tokens that match the search query. It uses the `useMemo` hook to memoize the sorted list of tokens and avoid unnecessary re-renders. The function first checks if the list of tokens is empty and returns an empty list if it is. Otherwise, it splits the search query into parts and checks if there is more than one part. If there is, it returns the original list of tokens. Otherwise, it sorts the list of tokens by exact matches on the symbol, substrings on the symbol, and the rest of the tokens. The function returns the sorted list of tokens.\n\nOverall, this file provides useful utility functions for filtering and sorting tokens in the larger zoo project. Here is an example of how these functions can be used:\n\n```\nimport { filterTokens, useSortedTokensByQuery } from 'zoo/tokenUtils'\n\nconst tokens = [\n { name: 'Ethereum', symbol: 'ETH', address: '0x123' },\n { name: 'Dai Stablecoin', symbol: 'DAI', address: '0x456' },\n { name: 'Chainlink', symbol: 'LINK', address: '0x789' },\n]\n\nconst filteredTokens = filterTokens(tokens, 'eth')\n// [{ name: 'Ethereum', symbol: 'ETH', address: '0x123' }]\n\nconst sortedTokens = useSortedTokensByQuery(tokens, 'link')\n// [{ name: 'Chainlink', symbol: 'LINK', address: '0x789' }, { name: 'Dai Stablecoin', symbol: 'DAI', address: '0x456' }, { name: 'Ethereum', symbol: 'ETH', address: '0x123' }]\n```\n## Questions: \n 1. What is the purpose of the `createTokenFilterFunction` function?\n- The `createTokenFilterFunction` function creates a filter function that can be used to filter a list of tokens based on a search query.\n\n2. What is the purpose of the `useSortedTokensByQuery` function?\n- The `useSortedTokensByQuery` function sorts a list of tokens based on a search query, with exact matches first, followed by tokens with a symbol that starts with the search query, and then the rest of the tokens.\n\n3. What is the purpose of the `alwaysTrue` function?\n- The `alwaysTrue` function is a helper function that always returns `true`. It is used as a fallback filter function in case the search query is empty.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/bridgeFiltering.md"}}],["837",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/cloudinary.ts)\n\nThe code above defines two functions: `normalize` and `cloudinaryLoader`. The `normalize` function takes a string `src` as input and returns the string with the first character removed if it is a forward slash. If the first character is not a forward slash, the function returns the original string. This function is used to ensure that the `src` parameter passed to the `cloudinaryLoader` function is properly formatted.\n\nThe `cloudinaryLoader` function takes an object with three properties as input: `src`, `width`, and `style`. The function returns a string that represents a URL to an image hosted on the Cloudinary platform. The URL includes the `src` parameter passed to the function, which is first normalized using the `normalize` function. The `width` parameter is used to specify the desired width of the image in pixels. The `style` parameter is not used in the function and is therefore ignored.\n\nThis function is likely used in a larger project to dynamically load images from the Cloudinary platform. The `cloudinaryLoader` function can be called with different values for the `src` and `width` parameters to load images of different sizes and from different locations. For example, the following code could be used to load an image with a width of 500 pixels from a Cloudinary URL:\n\n```\ncloudinaryLoader({ src: '/images/my-image.jpg', width: 500 });\n```\n\nOverall, the `cloudinaryLoader` function provides a convenient way to load images from the Cloudinary platform with dynamic sizing. The `normalize` function is used internally to ensure that the `src` parameter is properly formatted before being used in the URL.\n## Questions: \n 1. What is the purpose of the `normalize` function?\n - The `normalize` function removes the first character of the `src` string if it is a forward slash.\n2. What does the `cloudinaryLoader` function do?\n - The `cloudinaryLoader` function returns a URL that fetches an image from the Cloudinary service with the specified `width` and `src`, after normalizing the `src` string using the `normalize` function.\n3. Are there any required parameters for the `cloudinaryLoader` function?\n - Yes, the `src` parameter is required for the `cloudinaryLoader` function to work properly. The `width` and `style` parameters are optional.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/cloudinary.md"}}],["838",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/contract.ts)\n\nThis file contains several utility functions that are used throughout the zoo project. \n\nThe `getSigner` function takes a `Web3Provider` instance and an Ethereum account address as arguments and returns a `JsonRpcSigner` instance that is connected to the specified account. This function is used to sign transactions on behalf of the specified account.\n\nThe `getProviderOrSigner` function takes a `Web3Provider` instance and an optional Ethereum account address as arguments and returns either the `Web3Provider` instance or a `JsonRpcSigner` instance that is connected to the specified account. If an account address is provided, the function returns a `JsonRpcSigner` instance that can be used to sign transactions. If no account address is provided, the function returns the `Web3Provider` instance, which can be used to read data from the blockchain.\n\nThe `getContract` function takes an Ethereum contract address, an ABI (Application Binary Interface) definition, a `Web3Provider` instance, and an optional Ethereum account address as arguments and returns a `Contract` instance that is connected to the specified contract address. This function is used to interact with smart contracts on the blockchain.\n\nThe `getRouterAddress` function takes an optional `ChainId` enum value as an argument and returns the address of the Uniswap router contract for the specified chain. If no chain ID is provided, the function throws an error.\n\nThe `getRouterContract` function takes a `ChainId` enum value, a `Web3Provider` instance, and an optional Ethereum account address as arguments and returns a `Contract` instance that is connected to the Uniswap router contract for the specified chain. This function is used to interact with the Uniswap router contract on the blockchain.\n\nThe `getArcherRouterContract` function takes a `ChainId` enum value, a `Web3Provider` instance, and an optional Ethereum account address as arguments and returns a `Contract` instance that is connected to the Archer Swap router contract for the specified chain. This function is used to interact with the Archer Swap router contract on the blockchain.\n\nThe `switchChain` function takes a `ChainId` enum value, a `Web3Provider` instance, and an Ethereum account address as arguments and switches the user's MetaMask wallet to the specified chain. This function is used to allow users to switch between different Ethereum networks in the zoo application.\n\nOverall, these utility functions provide a convenient way to interact with the Ethereum blockchain and smart contracts in the zoo project. They are used throughout the project to sign transactions, read data from the blockchain, and interact with smart contracts.\n## Questions: \n 1. What is the purpose of this code file?\n- The purpose of this code file is to provide functions for interacting with smart contracts on different chains.\n\n2. What are the parameters required for the `switchChain` function?\n- The `switchChain` function requires `chainId`, `library`, and `account` parameters.\n\n3. What is the difference between `getRouterContract` and `getArcherRouterContract` functions?\n- `getRouterContract` function returns a contract instance for Uniswap V2 router on a specified chain, while `getArcherRouterContract` function returns a contract instance for Archer Swap router on a specified chain.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/contract.md"}}],["839",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/convert/apyApr.ts)\n\nThis code provides two functions for converting between Annual Percentage Yield (APY) and Annual Percentage Rate (APR). APY is the rate of return on an investment over a year, taking into account compounding interest, while APR is the simple interest rate over a year. The functions take in the APY or APR as a percentage and the frequency of compounding (in times per year), and return the corresponding APR or APY as a percentage.\n\nThe `apyToApr` function uses the formula `(1 + apy / 100) ** (1 / frequency) - 1` to calculate the periodic interest rate, then multiplies it by the frequency to get the APR. The `aprToApy` function uses the formula `(1 + apr / 100 / frequency) ** frequency - 1` to calculate the periodic interest rate, then multiplies it by 100 to get the APY.\n\nThese functions could be useful in financial applications where APY and APR are important metrics, such as calculating interest on loans or investments. For example, if a user inputs an APY for a savings account, the `apyToApr` function could be used to calculate the equivalent APR for comparison to other interest rates. Similarly, if a user inputs an APR for a loan, the `aprToApy` function could be used to calculate the equivalent APY to determine the total cost of the loan over time.\n\nExample usage:\n\n```\nimport { apyToApr, aprToApy } from 'zoo';\n\nconst apy = 6;\nconst frequency = 12; // monthly compounding\nconst apr = apyToApr(apy, frequency); // 5.82\n\nconst apr2 = 5.82;\nconst frequency2 = 365; // daily compounding\nconst apy2 = aprToApy(apr2, frequency2); // 6.01\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code provides two functions, `apyToApr` and `aprToApy`, that convert between annual percentage yield (APY) and annual percentage rate (APR) based on a given compounding frequency.\n\n2. What is the source of the formulas used in this code?\n- The formulas used in this code are sourced from http://www.linked8.com/blog/158-apy-to-apr-and-apr-to-apy-calculation-methodologies.\n\n3. What is the significance of the `BLOCKS_IN_A_YEAR` constant?\n- The `BLOCKS_IN_A_YEAR` constant is used as the default value for the `frequency` parameter in both functions. It represents the number of blocks in a year based on a block time of 14 seconds, which is used in the Ethereum blockchain.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/convert/apyApr.md"}}],["840",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/convert/basisPointsToPercent.ts)\n\nThe code above is a function that converts a basis points value to a Percent object from the '@zoolabs/zdk' library. The purpose of this function is to provide a convenient way to convert a basis points value to a Percent object that can be used in other parts of the project. \n\nThe function takes in a single argument, a number representing the basis points value to be converted. The function then creates a new Percent object using the JSBI.BigInt() method from the '@zoolabs/zdk' library. The first argument passed to the JSBI.BigInt() method is the basis points value, while the second argument is the value 10000, which represents the total number of basis points in a whole number. \n\nFor example, if the function is called with the argument 500, it will return a Percent object representing 5%. This is because 500 basis points is equal to 5% of the total value. \n\nHere is an example of how this function could be used in the larger project:\n\n```\nimport { basisPointsToPercent } from 'zoo'\n\nconst basisPointsValue = 250\nconst percentValue = basisPointsToPercent(basisPointsValue)\n\nconsole.log(percentValue.toString()) // \"2.5%\"\n```\n\nIn this example, the basisPointsToPercent() function is imported from the 'zoo' module. The function is then called with a basis points value of 250, which is equal to 2.5% of the total value. The resulting Percent object is stored in the variable percentValue, which can then be used in other parts of the project. Finally, the toString() method is called on the Percent object to convert it to a string representation of the percentage value. \n\nOverall, this function provides a simple and convenient way to convert basis points values to Percent objects in the '@zoolabs/zdk' library, which can be used in other parts of the project.\n## Questions: \n 1. What is the purpose of the `@zoolabs/zdk` library and how is it being used in this code?\n- The `@zoolabs/zdk` library is being imported to use the `JSBI` and `Percent` classes. Its purpose is not clear from this code alone and would require further investigation.\n\n2. What is the expected input and output of the `basisPointsToPercent` function?\n- The function takes in a number representing basis points and returns a new `Percent` object using the `JSBI` class to convert the basis points to a percentage.\n\n3. Are there any potential errors or edge cases that need to be considered when using this function?\n- It is not clear from this code if any error handling or input validation is being performed, so a smart developer may want to investigate and consider potential edge cases such as negative numbers or non-numeric inputs.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/convert/basisPointsToPercent.md"}}],["841",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/convert/contenthashToUri.ts)\n\nThe code in this file provides functions for converting content hashes to URI representations for supported codecs. It imports functions from the `multihashes` and `multicodec` libraries to decode and get the codec of the content hash. It also imports the `CID` class from the `cids` library to create a CID object from the decoded content hash.\n\nThe `hexToUint8Array` function takes a hexadecimal string and returns a Uint8Array. It removes the '0x' prefix if present, checks that the length of the string is a multiple of 2, creates a new Uint8Array with half the length of the string, and populates it with the parsed hexadecimal values.\n\nThe `contenthashToUri` function takes a content hash string and returns a URI string. It first converts the content hash to a Uint8Array using the `hexToUint8Array` function. It then gets the codec of the content hash using the `getCodec` function from `multicodec`. If the codec is 'ipfs-ns', it removes the prefix from the content hash, creates a CID object from the data, and returns an IPFS URI string with the base58-encoded multihash. If the codec is 'ipns-ns', it removes the prefix from the content hash, creates a CID object from the data, decodes the multihash using `decode` from `multihashes`, and returns an IPNS URI string with the decoded digest if the multihash name is 'identity', or with the base58-encoded multihash otherwise. If the codec is not recognized, it throws an error.\n\nThis code can be used in the larger project to convert content hashes to URI representations for supported codecs. For example, it can be used to generate IPFS or IPNS URIs for content stored on the network. Here is an example usage:\n\n```\nconst contenthash = '0x1220deadbeef'\nconst uri = contenthashToUri(contenthash)\nconsole.log(uri) // 'ipfs://Qm...'\n```\n## Questions: \n 1. What is the purpose of the `multihashes` and `multicodec` libraries being imported?\n- The `multihashes` library is used to decode the content hash passed to the `contenthashToUri` function, while the `multicodec` library is used to determine the codec of the content hash.\n\n2. What is the expected format of the `contenthash` parameter passed to the `contenthashToUri` function?\n- The `contenthash` parameter is expected to be a hexadecimal string representing a content hash.\n\n3. What is the purpose of the `UTF_8_DECODER` constant?\n- The `UTF_8_DECODER` constant is an instance of the `TextDecoder` class and is used to decode the digest of an IPNS multihash into a UTF-8 string.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/convert/contenthashToUri.md"}}],["842",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/convert/index.ts)\n\nThis code exports three functions from three different files: `basisPointsToPercent`, `contenthashToUri`, and `uriToHttp`. These functions are likely used in the larger project to convert data between different formats or to manipulate data in some way. \n\nThe `basisPointsToPercent` function is likely used to convert financial data from basis points to a percentage format. This could be useful in financial calculations or when displaying financial data to users. Here is an example of how this function might be used:\n\n```\nimport { basisPointsToPercent } from 'zoo';\n\nconst basisPoints = 500;\nconst percent = basisPointsToPercent(basisPoints);\nconsole.log(percent); // Output: 5%\n```\n\nThe `contenthashToUri` function is likely used to convert a content hash to a URI format. This could be useful when working with content-addressable storage systems or when generating unique identifiers for content. Here is an example of how this function might be used:\n\n```\nimport { contenthashToUri } from 'zoo';\n\nconst contentHash = 'QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ';\nconst uri = contenthashToUri(contentHash);\nconsole.log(uri); // Output: /ipfs/QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ\n```\n\nThe `uriToHttp` function is likely used to convert a URI to an HTTP URL format. This could be useful when working with web APIs or when generating links to web resources. Here is an example of how this function might be used:\n\n```\nimport { uriToHttp } from 'zoo';\n\nconst uri = '/ipfs/QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ';\nconst httpUrl = uriToHttp(uri);\nconsole.log(httpUrl); // Output: https://ipfs.io/ipfs/QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ\n```\n\nOverall, this code exports three useful functions that can be used in a variety of ways throughout the larger project.\n## Questions: \n 1. **What is the purpose of this code file?** \nA smart developer might wonder what the overall goal of this file is and how it fits into the larger project. Based on the code, it appears to be exporting three functions from separate files.\n\n2. **What do the exported functions do?** \nA developer might want to know more about the specific functionality of the exported functions, such as what arguments they take and what they return. Without additional context or documentation, it's unclear what these functions do.\n\n3. **Are there any dependencies or requirements for these functions to work?** \nA developer might want to know if there are any external dependencies or requirements for these functions to work properly. For example, do they rely on other functions or modules within the zoo project, or do they require certain versions of external libraries?","metadata":{"source":".autodoc/docs/markdown/core/src/functions/convert/index.md"}}],["843",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/convert/uriToHttp.ts)\n\nThe `uriToHttp` function takes a URI as input and returns an array of fetch-able http(s) URLs for the same content. The function supports four protocols: http, https, ipfs, and ipns. \n\nFor http and https protocols, the function simply returns the input URI as a single-element array. For ipfs and ipns protocols, the function returns two URLs: one for the cloudflare-ipfs.com gateway and one for the ipfs.io gateway. \n\nThe function first extracts the protocol from the input URI using the `split` method and converts it to lowercase. It then uses a `switch` statement to handle each protocol case. \n\nFor http protocol, the function constructs two URLs: one with https protocol and the same path as the input URI (with the first four characters removed), and one with http protocol and the same path as the input URI. These URLs are returned as a two-element array. \n\nFor ipfs and ipns protocols, the function extracts the hash or name from the URI using a regular expression and constructs two URLs for each protocol using the extracted hash or name. These URLs are returned as a two-element array. \n\nThis function can be used in the larger project to convert URIs to fetch-able http(s) URLs for content stored on ipfs or ipns. For example, if the project needs to fetch content from ipfs, it can use this function to convert the ipfs URI to http(s) URLs and then use these URLs to fetch the content. \n\nExample usage:\n\n```\nconst uri = 'ipfs:QmXyZabc123'\nconst httpUrls = uriToHttp(uri)\nconsole.log(httpUrls) // ['https://cloudflare-ipfs.com/ipfs/QmXyZabc123/', 'https://ipfs.io/ipfs/QmXyZabc123/']\n```\n## Questions: \n 1. What is the purpose of this function?\n \n This function takes a URI and returns an array of fetch-able http(s) URLs for the same content.\n\n2. What protocols does this function support?\n \n This function supports ipfs, ipns, http, and https protocols.\n\n3. What is the purpose of the regular expressions used in this function?\n \n The regular expressions are used to extract the hash or name from the ipfs or ipns URI, respectively.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/convert/uriToHttp.md"}}],["844",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/currency/currencyId.ts)\n\nThe code in this file defines a function called `currencyId` that takes a `Currency` object as an argument and returns a string representing the currency's ID. The `Currency` object is imported from the `@zoolabs/zdk` library, which is presumably part of the larger zoo project.\n\nThe `currencyId` function first checks if the `Currency` object's `chainId` property is equal to `ChainId.CELO`. If it is, the function returns the `address` property of the `wrapped` property of the `Currency` object. This suggests that the `Currency` object has a `wrapped` property that contains information about the wrapped version of the currency on the CELO blockchain.\n\nIf the `chainId` property is not equal to `ChainId.CELO`, the function checks if the `Currency` object's `isNative` property is true. If it is, the function returns the string `'ETH'`. This suggests that the `Currency` object represents the native currency of the Ethereum blockchain.\n\nIf the `isNative` property is false, the function checks if the `Currency` object's `isToken` property is true. If it is, the function returns the `address` property of the `Currency` object. This suggests that the `Currency` object represents a token on some blockchain.\n\nIf neither of the previous conditions are true, the function throws an error with the message `'invalid currency'`. This suggests that the `Currency` object is expected to have either a `wrapped` property or an `address` property, and that the function is designed to handle specific types of currencies.\n\nIt's possible that this function is used in other parts of the zoo project to convert `Currency` objects into IDs that can be used in other contexts, such as in smart contracts or API requests. Here's an example of how this function might be used:\n\n```\nimport { Currency } from '@zoolabs/zdk'\nimport { currencyId } from 'zoo'\n\nconst currency = new Currency('CELO', '0x123abc', 1)\nconst currencyId = currencyId(currency) // returns '0x123abc'\n```\n## Questions: \n 1. What is the purpose of this code?\n This code defines a function called `currencyId` that takes a `Currency` object as input and returns a string representing the currency's ID.\n\n2. What is the `@zoolabs/zdk` package used for?\n The `@zoolabs/zdk` package is used to import the `ChainId` and `Currency` classes that are used in this code.\n\n3. Why is there commented-out code at the bottom of the file?\n The commented-out code defines a different version of the `currencyId` function that takes an additional `chainId` parameter and uses different logic to determine the currency ID. It is possible that this code was an earlier version of the function that was replaced by the current implementation.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/currency/currencyId.md"}}],["845",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/currency/getCurrency.ts)\n\nThis code defines two objects, `USD_CURRENCY` and `ETH_CURRENCY`, which contain information about the addresses and decimal places of various currencies on different blockchain networks. The `Currency` type is defined as an object with an `address` property (a string representing the currency's contract address) and a `decimals` property (an integer representing the number of decimal places the currency uses). \n\nThe `USD_CURRENCY` object contains information for several different networks, including Ethereum mainnet, Ropsten, Kovan, Rinkeby, Göerli, Binance Smart Chain, Binance Smart Chain testnet, HECO, HECO testnet, Polygon, Polygon testnet, xDai, and Arbitrum. The `ETH_CURRENCY` object only contains information for Ethereum mainnet. \n\nThe `getCurrency` function takes a `ChainId` argument (an enum defined in the `@zoolabs/zdk` package) and returns the corresponding `Currency` object from `USD_CURRENCY` if it exists, or a default `Currency` object with an `address` of `AddressZero` (a constant from the `@ethersproject/constants` package) and `decimals` of 18 if it does not. \n\nThis code is likely used in the larger project to provide a centralized place to store information about the addresses and decimal places of various currencies on different networks. Other parts of the project can import these objects and use them to perform currency-related calculations or display currency information to users. For example, a user interface component might use the `getCurrency` function to display the appropriate currency symbol and decimal formatting for a given network. \n\nExample usage:\n```\nimport { USD_CURRENCY, getCurrency, ChainId } from 'zoo'\n\nconsole.log(USD_CURRENCY[ChainId.MAINNET]) // { address: '0xdAC17F958D2ee523a2206206994597C13D831ec7', decimals: 6 }\n\nconsole.log(getCurrency(ChainId.BSC_TESTNET)) // { address: '0x337610d27c682E347C9cD60BD4b3b107C9d34dDd', decimals: 18 }\n```\n## Questions: \n 1. What is the purpose of the `Currency` type and how is it used in this code?\n- The `Currency` type defines an object with an `address` property (a string) and a `decimals` property (a number). It is used to represent different currencies on different blockchain networks.\n\n2. What is the significance of the `USD_CURRENCY` and `ETH_CURRENCY` constants?\n- `USD_CURRENCY` is an object that maps `ChainId` values to `Currency` objects representing the USD stablecoin on different blockchain networks. `ETH_CURRENCY` is a similar object representing Ether on different networks.\n\n3. What is the purpose of the `getCurrency` function and how does it work?\n- The `getCurrency` function takes a `ChainId` argument and returns the corresponding `Currency` object from `USD_CURRENCY` if it exists, or a default `Currency` object with an `address` of `AddressZero` and `decimals` of 18 if it does not. This function is used to retrieve the appropriate pricing currency for a given blockchain network.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/currency/getCurrency.md"}}],["846",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/currency/index.ts)\n\nThis file is responsible for exporting various modules related to currency and spending limits in the larger project. The `export *` syntax is used to export all the functions and variables from the specified modules. \n\nThe `currencyId` module likely contains a list of unique identifiers for different currencies used in the project. This could be useful for tracking and managing different types of currency within the system.\n\nThe `getCurrency` module likely contains functions for retrieving information about a specific currency, such as its name, symbol, and exchange rate. This could be useful for displaying currency information to users or performing calculations involving different currencies.\n\nThe `wrappedCurrency` module likely contains functions for wrapping and unwrapping currencies, which is a common practice in decentralized finance (DeFi) applications. This involves converting one type of currency into another that is compatible with a specific DeFi protocol or platform.\n\nThe `maxAmountSpend` module likely contains functions for calculating the maximum amount of a specific currency that can be spent based on various factors such as account balance, transaction fees, and spending limits. This could be useful for preventing users from overspending or exceeding their account limits.\n\nOverall, this file plays an important role in managing currency-related functionality within the larger project. By exporting these modules, other parts of the project can easily access and utilize these functions and variables as needed. \n\nExample usage:\n\n```\nimport { getCurrency } from './getCurrency';\n\nconst currencyInfo = getCurrency('USD');\nconsole.log(currencyInfo.name); // Output: \"United States Dollar\"\n```\n## Questions: \n 1. **What is the purpose of this code file?**\\\nA smart developer might wonder what the overall goal of this file is, as it simply exports various functions from other files. The purpose of this file is to provide a centralized location for importing these functions into other parts of the project.\n\n2. **What do the exported functions do?**\\\nA developer might want to know more about the specific functionality of the exported functions. `currencyId` likely provides an identifier for a specific currency, `getCurrency` probably retrieves information about a given currency, `wrappedCurrency` may wrap a currency in a specific format, and `maxAmountSpend` could calculate the maximum amount of a currency that can be spent.\n\n3. **What other files are related to this code?**\\\nA developer may want to know what other files are related to this code, as it is only exporting functions from other files. The file names listed in the code suggest that there are other files related to currency and spending within the project.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/currency/index.md"}}],["847",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/currency/maxAmountSpend.ts)\n\nThe code in this file is responsible for calculating the maximum amount that can be spent on a given currency. It imports three modules from the '@zoolabs/zdk' library: Currency, CurrencyAmount, and JSBI. \n\nThe constant variable MIN_NATIVE_CURRENCY_FOR_GAS is defined as the result of raising 10 to the power of 16, which represents the minimum amount of native currency (in this case, Ethereum) required to pay for gas fees. \n\nThe main function in this file is maxAmountSpend, which takes a CurrencyAmount object as its parameter and returns either a new CurrencyAmount object or undefined. If the input parameter is undefined, the function returns undefined. If the currency of the input parameter is native (i.e. Ethereum), the function checks if the quotient of the currency amount is greater than MIN_NATIVE_CURRENCY_FOR_GAS. If it is, the function subtracts MIN_NATIVE_CURRENCY_FOR_GAS from the quotient and returns a new CurrencyAmount object with the same currency and the new quotient. If the quotient is less than or equal to MIN_NATIVE_CURRENCY_FOR_GAS, the function returns a new CurrencyAmount object with the same currency and a quotient of 0. If the currency is not native, the function simply returns the input parameter. \n\nThis function can be used in the larger project to calculate the maximum amount that can be spent on a given currency, which is useful for various financial transactions. For example, if a user wants to make a transaction that requires a certain amount of Ethereum, this function can be used to ensure that they have enough Ethereum to cover the transaction fees. \n\nExample usage:\n\n```\nimport { maxAmountSpend, CurrencyAmount, Currency } from 'zoo'\n\nconst ethAmount = CurrencyAmount.fromRawAmount(Currency.ETH, '1000000000000000000') // 1 ETH\nconst maxSpend = maxAmountSpend(ethAmount) // returns a new CurrencyAmount object with 0.99 ETH\n```\n## Questions: \n 1. What is the purpose of the `Currency`, `CurrencyAmount`, and `JSBI` imports from `@zoolabs/zdk`?\n- These imports are likely used to handle currency-related calculations and conversions within the `maxAmountSpend` function.\n\n2. What is the significance of the `MIN_NATIVE_CURRENCY_FOR_GAS` constant?\n- This constant represents the minimum amount of native currency (in this case, ETH) required to cover gas fees for a transaction.\n\n3. What does the `maxAmountSpend` function do?\n- This function takes in a `CurrencyAmount` object and returns the maximum amount that can be spent of that currency, taking into account gas fees if the currency is native to the blockchain. If no `CurrencyAmount` is provided, the function returns `undefined`.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/currency/maxAmountSpend.md"}}],["848",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/currency/wrappedCurrency.ts)\n\nThe code above is a function called `unwrappedToken` that takes a `Currency` object as its argument and returns a `Currency` object. The purpose of this function is to check if the given `Currency` object is a native currency or not. If it is a native currency, the function returns the same object. If it is not a native currency, the function checks if the `chainId` property of the `Currency` object is present in the `ChainId` object and if the `Currency` object is equal to the `WNATIVE` object for that `chainId`. If both conditions are true, the function returns the `NATIVE` object for that `chainId`. If neither condition is true, the function returns the same `Currency` object that was passed as an argument.\n\nThis function is part of the larger `zoo` project and is used to handle different types of currencies in the project. It is particularly useful when dealing with wrapped tokens, which are tokens that are backed by another asset, such as Ether. Wrapped tokens are often used in decentralized finance (DeFi) applications and can be traded on various decentralized exchanges (DEXs). This function helps to identify whether a given token is a wrapped token or not and returns the underlying asset if it is.\n\nHere is an example of how this function can be used in the larger `zoo` project:\n\n```javascript\nimport { Currency } from '@zoolabs/zdk'\nimport { unwrappedToken } from 'zoo'\n\nconst wrappedToken = new Currency('0x123', 'Wrapped Token', 18)\nconst nativeToken = new Currency('0x456', 'Native Token', 18)\n\nconst unwrappedWrappedToken = unwrappedToken(wrappedToken)\nconst unwrappedNativeToken = unwrappedToken(nativeToken)\n\nconsole.log(unwrappedWrappedToken) // returns the same wrappedToken object\nconsole.log(unwrappedNativeToken) // returns the same nativeToken object\n``` \n\nIn this example, we create two `Currency` objects, one for a wrapped token and one for a native token. We then pass each of these objects to the `unwrappedToken` function and log the results to the console. Since the wrapped token is not a native currency, the function returns the same `wrappedToken` object. Since the native token is a native currency, the function also returns the same `nativeToken` object.\n## Questions: \n 1. What is the purpose of the `unwrappedToken` function?\n- The `unwrappedToken` function takes a `Currency` object as input and returns either the same object or a different `Currency` object depending on certain conditions.\n\n2. What is the significance of the `isNative` property of the `Currency` object?\n- The `isNative` property of the `Currency` object is used to determine whether the input `Currency` object is the native currency of its blockchain.\n\n3. What is the purpose of the commented out code block?\n- The commented out code block appears to be related to a specific use case involving a particular `Currency` object (`WETH9_EXTENDED`) and a formatted chain ID. However, without more context it is unclear what the purpose of this code block is or why it is commented out.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/currency/wrappedCurrency.md"}}],["849",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/ens.ts)\n\nThis code provides functionality for resolving ENS (Ethereum Name Service) addresses to content hashes on the Ethereum mainnet. \n\nThe `import` statements at the beginning of the file bring in necessary dependencies from the `@ethersproject` library. \n\nThe `REGISTRAR_ABI` and `REGISTRAR_ADDRESS` constants define the ABI (Application Binary Interface) and address of the ENS registrar contract on the Ethereum mainnet. The `RESOLVER_ABI` constant defines the ABI for the resolver contract, which is used to resolve ENS names to content hashes. \n\nThe `resolverContract` function takes a resolver address and provider as arguments and returns a new `Contract` instance for that resolver address using the `RESOLVER_ABI` constant. This function is used to cache resolver contracts since most of them are the public resolver. \n\nThe `resolveENSContentHash` function takes an ENS name and provider as arguments and returns a promise that resolves to the content hash associated with that ENS name. This function first creates a new `Contract` instance for the ENS registrar contract using the `REGISTRAR_ABI` constant. It then uses the `namehash` function from the `@ethersproject/hash` library to compute the hash of the ENS name. It then calls the `resolver` function on the ENS registrar contract to get the resolver address associated with the ENS name. Finally, it calls the `contenthash` function on the resolver contract for the given hash to get the content hash associated with the ENS name. \n\nThe `ENS_NAME_REGEX` constant defines a regular expression for matching ENS addresses. The `parseENSAddress` function takes an ENS address as an argument and returns an object with the ENS name and path (if any) parsed from the address. This function uses the `ENS_NAME_REGEX` constant to match the ENS address and returns `undefined` if there is no match. Otherwise, it returns an object with the ENS name and path parsed from the address. \n\nOverall, this code provides a way to resolve ENS addresses to content hashes on the Ethereum mainnet, which can be useful for retrieving content associated with decentralized websites and applications. Here is an example usage of the `resolveENSContentHash` function:\n\n```\nimport { ethers } from 'ethers'\nimport { resolveENSContentHash } from 'zoo'\n\nconst provider = new ethers.providers.InfuraProvider('mainnet', 'your-infura-project-id')\nconst ensName = 'mywebsite.eth'\n\nresolveENSContentHash(ensName, provider)\n .then(contentHash => {\n console.log(`Content hash for ${ensName}: ${contentHash}`)\n })\n .catch(error => {\n console.error(`Error resolving content hash for ${ensName}: ${error}`)\n })\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code provides functions for resolving ENS content hashes and parsing ENS addresses.\n\n2. What is the significance of the REGISTRAR_ADDRESS and REGISTRAR_ABI constants?\n- The REGISTRAR_ADDRESS constant is the address of the ENS registrar contract on the Ethereum mainnet, and the REGISTRAR_ABI constant is the ABI for that contract. These are used to fetch the resolver address for a given ENS name.\n\n3. What is the format of a valid ENS address that can be parsed by the parseENSAddress function?\n- A valid ENS address must have a domain name ending in \".eth\", and may optionally include a path after the domain name. The domain name must consist of one or more alphanumeric labels separated by hyphens.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/ens.md"}}],["850",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/environment.ts)\n\nThe `isEnvironment` function is a utility function that checks whether the current environment matches a given environment. The function takes a single argument, `env`, which is a string representing the environment to check against. \n\nThe function uses the `process.env` object to access the current environment variables. Specifically, it checks the value of the `REACT_PUBLIC_APP_ENV` variable, which is assumed to be set by the build process or runtime environment. If the value of `REACT_PUBLIC_APP_ENV` matches the `env` argument, the function returns `true`. Otherwise, it returns `false`. \n\nThis function can be used in a variety of ways within the larger project. For example, it could be used to conditionally render certain components or features based on the current environment. It could also be used to configure different settings or behavior based on the environment. \n\nHere is an example of how the `isEnvironment` function could be used in a React component:\n\n```\nimport React from 'react';\nimport { isEnvironment } from './utils';\n\nconst MyComponent = () => {\n const isProduction = isEnvironment('production');\n\n return (\n My Transaction History
\n\n {isProduction ? (\n
\n );\n};\n```\n\nIn this example, the `isEnvironment` function is used to determine whether the current environment is the production environment. Depending on the result, the component renders different content. \n\nOverall, the `isEnvironment` function is a simple but useful utility function that can help with environment-specific logic and behavior within the larger project.\n## Questions: \n 1. What does this function do?\n - This function checks if the environment variable `REACT_PUBLIC_APP_ENV` is equal to the input `env`.\n\n2. What is the expected input for this function?\n - The expected input for this function is a string representing the environment to be checked against the `REACT_PUBLIC_APP_ENV` variable.\n\n3. Where is the `process.env.REACT_PUBLIC_APP_ENV` variable defined?\n - The `process.env.REACT_PUBLIC_APP_ENV` variable is likely defined in a configuration file or environment variable setup outside of this code file.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/environment.md"}}],["851",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/explorer.ts)\n\nThe code defines a set of explorers and chains for the zoo project. The explorers are functions that take in a link, data, and type, and return a URL string for a specific blockchain explorer. The chains are objects that map a chain ID to a link and an explorer builder function. The `getExplorerLink` function takes in a chain ID, data, and type, and returns a URL string for the corresponding explorer.\n\nThe `explorers` object defines four explorer functions for etherscan, blockscout, harmony, and okex. Each function takes in a link, data, and type, and returns a URL string for a specific blockchain explorer. The `switch` statement inside each function determines the type of data and returns the corresponding URL string.\n\nThe `chains` object maps each chain ID to a link and an explorer builder function. The link is a string that represents the base URL for the corresponding blockchain explorer. The explorer builder function is one of the four explorer functions defined in the `explorers` object. The `ChainId` enum is imported from the `@zoolabs/zdk` library and is used to define the keys for the `chains` object.\n\nThe `getExplorerLink` function takes in a chain ID, data, and type, and returns a URL string for the corresponding explorer. It first retrieves the chain object from the `chains` object using the chain ID. It then calls the explorer builder function with the link, data, and type to generate the URL string.\n\nThis code is used to provide a consistent way of generating blockchain explorer URLs for different chains in the zoo project. It can be used by other modules in the project that need to generate explorer URLs for different chains. For example, if a module needs to generate an explorer URL for a transaction on the Ethereum mainnet, it can call `getExplorerLink(ChainId.MAINNET, txHash, 'transaction')` to get the URL string for the transaction on Etherscan.\n## Questions: \n 1. What is the purpose of the `explorers` object?\n- The `explorers` object contains functions that generate links to blockchain explorers based on the type of data provided (transaction, token, address, or block).\n\n2. What is the `chains` object used for?\n- The `chains` object maps chain IDs to explorer links and builder functions that generate links for each chain.\n\n3. What does the `getExplorerLink` function do?\n- The `getExplorerLink` function takes a chain ID, data, and type as arguments, and returns a link to a blockchain explorer generated by the corresponding builder function for that chain.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/explorer.md"}}],["852",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/feature.ts)\n\nThis code defines a set of features and their availability on different blockchain networks. The `Feature` enum lists the available features, including AMM, liquidity mining, BentoBox, Kashi, MISO, analytics, migrate, and staking. The `globalFeatures` array lists the features that are globally available, but are not tied to any specific blockchain network.\n\nThe `features` object is a mapping of `ChainId` to an array of `Feature`s that are available on that network. `ChainId` is an enum that lists the supported blockchain networks, including MAINNET, HARDHAT, ROPSTEN, RINKEBY, GÖRLI, KOVAN, BSC, BSC_TESTNET, FANTOM, FANTOM_TESTNET, MATIC, MATIC_TESTNET, HARMONY, HARMONY_TESTNET, AVALANCHE, AVALANCHE_TESTNET, OKEX, OKEX_TESTNET, XDAI, MOONRIVER, and ARBITRUM.\n\nThe `featureEnabled` function takes a `Feature` and a `ChainId` as input and returns a boolean indicating whether the feature is available on that network. It checks if the `features` object has an array of features for the given `ChainId`, and if so, whether that array includes the given `Feature`. It also checks if the `globalFeatures` array includes the given `Feature`.\n\nThe `chainsWithFeature` function takes a `Feature` as input and returns an array of `ChainId`s that support that feature. It filters the keys of the `features` object to only include those that have the given `Feature` in their array of features, and then maps those keys to their corresponding `ChainId`.\n\nThis code is likely used in the larger project to determine which features are available on which blockchain networks, and to enable or disable certain functionality based on those features. For example, a UI component might display different options depending on which features are available on the user's selected network.\n## Questions: \n 1. What is the purpose of the `globalFeatures` array?\n - The `globalFeatures` array contains a list of features that are enabled globally across all chains.\n2. What is the purpose of the `featureEnabled` function?\n - The `featureEnabled` function takes in a `Feature` and a `ChainId` as arguments and returns a boolean indicating whether the feature is enabled on the specified chain and globally.\n3. What is the purpose of the `chainsWithFeature` function?\n - The `chainsWithFeature` function takes in a `Feature` as an argument and returns an array of `ChainId`s that have the specified feature enabled.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/feature.md"}}],["853",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/filtering.ts)\n\nThe code in this file provides functions for filtering and sorting tokens in a larger project called zoo. The file imports the Token and TokenInfo classes from the zdk and token-lists modules, respectively, as well as the isAddress function from a local validate module and the useMemo hook from the React library.\n\nThe createTokenFilterFunction function takes a search query string as input and returns a filter function that can be applied to a list of tokens. If the search query is an Ethereum address, the filter function checks whether the token's address matches the query. Otherwise, the function splits the search query into lowercase parts and checks whether each part is a substring of the token's name or symbol. The function returns true if the token matches all search query parts.\n\nThe filterTokens function takes a list of tokens and a search query string as input and returns a filtered list of tokens that match the search query. It uses the createTokenFilterFunction to create a filter function and applies it to the list of tokens.\n\nThe useSortedTokensByQuery function takes a list of tokens and a search query string as input and returns a sorted list of tokens that match the search query. It uses the useMemo hook to memoize the sorted list of tokens and avoid unnecessary re-renders. The function first checks whether the search query matches exactly one token symbol. If so, it returns a list of tokens that match the exact symbol. Otherwise, it sorts the tokens into three lists: exact matches, substring matches on symbol, and the rest. The function returns a concatenated list of these three lists, sorted in that order.\n\nOverall, this file provides useful functions for filtering and sorting tokens in the larger zoo project. For example, the filterTokens function could be used to display a list of tokens that match a user's search query, while the useSortedTokensByQuery function could be used to display a sorted list of tokens that match the query. These functions could be used in various parts of the zoo project, such as a token search feature or a token list display.\n## Questions: \n 1. What is the purpose of the `createTokenFilterFunction` function?\n- The `createTokenFilterFunction` function creates a filter function that can be used to filter an array of tokens based on a search query.\n\n2. What is the purpose of the `useSortedTokensByQuery` function?\n- The `useSortedTokensByQuery` function sorts an array of tokens based on a search query, with exact matches first, followed by tokens with a symbol that starts with the search query, and then the rest of the tokens.\n\n3. What is the purpose of the `alwaysTrue` function?\n- The `alwaysTrue` function is a helper function that always returns `true`, and is used as a fallback filter function in case the search query is empty.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/filtering.md"}}],["854",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/format.ts)\n\nThis file contains a collection of utility functions for formatting various types of data. The functions are exported as individual named functions and can be used independently of each other. \n\nThe `capitalize` function takes a string as input and returns the same string with the first letter capitalized. \n\nThe `formatK` function takes a string as input and formats it in a human-readable way by abbreviating large numbers with a \"K\" suffix. For example, `formatK('1234567')` would return `'1.23M'`. \n\nThe `shortenAddress` function takes an Ethereum address as input and returns a shortened version of the address with only the first and last four characters visible. \n\nThe `shortenString` function takes a string and a length as input and returns a shortened version of the string with three dots in the middle. \n\nThe `formatPercent` function takes a string representation of a percentage as input and returns a formatted string with a percent sign. \n\nThe `formatNumber` function takes a number as input and returns a formatted string with commas and/or abbreviated with a \"K\" suffix. It also has options for formatting as USD and specifying the number of decimal places. \n\nThe `formatNumberScale` function is similar to `formatNumber` but uses a different scaling system based on the length of the number. \n\nThe `escapeRegExp` function takes a string as input and returns the same string with any special characters escaped so that it can be used as a regular expression. \n\nThe `formatBalance` function takes a BigNumberish value and returns a formatted string representing the value in ether. It also has options for specifying the number of decimal places and the maximum number of digits after the decimal point. \n\nThe `formatCurrencyAmount` and `formatPrice` functions take CurrencyAmount and Price objects, respectively, and return formatted strings representing the values. They also have options for specifying the number of significant figures. \n\nThe `formatDateAgo` function takes a Date object as input and returns a formatted string representing the time elapsed since that date. \n\nThe `formatCurrencyFromRawAmount` and `formatCurrencyAmountWithCommas` functions take a Currency object and a raw amount as input and return formatted strings representing the value in the specified currency. \n\nThe `numberWithCommas` function takes a number or string as input and returns a formatted string with commas separating the thousands. \n\nThe `formatError` function takes an error object as input and returns a formatted string representing the error message. \n\nOverall, these functions provide a variety of useful formatting options for different types of data that may be used throughout the larger project.\n## Questions: \n 1. What is the purpose of the `formatFoo` convention and where is it used in this code?\n- The purpose of the `formatFoo` convention is not clear from this code alone. It is not used in this code and there is no documentation explaining its purpose.\n\n2. What is the `Intl.NumberFormat` library used for in this code?\n- The `Intl.NumberFormat` library is used to format numbers as currency with a minimum of 2 decimal places.\n\n3. What is the purpose of the `formatError` function and what kind of input does it expect?\n- The `formatError` function is used to format error messages. It expects an error object as input and returns a formatted error message.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/format.md"}}],["855",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/getLibrary.ts)\n\nThis code is a TypeScript module that exports a single function called `getLibrary`. The purpose of this function is to create and return a `Web3Provider` object that is connected to a given Ethereum provider. The `Web3Provider` is a class from the `@ethersproject/providers` library that provides a way to interact with the Ethereum blockchain using the Web3 API.\n\nThe `getLibrary` function takes a single argument called `provider`, which can be any type of Ethereum provider. The function first creates a new `Web3Provider` object using the `provider` argument. If the `provider` object has a `chainId` property that is a number or a string that can be parsed as a number, then that value is used as the chain ID for the `Web3Provider`. Otherwise, the string `'any'` is used as the chain ID.\n\nAfter creating the `Web3Provider` object, the function sets its `pollingInterval` property to 15 seconds. This property determines how often the `Web3Provider` will poll the Ethereum network for updates. \n\nThe function then calls the `detectNetwork` method of the `Web3Provider` object to determine the current network that the provider is connected to. If the network has a known chain ID (i.e. it is one of the chain IDs defined in the `NETWORK_POLLING_INTERVALS` object), then the function sets the `pollingInterval` property of the `Web3Provider` to the corresponding value from the `NETWORK_POLLING_INTERVALS` object.\n\nThe `NETWORK_POLLING_INTERVALS` object is a constant object that maps Ethereum chain IDs to polling intervals in milliseconds. Currently, it only defines polling intervals for the Arbitrum and Harmony networks.\n\nOverall, this code provides a convenient way to create a `Web3Provider` object that is connected to a given Ethereum provider and has a reasonable polling interval. It also allows for customization of the polling interval based on the current network, which can help improve performance and reduce unnecessary network traffic. \n\nExample usage:\n\n```typescript\nimport { ethers } from 'ethers'\nimport getLibrary from './getLibrary'\n\n// create an Ethereum provider using ethers.js\nconst provider = new ethers.providers.JsonRpcProvider('https://mainnet.infura.io/v3/your-project-id')\n\n// create a Web3Provider object using the provider\nconst library = getLibrary(provider)\n\n// use the library to interact with the Ethereum blockchain\nconst balance = await library.getBalance('0x123...')\n```\n## Questions: \n 1. What external libraries or dependencies are being used in this code?\n- The code is importing `ExternalProvider`, `JsonRpcFetchFunc`, and `Web3Provider` from the `@ethersproject/providers` library, as well as `ChainId` from the `@zoolabs/zdk` library.\n\n2. What is the purpose of the `NETWORK_POLLING_INTERVALS` object?\n- The `NETWORK_POLLING_INTERVALS` object is used to store polling intervals for different chain IDs. The polling interval is set to a specific value if the chain ID matches one of the keys in the object.\n\n3. What is the purpose of the `getLibrary` function and what does it return?\n- The `getLibrary` function takes in a provider and returns a `Web3Provider` instance. It sets the polling interval of the instance to 15 seconds and also detects the network of the provider and sets the polling interval to a specific value if the network's chain ID matches one of the keys in the `NETWORK_POLLING_INTERVALS` object.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/getLibrary.md"}}],["856",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/getNetworkLibrary.ts)\n\nThe code above is a TypeScript module that exports a function called `getNetworkLibrary()`. The purpose of this function is to provide a Web3Provider instance that can be used to interact with the Ethereum network. \n\nThe function first imports the `Web3Provider` class from the `@ethersproject/providers` package. This class is used to create a provider object that can be used to interact with the Ethereum network. \n\nNext, the `network` object is imported from the `../connectors/network` module. This object contains information about the Ethereum network that the application is connected to. \n\nThe `getNetworkLibrary()` function returns a `Web3Provider` instance. It first checks if the `networkLibrary` variable is defined. If it is, it returns the existing instance. If it is not, it creates a new instance using the `Web3Provider` class and the `network.provider` object. The `network.provider` object is provided by the `network` module and contains information about the Ethereum network provider that the application is connected to. \n\nThis function can be used in other parts of the application to interact with the Ethereum network. For example, if the application needs to send a transaction to the network, it can use the `Web3Provider` instance returned by `getNetworkLibrary()` to create a transaction object and send it to the network. \n\nHere is an example of how this function can be used:\n\n```\nimport { getNetworkLibrary } from 'zoo'\n\nconst provider = getNetworkLibrary()\n\n// Use the provider to interact with the Ethereum network\n```\n## Questions: \n 1. What is the purpose of the `Web3Provider` import from `@ethersproject/providers`?\n- The `Web3Provider` import is used to create a provider object that can interact with an Ethereum network.\n\n2. What is the `network` import from `../connectors/network` used for?\n- The `network` import is used to get the provider object for a specific Ethereum network.\n\n3. What is the purpose of the `getNetworkLibrary` function?\n- The `getNetworkLibrary` function returns the provider object for the specified Ethereum network, creating it if it doesn't already exist.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/getNetworkLibrary.md"}}],["857",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/index.ts)\n\nThis code exports all the modules from various files located in the `zoo` project. Each of these modules serves a specific purpose in the larger project. \n\nThe `array` module provides utility functions for working with arrays, such as finding the intersection or difference between two arrays. \n\nThe `convert` module provides functions for converting between different data types, such as converting a string to a number or a date object. \n\nThe `currency` module provides functions for working with different currencies, such as converting between different currencies or formatting currency values. \n\nThe `bentobox` module provides functions for interacting with the Bentobox protocol, which is a decentralized exchange protocol built on Ethereum. \n\nThe `block` module provides functions for working with Ethereum blocks, such as getting the latest block number or retrieving a specific block by its hash or number. \n\nThe `ens` module provides functions for working with the Ethereum Name Service (ENS), which is a decentralized domain name system built on Ethereum. \n\nThe `contract` module provides functions for interacting with Ethereum smart contracts, such as deploying a new contract or calling a function on an existing contract. \n\nThe `format` module provides functions for formatting data in various ways, such as formatting a date object as a string or formatting a number with a specific number of decimal places. \n\nThe `kashi` module provides functions for interacting with the Kashi protocol, which is a lending and borrowing protocol built on Ethereum. \n\nThe `list` module provides utility functions for working with lists, such as finding the first or last element in a list. \n\nThe `math` module provides utility functions for performing mathematical operations, such as finding the minimum or maximum value in an array. \n\nThe `parse` module provides functions for parsing data from various sources, such as parsing a JSON string or parsing a date string. \n\nThe `prices` module provides functions for retrieving price data from various sources, such as retrieving the current price of a specific cryptocurrency. \n\nThe `rebase` module provides functions for working with rebasing tokens, which are tokens that adjust their supply to maintain a specific price target. \n\nThe `retry` module provides utility functions for retrying a function that may fail, such as retrying a network request that may fail due to a temporary error. \n\nThe `styling` module provides utility functions for styling user interfaces, such as generating CSS classes or applying styles to a specific element. \n\nThe `trade` module provides functions for interacting with decentralized exchanges, such as executing a trade or retrieving the current price of a specific token. \n\nThe `validate` module provides functions for validating data, such as validating an email address or a password. \n\nThe `zoo` module likely serves as the main entry point for the `zoo` project, and may provide utility functions or configuration options for the project as a whole. \n\nOverall, this code serves to organize and export the various modules that make up the `zoo` project, allowing other parts of the project to easily import and use these modules as needed. For example, if a developer needs to work with Ethereum smart contracts, they can simply import the `contract` module from the `zoo` project and use its functions to interact with contracts.\n## Questions: \n 1. What is the purpose of the `zoo` project?\n- The `zoo` project appears to be a collection of modules related to various financial and mathematical operations.\n\n2. What is the relationship between the different modules listed in the code?\n- The code exports various modules from different files, each related to a specific financial or mathematical operation.\n\n3. Are there any dependencies required for these modules to work properly?\n- It is unclear from the code whether there are any dependencies required for these modules to work properly. Further investigation into each individual module may be necessary to determine any dependencies.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/index.md"}}],["858",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/kashi.ts)\n\nThe code in this file contains several functions that are used in the larger zoo project. The purpose of this code is to provide functionality related to interest accrual, fee calculation, and value calculation for assets and tokens. \n\nThe `accrue` function calculates the amount of interest accrued on a given pair and amount of tokens. It takes in a pair object, an amount of tokens, and an optional boolean flag to include the principal amount in the calculation. It returns a BigNumber representing the accrued interest.\n\nThe `accrueTotalAssetWithFee` function calculates the total asset value of a pair, including a fee. It takes in a pair object and returns an object with two BigNumbers: one representing the elastic value and one representing the base value.\n\nThe `interestAccrue` function calculates the interest rate for a given pair and interest amount. It takes in a pair object and a BigNumber representing the current interest rate. It returns a BigNumber representing the updated interest rate.\n\nThe `getUSDValue` function calculates the USD value of a given amount of tokens. It takes in a BigNumber representing the amount of tokens and a token object. It returns a BigNumber representing the USD value.\n\nThe `getUSDString` function calculates the USD value of a given amount of tokens and returns it as a string. It takes in a BigNumber representing the amount of tokens and a token object. It returns a string representing the USD value.\n\nThe `easyAmount` function returns an object containing the token amount, token amount as a string, USD value of the token amount, and USD value as a string. It takes in a BigNumber representing the token amount and a token object.\n\nThe `takeFee` function calculates the fee for a given amount of tokens. It takes in a BigNumber representing the amount of tokens and returns a BigNumber representing the fee.\n\nThe `addBorrowFee` function calculates the fee for a given amount of borrowed tokens. It takes in a BigNumber representing the amount of borrowed tokens and returns a BigNumber representing the fee.\n\nThe `getFraction` function calculates the fraction of a pair's total asset base value. It takes in several objects representing the total asset base value, total asset elastic value, total borrowed elastic value, and token total supply values. It returns a fraction representing the total asset base value. \n\nOverall, this code provides important functionality for the zoo project related to interest accrual, fee calculation, and value calculation for assets and tokens. These functions can be used in various parts of the project to perform calculations and provide data to users.\n## Questions: \n 1. What is the purpose of the `accrue` function and what does it return?\n- The `accrue` function calculates the accrued interest on a given amount based on the interest rate and elapsed time for a given pair. It returns a `BigNumber` value representing the accrued interest.\n\n2. What is the purpose of the `interestAccrue` function and what does it return?\n- The `interestAccrue` function calculates the current interest rate for a given pair based on its utilization and elapsed time. It returns a `BigNumber` value representing the current interest rate.\n\n3. What is the purpose of the `easyAmount` function and what does it return?\n- The `easyAmount` function takes a `BigNumber` amount and a token object and returns an object containing the original amount, a string representation of the amount with the token's decimals, the USD value of the amount, and a string representation of the USD value with the currency's decimals.","metadata":{"source":".autodoc/docs/markdown/core/src/functions/kashi.md"}}],["859",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/list.ts)\n\nThe code in this file contains functions that are used to resolve a list URL to a validated token list. The `getTokenList` function takes in a list URL and a function that resolves an ENS name to a content hash. It then parses the ENS address, translates the content hash to a URI, and converts the URI to an HTTP URL. It then loops through the URLs and fetches the list from the first URL that returns a valid response. If the fetched list fails validation, an error is thrown. If none of the URLs return a valid response, an error is thrown.\n\nThe `sortByListPriority` function is used to sort a list of URLs based on their priority. The priority is determined by the ordering of the default list of lists. The function returns 1 if the first URL has a higher priority, -1 if the second URL has a higher priority, and 0 if they have the same priority.\n\nThe `listVersionLabel` function takes in a `Version` object and returns a string that represents the version label. The version label is in the format `vThis is the production environment.
\n ) : (\nThis is not the production environment.
\n )}\nLoading...
;\n }\n\n if (error) {\n return Error: {error.message}
;\n }\n\n return (\n \n {data.map((nft) => (\n
\n );\n};\n\nconst App = () => {\n return (\n {nft.get(\"name\")}
\n ))}\n \n {pairs.map(([tokenA, tokenB]) => (\n
\n )\n}\n```\n\nIn this example, the `useAllCurrencyCombinations` function is used to generate all possible currency pairs for the `currencyA` and `currencyB` props. The resulting pairs are then mapped to a list of currency symbols, which are displayed in the component.\n## Questions: \n 1. What is the purpose of the `useAllCurrencyCombinations` function?\n- The `useAllCurrencyCombinations` function returns an array of all possible token pairs that can be traded against each other, as well as against a set of common and additional base tokens.\n\n2. What is the significance of the `chainId` variable?\n- The `chainId` variable is used to determine which set of common and additional base tokens to use in the `bases` array.\n\n3. What is the purpose of the `CUSTOM_BASES` object in the `filter` method?\n- The `CUSTOM_BASES` object is used to filter out any token pairs that do not have a custom base token specified for either token in the pair. If a custom base token is specified for a token, then the pair must include that base token in order to be included in the final array.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useAllCurrencyCombinations.md"}}],["881",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useApproveCallback.ts)\n\nThe code defines several React hooks that are used to manage token approvals for the Zoo project. The `useApproveCallback` hook takes in two optional parameters: `amountToApprove` and `spender`. It returns an array with two elements: an `ApprovalState` enum indicating the current approval status, and a function that approves the token if necessary. \n\nThe `useApproveCallbackFromTrade` hook is a wrapper around `useApproveCallback` that takes in a `V2Trade` object, an allowed slippage percentage, and a boolean flag indicating whether to use the Archer router. It calculates the `amountToApprove` based on the input currency of the trade and passes it to `useApproveCallback`.\n\nThe `useVotingApproveCallback` hook is similar to `useApproveCallback`, but it is specifically designed for the Zoo voting system. It takes in `amountToApprove` and `spender` parameters and returns an array with the current approval status and an approval function. \n\nAll of these hooks use other custom hooks defined in the same file, such as `useActiveWeb3React`, `useTokenAllowance`, and `useTokenContract`. They also import various constants and functions from external libraries and files, such as `@zoolabs/zdk`, `@ethersproject/constants`, and `addresses`. \n\nOverall, these hooks provide a convenient way for developers to manage token approvals in the Zoo project. They can be used in various components and modules to ensure that users have approved the necessary tokens before executing trades or voting.\n## Questions: \n 1. What is the purpose of the `useApproveCallback` function?\n- The `useApproveCallback` function returns a variable indicating the state of the approval and a function which approves if necessary or early returns. It is used to handle token approvals for a given spender.\n\n2. What is the purpose of the `useApproveCallbackFromTrade` function?\n- The `useApproveCallbackFromTrade` function wraps the `useApproveCallback` function in the context of a swap. It takes in a trade, allowed slippage, and a boolean flag to indicate whether to use the Archer router or not, and returns the same variables as `useApproveCallback`.\n\n3. What is the purpose of the `useVotingApproveCallback` function?\n- The `useVotingApproveCallback` function is similar to `useApproveCallback`, but it is specifically designed for voting. It returns a variable indicating the state of the approval and a function which approves if necessary or early returns. It is used to handle token approvals for voting.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useApproveCallback.md"}}],["882",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useArcherMinerTips.ts)\n\nThe code is a custom React hook called `useArcherMinerTips` that fetches gas prices from the Archer API and returns them as an object with a `status` and `data` property. The `status` property indicates the current state of the hook, which can be one of three values: `idle`, `fetching`, or `fetched`. The `data` property is an object that contains gas prices for different transaction speeds.\n\nThe hook uses the `useEffect` and `useState` hooks from React to manage state and side effects. When the component mounts, the hook fetches gas prices from the Archer API using the `fetch` function. The API endpoint is determined by the `ChainId` from the `@zoolabs/zdk` library, which is obtained using the `useActiveWeb3React` hook. If the `ChainId` is `MAINNET`, the hook fetches gas prices. If the `ChainId` is not `MAINNET`, the hook does nothing.\n\nOnce the gas prices are fetched, the hook updates the `data` state with the response data and sets the `status` state to `fetched`. If there is an error fetching the gas prices, the `status` state is set to `idle`.\n\nThe `data` object contains gas prices for different transaction speeds, which are represented as strings. The keys of the object are `immediate`, `rapid`, `fast`, `standard`, `slow`, `slower`, and `slowest`. These keys correspond to different gas prices based on the speed of the transaction. For example, a transaction with a gas price of `immediate` will be processed faster than a transaction with a gas price of `slowest`.\n\nThis hook can be used in the larger project to fetch gas prices for transactions and determine the appropriate gas price to use based on the desired transaction speed. For example, if a user wants to send a transaction quickly, they can use the `rapid` gas price. If they are willing to wait longer for the transaction to be processed, they can use the `slow` or `slower` gas price. The `useArcherMinerTips` hook abstracts away the complexity of fetching gas prices from the Archer API and provides a simple interface for accessing gas prices in the project. \n\nExample usage:\n\n```\nimport useArcherMinerTips from './useArcherMinerTips'\n\nfunction MyComponent() {\n const { status, data } = useArcherMinerTips()\n\n if (status === 'fetching') {\n return \n {tokenA.symbol}/{tokenB.symbol}\n
\n ))}\n Loading...
\n }\n\n if (status === 'fetched') {\n return (\n \n
\n )\n }\n\n return null\n}\n```\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code defines a custom React hook called `useArcherMinerTips` that fetches gas prices from an API and returns them as an object. It solves the problem of needing to fetch gas prices in a standardized way across the application.\n\n2. What external dependencies does this code rely on?\n- This code relies on the `react` library, as well as the `@zoolabs/zdk` library for the `ChainId` type. It also imports a constant `ARCHER_GAS_URI` from a configuration file.\n\n3. What is the expected behavior of this code if the `chainId` is not `ChainId.MAINNET`?\n- If the `chainId` is not `ChainId.MAINNET`, the `fetchData` function will not be called and the `status` and `data` values will remain at their initial states of `'idle'` and the default gas price values, respectively.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useArcherMinerTips.md"}}],["883",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useArgentWalletContract.ts)\n\nThe code above is a function that returns an instance of a smart contract called `ArgentWalletContract`. The contract is defined by the `ARGENT_WALLET_ABI` constant, which is imported from a JSON file located in the `constants/abis` directory. \n\nThe function is designed to be used in a larger project that involves interacting with the Ethereum blockchain. It is assumed that the project is using the `@ethersproject/contracts` library, as this is imported at the top of the file. \n\nThe function itself is called `useArgentWalletContract` and is designed to be used as a React hook. It uses several other custom hooks, including `useActiveWeb3React`, `useContract`, and `useIsArgentWallet`. \n\nThe `useActiveWeb3React` hook is used to retrieve the current Ethereum account that the user is connected to. This is necessary because the `ArgentWalletContract` is specific to each user's Ethereum address. \n\nThe `useIsArgentWallet` hook is used to determine whether the current wallet being used is an Argent wallet. If it is, then the `ArgentWalletContract` instance is returned. If not, then `null` is returned. \n\nThe `useContract` hook is used to actually create the instance of the `ArgentWalletContract`. It takes three arguments: the Ethereum address of the user (if they are using an Argent wallet), the ABI of the contract, and a boolean indicating whether to use the read-only version of the contract. \n\nOverall, this function is a useful tool for interacting with the `ArgentWalletContract` in a larger Ethereum-based project. It is designed to be used as a React hook and relies on several other custom hooks to function properly. \n\nExample usage:\n\n```\nimport { useArgentWalletContract } from './useArgentWalletContract'\n\nfunction MyComponent() {\n const argentWalletContract = useArgentWalletContract()\n\n // Use the contract instance to interact with the Ethereum blockchain\n // ...\n}\n```\n## Questions: \n 1. What is `ARGENT_WALLET_ABI` and where is it defined?\n- `ARGENT_WALLET_ABI` is likely an ABI (Application Binary Interface) for a smart contract related to the Argent wallet. Its definition is likely located in the `../constants/abis/argent-wallet.json` file.\n\n2. What is the purpose of the `useActiveWeb3React` and `useContract` hooks?\n- The `useActiveWeb3React` hook likely provides access to the active Web3 provider and account, while the `useContract` hook likely creates an instance of a smart contract using its ABI and address.\n\n3. What is the significance of the `useIsArgentWallet` hook and how is it used?\n- The `useIsArgentWallet` hook likely checks if the current account is an Argent wallet. It is used to conditionally pass the account to the `useContract` hook, depending on whether or not it is an Argent wallet.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useArgentWalletContract.md"}}],["884",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useBentoBox.ts)\n\nThe `useBentoBox` function is a React hook that provides functionality for interacting with the BentoBox smart contract. The BentoBox is a smart contract that allows for efficient and gas-saving token transfers and storage. \n\nThe function imports several dependencies, including `BigNumber` from the `@ethersproject/bignumber` library, `getAddress` from the `@ethersproject/address` library, `AddressZero` from the `@ethersproject/constants` library, and `WNATIVE_ADDRESS` from the `@zoolabs/zdk` library. It also imports two custom hooks: `useActiveWeb3React` and `useBentoBoxContract`, as well as `useCallback` from the `react` library and `useTransactionAdder` from a custom `transactions` state.\n\nThe `useBentoBox` function returns an object with two properties: `deposit` and `withdraw`. Both of these properties are functions that take two arguments: `tokenAddress` and `value`. `tokenAddress` is a string representing the address of the token to be deposited or withdrawn, and `value` is a `BigNumber` representing the amount of the token to be deposited or withdrawn.\n\nThe `deposit` function first checks if `value` and `chainId` are truthy. If they are, it converts `tokenAddress` to a checksummed address using `getAddress` and checks if it is equal to the `WNATIVE_ADDRESS` for the current `chainId`. If it is, it calls the `deposit` function on the `bentoBoxContract` with `AddressZero` as the `to` address, `account` as the `from` and `recipient` addresses, `value` as the `amount`, and `{ value }` as the `overrides`. If it is not, it calls the `deposit` function on the `bentoBoxContract` with `tokenAddressChecksum` as the `to` address, `account` as the `from` and `recipient` addresses, `value` as the `amount`, and no `overrides`. If there is an error, it logs the error to the console and returns the error.\n\nThe `withdraw` function is similar to the `deposit` function, but it first checks if `tokenAddressChecksum` is equal to the `WNATIVE_ADDRESS` for the current `chainId`. If it is, it sets the `to` address to `0x0000000000000000000000000000000000000000`. If it is not, it sets the `to` address to `tokenAddressChecksum`. It then calls the `withdraw` function on the `bentoBoxContract` with the appropriate arguments. If there is an error, it logs the error to the console and returns the error.\n\nThis hook can be used in a React component to interact with the BentoBox smart contract. For example, a component that allows a user to deposit tokens into the BentoBox could use the `deposit` function to initiate the deposit when a button is clicked. Similarly, a component that allows a user to withdraw tokens from the BentoBox could use the `withdraw` function to initiate the withdrawal when a button is clicked.\n## Questions: \n 1. What is the purpose of the `useBentoBox` function?\n- The `useBentoBox` function is a custom React hook that provides methods for depositing and withdrawing tokens from the BentoBox smart contract.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `@ethersproject/bignumber`, `@ethersproject/address`, `@ethersproject/constants`, and `@zoolabs/zdk`.\n\n3. What is the significance of `WNATIVE_ADDRESS`?\n- `WNATIVE_ADDRESS` is a constant defined in the `@zoolabs/zdk` library that represents the address of the native token for the current blockchain network. It is used in this code to determine whether a token being deposited or withdrawn is the native token, so that the appropriate method can be called on the BentoBox contract.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useBentoBox.md"}}],["885",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useBentoBoxAllowance.ts)\n\nThe code defines a custom React hook called `useAllowance` that returns the allowance of a given ERC20 token for the current user's account. The hook takes a single argument, `tokenAddress`, which is the address of the ERC20 token contract.\n\nThe hook uses several other hooks and libraries to accomplish its task. The `useActiveWeb3React` hook is used to get the current user's Ethereum account. The `useBentoBoxContract` and `useContract` hooks are used to get instances of the BentoBox and ERC20 token contracts, respectively. The `getAddress` function from the `@ethersproject/address` library is used to convert the `tokenAddress` to a checksummed address.\n\nOnce the necessary contracts and addresses are obtained, the hook fetches the current allowance for the user's account using the `allowance` function of the ERC20 token contract. The allowance is then formatted as a `Fraction` using the `Fraction.from` method, which takes a `BigNumber` and a divisor. In this case, the divisor is `10^18`, since ERC20 tokens have 18 decimal places. The formatted allowance is then stored in state using the `setAllowance` function.\n\nThe hook also sets up an interval to periodically refresh the allowance every 10 seconds. This is done using the `setInterval` function in the `useEffect` hook. The interval is cleared when the component unmounts using the `clearInterval` function.\n\nOverall, this hook is useful for any part of the project that needs to check the current allowance of an ERC20 token for the user's account. For example, it could be used in a component that displays the user's current token balances and allowances for various tokens. Here is an example usage of the hook:\n\n```\nimport useAllowance from '../hooks/useAllowance'\n\nfunction MyComponent() {\n const allowance = useAllowance('0x1234567890123456789012345678901234567890')\n return Immediate: {data.immediate}
\nRapid: {data.rapid}
\nFast: {data.fast}
\nStandard: {data.standard}
\nSlow: {data.slow}
\nSlower: {data.slower}
\nSlowest: {data.slowest}
\nCurrent allowance: {allowance}
\n}\n```\n## Questions: \n 1. What does this code do?\n- This code exports a custom hook called `useAllowance` which takes a token address as input and returns the allowance of that token for the current user's account.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies including `react`, `@ethersproject/bignumber`, `@ethersproject/address`, and `../hooks/useContract` and `../hooks/useActiveWeb3React` which are custom hooks defined elsewhere in the project.\n\n3. What is the purpose of the `fetchAllowance` function?\n- The `fetchAllowance` function is an asynchronous function that fetches the allowance of a token for the current user's account and updates the `allowance` state variable with the formatted value of the allowance. It is called on mount and every 10 seconds thereafter.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useBentoBoxAllowance.md"}}],["886",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useBentoMasterApproveCallback.ts)\n\nThe code in this file provides a hook called `useBentoMasterApproveCallback` that can be used to approve a master contract on the BentoBox protocol. The BentoBox protocol is a lending protocol that allows users to deposit assets and earn interest. The protocol uses a system of master contracts to manage the assets and interest rates.\n\nThe `useBentoMasterApproveCallback` hook takes two arguments: the address of the master contract to approve, and an options object that can include the name of the contract and the name of the function to call. The hook returns an object that includes the current approval state, a function to approve the contract, a function to get a permit for the contract, and the current permit.\n\nThe `useBentoMasterApproveCallback` hook uses several other hooks to get the necessary data. The `useActiveWeb3React` hook is used to get the current account and chain ID. The `useBentoBoxContract` hook is used to get the BentoBox contract instance. The `useAllTransactions` and `useTransactionAdder` hooks are used to manage the approval transaction.\n\nThe `useBentoMasterApproveCallback` hook also uses several utility functions to sign the approval transaction and split the signature. These functions are imported from other files in the project.\n\nThe `useBentoMasterApproveCallback` hook is used in other parts of the project to manage the approval of master contracts. For example, it may be used in a component that allows users to deposit assets into the BentoBox protocol. When the user clicks the deposit button, the component can call the `useBentoMasterApproveCallback` hook to check if the master contract is approved. If the contract is not approved, the component can call the `getPermit` function to get a permit for the contract. The permit can then be used to approve the contract by calling the `approve` function. Once the contract is approved, the component can call the `deposit` function to deposit the assets into the protocol.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a hook called `useBentoMasterApproveCallback` that returns an object with functions and data related to approving a master contract in the BentoBox protocol.\n\n2. What are the dependencies of this code?\n- This code depends on several other hooks and functions from different files, including `useBentoMasterContractAllowed`, `useActiveWeb3React`, `useBentoBoxContract`, `useAllTransactions`, `useTransactionAdder`, and `signMasterContractApproval`.\n\n3. What are the possible values of `BentoApprovalState` and `BentoApproveOutcome`?\n- `BentoApprovalState` is an enum with possible values of `UNKNOWN`, `NOT_APPROVED`, `PENDING`, `FAILED`, and `APPROVED`. `BentoApproveOutcome` is another enum with possible values of `SUCCESS`, `REJECTED`, `FAILED`, and `NOT_READY`.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useBentoMasterApproveCallback.md"}}],["887",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useColor.ts)\n\nThis code defines two React hooks, `useColor` and `useListColor`, that are used to determine the dominant color of an image. The hooks use the `Vibrant` library to extract the color palette of an image and return the hex code of the most vibrant color. \n\nThe `getColorFromToken` function is used to extract the color of a token logo. It takes a `Token` object as input and returns a promise that resolves to a hex code string or null. If the token is on the Rinkeby network and has a specific address, the function returns a pre-defined hex code. Otherwise, it constructs a URL to the token's logo image and uses `Vibrant` to extract the color palette. If a vibrant color is found, the function applies the `shade` function from the `polished` library to the color until it has a minimum contrast score of 3 against white. The function then returns the resulting hex code.\n\nThe `getColorFromUriPath` function is used to extract the color of an image from a URI. It takes a URI string as input and returns a promise that resolves to a hex code string or null. The function first converts the URI to an HTTP URL using the `uriToHttp` function from a separate file. It then uses `Vibrant` to extract the color palette of the image and returns the hex code of the most vibrant color.\n\nThe `useColor` hook takes a `Token` object as input and returns the dominant color of the token's logo image. It initializes the color state to `#0094ec` and uses `useLayoutEffect` to asynchronously fetch the color from the token's logo image. If the token is not null and a color is found, the hook updates the color state with the new value. If the token is null or the component is unmounted before the color is fetched, the hook sets the color state back to `#0094ec`.\n\nThe `useListColor` hook takes a URI string as input and returns the dominant color of the image at the URI. It initializes the color state to `#0094ec` and uses `useLayoutEffect` to asynchronously fetch the color from the image. If the URI is not null and a color is found, the hook updates the color state with the new value. If the URI is null or the component is unmounted before the color is fetched, the hook sets the color state back to `#0094ec`.\n\nThese hooks can be used in the larger project to dynamically set the color of components based on the dominant color of an image. For example, the `useColor` hook could be used to set the background color of a token card to the dominant color of the token's logo image. The `useListColor` hook could be used to set the background color of a list item to the dominant color of the item's image.\n## Questions: \n 1. What is the purpose of the `getColorFromToken` function?\n- The `getColorFromToken` function takes a `Token` object and returns a promise that resolves to a string representing the color of the token's logo image.\n\n2. What is the purpose of the `useColor` function?\n- The `useColor` function is a React hook that takes a `Token` object and returns a color string based on the logo image of the token. It uses the `getColorFromToken` function internally.\n\n3. What is the purpose of the `useListColor` function?\n- The `useListColor` function is another React hook that takes a URI string representing an image and returns a color string based on the image. It uses the `getColorFromUriPath` function internally.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useColor.md"}}],["888",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useCopyClipboard.ts)\n\nThe code above is a custom React hook that provides functionality for copying text to the clipboard. It uses the `copy-to-clipboard` library to perform the actual copying of the text. \n\nThe hook returns an array with two values: a boolean indicating whether the text has been copied to the clipboard, and a function that can be called to initiate the copying process. The function takes a single argument, `toCopy`, which is the text to be copied.\n\nThe `useCallback` hook is used to memoize the `staticCopy` function, which is responsible for performing the copying. This is done to prevent unnecessary re-renders of the component that uses this hook. \n\nThe `useEffect` hook is used to handle the state of the `isCopied` variable. When the text is successfully copied to the clipboard, `isCopied` is set to `true`. The `useEffect` hook then sets a timeout to reset `isCopied` to `false` after a specified amount of time (`timeout`). This timeout is cleared if the component unmounts before the timeout is reached.\n\nThis hook can be used in any React component that needs to provide a copy-to-clipboard functionality. For example, it could be used in a button component that copies a URL to the clipboard when clicked. \n\nHere is an example of how this hook could be used in a component:\n\n```\nimport React from 'react'\nimport useCopyClipboard from './useCopyClipboard'\n\nfunction CopyButton({ text }) {\n const [isCopied, copyToClipboard] = useCopyClipboard()\n\n const handleClick = () => {\n copyToClipboard(text)\n }\n\n return (\n \n )\n}\n\nexport default CopyButton\n```\n\nIn this example, the `CopyButton` component takes a `text` prop, which is the text to be copied to the clipboard. When the button is clicked, the `copyToClipboard` function is called with the `text` prop as an argument. The `isCopied` value is used to display a message to the user indicating whether the text has been successfully copied.\n## Questions: \n 1. What does this code do?\n This code exports a custom React hook called `useCopyClipboard` that takes an optional timeout parameter and returns a tuple containing a boolean value indicating whether the copy operation was successful and a function to copy text to the clipboard.\n\n2. What library dependencies does this code have?\n This code imports two libraries: `copy-to-clipboard` and `react`.\n\n3. What is the purpose of the `useEffect` hook in this code?\n The `useEffect` hook is used to set a timeout to reset the `isCopied` state to `false` after a successful copy operation. It also clears the timeout if the `isCopied` state changes before the timeout is reached.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useCopyClipboard.md"}}],["889",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useCurrentBlockTimestamp.ts)\n\nThe code above is a TypeScript function that is used to retrieve the current timestamp from the blockchain. It is part of a larger project called \"zoo\" and is located in a file within that project. \n\nThe function imports two modules: `BigNumber` from the `@ethersproject/bignumber` library and `useMulticall2Contract` from a custom `useContract` module. It also imports `useSingleCallResult` from a custom `multicall` state module. \n\nThe function itself is named `useCurrentBlockTimestamp` and returns a `BigNumber` object or `undefined`. It first calls the `useMulticall2Contract` function to retrieve the contract instance for the `Multicall2` contract. It then calls the `useSingleCallResult` function, passing in the `multicall` instance and the string `'getCurrentBlockTimestamp'` as arguments. This function retrieves the result of a single call to the `Multicall2` contract, which should return the current timestamp of the blockchain. \n\nIf the result is not `undefined`, the function returns the first element of the result array as a `BigNumber` object. If the result is `undefined`, the function returns `undefined`. \n\nThis function can be used in the larger project to retrieve the current timestamp of the blockchain. This information can be useful for various purposes, such as time-based calculations or verifying the timing of certain events. \n\nExample usage:\n\n```typescript\nimport useCurrentBlockTimestamp from './useCurrentBlockTimestamp'\n\nconst currentTimestamp = useCurrentBlockTimestamp()\n\nif (currentTimestamp) {\n console.log(`The current timestamp is ${currentTimestamp.toString()}`)\n} else {\n console.log('Unable to retrieve current timestamp')\n}\n```\n## Questions: \n 1. What is the purpose of the `BigNumber` import from `@ethersproject/bignumber`?\n- The `BigNumber` import is likely used to handle large numbers in a precise and efficient manner, which is important in blockchain development.\n\n2. What is the `useSingleCallResult` function and where is it defined?\n- The `useSingleCallResult` function is likely defined in the `../state/multicall/hooks` file, and it is used to retrieve the result of a single function call from a smart contract.\n\n3. What smart contract function is being called in the `useCurrentBlockTimestamp` function?\n- The `getCurrentBlockTimestamp` function is being called in the `useCurrentBlockTimestamp` function to retrieve the current timestamp from the blockchain.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useCurrentBlockTimestamp.md"}}],["890",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useDebounce.ts)\n\nThe code is a custom React hook called `useDebounce` that takes in two parameters: a value of generic type `T` and a delay in milliseconds. The purpose of this hook is to debounce the value passed in, meaning that it delays the execution of a function until a certain amount of time has passed since the last time it was called. This is useful for scenarios where you want to avoid executing a function too frequently, such as when handling user input.\n\nThe hook uses the `useState` and `useEffect` hooks from React to manage the state of the debounced value. When the hook is first called, it sets the initial value of `debouncedValue` to the value passed in. It then sets up an effect that runs whenever the `value` or `delay` parameters change. This effect sets a timeout using `setTimeout` that will update the `debouncedValue` to the current `value` after the specified `delay` has passed. If the `value` or `delay` parameters change before the timeout has completed, the effect will clean up the previous timeout using `clearTimeout` and start a new one.\n\nThe hook returns the `debouncedValue`, which will only be updated after the specified `delay` has passed since the last time the `value` parameter was updated. This can be used in a larger project to improve performance by reducing the number of times a function is called in response to user input. For example, if you have a search bar that executes a search function every time the user types a letter, you could use this hook to delay the execution of the search function until the user has stopped typing for a certain amount of time. This would reduce the number of unnecessary search requests and improve the overall performance of the application. \n\nExample usage:\n\n```\nimport useDebounce from './useDebounce'\n\nfunction SearchBar() {\n const [searchTerm, setSearchTerm] = useState('')\n const debouncedSearchTerm = useDebounce(searchTerm, 500)\n\n useEffect(() => {\n // Execute search function after debouncedSearchTerm has been updated\n searchFunction(debouncedSearchTerm)\n }, [debouncedSearchTerm])\n\n return (\n \n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code and how is it used in the `zoo` project?\n- This code provides a custom hook called `useDebouncedChangeHandler` that can be used to debounce the handling of a rapidly changing value. It takes in the changing value, a change handler function, and a debounce time in milliseconds as parameters, and returns an array containing the current value and a function to update the value with debounced changes.\n\n2. What type of values can be passed as the `value` parameter?\n- The `value` parameter is a generic type `T`, which means it can accept any type of value.\n\n3. How does the `useDebouncedChangeHandler` hook work internally to debounce the value changes?\n- The hook uses the `useState`, `useCallback`, and `useEffect` hooks from React to manage the state of the changing value and the debounced updates. It sets up a timer using `setTimeout` to delay the execution of the change handler function until the debounce time has elapsed, and clears the timer if the value changes again before the timer has finished.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useDebouncedChangeHandler.md"}}],["892",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useENS.ts)\n\nThe code in this file is a function that takes in a string parameter, which can be either an ENS name or an Ethereum address. The function then performs a lookup to resolve the name or address to an actual Ethereum address and name. \n\nThe function first imports a validation function from another file in the project. This function checks if the input parameter is a valid Ethereum address. If it is, the function proceeds to perform a reverse lookup using the useENSName function, which takes in the validated address as a parameter. If the input parameter is not a valid Ethereum address, the function performs a regular lookup using the useENSAddress function, which takes in the input parameter as a parameter.\n\nThe function then returns an object with three properties: loading, address, and name. The loading property is a boolean that indicates whether the lookup is still in progress. The address property is a string that represents the resolved Ethereum address. The name property is a string that represents the resolved ENS name.\n\nThis function can be used in the larger project to resolve ENS names to Ethereum addresses and vice versa. For example, if a user enters an ENS name in a form, this function can be used to resolve the name to an Ethereum address that can be used in a smart contract. Conversely, if a user enters an Ethereum address, this function can be used to resolve the address to an ENS name that can be displayed in the UI. \n\nHere is an example of how this function can be used:\n\n```\nimport useENS from './useENS'\n\nconst resolved = useENS('myensname.eth')\n\nconsole.log(resolved.address) // '0x1234567890abcdef1234567890abcdef12345678'\nconsole.log(resolved.name) // 'myensname.eth'\n```\n## Questions: \n 1. What is the purpose of the `isAddress` function imported from `../functions/validate`?\n- The `isAddress` function is used to validate whether the `nameOrAddress` parameter is a valid Ethereum address.\n\n2. What is the difference between `useENSName` and `useENSAddress`?\n- `useENSName` is used to perform a reverse lookup of an Ethereum address to its corresponding ENS name, while `useENSAddress` is used to perform a forward lookup of an ENS name to its corresponding Ethereum address.\n\n3. What is the expected return value of the `useENS` function?\n- The `useENS` function returns an object with three properties: `loading` (a boolean indicating whether the lookup is still in progress), `address` (the resolved Ethereum address), and `name` (the resolved ENS name).","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useENS.md"}}],["893",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useENSAddress.ts)\n\nThe `useENSAddress` function is used to lookup the address of an Ethereum Name Service (ENS) name. ENS is a decentralized naming system built on the Ethereum blockchain that allows users to register human-readable names for their Ethereum addresses. This function takes an optional `ensName` parameter, which is the ENS name to lookup. If no `ensName` is provided, the function will return an object with a `loading` property set to `true` and an `address` property set to `null`.\n\nThe function first uses the `useDebounce` hook to debounce the `ensName` parameter. This means that if the `ensName` parameter changes, the function will wait for 200 milliseconds before performing the ENS lookup. This is done to prevent the function from making too many requests to the ENS registry.\n\nNext, the function uses the `namehash` function from the `@ethersproject/hash` library to compute the hash of the debounced `ensName`. The hash is used as an argument to the ENS resolver contract to look up the address associated with the ENS name. The function uses the `useENSRegistrarContract` and `useENSResolverContract` hooks to get instances of the ENS registrar and resolver contracts respectively. It then uses the `useSingleCallResult` hook to call the `resolver` and `addr` functions on the contracts with the computed hash argument.\n\nFinally, the function returns an object with two properties: `loading` and `address`. The `loading` property is set to `true` if the `ensName` parameter has changed or if the resolver or addr calls are still loading. The `address` property is set to the address associated with the ENS name if the lookup was successful, or `null` otherwise.\n\nThis function can be used in the larger project to provide a convenient way for users to look up the addresses associated with ENS names. For example, it could be used in a wallet application to allow users to send transactions to ENS names instead of Ethereum addresses. Here is an example usage of the `useENSAddress` function:\n\n```\nimport useENSAddress from './useENSAddress'\n\nfunction MyComponent() {\n const { loading, address } = useENSAddress('my-ens-name.eth')\n\n if (loading) {\n return Debounced value: {debouncedValue}
\nLoading...
\n }\n\n return (\n \n Address: {address}\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a custom hook called `useENSAddress` that performs a lookup for an ENS name to find its address.\n\n2. What external dependencies does this code rely on?\n \n This code relies on several external dependencies, including `useContract` from a local file, `isZero` from `../functions`, `namehash` from `@ethersproject/hash`, `useDebounce` from a local file, `useMemo` from `react`, and `useSingleCallResult` from `../state/multicall/hooks`.\n\n3. What is the expected behavior if `ensName` is not provided?\n \n If `ensName` is not provided, the `useENSAddress` hook will still run, but it will return an object with `loading` set to `true` and `address` set to `null`.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useENSAddress.md"}}],["894",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useENSContentHash.ts)\n\nThe `useENSContentHash` function is used to look up the contenthash associated with an ENS name. ENS (Ethereum Name Service) is a decentralized naming system built on the Ethereum blockchain that allows users to register human-readable domain names and associate them with Ethereum addresses or other metadata. The contenthash is a piece of metadata that can be associated with an ENS name and is used to store IPFS content hashes or other data.\n\nThe function takes an optional `ensName` parameter, which is the ENS name to look up. If no `ensName` is provided, the function returns an object with a `loading` property set to `true` and a `contenthash` property set to `null`. If an `ensName` is provided, the function first calculates the namehash of the ENS name using the `namehash` function from the `@ethersproject/hash` library. If the namehash calculation fails, the function returns an object with a `loading` property set to `true` and a `contenthash` property set to `null`.\n\nThe function then uses the `useENSRegistrarContract` and `useSingleCallResult` hooks from the `useContract` and `multicall` modules, respectively, to retrieve the resolver contract address associated with the ENS name. The `useENSRegistrarContract` hook returns the ENS registrar contract, which is used to look up the resolver contract address associated with the ENS name. The `useSingleCallResult` hook is used to call the `resolver` function on the registrar contract with the namehash of the ENS name as an argument. The result of this call is the resolver contract address associated with the ENS name.\n\nIf the resolver contract address is zero (i.e., the ENS name is not registered), the function returns an object with a `loading` property set to `true` and a `contenthash` property set to `null`. Otherwise, the function uses the `useENSResolverContract` hook to retrieve the resolver contract associated with the resolver contract address. The `useENSResolverContract` hook returns the resolver contract, which is used to look up the contenthash associated with the ENS name. The `useSingleCallResult` hook is used to call the `contenthash` function on the resolver contract with the namehash of the ENS name as an argument. The result of this call is the contenthash associated with the ENS name.\n\nThe function returns an object with a `loading` property set to `true` if either the resolver address or contenthash is still loading, and a `contenthash` property set to the contenthash associated with the ENS name if it is available, or `null` otherwise.\n\nThis function can be used in the larger project to retrieve the contenthash associated with an ENS name, which can be used to retrieve IPFS content or other metadata associated with the name. For example, the contenthash could be used to retrieve a website hosted on IPFS associated with the ENS name. An example usage of this function is as follows:\n\n```\nimport useENSContentHash from './useENSContentHash'\n\nfunction MyComponent({ ensName }) {\n const { loading, contenthash } = useENSContentHash(ensName)\n\n if (loading) {\n return Loading...
\n }\n\n if (!contenthash) {\n return No contenthash found for {ensName}
\n }\n\n // Use contenthash to retrieve IPFS content or other metadata\n return Contenthash: {contenthash}
\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a custom React hook called `useENSContentHash` that performs a lookup for an ENS name to find its contenthash.\n\n2. What other custom hooks are being used in this code?\n- This code imports and uses two other custom hooks called `useENSRegistrarContract` and `useENSResolverContract` from the `useContract` module, as well as `useSingleCallResult` from the `multicall/hooks` module.\n\n3. What is the expected input and output of the `useENSContentHash` hook?\n- The `useENSContentHash` hook expects an optional string parameter called `ensName` and returns an object with two properties: `loading` (a boolean indicating whether the hook is currently loading data) and `contenthash` (a string or null value representing the contenthash of the ENS name).","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useENSContentHash.md"}}],["895",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useENSName.ts)\n\nThe code is a React hook that performs a reverse lookup for an Ethereum address to find its corresponding ENS name. ENS (Ethereum Name Service) is a decentralized naming system built on the Ethereum blockchain that maps human-readable names to Ethereum addresses. \n\nThe hook takes an optional `address` parameter and returns an object with two properties: `ENSName` and `loading`. `ENSName` is the ENS name corresponding to the given `address`, or `null` if the name cannot be found. `loading` is a boolean that indicates whether the hook is currently loading data.\n\nThe hook uses several other hooks and functions to perform its task. `useDebounce` is used to debounce the `address` parameter to avoid making too many requests to the ENS registry. `useMemo` is used to memoize the `ensNodeArgument` variable, which is an array containing the ENS node hash for the reverse lookup. `useENSRegistrarContract` and `useENSResolverContract` are custom hooks that return instances of the ENS registrar and resolver contracts, respectively. Finally, `useSingleCallResult` is used to call the `resolver` and `name` functions on the resolver contract and retrieve their results.\n\nOverall, this hook provides a convenient way to look up ENS names for Ethereum addresses in a React application. It can be used in conjunction with other hooks and components to build more complex applications that interact with the Ethereum blockchain. For example, it could be used to display human-readable names for Ethereum addresses in a wallet application or to verify that a user has control over a particular ENS name. \n\nExample usage:\n\n```jsx\nimport useENSName from './useENSName'\n\nfunction MyComponent({ address }) {\n const { ENSName, loading } = useENSName(address)\n\n if (loading) {\n return Loading...
\n }\n\n if (ENSName) {\n return {ENSName}
\n }\n\n return No ENS name found for {address}
\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n \n This code is a custom hook called `useENSName` that performs a reverse lookup for an Ethereum address to find its corresponding ENS name.\n\n2. What external libraries or dependencies does this code rely on?\n \n This code relies on several external libraries and dependencies, including `@ethersproject/address`, `@ethersproject/hash`, `useDebounce`, `react`, and `useSingleCallResult`.\n\n3. What is the expected input and output of this code?\n \n The expected input of this code is a string representing an Ethereum address, which is an optional parameter. The expected output is an object with two properties: `ENSName`, which is a string representing the corresponding ENS name of the input address, and `loading`, which is a boolean indicating whether the ENS name is currently being loaded.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useENSName.md"}}],["896",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useERC20Permit.ts)\n\nThe code is a TypeScript module that exports three functions: `useERC20Permit`, `useV2LiquidityTokenPermit`, and `useERC20PermitFromTrade`. The module imports several dependencies, including `@zoolabs/zdk`, `react`, and `@ethersproject/bytes`. \n\nThe `useERC20Permit` function is a React hook that returns an object with three properties: `state`, `signatureData`, and `gatherPermitSignature`. The function takes three arguments: `currencyAmount`, `spender`, and `overridePermitInfo`. The `currencyAmount` argument is an object that represents the amount of a currency to be approved for spending. The `spender` argument is a string that represents the Ethereum address of the account that will be allowed to spend the approved currency. The `overridePermitInfo` argument is an optional object that provides additional information about the permit. \n\nThe `useV2LiquidityTokenPermit` function is a wrapper around `useERC20Permit` that provides default values for the `overridePermitInfo` argument. \n\nThe `useERC20PermitFromTrade` function is a helper function that takes a `V2Trade` object and an allowed slippage percentage as arguments. The function returns the result of calling `useERC20Permit` with the maximum amount of currency that can be spent in the trade and the `spender` argument set to the trade object. \n\nThe module also defines several constants, interfaces, and types, including `PermitType`, `PERMIT_VALIDITY_BUFFER`, `PermitInfo`, `PERMITTABLE_TOKENS`, `UseERC20PermitState`, `BaseSignatureData`, `StandardSignatureData`, `AllowedSignatureData`, `SignatureData`, `EIP712_DOMAIN_TYPE`, `EIP712_DOMAIN_TYPE_NO_VERSION`, `EIP2612_TYPE`, and `PERMIT_ALLOWED_TYPE`. \n\nThe `PERMITTABLE_TOKENS` object is a mapping of Ethereum chain IDs to objects that map token addresses to `PermitInfo` objects. The `PermitInfo` object contains information about the type of permit required for the token, such as the name of the token and the version of the permit. \n\nThe `useERC20Permit` function uses the `useActiveWeb3React` hook to get the current Ethereum account and chain ID. It then uses the `useEIP2612Contract` hook to get the contract object for the token. The function also uses the `useIsArgentWallet` hook to determine if the user is using an Argent wallet. \n\nThe function then checks if all the required arguments are present and returns an object with `state` set to `NOT_APPLICABLE` if any of the arguments are missing. If the required arguments are present, the function checks if the token supports the permit type required by the `PermitInfo` object. If the token does not support the permit type, the function returns an object with `state` set to `NOT_APPLICABLE`. \n\nIf the token supports the permit type, the function gets the nonce for the token and checks if it is valid. If the nonce is not valid, the function returns an object with `state` set to `LOADING`. If the nonce is valid, the function checks if the signature data is valid. If the signature data is valid, the function returns an object with `state` set to `SIGNED`. If the signature data is not valid, the function returns an object with `state` set to `NOT_SIGNED`. \n\nIf the signature data is not valid, the function returns an object with `gatherPermitSignature` set to a function that gathers the permit signature. The function uses the `eth_signTypedData_v4` method to sign the permit data and sets the `signatureData` object with the signed data. \n\nOverall, this module provides a set of functions that can be used to generate permit signatures for ERC20 tokens. These functions are designed to be used in a React application and rely on several hooks to interact with the Ethereum blockchain.\n## Questions: \n 1. What is the purpose of the `useERC20Permit` function and how is it used?\n \n The `useERC20Permit` function is used to generate a permit signature for a given ERC20 token and spender. It takes in a `currencyAmount` and `spender` as arguments, and returns an object with `signatureData`, `state`, and `gatherPermitSignature` properties. The `signatureData` property contains the permit signature data, the `state` property indicates whether the permit has been signed or not, and the `gatherPermitSignature` property is a function that can be called to initiate the permit signature process.\n\n2. What is the purpose of the `PERMITTABLE_TOKENS` object and how is it used?\n \n The `PERMITTABLE_TOKENS` object is a mapping of token addresses to permit information for various chains. It is used to determine whether a given token is permit-enabled and what type of permit is required. The `useERC20Permit` function uses this object to determine the permit information for a given token.\n\n3. What is the purpose of the `useV2LiquidityTokenPermit` function and how is it used?\n \n The `useV2LiquidityTokenPermit` function is a specialized version of the `useERC20Permit` function that is used specifically for removing liquidity from a Uniswap V2 pool. It takes in a `liquidityAmount` and `spender` as arguments, and returns an object with `signatureData`, `state`, and `gatherPermitSignature` properties. The `signatureData` property contains the permit signature data, the `state` property indicates whether the permit has been signed or not, and the `gatherPermitSignature` property is a function that can be called to initiate the permit signature process.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useERC20Permit.md"}}],["897",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useEagerConnect.ts)\n\nThe code above is a custom React hook called `useEagerConnect` that is used to connect a user's wallet to a decentralized application (dApp). This hook is part of a larger project called \"zoo\" and is located in the \"zoo\" file. \n\nThe hook uses the `useEffect` and `useState` hooks from the React library, as well as the `useActiveWeb3React` hook from another custom hook file. It also imports the `injected` object from a `wallets` configuration file and the `isMobile` function from the `react-device-detect` library.\n\nThe `useEagerConnect` hook first calls the `useActiveWeb3React` hook to get the current web3 provider and whether or not the user is currently connected to a wallet. It then sets the `tried` state to `false` using the `useState` hook.\n\nThe first `useEffect` hook is used to check if the user is authorized to connect their wallet using the `injected` object. If the user is authorized, the `connector` is activated using the `activate` method with the `injected` object and `undefined` parameters. The third parameter is set to `true` to indicate that the connection should be persistent. If the user is not authorized, the hook checks if the user is on a mobile device and has the `ethereum` object available. If so, the `connector` is activated using the same parameters as before. If not, the `tried` state is set to `true`.\n\nThe second `useEffect` hook is used to update the `tried` state to `true` if the connection was successful and the `active` state is `true`.\n\nFinally, the `useEagerConnect` hook returns the `tried` state, which is used to determine whether or not the connection was successful.\n\nThis hook can be used in a larger project to automatically connect a user's wallet to a dApp when they visit the site. For example, the hook could be used in a decentralized exchange (DEX) to automatically connect the user's wallet and display their balances and trading history. \n\nExample usage:\n\n```\nimport useEagerConnect from './useEagerConnect'\n\nfunction MyComponent() {\n const triedToConnect = useEagerConnect()\n\n if (triedToConnect) {\n // display content that requires a wallet connection\n } else {\n // display loading or connection prompt\n }\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a custom React hook called `useEagerConnect` that attempts to connect to a web3 provider using the `injected` wallet configuration and returns a boolean value indicating whether the connection was attempted or not.\n\n2. What is the significance of the `useEffect` hooks in this code?\n \n The first `useEffect` hook runs only once on mount and attempts to connect to the web3 provider using the `injected` wallet configuration. The second `useEffect` hook runs whenever the `active` state variable changes and sets the `tried` state variable to `true` if the connection was successful.\n\n3. What is the purpose of the `isMobile` check in this code?\n \n The `isMobile` check is used to determine whether the user is accessing the application from a mobile device. If so, and if the `window.ethereum` object is available, the `injected` wallet configuration is used to attempt to connect to the web3 provider.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useEagerConnect.md"}}],["898",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useFarmRewards.ts)\n\nThe `useFarmRewards` function is a custom React hook that retrieves and processes data related to farms and their rewards on the SushiSwap decentralized exchange. The hook imports various functions and constants from other files in the project, including enums, graph services, and other custom hooks.\n\nThe function first retrieves the current chain ID using the `useActiveWeb3React` hook. It then uses this ID to fetch the user's positions in the farms using the `usePositions` hook. The function also retrieves the block number from one week ago using the `useBlock` hook.\n\nNext, the function fetches data on all farms using the `useFarms` hook, and extracts the addresses of the pairs involved in these farms. It then uses the `useSushiPairs` and `useKashiPairs` hooks to fetch data on the SushiSwap and Kashi pairs, respectively, that correspond to these addresses. The function also retrieves data on the average block time, the total allocation points for the MasterChef V1 contract, and the SUSHI rewards per block for this contract.\n\nThe function then retrieves the current prices of various tokens, including SUSHI, ETH, MATIC, STAKE, and ONE, using various `useXPrice` hooks. It calculates the number of blocks per day based on the average block time, and defines a `map` function that processes data for each farm.\n\nThe `map` function first checks whether the farm is based on a SushiSwap or Kashi pair, and retrieves the corresponding pair data. It then calculates the rewards for the farm based on the allocation points, SUSHI rewards per block, and other factors. The function also calculates the total value locked (TVL) for the farm, as well as the fee APY per hour, day, month, and year. It then calculates the ROI per block, as well as the reward APY per hour, day, month, and year. Finally, the function returns an object containing all of this data, as well as the original farm data and the user's position in the farm.\n\nThe `useFarmRewards` function returns an array of objects, where each object corresponds to a farm and contains all of the processed data described above. This data can be used to display information about the farms and their rewards to the user, as well as to make decisions about which farms to invest in. For example, the ROI and reward APY data can be used to compare the profitability of different farms, while the TVL data can be used to assess the liquidity of each farm.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a custom React hook called `useFarmRewards` that fetches data from various subgraphs and services to calculate rewards and other metrics for farms in the Zoo project.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `@zoolabs/zdk`, `@ethersproject/address`, `react`, and various packages from the `../features`, `../services`, and `../functions` directories.\n\n3. What data is being fetched and processed by this code?\n- This code fetches data about farms, pairs, and rewards from various subgraphs and services, and processes this data to calculate metrics such as TVL, APR, and ROI for each farm. It also uses data from the `usePositions` hook to display information about the user's positions in each farm.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useFarmRewards.md"}}],["899",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useFetchListCallback.ts)\n\nThe code defines a custom React hook called `useFetchListCallback` that returns a function. This function takes a `listUrl` string as its argument and returns a Promise that resolves to a `TokenList` object. The `TokenList` object is imported from the `@uniswap/token-lists` package.\n\nThe `useFetchListCallback` hook uses several other hooks and functions to fetch and process the token list. The `useActiveWeb3React` hook is used to get the current Ethereum chain ID and provider library. The `useCallback` hook is used to memoize the `ensResolver` function, which resolves an ENS name to an IPFS content hash. The `useDispatch` hook is used to get the Redux store's dispatch function.\n\nThe `useFetchListCallback` function dispatches a `fetchTokenList.pending` action to the Redux store, which sets the `loading` state to `true`. It then calls the `getTokenList` function, passing in the `listUrl` and `ensResolver` functions. The `getTokenList` function fetches the token list from the specified URL and resolves any ENS names using the `ensResolver` function. If the fetch is successful, the `getTokenList` function returns a `TokenList` object, which is then dispatched to the Redux store using the `fetchTokenList.fulfilled` action. If the fetch fails, the `getTokenList` function throws an error, which is caught and re-thrown by the `useFetchListCallback` function after dispatching a `fetchTokenList.rejected` action to the Redux store.\n\nThe `useFetchListCallback` hook is intended to be used in other components to fetch and display token lists. For example, a token list selector component could use this hook to fetch a list of tokens and display them in a dropdown menu. The `sendDispatch` argument can be used to prevent the `fetchTokenList` actions from being dispatched in certain cases, such as when the hook is used for list search or when an unsupported list is requested.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a custom hook called `useFetchListCallback` that returns a function for fetching a token list from a given URL and resolving ENS names to content hashes.\n\n2. What dependencies does this code have?\n- This code imports several dependencies, including `AppDispatch` from a local `state` module, `ChainId` from the `@zoolabs/zdk` package, `TokenList` from the `@uniswap/token-lists` package, and various functions from local `state` and `functions` modules.\n\n3. What is the error message thrown if the chain ID is not `MAINNET` and no network library is available?\n- The error message thrown is \"Could not construct mainnet ENS resolver\".","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useFetchListCallback.md"}}],["900",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useFuse.ts)\n\nThe code above is a custom React hook that provides fuzzy search functionality using the Fuse.js library. The hook is called `useFuse` and takes in two parameters: `data` and `options`. `data` is an array of objects that will be searched, and `options` is an object that contains options for the Fuse.js library.\n\nThe `useFuse` hook returns an object with four properties: `result`, `search`, `term`, and `reset`. `result` is an array of objects that match the search term. `search` is a function that takes in a string and sets the search term. `term` is the current search term. `reset` is a function that resets the search term to an empty string.\n\nThe `useFuse` hook uses the `useState` hook to keep track of the current search term. It then creates a new instance of the Fuse.js library using the `data` and `options` parameters. The `fuzzySearch` function is called with the `fuse`, `data`, and `term` parameters. The `fuzzySearch` function returns an array of objects that match the search term. If the search term is empty, the `data` parameter is returned.\n\nThe `useFuse` hook is useful for implementing search functionality in a React application. It provides a simple interface for searching through an array of objects using fuzzy search. Here is an example of how to use the `useFuse` hook:\n\n```\nimport useFuse from './useFuse'\n\nconst data = [\n { name: 'John Doe', age: 30 },\n { name: 'Jane Doe', age: 25 },\n { name: 'Bob Smith', age: 40 },\n]\n\nconst options = {\n keys: ['name'],\n}\n\nfunction App() {\n const { result, search, term, reset } = useFuse({ data, options })\n\n return (\n \n search(e.target.value)} />\n \n
\n )\n}\n```\n\nIn this example, the `data` parameter is an array of objects with `name` and `age` properties. The `options` parameter specifies that the `name` property should be used for searching. The `useFuse` hook is called with these parameters, and the resulting object is destructured into `result`, `search`, `term`, and `reset`. The `result` array is mapped over to display the names of the matching objects. The `input` element is used to set the search term, and the `button` element is used to reset the search term.\n## Questions: \n 1. What is the purpose of the `Fuse` library being imported?\n - The `Fuse` library is being used for fuzzy searching functionality.\n \n2. What is the purpose of the `useFuse` function?\n - The `useFuse` function is a custom hook that takes in data and options, and returns an object with search functionality and search results based on fuzzy search using the `Fuse` library.\n \n3. What is the purpose of the `reset` function being returned by the `useFuse` hook?\n - The `reset` function allows the user to reset the search term to an empty string, effectively resetting the search results to the original data.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useFuse.md"}}],["901",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useHttpLocations.ts)\n\nThe code in this file is a module that exports a custom hook called `useHttpLocations`. This hook takes in a single argument, `uri`, which is a string that represents a Uniform Resource Identifier (URI). The purpose of this hook is to convert the given URI into one or more HTTP locations that can be used to retrieve content from a server.\n\nTo achieve this, the hook first imports two functions from another module: `contenthashToUri` and `uriToHttp`. These functions are used to convert a content hash (a unique identifier for content stored on a decentralized network) to a URI, and then to convert that URI to an HTTP location.\n\nThe hook also imports another function called `parseENSAddress` from a different module. This function is used to parse an Ethereum Name Service (ENS) address from the given URI. ENS is a decentralized naming system that maps human-readable names to machine-readable identifiers, such as Ethereum addresses or content hashes.\n\nThe hook then uses the `useMemo` hook from the React library to memoize the result of parsing the ENS address from the given URI. This means that the ENS address will only be parsed once, and subsequent calls to the hook with the same URI will reuse the previously parsed result.\n\nNext, the hook calls another custom hook called `useENSContentHash`, passing in the parsed ENS address. This hook is responsible for resolving the content hash associated with the given ENS address. If the ENS address is not valid or does not have a content hash associated with it, the `useENSContentHash` hook will return an empty object.\n\nFinally, the `useHttpLocations` hook returns an array of HTTP locations based on the given URI and the resolved content hash. If the URI contains a valid ENS address, the hook will use the resolved content hash to generate an HTTP location using the `contenthashToUri` and `uriToHttp` functions. If the URI does not contain a valid ENS address, the hook will simply use the `uriToHttp` function to generate an HTTP location from the URI.\n\nOverall, this hook is useful for resolving content stored on a decentralized network using human-readable ENS addresses, and converting those addresses to HTTP locations that can be used to retrieve the content from a server. Here is an example of how this hook might be used in a larger project:\n\n```\nimport useHttpLocations from './useHttpLocations'\n\nfunction MyComponent({ uri }) {\n const httpLocations = useHttpLocations(uri)\n\n return (\n - \n {result.map((item) => (\n
- {item.name} \n ))}\n
\n {httpLocations.map((location) => (\n 
\n ))}\n
\n )\n}\n```\n\nIn this example, the `MyComponent` component takes in a `uri` prop, which is passed to the `useHttpLocations` hook to generate an array of HTTP locations. The component then maps over this array to render one or more images, each with a `src` attribute set to an HTTP location.\n## Questions: \n 1. What does this code do?\n This code exports a function called `useHttpLocations` that takes a URI string as input and returns an array of HTTP locations. It uses other functions from the `convert` and `ens` modules to convert content hashes and parse ENS addresses.\n\n2. What is the purpose of the `useMemo` hook in this code?\n The `useMemo` hook is used to memoize the result of a function call and prevent unnecessary re-renders in React. In this code, it is used to memoize the parsed ENS address based on the input URI.\n\n3. What happens if the input URI is undefined?\n If the input URI is undefined, the function returns an empty array.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useHttpLocations.md"}}],["902",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useInactiveListener.ts)\n\nThe `useInactiveListener` function is a React hook that is used to log a user in and out of a web3 wallet after checking what network they are on. It is imported from the `useActiveWeb3React` hook and the `wallets` configuration file. \n\nThe hook uses the `useEffect` hook to listen for changes in the user's wallet and network. If the user is not active, has no errors, and the `suppress` flag is not set to true, the hook will activate the `injected` wallet from the `wallets` configuration file. \n\nThe `ethereum.on` method is used to listen for changes in the user's wallet and network. If the user changes their network, the `handleChainChanged` function is called, which activates the `injected` wallet. If the user changes their account, the `handleAccountsChanged` function is called, which also activates the `injected` wallet. \n\nThe `useInactiveListener` hook is used in the larger project to ensure that the user is logged in and using the correct wallet for the current network. It is particularly useful for applications that require the user to interact with a blockchain, as it ensures that the user is using the correct wallet and network. \n\nExample usage:\n\n```\nimport useInactiveListener from './useInactiveListener'\n\nfunction MyComponent() {\n useInactiveListener()\n\n // rest of component code\n}\n```\n## Questions: \n 1. What is the purpose of this code and how is it used in the `zoo` project?\n- This code defines a React hook called `useInactiveListener` that is used for logging users in and out based on their network. It is likely used in the authentication or wallet management features of the `zoo` project.\n\n2. What is the significance of the `useEffect` hook and how does it work in this code?\n- The `useEffect` hook is used to run side effects in a React component. In this code, it is used to listen for changes in the user's network and accounts using the `ethereum` object provided by the browser. When a change is detected, the `connector` is activated to log the user in or out.\n\n3. What is the purpose of the `suppress` parameter and how is it used in this code?\n- The `suppress` parameter is used to prevent the hook from running in certain cases. If `suppress` is set to `true`, the hook will not listen for changes in the user's network or accounts. This parameter is likely used to control the behavior of the hook in different parts of the `zoo` project.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useInactiveListener.md"}}],["903",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useInterval.ts)\n\nThe code above defines a custom React hook called `useInterval`. This hook allows a function to be executed repeatedly at a specified interval. The hook takes three arguments: a callback function to be executed, a delay in milliseconds between each execution, and a boolean value indicating whether the first execution should occur immediately or after the first interval has elapsed.\n\nThe `useInterval` hook uses the `useRef` and `useEffect` hooks from the React library. The `useRef` hook creates a reference to the callback function that is passed as an argument to the hook. The `useEffect` hook is used to set up the interval and execute the callback function at the specified interval.\n\nThe first `useEffect` hook is used to update the reference to the callback function whenever it changes. This ensures that the latest version of the function is used when the interval is executed.\n\nThe second `useEffect` hook is used to set up the interval. It creates a function called `tick` that executes the callback function stored in the `savedCallback` reference. If the delay is not null, the `tick` function is executed immediately if the `leading` argument is true. Then, the `setInterval` function is called to execute the `tick` function at the specified interval. The `clearInterval` function is returned from the `useEffect` hook to stop the interval when the component using the hook is unmounted.\n\nThis hook can be used in a variety of scenarios where a function needs to be executed repeatedly at a specified interval. For example, it could be used to create a countdown timer or to periodically update data from an API. Here is an example of how the `useInterval` hook could be used to create a simple countdown timer:\n\n```\nimport React, { useState } from 'react'\nimport useInterval from './useInterval'\n\nfunction CountdownTimer() {\n const [count, setCount] = useState(10)\n\n useInterval(() => {\n setCount(count - 1)\n }, 1000)\n\n return (\n \n
\n )\n}\n```\n\nIn this example, the `useInterval` hook is used to decrement the `count` state variable every second. The countdown timer is displayed using the `h1` element.\n## Questions: \n 1. What does this code do?\n- This code exports a custom React hook called `useInterval` that sets up an interval to repeatedly call a provided callback function with a specified delay.\n\n2. What is the purpose of the `useRef` hook in this code?\n- The `useRef` hook is used to create a mutable reference to the latest callback function passed to the `useInterval` hook, which can be accessed across multiple renders of the component.\n\n3. What is the significance of the `leading` parameter in the `useInterval` function?\n- The `leading` parameter determines whether the first call to the callback function should happen immediately (if `true`) or after the first delay interval (if `false`).","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useInterval.md"}}],["904",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useIntervalTransaction.ts)\n\nThe code defines a custom React hook called `useInterval` that allows for the execution of a given callback function at a specified interval. The hook takes in three parameters: `callback`, `delay`, and `leading`. \n\nThe `callback` parameter is a function that will be executed at the specified interval. The `delay` parameter is the time in milliseconds between each execution of the `callback` function. If `delay` is set to `null`, the interval will not be set up. The `leading` parameter is a boolean that determines whether the `callback` function should be executed immediately upon setting up the interval or after the first interval has passed. \n\nThe hook uses the `useRef` hook to create a reference to the `callback` function that is passed in. This reference is stored in the `savedCallback` variable. The `useEffect` hook is then used to update the `savedCallback` reference whenever the `callback` parameter changes. \n\nThe `useEffect` hook is also used to set up the interval. The `tick` function is defined to execute the `savedCallback` function if it exists. If `delay` is not `null`, the `tick` function is called immediately if `leading` is set to `true`. The `setInterval` function is then called to set up the interval, and the `clearInterval` function is returned in a cleanup function to clear the interval when the component unmounts. \n\nThe `useInterval` hook can be used in a larger project to execute a function at a specified interval. For example, it could be used to periodically fetch data from an API or to update the UI with new information. Here is an example of how the `useInterval` hook could be used to update the time displayed in a clock component every second:\n\n```\nimport React, { useState } from 'react'\nimport useInterval from './useInterval'\n\nexport default function Clock() {\n const [time, setTime] = useState(new Date())\n\n useInterval(() => {\n setTime(new Date())\n }, 1000)\n\n return (\n {count}
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code and how is it used in the `zoo` project?\n- This code defines a custom hook called `useInterval` that sets up an interval to repeatedly call a provided callback function. It is likely used throughout the `zoo` project to handle timed updates or animations.\n\n2. What is the significance of the `useTransactionStatus` hook being imported and used in this code?\n- The `useTransactionStatus` hook is likely used to determine whether or not the interval should be paused or stopped based on the current state of any ongoing transactions in the `zoo` project.\n\n3. What is the purpose of the `leading` parameter in the `useInterval` function?\n- The `leading` parameter determines whether or not the callback function should be called immediately upon setting up the interval, before any delay has passed. If `leading` is `false`, the first call to the callback will occur after the specified delay has passed.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useIntervalTransaction.md"}}],["905",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useIsArgentWallet.ts)\n\nThe code above is a custom hook called `useIsArgentWallet` that is used to detect whether the current user is using an Argent wallet. The Argent wallet is a smart contract wallet that allows users to manage their Ethereum assets and interact with decentralized applications.\n\nThe hook imports several other hooks and functions from different files in the project. The `useActiveWeb3React` hook is used to get the current user's Ethereum account and network information. The `useArgentWalletDetectorContract` function is used to get the smart contract instance of the Argent wallet detector. The `useMemo` hook is used to memoize the inputs to the `useSingleCallResult` hook.\n\nThe `useSingleCallResult` hook is used to call the `isArgentWallet` function on the Argent wallet detector smart contract. The `inputs` array is passed as an argument to the `useSingleCallResult` hook, which includes the current user's Ethereum account. The `NEVER_RELOAD` constant is also passed as an argument to the `useSingleCallResult` hook, which ensures that the function is only called once and the result is cached.\n\nThe `useIsArgentWallet` hook returns a boolean value that indicates whether the current user is using an Argent wallet. The `call` variable is the result of the `useSingleCallResult` hook, which includes the result of the `isArgentWallet` function call. The `?.` operator is used to safely access the `result` array and the first element of the array, which is a boolean value that indicates whether the current user is using an Argent wallet. If the `result` array is undefined or empty, the hook returns `false`.\n\nThis hook can be used in other parts of the project to conditionally render certain components or features based on whether the user is using an Argent wallet. For example, a dApp could use this hook to display a message or offer special features to users who are using an Argent wallet. \n\nExample usage:\n\n```\nimport useIsArgentWallet from './useIsArgentWallet'\n\nfunction MyComponent() {\n const isArgentWallet = useIsArgentWallet()\n\n return (\n {time.toLocaleTimeString()}
\n\n {isArgentWallet ?
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `useIsArgentWallet` function?\n- The `useIsArgentWallet` function is used to determine if the current user's wallet is an Argent wallet or not.\n\n2. What is the `useSingleCallResult` function and where is it imported from?\n- The `useSingleCallResult` function is imported from the `../state/multicall/hooks` file and is used to make a single call to a contract method and return the result.\n\n3. What is the `useMemo` hook used for in this code?\n- The `useMemo` hook is used to memoize the `inputs` array, which is passed as an argument to the `useSingleCallResult` function. This ensures that the `inputs` array is only recomputed when the `account` value changes.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useIsArgentWallet.md"}}],["906",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useIsSwapUnsupported.ts)\n\nThe code above is a TypeScript module that exports a single function called `useIsSwapUnsupported`. This function takes two optional parameters, `currencyIn` and `currencyOut`, which are both of type `Currency`. The purpose of this function is to determine whether a given input or output currency can be traded in the interface. \n\nThe function makes use of the `useUnsupportedTokens` hook from the `./Tokens` module, which returns a dictionary of unsupported tokens. The function then uses the `useMemo` hook from the `react` library to memoize the result of the function. \n\nThe function checks whether the `unsupportedTokens` dictionary has been loaded and whether either the `currencyIn` or `currencyOut` is a token that is on the list of unsupported tokens. If either of these conditions is true, the function returns `true`, indicating that the swap is unsupported. Otherwise, it returns `false`.\n\nThis function is likely used in the larger project to determine whether a given swap is supported by the interface. It could be used, for example, to disable a swap button or display a warning message to the user if the swap is not supported. \n\nHere is an example of how this function could be used in a React component:\n\n```jsx\nimport { useIsSwapUnsupported } from '@zoolabs/zoo'\n\nfunction SwapButton({ currencyIn, currencyOut }) {\n const isUnsupported = useIsSwapUnsupported(currencyIn, currencyOut)\n\n return (\n \n )\n}\n```\n\nIn this example, the `SwapButton` component takes two currency props, `currencyIn` and `currencyOut`. It then calls the `useIsSwapUnsupported` function to determine whether the swap is unsupported. If it is unsupported, the button is disabled and displays the text \"Unsupported\". Otherwise, the button is enabled and displays the text \"Swap\".\n## Questions: \n 1. What is the purpose of the `useIsSwapUnsupported` function?\n- The function returns a boolean indicating whether the input currency or output currency cannot be traded in the interface.\n\n2. What is the `useMemo` hook used for in this code?\n- The `useMemo` hook is used to memoize the result of the function and avoid unnecessary re-renders.\n\n3. What is the `useUnsupportedTokens` hook used for in this code?\n- The `useUnsupportedTokens` hook is used to retrieve a list of unsupported tokens from the application state.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useIsSwapUnsupported.md"}}],["907",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useIsWindowVisible.ts)\n\nThe code above is a React hook that determines whether the window is currently visible to the user. It does this by checking the `visibilityState` property of the `document` object. If the `visibilityState` property is not supported or if it is not equal to 'hidden', then the window is considered visible.\n\nThe hook is exported as a default function called `useIsWindowVisible()`. It uses the `useState` hook to keep track of whether the window is currently visible or not. The initial state is set to the result of the `isWindowVisible()` function, which checks the `visibilityState` property of the `document` object.\n\nThe `useCallback` hook is used to create a memoized version of the `listener` function, which updates the `focused` state whenever the `visibilitychange` event is fired. The `useEffect` hook is used to add and remove the `listener` function as an event listener for the `visibilitychange` event. If the `visibilityState` property is not supported, then the `useEffect` hook returns `undefined` to indicate that there is no cleanup needed.\n\nThis hook can be used in a larger project to conditionally render components based on whether the window is visible or not. For example, if a video is playing and the window becomes hidden, the video could be paused until the window becomes visible again. Here is an example of how this hook could be used:\n\n```\nimport React from 'react'\nimport useIsWindowVisible from './useIsWindowVisible'\n\nfunction VideoPlayer() {\n const isWindowVisible = useIsWindowVisible()\n\n return (\n \n )\n}\n```\n\nIn this example, the `autoPlay` prop of the `video` element is set to the value of `isWindowVisible`, which will be `true` if the window is visible and `false` if it is not. This ensures that the video will only play when the window is visible.\n## Questions: \n 1. What is the purpose of the `useIsWindowVisible` function?\n- The `useIsWindowVisible` function returns a boolean value indicating whether the window is currently visible to the user.\n\n2. What is the significance of the `VISIBILITY_STATE_SUPPORTED` constant?\n- The `VISIBILITY_STATE_SUPPORTED` constant is used to check if the `visibilityState` property is supported by the current document. If it is not supported, the `isWindowVisible` function always returns `true`.\n\n3. Why is the `listener` function wrapped in a `useCallback` hook?\n- The `listener` function is wrapped in a `useCallback` hook to memoize the function and prevent unnecessary re-renders of the component. This is because the `listener` function is used as a dependency in the `useEffect` hook.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useIsWindowVisible.md"}}],["908",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useKashiApproveCallback.ts)\n\nThe `useKashiApproveCallback` function is a React hook that returns a tuple of values and functions that can be used to manage the approval state of a Kashi contract. Kashi is a lending and borrowing platform built on top of the Aave protocol. The hook is used to manage the approval state of the user's BentoBox contract to interact with Kashi contracts.\n\nThe hook imports several functions and constants from other files, including `KashiCooker`, `signMasterContractApproval`, `useActiveWeb3React`, `useBentoBoxContract`, `useBentoMasterContractAllowed`, `useKashiApprovalPending`, `useTransactionAdder`, `AddressZero`, `HashZero`, and `splitSignature`. \n\nThe hook defines an enum `BentoApprovalState` with five possible values: `UNKNOWN`, `NOT_APPROVED`, `PENDING`, `FAILED`, and `APPROVED`. It also defines an interface `KashiPermit` with four properties: `account`, `masterContract`, `v`, `r`, and `s`. It also defines an enum `BentoApproveOutcome` with four possible values: `SUCCESS`, `REJECTED`, `FAILED`, and `NOT_READY`. Finally, it defines a type `BentoApproveResult` with two properties: `outcome` of type `BentoApproveOutcome` and `permit` of type `KashiPermit`.\n\nThe hook returns a tuple with five values: `approvalState` of type `BentoApprovalState`, `approveKashiFallback` of type `boolean`, `kashiPermit` of type `KashiPermit | undefined`, `onApprove` of type `() => void`, and `onCook` of type `(pair: any, execute: (cooker: KashiCooker) => PromiseYou are using an Argent wallet!
:You are not using an Argent wallet.
}\n\n \n
\n )\n}\n```\n\nExample usage of `useLastTruthy` hook:\n\n```\nimport { useState } from 'react'\nimport useLastTruthy from './useLastTruthy'\n\nfunction Dropdown() {\n const [selectedOption, setSelectedOption] = useState(null)\n const lastSelectedOption = useLastTruthy(selectedOption)\n\n function handleOptionSelect(event) {\n setSelectedOption(event.target.value)\n }\n\n return (\n Last valid input: {lastValidInput}
\n\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `useLast` function?\n- The `useLast` function returns the last value of type T that passes a filter function.\n\n2. What is the purpose of the `useEffect` hook in the `useLast` function?\n- The `useEffect` hook is used to update the `last` state variable whenever the `value` or `filterFn` dependencies change.\n\n3. What is the purpose of the `isDefined` function?\n- The `isDefined` function is a type guard that checks if a value is not null or undefined and returns a boolean value. It is used in the `useLastTruthy` function to filter out null and undefined values.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useLast.md"}}],["910",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useLimitOrderApproveCallback.ts)\n\nThe `useLimitOrderApproveCallback` function is a React hook that provides a callback function to approve a limit order and execute a deposit into the BentoBox smart contract. The BentoBox is a smart contract that allows for efficient and gas-saving token transfers and storage. The function is part of the larger `zoo` project and uses several other functions and hooks from the project.\n\nThe function first imports several constants and functions from other modules, including the `STOP_LIMIT_ORDER_ADDRESS` and `getSignatureWithProviderBentobox` functions. It also imports several hooks from the `zoo` project, including `useActiveWeb3React`, `useLimitOrderState`, and `useTransactionAdder`.\n\nThe function defines two enums, `BentoApprovalState` and `BentoApproveOutcome`, which are used to represent the different states of the approval process and the possible outcomes of the approval function.\n\nThe main logic of the function is in the `useLimitOrderApproveCallback` function, which defines several constants and hooks, including the `account`, `library`, and `chainId` from the `useActiveWeb3React` hook, and the `bentoBoxContract` and `limitOrderHelperContract` from the `useContract` hook. It also defines several state variables, including `fallback`, which is used to handle cases where the user rejects the signature request, and `limitOrderPermit`, which is used to store the signature data for the limit order approval.\n\nThe function then defines an `approve` function that checks the current approval status and attempts to approve the limit order if it is not already approved. The function uses the `getSignatureWithProviderBentobox` function to generate a signature for the approval request and returns the signature data and encoded function data for the `setMasterContractApproval` function.\n\nThe `onApprove` function is called when the user clicks the \"Approve\" button on the limit order form. It first checks if the `fallback` flag is set, indicating that the user has already rejected the signature request. If so, it calls the `setMasterContractApproval` function directly with a gas limit of 0 to force the transaction to fail and trigger the fallback logic. Otherwise, it calls the `approve` function and sets the `limitOrderPermit` state variable if the approval is successful.\n\nThe `execute` function is called when the user clicks the \"Swap\" button on the limit order form. It first checks if the limit order is approved and if the user has sufficient funds in the BentoBox. If not, it adds the necessary transactions to the batch and executes them using the `batch` function of the `bentoBoxContract`. If the token is native and the limit order is not approved, it uses the `depositAndApprove` function of the `limitOrderHelperContract` to deposit the token and approve the limit order in a single transaction.\n\nOverall, the `useLimitOrderApproveCallback` function provides a convenient way for users to approve limit orders and execute deposits into the BentoBox smart contract. It uses several other functions and hooks from the `zoo` project and provides a flexible and efficient way to interact with the BentoBox.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a custom React hook called `useLimitOrderApproveCallback` that returns an array of values and functions related to approving and executing a limit order transaction using the BentoBox smart contract.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `@ethersproject/constants`, `@zoolabs/zdk`, `react`, `@ethersproject/address`, and several custom functions and hooks defined in other files within the `zoo` project.\n\n3. What is the purpose of the `BentoApprovalState` and `BentoApproveOutcome` enums?\n- These enums define possible states and outcomes related to approving a BentoBox master contract for a given user account. `BentoApprovalState` can be one of `UNKNOWN`, `NOT_APPROVED`, `PENDING`, `FAILED`, or `APPROVED`, while `BentoApproveOutcome` can be one of `SUCCESS`, `REJECTED`, `FAILED`, or `NOT_READY`. These enums are used to determine whether a user needs to approve the master contract and to handle different outcomes of the approval process.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useLimitOrderApproveCallback.md"}}],["911",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useLimitOrders.ts)\n\nThe `useLimitOrders` function is a React hook that provides data on limit orders for a given user account and chain ID. It imports several dependencies from the `@zoolabs/zdk` and `@ethersproject/bignumber` libraries, as well as other custom hooks from the `.` and `./Tokens` files. \n\nThe function defines two interfaces: `State` and `OpenOrder`. `State` is an object that contains two properties, `pending` and `completed`, each of which is an object with properties for `page`, `maxPages`, `data`, `loading`, and `totalOrders`. `OpenOrder` is an object that contains properties for `tokenIn`, `tokenOut`, `filledPercent`, `limitOrder`, `status`, and `rate`. \n\nThe function also defines several helper functions. `denominator` is a function that takes an optional `decimals` argument (defaulting to 18) and returns the result of raising 10 to the power of `decimals` using the `JSBI` library. `viewUrl` is a string that represents the URL for fetching limit order data. `viewFetcher` is a function that takes several arguments and returns a Promise that fetches data from `viewUrl` using a POST request with a JSON body containing the `address`, `chainId`, `page`, and `pendingPage` parameters. \n\nThe main body of the function defines several constants and hooks. `useActiveWeb3React` is a custom hook that returns the current `account` and `chainId` values from the Web3 React context. `useLimitOrderContract` is a custom hook that returns the contract instance for the limit order contract. `useAllTokens` is a custom hook that returns an object containing all known tokens for the current chain ID. \n\nThe function also defines a `state` variable using the `useState` hook, which is an object with `pending` and `completed` properties that each contain an object with `page`, `maxPages`, `data`, `loading`, and `totalOrders` properties. It defines a `shouldFetch` variable using the `useMemo` hook, which is an array of values that determine whether or not to fetch data from `viewUrl`. It defines a `useSWR` hook that fetches data from `viewUrl` using `viewFetcher` and the `shouldFetch` variable. \n\nThe function defines two callback functions, `setPendingPage` and `setCompletedPage`, that update the `state` variable with a new `page` value for the `pending` and `completed` properties, respectively. It also defines an `useEffect` hook that updates the `state` variable with new data from the `ordersData` object returned by the `useSWR` hook. \n\nFinally, the function returns an object that contains the `state` variable, as well as `setPage` properties for the `pending` and `completed` properties that call the `setPendingPage` and `setCompletedPage` callback functions, respectively. It also returns a `mutate` property that can be used to manually trigger a re-fetch of the data. \n\nThis hook can be used in a larger project to display a user's limit orders and their status. For example, it could be used to display a table of open and completed orders with information such as the token pair, rate, and filled percentage. The `setPage` and `mutate` properties can be used to allow the user to navigate between pages of orders and manually refresh the data, respectively.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a custom React hook called `useLimitOrders` that fetches and transforms limit orders data from a server and returns it as state.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `@zoolabs/zdk`, `react`, `swr`, and `@ethersproject/bignumber`.\n\n3. What is the structure of the data returned by the `useLimitOrders` hook?\n- The `useLimitOrders` hook returns an object with two properties: `pending` and `completed`, each of which contains an object with `page`, `maxPages`, `data`, `loading`, and `totalOrders` properties. The `data` property is an array of `OpenOrder` objects, which contain information about a limit order, including the input and output tokens, the filled percentage, the order status, and the exchange rate.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useLimitOrders.md"}}],["912",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useMatchBreakpoints.ts)\n\nThe code defines a custom React hook called `useMatchBreakpoints` that returns an object representing the current state of whether the browser window matches certain media query breakpoints. The hook uses the `useState` and `useEffect` hooks from React to manage state and side effects respectively.\n\nThe `mediaQueries` object is defined as a mapping of breakpoint sizes to media query strings. The breakpoints are defined in another file and imported as `breakpointMap`. The `mediaQueries` object is constructed by iterating over the keys of `breakpointMap` and creating a media query string for each breakpoint size. The media query strings are constructed such that they represent a range of screen sizes, e.g. `(min-width: 370px) and (max-width: 576px)`.\n\nThe `getKey` function is a helper function that takes a breakpoint size string and returns a string representing the corresponding state key, e.g. `isSmall` for the `small` breakpoint.\n\nThe `useMatchBreakpoints` hook initializes state by iterating over the keys of `mediaQueries` and creating a state object with a key for each breakpoint size. The value of each key is set to the result of calling `window.matchMedia` with the corresponding media query string. The `matches` property of the resulting `MediaQueryList` object is used to set the initial value of each state key.\n\nThe hook then sets up listeners for each media query using the `useEffect` hook. The effect function creates an array of listener functions, one for each media query. Each listener function updates state by calling `setState` with a new object that merges the previous state with the new state for the corresponding breakpoint size. The new state is computed by calling `matches` on the `MediaQueryListEvent` object passed to the listener function.\n\nFinally, the effect function returns a cleanup function that removes the listeners created earlier. The cleanup function is called when the component using the hook unmounts.\n\nThe `useMatchBreakpoints` hook can be used in a larger project to conditionally render components based on the current screen size. For example, a component might render differently on small screens than on large screens. The hook can be used to determine the current screen size and pass that information down to child components as props. Here is an example usage:\n\n```\nimport useMatchBreakpoints from './useMatchBreakpoints'\n\nfunction MyComponent() {\n const { isSmall, isMedium, isLarge } = useMatchBreakpoints()\n\n return (\n Last selected option: {lastSelectedOption}
\n\n {isSmall &&
\n )\n}\n```\n## Questions: \n 1. What does this code do?\n- This code exports a custom React hook called `useMatchBreakpoints` that returns a state object indicating whether the current viewport matches certain media query breakpoints.\n\n2. What is the purpose of the `mediaQueries` object?\n- The `mediaQueries` object is used to define media queries that correspond to specific viewport sizes. These media queries are used to create listeners that update the state returned by the `useMatchBreakpoints` hook.\n\n3. Why are there Safari version checks in the code?\n- There are Safari version checks in the code because older versions of Safari (before version 14) use a different event listener syntax for `MediaQueryList` objects. The checks ensure that the code works correctly across different versions of Safari.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useMatchBreakpoints.md"}}],["913",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useMeowshi.ts)\n\nThe `useMeowshi` function is a custom React hook that provides functionality for interacting with the Meowshi contract. The Meowshi contract is a smart contract on the Ethereum blockchain that allows users to deposit and withdraw tokens in exchange for a reward token called MEOW. The purpose of this hook is to provide a simple interface for users to interact with the Meowshi contract from within a React application.\n\nThe hook uses several other custom hooks to interact with the Ethereum blockchain, including `useActiveWeb3React`, `useTransactionAdder`, `useMeowshiContract`, `useSushiContract`, and `useSushiBarContract`. These hooks provide access to the user's Ethereum account, the Meowshi contract, and the SushiSwap contracts.\n\nThe `useMeowshi` hook provides several functions for interacting with the Meowshi contract, including `approve`, `meow`, `unmeow`, `meowSushi`, and `unmeowSushi`. These functions allow the user to approve the Meowshi contract to spend their tokens, deposit tokens into the contract, and withdraw tokens from the contract. The `meowSushi` and `unmeowSushi` functions are specific to the SushiSwap version of the Meowshi contract.\n\nThe hook also provides an `approvalState` variable that indicates whether the user has approved the Meowshi contract to spend their tokens. This variable is updated automatically when the user interacts with the contract.\n\nOverall, the `useMeowshi` hook provides a simple and convenient way for users to interact with the Meowshi contract from within a React application. By abstracting away the complexity of interacting with the Ethereum blockchain, this hook makes it easier for developers to build applications that use the Meowshi contract. \n\nExample usage:\n\n```\nimport useMeowshi from './useMeowshi'\n\nfunction MyComponent() {\n const { approvalState, approve, meow, unmeow } = useMeowshi(false)\n\n return (\n Small screen
}\n {isMedium &&Medium screen
}\n {isLarge &&Large screen
}\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code defines a custom hook called `useMeowshi` that provides functions for interacting with the Meowshi contract, allowing users to enter and leave the Meowshi pool and the Sushi pool. It also handles approval of the contract to spend the user's tokens.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `react`, `@ethersproject/bignumber`, and custom hooks defined in other files such as `useContract` and `useActiveWeb3React`.\n\n3. What is the significance of the `pendingApproval` state variable?\n- The `pendingApproval` state variable is used to track whether an approval transaction is currently pending. It is set to `true` when the user initiates an approval transaction and set back to `false` when the transaction is complete or fails. This is used to prevent the user from initiating multiple approval transactions simultaneously.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useMeowshi.md"}}],["914",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useMeowshiPerXSushi.ts)\n\nThe code is a custom React hook called `useMeowshiPerXSushi` that is used to retrieve the conversion rate between XSUSHI tokens and Meowshi tokens. The hook uses the `useEffect` and `useState` hooks from the React library to manage state and side effects.\n\nThe `useBentoBoxContract` hook is used to retrieve the BentoBox smart contract instance, which is used to call the `toShare` and `toAmount` functions. These functions are used to calculate the conversion rate between XSUSHI and Meowshi tokens.\n\nThe `useState` hook is used to store the conversion rate as a tuple of two `BigNumber` objects. The initial value of the state is set to `[BigNumber.from('0'), BigNumber.from('0')]`.\n\nThe `useEffect` hook is used to call the `toShare` and `toAmount` functions when the `bentoboxContract` object is available. The `async` function inside the `useEffect` hook retrieves the conversion rate by calling the `toShare` and `toAmount` functions with the `XSUSHI` token address and a value of `1` in XSUSHI token decimals. The `false` parameter is used to indicate that the conversion rate should be calculated using the current block timestamp.\n\nOnce the conversion rate is retrieved, it is stored in the state using the `setState` function.\n\nThe `useMeowshiPerXSushi` hook returns the current state, which is a tuple of two `BigNumber` objects representing the conversion rate between XSUSHI and Meowshi tokens.\n\nThis hook can be used in other components of the project to retrieve the current conversion rate between XSUSHI and Meowshi tokens. For example, a component that displays the current price of Meowshi tokens in XSUSHI tokens could use this hook to retrieve the conversion rate and calculate the price.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n This code defines a custom React hook called `useMeowshiPerXSushi` that returns an array of two `BigNumber` values. It uses the `useBentoBoxContract` hook to interact with a smart contract and calculate the conversion rate between XSUSHI tokens and Meowshi tokens.\n\n2. What is the significance of the `useEffect` hook and how does it work?\n The `useEffect` hook is used to run side effects in a React component. In this code, it is used to asynchronously fetch data from the smart contract and update the component state when the `bentoboxContract` dependency changes.\n\n3. What is the purpose of the `XSUSHI` constant and where is it defined?\n The `XSUSHI` constant is a token object that represents the XSUSHI token. It is imported from a file located at `../config/tokens` and is used to interact with the smart contract and perform calculations involving XSUSHI tokens.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useMeowshiPerXSushi.md"}}],["915",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useMounted.ts)\n\nThe code above is a custom React hook called `useMounted`. The purpose of this hook is to determine whether or not a component is mounted in the DOM. \n\nThe hook uses the `useEffect` and `useState` hooks from React. The `useState` hook initializes a state variable called `mounted` to `false`. The `useEffect` hook is used to update the `mounted` state variable to `true` when the component is mounted in the DOM. The `[]` passed as the second argument to `useEffect` ensures that the effect only runs once, when the component is mounted.\n\nThe `useMounted` hook returns the `mounted` state variable, which can be used in other parts of the code to determine if the component is mounted. For example, if a component needs to perform an action only when it is mounted, it can use the `useMounted` hook to check if it is currently mounted before performing the action.\n\nHere is an example of how the `useMounted` hook can be used in a component:\n\n```\nimport React from 'react'\nimport useMounted from './useMounted'\n\nfunction MyComponent() {\n const isMounted = useMounted()\n\n if (!isMounted) {\n return Approval state: {approvalState}
\n \n \n \nLoading...
\n }\n\n return My Component
\n}\n```\n\nIn the example above, the `MyComponent` component uses the `useMounted` hook to determine if it is currently mounted. If it is not mounted, it displays a loading message. If it is mounted, it displays the component content.\n\nOverall, the `useMounted` hook is a useful utility hook that can be used in various parts of a React project to determine if a component is mounted in the DOM.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom React hook called `useMounted` that returns a boolean value indicating whether the component is mounted or not.\n\n2. What is the significance of the `useEffect` hook in this code?\n The `useEffect` hook is used to set the `mounted` state to `true` when the component is mounted. The empty dependency array `[]` ensures that this effect only runs once when the component is mounted.\n\n3. How can this hook be used in a React component?\n This hook can be used in a React component by calling it and storing the returned value in a variable. The value can then be used to conditionally render components or perform other logic based on whether the component is mounted or not.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useMounted.md"}}],["916",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useOnClickOutside.tsx)\n\nThe code above defines a custom React hook called `useOnClickOutside`. This hook is designed to be used in a React component to detect clicks outside of a specified element and trigger a callback function when this occurs. \n\nThe hook takes two arguments: `node` and `handler`. `node` is a reference to the element that the click event should be detected outside of. `handler` is an optional callback function that will be called when a click event is detected outside of the specified element. \n\nThe `useOnClickOutside` hook uses the `useRef` and `useEffect` hooks from React. The `useRef` hook is used to create a reference to the `handler` function that is passed in as an argument. The `useEffect` hook is used to update the `handlerRef` reference whenever the `handler` function changes. \n\nThe main logic of the `useOnClickOutside` hook is implemented in the second `useEffect` hook. This hook adds an event listener to the `document` object that listens for `mousedown` events. When a `mousedown` event occurs, the `handleClickOutside` function is called. This function checks if the `node` reference contains the target of the `mousedown` event. If the target is not contained within the `node`, the `handler` function is called (if it exists). \n\nFinally, the `useEffect` hook returns a cleanup function that removes the event listener from the `document` object when the component unmounts. \n\nOverall, the `useOnClickOutside` hook is a useful utility for detecting clicks outside of a specified element in a React component. It can be used to implement various UI features such as closing a dropdown menu when a user clicks outside of it. \n\nExample usage of the `useOnClickOutside` hook:\n\n```\nimport React, { useRef } from 'react'\nimport { useOnClickOutside } from './useOnClickOutside'\n\nfunction DropdownMenu() {\n const dropdownRef = useRef(null)\n\n const closeDropdown = () => {\n // close dropdown menu logic\n }\n\n useOnClickOutside(dropdownRef, closeDropdown)\n\n return (\n \n {/* dropdown menu content */}\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom React hook called `useOnClickOutside` that takes a ref to a DOM node and a callback function as arguments, and attaches a click event listener to the document that triggers the callback when a click occurs outside the specified node.\n\n2. What is the significance of the generic type `T` in this code?\n The generic type `T` is used to specify the type of the DOM node that the `useOnClickOutside` hook will be attached to. This allows for type safety and ensures that the correct type of node is passed to the hook.\n\n3. Why is the `handlerRef` variable declared as a `useRef` and updated in a separate `useEffect` hook?\n The `handlerRef` variable is declared as a `useRef` so that it can be accessed and updated by the event listener function even after the initial render. The separate `useEffect` hook updates the `handlerRef` variable whenever the `handler` function changes, ensuring that the latest version of the function is always used by the event listener.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useOnClickOutside.md"}}],["917",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useParsedQueryString.ts)\n\nThe code above is a custom React hook that parses the query string parameters from the URL and returns them as an object. It uses the `qs` library to parse the query string and the `useMemo` hook to memoize the result.\n\nThe `useParsedQueryString` hook takes no arguments and returns an object of type `ParsedQs`, which is a type definition from the `qs` library. This object contains the parsed query string parameters as key-value pairs.\n\nTo use this hook, it must be imported into a React component and called like any other hook. For example:\n\n```\nimport useParsedQueryString from './useParsedQueryString'\n\nfunction MyComponent() {\n const queryParams = useParsedQueryString()\n\n // do something with queryParams\n\n return (\n // JSX code\n )\n}\n```\n\nThe `useMemo` hook is used to memoize the result of parsing the query string. This means that if the `search` string (which contains the query string parameters) has not changed, the hook will return the same object as before, without re-parsing the query string. This can improve performance in cases where the query string is frequently accessed but rarely changes.\n\nThe `parse` function from the `qs` library is used to parse the query string. It takes two optional arguments: `parseArrays` and `ignoreQueryPrefix`. The `parseArrays` argument specifies whether to parse arrays in the query string as arrays or as objects with numeric keys. The `ignoreQueryPrefix` argument specifies whether to ignore the leading '?' character in the query string.\n\nOverall, this hook provides a convenient way to access and parse query string parameters in a React component. It can be used in conjunction with other hooks, such as `useLocation` from the `react-router-dom` library, to build more complex functionality.\n## Questions: \n 1. What is the purpose of the `useMemo` hook in this code?\n - The `useMemo` hook is used to memoize the result of parsing the query string, so that it is only re-computed when the `search` value changes.\n2. Why is the `parseArrays` option set to `false` in the `parse` function?\n - The `parseArrays` option is set to `false` to ensure that query string parameters with multiple values are not parsed into arrays, but instead are represented as strings.\n3. What is the expected format of the `location.search` value?\n - The `location.search` value is expected to be a string representing the query string portion of a URL, including the leading `?` character.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useParsedQueryString.md"}}],["918",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/usePlayer.ts)\n\nThe `usePlayer` function is a custom React hook that provides functionality for playing audio files. It takes in an `id` parameter that can be null, a number, or a string. The function returns an object that contains the current time of the audio file, the duration of the audio file, a boolean indicating whether the audio is currently playing or not, a function to set the playing state, and a function to set the clicked time.\n\nThe hook uses the `useState` and `useEffect` hooks from React to manage state and side effects. The `useState` hook is used to create state variables for the duration, current time, playing state, and clicked time. The `useEffect` hook is used to perform side effects such as updating the React state when DOM events occur and updating the DOM when React state changes.\n\nThe `useEffect` hook sets up event listeners for the audio file to update the React state when the audio file is loaded and when the current time of the audio file changes. It also updates the DOM to play or pause the audio file based on the playing state. If the clicked time is not null and is different from the current time, the hook sets the current time of the audio file to the clicked time and resets the clicked time to null. Finally, the hook cleans up the event listeners when the component unmounts.\n\nThis hook can be used in a larger project to provide audio playback functionality. For example, it can be used in a music player app to play and control audio files. Here is an example of how the hook can be used:\n\n```\nimport usePlayer from './usePlayer';\n\nfunction MusicPlayer({ audioFile }) {\n const { curTime, duration, playing, setPlaying, setClickedTime } = usePlayer(audioFile.id);\n\n const handlePlayPause = () => {\n setPlaying(!playing);\n };\n\n const handleSeek = (e) => {\n const clickedTime = e.target.value;\n setClickedTime(clickedTime);\n };\n\n return (\n \n \n \n \n
\n );\n}\n```\n\nIn this example, the `usePlayer` hook is used to control the playback of an audio file. The `curTime` and `duration` values are used to display the current time and duration of the audio file. The `playing` value is used to toggle between playing and pausing the audio file. The `setPlaying` function is called when the play/pause button is clicked. The `setClickedTime` function is called when the user seeks to a different time in the audio file.\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a custom React hook called `usePlayer` that manages the state of an HTML audio player.\n\n2. What arguments does the `usePlayer` hook take?\n \n The `usePlayer` hook takes a single argument called `id` that can be `null`, a number, or a string.\n\n3. What does the `useEffect` hook do in this code?\n \n The `useEffect` hook sets up event listeners on an HTML audio element and updates the state of the `usePlayer` hook based on the events that occur. It also cleans up the event listeners when the component unmounts.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/usePlayer.md"}}],["919",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/usePool.ts)\n\nThe `usePool` function is a custom React hook that fetches data about a Uniswap V2 liquidity pool and returns it as an object. The function takes a single argument, `poolAddress`, which is a string representing the Ethereum address of the liquidity pool. \n\nThe function first imports several dependencies: `useCallback`, `useEffect`, and `useState` from the React library, `BigNumber` from the `@ethersproject/bignumber` library, and `IUniswapV2PairABI` from the `@sushiswap/core/build/abi` library. It also imports a helper function called `isAddress` from a local `functions` file and a custom hook called `useContract` from another local file.\n\nThe `usePool` function initializes a state variable called `poolData` using the `useState` hook. This variable will hold the data fetched from the liquidity pool. The function then checks if the `poolAddress` argument is a valid Ethereum address using the `isAddress` helper function. If it is, the function calls the `useContract` hook to get a reference to the Uniswap V2 pair contract at the specified address.\n\nThe `useCallback` hook is used to define a function called `fetchPoolData` that asynchronously fetches data about the liquidity pool using the contract reference. Specifically, it retrieves the reserves of the two tokens in the pool, the addresses of the two tokens, and the total supply of the pool tokens. Once the data is fetched, it is stored in the `poolData` state variable using the `setPoolData` function.\n\nThe `useEffect` hook is used to call the `fetchPoolData` function whenever the `poolAddress` argument changes. This ensures that the data is always up-to-date with the specified liquidity pool.\n\nFinally, the `usePool` function returns the `poolData` object, which contains the reserves, token addresses, and total supply of the liquidity pool. This data can be used in other parts of the project to display information about the pool or to perform calculations involving the pool's tokens.\n\nExample usage:\n\n```\nimport usePool from './usePool'\n\nfunction PoolInfo({ poolAddress }) {\n const poolData = usePool(poolAddress)\n\n return (\n \n
\n )\n}\n```\n\nIn this example, the `PoolInfo` component uses the `usePool` hook to fetch data about a liquidity pool specified by the `poolAddress` prop. The data is then displayed in the component using JSX.\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code defines a custom React hook called `usePool` that fetches data about a Uniswap pool given its address. It solves the problem of needing to repeatedly fetch pool data in different components.\n\n2. What external libraries or dependencies does this code rely on?\n- This code relies on the `react`, `@ethersproject/bignumber`, `@sushiswap/core`, and a custom `isAddress` function from another file. \n\n3. What is the expected input and output of the `usePool` hook?\n- The `usePool` hook expects a string `poolAddress` as input, which is the address of a Uniswap pool. It returns an object `poolData` containing information about the pool's reserves, tokens, and total supply.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/usePool.md"}}],["920",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/usePrevious.ts)\n\nThe code above is a custom React hook called `usePrevious` that allows developers to access the previous value of a state or prop in a functional component. This hook is useful when a component needs to compare the current value of a state or prop with its previous value to determine if any changes have occurred. \n\nThe `usePrevious` hook is implemented using the `useRef` and `useEffect` hooks from the React library. The `useRef` hook creates a mutable reference object that can hold any value, similar to an instance property on a class. The `useEffect` hook is used to update the reference object with the current value of the state or prop whenever it changes. \n\nThe `usePrevious` hook takes a generic type parameter `T` that represents the type of the value being stored. The `value` parameter is the current value of the state or prop that is being tracked. The hook returns the previous value of the state or prop, which is stored in the `ref.current` property. \n\nHere is an example of how the `usePrevious` hook can be used in a functional component:\n\n```\nimport React, { useState } from 'react'\nimport usePrevious from './usePrevious'\n\nfunction Counter() {\n const [count, setCount] = useState(0)\n const prevCount = usePrevious(count)\n\n function handleIncrement() {\n setCount(count + 1)\n }\n\n return (\n Token 1: {poolData.token0}
\nToken 2: {poolData.token1}
\nReserves: {poolData.reserves.toString()}
\nTotal supply: {poolData.totalSupply.toString()}
\n\n
\n )\n}\n```\n\nIn the example above, the `Counter` component uses the `useState` hook to manage the state of a count variable. The `usePrevious` hook is used to track the previous value of the count variable. Whenever the count variable is updated, the `usePrevious` hook returns the previous value of the count variable, which is then displayed in the component. \n\nOverall, the `usePrevious` hook is a useful tool for React developers who need to track the previous value of a state or prop in a functional component. It can be used in a variety of scenarios, such as tracking changes in form input values or detecting changes in API response data.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom React hook called `usePrevious` that returns the previous value of a given input value.\n\n2. What is the significance of the `useRef` and `useEffect` hooks used in this code?\n The `useRef` hook is used to create a mutable reference to a value that persists across renders, while the `useEffect` hook is used to run a side effect (in this case, updating the reference value) after a render.\n\n3. How can this code be used in a React component?\n This code can be imported into a React component and used like any other custom hook, by calling `usePrevious` with a value as its argument and using the returned previous value in the component's logic.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/usePrevious.md"}}],["921",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSearchAndSort.ts)\n\nThe code defines a custom React hook called `useSearchAndSort` that can be used to search and sort an array of items. The hook takes in three arguments: `items`, `searchOptions`, and `sortOptions`. \n\nThe `items` argument is the array of items that needs to be searched and sorted. The `searchOptions` argument is an optional object that can be used to configure the search functionality. The `sortOptions` argument is an optional object that can be used to configure the sort functionality.\n\nThe hook returns an object that contains the following properties: `items`, `term`, `setTerm`, `sortConfig`, `setSortConfig`, and `requestSort`. \n\nThe `items` property is the sorted and searched array of items. The `term` property is the current search term. The `setTerm` property is a function that can be used to update the search term. The `sortConfig` property is an object that contains the current sort configuration. The `setSortConfig` property is a function that can be used to update the sort configuration. The `requestSort` property is a function that can be used to request a sort based on a specific key and direction.\n\nThe `useMemo` hook is used to memoize the sorted array of items. The `Fuse` library is used to perform the search functionality. The `getNested` function is a helper function that is used to get the value of a nested property in an object.\n\nThe `useSearchAndSort` hook can be used in a React component to search and sort an array of items. Here is an example of how the hook can be used:\n\n```\nimport useSearchAndSort from './useSearchAndSort'\n\nconst items = [\n { name: 'John', age: 25 },\n { name: 'Jane', age: 30 },\n { name: 'Bob', age: 20 },\n]\n\nfunction App() {\n const { items: sortedItems, term, setTerm, sortConfig, setSortConfig, requestSort } = useSearchAndSort(items)\n\n return (\n Current count: {count}
\nPrevious count: {prevCount}
\n \n\n setTerm(e.target.value)} />\n \n \n
\n )\n}\n```\n\nIn this example, the `useSearchAndSort` hook is used to search and sort an array of objects that contain a `name` and an `age` property. The `term` state is used to store the current search term, and the `setTerm` function is used to update the search term. The `requestSort` function is used to request a sort based on the `name` or `age` property. The `sortedItems` array is the sorted and searched array of items.\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a custom React hook called `useSearchAndSort` that takes in an array of items, search options, and sort options, and returns an object with sorted items, search term, and sort configuration.\n\n2. What external libraries does this code use?\n \n This code uses two external libraries: `@ethersproject/bignumber` for handling big numbers, and `fuse.js` for fuzzy searching.\n\n3. What is the role of the `getNested` function?\n \n The `getNested` function is a helper function that takes in an object, a path string, and a separator, and returns the value of the nested property specified by the path string. It replaces square brackets with the separator and splits the path string to traverse the object. If the property is not found, it returns `undefined`.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useSearchAndSort.md"}}],["922",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSortableData.ts)\n\nThe code defines a custom React hook called `useSortableData` that can be used to sort an array of items based on a specified configuration. The hook takes two arguments: `items`, which is the array of items to be sorted, and `config`, which is an optional object that specifies the initial sorting configuration. \n\nThe `useMemo` hook is used to memoize the sorted items array, which means that the array will only be recalculated when either the `items` or `sortConfig` dependencies change. \n\nThe `requestSort` function is used to update the sorting configuration based on the specified `key` and `direction`. If the `key` is already being used for sorting and the `direction` is currently ascending, the direction is changed to descending, and vice versa. \n\nThe `getNested` function is a helper function that is used to retrieve nested properties from an object using a dot-separated path. For example, if the object is `{ a: { b: { c: 1 } } }` and the path is `'a.b.c'`, the function will return `1`. \n\nThe sorting algorithm used by the hook is a standard comparison function that compares the values of the specified `key` property for each item in the array. If the values are `BigNumber` instances, they are compared using the `lt` and `gt` methods provided by the `@ethersproject/bignumber` library. If one of the values is `Infinity`, it is treated as the largest possible value. \n\nOverall, this hook provides a flexible and reusable way to sort arrays of items in a React application. It can be used in a variety of contexts, such as sorting a table of data or a list of items. Here is an example of how the hook can be used to sort an array of objects by their `name` property:\n\n```\nimport useSortableData from './useSortableData'\n\nconst items = [\n { name: 'Alice', age: 25 },\n { name: 'Bob', age: 30 },\n { name: 'Charlie', age: 20 },\n]\n\nfunction App() {\n const { items: sortedItems, requestSort, sortConfig } = useSortableData(items)\n\n return (\n - \n {sortedItems.map((item) => (\n
- \n {item.name} - {item.age}\n \n ))}\n
| requestSort('name')}>\n Name {sortConfig && sortConfig.key === 'name' && sortConfig.direction === 'ascending' ? <>▲ : <>▼}\n | \nrequestSort('age')}>\n Age {sortConfig && sortConfig.key === 'age' && sortConfig.direction === 'ascending' ? <>▲ : <>▼}\n | \n
|---|---|
| {item.name} | \n{item.age} | \n
\n \n
\n )\n}\n\nexport default MyComponent\n```\n\nIn the example above, the `useStickyData` hook is used to maintain the state of the `name` variable even when the `MyComponent` is unmounted and remounted. The `name` variable is initialized with the value returned by the `useStickyData` hook. The `handleNameChange` function is used to update the `name` variable when the user types into the input field.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom React hook called `useStickyData` that returns a value that persists across renders.\n\n2. How does this code work?\n The `useRef` hook is used to create a mutable reference to a value. If the `value` argument passed to `useStickyData` is not `undefined`, the reference is updated with the new value. The current value of the reference is then returned.\n\n3. How can this code be used in a React application?\n This code can be imported and used as a custom hook in a React component. The returned value can be used to persist data across renders, such as form input values or user preferences.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useStickyData.md"}}],["924",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSushiBar.ts)\n\nThe code is a custom React hook called `useSushiBar` that provides functionality for interacting with the SushiBar contract. The SushiBar is a staking contract that allows users to earn rewards in the form of SUSHI tokens by staking their SLP tokens. \n\nThe hook imports `Currency`, `CurrencyAmount`, and `Token` from the `@zoolabs/zdk` library, which are used to represent currency amounts and tokens. It also imports `useCallback` from React, `useSushiBarContract` from another custom hook called `useContract`, and `useTransactionAdder` from a state management library.\n\nThe `useSushiBar` hook returns an object with two functions: `enter` and `leave`. These functions take a `CurrencyAmount\n \n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n - This code defines a custom React hook called `useSushiBar` that provides functions for entering and leaving a SushiBar contract using the SushiSwap protocol.\n2. What external dependencies does this code rely on?\n - This code imports several modules from the `@zoolabs/zdk` library, as well as two custom hooks called `useSushiBarContract` and `useTransactionAdder` from other files in the project.\n3. What arguments do the `enter` and `leave` functions take, and what do they return?\n - Both functions take an optional `amount` argument that is a `CurrencyAmount` object representing the amount of a `Token` to enter or leave the SushiBar with. They return a Promise that resolves to a transaction hash if successful, or an error if not.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useSushiBar.md"}}],["925",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSushiMaker.ts)\n\nThe code above is a custom React hook called `useMaker` that is part of a larger project called `zoo`. This hook is designed to interact with a Maker contract and provide a `serve` function that can be used to convert one token to another. \n\nThe hook imports two other custom hooks: `useMakerContract` and `useTransactionAdder`. `useMakerContract` is used to retrieve the Maker contract instance, while `useTransactionAdder` is used to add transactions to the project's global state. \n\nThe `useCallback` hook is used to memoize the `serve` function and prevent unnecessary re-renders. The `serve` function takes two arguments, `token0` and `token1`, which are the tokens to be converted. The function attempts to call the `convert` method on the Maker contract instance with the provided tokens. If successful, the resulting transaction is added to the global state using the `addTransaction` function. If an error occurs, the error is returned. \n\nThe `useMaker` hook returns an object with a single property, `serve`, which is the memoized `serve` function. This hook can be used in other components to interact with the Maker contract and convert tokens. \n\nExample usage:\n\n```\nimport useMaker from './useMaker'\n\nconst MyComponent = () => {\n const { serve } = useMaker()\n\n const handleServe = async () => {\n const token0 = 'ETH'\n const token1 = 'DAI'\n const result = await serve(token0, token1)\n console.log(result)\n }\n\n return (\n \n )\n}\n```\n\nIn the example above, the `useMaker` hook is used to retrieve the `serve` function, which is then called when the button is clicked. The `token0` and `token1` arguments are hard-coded for simplicity, but could be passed in dynamically based on user input or other factors. The resulting transaction or error is logged to the console.\n## Questions: \n 1. What is the purpose of the `useMaker` hook?\n - The `useMaker` hook is used to provide a `serve` function that can be used to convert tokens using the `makerContract` and add the transaction to the state using `addTransaction`.\n\n2. What is the `useCallback` hook used for in this code?\n - The `useCallback` hook is used to memoize the `serve` function and prevent unnecessary re-renders when the `addTransaction` and `makerContract` dependencies change.\n\n3. What is the purpose of the `TODO` comment in the code?\n - The `TODO` comment suggests that there is a potential future feature to implement called `Serve all`, but it has not been implemented yet.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useSushiMaker.md"}}],["926",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSwaave.ts)\n\nThe `useSushiBar` function is a custom React hook that provides functionality related to the SushiBar contract in the larger project. It imports several other custom hooks and libraries, including `useActiveWeb3React`, `useTransactionAdder`, `useSushiContract`, and `useSushiBarContract`. \n\nThe hook returns an object with four properties: `allowance`, `approve`, `enter`, and `leave`. \n\n`allowance` is a string that represents the amount of SUSHI tokens that the user has approved for the SushiBar contract to spend on their behalf. The `fetchAllowance` function is called on mount and every 10 seconds thereafter to update the `allowance` state. \n\n`approve` is an asynchronous function that approves the SushiBar contract to spend an unlimited amount of SUSHI tokens on the user's behalf. It returns a transaction object that is added to the transaction history using the `addTransaction` function from the `useTransactionAdder` hook. \n\n`enter` is an asynchronous function that allows the user to deposit a specified amount of SUSHI tokens into the SushiBar contract. It returns a transaction object that is added to the transaction history using the `addTransaction` function. \n\n`leave` is an asynchronous function that allows the user to withdraw a specified amount of SUSHI tokens from the SushiBar contract. It returns a transaction object that is added to the transaction history using the `addTransaction` function. \n\nOverall, this hook provides a convenient way for other components in the project to interact with the SushiBar contract and manage SUSHI token deposits and withdrawals. \n\nExample usage: \n\n```\nimport useSushiBar from './useSushiBar'\n\nfunction MyComponent() {\n const { allowance, approve, enter, leave } = useSushiBar()\n\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code defines a custom React hook called `useSushiBar` that provides functions for interacting with the SushiBar smart contract. It allows users to approve, enter, and leave the SushiBar, which is a staking contract for SUSHI tokens.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including the `react`, `@ethersproject/bignumber`, and `@ethersproject/constants` packages. It also imports several custom hooks from other files in the project, such as `useContract` and `useActiveWeb3React`.\n\n3. What improvements could be made to this code?\n- The code currently uses strings to represent token amounts, but it would be more precise to use `BigNumber` objects instead. The code includes comments indicating that this should be updated in the future. Additionally, the error handling could be improved to provide more informative error messages to users.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useSwaave.md"}}],["927",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSwapSlippageTollerence.ts)\n\nThe code imports several modules from the '@zoolabs/zdk' library and the 'react' library. It defines two constants, V2_SWAP_DEFAULT_SLIPPAGE and ONE_TENTHS_PERCENT, both of which are instances of the Percent class from the '@zoolabs/zdk' library. \n\nThe code exports a function called useSwapSlippageTolerance that takes a single argument, trade, which is an instance of the Trade class from the '@zoolabs/zdk' library. The function uses the useMemo hook from the 'react' library to memoize a defaultSlippageTolerance value based on the trade argument. If trade is undefined, the defaultSlippageTolerance is set to ONE_TENTHS_PERCENT. Otherwise, it is set to V2_SWAP_DEFAULT_SLIPPAGE. Finally, the function returns the result of calling the useUserSlippageToleranceWithDefault hook from the '../state/user/hooks' module with the defaultSlippageTolerance value as an argument.\n\nThe purpose of this code is to provide a hook that calculates the slippage tolerance for a given trade. Slippage tolerance is the maximum amount by which the execution price of a trade can differ from the expected price. The useSwapSlippageTolerance function takes a trade object as an argument and calculates the default slippage tolerance based on whether the trade object is defined or not. It then passes this default value to the useUserSlippageToleranceWithDefault hook, which returns the user's preferred slippage tolerance or the default value if the user has not set a preference.\n\nThis code can be used in the larger project to ensure that trades are executed within the user's preferred slippage tolerance. For example, a trading interface could use this hook to calculate the slippage tolerance for a given trade and display it to the user. The user could then adjust the slippage tolerance if desired before executing the trade.\n## Questions: \n 1. What is the purpose of the `useSwapSlippageTolerance` function?\n- The `useSwapSlippageTolerance` function is used to calculate the slippage tolerance for a given trade.\n\n2. What is the difference between `V2_SWAP_DEFAULT_SLIPPAGE` and `ONE_TENTHS_PERCENT`?\n- `V2_SWAP_DEFAULT_SLIPPAGE` represents the default slippage tolerance for a V2 swap, which is 0.50%. `ONE_TENTHS_PERCENT` represents a slippage tolerance of 0.10%.\n\n3. What is the `useMemo` hook used for in this code?\n- The `useMemo` hook is used to memoize the default slippage tolerance value based on whether or not a trade is provided. This helps to optimize performance by avoiding unnecessary re-renders.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useSwapSlippageTollerence.md"}}],["928",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useTimestampFromBlock.ts)\n\nThe code above is a custom React hook called `useTimestampFromBlock` that retrieves the timestamp of a given block on the Ethereum blockchain. It utilizes the `useEffect` and `useState` hooks from the React library, as well as the `useActiveWeb3React` hook from a separate file.\n\nThe `useTimestampFromBlock` hook takes in a single argument, `block`, which is a number representing the block number to retrieve the timestamp from. If `block` is undefined, the hook will return undefined.\n\nThe hook first retrieves the active Web3 provider using the `useActiveWeb3React` hook. It then initializes a state variable called `timestamp` using the `useState` hook. The `timestamp` variable will hold the retrieved timestamp value.\n\nThe `useEffect` hook is used to fetch the timestamp data asynchronously. It first checks if `block` is defined, and if so, it retrieves the block data using the `getBlock` method from the Web3 library. If the block data is successfully retrieved, the timestamp value is set using the `setTimestamp` method.\n\nThe `useEffect` hook also checks if the `timestamp` state variable is undefined. If it is, it calls the `fetchTimestamp` function to retrieve the timestamp data.\n\nFinally, the hook returns the `timestamp` value, which will be undefined if the `block` argument is undefined or if the timestamp data has not yet been retrieved.\n\nThis hook can be used in a larger project to retrieve the timestamp of a specific block on the Ethereum blockchain. For example, it could be used to display the timestamp of a particular transaction or block on a user interface. Here is an example usage of the hook:\n\n```\nimport { useTimestampFromBlock } from './useTimestampFromBlock'\n\nfunction BlockTimestamp({ blockNumber }) {\n const timestamp = useTimestampFromBlock(blockNumber)\n\n return (\n Current allowance: {allowance}
\n \n \n \n\n Timestamp: {timestamp ? new Date(timestamp * 1000).toLocaleString() : 'Loading...'}\n
\n )\n}\n```\n\nIn this example, the `BlockTimestamp` component takes in a `blockNumber` prop and uses the `useTimestampFromBlock` hook to retrieve the timestamp of that block. The timestamp is then displayed in a user-friendly format using the `toLocaleString` method. If the timestamp has not yet been retrieved, the component will display a \"Loading...\" message.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom hook called `useTimestampFromBlock` that takes a block number as input and returns the timestamp of that block.\n\n2. What is the `useActiveWeb3React` hook used for?\n The `useActiveWeb3React` hook is used to get access to the active Web3 provider and library in the current context.\n\n3. Why is the `timestamp` state variable initialized as undefined?\n The `timestamp` state variable is initialized as undefined because it is only set after fetching the timestamp data asynchronously, and it may not always be set depending on the value of the `block` input.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useTimestampFromBlock.md"}}],["929",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useToast.ts)\n\nThe code defines a custom hook called `useToast` that provides a set of functions to display toast notifications in a React application. The hook uses the `useMemo` hook from React to memoize the functions and avoid unnecessary re-renders. It also uses the `useDispatch` hook from the `react-redux` library to dispatch actions to the Redux store.\n\nThe `useToast` hook returns an object with the following functions:\n\n- `toastError`: displays a toast notification with a red background and an error icon. It takes a `title` parameter (required) and an optional `description` parameter.\n- `toastInfo`: displays a toast notification with a blue background and an info icon. It takes a `title` parameter (required) and an optional `description` parameter.\n- `toastWarning`: displays a toast notification with a yellow background and a warning icon. It takes a `title` parameter (required) and an optional `description` parameter.\n- `push`: adds a new toast notification to the Redux store. It takes a `Toast` object as a parameter, which has the following properties:\n - `id`: a unique identifier for the toast (generated from the `title` parameter using the `kebabCase` function from the `lodash` library).\n - `type`: the type of the toast (one of `toastTypes.DANGER`, `toastTypes.INFO`, `toastTypes.SUCCESS`, or `toastTypes.WARNING`).\n - `title`: the title of the toast (required).\n - `description`: an optional description of the toast.\n- `remove`: removes a toast notification from the Redux store. It takes an `id` parameter (the same as the `id` property of the `Toast` object).\n- `clear`: removes all toast notifications from the Redux store.\n\nThis hook can be used in any React component to display toast notifications. For example:\n\n```\nimport React from 'react'\nimport useToast from './useToast'\n\nconst MyComponent = () => {\n const { toastError, toastInfo, toastWarning } = useToast()\n\n const handleClick = () => {\n toastError('Error', 'Something went wrong!')\n toastInfo('Info', 'Here is some information.')\n toastWarning('Warning', 'Be careful!')\n }\n\n return (\n \n )\n}\n\nexport default MyComponent\n```\n\nWhen the button is clicked, three toast notifications will be displayed: one with a red background and an error icon, one with a blue background and an info icon, and one with a yellow background and a warning icon.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a custom hook called `useToast` that provides functions for displaying toast notifications using Redux.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several modules from external libraries including `lodash`, `react`, and `react-redux`.\n\n3. What types of toast notifications are available and how are they triggered?\n- This code provides functions for displaying toast notifications with different types including `toastError`, `toastInfo`, and `toastWarning`. These functions take a title and optional description as arguments and dispatch an action to add the toast to the Redux store.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useToast.md"}}],["930",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useToggle.ts)\n\nThe code above is a custom React hook called `useToggle` that allows for toggling between two states. The hook takes in an optional `initialState` parameter, which defaults to `false`. The hook returns an array with two elements: the current state and a function to toggle the state.\n\nThe `useState` hook is used to create a state variable called `state` and its corresponding `setState` function. The `useCallback` hook is used to memoize the `toggle` function, which toggles the `state` variable between `true` and `false` using the `setState` function.\n\nThis hook can be used in a larger project to toggle between different states, such as showing or hiding a component, changing the color of a button, or switching between different views. Here is an example of how this hook can be used in a React component:\n\n```\nimport React from 'react'\nimport useToggle from './useToggle'\n\nfunction MyComponent() {\n const [isToggled, toggle] = useToggle()\n\n return (\n \n \n {isToggled &&
\n )\n}\n```\n\nIn the example above, the `useToggle` hook is used to toggle the `isToggled` state between `true` and `false` when the button is clicked. The `isToggled` state is used to conditionally render the `Hello World!` message based on whether the button has been toggled or not.\n\nOverall, the `useToggle` hook provides a simple and reusable way to toggle between two states in a React component.\n## Questions: \n 1. What does this code do?\n This code exports a custom hook called `useToggle` that takes an optional boolean `initialState` and returns an array with the current state and a function to toggle the state.\n\n2. What is the purpose of the `useCallback` hook in this code?\n The `useCallback` hook is used to memoize the toggle function so that it only gets recreated if the dependencies change. In this case, the toggle function has no dependencies, so it will only be created once.\n\n3. What is the significance of the array being returned by the `useToggle` hook?\n The array returned by the `useToggle` hook contains the current state and the toggle function, respectively. This allows the consumer of the hook to easily access and manipulate the state.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useToggle.md"}}],["931",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useTokenAllowance.ts)\n\nThe code above is a TypeScript module that exports a custom hook function called `useTokenAllowance`. This hook is used to retrieve the current allowance of a specific token for a given owner and spender. The hook is designed to be used in a React component and relies on two other custom hooks: `useSingleCallResult` and `useTokenContract`.\n\nThe `useTokenAllowance` hook takes three optional parameters: `token`, `owner`, and `spender`. The `token` parameter is an instance of the `Token` class from the `@zoolabs/zdk` library, which represents a specific ERC20 token. The `owner` and `spender` parameters are strings that represent the Ethereum addresses of the token owner and spender, respectively.\n\nThe hook first calls the `useTokenContract` hook to retrieve the contract instance for the specified token. It then uses the `useMemo` hook to memoize the `inputs` array, which contains the `owner` and `spender` parameters. This is done to prevent unnecessary re-renders of the component that uses the hook.\n\nThe hook then calls the `useSingleCallResult` hook with the contract instance, the name of the `allowance` function, and the `inputs` array. This hook is used to retrieve the current allowance of the specified token for the given owner and spender.\n\nFinally, the hook returns a `CurrencyAmount` instance from the `@zoolabs/zdk` library that represents the allowance of the specified token. This is done using another `useMemo` hook that memoizes the `token` and `allowance` values.\n\nOverall, this hook is useful for retrieving the current allowance of a specific ERC20 token for a given owner and spender. It can be used in a React component to display the allowance or to perform other actions based on the allowance value. For example, it could be used to enable or disable a button based on whether the allowance is greater than zero. \n\nExample usage:\n\n```\nimport { useTokenAllowance } from './useTokenAllowance'\n\nfunction MyComponent({ token, owner, spender }) {\n const allowance = useTokenAllowance(token, owner, spender)\n\n return (\n Hello World!
}\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom hook called `useTokenAllowance` that returns the allowance of a token for a specific owner and spender.\n\n2. What external dependencies does this code rely on?\n This code relies on two external dependencies: `@zoolabs/zdk` for `CurrencyAmount` and `Token` types, and `react` for the `useMemo` hook.\n\n3. What is the expected input and output of the `useTokenAllowance` hook?\n The `useTokenAllowance` hook expects three optional parameters: `token` (of type `Token`), `owner` (of type `string`), and `spender` (of type `string`). It returns a `CurrencyAmountCurrent allowance: {allowance?.toSignificant(4)}
\n\n {hasPendingTransactions ? (\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `useTransactionStatus` hook?\n- The `useTransactionStatus` hook is used to determine if there are any pending transactions in the application.\n\n2. What is the significance of the `newTransactionsFirst` function?\n- The `newTransactionsFirst` function is used to sort transactions in descending order based on their `addedTime` property, so that the latest transaction comes first.\n\n3. What is the role of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the sorted recent transactions array, so that it is only recalculated when the `allTransactions` dependency changes.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useTransactionStatus.md"}}],["936",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useUSDCPrice.ts)\n\nThe code is a module that exports two React hooks: `useUSDCPrice` and `useUSDCValue`. The purpose of these hooks is to calculate the price of a given currency in USDC and the value of a given currency amount in USDC, respectively. \n\nThe `useUSDCPrice` hook takes a `currency` parameter and returns a `Price` object representing the price of the input currency in USDC. The function first retrieves the current chain ID using the `useActiveWeb3React` hook. It then looks up the corresponding `STABLECOIN_AMOUNT_OUT` value for the current chain ID, which is a large amount of USDC used to filter low liquidity pairs. The function then calls the `useV2TradeExactOut` hook to get the best trade route for swapping the input currency for USDC. If a valid trade route is found, the function returns a `Price` object representing the price of the input currency in USDC based on the trade route. If the input currency is USDC, the function returns a `Price` object representing a price of 1 USDC. Otherwise, the function returns `undefined`.\n\nThe `useUSDCValue` hook takes a `currencyAmount` parameter and returns the value of the input currency amount in USDC. The function first calls the `useUSDCPrice` hook to get the current price of the input currency in USDC. It then uses the `quote` method of the `Price` object to calculate the value of the input currency amount in USDC. If either the price or the currency amount is undefined, the function returns `null`.\n\nThese hooks can be used in a larger project to display the price and value of various currencies in USDC. For example, a trading interface could use these hooks to display the current price of a selected currency in USDC and the estimated value of a user's portfolio in USDC.\n## Questions: \n 1. What is the purpose of the `useUSDCPrice` function?\n- The `useUSDCPrice` function returns the price in USDC of a given input currency.\n\n2. What is the `STABLECOIN_AMOUNT_OUT` object used for?\n- The `STABLECOIN_AMOUNT_OUT` object contains stablecoin amounts used when calculating spot price for a given currency, with the amount being large enough to filter low liquidity pairs.\n\n3. What is the `useUSDCValue` function used for?\n- The `useUSDCValue` function takes a `CurrencyAmount` and returns its value in USDC based on the current USDC price of the currency.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useUSDCPrice.md"}}],["937",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useV2Pairs.ts)\n\nThe code is a module that provides functions for interacting with Uniswap V2 pairs. It exports two functions, `useV2Pairs` and `useV2Pair`, which are React hooks that can be used in a React component to fetch and display information about Uniswap V2 pairs.\n\nThe `useV2Pairs` hook takes an array of pairs of currencies and returns an array of pairs of `PairState` and `Pair` objects. The `PairState` enum represents the state of the pair, which can be one of four values: `LOADING`, `NOT_EXISTS`, `EXISTS`, or `INVALID`. The `Pair` object represents a Uniswap V2 pair and contains information about the reserves of the two tokens in the pair.\n\nThe `useV2Pair` hook is a convenience function that takes two currency objects and returns a single `PairState` and `Pair` object.\n\nThe `useV2Pairs` hook works by first converting the array of currency pairs into an array of token pairs. It then uses the `computePairAddress` function from the `@zoolabs/zdk` library to compute the address of the Uniswap V2 pair for each token pair. It then uses the `useMultipleContractSingleData` hook from the `multicall` module to fetch the reserves of each pair from the Uniswap V2 pair contract. Finally, it maps the results to an array of `PairState` and `Pair` objects.\n\nThe `useV2Pair` hook is a simple wrapper around the `useV2Pairs` hook that takes two currency objects and passes them as an array to `useV2Pairs`. It then returns the first element of the resulting array.\n\nThis module can be used in a React component to display information about Uniswap V2 pairs. For example, a component could use the `useV2Pair` hook to fetch and display the reserves of a specific Uniswap V2 pair. The `PairState` enum can be used to display a loading spinner, an error message, or the pair information depending on the state of the pair.\n## Questions: \n 1. What is the purpose of the `useV2Pairs` function?\n- The `useV2Pairs` function takes an array of currency pairs and returns an array of pairs with their state (loading, not exists, exists, or invalid).\n\n2. What is the purpose of the `useV2Pair` function?\n- The `useV2Pair` function takes two currency parameters and returns a single pair with its state (loading, not exists, exists, or invalid).\n\n3. What is the significance of the `PairState` enum?\n- The `PairState` enum is used to indicate the state of a pair (loading, not exists, exists, or invalid) and is returned by the `useV2Pairs` and `useV2Pair` functions.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useV2Pairs.md"}}],["938",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useV2Trades.ts)\n\nThe code in this file provides functions for finding the best trades for exchanging tokens in a decentralized exchange. The functions use the `@zoolabs/zdk` library to perform the trades. \n\nThe `useAllCommonPairs` function takes two optional currency parameters and returns an array of valid pairs that can be used for trading. It uses the `useAllCurrencyCombinations` function to get all possible currency combinations and then filters out invalid and duplicated pairs. The resulting array of pairs is memoized to improve performance.\n\nThe `useV2TradeExactIn` function takes a `currencyAmountIn` parameter and a `currencyOut` parameter, and returns the best trade for exchanging the exact amount of `currencyAmountIn` to `currencyOut`. It uses the `useAllCommonPairs` function to get the valid pairs and then searches for the best trade using the `Trade.bestTradeExactIn` method from the `@zoolabs/zdk` library. The function can take an optional `maxHops` parameter to limit the number of hops in the trade. If `maxHops` is greater than 1, the function searches for the best trade with varying hops and returns the best one. The function returns `null` if there are no valid pairs or if the trade cannot be executed.\n\nThe `useV2TradeExactOut` function is similar to `useV2TradeExactIn`, but it takes a `currencyIn` parameter and a `currencyAmountOut` parameter instead. It returns the best trade for exchanging `currencyIn` to the exact amount of `currencyAmountOut`. It also takes an optional `maxHops` parameter to limit the number of hops in the trade.\n\nBoth `useV2TradeExactIn` and `useV2TradeExactOut` use the `isTradeBetter` function from the `../functions/trade` module to compare trades and find the best one. The `BETTER_TRADE_LESS_HOPS_THRESHOLD` constant from the `../constants` module is used as a threshold for determining if a trade is better than another. \n\nThese functions can be used in a larger project that involves trading tokens in a decentralized exchange. They provide a convenient way to find the best trades for exchanging tokens and can be used to build more complex trading strategies. For example, a trading bot could use these functions to find the best trades and execute them automatically. \n\nExample usage:\n\n```\nimport { useV2TradeExactIn } from './useV2Trades'\n\nconst currencyAmountIn = new CurrencyAmount(Currency.ETH, '1')\nconst currencyOut = Currency.USDC\n\nconst bestTrade = useV2TradeExactIn(currencyAmountIn, currencyOut)\n\nconsole.log(bestTrade)\n// Output: TradeThere are pending transactions. Please wait...
\n ) : (\n \n )}\n\n
\n )\n}\n```\n## Questions: \n 1. What does the `useWindowSize` function do?\n- The `useWindowSize` function is a custom React hook that returns the current size of the browser window as an object with `width` and `height` properties.\n\n2. What is the purpose of the `getSize` function?\n- The `getSize` function returns an object with the current `width` and `height` of the browser window, or `undefined` if the code is not running in a browser environment.\n\n3. Why is the `isClient` variable used in this code?\n- The `isClient` variable is used to check if the code is running in a browser environment by checking if the `window` object exists. This is necessary because the `window` object is not available in server-side rendering or other non-browser environments.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useWindowSize.md"}}],["941",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useWrapCallback.ts)\n\nThe `useWrapCallback` function in the `zoo` project is responsible for returning a wrap callback given the selected input and output currency. It is a React hook that takes in three parameters: `inputCurrency`, `outputCurrency`, and `typedValue`. It returns an object with three properties: `wrapType`, `execute`, and `inputError`.\n\nThe `useWrapCallback` function imports several modules from the `zdk` and `wallet` directories. It also imports the `useMemo` hook from React, which is used to memoize the result of the function.\n\nThe `useWrapCallback` function first retrieves the `chainId` and `account` from the `useActiveWeb3React` hook. It then retrieves the `wethContract` and `balance` using the `useWETH9Contract` and `useCurrencyBalance` hooks, respectively. The `inputAmount` is calculated using the `tryParseAmount` function from the `parse` module.\n\nThe function then returns a memoized object based on the input and output currencies. If the `wethContract`, `chainId`, `inputCurrency`, or `outputCurrency` is undefined, or if the `chainId` is `ChainId.CELO`, the function returns an object with `wrapType` set to `WrapType.NOT_APPLICABLE`. If the input currency is native and the output currency is WETH, the function returns an object with `wrapType` set to `WrapType.WRAP`. If the input currency is WETH and the output currency is native, the function returns an object with `wrapType` set to `WrapType.UNWRAP`. Otherwise, the function returns an object with `wrapType` set to `WrapType.NOT_APPLICABLE`.\n\nIf `wrapType` is `WrapType.WRAP`, the `execute` property is set to an async function that wraps the input amount of native currency to WETH. If `wrapType` is `WrapType.UNWRAP`, the `execute` property is set to an async function that unwraps the input amount of WETH to native currency. If `wrapType` is `WrapType.NOT_APPLICABLE`, the `execute` property is undefined.\n\nIf there is insufficient balance to execute the wrap or unwrap, the `inputError` property is set to an error message. Otherwise, the `inputError` property is undefined.\n\nThis function is used in the larger project to provide a wrap callback for the selected input and output currencies. It is used in conjunction with other functions and components to enable users to wrap and unwrap their native currency to and from WETH. For example, it may be used in a form where users can enter the amount of native currency they want to wrap or unwrap, and then click a button to execute the transaction.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a function called `useWrapCallback` that returns an object with information about whether a wrap or unwrap operation can be executed based on the selected input and output currencies, as well as the user input value.\n\n2. What external dependencies does this code have?\n- This code imports several functions and hooks from other files in the `zoo` project, as well as two constants from an external library called `@zoolabs/zdk`.\n\n3. What is the expected input and output of the `useWrapCallback` function?\n- The `useWrapCallback` function takes in three optional parameters: `inputCurrency`, `outputCurrency`, and `typedValue`. It returns an object with three properties: `wrapType`, `execute`, and `inputError`. The `wrapType` property is an enum that indicates whether the operation is a wrap, unwrap, or not applicable. The `execute` property is a function that executes the wrap or unwrap operation, if possible. The `inputError` property is a string that describes any errors with the user input value.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useWrapCallback.md"}}],["942",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useXSushiPerSushi.ts)\n\nThis code is a module that exports a function called `useSushiPerXSushi`. The function uses the `useSWR` hook from the `swr` library to fetch data from a GraphQL API endpoint. The API endpoint is specified in the `fetcher` function, which uses the `request` function from the `graphql-request` library to make a request to the endpoint. The query that is sent to the endpoint is defined in the `QUERY` constant.\n\nThe purpose of this code is to retrieve the ratio of XSushi to Sushi tokens from the GraphQL API endpoint and return it as a floating-point number. The ratio is obtained from the `ratio` field of the `bar` object, which is returned by the GraphQL query. The `parse` parameter is used to determine whether the ratio should be returned as a string or a floating-point number. If `parse` is `true`, the ratio is parsed as a floating-point number using the `parseFloat` function.\n\nThis code can be used in the larger project to retrieve the current ratio of XSushi to Sushi tokens, which is an important metric for the SushiSwap decentralized exchange. The `useSushiPerXSushi` function can be imported and used in other modules to obtain the ratio and use it for various purposes, such as calculating the price of Sushi tokens in terms of XSushi tokens. Here is an example of how the function can be used:\n\n```\nimport useSushiPerXSushi from 'zoo'\n\nfunction MyComponent() {\n const ratio = useSushiPerXSushi()\n const price = 100 * ratio // calculate price of 100 Sushi tokens in XSushi tokens\n return Window width: {width}
\nWindow height: {height}
\nCurrent XSushi:Sushi ratio is {ratio}. Price of 100 Sushi tokens is {price} XSushi tokens.
\n}\n```\n## Questions: \n 1. What is the purpose of the `graphql-request` and `swr` libraries being imported?\n- The `graphql-request` library is used to make a GraphQL API request to retrieve data, while the `swr` library is used for data fetching and caching.\n\n2. What is the `QUERY` constant and what data is being requested?\n- The `QUERY` constant is a GraphQL query string that requests the `ratio` field of the `bar` object with a specific `id` value.\n\n3. What does the `useSushiPerXSushi` function do and what does the `parse` parameter do?\n- The `useSushiPerXSushi` function uses the `useSWR` hook to fetch data using the `QUERY` constant and `fetcher` function. It then returns the `ratio` value of the `bar` object. The `parse` parameter is optional and if set to `true`, it will parse the `ratio` value as a float before returning it.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/useXSushiPerSushi.md"}}],["943",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/webReact.ts)\n\nThe code above is a module that exports two functions: `getLibrary` and `signMessage`. The purpose of this module is to provide utility functions for interacting with the Ethereum blockchain using the `ethers.js` library.\n\nThe `getLibrary` function takes a provider object as an argument and returns a `Web3Provider` instance. The `Web3Provider` is a class provided by the `ethers.js` library that wraps a `JsonRpcProvider` and provides additional functionality for interacting with the Ethereum blockchain. The `pollingInterval` property of the `Web3Provider` instance is set to 12000 milliseconds (12 seconds) to control how often the provider should poll the blockchain for updates. This function can be used to create a `Web3Provider` instance that can be used to interact with the Ethereum blockchain.\n\nThe `signMessage` function takes a message, an account address, and a wallet object as arguments and returns a signature. The `getSigner` function is imported from another module and is used to get a signer object from the wallet object. The `signMessage` method of the signer object is then called with the message as an argument to generate a signature. This function can be used to sign a message using a wallet object and an account address.\n\nThere is also a commented out function called `handleSignMessage` that takes an object with a `message` and `library` property as an argument. This function is not used in the current implementation and is likely a work in progress or a remnant of previous development.\n\nOverall, this module provides useful utility functions for interacting with the Ethereum blockchain using the `ethers.js` library. The `getLibrary` function can be used to create a `Web3Provider` instance, and the `signMessage` function can be used to sign messages using a wallet object and an account address.\n## Questions: \n 1. What external libraries or dependencies does this code use?\n- This code imports `BaseProvider`, `ExternalProvider`, `JsonRpcFetchFunc`, and `Web3Provider` from the `@ethersproject/providers` library, and `getSigner` from a custom `functions/contract` module.\n\n2. What does the `getLibrary` function do?\n- The `getLibrary` function takes an `ExternalProvider` or `JsonRpcFetchFunc` as input, creates a new `Web3Provider` instance with the input as its provider, sets the polling interval to 12 seconds, and returns the new `Web3Provider` instance.\n\n3. What does the `signMessage` function do?\n- The `signMessage` function takes a `message` string, an `account` string, and a `BaseProvider`, `Web3Provider`, or any other object as input, and uses the `getSigner` function to sign the message with the specified account and wallet. It then returns the resulting signature.","metadata":{"source":".autodoc/docs/markdown/core/src/hooks/webReact.md"}}],["944",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/ipfs/localhost.json)\n\nThe code above is a JSON object that contains information about various files related to the zoo project. Each file has a name, URL, IPFS, and hash. The purpose of this code is to provide a way to access these files from within the project. \n\nThe files are all related to the zoo project, and they are all media files. There are three images and three videos. The images are named \"validator.jpg\", \"wallet.jpg\", and \"atm.jpg\". The videos are named \"validator.mp4\", \"wallet.mp4\", and \"atm.mp4\". \n\nThe URLs and IPFS addresses in the code can be used to access the files from within the project. For example, if the project has a web interface, the URLs could be used to display the images and videos on the website. The hash values can be used to verify the integrity of the files. \n\nHere is an example of how this code could be used in the larger project:\n\n```javascript\n// Access the validator image URL\nconst validatorImageUrl = zoo[\"validator.jpg\"].url;\n\n// Display the validator image on the website\nconst validatorImage = document.createElement(\"img\");\nvalidatorImage.src = validatorImageUrl;\ndocument.body.appendChild(validatorImage);\n\n// Verify the hash of the validator image\nconst validatorImageHash = zoo[\"validator.jpg\"].hash;\nverifyHash(validatorImageUrl, validatorImageHash);\n```\n\nIn this example, we access the URL of the validator image from the `zoo` object. We then create an `img` element and set its `src` attribute to the URL. Finally, we append the image to the `body` of the document. We also verify the hash of the image using the `verifyHash` function. \n\nOverall, this code provides a way to access and verify media files related to the zoo project. It can be used to display images and videos on the project's website, or to verify the integrity of the files.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines a set of files related to a project called \"zoo\", including images and videos, along with their URLs and IPFS hashes.\n\n2. What is the significance of the \"__type\" key in each object?\n - The \"__type\" key indicates that each object is of type \"File\", which is likely a custom data type used within the project.\n\n3. What is the difference between the \"url\" and \"ipfs\" keys for each file?\n - The \"url\" key provides a direct URL to access the file, while the \"ipfs\" key provides a URL to access the file via the InterPlanetary File System (IPFS), which is a decentralized file storage system.","metadata":{"source":".autodoc/docs/markdown/core/src/ipfs/localhost.md"}}],["945",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/layouts/Dao/index.tsx)\n\nThe code above is a React component called `DaoLayout` that serves as a layout for a specific page in the larger project. It imports several components from the project's `components` directory, including `Banner`, `Footer`, `Header`, `Main`, and `Popups`. It also imports two functions from the project's `hooks` and `state/network/actions` directories, respectively.\n\nThe `DaoLayout` component takes two props: `children` and `banner`. The `children` prop represents the content that will be rendered within the `Main` component, while the `banner` prop represents an optional banner that can be passed to the `Header` component.\n\nThe component uses the `useActiveWeb3React` hook to get access to the `library` object, which is used to update the gas price for the current network. This is done by calling the `updateGasPrice` function from the `state/network/actions` directory with the `library` object as an argument. This function updates the gas price in the project's Redux store.\n\nThe `DaoLayout` component returns a JSX element that contains the imported components and the `children` prop. The `Header` component is passed the `transparent` prop with a value of `true` and the `banner` prop, if it exists. The `Main` component is passed the `isModal` prop with a value of `false` and the `bgColor` prop with a value of `dao-bg`. The `Popups` and `Footer` components are also included.\n\nThis component can be used as a layout for any page in the project that requires a header, main content area, popups, and footer. It also updates the gas price for the current network, which is important for any transactions that may occur on the page. An example usage of this component would be:\n\n```\nimport DaoLayout from \"./path/to/DaoLayout\";\n\nconst MyPage = () => {\n return (\n Welcome to My Page
\nThis is some content for my page.
\nWelcome to the Zoo!
\nExplore our collection of exotic animals.
\n \n );\n};\n\nexport default HomePage;\n```\n## Questions: \n 1. What is the purpose of the `Layout` component?\n- The `Layout` component is responsible for rendering the main layout of the application, including the header, main content, popups, and footer.\n\n2. What is the significance of the `useEffect` hook in this code?\n- The `useEffect` hook is used to update the gas price in the network state whenever the `library` object changes. \n\n3. What is the purpose of the `bg` prop in the `Layout` component?\n- The `bg` prop is used to set the background color of the main content area, with a default value of black.","metadata":{"source":".autodoc/docs/markdown/core/src/layouts/Default/index.md"}}],["947",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/layouts/Drop/index.tsx)\n\nThis code defines a React component called `DropLayout` that is used to render a layout for a specific page in the larger project. The component imports several other components from the project's `components` directory, including `Footer`, `Header`, `Main`, and `Popups`. It also imports a custom hook called `useActiveWeb3React` and an action creator function called `updateGasPrice` from the project's `hooks` and `state/network/actions` directories, respectively.\n\nThe `DropLayout` component takes three props: `children`, `banner`, and `isMarginTop`. The `children` prop is used to render any child components that are passed to `DropLayout`. The `banner` prop is an optional prop that can be used to specify a banner image for the page. The `isMarginTop` prop is a boolean that determines whether or not to add a top margin to the `Main` component.\n\nThe `useEffect` hook is used to call the `updateGasPrice` function whenever the `library` object (which is obtained from the `useActiveWeb3React` hook) changes. This function is responsible for updating the gas price used for transactions on the Ethereum network.\n\nThe `return` statement renders the layout for the page. It consists of a `div` element that contains the `Header`, `Main`, `Popups`, and `Footer` components. The `Header` component is rendered with a transparent background and the `banner` prop (if provided). The `Main` component is rendered with a background color of \"bg-drop\" and the `children` prop. The `Popups` component is used to render any popups that may appear on the page. Finally, the `Footer` component is rendered at the bottom of the page.\n\nThis component can be used in the larger project to provide a consistent layout for pages that require a banner image, a specific background color, and a fixed set of components (i.e. `Header`, `Main`, `Popups`, and `Footer`). Developers can use this component by importing it and passing any necessary props to it. For example:\n\n```\nimport DropLayout from \"./DropLayout\";\n\nfunction MyPage() {\n return (\nWelcome to My Page
\nThis is some content for my page.
\nWelcome to my page!
\nThis is some content.
\n \n );\n}\n```\n## Questions: \n 1. What is the purpose of the `Layout` component?\n- The `Layout` component is responsible for rendering the overall layout of the application, including the header, main content, and footer.\n\n2. What are the optional props that can be passed to the `Layout` component?\n- The `Layout` component accepts three optional props: `left`, `children`, and `right`. `left` and `right` are JSX elements that will be rendered in the left and right columns of the layout, respectively. `children` is a React child or an array of React children that will be rendered in the main content area.\n\n3. What is the purpose of the `useRouter` hook from the `next/router` module?\n- The `useRouter` hook is used to access the Next.js router object, which provides information about the current route and allows for programmatic navigation. In this code, it is used to determine the current route and apply appropriate styling to the navigation links.","metadata":{"source":".autodoc/docs/markdown/core/src/layouts/Kashi/index.md"}}],["951",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/layouts/Miso/index.tsx)\n\nThe code above defines a React component called `Layout` that is used to render the layout of a web page. The component imports three other components: `Footer`, `Header`, and `Popups`. These components are located in the `components` directory of the `zoo` project, which suggests that this `Layout` component is part of a larger web application.\n\nThe `Layout` component takes a single prop called `children`, which is used to render the content of the web page. The `children` prop is enclosed in empty tags (`<>...`) to allow for the rendering of multiple child components.\n\nThe `Layout` component returns a `div` element that has a class of `z-0` and is styled to be a flex container with a column direction (`flex-col`). The `div` element takes up the full width and height of the screen and has both horizontal and vertical scrolling enabled. \n\nInside the `div` element, there are four child components: `Header`, `main`, `Popups`, and `Footer`. The `Header` component is rendered with a prop called `banner` set to `false`, which suggests that the `Header` component may have a banner that can be toggled on or off. The `main` component is a flex container that takes up the remaining space in the `div` element and is styled to grow to the maximum height of its content. The `Popups` component is used to render any popups that may appear on the web page, and the `Footer` component is used to render the footer of the web page.\n\nOverall, the `Layout` component is a reusable component that can be used to render the layout of any web page in the `zoo` project. It provides a consistent layout across all pages and allows for the easy rendering of child components. Here is an example of how the `Layout` component can be used:\n\n```\nimport Layout from \"./Layout\";\nimport HomePage from \"./HomePage\";\n\nconst App = () => {\n return (\nThis is the content of my modal window.
\n\n {isEditing ? (\n
\n )\n}\n\nexport default BidItemContainer\n```\n\nIn this example, the `BidItemContainer` component renders either the `BidItem` component or the `BidEditable` component depending on whether the user is editing the bid item or not. When the user clicks on the bid item, the `handleEditClick` function is called, which sets the `isEditing` state to `true`. This causes the `BidEditable` component to be rendered instead of the `BidItem` component. \n\nOverall, the `BidEditable` component provides a way for users to edit bid items in the larger project.\n## Questions: \n 1. What is the purpose of the `GraphBid` type and where is it defined?\n- The `GraphBid` type is imported from the `types` module, but it's unclear what properties or methods it contains or what its purpose is within the `BidEditable` component.\n\n2. What is the `BidItem` component and how is it used within `BidEditable`?\n- It's unclear what the `BidItem` component does or how it's implemented, but it's being passed a `bid` prop from `BidEditable`.\n\n3. What is the expected output or behavior of the `BidEditable` component?\n- It's unclear what the purpose of the `BidEditable` component is or how it's intended to be used within the larger `zoo` project.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/BidEditable.md"}}],["965",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/BidItem.tsx)\n\nThe `BidItem` component is a React component that renders a single bid item. It takes in a `bid` object, which contains information about the bid, such as the bidder, the amount, and the currency used. It also takes in some optional props, such as `showToken`, `summary`, and `onClick`, which determine how the bid item is displayed and what actions can be taken on it.\n\nThe component first imports various dependencies, such as icons, tokens, and hooks, that are used throughout the component. It then defines the `BidProps` type, which specifies the shape of the `bid` object and the optional props.\n\nThe `BidItem` component then defines its state using the `useState` hook. It keeps track of the formatted amount of the bid and the currency token used. It also uses the `useEffect` hook to update the currency token when the `chainId` changes.\n\nThe component then renders the bid item using JSX. It displays information about the bid, such as the bidder, the bid amount, and the currency used. It also displays a token ID if `showToken` is true. Additionally, it displays a time ago timestamp and an eye icon if `onClick` is defined.\n\nOverall, the `BidItem` component is a reusable component that can be used to display a single bid item in a larger project. It takes in a `bid` object and optional props to customize its display and functionality. It uses various dependencies and hooks to manage its state and render the bid item. Here is an example usage of the `BidItem` component:\n\n```jsx\nimport BidItem from './BidItem'\n\nconst bid = {\n bidder: {\n id: '0x1234567890123456789012345678901234567890'\n },\n amount: '1000000000000000000',\n currency: {\n id: '0x0000000000000000000000000000000000000000'\n },\n media: {\n contentURI: 'ipfs://Qm...'\n },\n createdAtTimestamp: '1620000000'\n}\n\nconst MyComponent = () => {\n return (\n \n
\n )}\n \n console.log(bid)} />\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `BidItem` component?\n- The `BidItem` component is used to display information about a bid, including the bidder's address, bid amount, and currency token.\n\n2. What external libraries are being used in this file?\n- The file is importing several external libraries, including `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, and `react-timeago`.\n\n3. What is the purpose of the `useEffect` hook in this file?\n- The `useEffect` hook is used to update the `currencyToken` and `formattedAmount` state variables when the `chainId` changes. This is done by calling the `getCurrencyTokenLowerCase` and `formatCurrencyAmountWithCommas` functions, respectively.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/BidItem.md"}}],["966",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/BidList.tsx)\n\nThe code above is a React component called `BidList` that fetches a list of bids from a GraphQL API and renders them as a list of `BidItem` components. The component takes in several props, including `where`, `empty`, `showToken`, and `onClick`. \n\nThe `where` prop is an object that can contain filters for the bids to fetch. The `empty` prop is a JSX element to render if there are no bids to display. The `showToken` prop is a boolean that determines whether to display the token associated with each bid. The `onClick` prop is a function to call when a bid is clicked.\n\nThe component uses the `useQuery` hook from the `@apollo/client` library to fetch the bids from the GraphQL API. The GraphQL query is defined using the `gql` template literal tag and is stored in the `GET_BIDS` constant. The query fetches the `id`, `amount`, `createdAtTimestamp`, `currency`, `bidder`, and `media` fields for each bid.\n\nThe `useQuery` hook takes in the `GET_BIDS` query and an object of variables to pass to the query. The `where` object is spread into the variables object and the `bidder` and `media` fields are converted to lowercase. The `fetchPolicy` option is set to `'no-cache'` to ensure that the query is always sent to the server. The `pollInterval` option is set to `10000` to refetch the bids every 10 seconds.\n\nThe `loading`, `error`, and `data` variables are destructured from the result of the `useQuery` hook. The `bids` variable is set to the `data.bids` array or an empty array if `data` is falsy.\n\nThe component conditionally renders the `BidItem` components for each bid in the `bids` array. If there are no bids, it renders the `empty` prop or a default message. The `getUsdAmount` function is passed to each `BidItem` component to convert the bid amount to USD if necessary.\n\nThis component can be used in a larger project to display a list of bids for a particular media asset or bidder. The `where` prop can be used to filter the bids by media or bidder ID. The `showToken` prop can be used to display the token associated with each bid. The `onClick` prop can be used to handle click events on each bid.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `BidList` that queries a GraphQL API for a list of bids and renders them using the `BidItem` component.\n\n2. What is the structure of the GraphQL query being used?\n- The query is called `GetBids` and takes two variables: `where` and `first`. It returns a list of bids with various fields such as `id`, `amount`, `createdAtTimestamp`, and nested objects like `currency`, `bidder`, and `media`.\n\n3. What is the purpose of the `usePrice` hook being imported?\n- The `usePrice` hook is used to get the USD value of a given token. It is likely used to display the USD value of bids in the `BidList` component.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/BidList.md"}}],["967",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/BidModal.tsx)\n\nThe `BidModal` component is a React component that renders a modal window for displaying information about a bid on a media asset. The component takes three props: `bid`, `isOpen`, and `onClose`. The `bid` prop is an object that contains information about the bid, including the bidder, the owner of the media asset, the currency used for the bid, and the ID of the media asset. The `isOpen` prop is a boolean that determines whether the modal window is open or closed. The `onClose` prop is a function that is called when the modal window is closed.\n\nThe component imports several other components and functions from other files in the project. These include `Modal`, `ModalHeader`, `useActiveWeb3React`, `getContent`, `usePrice`, `formatCurrencyAmountWithCommas`, `isSameAddress`, `shortenAddress`, `RemoveBidButton`, `useContract`, `BidItem`, and `AcceptBidButton`.\n\nThe component uses the `useActiveWeb3React` hook to get the current user's account address. It also uses the `useContract` hook to get a reference to the `Market` contract. The component then uses the `useEffect` hook to call the `bidForTokenBidder` function on the `Market` contract to check whether the bid is offline. If the bid is offline, the component sets the `offline` state to `true`.\n\nThe component then uses several callback functions to determine whether the current user is the bidder or the owner of the media asset. If the current user is the bidder, the component displays a message indicating that the bidder's address will be refunded if the bid is removed. If the current user is the owner, the component displays buttons for removing or accepting the bid.\n\nThe component returns a `Modal` component that contains a `ModalHeader` component, a `BidItem` component, and buttons for removing or accepting the bid. The `Modal` component is a reusable component that provides a modal window for displaying content. The `ModalHeader` component is a reusable component that provides a header for the modal window. The `BidItem` component is a custom component that displays information about the bid, including the bidder, the amount of the bid, and the currency used for the bid. The buttons for removing or accepting the bid are custom components that call functions on the `Market` contract to remove or accept the bid.\n\nOverall, the `BidModal` component provides a user interface for managing bids on media assets in the `zoo` project. It uses several reusable components and custom functions to display information about the bid and allow the user to remove or accept the bid.\n## Questions: \n 1. What is the purpose of this code?\n- This code is for a BidModal component that displays bid information and allows the user to remove or accept a bid.\n\n2. What external dependencies does this code have?\n- This code imports several components and functions from other files, including Modal, ModalHeader, useActiveWeb3React, getContent, usePrice, isSameAddress, shortenAddress, RemoveBidButton, AcceptBidButton, and BidItem.\n\n3. What is the significance of the \"offline\" state variable?\n- The \"offline\" state variable is used to determine whether a bid was made offline (i.e. not through the app) and display a message to the bidder if the bid is removed. It is set based on the result of a call to the \"bidForTokenBidder\" function from the \"Market\" contract.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/BidModal.md"}}],["968",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/BidsModal/index.tsx)\n\nThe code defines a React component called `BidsModal` that renders a modal window for editing auction bids. The component takes a single prop called `CloseEvent`, which is a function that is called when the user clicks the close button on the modal. \n\nThe modal window is a fixed-size container with a black background and white text. It is positioned in the center of the screen using absolute positioning. The window contains several input fields for editing the auction details, including the current bid, start date, and end date. \n\nThe `useState` hook is used to manage the state of the modal window. The `isOpen` state variable is initialized to `false`, indicating that the modal is initially closed. \n\nWhen the component is rendered, it returns the JSX code that defines the modal window. The `CloseEvent` function is passed to the close button's `onClick` event handler, so that it is called when the user clicks the button. \n\nThe `BidsModal` component can be used in a larger project to allow users to edit auction details. For example, it could be used in an online auction platform to allow sellers to update the start and end dates of their auctions, or to adjust the current bid price. \n\nHere is an example of how the `BidsModal` component could be used in a larger React application:\n\n```jsx\nimport React, { useState } from 'react';\nimport BidsModal from './BidsModal';\n\nfunction AuctionDetails() {\n const [showModal, setShowModal] = useState(false);\n\n function handleEditClick() {\n setShowModal(true);\n }\n\n function handleCloseModal() {\n setShowModal(false);\n }\n\n return (\n \n
\n );\n}\n```\n\nIn this example, the `AuctionDetails` component renders a button that opens the `BidsModal` when clicked. The `showModal` state variable is used to determine whether the modal should be displayed. When the user clicks the close button on the modal, the `handleCloseModal` function is called, which sets `showModal` to `false` and hides the modal.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `BidsModal` that renders a modal for editing auction details.\n\n2. What props does the `BidsModal` component accept?\n- The `BidsModal` component accepts a prop called `CloseEvent`, which is a function that is called when the user clicks the \"X\" button to close the modal.\n\n3. What are some of the UI elements that are rendered by the `BidsModal` component?\n- The `BidsModal` component renders several UI elements, including a header with a title and a close button, input fields for the current bid and start/end dates, and a \"Save Changes\" button.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/BidsModal/index.md"}}],["969",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Cards/BidsCard.tsx)\n\nThe `BidsCard` component is a React component that renders a card displaying information about an auction. The component takes in several props, including `glb`, `usdz`, `itemId`, `ownerAdd`, `CurrentBid`, `StartingBid`, `greenNum`, `AuctionTime`, `typeOfNft`, and `bid`. \n\nThe component uses the `useRouter` hook from the `next/router` module to handle navigation to other pages in the application. It also uses two custom hooks, `useEditAuctionModalToggle` and `useIncreaseBidModalToggle`, from the `state/application/hooks` module to toggle the visibility of modals for editing auctions and increasing bids, respectively.\n\nThe component renders two columns of information. The left column displays a 3D model of the item being auctioned using the `ModelViewer` component from the `../../components/ModelViewer` module. The right column displays information about the auction, including the type of NFT being auctioned, the owner's address, the current bid, the reserve price, the time remaining in the auction, and buttons for editing the auction or increasing the bid.\n\nThe `handleFunc` function is called when the user clicks on one of the buttons. If the `bid` prop is `true`, the function toggles the visibility of the \"increase bid\" modal using the `toggleIncreaseBidModal` function. Otherwise, it toggles the visibility of the \"edit auction\" modal using the `toggleEditAuctionModal` function.\n\nOverall, the `BidsCard` component provides a reusable way to display information about auctions in the larger project. Developers can use this component to render auction information on various pages throughout the application. For example, the component could be used on a marketplace page to display information about items currently up for auction. \n\nExample usage:\n\n```\nimport BidsCard from \"zoo/components/BidsCard\";\n\nfunction AuctionPage() {\n return (\n Auction Details
\nCurrent bid: 1 ETH
\n \n {showModal &&\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `BidsCard` component?\n- The `BidsCard` component is used to display information about an auction item, including its image, owner, current and starting bid, auction time, and type of NFT. It also includes buttons to increase the bid or edit the auction, as well as a button to view the item or bid.\n\n2. What is the purpose of the `ModelViewer` component?\n- The `ModelViewer` component is imported from `../../components/ModelViewer` and is used to display a 3D model of the auction item. It is wrapped in a `div` with a fixed width and height and a rounded border.\n\n3. What are the `useEditAuctionModalToggle` and `useIncreaseBidModalToggle` hooks used for?\n- These hooks are imported from `state/application/hooks` and are used to toggle the visibility of the \"Edit Auction\" and \"Increase Bid\" modals, respectively. They are called when the corresponding button is clicked in the `handleFunc` function, which checks whether the `bid` prop is true or false.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/Cards/BidsCard.md"}}],["970",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Cards/CardNft.tsx)\n\nThe `CardNft` component is a React component that renders a card displaying information about a specific NFT (non-fungible token) auction. The component takes in several props, including the `nft` prop, which is an object containing information about the NFT auction, such as its name, animation URL, reserve price, and highest bid. \n\nThe component first renders a container div with a minimum width and height, and a flex layout that centers its child elements. Within this container, the component renders a video or 3D model of the NFT, depending on the `kind` property of the `nft` object. If the `kind` is 0 or 2, a video is rendered using the `animation_url` property of the `nft` object. Otherwise, a 3D model is rendered using the `glb_animation_url` and `usdz_animation_url` properties of the `nft` object.\n\nIf the `showDetails` prop is true, the component also renders additional information about the NFT auction, including the NFT's name, reserve price, highest bid, and yield per day. The reserve price is displayed as a button that links to the marketplace page for the corresponding animal NFT. The highest bid and yield per day are displayed as text.\n\nThis component can be used in the larger project to display information about NFT auctions in a visually appealing way. It can be used in conjunction with other components to create a marketplace or auction page for animal NFTs. \n\nExample usage:\n\n```\nimport CardNft from \"path/to/CardNft\";\n\nconst nft = {\n name: \"Giraffe NFT\",\n kind: 1,\n glb_animation_url: \"path/to/giraffe.glb\",\n usdz_animation_url: \"path/to/giraffe.usdz\",\n reservePrice: 1000000,\n amount: 500000,\n duration: 86400,\n tokenOwner: \"0x1234567890abcdef\",\n attributes: [\n { trait_type: \"Yields\", value: \"10\" },\n { trait_type: \"Color\", value: \"Brown\" },\n ],\n};\n\nfunction AuctionPage() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code defines a React component called `CardNft` that renders an NFT card with details such as name, highest bid, and yield per day. It also includes a video or 3D model viewer depending on the type of NFT.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies including React, Next.js, moment.js, and functions from other files such as `abbreviateNumbers` and `shortenAddress`.\n\n3. What props can be passed to the `CardNft` component and what are their types?\n- The `CardNft` component accepts four props: `nft` of type `Auction`, `showDetails` of type `boolean` with a default value of `true`, `className` of type `string`, and `onNFTClick` of type `function` that returns `void`.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/Cards/CardNft.md"}}],["971",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Carousel/Arrows.tsx)\n\nThis code defines two styled components, `Previous` and `Next`, which are used to create arrow buttons for a carousel or slider. The arrows are created using the `ChevronLeft` and `ChevronRight` icons from the Material UI library. The `Arrow` component is a base component that sets some common styles for both the `Previous` and `Next` components, such as positioning, color, and cursor. \n\nThe `Previous` and `Next` components are positioned absolutely and offset from the track of the slider by a fixed amount (`arrowOffset`). The `arrowDiameter` constant is used to set the width and height of the arrow icons. The `&:hover` selector is used to change the background color of the arrow when it is hovered over. The `& .slick-disabled` selector is used to hide the arrow when it is disabled (e.g. when there are no more items to scroll to).\n\nThe `PreviousArrow` and `NextArrow` components are exported for use in other parts of the project. They take three props: `onClick`, `style`, and `className`. These props are passed down to the `Previous` and `Next` components, which are rendered with the appropriate icon (`ChevronLeft` or `ChevronRight`). \n\nThis code is a reusable component that can be used in any React project that requires a carousel or slider with arrow buttons. The `PreviousArrow` and `NextArrow` components can be imported and used in any other React component, and the `onClick` prop can be used to handle click events on the arrow buttons. For example:\n\n```\nimport React from 'react'\nimport Slider from 'react-slick'\nimport { PreviousArrow, NextArrow } from './path/to/arrows'\n\nconst settings = {\n dots: true,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n prevArrow: Giraffe NFT Auction
\n\n
\n Slide 1
\n\n
\n Slide 2
\n\n
\n Slide 3
\n| Index | \nName | \nFloor Price | \n24h Volume | \n
|---|---|---|---|
\n
\n )\n}\n```\n\nIn the example above, the `CurrencyLogo` component is used to render the image of the USD currency symbol with a size of 64 pixels and an additional CSS class of `my-class`.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a component called `CurrencyLogo` that displays an image logo for a given currency symbol.\n\n2. What is the `CURRENCY_SYMBOL_LOGO` object and where does it come from?\n `CURRENCY_SYMBOL_LOGO` is an object that maps currency symbols to image URLs. It is imported from the `@zoolabs/zdk` library.\n\n3. What is the `Image` component and where does it come from?\n `Image` is a component imported from the `next/image` library that optimizes images for performance and provides features like lazy loading and automatic resizing.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/CurrencyLogo.md"}}],["979",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/EarnWithZoo/EarnCard.tsx)\n\nThe code defines a React component called `EarnCard` that renders a card with a heading and subtext. The component takes two props, `heading` and `subText`, which are both optional and have default values. If no values are provided, the heading will be \"Main Heading\" and the subtext will be a placeholder string.\n\nThe component returns a div element with a fixed width and height, a transparent background, and a gray border. Inside the div, there are three child elements: two divs and a paragraph. The first div is empty and has a fixed height of 50 pixels. The second div contains an h1 element with the value of the `heading` prop. The third div contains a p element with the value of the `subText` prop.\n\nThis component can be used in a larger project to display information in a card format. The `heading` prop can be used to provide a title for the card, while the `subText` prop can be used to provide additional details or a description. The component's fixed width and height make it suitable for use in a grid or other layout where consistent sizing is desired.\n\nHere is an example of how the `EarnCard` component could be used in a larger React application:\n\n```\nimport React from 'react'\nimport EarnCard from './EarnCard'\n\nconst App = () => {\n return (\n \n
\n )\n}\n\nexport default App\n```\n\nIn this example, the `EarnCard` component is used three times to display different ways to earn rewards. The component's fixed size and consistent layout make it easy to create a grid of cards that look good together. The `heading` and `subText` props are used to customize the content of each card.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a React component called `EarnCard` that renders a card with a heading and subtext.\n\n2. What are the default values for the `heading` and `subText` props?\n The default value for `heading` is \"Main Heading\", and the default value for `subText` is a long string of placeholder text.\n\n3. What CSS classes are applied to the different elements in the component?\n The component uses Tailwind CSS classes to style the different elements, including `w-[300px]`, `h-[250px]`, `border-2`, `border-gray-600`, `text-gray-600`, and various padding and flexbox classes.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/EarnWithZoo/EarnCard.md"}}],["980",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/EarnWithZoo/EarnWithZoo.tsx)\n\nThe code above is a React component that renders a grid layout with three columns and a minimum height of 300 pixels. It is named `EarnWithZoo` and is imported from a file located in the `zoo` project. \n\nThe component takes in a single prop called `children`, which is used to render the content of each column. The content is expected to be a collection of `EarnCard` components, which are also located in the `zoo` project. \n\nThe purpose of this component is to provide a layout for displaying a collection of `EarnCard` components in a visually appealing and organized way. It can be used in various parts of the larger `zoo` project where a grid layout is needed to display multiple `EarnCard` components. \n\nHere is an example of how this component can be used in a parent component:\n\n```\nimport React from 'react'\nimport EarnWithZoo from './EarnWithZoo'\nimport EarnCard from './EarnCard'\n\nconst EarnPage = () => {\n return (\n Earn Rewards
\n\n
\n \n \n \n
\n )\n}\n\nexport default EarnPage\n```\n\nIn the example above, the `EarnPage` component renders a heading and a `EarnWithZoo` component with three `EarnCard` components as its children. The `EarnCard` components are passed in with different titles and descriptions, which will be displayed in each card. \n\nOverall, the `EarnWithZoo` component provides a simple and reusable way to display a collection of `EarnCard` components in a grid layout.\n## Questions: \n 1. What is the purpose of the `EarnCard` component that is imported?\n- The `EarnCard` component is imported but not used in this file. It is possible that it is used in another file within the `zoo` project.\n\n2. What is the significance of the `className` property in the returned JSX element?\n- The `className` property sets the CSS class of the returned element to \"grid md:grid-cols-3 gap-6 min-h-[300px] w-full bg-transparent\", which likely affects the layout and styling of the element.\n\n3. What is the expected input for the `children` prop?\n- The `children` prop is used within the returned JSX element, so it is likely that this component is meant to be a wrapper for other components or elements. The expected input for `children` would be any valid React component or element.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/EarnWithZoo/EarnWithZoo.md"}}],["981",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Graph/Graph.tsx)\n\nThe code above is a simple React component called `Graph`. Its purpose is to render a basic HTML `div` element with the text \"Graph\" inside it. This component can be used as a building block for more complex visualizations or data representations within the larger project.\n\nTo use this component, it can be imported into another React component file using the `import` statement, like so:\n\n```\nimport Graph from './Graph'\n```\n\nThen, within the render method of the parent component, the `Graph` component can be included as a child element, like this:\n\n```\nrender() {\n return (\n Earn with Zoo
\n\n
\n )\n}\n```\n\nThis would render the \"My Data Visualization\" heading followed by the `Graph` component, which would display the text \"Graph\" inside a `div` element.\n\nOverall, this code serves as a basic building block for more complex data visualization components within the larger project. Its simplicity and reusability make it a valuable tool for developers working on the zoo project.\n## Questions: \n 1. **What is the purpose of this component?** \nA smart developer might wonder what this component is used for and how it fits into the overall functionality of the `zoo` project. Based on the code, it appears to be a simple component that renders a `My Data Visualization
\n` element with the text \"Graph\".\n\n2. **Are there any props or state being used in this component?** \nA smart developer might want to know if this component relies on any external data or state to render its output. Based on the code, it does not appear to be using any props or state.\n\n3. **Is this component being used anywhere else in the project?** \nA smart developer might want to know if this component is being imported and used in other parts of the `zoo` project. Without additional context, it is impossible to determine if this is the case.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/Graph/Graph.md"}}],["982",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Grid/CardWithTabs.tsx)\n\nThe `CardWithTabs` component is a reusable React component that renders a card with three tabs. The component takes in three props, `TabA`, `TabB`, and `TabC`, which are used to render the content of each tab. The component also takes in three optional props, `TabAName`, `TabBName`, and `TabCName`, which are used to set the names of each tab. If these props are not provided, the default names \"My Wallet\", \"My Bids\", and \"My Auctions\" are used.\n\nThe component uses the `useSelector` hook from the `react-redux` library to get the `zooBalance` value from the Redux store. It also uses the `useZoobalance` hook from the `state/zoo/hooks` module to fetch the `zooBalance` value from the server. The `useEffect` hook is used to call the `getZooBalance` function when the component mounts and whenever the `getZooBalance` function changes.\n\nThe component renders a header that displays the `zooBalance` value. The `zooBalance` value is formatted using the `toLocaleString` method to add commas and decimal places. The header also includes a gradient background and a row of three tabs. The active tab is highlighted with a black background, while the inactive tabs have a transparent background. When a tab is clicked, the `HandleChangeTab` function is called to update the `Tab` state variable, which determines which tab is active. The content of the active tab is rendered below the header.\n\nThis component can be used in the larger project to display a card with three tabs that allow the user to switch between different views of their wallet, bids, and auctions. The component can be customized by passing in different content for each tab and by setting the names of the tabs. Here is an example of how the `CardWithTabs` component can be used:\n\n```\n console.log(\"Bid accepted!\")}\n onError={(error) => console.log(`Error accepting bid: ${error}`)}\n/>\n```\n## Questions: \n 1. What is the purpose of the `LazyAcceptBidButton` component?\n- The `LazyAcceptBidButton` component is used to display a button that allows the user to accept a bid for a specific token.\n\n2. What external libraries or packages are being imported in this file?\n- The file is importing `isNativeCurrency` from the `@zoolabs/zdk` package, and `ethers`, `useCallback`, `useEffect`, and `useState` from the `react` package.\n\n3. What is the role of the `useTransactionPopups` hook in this code?\n- The `useTransactionPopups` hook is used to add transaction popups to the UI when a transaction is initiated or when an error occurs during the transaction.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/LazyAcceptBidButton.md"}}],["989",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazyBidItem.tsx)\n\nThe `LazyBidItem` component is a React component that renders a single bid item for a lazy auction. It takes in a `bid` object, which contains information about the bid, and several optional props that can be used to customize the rendering of the component.\n\nThe component first imports several dependencies, including icons, currency and token types, and various utility functions. It then defines the `LazyBidItemProps` type, which specifies the shape of the props that can be passed to the component. The props include the `bid` object, a function to get the USD amount of a token, a boolean to indicate whether to show the token name, a label for the bid item, a summary of the bid, and a callback function to handle click events.\n\nThe component then defines the `LazyBidItem` function, which takes in the props and returns a JSX element that renders the bid item. The function first extracts the `chainId` and `account` from the active Web3 React context using the `useActiveWeb3React` hook. It then initializes several state variables using the `useState` hook, including the formatted amount of the bid, the currency token used for the bid, and the type of the bid content.\n\nThe function then calls the `usePrice` hook to get the `getUsdAmount` function, which can be used to get the USD value of a token. It also calls the `getContent` function to get the type and name of the bid content, although this is currently hardcoded to an empty string.\n\nThe function then uses the `useEffect` hook to update the `currencyToken` and `formattedAmount` state variables whenever the `chainId` changes. It does this by calling the `getCurrencyTokenLowerCase` function to get the currency token for the bid, and then using the `formatCurrencyAmountWithCommas` function to format the bid amount with commas.\n\nFinally, the function returns a JSX element that renders the bid item. The element consists of a `div` container with two columns, one for the bid information and one for the bid amount. The bid information column displays the bid type or name, the bidder's address, and the time the bid was created. The bid amount column displays the formatted bid amount and the currency symbol. If the `onClick` prop is provided, the component also renders an eye icon that can be clicked to trigger the `onClick` callback function.\n\nOverall, the `LazyBidItem` component is a reusable component that can be used to render individual bid items for a lazy auction. It provides several customization options and uses various utility functions to format and display the bid information.\n## Questions: \n 1. What is the purpose of the `LazyBidItem` component?\n- The `LazyBidItem` component is used to display information about a bid, including the bidder's address, bid amount, and bid timestamp.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies, including `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, `react-timeago`, and custom functions and hooks.\n\n3. What is the significance of the `getUsdAmount` function and how is it used?\n- The `getUsdAmount` function is used to calculate the USD value of a bid based on the bid amount and the currency used for the bid. It is passed as a prop to the `LazyBidItem` component and called within the component to display the USD value of the bid if available.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/LazyBidItem.md"}}],["990",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazyBidList.tsx)\n\nThe code defines a React component called `LazyBidList` that fetches and displays a list of bids from a GraphQL API. The component takes in several props, including a `where` object that specifies filters for the bids, a boolean `showToken` that determines whether to display the token associated with each bid, an `onClick` function that is called when a bid is clicked, and an optional `empty` JSX element to display when there are no bids.\n\nThe component uses the `useQuery` hook from the `@apollo/client` library to fetch bids from the GraphQL API. The query is defined using the `gql` function and specifies the fields to fetch for each bid, including the bid amount, creation timestamp, currency, and bidder. The `where` object is passed as a variable to the query and is used to filter the bids based on the drop ID, token type name, and/or bidder ID.\n\nThe fetched bids are stored in the `data` object returned by the `useQuery` hook. If there are bids, the component maps over them and renders a `LazyBidItem` component for each bid. The `getUsdAmount` function from a `usePrice` hook is passed to each `LazyBidItem` component to convert the bid amount to USD. If there are no bids, the `empty` prop is rendered if provided, otherwise a default message is displayed.\n\nOverall, this code provides a reusable component for displaying a list of bids from a GraphQL API with filtering and customization options. It can be used in a larger project that involves auctions or bidding systems. For example, it could be used in an NFT marketplace to display bids on a particular NFT or in a charity auction platform to display bids on various items. Here is an example usage of the `LazyBidList` component:\n\n```\n console.log(`Clicked bid ${bid.id}`)}\n empty={ setIsOpen(false)}\n/>\n```\n## Questions: \n 1. What is the purpose of the `LazyBidModal` component?\n- The `LazyBidModal` component is used to display bid information and allow the user to remove or accept a bid.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `react`, `react-dom`, and various custom components and hooks defined in other files within the project.\n\n3. What is the significance of the `offline` state variable?\n- The `offline` state variable is used to determine whether the current user is offline or not, and is used to conditionally render a message to the user if they are the bidder and the bid is removed.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/LazyBidModal.md"}}],["992",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazyRemoveBidButton.tsx)\n\nThe code is a React component that exports a button component called `LazyRemoveBidButton`. This button is used to remove a bid for a specific token. The component takes in several props including `dropId`, `name`, `currency`, `onError`, and `onRemove`. \n\nThe `useActiveWeb3React` hook is used to get the current user's account. The `useGasPrice` hook is used to get the current gas price. The `useContract` hook is used to get the `App` and `Media` contracts. The `useTransactionPopups` hook is used to add transaction and error popups.\n\nThe `removeBid` function is a callback function that is called when the button is clicked. It first tries to remove the bid using the `app.removeLazyBid` function. If the currency is native, it will use the `app` contract to remove the bid. Otherwise, it will use the `media` contract to remove the bid. If the bid is successfully removed, the `onRemove` function is called. If there is an error, the `onError` function is called.\n\nThe `LazyRemoveBidButton` component returns a button with the text \"Remove Bid\". When the button is clicked, the `removeBid` function is called. The button has a red background and turns indigo when hovered over. \n\nThis component can be used in a larger project that involves bidding on tokens. When a user wants to remove their bid, they can click the `LazyRemoveBidButton` component and the bid will be removed. The `onRemove` function can be used to update the UI to reflect that the bid has been removed. The `onError` function can be used to display an error message if there is an error removing the bid.\n## Questions: \n 1. What is the purpose of the `LazyRemoveBidButton` component?\n- The `LazyRemoveBidButton` component is a button that, when clicked, removes a bid for a specific token ID.\n\n2. What external libraries or packages are being imported in this file?\n- The file is importing functions from \"@zoolabs/zdk\", \"react\", and \"../hooks\", as well as components from \"../state/network/hooks\" and \"../state/transactions/hooks\".\n\n3. What is the purpose of the `useCallback` hook in this code?\n- The `useCallback` hook is used to define the `removeBid` function, which is an asynchronous function that removes a bid for a specific token ID. It is memoized to prevent unnecessary re-renders of the component.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/LazyRemoveBidButton.md"}}],["993",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazySetAsk.tsx)\n\nThe `LazySetAsk` component is a React component that allows users to set an ask price for a given token. It is part of the larger `zoo` project and imports various dependencies from other files in the project. \n\nThe component takes in two props: `dropId` and `name`. These props are used to retrieve the `ask` and `currencyToken` values from the `useTokenType` hook. The `ask` value represents the current ask price for the token, while the `currencyToken` value represents the currency used to set the ask price. \n\nThe component renders an input field that allows users to enter a new ask price for the token. The value of this input field is stored in the component's state using the `useState` hook. The component also renders a button that, when clicked, sets the new ask price for the token. This button is implemented using the `LazySetAskButton` component, which is imported from another file in the project. \n\nThe component also renders a `SelectCurrency` component that allows users to select the currency used to set the ask price. This component is only rendered when the user clicks on a button next to the input field. The selected currency is stored in the component's state using the `useState` hook. \n\nThe component also includes commented-out code that allows users to toggle an \"offline ask\" option. This option is not currently implemented in the component. \n\nOverall, the `LazySetAsk` component provides a simple interface for users to set an ask price for a given token. It is designed to be used in conjunction with other components in the `zoo` project to create a full-featured marketplace for buying and selling tokens.\n## Questions: \n 1. What is the purpose of the `LazySetAsk` component?\n- The `LazySetAsk` component is used to set an ask price for a given token.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including `@zoolabs/zdk`, `ethers`, `@headlessui/react`, `@heroicons/react/solid`, and `@lingui/macro` and `@lingui/core`.\n\n3. What state is managed by the `LazySetAsk` component?\n- The `LazySetAsk` component manages several pieces of state, including the selected currency token, the value of the ask price, and whether the ask is offline or not.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/LazySetAsk.md"}}],["994",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazySetAskButton.tsx)\n\nThe code is a React component that renders a button used to set an \"ask\" price for a token on the Drop contract. The component takes in several props including the name of the token, the amount of the ask price, the currency token used for the ask price, and a boolean indicating whether the user is offline. \n\nThe component uses several hooks including `useActiveWeb3React`, `useGasPrice`, and `useContract` to interact with the Ethereum network and the Drop contract. The `useTransactionPopups` hook is also used to display transaction popups to the user.\n\nWhen the user clicks the \"Set Ask\" button, the `setAsk` function is called. This function first checks if the `amount` prop is truthy. If it is, it creates an `Ask` object with the `currency` and `amount` properties, where the `amount` is converted to the appropriate units using the `ethers.utils.parseUnits` function. The `setTokenTypeAsk` function is then called on the `drop` contract with the `name`, `ask`, `from`, and `gasPrice` parameters. If the transaction is successful, a transaction popup is displayed to the user indicating that the ask price has been set.\n\nIf the `amount` prop is falsy, a message is displayed to the user indicating that an amount is required.\n\nOverall, this component is used to allow users to set an ask price for a token on the Drop contract. It is likely used in conjunction with other components and functionality to create a full-fledged marketplace for buying and selling tokens. An example usage of this component might look like:\n\n```\n\n```\n## Questions: \n 1. What is the purpose of the `LazySetAskButton` component?\n- The `LazySetAskButton` component is used to set an ask price for a given token type.\n\n2. What external libraries or packages are being imported in this file?\n- The file is importing `Currency` from the `@zoolabs/zdk` package, and `ethers`, `useCallback`, `useActiveWeb3React`, `useContract`, `useGasPrice`, and `useTransactionPopups` from various other packages.\n\n3. What is the `setAsk` function doing?\n- The `setAsk` function is creating an `Ask` object with a currency and amount, and then calling the `setTokenTypeAsk` function on the `drop` contract with the provided `name`, `Ask`, `account`, and `gasPrice` parameters. If successful, it adds a transaction popup with the name of the token type.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/LazySetAskButton.md"}}],["995",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/MarketHero/HomeCard.tsx)\n\nThis code defines a React component called HomeCard that renders a card displaying information about a 3D model. The component imports two other components, MovingModelviewer and ModelViewer, using the dynamic import function from the Next.js framework. The dynamic import function allows for code splitting, which means that the imported components are only loaded when they are needed, improving the performance of the application.\n\nThe HomeCard component takes four props: glb, CollectionName, TopOffer, and NftName. The glb prop specifies the path to the 3D model file, which is set to a default value of '/models/Tiger/TIGER_BABY.glb'. The other props specify information about the model, such as the name of the collection it belongs to, the top offer for the model, and the name of the NFT (non-fungible token) associated with the model.\n\nThe component renders a div element with a class of \"mt-5 lg:mt-2 mb-2\", which contains two child div elements. The first child div element has a class of \"w-[300px] h-[300px] borderGrad\" and a black background color. Inside this div element, the MovingModelviewer component is rendered. The MovingModelviewer component is responsible for displaying the 3D model specified by the glb prop. The ssr: false option passed to the dynamic import function ensures that the component is not rendered on the server side, which is necessary because the component relies on browser-specific APIs.\n\nThe second child div element contains two child div elements, each with a class of \"text-center\". The first child div element contains the CollectionName prop, and the second child div element contains the TopOffer prop. Below this div element is another div element with two child div elements, each containing the NftName and TopOffer props, respectively.\n\nOverall, this code defines a reusable React component that can be used to display information about a 3D model, including its name, collection, and top offer. The component uses dynamic imports to improve performance and relies on the MovingModelviewer component to display the 3D model. An example usage of this component might look like:\n\n```\nimport HomeCard from './HomeCard'\n\nfunction App() {\n return (\n console.log(`Bid removed for token ${tokenId}`)}\n onError={(error) => console.error(error)}\n/>\n```\n## Questions: \n 1. What is the purpose of the `RemoveBidButton` component?\n- The `RemoveBidButton` component is used to render a button that, when clicked, removes a bid for a specific token.\n\n2. What libraries or hooks are being imported and used in this file?\n- The file imports `isNativeCurrency` from the `@zoolabs/zdk` library, as well as `useCallback` from `react`, and `useActiveWeb3React`, `useContract`, `useGasPrice`, and `useTransactionPopups` from various custom hooks defined in other files.\n\n3. What happens when the `removeBid` function is called?\n- The `removeBid` function attempts to remove a bid for a specific token by calling either the `removeBid` function on the `app` contract or the `media` contract, depending on whether the `currency` parameter is a native currency or not. If successful, it calls the `onRemove` function with the `tokenId` parameter. If there is an error, it calls the `onError` function with the error parameter and displays an error popup.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/RemoveBidButton.md"}}],["1002",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/SelectCurrency.tsx)\n\nThe code above is a React component that renders a list of supported payment currencies for a given blockchain network. It imports the `useActiveWeb3React` hook from a `hooks` module and the `getSupportedPaymentCurrencies` function from a `config/currencies` module. It also imports a `CurrencyLogo` component from a local file.\n\nThe `SelectCurrency` component takes a single prop called `onSelect`, which is a callback function that will be called when a currency is selected. The component first calls the `useActiveWeb3React` hook to get the current blockchain network's ID. It then renders a list of buttons, each representing a supported currency for the current network. The list is generated by mapping over the result of calling `getSupportedPaymentCurrencies` with the current network's ID as an argument.\n\nEach button has an `onClick` handler that calls the `onSelect` callback with the selected currency as an argument. The button also renders a `CurrencyLogo` component and the currency symbol in a `div` element. The `CurrencyLogo` component takes the currency symbol as a prop and renders the corresponding logo.\n\nThis component can be used in a larger project that requires users to select a payment currency for a transaction. The `onSelect` callback can be used to update the selected currency in the parent component's state or trigger an action. The `getSupportedPaymentCurrencies` function can be modified to support additional blockchain networks or currencies. The `CurrencyLogo` component can be reused in other parts of the project that require currency logos. \n\nExample usage:\n\n```\nimport SelectCurrency from './SelectCurrency'\n\nconst PaymentForm = () => {\n const [selectedCurrency, setSelectedCurrency] = useState(null)\n\n const handleCurrencySelect = (currency) => {\n setSelectedCurrency(currency)\n }\n\n return (\n \n```\n## Questions: \n 1. What is the purpose of the `SetBidButton` component?\n- The `SetBidButton` component is used to place a bid on a specific token.\n\n2. What libraries or dependencies are being imported in this file?\n- The file is importing `Currency` and `isNativeCurrency` from the `@zoolabs/zdk` library, as well as `useCallback`, `useActiveWeb3React`, `useContract`, and `useGasPrice` from various React hooks, and `Ask` and `Bid` from a custom `types` file.\n\n3. What happens if the `amount` parameter is not provided in the `SetBidButtonProps`?\n- If the `amount` parameter is not provided, a message is displayed indicating that the amount is required, but no further action is taken.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/SetBidButton.md"}}],["1007",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/SetSaleBid.tsx)\n\nThe `SetSaleBid` component is a React component that allows users to place bids on a particular item in a marketplace. The component imports various functions and hooks from other files in the project, including `useEffect`, `useState`, `CurrencyAmount`, `useActiveWeb3React`, `useApproveCallback`, and others. \n\nThe component takes in several props, including `dropId`, `name`, and `children`. It then uses various hooks to retrieve information about the item being bid on, the user's account and balance, and the current market prices. \n\nThe component renders a form that allows the user to input a bid amount in a specific currency, and then submit the bid. The form includes a dropdown menu that allows the user to select the currency they wish to bid in, and a button that triggers the bid submission process. \n\nThe component also includes several conditional statements that check whether the user has sufficient funds to place the bid, and whether the bid amount meets the minimum bid requirement. If the user does not have sufficient funds or the bid amount is too low, the component displays an error message and disables the bid submission button. \n\nOverall, the `SetSaleBid` component is an important part of the larger marketplace project, as it allows users to place bids on items and participate in the marketplace.\n## Questions: \n 1. What is the purpose of the `SetSaleBid` component?\n- The `SetSaleBid` component is used to allow users to set a bid for a particular item in the market.\n\n2. What external libraries and hooks are being used in this code?\n- The code is using external libraries such as `react`, `@zoolabs/zdk`, and `@lingui/core`. It is also using various hooks such as `useEffect`, `useState`, `useActiveWeb3React`, `useApproveCallback`, `useContract`, `useAsset`, `usePrice`, `useTokenType`, and `useCurrencyBalance`.\n\n3. What is the purpose of the `approvalState` and `approve` variables?\n- The `approvalState` variable is used to keep track of the approval state of a particular currency token. The `approve` variable is a callback function that is used to approve the spending of a particular currency token.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/SetSaleBid.md"}}],["1008",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/SetSaleBidButton.tsx)\n\nThe code is a React component that exports a button component called `SetSaleBidButton`. This button is used to place a bid on a particular item in a marketplace. The component takes in several props, including the `ask` object, which contains information about the item being bid on, such as the amount being asked for, and the `currencyToken`, which is the token being used to make the bid.\n\nThe component first imports several dependencies, including `@headlessui/react`, `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, and several custom hooks and components. It then defines the `SetSaleBidButton` component, which uses the `useActiveWeb3React` hook to get the current user's account, and the `useGasPrice` hook to get the current gas price. It also defines two state variables, `offline` and `offlineSwitch`, which are used to determine whether the user is placing an offline bid.\n\nThe `SetSaleBidButton` component then defines a `setLazyBid` function, which is called when the button is clicked. This function creates a `Bid` object, which contains information about the bid, such as the amount being bid and the bidder's address. It then checks whether the `currencyToken` is the native currency (e.g. ETH), and if so, calls the `setLazyBid` function on the `app` contract with the appropriate parameters. If the `currencyToken` is an ERC-20 token, it calls the `setLazyBidERC20` function instead.\n\nThe component also defines an `useEffect` hook, which is used to determine whether the user is an offline bidder. If the user is an offline bidder, the `offlineSwitch` state variable is set to `true`, and a switch is displayed that allows the user to toggle between online and offline bidding.\n\nFinally, the component returns a button element that displays the text \"Place Offline Bid\" if the user is an offline bidder, and a regular \"Place Bid\" button otherwise. If the user is not allowed to place a bid (e.g. because they do not have enough funds), the button is disabled. When the button is clicked, the `setLazyBid` function is called.\n\nOverall, this component is an important part of the zoo project's marketplace functionality, allowing users to place bids on items using either the native currency or an ERC-20 token. The component also provides a way for users to place offline bids, which can be useful in situations where the user's internet connection is unreliable.\n## Questions: \n 1. What is the purpose of the `SetSaleBidButton` component?\n- The `SetSaleBidButton` component is used to place a bid on a particular item for sale.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including \"@headlessui/react\", \"@heroicons/react/solid\", \"@zoolabs/zdk\", \"react\", \"@lingui/core\", and \"@lingui/macro\".\n\n3. What is the significance of the `offline` state variable and how is it used?\n- The `offline` state variable is used to determine whether the bid should be placed offline or not. It is used to conditionally render the \"Offline\" text in the button text and to display an offline switch if the user is eligible to place offline bids.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/SetSaleBidButton.md"}}],["1009",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/TableCollection/CollectionRow.tsx)\n\nThe `CollectionRow` component is a reusable React component that renders a table row with six columns. The purpose of this component is to provide a consistent layout for displaying data in a table format. The component takes in six optional props (`ColARank`, `ColA`, `ColB`, `ColC`, `ColD`, and `ColE`) that can be used to customize the content of each column. If a prop is not provided, a default value is used.\n\nThe component uses the `tr` and `td` HTML tags to create the table row and columns, respectively. The `className` attribute is used to apply CSS classes to each element, which control the styling of the table. The `flex` class is used to make the first column (`ColARank`) and the second column (`ColA`) appear side-by-side.\n\nHere is an example of how the `CollectionRow` component can be used:\n\n```\nimport CollectionRow from './CollectionRow'\n\nfunction MyTable() {\n return (\n \n \n
\n )\n}\n```\n\nIn this example, the `CollectionRow` component is used to render two rows of data in a table. The `ColARank`, `ColA`, `ColB`, `ColC`, `ColD`, `ColE`, and `ColF` props are used to customize the content of each column. The resulting table will have a consistent layout and styling, making it easier to read and understand the data.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines a React component called `CollectionRow` that renders a table row with cells that can be customized using props.\n\n2. What are the default values for the props used in this component?\n - The default values for the props are: `ColARank` is `'1'`, `ColA` is `'Use Prop \"ColA\" To Change '`, `ColB` is `'Use Prop \"ColB\" To Change '`, `ColC` is `'Use Prop \"ColC\" To Change '`, `ColD` is `'Use Prop \"ColD\" To Change '`, `ColE` is `'Use Prop \"ColC\" To Change'`, and `ColF` is `'Use Prop \"ColF\" To Change'`.\n\n3. What CSS classes are applied to the table cells in this component?\n - The table cells have the following CSS classes applied to them: `text-xs md:text-base text-left`, `bg-[#1F2030]`, `p-4`, `border-b`, and `border-opacity-5`. The first cell in each row also has the additional classes `col-span-2` and `flex`, and the first div inside that cell has the class `w-1/4`.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/TableCollection/CollectionRow.md"}}],["1010",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/TableCollection/CollectionTable.tsx)\n\nThe `CollectionTable` component is a reusable React component that renders a table with customizable column titles. It takes in several props, including `TitleA` through `TitleF`, which are used to set the titles of the corresponding columns in the table. If any of these props are not provided, default titles are used instead. The `TitleMain` prop is used to set the main title of the table, which is rendered above the table itself.\n\nThe component renders a `div` element with a class of `w-full bg-transparent min-h-[800px]`, which sets the width and minimum height of the table. Inside this `div`, there is an `h3` element that displays the `TitleMain` prop. Below this, there is a `table` element with a class of `w-full rounded-2xl p-2`, which sets the width, border radius, and padding of the table.\n\nThe `thead` element contains a single row with seven columns, each of which corresponds to a column in the table. The `th` elements inside each column display the corresponding title, which is either the value of the corresponding prop or a default value if the prop is not provided. The `tbody` element contains the actual content of the table, which is passed in as the `children` prop.\n\nThis component can be used in a larger project whenever a table with customizable column titles is needed. For example, it could be used to display a list of animals in a zoo, with each column representing a different attribute of the animals (e.g. name, species, habitat, etc.). The `CollectionTable` component could be reused throughout the project wherever a similar table is needed, with different props passed in to customize the column titles and content. \n\nExample usage:\n\n```\nimport CollectionTable from './CollectionTable'\n\nconst animals = [\n { name: 'Lion', species: 'Panthera leo', habitat: 'Savannah' },\n { name: 'Giraffe', species: 'Giraffa camelopardalis', habitat: 'Grasslands' },\n { name: 'Elephant', species: 'Loxodonta africana', habitat: 'Forests' },\n // ...\n]\n\nconst AnimalTable = () => {\n return (\n \n {animals.map(animal => (\n \n {animal.name} \n {animal.species} \n {animal.habitat} \n \n ))}\n \n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `CollectionTable` that renders a table with customizable column titles and child elements.\n\n2. What props can be passed to the `CollectionTable` component?\n- The `CollectionTable` component accepts several optional props for customizing the table column titles: `TitleA`, `TitleB`, `TitleC`, `TitleD`, `TitleE`, `TitleF`, and `TitleMain`.\n\n3. What is the styling of the table?\n- The table has a full width, rounded corners, and a minimum height of 800 pixels. The table header has a dark purple background color, and the table cells have white text on a dark background. The first column has a larger left margin and spans two columns.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/TableCollection/CollectionTable.md"}}],["1011",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/TradingHistory/TableRow.tsx)\n\nThe `TableRow` component is a reusable React component that renders a table row with four columns and a copy-to-clipboard button. The component takes four props, `ColA`, `ColB`, `ColC`, and `ColD`, which are used to populate the text content of the four columns. If any of these props are not provided, default values are used instead.\n\nThe first column of the table row contains an image of a checkmark and the text content of `ColA`. The second, third, and fourth columns contain the text content of `ColB`, `ColC`, and `ColD`, respectively. The fifth column contains a copy-to-clipboard button that, when clicked, copies the text content of `ColD` to the user's clipboard and displays a checkmark icon to indicate that the copy was successful.\n\nThe `TableRow` component uses the `useState` hook to manage the state of the `copied` variable, which is initially set to `false`. When the copy-to-clipboard button is clicked, the `copyToClipboard` function is called, which uses the `navigator.clipboard.writeText` method to write the text content of `ColD` to the user's clipboard. The `copied` variable is then set to `true`, which triggers a re-render of the component. During this re-render, the checkmark icon is displayed instead of the copy-to-clipboard icon.\n\nThe `TableRow` component also uses the `useEffect` hook to reset the `copied` variable to `false` after two seconds have elapsed since the copy-to-clipboard button was clicked. This ensures that the checkmark icon is only displayed briefly to indicate that the copy was successful, and then reverts back to the copy-to-clipboard icon.\n\nThis component can be used in any React project that requires a table with copy-to-clipboard functionality. It is highly customizable, as the text content of each column can be easily changed by passing in different props. Additionally, the styling of the component can be customized by modifying the CSS classes applied to each column. Here is an example of how the `TableRow` component can be used in a larger project:\n\n```\nimport TableRow from './TableRow'\n\nconst MyTable = () => {\n return (\n \n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `TableRow` component?\n- The `TableRow` component is used to render a table row with four columns and a copy-to-clipboard button.\n\n2. What is the significance of the `copied` state variable?\n- The `copied` state variable is used to keep track of whether the value in the fourth column has been copied to the clipboard or not.\n\n3. What is the purpose of the `useEffect` hook in this component?\n- The `useEffect` hook is used to reset the `copied` state variable to `false` after 2 seconds if it has been set to `true`. This is done to remove the \"copied\" checkmark icon after it has been displayed for a short period of time.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/TradingHistory/TableRow.md"}}],["1012",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/TradingHistory/Trading.tsx)\n\nThe code defines a React component called `Trading` that renders a table with a specific style. The table is created using the `styled-components` library, which allows the developer to write CSS code inside the JavaScript file. The `TableContainer` constant is a styled `table` element that defines the table's appearance. It has a minimum width of 350 pixels, and the cells in the table body have a bottom border of 0.5 pixels in white with 60% opacity.\n\nThe `Trading` component takes several props that allow the developer to customize the table's header and title. The component renders a `div` element with a white text title that can be customized using the `TitleMain` prop. The table's header has four columns with titles that can be customized using the `TitleA`, `TitleB`, `TitleC`, and `TitleD` props. The table body is rendered using the `children` prop, which is a special prop that allows the component to render any content passed to it between its opening and closing tags.\n\nThe `Trading` component uses CSS to style the table's borders and corners. The first column of each row has a left border of 1 pixel in a dark color. The top-left, top-right, bottom-left, and bottom-right corners of the table have a border radius of 15 pixels, giving the table a rounded appearance.\n\nThis component can be used in a larger project that requires a table with a specific style. The `Trading` component can be imported into other React components and used like any other React component. For example, a financial dashboard application could use the `Trading` component to display stock prices or other financial data in a table format. The `Trading` component's props can be customized to display the appropriate data and column titles.\n## Questions: \n 1. What is the purpose of the `Trading` component?\n- The `Trading` component is a React component that renders a table with customizable titles for each column.\n\n2. What is the purpose of the `TableContainer` styled component?\n- The `TableContainer` styled component is used to style the table element with specific CSS rules, such as border spacing, border radius, and background color.\n\n3. What are the default values for the `TitleA`, `TitleB`, `TitleC`, `TitleD`, and `TitleMain` props?\n- The default values for the `TitleA`, `TitleB`, `TitleC`, `TitleD`, and `TitleMain` props are provided as strings in the component definition. If these props are not passed in when the component is used, these default values will be displayed in the table.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/TradingHistory/Trading.md"}}],["1013",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/WalletNav/WalletNav.tsx)\n\nThe code above is a simple React functional component called `WalletNav`. Its purpose is to render a navigation bar for a wallet feature in the larger project. \n\nThe `import` statement at the beginning of the code imports the React library, which is necessary for creating React components. \n\nThe `WalletNav` function returns a simple `div` element with the text \"WalletNav\" inside. This will be rendered as the navigation bar for the wallet feature. \n\nThe `export default` statement at the end of the code exports the `WalletNav` component so that it can be imported and used in other parts of the project. \n\nHere is an example of how this component might be used in another file within the project:\n\n```\nimport React from 'react'\nimport WalletNav from './WalletNav'\n\nconst WalletPage = () => {\n return (\n \n \n
\n )\n}\n```\n\nIn this example, the `Table` component maintains the state of the sorting order and the data to be sorted. The `SortButton` component is rendered in the header of the table column that can be sorted. When the button is clicked, the `toggleSortOrder` function is called, which updates the state and triggers a re-sorting of the data. The sorted data is then rendered in the table rows.\n## Questions: \n 1. What is the purpose of the `FilterWrapper` component?\n- The `FilterWrapper` component is a styled div that provides padding, border radius, and hover effects. It also prevents user selection and applies the same style to its child elements.\n\n2. What does the `SortButton` component do?\n- The `SortButton` component is a functional component that renders a `FilterWrapper` with a text content of either '↑' or '↓' depending on the value of the `ascending` prop. It also accepts a `toggleSortOrder` function as a prop that is called when the component is clicked.\n\n3. What external libraries are being used in this file?\n- This file is using two external libraries: `React` and `styled-components`. `React` is used to define and render the components, while `styled-components` is used to create the `FilterWrapper` component with custom styles.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/BridgeSearchModal/SortButton.md"}}],["1022",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/sorting.ts)\n\nThis code defines a set of functions that are used to compare and sort tokens based on their balances and symbols. The functions are used in the larger project to display a list of tokens in a dropdown menu, with the most relevant tokens appearing at the top of the list.\n\nThe `balanceComparator` function takes two token amounts as input and returns a number that indicates which token has the higher balance. If both balances are defined, the function compares them and returns -1 if the first balance is higher, 0 if they are equal, and 1 if the second balance is higher. If only one balance is defined and it is greater than 0, the function returns -1 or 1 depending on which balance is defined. If neither balance is defined or they are both 0, the function returns 0.\n\nThe `getTokenComparator` function takes an array of token balances as input and returns a function that can be used to sort tokens based on their balances and symbols. The function first sorts the tokens by their balances using the `balanceComparator` function. If the balances are equal, the function sorts the tokens by their symbols in alphabetical order. If one or both tokens do not have a symbol, they are sorted to the end of the list.\n\nThe `useTokenComparator` function is a React hook that takes a boolean value as input and returns a function that can be used to sort tokens. The function first calls the `useAllTokenBalances` hook to get an array of token balances. It then calls the `getTokenComparator` function to get a comparator function based on the balances. If the input boolean value is true, the function returns a comparator function that sorts tokens in reverse order. Otherwise, it returns the original comparator function.\n\nHere is an example of how the `useTokenComparator` function might be used in the larger project:\n\n```jsx\nimport { useTokenComparator } from 'zoo'\n\nfunction TokenSelect({ tokens }) {\n const tokenComparator = useTokenComparator(false)\n\n return (\n \n )\n}\n```\n\nIn this example, the `TokenSelect` component takes an array of tokens as input and uses the `useTokenComparator` hook to get a comparator function. It then sorts the tokens using the comparator function and renders them in a dropdown menu. The most relevant tokens will appear at the top of the list based on their balances and symbols.\n## Questions: \n 1. What is the purpose of the `useTokenComparator` function?\n- The `useTokenComparator` function returns a comparator function that can be used to sort an array of `Token` objects based on their balances and symbols.\n\n2. What is the `balanceComparator` function used for?\n- The `balanceComparator` function is used to compare two token amounts with the highest one coming first, and is used as part of the `getTokenComparator` function.\n\n3. What is the significance of the `inverted` parameter in the `useTokenComparator` function?\n- The `inverted` parameter determines whether the comparator function should sort in ascending or descending order, and is used to reverse the order of the sorting if `inverted` is `true`.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/BridgeSearchModal/sorting.md"}}],["1023",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/styleds.tsx)\n\nThis file contains a set of styled components that can be used to create various UI elements in the larger project. The purpose of this code is to provide a consistent and reusable set of styles for different components across the project. \n\nThe `ModalInfo` component is a container that centers its child elements and provides padding and margin. It can be used to display information in a modal dialog box. \n\nThe `TextDot` component is a small dot with a height and width of 3 pixels and a border radius of 50%. It can be used as a bullet point or to indicate a selected item. \n\nThe `FadedSpan` component is a text element with a font size of 14 pixels. It can be used to display text that is less important than other content on the page. \n\nThe `Checkbox` component is an input element styled to have a height of 20 pixels and no margin. It can be used to create checkboxes in forms. \n\nThe `PaddedColumn` component is a container with 20 pixels of padding. It can be used to create columns of content with consistent spacing. \n\nThe `MenuItem` component is a container with a height of 56 pixels and a grid layout that can be used to display menu items. It has four columns, with the second column taking up the remaining space. \n\nThe `SearchInput` component is an input element styled to have a padding of 16 pixels and a border radius of 10 pixels. It can be used to create search bars or input fields. \n\nThe `Separator` and `SeparatorDark` components are horizontal lines with a height of 1 pixel. They can be used to separate content on a page. \n\nOverall, this file provides a set of reusable styled components that can be used to create consistent UI elements across the project. By using these components, developers can save time and ensure that the project has a consistent look and feel. \n\nExample usage:\n\n```\nimport { ModalInfo, TextDot, Checkbox } from 'zoo'\n\nconst MyComponent = () => {\n return (\n \n \n )\n}\n```\n## Questions: \n 1. What is the purpose of this code file?\n- This code file contains styled components for various UI elements used in the zoo project.\n\n2. What is the difference between `Separator` and `SeparatorDark` components?\n- Both components are used to create a horizontal line, but `SeparatorDark` likely has a darker color scheme compared to `Separator`.\n\n3. What is the purpose of the `MenuItem` component?\n- The `MenuItem` component is used to create a clickable menu item with a specific layout using CSS grid.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/BridgeSearchModal/styleds.md"}}],["1024",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/CastVoteModal/index.tsx)\n\nThe `CastVoteModal` component is a React component that renders a modal for confirming a vote on a proposal. It imports various hooks and components from the project's codebase and uses them to display information about the vote and allow the user to confirm or cancel their vote.\n\nThe component takes in several props, including the type of vote (approve or disapprove), a function to vote on the proposal, the user's voting power, and the number of approvals and disapprovals for the proposal. It also uses the `useSelector` hook to access the user's Zoo balance and the `useActiveWeb3React` hook to get the user's account.\n\nThe component renders a modal with information about the vote, including the user's voting power, the number of approvals and disapprovals, and the amount of Zoo required to vote. If the user has enough voting power, they can confirm their vote by clicking a button. If they do not have enough voting power, they must first approve the contract to spend their Zoo tokens on their behalf. The component uses the `useVotingApproveCallback` hook to handle this approval process.\n\nThe `CastVoteModal` component is used in the larger project to allow users to vote on proposals in the Zoo ecosystem. It provides a user-friendly interface for confirming votes and handles the approval process for spending Zoo tokens. The component can be easily customized to fit the project's design and functionality needs. \n\nExample usage:\n\n```jsx\n\n```\n## Questions: \n 1. What does this code do?\n- This code defines a React component called `CastVoteModal` that renders a modal for confirming a vote on a proposal. It uses various hooks and selectors to retrieve data from the application state and the blockchain.\n\n2. What external dependencies does this code have?\n- This code imports several modules from external packages, including `React`, `next/link`, `react-redux`, and `components/Modal`. It also imports several custom hooks from the `state/application/hooks`, `hooks/useTokenAllowance`, `hooks/useApproveCallback`, and `hooks/useZooVoting` modules.\n\n3. What props does the `CastVoteModal` component expect?\n- The `CastVoteModal` component expects several props to be passed to it, including `vote`, `voteProposal`, `votingPower`, `approvedCount`, and `disapprovedCount`. These props are used to populate the modal with information about the vote being cast and the user's available voting power.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/CastVoteModal/index.md"}}],["1025",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/CountdownModal./index.tsx)\n\nThe `CooldownModal` component is a React functional component that displays a modal window with information about the cooldown time for breeding animals in the Zoo project. The component imports several modules from the project, including `React`, `ApplicationModal`, `useCountdownToggle`, `useModalOpen`, `Modal`, `BidModalHeader`, `MyNFT`, `ModalHeader`, and `Image`. \n\nThe component takes no props and returns a JSX element that renders a modal window with a header, an image, and some text. The header contains a close button that dismisses the modal window. The image is a snowflake icon that is displayed at the top of the modal window. The text explains that the cooldown time for breeding animals is 24 hours and that the cooldown helps protect the animals from Lorem. The text also displays a countdown timer that shows the remaining time until the next breeding opportunity. The timer is displayed in the format of hours:minutes:seconds. \n\nThe `CooldownModal` component is used in the larger Zoo project to provide users with information about the cooldown time for breeding animals. When a user attempts to breed an animal, the `CooldownModal` component is displayed to inform the user of the cooldown time and to provide a countdown timer that shows the remaining time until the next breeding opportunity. The component is also used to protect the animals from Lorem by enforcing a cooldown period between breeding attempts. \n\nHere is an example of how the `CooldownModal` component might be used in the Zoo project:\n\n```jsx\nimport CooldownModal from \"components/CooldownModal\";\n\nfunction BreedAnimal() {\n const [showModal, setShowModal] = useState(false);\n\n function handleBreed() {\n // perform breeding logic\n setShowModal(true);\n }\n\n return (\n <>\n \n {showModal && setSelectedBase(currency)}\n/>\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code exports a React component called `CommonBases` that displays a list of commonly paired tokens for a given `chainId`. It allows the user to select a token from the list and calls the `onSelect` function with the selected token.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `@zoolabs/zdk`, `react`, and various components from the `../../components` directory.\n\n3. What is the significance of the `COMMON_BASES` constant and how is it used in this code?\n- The `COMMON_BASES` constant is a configuration object that maps `chainId` values to arrays of `Currency` objects. It is used in this code to determine which tokens to display in the list based on the `chainId` prop passed to the `CommonBases` component. If `chainId` is not defined, an empty array is used instead.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/SearchModal/CommonBases.md"}}],["1037",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/SearchModal/CurrencyList.tsx)\n\nThe code is a React component that renders a list of currencies. It imports various components and hooks from the project's codebase and external libraries. The component takes in several props, including an array of currencies to display, a selected currency, and a callback function to handle currency selection. \n\nThe component renders a list of currencies using the `FixedSizeList` component from the `react-window` library. Each currency is rendered as a `CurrencyRow` component, which displays the currency's logo, symbol, name, and balance. The `CurrencyRow` component also displays tags associated with the currency, such as whether it was added by the user or is part of an inactive token list. \n\nThe component also includes a `BreakLineComponent` that is rendered between the list of currencies and any inactive token lists. The `BreakLineComponent` displays a message indicating that the following tokens are from inactive lists and provides a tooltip with more information. \n\nThe `CurrencyList` component is used in other parts of the project to display a list of currencies, such as in a dropdown menu for selecting a currency to trade. The component can be customized with various props to control its behavior and appearance. \n\nExample usage:\n\n```\nimport { CurrencyList } from \"@zoolabs/zdk\";\n\nfunction MyComponent() {\n const currencies = [/* array of Currency objects */];\n const [selectedCurrency, setSelectedCurrency] = useState(null);\n\n function handleCurrencySelect(currency) {\n setSelectedCurrency(currency);\n }\n\n return (\n console.log(\"Option clicked\")}\n color=\"#FF0000\"\n header=\"Home\"\n subheader=\"Go to the homepage\"\n icon=\"/icons/home.svg\"\n active={false}\n id=\"home-option\"\n/>\n```\n## Questions: \n 1. What is the purpose of this code and where is it used in the zoo project?\n- This code defines a React component called `Option` that renders a clickable option with an icon, header, and subheader. It can be used in various parts of the zoo project where such options are needed.\n\n2. What are the required and optional props for the `Option` component?\n- The required props are `color`, `header`, `icon`, and `id`. The optional props are `link`, `clickable`, `size`, `onClick`, `subheader`, and `active`.\n\n3. What is the significance of the `active` prop and how does it affect the rendering of the `Option` component?\n- The `active` prop determines whether the option is currently selected or not. If it is `true`, the option is rendered with a gradient background and a colored dot next to the header. If it is `false` or not provided, the option is rendered with a dark background and no dot.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/WalletModal/Option.md"}}],["1053",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/WalletModal/PendingView.tsx)\n\nThe code above is a React component called `PendingView` that renders a view for when a user is waiting for a wallet connection to be established. The component takes in several props, including `connector`, `error`, `setPendingError`, and `tryActivation`. \n\nThe `connector` prop is an instance of an `AbstractConnector` class from the `@web3-react/abstract-connector` library. The `error` prop is a boolean that indicates whether there was an error connecting to the wallet. The `setPendingError` prop is a function that sets the `error` prop to `true` or `false`. The `tryActivation` prop is a function that attempts to activate the `connector`.\n\nThe component first checks if the user is using the MetaMask wallet by checking if `window.ethereum.isMetaMask` is truthy. It then renders a loading indicator using the `Dots` component from `../../components/Dots` if there is no error, or an error message with a \"Try Again\" button if there is an error. Clicking the \"Try Again\" button calls the `tryActivation` function with the `connector` prop.\n\nThe component then maps over an object called `SUPPORTED_WALLETS` from `../../config/wallets` and renders an `Option` component for each supported wallet. The `Option` component displays information about the wallet, including its name, description, and icon. If the `connector` prop matches the `connector` property of the current wallet option, the `Option` component is rendered. If not, `null` is returned.\n\nThis component is likely used in a larger project that involves connecting to a user's wallet to interact with a blockchain. It provides a user-friendly interface for waiting for the wallet connection to be established and displays information about the supported wallets. An example usage of this component might look like:\n\n```\nimport PendingView from './PendingView'\n\nfunction WalletConnection() {\n const [connector, setConnector] = useState(null)\n const [error, setError] = useState(false)\n\n const handleActivation = useCallback(async (connector) => {\n try {\n await activate(connector)\n setConnector(connector)\n } catch (error) {\n setError(true)\n }\n }, [])\n\n return (\n {metadata.name} \n \n \n \n \n \n \n \n {/* Your component code here */}\n \n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n This code sets up an ApolloClient to interact with different subgraphs based on the current chain ID, and provides a SubgraphProvider component for use in a React application.\n\n2. What are the different subgraph endpoints being used?\n The code uses three different subgraph endpoints: SUBGRAPH_LOCALHOST for the Hardhat development environment, SUBGRAPH_RINKEBY for the Rinkeby testnet, and SUBGRAPH_MAINNET for the Binance Smart Chain mainnet.\n\n3. What is the fallback client used for?\n The fallbackClient is used when the current environment is not development and the current chain ID is not Rinkeby. It defaults to the Hardhat client for development and the Rinkeby client for other environments.","metadata":{"source":".autodoc/docs/markdown/core/src/providers/SubgraphProvider.md"}}],["1120",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/sections/my-nft/AllMyNfts.tsx)\n\nThis code defines a React component called `AllMyNfts` that renders a section of a web page displaying a user's NFTs (non-fungible tokens). The component imports the `React` library and the `Image` component from the `next/image` module. \n\nThe `AllMyNfts` component returns a `div` element with a class of `allMyNfts` that contains a heading and a `div` element with a class of `allMyNfts__items`. The heading displays the text \"All My Nfts\" and is styled with CSS classes for font size, font weight, and letter spacing. The `allMyNfts__items` `div` contains four `div` elements with classes of `allMyNfts__item`. Each of these `div` elements displays an NFT image and is styled with CSS classes for size, border, and spacing.\n\nThe `Image` component is used to display the NFT images. It takes several props, including the `src` prop, which specifies the image file to display, and the `width` and `height` props, which specify the dimensions of the image. In this code, the `src` prop is set to a string that specifies the file path of each NFT image, and the `width` and `height` props are set to fixed values.\n\nThis component can be used in a larger project that involves displaying a user's NFT collection. It can be customized by changing the text of the heading and the image files and dimensions. For example, if the project involves displaying a user's artwork collection, the `AllMyNfts` component can be modified to display images of the artwork instead of NFTs. \n\nExample usage:\n\n```\nimport AllMyNfts from \"./AllMyNfts\";\n\nfunction App() {\n return (\n ` object as an argument and returns a Promise that resolves to a transaction object.\n\nThe `useBentoBoxTrait` hook is used to add the BentoBox trait to strategies that have BentoBox as their output. The trait is used to handle approvals for spending tokens when unzapping. The hook is exported as a default export from the file and can be used in other files in the project.\n\nExample usage:\n\n```jsx\nimport useBentoBoxTrait from './useBentoBoxTrait'\n\nconst MyStrategy = (props) => {\n const { ... } = useBentoBoxTrait(props)\n\n // use the trait properties and methods here\n\n return (\n // ...\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `useBentoBoxTrait` function?\n- The `useBentoBoxTrait` function is a hook that adds a trait to strategies that have BentoBox as their output, allowing them to batch execute with permit if one is provided or else execute normally.\n\n2. What is the `bentoApproveCallback` variable used for?\n- The `bentoApproveCallback` variable is used to create a callback function that approves the Inari Master Contract and sets the BentoBox approval for the current user.\n\n3. What is the difference between `execute` and `batchExecute`?\n- `execute` is a function that executes a strategy normally, while `batchExecute` is a function that batches the execution with permit if one is provided or else executes normally. `batchExecute` is used when unzapping from BentoBox.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/traits/useBentoBoxTrait.md"}}],["1183",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/traits/useHasPermitTokenTrait.ts)\n\nThe code defines a React hook called `useHasPermitTokenTrait` that can be used in conjunction with other hooks and traits to create a strategy for interacting with a smart contract. The hook takes in a `BaseStrategyHook` object as a parameter and returns a new object that includes the properties of both `BaseStrategyHook` and `BaseTrait`. \n\nThe purpose of this hook is to enable batched transactions with a permit token, which is a type of token that allows a smart contract to spend a certain amount of tokens on behalf of the token owner without requiring an explicit approval transaction. The hook uses several other hooks and functions to achieve this functionality. \n\nFirst, it imports `CurrencyAmount` and `Token` from the `@zoolabs/zdk` library, which are used to represent amounts of tokens and token objects, respectively. It also imports several other hooks and traits from other files in the project, including `useActiveWeb3React`, `useInariContract`, `useTrait`, and `useDerivedInariState`. \n\nThe `useActiveWeb3React` hook provides access to the current user's Ethereum account and network information, while `useInariContract` returns a reference to the Inari Master Contract, which is a smart contract used in the larger project. `useTrait` is a custom hook that returns a new object with properties from both the input object and a configuration object, while `useDerivedInariState` is another custom hook that returns a derived state object based on other state variables. \n\nThe hook also imports `useERC20Permit` and `useTransactionAdder` from other files in the project. `useERC20Permit` is a custom hook that returns an object with signature data and a function to gather a permit signature for a given token, while `useTransactionAdder` is a hook that adds a new transaction to a transaction queue. \n\nThe `TRAIT_CONFIG` object is defined with two properties, `overrides`, which is an array of strings representing the names of methods to override, and `execute`, which is a function that executes a batched transaction with a permit token if one is provided, or else executes a normal transaction. \n\nThe `useHasPermitTokenTrait` function returns a new object that includes the properties of both `BaseStrategyHook` and `BaseTrait`, as well as two new properties, `approveCallback` and `execute`. The `approveCallback` property is an array that includes the first element of the `BaseStrategyHook` object's `approveCallback` property and either the `gatherPermitSignature` function or the second element of the `BaseStrategyHook` object's `approveCallback` property, depending on whether a permit signature is available. The `execute` property is a function that calls the `batchExecute` function if a permit signature is available, or else calls the `execute` function from the input `BaseStrategyHook` object. \n\nOverall, this code defines a hook that can be used to create a strategy for interacting with a smart contract that supports batched transactions with a permit token. The hook uses several other hooks and functions from the larger project to achieve this functionality.\n## Questions: \n 1. What is the purpose of the `useHasPermitTokenTrait` hook?\n- The `useHasPermitTokenTrait` hook is used as a `BaseStrategy` when the `outputToken` allows for a batched `permitToken`.\n\n2. What is the purpose of the `batchExecute` function?\n- The `batchExecute` function is used to execute a batch transaction with permit if one is provided or else execute normally.\n\n3. What is the purpose of the `gatherPermitSignature` function?\n- The `gatherPermitSignature` function is used to gather the permit signature for the `inputValue` and `inariContract` address.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/traits/useHasPermitTokenTrait.md"}}],["1184",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/traits/useTrait.ts)\n\nThe code above defines a custom React hook called `useTrait`. This hook is designed to be used as a base trait hook for other hooks in the larger project. \n\nThe `useTrait` hook takes two arguments: `props` and an object containing an array of `overrides`. The `props` argument is an object that contains the properties that will be used by the hook. The `overrides` argument is an array of strings that represent the properties that can be overridden by other traits.\n\nThe hook uses the `useEffect` hook to check for any conflicts between the `overrides` array and the `props.overrides` array. If there are any conflicts, an error is thrown with a message that lists the conflicting properties.\n\nThe hook then uses the `useMemo` hook to return a new object that combines the original `props` object with the `overrides` array. This new object is then returned by the `useTrait` hook.\n\nThis hook can be used as a base trait hook for other hooks in the larger project. For example, a hook that adds a hover effect to a component could use the `useTrait` hook to ensure that it doesn't conflict with other hooks that may also modify the hover effect. \n\nHere is an example of how the `useTrait` hook could be used in a larger project:\n\n```\nimport useTrait from './useTrait'\n\nconst useHoverEffect = (props) => {\n const { overrides } = useTrait(props, { overrides: ['hover'] })\n\n // Add hover effect logic here\n\n return {\n ...overrides,\n }\n}\n\nexport default useHoverEffect\n```\n\nIn this example, the `useHoverEffect` hook uses the `useTrait` hook to ensure that it doesn't conflict with other hooks that may also modify the hover effect. The `overrides` object returned by the `useTrait` hook is then spread into the return object of the `useHoverEffect` hook.\n## Questions: \n 1. What is the purpose of the `BaseTrait` interface?\n - The `BaseTrait` interface defines a property called `overrides` that can be used by components that use the `useTrait` hook.\n\n2. What is the purpose of the `useTrait` hook?\n - The `useTrait` hook checks for conflicts between different trait overrides and returns a memoized object that includes the original `props` and the `overrides` array.\n\n3. What is the significance of the `overrides` array in the `useTrait` hook?\n - The `overrides` array is used to specify which properties of the `props` object should be overridden by the component that uses the `useTrait` hook. It is also used to check for conflicts between different trait overrides.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/traits/useTrait.md"}}],["1185",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/types.ts)\n\nThis code defines various interfaces and types related to the Inari project's strategies for swapping tokens. The `import` statements bring in necessary dependencies from the `@zoolabs/zdk` library and other files in the project. \n\nThe `Strategy` interface defines the structure of a strategy object, which includes an ID, general information about the strategy, and definitions of the input and output tokens. The `StrategyGeneralInfo` interface provides more specific information about the strategy, such as its name, description, and symbols for the input and output tokens. The `StrategyToken` interface defines the properties of a token, including its chain ID, address, decimals, and symbol. \n\nThe `StrategyBalances` interface defines the structure of an object that holds the balances of the input and output tokens for a given strategy. \n\nThe `StrategyHook` type is a union of three other types, each of which represents a different hook that can be used in a strategy. These hooks provide additional functionality for interacting with the BentoBox and permit tokens. \n\nThe `InariState` interface defines the structure of the state object for the Inari project, which includes information about the current strategy, whether the user is zapping in or out, and the input and output values. The `DerivedInariState` interface extends `InariState` and adds derived properties for the input and output token amounts and token objects. \n\nOverall, this code provides a foundation for defining and managing the state and functionality of the Inari project's token swapping strategies. It can be used in conjunction with other files and modules in the project to implement the actual swapping logic and user interface. \n\nExample usage:\n```typescript\nconst strategy: Strategy = {\n id: 'my-strategy',\n general: {\n name: 'My Strategy',\n steps: ['Step 1', 'Step 2'],\n zapMethod: 'zap',\n unzapMethod: 'unzap',\n description: 'A custom strategy for swapping tokens',\n inputSymbol: 'ETH',\n outputSymbol: 'USDC'\n },\n tokenDefinitions: {\n inputToken: {\n chainId: ChainId.MAINNET,\n address: '0x123abc',\n decimals: 18,\n symbol: 'ETH'\n },\n outputToken: {\n chainId: ChainId.MAINNET,\n address: '0x456def',\n decimals: 6,\n symbol: 'USDC'\n }\n }\n}\n\nconst balances: StrategyBalances = {\n inputTokenBalance: CurrencyAmount.fromRawAmount(strategy.tokenDefinitions.inputToken, '1'),\n outputTokenBalance: CurrencyAmount.fromRawAmount(strategy.tokenDefinitions.outputToken, '100')\n}\n\nconst inariState: InariState = {\n id: 'my-state',\n zapIn: true,\n inputValue: '0.5',\n outputValue: '50',\n general: strategy.general,\n tokens: strategy.tokenDefinitions\n}\n\nconst derivedState: DerivedInariState = {\n ...inariState,\n inputValue: CurrencyAmount.fromRawAmount(strategy.tokenDefinitions.inputToken, inariState.inputValue),\n outputValue: CurrencyAmount.fromRawAmount(strategy.tokenDefinitions.outputToken, inariState.outputValue),\n tokens: {\n inputToken: new Token(strategy.tokenDefinitions.inputToken.chainId, strategy.tokenDefinitions.inputToken.address, strategy.tokenDefinitions.inputToken.decimals, strategy.tokenDefinitions.inputToken.symbol),\n outputToken: new Token(strategy.tokenDefinitions.outputToken.chainId, strategy.tokenDefinitions.outputToken.address, strategy.tokenDefinitions.outputToken.decimals, strategy.tokenDefinitions.outputToken.symbol)\n }\n}\n```\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code defines interfaces and types related to a strategy for swapping tokens, as well as state interfaces for an Inari app. It likely solves the problem of providing a standardized way to define and interact with token swapping strategies.\n\n2. What are the dependencies of this code and where can they be found?\n- This code imports several dependencies from the `@zoolabs/zdk` package, as well as several other modules within the `zoo` project. The specific locations of these dependencies would need to be determined by examining the project's file structure.\n\n3. What is the difference between `Strategy` and `DerivedInariState`?\n- `Strategy` defines the structure of a token swapping strategy, including general information about the strategy and definitions of the input and output tokens. `DerivedInariState` extends `InariState` and adds additional derived properties, including `inputValue` and `outputValue` as `CurrencyAmount` types and `inputToken` and `outputToken` as `Token` types.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/types.md"}}],["1186",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/index.ts)\n\nThis code is responsible for creating and configuring a Redux store for the zoo project. It uses the `configureStore` function from the `@reduxjs/toolkit` package to create the store, and `persistReducer` and `persistStore` from the `redux-persist` package to persist the store's state across sessions.\n\nThe `makeStore` function creates the store with the persisted reducer and middleware that enables the use of asynchronous actions (thunks). It also sets up the store to use the `devTools` extension in development mode.\n\nThe `getOrCreateStore` function is used to retrieve the store instance, creating it if it doesn't exist. It checks if the store already exists and returns it if it does. If a preloaded state is provided, it merges it with the current state in the store and creates a new store. This is useful for server-side rendering (SSR) and static site generation (SSG) where the initial state is provided by the server. If the code is running in the client, it creates the store once and returns it.\n\nThe `store` variable is initialized with the result of calling `getOrCreateStore()`, which ensures that the store is created and persisted before it is used.\n\nThe `persistConfig` object defines the configuration for persisting the store's state. It specifies the `key` to use for the persisted state, the `whitelist` of keys to persist, and the `storage` engine to use (in this case, `localStorage`).\n\nThe `PERSISTED_KEYS` array contains the keys of the state slices that should be persisted. This array is used in the `persistConfig` object.\n\nThe `AppState` and `AppDispatch` types are defined as the return types of `store.getState()` and `store.dispatch()`, respectively. The `AppThunk` type is a generic type that represents a thunk action that returns a value of type `ReturnType` and has access to the `AppState` and `Action` types.\n\nThe `persistor` variable is initialized with the result of calling `persistStore(store)`, which returns a persistor object that can be used to rehydrate the store's state.\n\nOverall, this code sets up a Redux store with persistence and middleware for asynchronous actions, and provides functions for retrieving and using the store instance. It is a crucial part of the zoo project's state management and enables the use of Redux for predictable and scalable state management. \n\nExample usage:\n\n```javascript\nimport { useDispatch, useSelector } from 'react-redux'\nimport { AppDispatch, AppState } from './store'\n\nfunction MyComponent() {\n const dispatch: AppDispatch = useDispatch()\n const user = useSelector((state: AppState) => state.user)\n\n useEffect(() => {\n dispatch(fetchUser())\n }, [dispatch])\n\n return ` object, and `error`, which is a string or undefined. The `parsedAmount` property is derived based on the input and other parameters, while the `error` property is set to a string if there is an error with the input or if the user is not connected to a wallet.","metadata":{"source":".autodoc/docs/markdown/core/src/state/stake/hook.md"}}],["1208",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/store/actions.ts)\n\nThis code is a module that exports several Redux actions related to managing a shopping cart and products. The `createAction` function from the `@reduxjs/toolkit` library is used to create each action, which is essentially an object with a `type` property and a `payload` property. The `type` property is a string that identifies the action, while the `payload` property contains the data associated with the action.\n\nThe `getCartItems` action returns an array of `CartItem` objects, which likely represent items in the user's shopping cart. The `clearCartItems` action does not have a payload and is likely used to empty the user's cart. The `addCartItem` action takes a single `CartItem` object as its payload and is used to add an item to the cart. The `updateCartItem` action also takes a `CartItem` object as its payload and is used to update an existing item in the cart. The `removeCartItem` action takes a string (likely an ID) as its payload and is used to remove an item from the cart.\n\nThe `getProducts` action returns an array of `Product` objects, which likely represent items available for purchase in the store. It is not clear from this code how the products are obtained or managed, but it is likely that they are stored in a separate Redux slice or fetched from an API.\n\nThese actions can be used in conjunction with a Redux store and reducers to manage the state of the shopping cart and products in a larger e-commerce application. For example, a `cart` reducer could handle the `addCartItem`, `updateCartItem`, and `removeCartItem` actions to update the cart state, while a `product` reducer could handle the `getProducts` action to update the available products state. The `getCartItems` action could be used to retrieve the current cart state from the store and display it to the user, while the `clearCartItems` action could be triggered when the user completes their purchase. Overall, this code provides a simple and standardized way to manage shopping cart and product-related actions in a Redux-based e-commerce application.\n## Questions: \n 1. What is the purpose of this code?\n- This code exports several Redux actions related to managing a shopping cart and retrieving products.\n\n2. What are the types `CartItem` and `Product`?\n- These types are likely defined in separate files and imported into this module. They likely represent the shape of data for items in a shopping cart and products available for purchase.\n\n3. How are these actions used in the application?\n- This code only defines the actions, so a smart developer may want to look for where these actions are dispatched and handled in the application's Redux store and UI components.","metadata":{"source":".autodoc/docs/markdown/core/src/state/store/actions.md"}}],["1209",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/store/hooks.tsx)\n\nThe code above is a module that exports two functions: `useCart` and `useAllProducts`. It also imports several dependencies such as `useAppDispatch`, `useAppSelector`, `useCallback`, `useMemo`, `useState`, `useSelector`, `useDispatch`, `toast`, `CartItem`, `db`, `collection`, `getDoc`, `getDocs`, `limit`, `orderBy`, `query`, and `where`.\n\nThe `useCart` function returns an array of four functions that can be used to interact with the shopping cart. These functions are `addToCart`, `removeFromCart`, `updateCart`, and `clearCart`. The `addToCart` function takes a `CartItem` object as an argument and dispatches an `addCartItem` action to the Redux store. The `removeFromCart` function takes an `id` string as an argument and dispatches a `removeCartItem` action to the Redux store. The `updateCart` function takes a `CartItem` object as an argument and dispatches an `updateCartItem` action to the Redux store. The `clearCart` function dispatches a `clearCartItems` action to the Redux store.\n\nThe `useAllProducts` function returns a function that can be used to retrieve all the products from the Firebase Firestore database. This function takes four optional arguments: `startDate`, `endDate`, `noLimit`, and `callback`. The `startDate` and `endDate` arguments are strings that represent the start and end dates of the products to retrieve. The `noLimit` argument is a boolean that determines whether to limit the number of products retrieved. The `callback` argument is a function that is called with the retrieved products as an argument. If the `callback` argument is not provided, the retrieved products are dispatched to the Redux store using the `getProducts` action.\n\nOverall, this module provides functions that can be used to interact with the shopping cart and retrieve products from the database. These functions can be used in other parts of the project to implement shopping cart functionality and display product information. For example, the `useCart` functions can be used in a shopping cart component to add, remove, update, and clear items from the cart. The `useAllProducts` function can be used in a product listing component to retrieve and display all the available products.\n## Questions: \n 1. What is the purpose of the `useCart` function and what does it return?\n- The `useCart` function returns an array of functions that allow for adding, removing, updating, and clearing items in a cart. It is likely used in a shopping cart feature of the application.\n\n2. What is the purpose of the `useAllProducts` function and what parameters does it take?\n- The `useAllProducts` function returns a function that retrieves all products from a Firebase database and either dispatches an action to update the Redux store or calls a callback function with the retrieved products. It takes optional parameters for filtering the products by date range and limiting the number of results.\n\n3. What is the purpose of the `notify` function and how is it used?\n- The `notify` function is used to display toast notifications using the `react-toastify` library. It takes a message and a type (error, success, or info) as parameters and displays a corresponding toast notification. It is likely used throughout the application to display feedback to the user.","metadata":{"source":".autodoc/docs/markdown/core/src/state/store/hooks.md"}}],["1210",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/store/reducer.ts)\n\nThis code defines a Redux store for managing the state of a shopping cart in an e-commerce application. The store state is defined as an object with two properties: `CartItems` and `Products`. The `CartItems` property is an array of `CartItem` objects, which represent items in the shopping cart. The `Products` property is an array of `Product` objects, which represent the available products in the store.\n\nThe `createReducer` function from the `@reduxjs/toolkit` library is used to create a reducer function that handles actions dispatched to the store. The reducer function is defined using a builder pattern, which allows for concise and readable code.\n\nThe reducer function handles several actions, including `getProducts`, `getCartItems`, `addCartItem`, `updateCartItem`, `removeCartItem`, and `clearCartItems`. The `getProducts` and `getCartItems` actions update the `Products` and `CartItems` properties of the store state, respectively, with the payload data provided in the action.\n\nThe `addCartItem` action adds a new `CartItem` object to the `CartItems` array. If the `CartItem` already exists in the array, an error is thrown. The `updateCartItem` action updates an existing `CartItem` object in the `CartItems` array. If the `CartItem` does not exist in the array, an error is thrown.\n\nThe `removeCartItem` action removes an existing `CartItem` object from the `CartItems` array based on the `id` provided in the action payload. The `clearCartItems` action removes all `CartItem` objects from the `CartItems` array.\n\nThis code can be used in the larger e-commerce application to manage the state of the shopping cart. For example, when a user adds a product to their cart, an `addCartItem` action can be dispatched to the store with the `CartItem` object as the payload. The reducer function will update the `CartItems` array with the new `CartItem` object. Similarly, when a user removes a product from their cart, a `removeCartItem` action can be dispatched to the store with the `id` of the `CartItem` object to be removed as the payload. The reducer function will update the `CartItems` array by removing the specified `CartItem` object.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines the initial state and a reducer function for a Redux store that manages cart items and products.\n\n2. What actions can be dispatched to this reducer?\n- The actions that can be dispatched to this reducer are `getProducts`, `getCartItems`, `addCartItem`, `updateCartItem`, `removeCartItem`, and `clearCartItems`.\n\n3. What are the types of `CartItem` and `Product`?\n- `CartItem` and `Product` are custom types defined elsewhere in the project, and this code imports them. Their definitions are not shown in this code snippet.","metadata":{"source":".autodoc/docs/markdown/core/src/state/store/reducer.md"}}],["1211",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/swap/actions.ts)\n\nThis code is a module that exports several Redux actions related to a \"swap\" feature. The purpose of this feature is likely to allow users to exchange one type of currency for another. \n\nThe `Field` enum defines two possible values: `INPUT` and `OUTPUT`. These likely refer to the input and output currencies in the swap transaction. \n\nThe `createAction` function is imported from the `@reduxjs/toolkit` library and is used to create Redux actions. Each of the exported functions in this module uses `createAction` to create a different action. \n\n`selectCurrency` takes an object with two properties: `field` (which should be either `Field.INPUT` or `Field.OUTPUT`) and `currencyId` (a string representing the selected currency). This action is likely dispatched when the user selects a currency from a dropdown menu or similar UI element. \n\n`switchCurrencies` takes no arguments and is likely dispatched when the user clicks a button to switch the input and output currencies. \n\n`typeInput` takes an object with two properties: `field` (either `Field.INPUT` or `Field.OUTPUT`) and `typedValue` (a string representing the user's typed input). This action is likely dispatched when the user types a value into an input field. \n\n`replaceSwapState` takes an object with several properties: `field` (either `Field.INPUT` or `Field.OUTPUT`), `typedValue` (a string representing the user's typed input), `inputCurrencyId` (an optional string representing the selected input currency), `outputCurrencyId` (an optional string representing the selected output currency), and `recipient` (a string or null representing the recipient of the swap transaction). This action is likely dispatched when the user submits the swap transaction. \n\n`setRecipient` takes an object with one property: `recipient` (a string or null representing the recipient of the swap transaction). This action is likely dispatched when the user enters a recipient for the swap transaction. \n\nOverall, this module exports several Redux actions that are likely used in a larger feature allowing users to swap currencies. These actions are dispatched in response to user interactions with various UI elements, and likely update the Redux store with information about the selected currencies, user input, and recipient. Here is an example of how `selectCurrency` might be used in a React component:\n\n```\nimport { useDispatch } from 'react-redux';\nimport { selectCurrency, Field } from './zoo';\n\nfunction CurrencySelector({ field }) {\n const dispatch = useDispatch();\n\n function handleCurrencySelect(currencyId) {\n dispatch(selectCurrency({ field, currencyId }));\n }\n\n return (\n \n );\n}\n```\n## Questions: \n 1. What is the purpose of the `createAction` function being imported from `@reduxjs/toolkit`?\n - The `createAction` function is used to create Redux actions with a specific type and payload structure.\n2. What is the `Field` enum used for?\n - The `Field` enum defines two constants, `INPUT` and `OUTPUT`, which are used as values for the `field` property in some of the created actions.\n3. What is the `replaceSwapState` action used for and what are its possible payload properties?\n - The `replaceSwapState` action is used to replace the entire swap state with new values. Its payload can include a `field` property (either `INPUT` or `OUTPUT`), a `typedValue` property (a string), optional `inputCurrencyId` and `outputCurrencyId` properties (strings), and a `recipient` property (a string or null).","metadata":{"source":".autodoc/docs/markdown/core/src/state/swap/actions.md"}}],["1212",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/swap/reducer.ts)\n\nThis code defines a Redux reducer for managing the state of a currency swapping feature in a larger project called \"zoo\". The reducer handles various actions related to currency swapping, such as selecting a currency, switching the input and output currencies, typing in a value, and setting a recipient address.\n\nThe `SwapState` interface defines the shape of the state object that the reducer manages. It includes the currently selected input and output currencies, the typed value, and the recipient address. The `initialState` object sets the initial values for these properties.\n\nThe `createReducer` function from the `@reduxjs/toolkit` library is used to create the reducer function. It takes the initial state and a \"builder\" function that defines how the state should be updated in response to different actions.\n\nThe `addCase` method of the builder function is used to define how the state should be updated for each action. For example, the `replaceSwapState` action updates the state with new values for the input and output currencies, the typed value, the recipient address, and the independent field (the field that the user is currently interacting with). The `selectCurrency` action updates the state with a new currency selection for the specified field (input or output), and may also swap the input and output currencies if the same currency is selected for both fields. The `switchCurrencies` action swaps the input and output currencies. The `typeInput` action updates the state with a new typed value for the specified field. The `setRecipient` action updates the state with a new recipient address.\n\nOverall, this code provides a way to manage the state of a currency swapping feature in a Redux store. It can be used in conjunction with other parts of the \"zoo\" project to provide a seamless user experience for swapping currencies. Here is an example of how this reducer might be used in a React component:\n\n```jsx\nimport { useDispatch, useSelector } from 'react-redux'\nimport { SwapState, selectCurrency, switchCurrencies, typeInput, setRecipient } from './zoo'\n\nfunction CurrencySwap() {\n const dispatch = useDispatch()\n const swapState = useSelector((state: { swap: SwapState }) => state.swap)\n\n function handleCurrencySelect(field: Field, currencyId: string) {\n dispatch(selectCurrency({ field, currencyId }))\n }\n\n function handleSwitchCurrencies() {\n dispatch(switchCurrencies())\n }\n\n function handleTypeInput(field: Field, typedValue: string) {\n dispatch(typeInput({ field, typedValue }))\n }\n\n function handleSetRecipient(recipient: string) {\n dispatch(setRecipient({ recipient }))\n }\n\n return (\n (\n (state) => state.voting.proposals\n );\n\n useEffect(() => {\n dispatch(getAllProposals());\n }, [dispatch]);\n\n return (\n ` values. \n\nThe `CurrencyAmount` and `Token` types are imported from the `@zoolabs/zdk` library, which suggests that this code is likely part of the zoo project's integration with that library. `CurrencyAmount` represents a quantity of a particular currency, while `Token` represents a specific token within the zoo project. \n\nThe `TokenBalancesMap` type is likely used to keep track of the balances of various tokens within the zoo project. For example, if a user has 10 ZOO tokens and 5 ETH tokens, their `TokenBalancesMap` might look like this:\n\n```\n{\n \"ZOO\": CurrencyAmount(10, Token),\n \"ETH\": CurrencyAmount(5, Token)\n}\n```\n\nThis code can be used throughout the zoo project to keep track of token balances and perform various operations on them. For example, a function might take a `TokenBalancesMap` as an argument and return the total value of all tokens in a particular currency. \n\nOverall, this code serves as a foundational piece of the zoo project's token management system, allowing for easy tracking and manipulation of token balances.\n## Questions: \n 1. **What is the purpose of the `CurrencyAmount` and `Token` imports from `@zoolabs/zdk`?** \n `CurrencyAmount` and `Token` are likely classes or interfaces defined in the `@zoolabs/zdk` library that are used in this code to represent currency amounts and tokens respectively.\n\n2. **What is the `TokenAddress` type used for?** \n `TokenAddress` is a type alias for the `string` type, and is likely used to represent the address of a token in the `TokenBalancesMap`.\n\n3. **What is the `TokenBalancesMap` type used for?** \n `TokenBalancesMap` is a type alias for a `Record` object that maps `TokenAddress` keys to `CurrencyAmount` values. This type is likely used to represent a mapping of token addresses to their respective balances.","metadata":{"source":".autodoc/docs/markdown/core/src/state/wallet/types.md"}}],["1226",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/zoo/actions.ts)\n\nThis code exports a set of functions and actions that can be used in the larger project. The functions and actions are related to the zoo project and are used to manage the state of the application. The code imports various types and interfaces from other files in the project. \n\nThe `createAction` function is used to create actions that can be dispatched to the store. The actions include `getZooBalance`, `getBNBBalance`, `getEggs`, `getAllowance`, `addEgg`, `loading`, `updateMyNfts`, `eggsCount`, `animalsCount`, `breedsCount`, `addAuctionNft`, `createBid`, and `addNftTTransfers`. \n\nThe `getZooBalance` action is used to get the balance of the zoo token for a given account. The `getBNBBalance` action is used to get the balance of BNB for a given account. The `getEggs` action is used to get the eggs for a given account. The `getAllowance` action is used to get the allowance for a given account. The `addEgg` action is used to add an egg to the state. The `loading` action is used to set the loading state of the application. The `updateMyNfts` action is used to update the NFTs for a given account. The `eggsCount` action is used to update the count of eggs. The `animalsCount` action is used to update the count of animals. The `breedsCount` action is used to update the count of breeds. The `addAuctionNft` action is used to add an NFT to the auction. The `createBid` action is used to create a bid for an NFT. The `addNftTTransfers` action is used to add an NFT transfer to the state.\n\nThe code also exports the `clear`, `push`, and `remove` functions from the `toasts` file. These functions are used to manage the toasts in the application.\n\nOverall, this code provides a set of functions and actions that can be used to manage the state of the zoo project. These functions and actions can be imported and used in other files in the project.\n## Questions: \n 1. What are the actions being exported from this file?\n- The file exports several actions such as `getZooBalance`, `getBNBBalance`, `getEggs`, `getAllowance`, `addEgg`, `loading`, `updateMyNfts`, `eggsCount`, `animalsCount`, `breedsCount`, `addAuctionNft`, `createBid`, and `addNftTTransfers`.\n\n2. What are the types being imported in this file?\n- The file imports several types such as `Auction`, `AvailableEgg`, `Egg`, and `MyNFT`.\n\n3. What is the purpose of the `createAction` function being imported from \"@reduxjs/toolkit\"?\n- The `createAction` function is used to create an action creator function that returns an action object with a type and a payload. This function is used to create several actions in this file such as `getZooBalance`, `getBNBBalance`, `getEggs`, `getAllowance`, `addEgg`, `loading`, `updateMyNfts`, `eggsCount`, `animalsCount`, `breedsCount`, `addAuctionNft`, `createBid`, and `addNftTTransfers`.","metadata":{"source":".autodoc/docs/markdown/core/src/state/zoo/actions.md"}}],["1227",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/zoo/reducer.ts)\n\nThis code defines the state and reducer for the `zoo` project. The `zoo` project is a blockchain-based game where users can buy, sell, and breed virtual animals. The state is defined as an object with various properties such as `animals`, `myBids`, `myAuctions`, `eggs`, `zooBalance`, `myEggs`, and `myTransactions`. The reducer is created using the `createReducer` function from the `@reduxjs/toolkit` library.\n\nThe reducer handles various actions such as `loading`, `getZooBalance`, `getBNBBalance`, `getAllowance`, `addEgg`, `updateMyNfts`, `addAuctionNft`, `eggsCount`, `animalsCount`, `breedsCount`, and `addNftTTransfers`. These actions update the state based on the payload received. For example, the `getZooBalance` action updates the `zooBalance` property of the state with the balance received in the payload.\n\nThe code also imports various functions and types from other files such as `actions`, `types`, and `functions`. These files contain the implementation of the various actions and types used in the `zoo` project.\n\nOverall, this code defines the state and reducer for the `zoo` project and handles various actions to update the state based on the payload received. This code can be used in the larger `zoo` project to manage the state of the application and handle various user actions. For example, when a user buys an animal, the `addNftTTransfers` action can be used to update the state with the new transfer. Similarly, when a user wants to check their balance, the `getZooBalance` action can be used to retrieve the balance from the blockchain and update the state.\n## Questions: \n 1. What are the different actions being imported from \"./actions\" and what do they do?\n- The actions being imported are `getZooBalance`, `getAllowance`, `addEgg`, `updateMyNfts`, `loading`, `eggsCount`, `animalsCount`, `breedsCount`, `addAuctionNft`, `getBNBBalance`, and `addNftTTransfers`. They are used to update different parts of the `initialState` object in response to different events.\n\n2. What is the purpose of the `createReducer` function and how is it being used in this code?\n- The `createReducer` function is used to create a Redux reducer function that updates the state based on different actions. It takes an initial state object and a builder function that defines how the state should be updated in response to different actions. In this code, it is being used to create the default export for the module.\n\n3. What is the purpose of the `isEmptyObj` function and where is it being used?\n- The `isEmptyObj` function is used to check if an object is empty (i.e. has no properties). It is being imported from a `functions` module and used in the `addEgg` and `updateMyNfts` cases of the reducer to check if the payload object is empty before updating the state.","metadata":{"source":".autodoc/docs/markdown/core/src/state/zoo/reducer.md"}}],["1228",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/zoo/types.ts)\n\nThis code defines several interfaces that are likely used throughout the larger zoo project. The `AnimalState` interface defines a single property, `eggs`, which is a number representing the number of eggs in the animal's possession. The `ZooState` interface defines several properties related to the state of the zoo, including `eggs`, which is an object with string keys and `Egg` values, representing all the eggs in the zoo; `animals`, which is an object with string keys and `Animal` values, representing all the animals in the zoo; `zooBalance`, which is a number representing the amount of money the zoo has; `myEggs`, which is an object with string keys and `Egg` values, representing all the eggs owned by the user; `myTransactions`, which is an array of objects representing the user's transactions; `myBids`, which is an object with string keys and `Egg` values, representing all the eggs the user has bid on; and `myAuctions`, which is an object with string keys and `Egg` values, representing all the eggs the user has put up for auction.\n\nThe `MyNFT` interface defines a large number of properties related to a non-fungible token (NFT) owned by the user. This interface likely represents the structure of the data associated with an NFT in the larger zoo project.\n\nOverall, these interfaces provide a way to define the structure of the data used throughout the zoo project, allowing for consistent and type-safe usage of this data throughout the codebase. For example, the `AnimalState` interface could be used to define the state of an animal component in the zoo UI, while the `MyNFT` interface could be used to define the structure of NFT data returned from an API call.\n## Questions: \n 1. What is the purpose of the `AnimalState` interface?\n- The `AnimalState` interface defines the shape of the state object that contains the number of eggs in the zoo.\n\n2. What is the relationship between the `ZooState` interface and the `Animal` and `Egg` types?\n- The `ZooState` interface contains properties that use the `Animal` and `Egg` types as values, indicating that the state object contains information about animals and eggs in the zoo.\n\n3. What is the purpose of the `MyNFT` interface and what properties does it contain?\n- The `MyNFT` interface defines the shape of an object that represents a non-fungible token (NFT) and contains properties such as description, index, customName, and various other metadata related to the NFT.","metadata":{"source":".autodoc/docs/markdown/core/src/state/zoo/types.md"}}],["1229",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/styles/fonts/made-outer-sans/License READ ME FIRST.txt)\n\nThis code is not actually a part of the zoo project, but rather a license agreement for a typeface created by MadeType. The purpose of this code is to provide information about the terms and conditions of using the typeface, as well as contact information for the creator. \n\nThe code includes links to various websites where the typeface can be purchased, indicating that it is available for commercial use. However, the license agreement states that before using the typeface for commercial purposes, the user must contact MadeType to obtain permission. This suggests that the creator may have specific requirements or restrictions for commercial use.\n\nThe license agreement also includes a disclaimer stating that MadeType is not liable for any damage resulting from the use of the typeface. This is a common practice in the design industry, as it protects the creator from any legal issues that may arise from the use of their work.\n\nOverall, this code serves as an important legal document for anyone who wishes to use the MadeType typeface. It outlines the terms and conditions of use, as well as contact information for the creator. By including this license agreement, MadeType is able to protect their work and ensure that it is used appropriately. \n\nExample usage:\n\nIf a designer wants to use the MadeType typeface for a commercial project, they would need to contact MadeType at the provided email address to obtain permission. They would also need to ensure that they follow the terms and conditions outlined in the license agreement, such as giving credit to the creator and not using the typeface in any way that could be considered harmful or offensive.\n## Questions: \n 1. What is the purpose of this code?\n \n This code is not a program or script, but rather a license agreement for a typeface created by MadeType. \n\n2. Can this typeface be used for commercial purposes?\n \n The license agreement states that commercial use is allowed, but the user must contact MadeType at Madetypeinfo@gmail.com before doing so. \n\n3. Who is responsible for any damage resulting from the use of this typeface?\n \n The license agreement states that MadeType is not liable for any damage resulting from the use of this typeface.","metadata":{"source":".autodoc/docs/markdown/core/src/styles/fonts/made-outer-sans/License READ ME FIRST.md"}}],["1230",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/styles/react-morphing-modal.css)\n\nThis code defines the styles for a React component called `ReactMorphingModal`. The component is a modal window that can be used to display content on top of the main application. The styles are defined using CSS and include properties such as position, height, width, background color, border radius, and transitions.\n\nThe `.RMM__close-button` class defines the styles for a close button that appears in the top left corner of the modal window. The button is circular and has a white \"X\" in the center. The button is hidden by default and only appears when the modal window is active. When the user hovers over the button, the background color changes to a darker shade of black.\n\nThe `.RMM__container` class defines the styles for the container that holds the modal window. The container is fixed to the top left corner of the screen and has a height and width of 100%. The container is hidden by default and only appears when the modal window is active. When the container is active, it has a higher z-index than the rest of the application, which ensures that it appears on top of all other content.\n\nThe `.RMM__body` class defines the styles for the content of the modal window. The content is positioned in the center of the screen and has a white background. The content is hidden by default and only appears when the modal window is active. When the content is active, it has a higher z-index than the close button, which ensures that it appears on top of the button.\n\nThe `.RMM__placeholder` class defines the styles for the placeholder that appears behind the modal window when it is active. The placeholder has a black background and is used to darken the rest of the application while the modal window is active.\n\nOverall, this code defines the styles for a React component that can be used to display content in a modal window. The component includes a close button, a container for the modal window, and styles for the content of the modal window. The component can be customized by changing the CSS styles defined in this file. For example, the background color of the modal window can be changed by modifying the `background` property in the `.RMM__body` class.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines the styles for a close button, container, body, and placeholder for a React Morphing Modal component.\n\n2. What is the significance of the `RMM__` prefix used in the class names?\n - The `RMM__` prefix is likely used to namespace the class names and avoid potential conflicts with other CSS styles in the project.\n\n3. What is the purpose of the `::before` and `::after` pseudo-elements in the `.RMM__close-button` class?\n - The `::before` and `::after` pseudo-elements are used to create the horizontal lines of the close button icon by positioning two 2px high, 24px wide elements at a 45 degree angle from each other.","metadata":{"source":".autodoc/docs/markdown/core/src/styles/react-morphing-modal.md"}}],["1231",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/styles/variables.css)\n\nThis code defines CSS variables for the root element of a webpage. These variables can be used throughout the webpage to maintain consistency in design and layout. \n\nThe `--primary` variable is set to the color black (#000), which can be used as the primary color for the webpage. The `--text-primary` variable is set to white (#fff), which can be used as the primary text color. The `--font-sans` variable is set to a font stack that includes the Inter font, as well as fallback fonts for different operating systems. This font stack can be used to set the default font for the webpage. \n\nFinally, the `--scrollbar-width` variable is set to 14 pixels. This can be used to set the width of scrollbars on the webpage, ensuring consistency across different browsers and devices. \n\nOverall, this code provides a simple and efficient way to define global variables for a webpage, making it easier to maintain a consistent design and layout. \n\nExample usage:\n\nTo use the `--primary` variable in CSS, simply reference it using the `var()` function:\n\n```\nh1 {\n color: var(--primary);\n}\n```\n\nThis will set the color of all `h1` elements to the value of the `--primary` variable (in this case, black).\n\nSimilarly, to use the `--font-sans` variable to set the default font for the webpage, simply reference it in the `font-family` property:\n\n```\nbody {\n font-family: var(--font-sans);\n}\n```\n\nThis will set the default font for the entire webpage to the Inter font (or a fallback font if Inter is not available).\n## Questions: \n 1. What is the purpose of the `:root` selector in this code?\n - The `:root` selector is used to target the root element of the document, which in this case is likely the HTML element. The purpose of this selector is to define global CSS variables that can be used throughout the project.\n\n2. What do the CSS variables `--primary`, `--text-primary`, `--font-sans`, and `--scrollbar-width` represent?\n - `--primary` likely represents the primary color used throughout the project, `--text-primary` represents the primary text color, `--font-sans` represents the primary font family used, and `--scrollbar-width` represents the width of scrollbars in the project.\n\n3. What is the value of the `--font-sans` variable?\n - The value of the `--font-sans` variable is a font stack that includes the \"Inter\" font, as well as several fallback fonts. This suggests that \"Inter\" is the preferred font for the project, but other fonts will be used if \"Inter\" is not available.","metadata":{"source":".autodoc/docs/markdown/core/src/styles/variables.md"}}],["1232",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/theme/base.ts)\n\nThe code defines a set of constants and exports them as a default object. The constants include `breakpointMap`, `breakpoints`, `mediaQueries`, `shadows`, `spacing`, `radii`, and `zIndices`. \n\n`breakpointMap` is an object that maps breakpoint names to their corresponding pixel values. `breakpoints` is an array of breakpoint pixel values, sorted in ascending order. `mediaQueries` is an object that maps breakpoint names to their corresponding media query strings. Each media query string is constructed using the corresponding pixel value from `breakpointMap`. \n\n`shadows` is an object that defines a set of CSS box-shadow values for different use cases. `spacing` is an array of pixel values used for spacing elements. `radii` is an object that defines a set of border-radius values for different use cases. `zIndices` is an object that defines a set of z-index values for different use cases.\n\nThis code can be used to provide a consistent set of constants for use throughout a project. For example, the `mediaQueries` object can be used to define responsive styles for different screen sizes. The `shadows` object can be used to apply consistent box-shadow styles to elements throughout the project. The `spacing` array can be used to apply consistent spacing between elements. The `radii` object can be used to apply consistent border-radius styles to elements. The `zIndices` object can be used to ensure consistent z-index stacking order for elements. \n\nExample usage:\n\n```javascript\nimport constants from './constants'\n\n// Use media queries to apply styles for different screen sizes\nconst styles = {\n [constants.mediaQueries.sm]: {\n fontSize: '16px',\n },\n [constants.mediaQueries.md]: {\n fontSize: '18px',\n },\n [constants.mediaQueries.lg]: {\n fontSize: '20px',\n },\n}\n\n// Use shadows to apply consistent box-shadow styles to elements\nconst boxStyles = {\n boxShadow: constants.shadows.level1,\n}\n\n// Use spacing to apply consistent spacing between elements\nconst containerStyles = {\n margin: constants.spacing[4],\n}\n\n// Use radii to apply consistent border-radius styles to elements\nconst buttonStyles = {\n borderRadius: constants.radii.default,\n}\n\n// Use zIndices to ensure consistent z-index stacking order for elements\nconst modalStyles = {\n zIndex: constants.zIndices.modal,\n}\n```\n## Questions: \n 1. What is the purpose of the `breakpointMap` object?\n- The `breakpointMap` object maps breakpoint names to their corresponding pixel values.\n\n2. What is the purpose of the `mediaQueries` object?\n- The `mediaQueries` object defines media query strings for each breakpoint in the `breakpointMap` object.\n\n3. What is the purpose of the `shadows` object?\n- The `shadows` object defines CSS box-shadow values for different shadow levels and styles.","metadata":{"source":".autodoc/docs/markdown/core/src/theme/base.md"}}],["1233",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/theme/colors.ts)\n\nThis code defines color schemes for the zoo project. The `Colors` type is imported from the `types` module, which is not shown in this code snippet. The `baseColors` object defines a set of colors that are used as the foundation for the light and dark color schemes. The `brandColors` object defines additional colors that are specific to the zoo brand. \n\nThe `lightColors` object extends the `baseColors` and `brandColors` objects to define a color scheme for light mode. The `darkColors` object extends the same base objects to define a color scheme for dark mode. \n\nEach color scheme defines a set of colors for various elements of the user interface, such as the background, text, and borders. The color values are specified as hexadecimal codes or RGB values. The `gradients` property defines a set of gradient styles that can be used for backgrounds or other elements. \n\nThis code is used to ensure consistency in the color scheme across the entire zoo project. Other modules can import the `lightColors` or `darkColors` objects to use the defined color scheme. For example, a component that needs to display a button can import the `lightColors` object and use the `primary` color for the button background. \n\nExample usage:\n\n```\nimport { lightColors } from 'zoo/colors';\n\nconst buttonStyle = {\n backgroundColor: lightColors.primary,\n color: lightColors.text,\n border: `1px solid ${lightColors.borderColor}`,\n};\n```\n## Questions: \n 1. What is the purpose of the `Colors` import from `./types`?\n- The `Colors` import from `./types` is used to define the type of the `lightColors` and `darkColors` objects.\n\n2. What is the difference between `baseColors` and `brandColors`?\n- `baseColors` contains a set of colors that are used throughout the application, while `brandColors` contains colors specific to the brand of the application.\n\n3. What is the purpose of the `gradients` object in `lightColors` and `darkColors`?\n- The `gradients` object in `lightColors` and `darkColors` contains a set of linear gradients that can be used as background colors for various elements in the application.","metadata":{"source":".autodoc/docs/markdown/core/src/theme/colors.md"}}],["1234",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/theme/dark.ts)\n\nThis code exports a default object called `darkTheme` that defines the theme for a styled-components-based project. The `DefaultTheme` import from `styled-components` is used to define the type of the `darkTheme` object. \n\nThe `darkTheme` object extends a `base` object that is imported from another file in the same directory. The `base` object likely contains shared styles and properties that are used across all themes. \n\nThe `darkTheme` object also defines a boolean property called `isDark` that is set to `true`. This property can be used to conditionally render styles based on whether the theme is dark or light. \n\nThe `darkColors` object is imported from another file in the same directory and is used to define the color palette for the `darkTheme`. \n\nThe commented-out lines of code suggest that this file is part of a larger project that includes other components such as `Alert`, `Card`, `Radio`, `Toggle`, `Menu`, `Modal`, and `Tooltip`. Each of these components likely has its own theme that can be imported and used in the `darkTheme` object. \n\nOverall, this code is used to define the theme for a styled-components-based project and specifically defines the dark theme. Other themes can be defined in a similar way by extending the `base` object and defining their own color palette and component-specific themes. \n\nExample usage:\n\n```jsx\nimport React from 'react'\nimport styled, { ThemeProvider } from 'styled-components'\nimport darkTheme from './path/to/darkTheme'\n\nconst App = () => {\n return (\n \n \n My Dark App \n \n \n \n )\n}\n\nconst Container = styled.div`\n background-color: ${props => props.theme.colors.background};\n color: ${props => props.theme.colors.text};\n`\n\nconst Title = styled.h1`\n font-size: 2rem;\n`\n\nconst Button = styled.button`\n background-color: ${props => props.theme.colors.primary};\n color: ${props => props.theme.colors.text};\n padding: 1rem;\n border: none;\n border-radius: 0.5rem;\n cursor: pointer;\n`\n``` \n\nIn this example, the `ThemeProvider` component from `styled-components` is used to provide the `darkTheme` to all styled components in the app. The `Container`, `Title`, and `Button` components are all styled using properties from the `darkTheme` object, such as `colors.background`, `colors.text`, and `colors.primary`. The `isDark` property can also be used to conditionally render styles based on whether the theme is dark or light.\n## Questions: \n 1. What is the purpose of this code?\n This code exports a default dark theme object for a project called zoo, which includes base styles and dark colors.\n\n2. What are the commented out imports for?\n The commented out imports are for different components' dark themes, such as Alert, Card, Radio, Toggle, Menu, Modal, and Tooltip. They are not currently being used in this code.\n\n3. What is the type of the `darkTheme` object?\n The type of the `darkTheme` object is `DefaultTheme`, which is imported from the `styled-components` library.","metadata":{"source":".autodoc/docs/markdown/core/src/theme/dark.md"}}],["1235",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/theme/index.ts)\n\nThis code defines the interface for the theme used in the larger project. The `Theme` interface defines various properties that are used to style the components in the project. These properties include `siteWidth`, `isDark`, `colors`, `breakpoints`, `mediaQueries`, `spacing`, `shadows`, `radii`, and `zIndices`. \n\nThe `siteWidth` property is used to define the maximum width of the site. The `isDark` property is used to determine whether the theme is dark or light. The `colors` property defines the color palette used in the project. The `breakpoints` property defines the breakpoints used for responsive design. The `mediaQueries` property defines the media queries used for responsive design. The `spacing` property defines the spacing used in the project. The `shadows` property defines the shadows used in the project. The `radii` property defines the border radii used in the project. The `zIndices` property defines the z-indices used in the project.\n\nThe code also exports two themes, `dark` and `light`, which are defined in separate files. These themes are used to provide different color schemes for the project. Additionally, the code exports two color palettes, `lightColors` and `darkColors`, which are used to define the colors for the `light` and `dark` themes respectively.\n\nThis code is an important part of the larger project as it defines the interface for the theme used throughout the project. By defining the properties of the theme, this code ensures that the components in the project are styled consistently. The `Theme` interface can be used by other components in the project to ensure that they are styled correctly. For example, a component that uses the `colors` property of the theme will be styled using the colors defined in the theme. \n\nHere is an example of how the `Theme` interface can be used in a component:\n\n```\nimport React from 'react';\nimport { Theme } from './theme';\n\ninterface Props {\n theme: Theme;\n}\n\nconst MyComponent: React.FC = ({ theme }) => {\n return (\n \n {/* component code */}\n \n )\n}\n```\n\nThis will apply the light theme to all styled components within the MyComponent component. By defining multiple themes, the zoo project can provide users with the ability to switch between different visual styles while maintaining a consistent design system.\n## Questions: \n 1. What is the purpose of the `DefaultTheme` import from `styled-components`?\n- The `DefaultTheme` import is used to define the type of the `lightTheme` object as a default theme for styled components.\n\n2. Why are there multiple commented out imports for different components' themes?\n- The commented out imports suggest that the `lightTheme` object was originally intended to include theme settings for those components, but they were either not needed or not yet implemented.\n\n3. What is the `base` import and how is it used in the `lightTheme` object?\n- The `base` import is likely a separate file that contains shared theme settings. It is spread into the `lightTheme` object using the spread syntax (`...`) to merge the shared settings with the specific settings for the light theme.","metadata":{"source":".autodoc/docs/markdown/core/src/theme/light.md"}}],["1237",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/theme/types.ts)\n\nThis code defines a number of types that are used to define various aspects of the visual design of a web application. These types include Breakpoints, MediaQueries, Spacing, Radii, Shadows, Gradients, Modal, Colors, and ZIndices. \n\nBreakpoints is an array of strings that define the different screen sizes at which the application should adjust its layout. MediaQueries is an object that defines the specific CSS media queries that correspond to each breakpoint. Spacing is an array of numbers that define the different spacing values that can be used throughout the application. Radii is an object that defines the different border radii that can be used for various elements. Shadows is an object that defines the different box shadows that can be used for various elements. Gradients is an object that defines the different gradient colors that can be used for various elements. Modal is an object that defines the colors and styles for modal windows. Colors is an object that defines the color palette for the application, including primary, secondary, and tertiary colors, as well as various shades of gray and other accent colors. Finally, ZIndices is an object that defines the z-index values for various elements, such as dropdown menus and modal windows.\n\nThese types can be used throughout the application to ensure consistency in the visual design. For example, the Spacing array can be used to ensure that all elements are spaced consistently throughout the application, regardless of their location. The Colors object can be used to ensure that all elements use the same color palette, making the application look cohesive and professional. The MediaQueries object can be used to ensure that the application is responsive and adjusts its layout appropriately for different screen sizes.\n\nHere is an example of how these types might be used in a React component:\n\n```\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Colors, Spacing } from 'zoo';\n\nconst Button = styled.button`\n background-color: ${Colors.primary};\n color: ${Colors.text};\n padding: ${Spacing[2]}px ${Spacing[3]}px;\n border-radius: ${Radii.default};\n box-shadow: ${Shadows.level1};\n`;\n\nconst MyComponent = () => {\n return (\n \n );\n};\n```\n\nIn this example, the Button component uses the primary color from the Colors object, the default border radius from the Radii object, and the level 1 box shadow from the Shadows object. It also uses the second and third values from the Spacing array to set the padding. This ensures that the button looks consistent with other elements throughout the application.\n## Questions: \n 1. What are the different types defined in this code?\n- This code defines several types including Breakpoints, MediaQueries, Spacing, Radii, Shadows, Gradients, Modal, Colors, and ZIndices.\n\n2. What is the purpose of the Gradients type?\n- The Gradients type defines several gradient color values that can be used in the project, including bubblegum, buttongum, bubbleYum, starterAppGlare, and starterAppMarble.\n\n3. What is the ZIndices type used for?\n- The ZIndices type defines the z-index values for dropdown and modal components in the project.","metadata":{"source":".autodoc/docs/markdown/core/src/theme/types.md"}}],["1238",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/types/cart.ts)\n\nThe code above defines an interface called `CartItem` which represents an item that can be added to a shopping cart. The `CartItem` interface has several properties that describe the item, such as its name, base price, discount price, description, image, gallery images, quantity, and ID. \n\nIn addition to these basic properties, the `CartItem` interface also has a `properties` property which is an object that can contain additional information about the item. This `properties` object has three optional properties: `color`, `size`, and `adendums`. The `color` property is a string that represents the color of the item, the `size` property is a string that represents the size of the item, and the `adendums` property is an array of strings that represents any additional features or attributes of the item.\n\nThis `CartItem` interface can be used throughout the larger project to represent items that can be added to a shopping cart. For example, if the project has a page where users can browse and purchase products, the `CartItem` interface can be used to represent each product that is displayed on the page. When a user adds a product to their cart, an object that conforms to the `CartItem` interface can be created and added to the cart.\n\nHere is an example of how the `CartItem` interface can be used in code:\n\n```\nconst item: CartItem = {\n name: \"T-Shirt\",\n basePrice: \"$20.00\",\n discountPrice: \"$15.00\",\n description: \"A comfortable and stylish t-shirt\",\n properties: {\n color: \"blue\",\n size: \"medium\",\n adendums: [\"100% cotton\", \"machine washable\"]\n },\n image: \"tshirt.jpg\",\n galleryImages: [\"tshirt-front.jpg\", \"tshirt-back.jpg\"],\n quantity: 1,\n id: \"12345\",\n status: \"available\",\n productId: \"67890\"\n};\n\n// Add the item to the shopping cart\nshoppingCart.addItem(item);\n``` \n\nIn this example, an object that conforms to the `CartItem` interface is created with some sample data. The `addItem` method of a `shoppingCart` object is then called with the `item` object as an argument to add the item to the cart.\n## Questions: \n 1. **What is the purpose of this interface?** \nThe interface defines the structure of a CartItem object, which likely represents an item that can be added to a shopping cart on an e-commerce website.\n\n2. **What are the properties of a CartItem object?** \nThe CartItem object has several properties, including name, basePrice, discountPrice, description, properties (which includes color, size, and adendums), image, galleryImages, quantity, id, status, and productId.\n\n3. **What is the data type of each property?** \nThe data types of the properties are: string for name, basePrice, discountPrice, description, color (optional), and size; Array for adendums and galleryImages; number for quantity; and string for id, status, and productId.","metadata":{"source":".autodoc/docs/markdown/core/src/types/cart.md"}}],["1239",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/types/index.ts)\n\nThis file contains a set of interfaces that define the structure of various objects used in the larger project. These interfaces include `Drop`, `Animal`, `Egg`, `AvailableEgg`, `EggAttribute`, `AuctionHistory`, `Auction`, `Bid`, `Ask`, `ANIMAL_TYPE`, `CardEgg`, `EggCardType`, `ToastsState`, and `Proposal`. \n\nThe `Drop` interface defines the structure of a drop, which includes a title, description, items (either an array of `AvailableEgg` or `Animal` objects), supply, minted, dropSupply, dropId, and image. \n\nThe `Animal` interface defines the structure of an animal, which includes an optional owner, kind, tokenID, parentA, parentB, name, description, yield, boost, rarity, dob, startBid, currentBid, buyNow, imageUrl, listed, bloodline, selected, bred, breedCount, timeRemaining, CTAOverride, lastBred, revealed, freed, createdAt, and updatedAt. \n\nThe `Egg` interface defines the structure of an egg, which includes an owner, kind, tokenID, parentA, parentB, basic, timeRemaining, CTAOverride, burned, interactive, hatched, animalID, createdAt, updatedAt, and hatching. \n\nThe `AvailableEgg` interface defines the structure of an available egg, which includes bidShares, birthday, exist, id, kind, minted, name, price, supply, timestamp, image, animation_url, attributes, and description. \n\nThe `EggAttribute` interface defines the structure of an egg attribute, which includes a trait_type and value. \n\nThe `AuctionHistory` interface defines the structure of an auction history, which includes a value, from_address, blockNumber, block_timestamp, and transaction_hash. \n\nThe `Auction` interface defines the structure of an auction, which includes an array of `AuctionHistory` objects, a description, index, tokenID, auctionId, tokenOwner, reservePrice, firstBidTime, duration, curatorFeePercentage, amount, tokenUri, name, image, animation_url, attributes, kind, glb_animation_url, and usdz_animation_url. \n\nThe `Bid` interface defines the structure of a bid, which includes an amount, currency, bidder, recipient, and sellOnFee. \n\nThe `Ask` interface defines the structure of an ask, which includes an amount, currency, and sellOnFee. \n\nThe `ANIMAL_TYPE` type defines the structure of an animal type, which includes a name, image, and description (which includes a head and desc). \n\nThe `CardEgg` interface extends the `Egg` interface and adds an id and name property. \n\nThe `EggCardType` type defines the structure of an egg card, which includes an `egg` object (of type `CardEgg`), `hatchEgg` and `hatchEggReady` functions, a `hatching` boolean, a `viewItem` function, and an `eggGroup` object. \n\nThe `ToastsState` interface defines the structure of the toast state, which includes a `data` array of `Toast` objects. \n\nThe `Proposal` interface defines the structure of a proposal, which includes a signature, timestamp, token, type, tokenDecimal, tokenAddress, id, proposalType, proposalStatus, proposalIpfs, votes, voteCount, title, description, choices, startDate, startTime, endDate, endTime, creator, and blockNumber. \n\nOverall, this file provides a set of interfaces that define the structure of various objects used in the larger project. These interfaces can be used to ensure that objects are properly formatted and to provide type checking throughout the codebase. For example, if a function expects an `Animal` object as an argument, it can specify that in its type signature, and TypeScript will ensure that the object passed in conforms to the `Animal` interface.\n## Questions: \n 1. What are the interfaces `Animal` and `Egg` used for?\n - The `Animal` interface is used to define the properties of an animal object, while the `Egg` interface is used to define the properties of an egg object.\n2. What is the purpose of the `Auction` interface?\n - The `Auction` interface is used to define the properties of an auction object, which includes information such as the auction ID, reserve price, and duration.\n3. What is the `Toast` component used for?\n - The `Toast` component is imported from the `components/Toast` module and is likely used to display notifications or alerts to the user.","metadata":{"source":".autodoc/docs/markdown/core/src/types/index.md"}}],["1240",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/types/order.ts)\n\nThis code defines several interfaces that are used to represent different aspects of an order and transaction in the larger project. The `Transaction` interface defines the properties of a transaction, including the `orderId`, `salesRepId`, `createdAt`, `updatedAt`, `amount`, `commission`, and `currency`. The `OrderData` interface defines the properties of an order, including the `orders`, `extUserId`, and `extChannel`. The `OrderItem` interface defines the properties of an item within an order, including the `price`, `quantity`, `shippedQuantity`, `name`, `_id`, `basePrice`, `status`, `hasReturnables`, `discountPrice`, `description`, `properties`, `image`, and `galleryImages`. Finally, the `Order` interface defines the properties of an entire order, including the `orderNumber`, `items`, `balance`, `createdBy`, `currency`, `createdAt`, `customerNumber`, `customerName`, `subTotal`, `isPickup`, `totalShippedQuantity`, `total`, `status`, `userId`, `shippingCosts`, `discounts`, `shippingAddress`, `dispatchedAt`, `itemBaseTotal`, `baseTotal`, `orderType`, `contactPhone`, `orderTypeName`, `itemTotal`, `_id`, `customerCompanyId`, `paymentStatus`, `baseSubTotal`, `updatedAt`, `summary`, and `shippingStatus`.\n\nThese interfaces are likely used throughout the larger project to represent orders and transactions in different contexts. For example, the `Transaction` interface may be used when creating a new transaction in the database, while the `Order` interface may be used when retrieving an order from the database. The `OrderItem` interface may be used when displaying a list of items within an order, and the `OrderData` interface may be used when passing order data between different parts of the application.\n\nHere is an example of how the `Order` interface might be used in the larger project:\n\n```typescript\nimport { Order } from './zoo';\n\n// Retrieve an order from the database\nconst order: Order = await db.collection('orders').doc('123').get();\n\n// Display the order information to the user\nconsole.log(`Order Number: ${order.orderNumber}`);\nconsole.log(`Customer Name: ${order.customerName}`);\nconsole.log(`Total: ${order.total}`);\n```\n## Questions: \n 1. What is the purpose of the `zoo` project and how does this code fit into it?\n- As a code documentation expert, I do not have enough context to answer this question. The smart developer would need to provide more information about the project and how this code is used.\n\n2. What is the difference between `Transaction` and `Order` interfaces?\n- The `Transaction` interface represents a single transaction with details such as `amount`, `commission`, and `currency`, while the `Order` interface represents an entire order with details such as `items`, `balance`, and `shippingAddress`.\n\n3. What is the purpose of the `Firestore.FieldValue` type in the `Transaction` interface?\n- The `Firestore.FieldValue` type is used to represent a timestamp value in Firestore, so it is likely used to track when a transaction was created or updated.","metadata":{"source":".autodoc/docs/markdown/core/src/types/order.md"}}],["1241",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/types/product.ts)\n\nThe code defines an interface called `Product` which represents the properties of a product in the zoo project. The `Product` interface has several properties including `name`, `basePrice`, `discountPrice`, `description`, `shortDescription`, `properties`, `image`, `galleryImages`, `quantity`, `id`, `status`, and `createdAt`. \n\nThe `name` property is a string that represents the name of the product. The `basePrice` property is a string that represents the original price of the product before any discounts are applied. The `discountPrice` property is a string that represents the price of the product after any discounts are applied. The `description` property is a string that represents a detailed description of the product. The `shortDescription` property is a string that represents a brief description of the product. \n\nThe `properties` property is an object that contains three arrays: `colors`, `sizes`, and `adendums`. The `colors` array contains strings that represent the available colors of the product. The `sizes` array contains strings that represent the available sizes of the product. The `adendums` array contains strings that represent any additional features or details of the product. \n\nThe `image` property is a string that represents the URL of the main image of the product. The `galleryImages` property is an array of strings that represents the URLs of additional images of the product. The `quantity` property is a number that represents the available quantity of the product. The `id` property is a string that represents the unique identifier of the product. The `status` property is a string that represents the current status of the product (e.g. \"available\", \"out of stock\", etc.). The `createdAt` property is a string that represents the date and time when the product was created.\n\nThis interface is likely used throughout the zoo project to represent products in various contexts such as in the database, in the user interface, and in API responses. For example, when retrieving a list of products from the database, the resulting objects would likely conform to the `Product` interface. \n\nHere is an example of how the `Product` interface could be used in TypeScript code:\n\n```\nimport { Product } from './zoo';\n\nconst product: Product = {\n name: 'Giraffe Plushie',\n basePrice: '19.99',\n discountPrice: '14.99',\n description: 'A soft and cuddly plushie of a giraffe.',\n shortDescription: 'Soft and cuddly giraffe plushie.',\n properties: {\n colors: ['yellow', 'brown'],\n sizes: ['small', 'medium', 'large'],\n adendums: ['removable bowtie']\n },\n image: 'https://example.com/giraffe-plushie.jpg',\n galleryImages: [\n 'https://example.com/giraffe-plushie-1.jpg',\n 'https://example.com/giraffe-plushie-2.jpg'\n ],\n quantity: 10,\n id: '12345',\n status: 'available',\n createdAt: '2021-01-01T00:00:00.000Z'\n};\n```\n## Questions: \n 1. **What is the purpose of this code?** \nThis code defines an interface for a product in the zoo project, including its name, pricing, description, properties, images, quantity, and status.\n\n2. **What is the difference between `basePrice` and `discountPrice`?** \n`basePrice` likely refers to the original price of the product, while `discountPrice` refers to a discounted price that may be offered for the product.\n\n3. **What is the format of the `createdAt` property?** \nThe `createdAt` property is a string, but it is unclear what format it is in. It would be helpful to have documentation or comments explaining the expected format.","metadata":{"source":".autodoc/docs/markdown/core/src/types/product.md"}}],["1242",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/types/shippment.ts)\n\nThis code defines a set of interfaces that are used to represent different aspects of a shipment in the larger project. The `Coordinates` interface defines the latitude and longitude of a location. The `ShippingAddress` interface defines the details of a shipping address, including whether it is the default billing or shipping address, the phone number, address line 1, local government area, ID, company, state, coordinates, and full name. The `Currency` interface defines the ISO code and symbol for a currency. Finally, the `Shipment` interface combines all of these interfaces to define a complete shipment, including the shipping address, currency, order number, date issued, customer name, contact phone number, total cost, shipping status, dispatch assignee ID, global order number, sales assignee number, sales assignee name, and group ID.\n\nThese interfaces can be used throughout the larger project to represent shipments and their associated data. For example, when creating a new shipment, the `Shipment` interface can be used to define the necessary data, which can then be passed to a function that creates the shipment in the system. Similarly, when retrieving a shipment from the system, the data can be returned as an object that conforms to the `Shipment` interface, making it easy to work with and manipulate the data.\n\nOverall, this code provides a set of standardized interfaces for working with shipments in the larger project, making it easier to create, retrieve, and manipulate shipment data throughout the system.\n## Questions: \n 1. What is the purpose of the `Coordinates` interface?\n - The `Coordinates` interface defines the structure of an object that contains latitude and longitude values.\n2. What is the significance of the `Shipment` interface?\n - The `Shipment` interface defines the structure of an object that represents a shipment, including details such as the shipping address, currency, order number, and total cost.\n3. What is the meaning of the `g` property in the `Shipment` interface?\n - It is unclear what the `g` property represents without additional context or documentation.","metadata":{"source":".autodoc/docs/markdown/core/src/types/shippment.md"}}],["1243",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/utils/handleFunds.ts)\n\nThe `handleFunds` function in the `zoo` project takes in two parameters: `chainId` and `buyZoo`. The `chainId` parameter is used to determine which blockchain network the user is on, while the `buyZoo` parameter is a function that is called when the user has sufficient funds to purchase Zoo tokens.\n\nThe function first checks if the user has sufficient funds to purchase Zoo tokens. However, this check is currently commented out, so it does not affect the function's behavior. If the user does not have sufficient funds, the function logs a message to the console and returns.\n\nNext, the function uses a switch statement to determine what action to take based on the `chainId` parameter. If the `chainId` matches one of the cases in the switch statement (1338, 1337, 97, or 4), the `buyZoo` function is called. This function likely handles the actual purchase of Zoo tokens.\n\nIf the `chainId` does not match any of the cases in the switch statement, the function opens a new window to the PancakeSwap website, specifically to the Zoo token page. This suggests that the user is directed to PancakeSwap to purchase Zoo tokens if they are on an unsupported blockchain network.\n\nOverall, the `handleFunds` function appears to be a key component in the process of purchasing Zoo tokens in the `zoo` project. It determines which blockchain network the user is on and directs them to the appropriate action based on that information.\n## Questions: \n 1. What is the purpose of the `handleFunds` function?\n- The purpose of the `handleFunds` function is to determine which `buyZoo` function to call based on the `chainId` parameter.\n\n2. What is the significance of the `switch` statement in the `handleFunds` function?\n- The `switch` statement is used to determine which `buyZoo` function to call based on the `chainId` parameter. If the `chainId` matches one of the cases, the corresponding `buyZoo` function is called. Otherwise, a default URL is opened in a new window.\n\n3. What is the purpose of the commented out code in the `handleFunds` function?\n- The commented out code appears to be a check for the user's Ethereum balance, and if it is zero, a message is logged indicating that the user does not have sufficient funds to get Zoo. However, it is currently not being used in the function.","metadata":{"source":".autodoc/docs/markdown/core/src/utils/handleFunds.md"}}],["1244",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AcceptBidButton.tsx)\n\nThe code is a React component that renders a button to accept a bid for a specific token. The component takes in several props, including the ID of the token, the type of the token, the bidder's address, and optional callbacks for when the bid is accepted or when an error occurs.\n\nThe component uses several hooks to interact with the Ethereum network. It uses the `useActiveWeb3React` hook to get the current user's account, the `useGasPrice` hook to get the current gas price, and the `useContract` hook to get instances of the `App`, `Media`, and `Market` contracts.\n\nWhen the component is mounted, it fetches the bid for the specified token and bidder from the `Market` contract using the `bidForTokenBidder` method. If a bid is found, it is stored in the component's state.\n\nWhen the user clicks the \"Accept Bid\" button, the `acceptBid` function is called. If there is no bid stored in the component's state, the function returns early. Otherwise, it tries to accept the bid by calling the `acceptBid` method on either the `App` or `Media` contract, depending on whether the bid currency is the native currency (e.g. Ether) or a token. If the transaction is successful, the `onAccept` callback is called with the token ID, and a transaction popup is added to the UI. If an error occurs, the `onError` callback is called with the error, and an error popup is added to the UI.\n\nOverall, this component provides a simple way for users to accept bids for their tokens on the Ethereum network. It can be used in a larger project that involves buying and selling NFTs or other digital assets. For example, it could be used in a marketplace application that allows users to list their tokens for sale and accept bids from potential buyers.\n## Questions: \n 1. What is the purpose of the `AcceptBidButton` component?\n- The `AcceptBidButton` component is used to accept a bid for a specific token.\n\n2. What external libraries or packages are being imported in this file?\n- The file is importing `isNativeCurrency` from the `@zoolabs/zdk` package, and `ethers`, `useCallback`, `useEffect`, and `useState` from the `react` package.\n\n3. What is the role of the `useTransactionPopups` hook in this code?\n- The `useTransactionPopups` hook is used to add transaction popups to the UI when a transaction is initiated or when an error occurs.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/AcceptBidButton.md"}}],["1245",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/Account.tsx)\n\nThe `Account` component in the `zoo` project is a React functional component that renders a user's account information. It takes in two optional props: `label` and `account`. The `label` prop is a string that is used to label the account information, while the `account` prop is a string that represents the user's account address. \n\nThe component first imports several dependencies, including `React`, `Copy`, `ExternalLink`, `Image`, `Typography`, and several custom hooks and functions. It then defines an interface for the `AccountProps` that specifies the optional `label` and `account` props. \n\nWithin the component, it uses the `useLingui` hook to access the internationalization (i18n) functionality and the `useActiveWeb3React` hook to access the user's active Web3 React context, including the `chainId`, `account`, and `connector`. It also uses the `useENSName` hook to retrieve the user's ENS name, if available.\n\nThe component then renders a `div` element with a `flex` layout and `space-y-3` spacing. If the user's ENS name is available, it renders a `Typography` component with the `label` prop and the ENS name. Otherwise, it renders a `Typography` component with the `label` prop and the shortened account address. \n\nThe component also includes commented-out code that would render an `ExternalLink` component to view the account on an explorer and a `Copy` component to copy the account address. These components are not currently being used in the component, but could be uncommented and used if desired.\n\nOverall, the `Account` component is a reusable component that can be used throughout the `zoo` project to display a user's account information. It is flexible enough to handle different types of account information and can be easily customized with additional functionality if needed. \n\nExample usage:\n\n```jsx\nimport Account from './Account'\n\nfunction MyComponent() {\n const account = '0x1234567890123456789012345678901234567890'\n\n return (\n No asks for this media.
} />\n```\n## Questions: \n 1. What is the purpose of the `AskList` component?\n- The `AskList` component is used to display a list of asks (offers to sell) for media items, with optional filtering and display options.\n\n2. What GraphQL query is being used to fetch data for the `AskList` component?\n- The `GET_ASKS` query is being used to fetch data for the `AskList` component, which retrieves the ID, amount, timestamp, currency, owner, and media information for a list of asks.\n\n3. What is the purpose of the `onClick` function in the `AskList` component?\n- The `onClick` function is used to handle click events on an ask item, and it navigates to a URL with a query parameter for the media ID of the ask item.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/AskList.md"}}],["1248",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/Asset.tsx)\n\nThe `Asset` component is a React component that renders an asset, which can be an image or a video, along with some metadata such as the asset's name, ID, and price. The component takes in several props, including the `tokenId` and `contentURI` of the asset, as well as optional props such as `ask`, `highest`, `formattedAmount`, `usdAmount`, and `symbol`. \n\nThe component first imports several dependencies, including `React`, `react-player`, `@zoolabs/zdk`, and `next/image`. It also imports several custom functions and types from other files in the project. \n\nInside the component, it uses several hooks such as `useActiveWeb3React` and `useContract` to interact with the Ethereum blockchain and retrieve data from the project's smart contracts. It also uses the `getContent` function to parse the `contentURI` and extract the asset's type, image, video, and name. \n\nThe component conditionally renders either an image or a video based on the `large` prop and whether the asset has a video. It also renders the asset's metadata, including its name, ID, and price. If the asset has a highest bid, it displays the bidder's address and the bid amount. If the user is the owner of the asset, it also displays a button to accept the highest bid. \n\nOverall, the `Asset` component is a reusable component that can be used to display assets throughout the project. It handles the rendering of the asset and its metadata, as well as interactions with the blockchain such as retrieving the highest bid and accepting bids.\n## Questions: \n 1. What is the purpose of the `Asset` component?\n- The `Asset` component is used to display information about a particular asset, including its image or video, token ID, and highest bid.\n\n2. What external libraries or packages are being used in this code?\n- The code is using several external libraries or packages, including React, react-player, @zoolabs/zdk, @heroicons/react, react-timeago, and next/image.\n\n3. What is the role of the `useActiveWeb3React` and `useContract` hooks?\n- The `useActiveWeb3React` hook is used to retrieve the current user's Ethereum account information, while the `useContract` hook is used to retrieve a specific smart contract instance based on its name.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/Asset.md"}}],["1249",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AssetList.tsx)\n\nThe `AssetList` component is a React component that renders a list of assets. It takes in several props, including `title`, `tokenType`, `tokenName`, `totalMinted`, `perPage`, `cols`, `where`, `orderBy`, `className`, `autoPlay`, `showPageNumbers`, `animate`, `large`, `empty`, `getTriggerProps`, `onLoadAssets`, and `openModal`. \n\nThe component uses the `useQuery` hook from the `@apollo/client` library to fetch data from a GraphQL API. The query is defined using the `gql` template literal tag and is stored in the `GET_ASSETS` constant. The query fetches a list of assets based on the `where`, `skip`, `first`, and `orderBy` variables passed in as arguments. \n\nThe `AssetList` component renders a grid of `Asset` components, which are defined in a separate file. Each `Asset` component represents a single asset and displays its image, name, and other relevant information. The `AssetList` component also includes pagination controls that allow the user to navigate between pages of assets. \n\nThe `getPages` function is a utility function that takes in the total number of items and the number of items per page and returns an array of page sizes. This function is used to calculate the total number of pages based on the `totalMinted` and `perPage` props passed in to the `AssetList` component. \n\nThe `Empty` component is a simple component that displays a message when the asset list is empty. It takes in an `empty` prop that can be used to customize the message. \n\nOverall, the `AssetList` component is a reusable component that can be used to display a list of assets in a grid format with pagination controls. It is highly customizable and can be used in a variety of contexts. Here is an example of how the `AssetList` component might be used in a larger project:\n\n```jsx\nimport AssetList from \"./AssetList\";\n\nconst MyPage = () => {\n const where = { owner: \"0x123abc\" };\n const orderBy = \"createdAt_DESC\";\n const perPage = 12;\n\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this component?\n This component is a two-column layout component that takes in two props, `LeftCol` and `RightCol`, to display content in the left and right columns respectively.\n\n2. What is the significance of the `AddClass` prop?\n The `AddClass` prop allows the developer to add additional CSS classes to the component, which can be useful for customizing the layout or styling of the component.\n\n3. What is the dependency used in this code?\n This code imports the React library, which is a JavaScript library used for building user interfaces.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/Grid/TwoColumComp.md"}}],["984",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/HowOffline.tsx)\n\nThe code defines a React component called `HowOffline` that renders a section of text explaining how offline asks work in the context of a smart contract-based marketplace for NFTs. The component takes a single prop called `onClick`, which is a function to be called when the user clicks the \"Ok\" button at the end of the text.\n\nThe text explains that an offline ask allows buyers to place a bid without sending funds to the smart contract. Instead, the buyer must send the funds directly to the seller as an \"over the counter\" deal, such as a bank wire transfer. Once the seller verifies receipt of the funds, they can accept the bid, which will transfer ownership of the NFT to the buyer.\n\nThe purpose of this component is to provide educational content to users of the marketplace, specifically those who may be unfamiliar with the concept of offline asks. By explaining how they work and what steps are involved, the component helps to build trust and confidence in the platform.\n\nHere is an example of how this component might be used in a larger project:\n\n```jsx\nimport HowOffline from './HowOffline';\n\nconst Marketplace = () => {\n const handleHowOfflineClick = () => {\n // Do something when the user clicks \"Ok\"\n };\n\n return (\n \n
\n );\n};\n```\n\nIn this example, the `HowOffline` component is rendered as part of a larger `Marketplace` component that provides an interface for buying and selling NFTs. The `handleHowOfflineClick` function is passed as a prop to `HowOffline` and will be called when the user clicks the \"Ok\" button. The rest of the `Marketplace` component would contain additional functionality and content related to the marketplace.\n## Questions: \n 1. What is the purpose of this code and where is it used in the zoo project?\n - This code is a React component that explains how offline asks work in the zoo project. It is likely used in a user interface or documentation section related to buying and selling NFTs.\n2. What props does the HowOffline component accept and how are they used?\n - The HowOffline component accepts a single prop called onClick, which is a function that will be called when the \"Ok\" button is clicked. It is likely used to dismiss the HowOffline component or trigger some other action.\n3. Are there any security concerns related to the process described in this component?\n - It is not clear from this component whether there are any security concerns related to accepting offline bids and receiving funds directly from buyers. A smart developer may want to investigate further to ensure that this process is secure and does not expose the seller or buyer to unnecessary risks.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/HowOffline.md"}}],["985",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/HowReservations.tsx)\n\nThe code defines a React functional component called `HowReservations`. This component renders a section of text that explains how reservations work for the LUX network launch. The component takes a single prop called `onClick`, which is a function that will be called when the \"Ok\" button is clicked.\n\nThe component returns a div element with a class of \"m-auto w-96\", which centers the content horizontally and sets a fixed width of 96 pixels. Inside the div, there is an h2 element with a class of \"mb-6 text-xl\", which sets the font size to extra large and adds a margin bottom of 6 units. This element displays the heading \"How do reservations work?\".\n\nBelow the heading, there is a p element with a class of \"mb-10\", which sets a margin bottom of 10 units. This element displays the text \"Reserve your NFT to ensure you are part of the LUX network at launch. If your bid is not accepted, your reservation will be refunded.\".\n\nFinally, there is a button element with a type of \"button\" and a class that sets various styles for the button. The button displays the text \"Ok\". When the button is clicked, the `onClick` function passed as a prop will be called.\n\nThis component can be used in the larger project to display information about how reservations work for the LUX network launch. It can be included in a page or modal that allows users to make reservations and provides them with information about the process. Here is an example of how the component can be used:\n\n```\nimport HowReservations from './HowReservations';\n\nfunction ReservationPage() {\n function handleOkClick() {\n // Handle the \"Ok\" button click\n }\n\n return (\n Welcome to the NFT Marketplace
\nHere you can buy and sell unique digital assets.
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this component?\n- This component is designed to display information about how reservations work for the LUX network launch and provide a button to acknowledge the information.\n\n2. What is the expected behavior when the button is clicked?\n- The onClick function passed as a prop will be executed, but the specific behavior is not defined in this component.\n\n3. What styling classes are being used in this component?\n- The component is using a variety of Tailwind CSS classes to style the text, button, and container.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/HowReservations.md"}}],["986",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/InfinityLoader.tsx)\n\nThe code above defines a React component called `InfinityLoader`. This component is responsible for rendering an animated infinity symbol that is used to indicate that a transaction is pending. The component takes in three optional props: `alt`, `height`, and `width`. \n\nThe `Image` component is imported from the `../components/Image` file. This component is likely a custom implementation of the standard HTML `img` tag that allows for more flexibility and customization. \n\nThe `InfinityLoader` component returns an instance of the `Image` component with the `src` prop set to the path of an animated infinity symbol. The `alt`, `height`, and `width` props are passed through to the `Image` component, allowing for customization of the rendered image.\n\nThis component is likely used in various places throughout the larger project to indicate that a transaction is pending. For example, it may be used in a payment processing flow to indicate that a payment is being processed and the user should wait for confirmation. \n\nHere is an example of how the `InfinityLoader` component may be used in a React component:\n\n```\nimport React from 'react';\nimport { InfinityLoader } from 'zoo';\n\nconst PaymentProcessing = () => {\n return (\n Make a Reservation
\n\n
\n );\n};\n\nexport default PaymentProcessing;\n```\n\nIn the example above, the `InfinityLoader` component is used to indicate that a payment is being processed. The `alt` prop is set to \"Payment Processing\" and the `height` and `width` props are set to 64 to increase the size of the rendered image.\n## Questions: \n 1. What is the purpose of the `Image` component being imported?\n - The `Image` component is being imported from a file located at `../components/Image`. It is likely used to display images within the application.\n\n2. What is the purpose of the `InfinityLoader` function?\n - The `InfinityLoader` function returns an `Image` component with a default source of `/animated-infinity.svg` and customizable `alt`, `height`, and `width` props. It is likely used as a loading animation for pending transactions.\n\n3. What type of file is this code located in?\n - The code is located in a file located at `zoo`. It is unclear what type of file it is without further context.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/InfinityLoader.md"}}],["987",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/InfoComp/InfoComp.tsx)\n\nThe `InfoComp` component is a React component that displays a carousel of information cards. The component imports the `useState` hook from the `react` library, the `Slider` component from the `react-slick` library, and the `Image` component from the `next/image` library. It also imports two CSS files for styling the carousel.\n\nThe component defines an array of objects called `data`, where each object represents an information card. Each card has an `id`, a `title`, a `description`, and an `image`. The component also defines a `settings` object that configures the behavior of the `Slider` component.\n\nThe `return` statement of the component renders the carousel using the `Slider` component. The `Slider` component iterates over the `data` array and renders an information card for each object in the array. Each card is a `div` element that contains two child `div` elements. The first child `div` element contains the `title` and `description` of the card, and the second child `div` element contains the `image` of the card. The `Image` component is used to display the image, and its `src`, `width`, `height`, and `alt` attributes are set using the `image` property of the current object in the `data` array.\n\nThe `Slider` component is also configured to display navigation dots and to allow infinite scrolling. The component also defines two buttons that allow the user to navigate to the previous or next card in the carousel. These buttons are displayed at the bottom of the carousel and are only visible when the user hovers over them.\n\nThe `InfoComp` component can be used in a larger project to display a carousel of information cards. The `data` array can be customized to include different cards with different titles, descriptions, and images. The `settings` object can also be customized to change the behavior of the carousel. The component can be styled using CSS to match the design of the larger project. An example usage of the `InfoComp` component is shown below:\n\n```\nimport InfoComp from './InfoComp'\n\nconst HomePage = () => {\n return (\n Processing Payment
\nPlease wait while we process your payment...
\n\n
\n )\n}\n\nexport default HomePage\n```\n## Questions: \n 1. What is the purpose of the `InfoComp` component?\n- The `InfoComp` component is used to display a carousel of information cards containing titles, descriptions, and images.\n\n2. What library is being used for the carousel functionality?\n- The `react-slick` library is being used for the carousel functionality.\n\n3. What is the purpose of the `useState` hook being used in this component?\n- The `useState` hook is being used to store a reference to the `Slider` component, which is used to control the carousel navigation buttons.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/InfoComp/InfoComp.md"}}],["988",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazyAcceptBidButton.tsx)\n\nThe code above is a React component that exports a button component called `LazyAcceptBidButton`. This button is used to accept a bid for a specific token in a market. The component takes in several props, including `dropId`, `name`, `bidder`, `onError`, and `onAccept`. \n\nThe `useActiveWeb3React` hook is used to get the current user's account, and the `useGasPrice` hook is used to get the current gas price. The `useContract` hook is used to get the `App` and `Market` contracts. \n\nThe `useEffect` hook is used to fetch the bid for the specified token using the `market.lazyBidForTokenBidder` function. If a bid is found, it is stored in the `bid` state using the `setBid` function. \n\nThe `acceptBid` function is called when the button is clicked. It first checks if a bid exists, and if not, it returns. If a bid exists, it calls the `app.acceptLazyBid` function to accept the bid. If the transaction is successful, the `onAccept` function is called with the `dropId` as an argument. If the transaction fails, the `onError` function is called with the error as an argument. \n\nThe `LazyAcceptBidButton` component returns a button element with the text \"Accept Bid\". When the button is clicked, the `acceptBid` function is called. \n\nThis component can be used in a larger project that involves a marketplace for buying and selling tokens. It provides an easy way for users to accept bids for their tokens. An example usage of this component is shown below:\n\n```\nWelcome to the Zoo!
\nNo bids yet for this drop.
}\n/>\n```\n## Questions: \n 1. What is the purpose of the `LazyBidList` component?\n- The `LazyBidList` component is used to display a list of bids based on the provided filter criteria, and includes functionality for converting bid amounts to USD.\n\n2. What is the purpose of the `GET_BIDS` GraphQL query?\n- The `GET_BIDS` query is used to retrieve bid data from a GraphQL API, including the bid ID, amount, creation timestamp, currency ID, and bidder ID.\n\n3. What is the purpose of the `LazyBidFilter` type?\n- The `LazyBidFilter` type is used to define the filter criteria that can be applied to the `LazyBidList` component, including the drop ID, token type name, and bidder ID.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/LazyBidList.md"}}],["991",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazyBidModal.tsx)\n\nThe `LazyBidModal` function is a React component that renders a modal window for a bid on a media asset. The component takes several props, including `dropId`, `name`, `bid`, `isOpen`, and `onClose`. \n\nThe component imports several other components and functions from other files in the project, including `Modal`, `ModalHeader`, `useActiveWeb3React`, `getContent`, `usePrice`, `formatCurrencyAmountWithCommas`, `isSameAddress`, `shortenAddress`, `LazyRemoveBidButton`, `useContract`, `LazyBidItem`, and `LazyAcceptBidButton`.\n\nThe component uses the `useActiveWeb3React` hook to get the current user's account, and the `useContract` hook to get the `owner` of the media asset. It also uses several other functions to get information about the bid, including the `type`, `given_name`, `bidder`, `currency`, and `tokenId`.\n\nThe component conditionally renders several elements based on the user's account and the bid information. For example, if the user is the bidder and the bid is not offline, a message is displayed indicating that the bidder's address will be refunded if the bid is removed. If the user is the owner of the media asset, buttons are displayed to remove or accept the bid.\n\nOverall, this component provides a way for users to view and manage bids on media assets in a modal window. It is likely used in conjunction with other components and functions in the larger project to provide a complete user interface for buying and selling media assets. \n\nExample usage:\n\n```jsx\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `dynamic` function being imported from 'next/dynamic'?\n- The `dynamic` function is used to dynamically import components in Next.js, allowing for code splitting and improved performance.\n\n2. What is the significance of the `ssr: false` option being passed to the `dynamic` function?\n- The `ssr: false` option disables server-side rendering for the dynamically imported components, which can improve performance and prevent issues with server-side rendering.\n\n3. What is the purpose of the `HomeCard` component and what props does it accept?\n- The `HomeCard` component appears to be a reusable component for displaying information about a particular NFT collection. It accepts props for the GLB file path, collection name, top offer, and NFT name.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/MarketHero/HomeCard.md"}}],["996",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/MarketHero/MarketHero.tsx)\n\nThe code above is a React component called `MarketHero` that renders a two-column layout with a `WelcomeCard` component on the left and a `HomeCard` component on the right. The `TwoColumComp` component is imported from the `../Grid/TwoColumComp` file and is used to create the two-column layout. The `AddClass` prop is used to add a margin-top of 5 pixels on small screens and 1 pixel on large screens.\n\nThe `WelcomeCard` and `HomeCard` components are imported from their respective files and are used as the content for the left and right columns, respectively. These components are likely to contain information about the zoo, such as its history, mission, and featured animals.\n\nThe `MarketHero` component is exported as the default export of the file, which means it can be imported and used in other files within the project. For example, it could be used in the homepage of the zoo's website to showcase important information about the zoo and its offerings.\n\nHere is an example of how the `MarketHero` component could be used in a hypothetical `HomePage` component:\n\n```\nimport React from 'react'\nimport MarketHero from './MarketHero'\n\nconst HomePage = () => {\n return (\n \n
\n )\n}\n\nexport default HomePage\n```\n\nOverall, the `MarketHero` component serves as a reusable and flexible way to display important information about the zoo in a visually appealing way.\n## Questions: \n 1. What is the purpose of the `MarketHero` component?\n - The `MarketHero` component is used to render a `TwoColumComp` component with a `WelcomeCard` component in the left column and a `HomeCard` component in the right column.\n\n2. What are the dependencies of this file?\n - This file imports `React`, `TwoColumComp`, `HomeCard`, and `WelcomeCard` from other files.\n\n3. What props are being passed to the `TwoColumComp` component?\n - The `TwoColumComp` component is receiving the `AddClass` prop with a value of `\"mt-5 lg:mt-1\"`, the `LeftCol` prop with a value of `\n
\n )\n}\n\nexport default HomePage\n```\n\nIn this example, the `WelcomeCard` component is used on the `HomePage` component to display a welcome message with custom text. The `tittle` and `subtittle` props are passed in to override the default placeholder text. The buttons on the card could be linked to other parts of the application, such as a marketplace or gallery of NFTs.\n## Questions: \n 1. What is the purpose of this component?\n This component is a WelcomeCard that displays a main title, subtitle, and two buttons for buying and exploring ZOO NFTs.\n\n2. What props can be passed to this component?\n The component accepts two optional props: \"tittle\" (which sets the main title text) and \"subtittle\" (which sets the subtitle text).\n\n3. What is the significance of the CSS classes used in this component?\n The CSS classes are used to style the component's layout and appearance. The classes with the \"h-\" prefix set the height of the elements, while the classes with the \"w-\" prefix set the width. The \"p-\" class sets padding, and the \"m-\" class sets margin. The \"text-\" class sets the font size, and the \"border\" class sets a border around the button elements.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/MarketHero/WelcomeCard.md"}}],["998",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Modelview/MovingModelviewer.tsx)\n\nThe `MovingModelviewer` component is a React component that renders a 3D model viewer using the `model-viewer` web component from Google. The component takes in several props, including the path to a GLB file, a USDZ file, a zoom level, and a boolean flag for whether to display multiple models. \n\nThe component maintains state for the current GLB source and the current model index. It also defines an array of GLB file paths for multiple models. \n\nThe `ModelVie` variable is a string that contains the HTML for the `model-viewer` component. It sets various attributes for the component, including the source file, loading and reveal behavior, camera controls, auto-rotate, autoplay, and AR (augmented reality) settings. \n\nThe `useEffect` hook is used to update the GLB source and current model index every 7 seconds. It sets a timeout that increments the current model index and updates the GLB source to the corresponding file path. If the current model index exceeds the length of the array, it resets to 0. The `useEffect` hook also returns an empty function to clean up any resources when the component unmounts. \n\nThe component returns a div that renders the `model-viewer` component using the `dangerouslySetInnerHTML` prop to set the HTML from the `ModelVie` variable. \n\nThis component can be used to display 3D models in a web application, with the ability to switch between multiple models and view them in AR mode. It can be customized with different GLB and USDZ files, zoom levels, and other attributes. \n\nExample usage:\n\n```\nimport MovingModelviewer from './MovingModelviewer'\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `MovingModelviewer` component?\n- The `MovingModelviewer` component is a React component that renders a 3D model viewer using the Google Model Viewer library. It can display multiple GLB models and automatically switch between them after a set time interval.\n\n2. What props can be passed to the `MovingModelviewer` component?\n- The `MovingModelviewer` component accepts four optional props: `glb` (a string representing the path to the default GLB model), `usdz` (a string representing the path to the USDZ model), `zoom` (a string representing the maximum field of view), and `multiple` (a boolean indicating whether to display multiple models).\n\n3. What is the purpose of the `useEffect` hook in the `MovingModelviewer` component?\n- The `useEffect` hook is used to update the `GlbSource` and `CurrentModel` state variables after a set time interval. It switches between the GLB models in the `Arr` array and resets the index to 0 when it reaches the end of the array. The `useEffect` hook also returns an empty function to clean up any resources when the component unmounts.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/Modelview/MovingModelviewer.md"}}],["999",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/NftPageComp/NftRight.tsx)\n\nThe `NftRight` component in the `zoo` project is a React component that renders a right-hand side panel for displaying details about a non-fungible token (NFT). The component takes in several props, including `NftText`, `NftName`, `transaction`, `TokenId`, `Hash`, and `TokenStandard`, which are used to populate the various fields in the panel.\n\nThe panel is divided into two sections: \"Details\" and \"Proof of Authenticity\". The \"Details\" section displays information about the NFT, including the transaction ID, token ID, hash, and token standard. Each piece of information is displayed in a grid format with the label on the left and the value on the right. The \"Proof of Authenticity\" section displays the price of the NFT in $zoo, as well as links to view the transaction on Ether Scan and IPFs.\n\nThe component uses Tailwind CSS classes to style the panel, including setting the width to 300px on small screens and 400px on large screens. The panel also has a gradient border and a black background.\n\nThis component can be used in a larger project that involves displaying NFTs and their associated details. For example, it could be used in an NFT marketplace or a digital art gallery. The component could be reused throughout the project to display NFT details in a consistent and visually appealing way. Here is an example of how the component could be used in a larger React application:\n\n```\nimport React from 'react';\nimport NftRight from './NftRight';\n\nconst NftDetails = () => {\n return (\n \n
\n );\n};\n\nexport default NftDetails;\n```\n\nIn this example, the `NftDetails` component displays an NFT image and other details on the left-hand side of the screen, and the `NftRight` component is used to display additional details about the NFT on the right-hand side of the screen. By using the `NftRight` component, the project can ensure that NFT details are displayed consistently throughout the application.\n## Questions: \n 1. What is the purpose of this component and how is it used in the project?\n - This component is used to display details and information about a specific NFT (non-fungible token) and its transaction history. It can be used in a larger application that involves buying, selling, or trading NFTs.\n2. What are the default values for the props passed to this component?\n - The default values for the props are: NftText = 'To hatch or to hold...', NftName = 'Egg#4', transaction = '8xx902xcbx93..', TokenId = '43', Hash = '8xbsxbc9', TokenStandard = 'ERC-721'. These values will be used if the props are not explicitly passed to the component.\n3. What is the purpose of the \"borderGrad\" class and where is it defined?\n - The \"borderGrad\" class is used to apply a gradient border to the div elements that contain the NFT details and proof of authenticity. It is not defined in this file and must be defined elsewhere in the project's CSS or styling files.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/NftPageComp/NftRight.md"}}],["1000",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Rankings/RankingsRow.tsx)\n\nThe code above defines a React component called `RankingsRow` that renders a row for a rankings table. The component takes in four props: `Rank`, `Name`, `addy`, and `Rankid`. \n\nThe component returns a `div` element with a class of `grid` that contains three columns. The first column spans three columns and displays the rank and name of the item. The second column displays the `addy` prop, which is a string representing an Ethereum address. The third column contains a button that, when clicked, navigates to a page with more information about the item.\n\nThe `useRouter` hook from the `next/router` module is used to handle the navigation when the button is clicked. The `Image` component from the `next/image` module is used to display a right arrow icon.\n\nThis component can be used in a larger project that displays rankings data. The component can be reused for each row in the rankings table, with the appropriate props passed in for each item. For example:\n\n```\nimport RankingsRow from './RankingsRow'\n\nconst rankingsData = [\n { Rank: 1, Name: '@finessequeen', addy: '0xd8 … 3a8db', Rankid: 0 },\n { Rank: 2, Name: '@crypto_king', addy: '0x4f … 8c9a', Rankid: 1 },\n { Rank: 3, Name: '@blockchain_babe', addy: '0x1a … 2b3f', Rankid: 2 },\n]\n\nconst RankingsTable = () => {\n return (\n \n {/* Display NFT image and other details */}\n
\n \n
\n \n {rankingsData.map((item) => (\n
\n )\n}\n\nexport default RankingsTable\n```\n\nIn this example, the `RankingsTable` component maps over an array of rankings data and renders a `RankingsRow` component for each item in the array. The `key` prop is set to the `Rankid` prop of each item to ensure that each row is uniquely identified.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `RankingsRow` that renders a row of data for a rankings table.\n\n2. What dependencies does this code use?\n- This code imports several dependencies from the `next` and `react` libraries, including `Link`, `Image`, and `useRouter`.\n\n3. What props does the `RankingsRow` component accept?\n- The `RankingsRow` component accepts four props: `Rank`, `Name`, `addy`, and `Rankid`. These props are used to populate the data displayed in the row.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/Rankings/RankingsRow.md"}}],["1001",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/RemoveBidButton.tsx)\n\nThe code defines a React component called `RemoveBidButton` that renders a button to remove a bid for a given token. The component takes in several props including `tokenId`, `tokenType`, `currency`, `onError`, and `onRemove`. \n\nThe component uses several hooks including `useActiveWeb3React`, `useGasPrice`, and `useContract` to interact with the Ethereum blockchain. Specifically, it uses the `app` and `media` contracts to remove a bid for the given `tokenId`. If the `currency` is the native currency (e.g. Ether), it uses the `app` contract to remove the bid. Otherwise, it uses the `media` contract. \n\nIf the removal of the bid is successful, the `onRemove` callback is called with the `tokenId`. If there is an error, the `onError` callback is called with the error. Additionally, the component uses the `useTransactionPopups` hook to display transaction popups for successful and failed transactions.\n\nThe component returns a button element with the text \"Remove Bid\" that calls the `removeBid` function when clicked. The `removeBid` function attempts to remove the bid using the appropriate contract and displays transaction popups or error popups as necessary.\n\nThis component can be used in a larger project that involves buying and selling tokens on the Ethereum blockchain. It provides a simple way for users to remove their bids on tokens they are no longer interested in purchasing. Here is an example usage of the component:\n\n```\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `SelectCurrency` component?\n - The `SelectCurrency` component is used to display a list of supported payment currencies and allow the user to select one.\n2. Where is the `useActiveWeb3React` hook imported from?\n - The `useActiveWeb3React` hook is imported from a file located in the `../hooks` directory.\n3. What is the structure of the data returned by the `getSupportedPaymentCurrencies` function?\n - The `getSupportedPaymentCurrencies` function returns an array of currency objects, each with a `symbol` property.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/SelectCurrency.md"}}],["1003",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/SetAsk.tsx)\n\nThe `SetAsk` component is used to set an asking price for a particular asset in the Zoo project. It imports various dependencies such as `Currency`, `Token`, `ZERO_ADDRESS`, `formatCurrencyFromRawAmount`, `useActiveWeb3React`, `useContract`, `useAsset`, `useGasPrice`, `Input`, `useState`, `Button`, `SelectCurrency`, `CurrencyLogo`, `Checkbox`, `Switch`, `Typography`, `CheckIcon`, `MinusIcon`, `PlusIcon`, `t`, `i18n`, and `SetAskButton`. \n\nThe component takes in a `tokenId` prop, which is used to retrieve the asset's information such as the `ask`, `currencyToken`, and `type` from the `useAsset` hook. The `ask` object contains the current asking price for the asset, while the `currencyToken` object contains information about the currency used for the asking price. The `type` prop is used to display the type of asset being priced.\n\nThe component renders an input field where the user can enter the asking price for the asset. The `value` state is used to store the value entered by the user. The `selectedCurrencyToken` state is used to store the currency used for the asking price. The `showSelectCurrency` state is used to toggle the display of the `SelectCurrency` component, which allows the user to select the currency used for the asking price.\n\nWhen the component mounts, the `useEffect` hook is called to set the initial values of `selectedCurrencyToken`, `value`, and `offline` based on the `ask` and `currencyToken` objects retrieved from the `useAsset` hook.\n\nThe component also renders a `SetAskButton` component, which is used to submit the asking price to the blockchain. The `tokenType`, `tokenId`, `amount`, `currencyToken`, and `offline` props are passed to the `SetAskButton` component.\n\nThe component also renders a `Switch` component, which is used to toggle the `offline` state. However, this feature is currently commented out.\n\nOverall, the `SetAsk` component provides a user interface for setting an asking price for a particular asset in the Zoo project. It allows the user to select the currency used for the asking price and submit the asking price to the blockchain.\n## Questions: \n 1. What is the purpose of the `SetAsk` component?\n- The `SetAsk` component is used to set an ask price for a given token.\n\n2. What external libraries or dependencies does this code use?\n- This code imports various functions and hooks from other files within the project, as well as external libraries such as `ethers` and `@headlessui/react`.\n\n3. What is the significance of the `offline` state variable?\n- It is unclear from the provided code what the `offline` state variable is used for, as it is currently commented out. It may have been intended to toggle whether the ask price is available for offline transactions.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/SetAsk.md"}}],["1004",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/SetAskButton.tsx)\n\nThe code is a React component called `SetAskButton` that allows a user to set an asking price for a specific token. The component takes in several props including `tokenId`, `tokenType`, `amount`, `currencyToken`, and `offline`. \n\nThe component first imports several dependencies including `Currency` from the `@zoolabs/zdk` library, `ethers` from the `ethers` library, and several custom hooks from the `../hooks` and `../state` directories. \n\nThe `SetAskButton` component then defines a function called `setAsk` that is called when the user clicks the \"Set Ask\" button. This function first checks if an `amount` has been provided and if so, creates an `Ask` object with the provided `amount`, `currencyToken`, and `offline` status. The `amount` is converted to the appropriate units using the `ethers.utils.parseUnits` function. The `media` contract is then used to set the ask for the specified `tokenId` with the `ask` object and the `account` and `gasPrice` values. If successful, a transaction popup is added to the state using the `addTransactionPopup` function. If an error occurs, an error popup is added to the state using the `addErrorPopup` function.\n\nFinally, the component returns a button element with the text \"Set Ask\" that calls the `setAsk` function when clicked. The button has several CSS classes applied to it for styling purposes.\n\nThis component can be used in a larger project that involves buying and selling tokens. It allows users to set an asking price for their tokens, which can then be viewed by potential buyers. The component can be integrated into a larger UI that displays a user's tokens and allows them to manage their asking prices. \n\nExample usage:\n\n```\nSelected currency: {selectedCurrency ? selectedCurrency.symbol : 'None'}
\n {/* rest of payment form */}\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `SetBid` component?\n- The `SetBid` component is used to display and handle the process of setting a bid for a specific token.\n\n2. What external libraries or packages are being imported in this file?\n- The file is importing `react`, `@zoolabs/zdk`, `@lingui/core`, `@lingui/macro`, and `../functions` and `../hooks` from local files.\n\n3. What is the role of the `useEffect` hook in this code?\n- The `useEffect` hook is used to reset the `pendingTx` state variable whenever the `tokenId`, `account`, or `chainId` variables change.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/SetBid.md"}}],["1006",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/SetBidButton.tsx)\n\nThe code is a React component called `SetBidButton` that allows a user to place a bid on a particular token. The component takes in several props including `ask`, `tokenId`, `tokenType`, `amount`, and `currencyToken`. \n\nThe component first imports several dependencies including `Currency` and `isNativeCurrency` from the `@zoolabs/zdk` library, as well as `useCallback` from React, and several custom hooks from the `../hooks` and `../state` directories. \n\nThe `SetBidButton` component then defines a function called `setBid` that is called when the user clicks the \"Place Bid\" button. This function first checks if an `amount` has been provided, and if not, displays a message indicating that an amount is required. \n\nIf an amount has been provided, the function creates a `Bid` object with the provided `amount`, `currency`, `bidder`, `recipient`, `sellOnShare`, and `offline` properties. The function then determines whether the `currencyToken` is a native currency or not using the `isNativeCurrency` function. If it is a native currency, the function calls the `setBid` function on the `app` contract with the provided `tokenId`, `bid`, and `gasPrice` properties. If it is not a native currency, the function calls the `setBid` function on the `media` contract with the provided `tokenId`, `bid`, and `gasPrice` properties. \n\nIf the function is successful, it adds a transaction popup to the UI indicating that a bid has been placed. If there is an error, it adds an error popup to the UI. \n\nFinally, the `SetBidButton` component returns a button element with the text \"Place Bid\" that, when clicked, calls the `setBid` function. \n\nThis component can be used in a larger project that involves buying and selling tokens. It allows users to place bids on tokens and handles the logic for interacting with the appropriate contracts depending on the type of currency being used. Developers can use this component as a building block for more complex UIs involving token trading. \n\nExample usage:\n\n```\nAsset Details
\n| Rank | \nColumn A | \nColumn B | \nColumn C | \nColumn D | \nColumn E | \n
|---|
| Column A | \nColumn B | \nColumn C | \nColumn D | \nActions | \n
|---|
\n
\n )\n}\n\nexport default WalletPage\n```\n\nIn this example, the `WalletNav` component is imported and used within the `WalletPage` component to render the navigation bar at the top of the page. \n\nOverall, this code is a small but important piece of the larger project's wallet feature, providing a reusable navigation component that can be easily imported and used in other parts of the project.\n## Questions: \n 1. What is the purpose of this component?\n - This component is called `WalletNav` and it returns a simple `div` element with the text \"WalletNav\". It is unclear what its purpose is beyond that.\n\n2. Are there any props that can be passed to this component?\n - It is not shown in this code whether or not this component accepts any props. Further investigation into its usage in the project would be necessary to determine if it does.\n\n3. Where is this component being used in the project?\n - Without additional context, it is unclear where this component is being used in the project. It would be helpful to know where it is being imported and rendered to understand its place in the overall application.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/WalletNav/WalletNav.md"}}],["1014",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/state.ts)\n\nThe `zoo` file contains several functions and types that are used in the larger project. The main purpose of this file is to provide functionality related to assets and token types. \n\nThe `useAsset` function is used to retrieve information about a specific asset, given its token ID. It uses the `useActiveWeb3React` and `useQuery` hooks to interact with the Ethereum blockchain and retrieve data from the GraphQL API. The function returns an object containing information about the asset, such as its owner, current ask price, and currency balance. \n\nThe `useTokenType` function is similar to `useAsset`, but is used to retrieve information about a specific token type, given its name. It also uses the `useActiveWeb3React` and `useQuery` hooks to interact with the Ethereum blockchain and retrieve data from the GraphQL API. The function returns an object containing information about the token type, such as its owner, current ask price, and minted/supply amounts. \n\nThe `usePrice` function is used to retrieve the current prices of various cryptocurrencies from the Coingecko API. It uses the `useActiveWeb3React` hook to determine the current chain ID, and returns an object containing the prices of various cryptocurrencies in USD. \n\nThe `useBids` function is used to retrieve information about the bids for a specific asset. It uses the `useActiveWeb3React` and `useQuery` hooks to interact with the Ethereum blockchain and retrieve data from the GraphQL API. The function returns an object containing information about the bids, such as the highest bid amount and the USD value of each bid. \n\nThe `useIsAddress` function is a utility function that is used to determine if a given Ethereum address is equal to another address. \n\nThe `AssetState` and `TokenType` types are used to define the shape of the objects returned by `useAsset` and `useTokenType`, respectively. \n\nOverall, this file provides important functionality for interacting with assets and token types in the larger project. It uses various hooks and APIs to retrieve data from the Ethereum blockchain and other sources, and returns objects containing useful information about assets and token types.\n## Questions: \n 1. What is the purpose of the `useAsset` function?\n- The `useAsset` function is used to retrieve information about a specific asset, such as its owner, current ask price, and currency balance.\n\n2. What is the purpose of the `usePrice` function?\n- The `usePrice` function is used to retrieve the current prices of various cryptocurrencies from the CoinGecko API, and to calculate the USD value of a given token amount.\n\n3. What is the purpose of the `useTokenTypes` function?\n- The `useTokenTypes` function is used to retrieve information about all token types associated with a particular contract, such as the number of tokens minted and their metadata URIs. However, it appears that this function is currently commented out and not being used in the code.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/state.md"}}],["1015",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/types.ts)\n\nThis file contains various types used in the zoo project, as well as a type for Coingecko prices and a type for the highest bid. \n\nThe `Currency`, `BigintIsh`, and `Token` types are imported from the `@zoolabs/zdk` library, while the `BigNumber` type is imported from the `ethers` library. These types are likely used throughout the project to represent different aspects of tokens and currency.\n\nThe `TokenId` type is defined as either a string or a number, and is likely used to represent the unique identifier for a token.\n\nThe `Ask` and `Bid` types are defined as objects with various properties, including an `amount` property that can be either a `BigintIsh` or a `BigNumber`, a `currency` property that is a string, and various other properties such as `offline`, `bidder`, and `recipient`. These types are likely used to represent bids and asks in the project's marketplace.\n\nThe `GraphUser`, `GraphCurrency`, `GraphMedia`, `GraphAsk`, `GraphBid`, and `GraphLazyBid` types are all used to represent different aspects of data returned from GraphQL queries. These types likely correspond to different types of data that can be queried from the project's GraphQL API.\n\nThe `CoingeckoPrices` type is defined as an object with keys that are coin IDs and values that are objects with a `usd` property. This type is likely used to represent price data from the Coingecko API.\n\nThe `HighestBid` type is defined as an object with a `bid` property that is a `GraphBid` object, a `usdAmount` property that is a number, and a `createdAtTimestamp` property that is a string. This type is likely used to represent the highest bid on a particular item in the marketplace.\n\nOverall, this file contains various types that are used throughout the zoo project to represent different aspects of tokens, currency, bids, asks, and data returned from GraphQL queries. These types are likely used extensively throughout the project to ensure consistency and type safety.\n## Questions: \n 1. What is the purpose of the `zdk` library and how is it used in this code?\n- The `zdk` library is imported to provide access to the `Currency`, `BigintIsh`, and `Token` types used in the `Ask` and `Bid` types.\n\n2. What is the difference between an `Ask` and a `Bid`?\n- An `Ask` represents an offer to sell a media asset, while a `Bid` represents an offer to buy a media asset. `Bid` includes additional properties such as `bidder`, `recipient`, and `sellOnShare`.\n\n3. What is the `GraphLazyBid` type and why is the `media` property commented out?\n- `GraphLazyBid` is a type used in GraphQL responses to represent a bid without the associated media asset. The `media` property is commented out because it is not always included in the response and is not required for all use cases.","metadata":{"source":".autodoc/docs/markdown/core/src/marketplace/types.md"}}],["1016",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/Auction/index.tsx)\n\nThis code defines a React component called `AuctionModal` that is used to create or edit auctions for animals in a virtual zoo. The component is imported into other parts of the project and is used to display a modal window with a form for creating or editing auctions.\n\nThe component imports several hooks from the project's state management system, including `useModalOpen`, `useAuctionModal`, and `useWalletModalToggle`. It also imports two custom hooks from the `state/zoo/hooks` module called `useCreateAuction` and `useEditAuction`. These hooks provide access to functions for creating and editing auctions.\n\nThe `AuctionModal` component takes two props: `nft` and `edit`. `nft` is an object that represents the animal being auctioned, and `edit` is a boolean flag that indicates whether the auction is being created or edited.\n\nThe component renders a `Modal` component from the project's `components` directory. The `Modal` component is a reusable component that displays a modal window with a header and content. The content of the modal is generated by the `getModalContent` function, which returns a form with input fields for the auction's duration, reserve price, and curator fee.\n\nThe `handleAuction` function is called when the user submits the form. It checks if the user is logged in and either creates a new auction or edits an existing one using the `useCreateAuction` and `useEditAuction` hooks. If the user is not logged in, the `toggleWallet` function is called to display a wallet modal.\n\nThe `successCallback` function is called when an auction is successfully created or edited. It closes the auction modal and redirects the user to the market page.\n\nOverall, this code provides a way for users to create and edit auctions for animals in the virtual zoo. It uses several hooks and custom functions to manage the state of the auction creation/editing process and displays a modal window with a form for inputting auction details.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code is a React component that creates a modal for putting an animal on auction. It uses various hooks and functions to handle the auction creation and editing process.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, Redux, Next.js, and various custom hooks and components.\n\n3. What is the role of the `useCallback` hook in this code?\n- The `useCallback` hook is used to define a memoized callback function that is passed as a parameter to other functions. It is used to optimize performance by preventing unnecessary re-renders of components that depend on the callback function.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/Auction/index.md"}}],["1017",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/CurrencyList.tsx)\n\nThe `CurrencyList` component is a React component that renders a list of tokens. It takes in a list of tokens, a selected token, and a callback function to handle selecting a token. The component uses the `FixedSizeList` component from the `react-window` library to render the list of tokens. \n\nEach token in the list is rendered as a `CurrencyRow` component, which displays the token's logo, symbol, and name. When a token is selected, the `onCurrencySelect` callback function is called with the selected token as an argument. \n\nThe `CurrencyList` component also includes a `BreakLineComponent` component, which is used to display a message indicating that the list of tokens has been expanded to include tokens from inactive token lists. \n\nThe `CurrencyList` component also includes an `ImportRow` component, which is used to display a row for importing a token. This row is only displayed if the index of the token in the list is greater than the length of the list of tokens. \n\nThe `CurrencyList` component also includes a `Balance` component, which is used to display the balance of a token. However, this component is currently commented out and not being used. \n\nOverall, the `CurrencyList` component is a reusable component that can be used to display a list of tokens and handle selecting a token. It is used in the larger project to allow users to select a token to trade on a decentralized exchange. \n\nExample usage:\n\n```jsx\nimport CurrencyList from \"./CurrencyList\";\n\nfunction MyComponent() {\n const tokens = [\n { name: \"Ethereum\", symbol: \"ETH\", logoURI: \"https://example.com/eth.png\" },\n { name: \"Wrapped Bitcoin\", symbol: \"WBTC\", logoURI: \"https://example.com/wbtc.png\" },\n { name: \"Chainlink\", symbol: \"LINK\", logoURI: \"https://example.com/link.png\" },\n ];\n\n const [selectedToken, setSelectedToken] = useState(null);\n\n const handleTokenSelect = (token) => {\n setSelectedToken(token);\n };\n\n return (\n Wallet Page
\n {/* other wallet-related components */}\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `CurrencyList` component?\n- The `CurrencyList` component is used to display a list of tokens/currencies and allows the user to select a currency.\n\n2. What is the significance of the `Token` type and how is it used in this code?\n- The `Token` type represents a cryptocurrency token and is used throughout the code to represent different currencies. It is used as a parameter in the `currencyKey` function and as a prop in the `CurrencyRow` and `CurrencyList` components.\n\n3. What is the purpose of the `Tag` and `TagContainer` components?\n- The `Tag` component is used to display a tag for a currency, while the `TagContainer` component is used to display multiple tags for a currency. However, these components are currently commented out and not being used in the code.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/BridgeSearchModal/CurrencyList.md"}}],["1018",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/CurrencyModalView.ts)\n\nThe code above defines an enum called `CurrencyModalView`. An enum is a data type that consists of a set of named values, and it is used to define a set of constants that represent possible values for a variable. In this case, the `CurrencyModalView` enum has four possible values: `search`, `manage`, `importToken`, and `importList`.\n\nThis enum is exported as the default value of the module, which means that it can be imported and used in other parts of the project. The purpose of this enum is likely to provide a set of options for a modal view that deals with currency-related functionality. For example, if there is a modal view that allows the user to manage their currencies, the `CurrencyModalView.manage` value could be used to indicate that the modal should display the manage view.\n\nHere is an example of how this enum could be used in a React component:\n\n```\nimport React from 'react';\nimport CurrencyModalView from './CurrencyModalView';\n\nfunction CurrencyModal(props) {\n const { view } = props;\n\n switch (view) {\n case CurrencyModalView.search:\n return Select a token:
\n| Name | \nAge | \n\n | \n
|---|
\n {/* main view of the application */}\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code defines a React component called `NFTExpandedModal` that renders a modal with content based on the `nft` and `isAuction` props passed to it. The content can be either a video or a 3D model viewer.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `React`, `next/router`, `next/dynamic`, and several custom hooks defined in `../../state/application/hooks`.\n\n3. What is the purpose of the `ssr: false` option passed to `next/dynamic`?\n- The `ssr: false` option tells Next.js to only load the `ModelViewer` component on the client side, rather than during server-side rendering. This is necessary because the `ModelViewer` component relies on WebGL, which is not available during server-side rendering.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/ExpandNftModal/index.md"}}],["1027",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/FreeNFTModal/index.tsx)\n\nThe `FreeNFTModal` component is a React component that renders a modal for freeing an NFT. It is part of the larger `zoo` project and is imported from various other files within the project. \n\nThe component imports several hooks from the `application` and `zoo` state slices, including `useModalOpen`, `useFreeNftModal`, and `useFreeNFT`. It also imports several components from the `components` folder, including `Modal`, `ModalHeader`, and `ModelViewer`. \n\nThe component takes an `nft` prop, which is an object representing the NFT to be freed. The modal displays a preview of the NFT, along with a message asking the user if they are sure they want to free the animal. If the user confirms, the NFT is freed and the collateral is returned, but the NFT is lost forever. \n\nThe `FreeNFTModal` component uses several hooks to manage state and handle user interactions. For example, it uses the `useModalOpen` hook to determine whether the modal is open, and the `useFreeNftModal` hook to toggle the modal. It also uses the `useActiveWeb3React` hook to get the user's account information, and the `useRouter` hook to navigate to a different page after the NFT is freed. \n\nThe component also defines several callback functions, including `successCallback`, which is called after the NFT is freed and navigates the user to the wallet page, and `freeNft`, which frees the NFT if the user is logged in and shows a wallet modal if they are not. \n\nThe `FreeNFTModal` component renders a `Modal` component that wraps the modal content. The modal content is defined in the `getModalContent` function, which returns a JSX element that displays the NFT preview, confirmation message, and \"Set Free\" button. The \"Set Free\" button is disabled if the NFT is currently being freed. \n\nOverall, the `FreeNFTModal` component provides a way for users to free their NFTs and get their collateral back, but at the cost of losing the NFT forever. It is a small but important part of the larger `zoo` project, which is likely a platform for buying, selling, and trading NFTs related to animals.\n## Questions: \n 1. What is the purpose of this code?\n- This code is a React component that renders a modal for freeing an animal NFT and returning collateral.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, Redux, Next.js, and dynamic importing.\n\n3. What is the role of the `useFreeNFT` hook?\n- The `useFreeNFT` hook is used to call the `freeNftF` function, which frees the specified animal NFT and returns collateral.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/FreeNFTModal/index.md"}}],["1028",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/HatchEggModal/Animation.tsx)\n\nThe `HatchEggAnimationModal` component is a React component that displays an animation of an egg hatching. The component is used as a modal in the larger project and is triggered when a user hatches an egg. The modal displays the animation and redirects the user to the wallet page once the animation is complete.\n\nThe component imports two hooks from the `application` state: `useHatchEggAnimationModal` and `useModalOpen`. These hooks are used to manage the state of the modal. The `useHatchEggAnimationModal` hook is used to toggle the modal on and off, while the `useModalOpen` hook is used to check if the modal is open.\n\nThe component also imports the `useRouter` hook from `next/router`. This hook is used to redirect the user to the wallet page once the animation is complete.\n\nThe component uses the `useState` hook to manage the state of the animation. The `useEffect` hook is used to set the animation based on the name of the egg that was hatched. If the name of the egg matches one of the cases in the switch statement, the corresponding animation is set. If the name of the egg does not match any of the cases, a default animation is set.\n\nThe `getModalContent` function returns the content of the modal. It contains a `video` element that displays the animation. The `onEnded` event listener is used to check if the animation has ended. If the animation has ended and the modal is open, the `toggleModal` function is called to close the modal. The `push` function is used to redirect the user to the wallet page.\n\nThe `Modal` component is used to display the content of the modal. It receives the `isOpen`, `onDismiss`, `minHeight`, and `isMax` props. The `isOpen` prop is used to check if the modal is open, the `onDismiss` prop is used to close the modal, the `minHeight` prop is used to set the minimum height of the modal, and the `isMax` prop is used to set the maximum height of the modal.\n\nExample usage:\n\n```jsx\nimport HatchEggAnimationModal from \"./path/to/HatchEggAnimationModal\";\n\nfunction MyComponent() {\n return (\n \n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code is for a React component that displays a modal for hatching an egg animation.\n\n2. What is the significance of the `useModalOpen` and `useHatchEggAnimationModal` hooks?\n- The `useModalOpen` hook is used to determine if the hatch egg animation modal is currently open. The `useHatchEggAnimationModal` hook is used to toggle the hatch egg animation modal.\n\n3. What is the purpose of the `switch` statement in the `useEffect` hook?\n- The `switch` statement sets the animation URL based on the name of the NFT (non-fungible token) passed as a prop to the component. If the name does not match any of the cases, a default animation is used. However, the `switch` statement is missing `break` statements, which may cause unexpected behavior.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/HatchEggModal/Animation.md"}}],["1029",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/HatchEggModal/index.tsx)\n\nThis code defines a React component called `HatchEggModal` that renders a modal for hatching an egg. The modal is opened by calling the `useHatchEggModal` hook from the `application` state slice. The modal displays a video of the egg and a button to hatch it. The button is disabled if the user is not logged in or if the egg is still in the process of hatching. \n\nThe component uses several hooks from the `web3-react`, `zoo`, and `hooks` libraries. The `useWeb3React` hook provides access to the user's Ethereum account, which is used to hatch the egg. The `useSelector` hook is used to retrieve the `loading` state from the `zoo` slice of the Redux store. The `useHatch` hook is used to hatch the egg. The `useMedia` hook is used to determine the user's screen size, and the `useZooToken` hook is used to retrieve the `ZooToken` contract instance. \n\nThe component also defines a `WALLET_VIEWS` object that maps different views of the wallet modal to string keys. \n\nThe `HatchEggModal` component takes two props: `nftItem` and `success`. `nftItem` is an object that contains information about the egg, including its `dropId` and `token_uri`. `success` is a callback function that is called when the egg is successfully hatched. \n\nThe `HatchEggModal` component renders a `Modal` component from the `components` directory. The `Modal` component is used to display the egg hatching modal. The `Modal` component takes several props, including `isOpen`, `onDismiss`, `minHeight`, `maxHeight`, `padding`, and `maxWidth`. \n\nThe `HatchEggModal` component defines several functions, including `toggleModal`, `toggleWallet`, `handleHatchEgg`, and `getModalContent`. `toggleModal` is a function that toggles the visibility of the egg hatching modal. `toggleWallet` is a function that toggles the visibility of the wallet modal. `handleHatchEgg` is a function that is called when the user clicks the hatch button. It checks if the user is logged in and then calls the `hatchEgg` function to hatch the egg. If the user is not logged in, it calls the `toggleWallet` function to open the wallet modal. `getModalContent` is a function that returns the content of the egg hatching modal. \n\nThe `HatchEggModal` component is exported as the default export of the file and can be used in other parts of the `zoo` project by importing it and rendering it. For example, it could be used in a page that displays the user's inventory of eggs and allows them to hatch them. \n\nExample usage:\n\n```jsx\nimport HatchEggModal from \"./path/to/HatchEggModal\";\n\nfunction EggInventory({ eggs }) {\n const [selectedEgg, setSelectedEgg] = useState(null);\n\n function handleHatchSuccess() {\n // do something when egg is hatched\n }\n\n return (\n \n {eggs.map((egg) => (\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `useHatch` hook and how is it used in this code?\n- The `useHatch` hook is used to hatch an egg by calling the `hatchEgg` function with the appropriate parameters. It is used in the `handleHatchEgg` function to hatch the egg when the \"Hatch Egg\" button is clicked.\n\n2. What is the significance of the `WALLET_VIEWS` object?\n- The `WALLET_VIEWS` object is used to define the different views of the wallet modal. It is used to determine which view to display when the wallet modal is opened.\n\n3. What is the purpose of the commented out code related to calculating the time left for hatching an egg?\n- The commented out code is used to calculate the time left for hatching an egg based on the egg's timestamp and the `HATCH_EGG_WAIT_PERIOD` environment variable. It is not currently being used in the code, but may have been used in a previous version or may be used in a future version.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/HatchEggModal/index.md"}}],["1030",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/MarketModals/BuyZooModal.tsx)\n\nThe code above defines a React functional component called `BuyZooModal`. This component is responsible for rendering a modal that allows users to buy a zoo. The modal is triggered by a button click and is displayed using the `Modal` component from the `components` directory.\n\nThe `BuyZooModal` component imports two hooks from the `state/application/hooks` module: `useModalOpen` and `useBuyZooModalToggle`. These hooks are used to manage the state of the modal. The `useModalOpen` hook returns a boolean value that indicates whether the modal is currently open or closed. The `useBuyZooModalToggle` hook returns a function that toggles the state of the modal.\n\nThe `BuyZooModal` component renders the `Modal` component with several props. The `isOpen` prop is set to the value returned by the `useModalOpen` hook, which determines whether the modal is displayed or not. The `onDismiss` prop is set to a function that does nothing when the modal is dismissed. The `isMax` prop is set to `true`, which means that the modal will take up the entire screen. The `maxWidth` prop is set to `1200`, which is the maximum width of the modal. The `maxHeight` prop is set to `80`, which is the maximum height of the modal.\n\nInside the `Modal` component, there is a `div` element that contains a `h1` element with the text \"Buy Zoo Modal\". When the `div` element is clicked, the `toggleBuyZooModal` function is called, which toggles the state of the modal.\n\nThis component can be used in the larger project to provide users with a way to buy a zoo. It can be rendered on a page or triggered by a button click. Here is an example of how this component can be used:\n\n```\nimport React from \"react\";\nimport BuyZooModal from \"path/to/BuyZooModal\";\n\nconst HomePage: React.FC = () => {\n const [showModal, setShowModal] = React.useState(false);\n\n const handleButtonClick = () => {\n setShowModal(true);\n };\n\n return (\n setSelectedEgg(egg)}>\n 
\n
\n ))}\n {selectedEgg && (\n \n
\n );\n};\n\nexport default HomePage;\n```\n\nIn this example, the `BuyZooModal` component is rendered conditionally based on the value of the `showModal` state variable. When the \"Buy a Zoo\" button is clicked, the `showModal` variable is set to `true`, which triggers the rendering of the `BuyZooModal` component.\n## Questions: \n 1. What is the purpose of the `BuyZooModal` component?\n- The `BuyZooModal` component is a React functional component that renders a modal for buying a zoo. It uses the `Modal` component from the `components` directory and some custom hooks from the `state/application/hooks` directory to manage the modal state.\n\n2. What props does the `Modal` component receive?\n- The `Modal` component receives four props: `isOpen`, `onDismiss`, `isMax`, and `maxWidth`. `isOpen` is a boolean that determines whether the modal is open or closed. `onDismiss` is a function that is called when the modal is dismissed. `isMax` is a boolean that determines whether the modal should be maximized. `maxWidth` is a number that determines the maximum width of the modal.\n\n3. What is the purpose of the `toggleBuyZooModal` function?\n- The `toggleBuyZooModal` function is a custom hook that toggles the state of the `buyZooModal` variable in the `state/application/hooks` directory. It is used to open and close the modal when the user clicks on the `div` element that contains the `h1` element.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/MarketModals/BuyZooModal.md"}}],["1031",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/NetworkMigrationModal/index.tsx)\n\nThe code is a React component that renders a modal for network migration in the zoo project. The modal is triggered by a button click and displays a countdown timer, a button to burn tokens, and a link to copy the burn address. The countdown timer is calculated based on the difference between the current date and a hardcoded end date. The timer is updated every minute using a setInterval function. The burn button calls a function that transfers the user's zoo tokens to a hardcoded burn address. The amount of tokens transferred is calculated based on the user's zoo balance. The burn address is copied to the clipboard when the user clicks the copy link. The component uses several hooks from the zoo project, including useModalOpen, useNetworkMigrationModalToggle, useTransferZoo, and useSelector. It also imports several components and libraries, including Modal, ModalHeader, Web3, and dynamic. The ModelViewer component is loaded dynamically using the dynamic function from Next.js. The component is exported as the default export of the file and can be used in other parts of the zoo project by importing it and rendering it as a React component. For example:\n\n```\nimport NetworkMigrationModal from 'zoo/components/NetworkMigrationModal';\n\nfunction MyComponent() {\n return (\n Welcome to the Zoo!
\n \n {showModal &&\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code is a React component that renders a modal for network migration. It includes a countdown timer, a button to burn tokens, and a link to copy a burn address.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, Redux, MUI, Web3, and Next.js.\n\n3. What is the significance of the `ssr: false` option in the `dynamic` import statement?\n- The `ssr: false` option in the `dynamic` import statement ensures that the `ModelViewer` component is not rendered on the server side, but only on the client side. This is important for performance reasons and to avoid issues with server-side rendering.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/NetworkMigrationModal/index.md"}}],["1032",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/NetworkModal/index.tsx)\n\nThe `NetworkModal` component is responsible for rendering a modal that allows users to switch between different Ethereum networks. The component imports various constants and hooks from other files in the project, including the `networks` configuration file and several custom hooks defined in the `application` and `hooks` directories.\n\nThe component first retrieves the current chain ID, library, and account using the `useActiveWeb3React` hook. It then checks if the chain ID is defined, and if not, returns `null` to prevent the modal from rendering.\n\nAssuming the chain ID is defined, the component renders a `Modal` component from the `components` directory, which displays a header with a \"Select a Network\" title and a message indicating the current network being used by the user. The available networks are then displayed in a grid, with each network represented by a button that includes an icon, label, and background color gradient. If the user is currently on a particular network, the corresponding button is highlighted with a different background color gradient.\n\nWhen a user clicks on a network button, the `toggleNetworkModal` function is called to close the modal, and a cookie is set to store the selected chain ID. Depending on whether the selected network is supported by MetaMask, the `library` object is used to call either the `wallet_switchEthereumChain` or `wallet_addEthereumChain` method to switch to the new network.\n\nOverall, the `NetworkModal` component provides a user-friendly way for users to switch between different Ethereum networks, which is an important feature for decentralized applications that may be deployed on multiple networks. The component can be used in conjunction with other components and hooks in the `application` and `hooks` directories to provide a seamless user experience for interacting with the Zoo project.\n## Questions: \n 1. What is the purpose of this code?\n- This code is responsible for rendering a modal that allows the user to select a network to connect to.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `next/image`, `react`, and `cookie-cutter`.\n\n3. What happens if the `chainId` is not defined?\n- If the `chainId` is not defined, the function returns `null` and the modal is not rendered.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/NetworkModal/index.md"}}],["1033",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/NetworkPopup/index.tsx)\n\nThe code is a React component that renders a network popup menu for a web3-enabled application. The popup displays a list of available networks and allows the user to switch between them. The component uses the `@headlessui/react` library to create the popup and the `next-themes` library to handle theme switching. \n\nThe `NetworkPopup` component takes two props: `userEthBalance` and `NATIVE`. `userEthBalance` is the user's ETH balance, and `NATIVE` is an object that maps network IDs to their native tokens. \n\nThe component uses the `useActiveWeb3React` hook from the `hooks` directory to get the current chain ID, library, and account. If there is no chain ID, the component returns `null`. \n\nThe component then renders a `Popover` component from `@headlessui/react`. The `Popover` component takes a function as a child that returns an object with an `open` property. The `open` property is `true` when the popup is open and `false` when it is closed. \n\nThe `Popover` component renders a button that displays the user's ETH balance and symbol. When the button is clicked, the popup opens, displaying a list of available networks. The list is rendered using the `AVAILABLE_NETWORKS` array from the `config/networks` file. \n\nFor each network in the list, the component renders a button that displays the network's name and icon. If the network is the current network, the button is disabled and displays a green dot to indicate that it is selected. If the network is not the current network, the button is clickable and switches the user to that network when clicked. \n\nThe component uses the `cookie-cutter` library to set the `chainId` cookie when the user switches networks. It also uses the `library` object to call the `wallet_switchEthereumChain` or `wallet_addEthereumChain` method to switch networks in the user's wallet. \n\nOverall, this component provides a simple and intuitive way for users to switch between networks in a web3-enabled application. \n\nExample usage:\n\n```jsx\nimport NetworkPopup from \"./components/NetworkPopup\";\n\nfunction App() {\n return (\n Welcome to my component
\n\n
\n );\n}\n```\n## Questions: \n 1. What does this code do?\n- This code exports a React component called `NetworkPopup` that renders a popover with a list of available networks and allows the user to switch between them.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies, including \"@headlessui/react\", \"next/link\", \"../../functions/styling\", \"next-themes\", \"hooks/useActiveWeb3React\", \"config/networks\", \"next/image\", and \"cookie-cutter\".\n\n3. What is the purpose of the `useActiveWeb3React` hook?\n- The `useActiveWeb3React` hook is used to retrieve the current chain ID, library, and account from the user's active Web3 provider. These values are used to determine which network the user is currently connected to and to switch between networks when the user selects a different one from the popover.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/NetworkPopup/index.md"}}],["1034",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/NftModal/index.tsx)\n\nThe `NftModal` component is a React functional component that renders a modal window containing information about a specific NFT (non-fungible token) item. The component receives several props, including the `nftItem` object, which contains information about the NFT, such as its name, attributes, and kind. The component also receives several callback functions, including `hatchEgg`, `feed`, `breed`, and `auction`, which are used to perform various actions related to the NFT.\n\nThe modal window is composed of two main sections: the left section displays a video or 3D model of the NFT, depending on its kind, while the right section displays various information about the NFT, such as its name, attributes, age, and description. The right section also contains several buttons that allow the user to perform various actions related to the NFT, such as hatching an egg, feeding the NFT, breeding it, or putting it up for auction.\n\nThe component uses several other components and libraries, such as `Modal` from the `components` directory, `BidModalHeader` from the `components/ModalHeader` directory, `Image` from the `next/image` library, `AccessAlarmRoundedIcon` from the `@mui/icons-material` library, and `ModelViewer` from the `components` directory. The component also uses several custom hooks from the `state/application/hooks` directory, such as `useMyNftModalToggle` and `useModalOpen`.\n\nOverall, the `NftModal` component provides a convenient way to display and interact with NFT items in the larger project. It allows users to view detailed information about their NFTs, as well as perform various actions related to them, such as hatching eggs, feeding, breeding, or auctioning them.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code defines a React functional component called `NftModal` that renders a modal window displaying information about a specific NFT item, as well as buttons to perform actions such as hatching, feeding, breeding, and auctioning the NFT.\n\n2. What external libraries or components does this code use?\n- This code imports several external libraries and components, including `React`, `next/image`, `@mui/icons-material`, `moment`, and a custom `Modal` component. It also uses a dynamic import to load a `ModelViewer` component from a separate file.\n\n3. What are the props passed to the `NftModal` component and how are they used?\n- The `NftModal` component receives four props: `nftItem`, `hatchEgg`, `feed`, `breed`, and `auction`. These props are used to display information about the NFT item and to define the behavior of the action buttons in the modal window. For example, clicking the \"HATCH\" button calls the `hatchEgg` function passed as a prop.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/NftModal/index.md"}}],["1035",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/NotificationModal/index.tsx)\n\nThe code is a React component that renders a notification dialog box. The dialog box is displayed as a modal that appears in the center of the screen and overlays the rest of the content. The component uses the `Dialog` and `Transition` components from the `@headlessui/react` library to create the modal.\n\nThe `Notification` component takes two optional props: `title` and `hideOpenButton`. The `title` prop is used to set the title of the dialog box, while the `hideOpenButton` prop is used to control whether or not the button that opens the dialog box is displayed. By default, the `hideOpenButton` prop is set to `true`, which means that the button is hidden.\n\nThe component uses the `useState` hook to manage the state of the dialog box. The `isOpen` state variable is used to determine whether the dialog box is open or closed. The `openModal` and `closeModal` functions are used to update the `isOpen` state variable.\n\nThe `return` statement of the component renders the dialog box. If the `hideOpenButton` prop is set to `false`, a button is displayed that, when clicked, opens the dialog box. The `Transition` component is used to animate the appearance and disappearance of the dialog box. When the `isOpen` state variable is `true`, the `Dialog` component is displayed. The `Dialog` component contains the content of the dialog box, including the title, message, and close button.\n\nThe `Dialog` component is styled using Tailwind CSS classes. The `Dialog.Title` component is used to display the title of the dialog box, while the `Dialog.Description` component is used to display the message. The `closeModal` function is called when the close button is clicked, which updates the `isOpen` state variable and closes the dialog box.\n\nOverall, this component can be used to display notifications or alerts to the user in a visually appealing and user-friendly way. It can be easily integrated into a larger React project by importing and using the `Notification` component. For example:\n\n```\nimport Notification from './Notification';\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `Notification` component?\n- The `Notification` component is a modal dialog box that can be opened and closed by the user.\n\n2. What is the role of the `Transition` component?\n- The `Transition` component is used to animate the appearance and disappearance of the modal dialog box.\n\n3. What is the purpose of the `hideOpenButton` prop?\n- The `hideOpenButton` prop is used to conditionally render the \"Open dialog\" button. If it is set to `true`, the button will not be displayed.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/NotificationModal/index.md"}}],["1036",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/SearchModal/CommonBases.tsx)\n\nThe `CommonBases` component is a React functional component that renders a list of commonly used tokens (referred to as \"bases\") for a given blockchain network. The component takes in three props: `chainId`, `selectedCurrency`, and `onSelect`. \n\nThe `chainId` prop is an optional number that specifies the blockchain network for which the list of common bases should be displayed. If `chainId` is not provided, the component will not render any bases. If `chainId` is provided, the component will look up the list of common bases for that network from the `COMMON_BASES` object in the `routing` configuration file. If the list of common bases for the specified network is not found, an empty array is used instead.\n\nThe `selectedCurrency` prop is an optional `Currency` object that represents the currently selected base. If `selectedCurrency` is provided, the component will disable the button for that base and prevent it from being selected again. \n\nThe `onSelect` prop is a callback function that is called when a base is selected. The function takes in a `Currency` object representing the selected base.\n\nThe component renders a list of buttons, one for each base in the list of common bases. Each button displays the base's logo and symbol, and is disabled if the base is already selected. When a button is clicked, the `onSelect` callback is called with the corresponding `Currency` object.\n\nThis component can be used in a larger project that involves selecting a base token for a trading pair. For example, in a decentralized exchange application, the user may need to select a base token before selecting a quote token to create a trading pair. The `CommonBases` component provides a pre-defined list of commonly used base tokens for the user to choose from, making the selection process easier and more intuitive. \n\nExample usage:\n\n```\nWelcome to my app
\n\n \n {showManage && (\n setShowManage(false)}\n setModalView={(view) => console.log(view)}\n setImportToken={(token) => console.log(token)}\n setImportList={(list) => console.log(list)}\n setListUrl={(url) => console.log(url)}\n />\n )}\n
\n );\n}\n```\n## Questions: \n 1. What dependencies does this code use?\n- This code uses React, react-virtualized-auto-sizer, and @lingui/macro as dependencies.\n\n2. What is the purpose of the Manage component?\n- The Manage component is responsible for rendering a modal that allows the user to manage lists and tokens.\n\n3. What props does the Manage component expect?\n- The Manage component expects onDismiss, setModalView, setImportList, setImportToken, and setListUrl as props, all of which are functions.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/SearchModal/Manage.md"}}],["1045",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/SearchModal/ManageLists.tsx)\n\nThe `ManageLists` component is responsible for rendering a list of token lists that can be managed by the user. It imports various components and hooks from other files in the project, including `AppDispatch`, `AppState`, `CheckCircle`, `Settings`, `AutoColumn`, `Row`, `RowBetween`, `RowFixed`, `useActiveListUrls`, `useAllLists`, `useIsListActive`, `useDispatch`, `useSelector`, `Button`, `CurrencyModalView`, `ExternalLink`, `ListLogo`, `ListToggle`, `ReactGA`, `TokenList`, `UNSUPPORTED_LIST_URLS`, `listVersionLabel`, `parseENSAddress`, `uriToHttp`, `useFetchListCallback`, `usePopper`, `classNames`, and `Popover`.\n\nThe `ManageLists` component renders an input field where the user can enter a URL or ENS name for a token list they want to import. As the user types, the component fetches the details of the list and displays them in a card below the input field. If the list is already imported, the component displays a checkmark and the text \"Loaded\" instead of the import button. If there is an error with the input or fetching the list, an error message is displayed.\n\nThe component also renders a list of all the token lists that have been imported by the user. Each list is displayed as a row with the list's logo, name, and number of tokens. The row also includes a toggle button that allows the user to enable or disable the list, a settings button that opens a popover with options to remove or update the list, and a background color that indicates whether the list is active or not.\n\nThe `ListRow` component is used to render each row in the list. It takes a `listUrl` prop and uses it to retrieve the corresponding list from the Redux store. It then renders the logo, name, and number of tokens for the list, along with the toggle and settings buttons. The component also handles user interactions with the buttons, such as enabling or disabling the list, removing the list, or updating the list.\n\nOverall, the `ManageLists` component provides a user-friendly interface for managing token lists in the project. It allows the user to easily import new lists, view details of existing lists, and enable or disable them as needed.\n## Questions: \n 1. What is the purpose of the `ManageLists` component?\n- The `ManageLists` component is responsible for displaying a list of imported token lists, allowing the user to add new lists, and importing a selected list.\n\n2. What is the purpose of the `listUrlRowHTMLId` function?\n- The `listUrlRowHTMLId` function generates an HTML ID for a list row based on its URL, replacing any periods with hyphens.\n\n3. What is the purpose of the `usePopper` hook?\n- The `usePopper` hook is used to position a popover element relative to a reference element, based on the specified placement.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/SearchModal/ManageLists.md"}}],["1046",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/SearchModal/ManageTokens.tsx)\n\nThe `ManageTokens` component is a React component that is responsible for managing custom tokens in the Zoo project. It imports several components and hooks from other files in the project, including `RowBetween`, `RowFixed`, `useRemoveUserAddedToken`, `useUserAddedTokens`, `CurrencyLogo`, `CurrencyModalView`, `ExternalLink`, `ExternalLinkIcon`, `ImportRow`, `Token`, `Trash`, `getExplorerLink`, `isAddress`, `useActiveWeb3React`, and `useToken`.\n\nThe component takes two props: `setModalView` and `setImportToken`. `setModalView` is a function that sets the view of the currency modal, and `setImportToken` is a function that sets the token to be imported.\n\nThe component renders a search input field that allows users to search for custom tokens by address or symbol. It also displays a list of all custom tokens that have been added by the user, along with the option to remove them. The list is generated using the `userAddedTokens` hook, which retrieves all custom tokens stored locally in the user's browser. The `removeToken` function is used to remove a token from the list when the user clicks on the trash icon next to it.\n\nThe component also provides a tip at the bottom of the page, informing users that custom tokens are stored locally in their browser.\n\nOverall, the `ManageTokens` component is an important part of the Zoo project, as it allows users to manage their custom tokens and provides a user-friendly interface for doing so. It is likely used in conjunction with other components and features of the project, such as the currency modal and token import functionality.\n## Questions: \n 1. What is the purpose of the `ManageTokens` component?\n- The `ManageTokens` component manages the display and removal of custom tokens stored locally in the user's browser.\n\n2. What external libraries or components are being used in this code?\n- The code imports several components from the `../../components` directory, as well as the `Token` type from the `@zoolabs/zdk` library and the `Trash` icon from the `react-feather` library.\n\n3. What is the significance of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the `tokenList` variable, which is an array of JSX elements representing the user's custom tokens. This can improve performance by preventing unnecessary re-renders of this component when other parts of the application change.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/SearchModal/ManageTokens.md"}}],["1047",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/SearchModal/sorting.ts)\n\nThe code imports `Currency`, `CurrencyAmount`, and `Token` from the `@zoolabs/zdk` library, as well as `useAllTokenBalances` and `useMemo` from `react`. It then defines a `balanceComparator` function that takes two optional `CurrencyAmount` arguments and returns a number indicating their relative order. The function first checks if both arguments are defined, and if so, compares them using the `greaterThan` and `equalTo` methods of `CurrencyAmount`. If only one argument is defined and greater than zero, it is considered greater than the other. If neither argument is defined or greater than zero, they are considered equal. \n\nThe `getTokenComparator` function takes an object of `CurrencyAmount` values indexed by token addresses and returns a comparator function that takes two `Token` arguments and returns a number indicating their relative order. The comparator first compares the balances of the two tokens using the `balanceComparator` function, and if they are equal, it compares their symbols using the `toLowerCase` method. If one or both tokens do not have a symbol, they are considered equal to other tokens without symbols.\n\nThe `useTokenComparator` function takes a boolean `inverted` argument and returns a memoized comparator function that takes two `Token` arguments and returns a number indicating their relative order. It first calls `useAllTokenBalances` to get an object of `CurrencyAmount` values indexed by token addresses, and then calls `getTokenComparator` with this object to get a comparator function. If `inverted` is true, it returns a new comparator function that reverses the order of the original comparator function by multiplying its result by -1. Otherwise, it returns the original comparator function.\n\nThis code can be used to sort lists of tokens by balance and symbol, such as in a wallet or exchange interface. For example, to sort an array of `Token` objects called `tokens` in ascending order by balance and symbol, you could call `tokens.sort(useTokenComparator(false))`. To sort them in descending order, you could call `tokens.sort(useTokenComparator(true))`.\n## Questions: \n 1. What is the purpose of the `useTokenComparator` function?\n- The `useTokenComparator` function returns a comparator function that can be used to sort an array of `Token` objects based on their balances and symbols.\n\n2. What is the significance of the `inverted` parameter in `useTokenComparator`?\n- The `inverted` parameter determines whether the comparator function should sort the tokens in ascending or descending order based on their balances and symbols.\n\n3. What is the role of the `balances` object in `getTokenComparator`?\n- The `balances` object is used to look up the balance of each token in the `Token` array being sorted, and then compare the balances to determine their order.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/SearchModal/sorting.md"}}],["1048",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/ShareNFTModal/index.tsx)\n\nThe `ShareNFTModal` component is a React component that renders a modal for sharing an NFT (non-fungible token) on social media platforms. The component imports two custom hooks from the `application` slice of the Redux store: `useModalOpen` and `useShareModal`. It also imports the `ApplicationModal` enum from the same slice, which is used to identify the modal being opened. Additionally, the component imports the `Modal` and `ModalHeader` components from the `components` directory, and several social media icons from the `react-icons` library.\n\nThe component takes two props: `nft`, which is an object representing the NFT being shared, and `edit`, which is a boolean indicating whether the NFT is being edited. The `nft` prop is required, while the `edit` prop is optional and defaults to `false`.\n\nThe `ShareNFTModal` component renders a modal that contains links to share the NFT on Twitter, Discord, and Gmail. The modal is opened and closed using the `modalOpen` and `toggleModal` variables, which are obtained from the `useModalOpen` and `useShareModal` hooks, respectively. The `getModalContent` function returns the JSX for the modal's content, which includes a header, a container for the social media links, and the links themselves. The links are styled with CSS classes and contain icons from the `react-icons` library.\n\nWhen the user clicks on the Twitter link, a new window is opened with a pre-populated tweet that includes the NFT's URL. When the user clicks on the Discord link, a new window is opened that prompts the user to authorize a Discord bot with certain permissions. The URL for the authorization request includes the NFT's ID as a state parameter. When the user clicks on the Gmail link, a new email is opened with the NFT's URL in the body.\n\nOverall, the `ShareNFTModal` component provides a convenient way for users to share NFTs on social media platforms. It can be used in conjunction with other components in the `zoo` project to create a seamless user experience for buying, selling, and sharing NFTs. For example, it could be used in conjunction with a component that displays a user's NFT collection, allowing the user to easily share their collection with others.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `ShareNFTModal` that displays a modal with social media sharing options for an NFT (non-fungible token).\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `react`, `react-icons`, and custom hooks from a `../../state/application` module.\n\n3. What is the significance of the `edit` prop?\n- The `edit` prop is an optional boolean value that defaults to `false`. It is not used within this component, but may be passed down to child components for conditional rendering based on whether the modal is being used for editing or sharing.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/ShareNFTModal/index.md"}}],["1049",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/TokenWarningModal/index.tsx)\n\nThis code defines a React component called `TokenWarningModal` that renders a modal window with a list of tokens and a confirmation button. The purpose of this component is to display a warning message to the user when they attempt to import a token that already exists in their wallet. The component takes three props: `isOpen`, `tokens`, and `onConfirm`. \n\nThe `isOpen` prop is a boolean that determines whether the modal is visible or not. The `tokens` prop is an array of `Token` objects that represent the tokens that are already in the user's wallet. The `onConfirm` prop is a callback function that is called when the user clicks the confirmation button.\n\nThe component renders a `Modal` component from the `../../components/Modal` module. The `Modal` component is a reusable component that provides a basic modal window with a header, body, and footer. The `isOpen` prop is passed to the `Modal` component to control its visibility. The `handleDismiss` function is defined using the `useCallback` hook, but it does not do anything.\n\nInside the `Modal` component, the `ImportToken` component from the `../SearchModal/ImportToken` module is rendered. The `ImportToken` component is a custom component that displays a list of tokens and allows the user to select one. The `tokens` prop is passed to the `ImportToken` component to populate the list. The `handleCurrencySelect` prop is passed to the `ImportToken` component as a callback function that is called when the user selects a token. This function is actually the `onConfirm` prop that was passed to the `TokenWarningModal` component.\n\nOverall, this code provides a simple way to display a warning message to the user when they attempt to import a token that already exists in their wallet. The `TokenWarningModal` component can be used in conjunction with other components in the `zoo` project to provide a more complete user interface for managing tokens. For example, it could be used in a settings page where the user can manage their wallet and import new tokens.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a React component called `TokenWarningModal` that renders a modal with a list of tokens and a confirmation button.\n\n2. What dependencies does this code have?\n This code imports `React`, `useCallback`, `ImportToken`, `Modal`, and `Token` from various modules.\n\n3. What props does the `TokenWarningModal` component expect?\n The `TokenWarningModal` component expects an `isOpen` boolean, an array of `tokens`, and an `onConfirm` function as props.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/TokenWarningModal/index.md"}}],["1050",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/TransactionConfirmationModal/index.tsx)\n\nThis code defines several React components that are used to display different types of transaction confirmation modals in the Zoo project. The modals are used to provide feedback to the user about the status of a transaction, such as whether it is pending, has been submitted, or has encountered an error. \n\nThe `ConfirmationPendingContent` component displays a modal with a loading animation and a message indicating that the transaction is waiting for confirmation. It also displays two lines of text that are passed in as props. \n\nThe `TransactionSubmittedContent` component displays a modal with a checkmark icon and a message indicating that the transaction has been submitted. It also provides a link to view the transaction on an explorer and a button to add a currency to MetaMask. The component takes several props, including the transaction hash, chain ID, and currency to add. \n\nThe `ConfirmationModalContent` component is a generic component that displays a modal with a title, top content, and bottom content. It is used as a wrapper for the other confirmation modals. \n\nThe `TransactionErrorContent` component displays a modal with an error icon and a message indicating that the transaction has encountered an error. It also provides a button to dismiss the modal. \n\nThe `TransactionConfirmationModal` component is the main component that is exported by this file. It takes several props, including whether the modal is open, whether the transaction is attempting, the transaction hash, and the content to display. It conditionally renders one of the other confirmation modals based on the state of the transaction. \n\nOverall, these components provide a consistent and user-friendly way to display transaction confirmation feedback to users in the Zoo project. Developers can use these components in their own code to provide transaction confirmation feedback to users. For example, they might use the `TransactionSubmittedContent` component to display a confirmation modal after a user has submitted a transaction to the blockchain.\n## Questions: \n 1. What external libraries or packages are being used in this code?\n- The code is importing several packages such as `react-feather`, `@zoolabs/zdk`, `@lingui/macro`, `lottie-react`, and some custom components from the `../../components` directory.\n\n2. What are the different components being exported in this file?\n- The file exports several React components such as `ConfirmationPendingContent`, `TransactionSubmittedContent`, `ConfirmationModalContent`, `TransactionErrorContent`, and `TransactionConfirmationModal`.\n\n3. What is the purpose of the `useAddTokenToMetaMask` hook being imported in this file?\n- The `useAddTokenToMetaMask` hook is being used to add a token to the user's MetaMask wallet. It is being called in the `TransactionSubmittedContent` component when the user clicks on the \"Add to MetaMask\" button.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/TransactionConfirmationModal/index.md"}}],["1051",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/TransactionFailedModal/index.tsx)\n\nThe code defines a React component called `TransactionFailedModal` that displays a modal dialog box with a message indicating that a transaction has been rejected. The component takes two props: `isOpen`, a boolean that determines whether the modal is visible, and `onDismiss`, a function that is called when the modal is dismissed.\n\nThe modal contains an image of a red X, a heading that says \"Uh Oh! Transaction rejected.\", and a button labeled \"Dismiss\". The text of the button is localized using the `@lingui/macro` and `@lingui/react` packages.\n\nThe component uses several other components and libraries to implement the modal. The `CloseIcon` component is imported from a file located in the `components` directory, and is used to display a clickable X icon in the upper-right corner of the modal. The `Image` component is imported from the `next/image` package, and is used to display the transaction-rejected.png image. The `Modal` component is imported from a file located in the `components` directory, and is used to display the modal dialog box.\n\nThe component is intended to be used in a larger project that involves transactions, such as a cryptocurrency exchange or a payment processing system. When a transaction is rejected, this component can be used to display a user-friendly error message to the user, indicating that the transaction was not successful and providing a way to dismiss the message. The component can be customized by changing the image, the heading, and the button text to fit the specific needs of the project. For example, the image could be replaced with a different icon or logo, and the heading could be changed to provide more specific information about the reason for the transaction rejection.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `TransactionFailedModal` that displays a modal with a message and an image when a transaction is rejected.\n\n2. What dependencies does this code use?\n- This code imports several dependencies including `CloseIcon` from a local file, `Image` from the `next/image` package, `Modal` from a local file, `React`, `t` and `useLingui` from the `@lingui` package.\n\n3. What props does the `TransactionFailedModal` component accept?\n- The `TransactionFailedModal` component accepts two props: `isOpen` which is a boolean that determines whether the modal is open or closed, and `onDismiss` which is a function that is called when the modal is dismissed.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/TransactionFailedModal/index.md"}}],["1052",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/WalletModal/Option.tsx)\n\nThe `Option` component is a reusable React component that renders an option item with an icon, header, and subheader. It can be used in various parts of the larger project, such as a navigation menu or a settings page. \n\nThe component takes in several props, including `link`, `clickable`, `size`, `onClick`, `color`, `header`, `subheader`, `icon`, `active`, and `id`. \n\nThe `link` prop is an optional string that specifies the URL to link to when the option is clicked. If `link` is provided, the component returns an anchor tag with the `content` as its child. If `link` is not provided, the component returns the `content` div.\n\nThe `clickable` prop is a boolean that determines whether the option is clickable or not. If `clickable` is `false`, the cursor is set to `not-allowed`.\n\nThe `size` prop is an optional number that specifies the size of the option. If `size` is not provided, the default size is used.\n\nThe `onClick` prop is an optional function that is called when the option is clicked.\n\nThe `color` prop is a required string that specifies the background color of the option.\n\nThe `header` prop is a required React node that specifies the main text of the option.\n\nThe `subheader` prop is an optional React node that specifies the subtext of the option.\n\nThe `icon` prop is a required string that specifies the URL of the icon to display.\n\nThe `active` prop is a boolean that determines whether the option is active or not. If `active` is `true`, the option is highlighted with a gradient background.\n\nThe `id` prop is a required string that specifies the ID of the option.\n\nThe `content` variable is a div that contains the header, subheader, and icon. The header and subheader are wrapped in divs with appropriate styles. The icon is an `Image` component from the `next/image` library.\n\nIf `link` is provided, the `content` div is returned as a child of an anchor tag. If `link` is not provided and `active` is `false`, the `content` div is returned. If `link` is not provided and `active` is `true`, the `content` div is returned as a child of a div with a gradient background.\n\nExample usage:\n\n```\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `SUPPORTED_WALLETS` and `injected` variables imported from `../../config/wallets`?\n- `SUPPORTED_WALLETS` is an object containing information about different wallet options that can be used to connect to the application. `injected` is a specific connector option that refers to the user's browser extension wallet.\n2. What is the `PendingView` component used for?\n- The `PendingView` component is used to display a loading screen while the application is initializing and attempting to connect to a wallet.\n3. What is the purpose of the `tryActivation` function passed as a prop to `PendingView`?\n- The `tryActivation` function is used to attempt to activate a specific wallet connector option. It takes in a connector object as an argument and attempts to activate it for use in the application.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/WalletModal/PendingView.md"}}],["1054",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/WalletModal/index.tsx)\n\nThe `WalletModal` component is responsible for rendering a modal that allows users to connect their wallets to the application. It imports various dependencies such as React, `useEffect`, `useState`, and several other components and hooks from the application.\n\nThe component defines a constant object `WALLET_VIEWS` that contains different views of the wallet modal, such as `OPTIONS`, `ACCOUNT`, and `PENDING`. It then defines the `WalletModal` function that takes in an object with three properties: `pendingTransactions`, `confirmedTransactions`, and `ENSName`. These properties are used to display the user's account details and pending transactions.\n\nThe function then uses the `useActiveWeb3React` hook to get the current account, chain ID, and connector. It also uses the `useLingui` hook to get the current language and the `useModalOpen` and `useWalletModalToggle` hooks to open and close the wallet modal.\n\nThe `WalletModal` function defines several `useEffect` hooks that handle the opening and closing of the modal, resetting the wallet view, and closing the modal on successful connection. It also defines a `getOptions` function that returns a list of wallet options that the user can connect to, depending on the device and browser.\n\nFinally, the `WalletModal` function returns a `Modal` component that displays the modal content. The content is determined by the current wallet view and whether there is an error connecting to the wallet. If there is an error, the modal displays an error message and a button to disconnect. If the user is connected and the wallet view is `ACCOUNT`, the modal displays the user's account details and pending transactions. Otherwise, the modal displays a list of wallet options and a link to learn more about wallets.\n\nOverall, the `WalletModal` component is an important part of the application's user interface, allowing users to connect their wallets and interact with the application.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code is a React component that renders a modal for selecting and connecting to different wallets. It uses various connectors from the `@web3-react` library and supports multiple wallets including MetaMask, WalletConnect, and Fortmatic.\n\n2. How does the code handle errors and what types of errors can occur?\n- The code handles errors by displaying an error message in the modal if there is an issue connecting to a wallet. Errors can include unsupported chain IDs, connection errors, and activation errors. The user can disconnect and try again or refresh the page.\n\n3. What is the role of the `useEffect` hooks in this code?\n- The `useEffect` hooks are used to handle various side effects such as closing the modal when a connection is successful, resetting the wallet view when the modal is opened, and detecting changes in the active connector or account. They also handle the case where the user is logged out and closes the modal.","metadata":{"source":".autodoc/docs/markdown/core/src/modals/WalletModal/index.md"}}],["1055",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/404.tsx)\n\nThe code above defines a React component called `NotFound` that renders a custom 404 error page. The purpose of this component is to provide a user-friendly message to the user when they try to access a page that does not exist. \n\nThe component uses the `Link` component from the `next/link` library to create a link to the homepage of the website. The `Link` component is used to create client-side navigation between pages, which is faster than traditional server-side navigation. \n\nThe `NotFound` component is designed to be used in a larger project, such as a website or web application, where it can be imported and used whenever a user tries to access a page that does not exist. By using this component, developers can provide a consistent and user-friendly experience to their users when they encounter a 404 error. \n\nHere is an example of how the `NotFound` component can be used in a larger project:\n\n```\nimport NotFound from './components/NotFound';\n\nfunction App() {\n return (\n Connect to your wallet
\n\n \n \n \n \n
\n );\n}\n\nexport default App;\n```\n\nIn this example, the `NotFound` component is used as the fallback route in a `Switch` component that defines the routes for the website. If the user tries to access a page that does not exist, the `NotFound` component will be rendered instead. \n\nOverall, the `NotFound` component is a useful tool for providing a better user experience in a larger project by handling 404 errors in a consistent and user-friendly way.\n## Questions: \n 1. What is the purpose of the `Link` import from \"next/link\"?\n \n The `Link` import is used to create a hyperlink to the homepage in the `NotFound` component.\n\n2. What is the significance of the `flex` and `items-center` classes in the `div` element?\n \n The `flex` class is used to create a flexible container for the child elements, while the `items-center` class is used to center the child elements horizontally and vertically within the container.\n\n3. Why is the `NotFound` component exported as the default export?\n \n The `NotFound` component is exported as the default export so that it can be imported and used in other parts of the `zoo` project without needing to specify a specific name for the import.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/404.md"}}],["1056",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/_app.tsx)\n\nThe code is the entry point for the Zoo project. It imports various dependencies and sets up the application's global state and providers. The code exports a function called MyApp that takes in an object with two properties: Component and pageProps. The Component property is a Next.js component that is rendered by MyApp, and pageProps are the initial props that are passed to the Component.\n\nThe code sets up various providers such as the ThemeProvider, I18nProvider, ReduxProvider, and SubgraphProvider. These providers are used to manage the application's state and provide context to the components. The code also sets up a PersistGate component that wraps the entire application. The PersistGate component is used to persist the application's state across page reloads.\n\nThe code initializes Google Analytics and sets up listeners for page views and errors. It also initializes the Lingui translation library and loads the translations for the current locale.\n\nThe code defines a GlobalHooks component that is used to conditionally activate the user's wallet connector based on the current chainId. The code also defines a Provider component that is used to conditionally set a provider to be hoisted per page. Similarly, the code defines a Layout component that is used to conditionally set a layout to be hoisted per page. Finally, the code defines a Guard component that is used to conditionally set a guard to be hoisted per page.\n\nThe code renders the Component passed to MyApp wrapped in various providers and components. It also renders a NextNProgress component that displays a progress bar at the top of the page when navigating between pages.\n## Questions: \n 1. What is the purpose of the `zoo` project?\n- The purpose of the `zoo` project is not explicitly stated in this code file.\n\n2. What libraries and frameworks are being used in this code?\n- This code is using several libraries and frameworks, including Next.js, React, Redux, Apollo Client, Lingui, and React Toastify.\n\n3. What is the role of the `MyApp` function in this code?\n- The `MyApp` function is the main component that sets up the application's providers, layouts, and guards. It also initializes various hooks and listeners, and renders the main component passed in as a prop.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/_app.md"}}],["1057",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/_document.tsx)\n\nThe code is a React component that extends the `Document` class from the Next.js framework. It is responsible for rendering the HTML document that is sent to the client when a user requests a page from the server. \n\nThe `MyDocument` component overrides the `render` method of the `Document` class to customize the HTML output. It returns an HTML document that includes a `head` and `body` section. The `head` section includes a link to a favicon and a manifest file. The `body` section includes a `Main` component and a `NextScript` component. \n\nThe `Main` component is a placeholder for the main content of the page, which is rendered by the Next.js framework. The `NextScript` component includes scripts that are required by Next.js to enable client-side rendering and other features.\n\nThe `MyDocument` component also includes three external JavaScript files that are loaded by the HTML document. Two of these files are from the Babylon.js library, which is used for 3D rendering in web applications. The third file is `a.js`, which is a custom JavaScript file that is specific to the project.\n\nThe `MyDocument` component also includes a static method called `getInitialProps`. This method is used by Next.js to fetch data that is required to render the page. In this case, the method simply calls the `getInitialProps` method of the `Document` class and returns the result.\n\nOverall, the `MyDocument` component is an important part of the Next.js framework that is responsible for rendering the HTML document that is sent to the client. It can be customized to include additional scripts, styles, and metadata that are required by the application.\n## Questions: \n 1. What is the purpose of the `ServerStyleSheet` import and how is it used in this code?\n- The `ServerStyleSheet` import is used to collect styles from the rendered components and generate a stylesheet. It is used in the `getInitialProps` method to wrap the `App` component and collect its styles.\n\n2. What is the purpose of the commented out `getInitialProps` method and how does it differ from the existing one?\n- The commented out `getInitialProps` method is an alternative implementation that uses `ServerStyleSheet` to collect styles and add them to the `initialProps` object. It differs from the existing one in that it returns a modified `initialProps` object with the collected styles.\n\n3. What is the purpose of the Babylon.js scripts included in the `render` method?\n- The Babylon.js scripts are used to load the Babylon.js library and its loaders, as well as a custom script `a.js`. It is unclear what `a.js` does, but it is likely related to using Babylon.js for 3D graphics or animation in the application.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/_document.md"}}],["1058",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/_error.js)\n\nThe code is a custom error component for a Next.js application that utilizes the Sentry error tracking service. The purpose of this component is to handle errors that occur during the rendering of a page and to log them to Sentry for debugging purposes. \n\nThe `MyError` component takes in three props: `statusCode`, `hasGetInitialPropsRun`, and `err`. If `hasGetInitialPropsRun` is false and `err` is not null, it means that `getInitialProps` was not called due to a known issue with Next.js. In this case, the error is captured by Sentry and returned. Otherwise, the component simply renders the `NextErrorComponent` with the given `statusCode`.\n\nThe `getInitialProps` method is used to fetch data for a page before it is rendered. In this case, it is used to capture errors that occur during the rendering of the error page itself. If the `statusCode` is 404, the method returns early without logging the error to Sentry. Otherwise, it checks if `err` is not null, which means that an error occurred during the rendering of the page. In this case, the error is captured by Sentry and flushed to the server. If `err` is null, it means that `getInitialProps` was called without any information about what the error might be. This is unexpected and may indicate a bug in Next.js, so the error is logged to Sentry for debugging purposes.\n\nThis component can be used in a Next.js application to handle errors that occur during the rendering of a page and to log them to Sentry for debugging purposes. To use this component, simply import it and use it as the default error component in the `_app.js` file:\n\n```javascript\nimport MyError from '../path/to/MyError';\n\nfunction MyApp({ Component, pageProps }) {\n return \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `useEffect` hook in this code?\n \n The `useEffect` hook is used to trigger the `fadeInFromLeft` and `fadeInFromRight` animations on the `getStartedContentRef` and `getStartedImageRef` elements respectively, when the component mounts.\n\n2. What is the significance of the `ref` attributes on the `div` elements?\n \n The `ref` attributes are used to create references to the `getStartedContentRef` and `getStartedImageRef` elements, which are then passed to the `fadeInFromLeft` and `fadeInFromRight` animation functions respectively.\n\n3. What is the purpose of the `Image` component from the `next/image` library?\n \n The `Image` component is used to display an image with optimized performance and user experience, by automatically optimizing the image size and format based on the device and screen size.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/about/index.md"}}],["1060",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/animal-info/index.tsx)\n\nThe code above is a React component that renders a section containing information about animals. The component imports the AnimalFamilyInfo component, which is responsible for rendering the information about each animal. It also imports the animals.json file, which contains an array of objects with information about each animal.\n\nThe AnimalInfo component maps over the animals array and renders an AnimalFamilyInfo component for each animal. The AnimalFamilyInfo component receives the animal's name, image, and description as props and renders them in a specific format. The animal's name is rendered as a heading, the image is displayed using the next/image component, and the description is split into a heading and a paragraph.\n\nThe AnimalInfo component also renders a heading that reads \"Our Animal Family\" above the list of animals. The entire section is styled using Tailwind CSS classes.\n\nThis component can be used in a larger project that requires a section displaying information about animals. The component can be easily customized by modifying the AnimalFamilyInfo component or the animals.json file. For example, additional properties can be added to the animals.json file to include more information about each animal, such as their habitat, diet, or lifespan. The AnimalFamilyInfo component can also be modified to display this additional information. \n\nHere is an example of how the AnimalInfo component can be used in a larger project:\n\n```\nimport React from \"react\";\nimport AnimalInfo from \"./components/AnimalInfo\";\n\nconst App = () => {\n return (\n \n
\n );\n};\n\nexport default App;\n```\n\nIn this example, the AnimalInfo component is imported and rendered below a heading that reads \"Welcome to the Zoo!\". The AnimalInfo component will render a section containing information about the animals in the zoo.\n## Questions: \n 1. What is the purpose of the `AnimalFamilyInfo` component?\n - The `AnimalFamilyInfo` component is imported from a file located at `../../components/AnimalInfo` and is used to render information about each animal in the `animals` array.\n\n2. Where is the `animals` array coming from?\n - The `animals` array is imported from a file located at `../../animals.json`.\n\n3. What is the purpose of the `Image` component imported from \"next/image\"?\n - It is unclear from this code snippet what the purpose of the `Image` component is, as it is not used in the code. It is possible that it is used elsewhere in the project.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/animal-info/index.md"}}],["1061",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/animal-list/index.tsx)\n\nThe code is a React component that renders a list of animal NFTs (non-fungible tokens) with 3D models and images. The component imports the AnimalFamilyInfo component, which is responsible for rendering the details of a selected animal. It also imports the Image component from Next.js, which is used to display the animal images, and the Link component, which is used to create links to the animal detail pages.\n\nThe component uses the animalFamilyData array to render the list of animals. Each animal object in the array contains the following properties: id, cameraZ, upLimit, lowLimit, usdz, glb, usdz_baby, glb_baby, usdz_teen, glb_teen, image, gif, name, and slug. These properties are used to render the 3D models, images, and names of the animals.\n\nThe component also uses the useGif hook from the GifContext to determine whether to display the 3D models or the images of the animals. If the gifMode is set to \"gif\", the component renders the 3D models using the ModelViewer component. Otherwise, it renders the images using the Image component.\n\nWhen an animal is clicked, the handleActive function is called, which sets the animalFilter state to an array containing the selected animal. This state is used to render the AnimalFamilyInfo component, which displays the details of the selected animal.\n\nOverall, this component is a key part of the zoo project, as it allows users to view and interact with the animal NFTs. It can be used in conjunction with other components to create a complete user interface for the project. For example, it can be used in combination with the AnimalFamilyInfo component to create a detailed view of each animal.\n## Questions: \n 1. What is the purpose of the `useEffect` hook in this code?\n \n The `useEffect` hook is used to modify the `animalsModified` state by adding a copy of the first animal in the `animals` array. This is done once when the component mounts.\n\n2. What is the purpose of the `ModelViewer` component and why is it commented out?\n \n The `ModelViewer` component is used to render a 3D model of an animal using the `usdz` and `glb` files provided in the `animalFamilyData` array. It is commented out because it is dynamically imported using the `dynamic` function, which allows it to be loaded only when needed and not during server-side rendering.\n\n3. What is the purpose of the `animalFilter` and `animalsModified` states?\n \n The `animalFilter` state is used to filter the `animalFamilyData` array based on the selected animal, while the `animalsModified` state is used to modify the `animals` array by adding a copy of the first animal.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/animal-list/index.md"}}],["1062",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/api/hello.ts)\n\nThis code is an API route handler for a Next.js project. It imports the `NextApiRequest` and `NextApiResponse` types from the `next` module. The `handler` function takes in a request object of type `NextApiRequest` and a response object of type `NextApiResponse`. The `Data` type is defined as an object with a single property `name` of type string.\n\nWhen a request is made to this API route, the `handler` function sends a JSON response with a status code of 200 and a data object containing the name \"John Doe\". This code can be used to create a simple API endpoint that returns a static response.\n\nFor example, if this code is saved in a file called `api/hello.ts` in a Next.js project, it can be accessed at the URL `/api/hello`. When a GET request is made to this URL, the response will be a JSON object with the name \"John Doe\".\n\n```typescript\n// Example usage of the API route\nfetch('/api/hello')\n .then(response => response.json())\n .then(data => console.log(data.name)) // Output: \"John Doe\"\n```\n\nThis code can be extended to handle more complex API requests and responses by modifying the `Data` type and the logic in the `handler` function.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n This code is an API route handler for a Next.js project. It receives a request and responds with a JSON object containing a name field set to 'John Doe'.\n\n2. What is the significance of the 'Data' type and how is it used?\n The 'Data' type is a TypeScript interface that defines the shape of the response object. It specifies that the response should have a 'name' field of type string. This type is then used as the generic type parameter for the NextApiResponse interface.\n\n3. Are there any required parameters for the handler function?\n Yes, the handler function requires two parameters: a NextApiRequest object representing the incoming request, and a NextApiResponse object with a generic type parameter of Data representing the response to be sent.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/api/hello.md"}}],["1063",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/api/metadata/[type].ts)\n\nThis code is a Next.js API route that returns metadata for the Zoo project. The metadata object contains information about the project, such as its name, description, and external URL. The handler function is an asynchronous function that takes in a request and response object and returns the metadata object as a JSON response. \n\nThe code also uses the withSentry higher-order function from the @sentry/nextjs library to add error tracking to the API route. This means that any errors that occur in the handler function will be tracked by Sentry, a popular error tracking service. \n\nThe commented out code suggests that this API route may have been intended to handle different types of requests based on the query parameter \"type\". However, this functionality is not currently implemented and the handler function simply returns the metadata object. \n\nThis code can be used in the larger Zoo project to provide metadata about the project to other parts of the application or to external services. For example, the external_url property in the metadata object could be used to link to the Zoo project's website or to a specific page within the website. \n\nHere is an example of how this API route could be used in a Next.js application:\n\n```javascript\nimport React from 'react'\nimport Head from 'next/head'\n\nconst ZooPage = ({ metadata }) => {\n return (\n <>\n \n Welcome to the Zoo!
\n{metadata.name}
\n{metadata.description}
\n Visit Zoo\n \n )\n}\n\nexport async function getStaticProps() {\n const res = await fetch('/api/metadata')\n const metadata = await res.json()\n return {\n props: {\n metadata\n }\n }\n}\n\nexport default ZooPage\n```\n\nIn this example, the ZooPage component fetches the metadata from the /api/metadata API route and uses it to populate the page's title, description, and Open Graph tags. The metadata is also used to display the project's name and description on the page, as well as to provide a link to the project's external URL.\n## Questions: \n 1. What is the purpose of the `withSentry` function imported from `@sentry/nextjs`?\n - The `withSentry` function is likely used to add Sentry error tracking to the `handler` function.\n\n2. What is the purpose of the commented out code related to `req.query.type` and the switch statement?\n - It is unclear without more context, but it appears that the code may have been used to handle different types of requests based on the `type` parameter in the query string.\n\n3. What is the expected output of the `handler` function?\n - The `handler` function is expected to respond to requests with a JSON object containing metadata about the project, including a name, description, and potentially other properties.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/api/metadata/[type].md"}}],["1064",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/api/moonpay.ts)\n\nThis code defines an API route for the Next.js project that returns an HTML iframe containing a MoonPay button. The MoonPay button is imported from a component called `MoonpayBtn` and is rendered within the `MonComp` string. The `allow` attribute of the iframe specifies the permissions required for the iframe to function properly, including accelerometer, autoplay, camera, gyroscope, and payment. The `src` attribute of the iframe specifies the URL of the MoonPay sandbox environment, along with an API key and a currency code. \n\nWhen a request is made to this API route, the `moonpay` function is executed. The function extracts the `address` property from the request body and uses it to construct the `MonComp` string. The function then sends the `MonComp` string as the response to the request. \n\nThis code can be used in the larger project to provide a way for users to purchase cryptocurrency using MoonPay. The `MoonpayBtn` component can be customized to fit the design of the project, and the `moonpay` API route can be integrated into the project's payment flow. For example, a user could click on a \"Buy Crypto\" button in the project's UI, which would trigger a request to the `moonpay` API route. The `moonpay` function would then return the HTML iframe containing the MoonPay button, which the user could interact with to complete the purchase. \n\nExample usage:\n\n```javascript\nimport MoonpayBtn from \"components/Moonpaybtn/MoonpayBtn\";\n\nfunction BuyCrypto() {\n const handlePurchase = async () => {\n const response = await fetch(\"/api/moonpay\", {\n method: \"POST\",\n body: JSON.stringify({ address: \"0x123abc\" }),\n });\n const html = await response.text();\n document.getElementById(\"moonpay-container\").innerHTML = html;\n };\n\n return (\n\n \n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `MoonPayBtn` import?\n - A smart developer might ask what functionality the `MoonPayBtn` component provides and how it is used in the `moonpay` function.\n\n2. What is the purpose of the `allow` attribute in the `iframe` element?\n - A smart developer might ask why the `allow` attribute is set to specific values and what implications this has for the `iframe` content.\n\n3. Why are the commented out code blocks included in the file?\n - A smart developer might ask why the code blocks are commented out and if they are intended to be used in the future or if they are just remnants of previous development.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/api/moonpay.md"}}],["1065",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/api/subscribe.ts)\n\nThis code is an API route that allows users to subscribe to a Mailchimp mailing list. The `mailchimp_marketing` library is imported and used to set the configuration for the Mailchimp API. The `apiKey` and `server` values are set to allow for authentication and to specify which Mailchimp server to use. \n\nThe `subscribe` function is an asynchronous function that takes in a `req` (request) and `res` (response) object. The `req.body` object is destructured to obtain the email address of the user who wants to subscribe to the mailing list. \n\nThe `mailchimp.lists.addListMember` method is then called with the email address and a status of \"subscribed\" to add the user to the mailing list. If the request is successful, a JSON response with a status of 200 is returned with the `SignUp` object. If there is an error, a JSON response with a status of 500 is returned with an error message.\n\nThis code can be used in a larger project to allow users to subscribe to a mailing list for updates or newsletters. For example, a website for a zoo could use this code to allow visitors to subscribe to a mailing list for updates on new exhibits or events. \n\nExample usage:\n```\n// Make a POST request to the API route with the email address in the request body\nconst response = await fetch('/api/subscribe', {\n method: 'POST',\n body: JSON.stringify({ email: 'example@email.com' }),\n headers: {\n 'Content-Type': 'application/json'\n }\n});\n\n// Handle the response\nif (response.ok) {\n const data = await response.json();\n console.log(data.SignUp);\n} else {\n console.error('Failed to subscribe:', response.status);\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n - This code is an API route that subscribes an email address to a Mailchimp list using the Mailchimp API.\n\n2. What API key and server are being used to connect to Mailchimp?\n - The code is using an API key of \"2b3731e0fce301485c1f563c4463c0d8-us14\" and a server of \"us14\" to connect to Mailchimp.\n\n3. What happens if there is an error while adding a list member?\n - If there is an error while adding a list member, the code will return a 500 status code and a JSON object with an \"error\" key and value of \"failed to load data\".","metadata":{"source":".autodoc/docs/markdown/core/src/pages/api/subscribe.md"}}],["1066",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/artboard.tsx)\n\nThe `ArtBoard` component is a React functional component that renders a UI for displaying auction information for an item called \"Egg\". The component imports the `Image` component from the `next/image` module. The `nav` constant is an array of strings that represent navigation links. The component returns a JSX expression that renders the UI.\n\nThe UI consists of two sections, each displaying information about the \"Egg\" item. Each section contains an image of the egg, the name of the item, the owner's address, the reserve price, the current bid, and the time remaining for the auction. The UI also includes two buttons, one for editing the auction and the other for viewing the item.\n\nThe `Image` component is used to display the egg images. It takes in the `src`, `alt`, `width`, and `height` props. The `nav` array is mapped over to create a series of navigation links. The `div` elements with the `className` of `flex`, `items-center`, and `justify-center` are used to center the egg images. The `div` elements with the `className` of `flex`, `justify-between`, and `items-center` are used to display the owner's address and the reserve price. The `div` element with the `className` of `border`, `rounded-[14px]`, and `bg-[#1F2030]` is used to display the current bid and the time remaining for the auction. The `button` elements are used to provide interactivity to the UI.\n\nThis component can be used in a larger project that involves displaying auction information for various items. The `ArtBoard` component can be reused for each item, with the item's information passed in as props. The component can also be modified to include additional information or to change the styling of the UI. For example, the `Image` component can be replaced with a custom component that displays a 3D model of the item. The `button` elements can be modified to trigger different actions, such as placing a bid or adding the item to a watchlist.\n## Questions: \n 1. What is the purpose of the `Image` import from \"next/image\"?\n- The `Image` import is used to display images on the webpage with optimized performance.\n\n2. What is the significance of the `nav` array and how is it used in the code?\n- The `nav` array contains the navigation links \"My Auctions\", \"My Bids\", and \"My Wallet\", which are displayed as clickable text on the webpage.\n\n3. What is the purpose of the two sections of code that are almost identical, except for the image file being used?\n- The two sections of code are displaying two different images of an \"Egg\" item, likely for showcasing different variations or styles of the item.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/artboard.md"}}],["1067",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/blog/index.tsx)\n\nThe `Blog` component is responsible for rendering the blog page of the Zoo project. It imports several dependencies such as `React`, `useState`, `useEffect`, `Image`, and `Link`. It also imports two custom components, `Article` and `BlogCards`, and an animation function, `fadeInOnScroll`.\n\nThe component defines two arrays, `news` and `guides`, which contain objects representing blog posts. Each object has properties such as `name`, `image`, `link`, `date`, `writtenBy`, and `isNew`. These arrays are then concatenated and sorted by date in descending order to create a new array called `all`.\n\nThe `Blog` component renders a hero section with a title and a description, followed by a section with two columns. The first column displays an image, while the second column displays a blog post with a title, a short description, and a link to read the full story. This section is followed by a tab section that allows the user to filter the blog posts by category. The categories are \"All\", \"News\", and \"Zoo Guide\". Finally, the component renders a section that displays the blog posts based on the selected category.\n\nThe `useEffect` hook is used to apply the `fadeInOnScroll` animation to the hero section when the component mounts.\n\nOverall, the `Blog` component provides a user-friendly interface for browsing and reading blog posts related to the Zoo project. It allows users to filter posts by category and provides a visually appealing layout for displaying the posts. Below is an example of how the `Blog` component can be used in the larger project:\n\n```jsx\nimport Blog from 'zoo/Blog';\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `Blog` component?\n- The `Blog` component is responsible for rendering the Zoo blog page, which includes a hero section, tabs section, and articles map.\n\n2. What is the significance of the `all` variable?\n- The `all` variable is an array that contains all the articles from the `news` and `guides` arrays, sorted by date in descending order. It is used to display all articles when the \"All\" tab is selected.\n\n3. What is the purpose of the `fadeInOnScroll` function?\n- The `fadeInOnScroll` function is an animation function that fades in an element when it comes into view during scrolling. It is used to animate the hero section of the blog page.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/blog/index.md"}}],["1068",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/coming-soon/index.tsx)\n\nThis code defines a React component called `ComingSoon` that displays a \"Coming Soon\" message and a link to the homepage. The component imports the `React` and `useEffect` modules from the `react` package, as well as the `Link` component from the `next/link` package. It also imports an `fadeInOnScroll` function from an `animation` module.\n\nThe `ComingSoon` component renders a `div` element with two child elements: a `div` element and a `p` element. The `div` element has the class `max-w-7xl mx-auto py-20 px-4` and contains a child `div` element with the classes `flex`, `flex-col`, `items-center`, and `justify-center`, as well as a `ref` attribute set to a `comingSoonRef` object. The `comingSoonRef` object is created using the `useRef` hook from the `React` module.\n\nThe child `div` element contains two child elements: an `h1` element and a `p` element. The `h1` element has the classes `text-4xl`, `lg:text-[44px]`, `leading-[3rem]`, `lg:leading-4`, `font-bold`, and `mb-8`, and displays the text \"Coming Soon\". The `p` element contains a `Link` component that displays a link to the homepage.\n\nThe `useEffect` hook is used to call the `fadeInOnScroll` function with the `comingSoonRef.current` object as an argument. This causes the `comingSoonRef` element to fade in when it is scrolled into view.\n\nThis component can be used in a larger project to display a \"Coming Soon\" message and a link to the homepage. It also demonstrates how to use the `useRef` and `useEffect` hooks in a React component, as well as how to import and use external modules. An example usage of this component might look like:\n\n```\nimport ComingSoon from \"./ComingSoon\";\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `fadeInOnScroll` function imported from \"animation\"?\n- The `fadeInOnScroll` function is used to animate the `comingSoonRef` element when it is scrolled into view.\n\n2. What is the significance of the `comingSoonRef` variable being assigned to `React.useRef()`?\n- The `comingSoonRef` variable is being used to reference the `div` element that contains the \"Coming Soon\" text and the link to the homepage. This allows the `fadeInOnScroll` function to target and animate this specific element.\n\n3. What is the purpose of the `useEffect` hook in this component?\n- The `useEffect` hook is used to call the `fadeInOnScroll` function once when the component mounts, which sets up the animation for the `comingSoonRef` element.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/coming-soon/index.md"}}],["1069",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/compare-yield/index.tsx)\n\nThe `CompareYield` component is responsible for rendering a table that compares the yield opportunities of different NFT animals in the ZOO project. The component imports the `Image` component from the `next/image` library, the `useActiveWeb3React` hook from the `hooks` module, and the `Web3Status` component from the `components` directory. It also imports the `i18n` object and the `t` function from the `@lingui/core` and `@lingui/macro` libraries respectively.\n\nThe component defines an array of `nftData` objects that represent different NFT animals in the ZOO project. Each object has an `id`, `name`, `dailyYield`, `medium`, and `large` property. The `dailyYield`, `medium`, and `large` properties are boolean values that indicate whether the animal has a daily yield, medium size, and large size respectively.\n\nThe `CompareYield` component returns a JSX element that contains a table with the NFT animal data. The table has a header row that displays the column names, and subsequent rows that display the NFT animal data. The table is generated using the `map` function to iterate over the `nftData` array and generate a row for each object.\n\nThe component also renders a header that displays the title and subtitle of the table. Additionally, the component renders three buttons that link to external pages. The first button links to the PancakeSwap page for the ZOO token, the second button links to the ZOO marketplace page, and the third button duplicates the second button.\n\nThe `useActiveWeb3React` hook is used to retrieve the user's account, chain ID, and library. These values are not used in the component, but they may be used in other parts of the project.\n\nOverall, the `CompareYield` component provides a user-friendly way to compare the yield opportunities of different NFT animals in the ZOO project. It also provides links to external pages that are relevant to the project.\n## Questions: \n 1. What is the purpose of the `nftData` array?\n- The `nftData` array contains information about different NFT animals, including their names and various attributes such as daily yield, medium, and large.\n\n2. What is the role of the `useActiveWeb3React` hook?\n- The `useActiveWeb3React` hook is used to retrieve information about the user's active Web3 connection, including their account, chain ID, and library.\n\n3. What is the purpose of the `CompareYield` component?\n- The `CompareYield` component displays a table comparing the yield opportunities of different NFT animals, as well as buttons for buying $ZOO and accessing the marketplace.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/compare-yield/index.md"}}],["1070",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/create-auction/index.tsx)\n\nThe `CreateAuctionPage` component is a React component that renders a form for creating an auction. It imports several hooks from different modules to manage state and dispatch actions. \n\nThe component uses the `useState` hook to manage the state of four input fields: `tokenId`, `duration`, `reservedPrice`, and `curatorFeePercentage`. It also uses the `useCreateAuction` hook to create an auction, the `useDispatch` hook to dispatch the created auction, and the `useActiveWeb3React` hook to get the current user's account. \n\nWhen the user submits the form, the `onSubmit` function is called. This function prevents the default form submission behavior and converts the input values to numbers. It then dispatches the `createAuction` action with the converted values. \n\nThe component renders a form with four input fields and a submit button. The input fields are controlled components that update the state when the user types in them. The submit button triggers the `onSubmit` function when clicked. \n\nThis component can be used in a larger project that involves creating and managing auctions. It provides a simple and reusable form for creating auctions. Developers can customize the form by adding or removing input fields or modifying the `onSubmit` function to perform additional actions. \n\nExample usage:\n\n```jsx\nimport CreateAuctionPage from 'zoo/CreateAuctionPage';\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `useCreateAuction` hook and how is it used in this code?\n - The `useCreateAuction` hook is likely a custom hook that provides functionality for creating an auction. It is used in the `onSubmit` function to dispatch an action that creates an auction with the inputted values.\n2. What is the purpose of the `useActiveWeb3React` hook and how is it used in this code?\n - The `useActiveWeb3React` hook is likely a custom hook that provides access to the active Web3 React context. It is used to retrieve the current account, which is logged to the console for debugging purposes.\n3. What is the purpose of the `parseInt` function call in the `onChange` function for the `curatorFeePercentage` input?\n - The `parseInt` function call is used to convert the input value to an integer before setting the state with `setCuratorFeePercentage`. This is likely done to ensure that the value is a valid number and can be used in calculations later on.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/create-auction/index.md"}}],["1071",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/dao/index.tsx)\n\nThe `Voting` component is a React component that renders a page for displaying and interacting with proposals in a DAO (decentralized autonomous organization). The component imports various dependencies, including `ProposalsTable` (a custom component for rendering a table of proposals), `useSelector` (a hook for accessing the Redux store), and several UI components from the Material-UI library.\n\nThe component defines several state variables using the `useState` hook, including `proposalState` (which represents the current state of proposals being displayed), `proposalType` (which represents the type of proposals being displayed), and `_proposals` (which represents the list of proposals being displayed). The component also defines a `getAllProposals` function using the `useGetAllProposals` hook, which retrieves all proposals from the DAO.\n\nThe component renders a page with two main sections: a sidebar and a main content area. The sidebar contains links to other pages in the DAO, while the main content area displays a table of proposals and various filtering options. The table of proposals is rendered using the `ProposalsTable` component, which takes in the list of proposals as a prop and filters them based on the current state and type.\n\nThe component also includes several event handlers for updating the state variables based on user input. For example, the `setProposalState` function is called when the user selects a new proposal state from a dropdown menu, and the `setProposalType` function is called when the user selects a new proposal type from a different dropdown menu. The component also includes a button for refreshing the list of proposals, which calls the `getAllProposals` function and displays a success message using the `addPopup` function.\n\nOverall, the `Voting` component provides a user-friendly interface for browsing and interacting with proposals in a DAO. By allowing users to filter proposals by state and type, the component makes it easy to find and participate in relevant proposals. The component could be used as part of a larger project for managing a DAO, alongside other components for creating and voting on proposals.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code is for a project called \"zoo\" and it appears to be related to a DAO voting system. It imports various components and hooks, sets up state variables, and renders a UI for displaying proposals and allowing users to filter and refresh them.\n\n2. What external libraries or dependencies does this code rely on?\n- This code relies on several external libraries and dependencies, including Next.js, React, Redux, MUI, and various custom hooks and components.\n\n3. What is the significance of the commented-out code and why was it commented out?\n- The commented-out code appears to be an alternative way of rendering the proposal filtering options, using a different type of select element. It was likely commented out because the MUI select element was chosen as the preferred option instead.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/dao/index.md"}}],["1072",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/dao/proposal/create/index.tsx)\n\nThis code is a React component that renders a dynamic import of the `CreateProposal` component from the `components/Voting` directory. The `ssr` option is set to `false`, which means that this component will not be server-side rendered. The component is then wrapped in a higher-order component that sets the layout to `DaoLayout`.\n\nThe purpose of this code is to provide a way for users to create proposals for voting within a DAO (decentralized autonomous organization). The `CreateProposal` component likely contains a form where users can input the details of their proposal, such as the title, description, and voting options. The `MakeProposals` component then renders this form within the context of the `DaoLayout`, which provides a consistent visual style and navigation for the entire DAO application.\n\nThis component can be used in the larger project by being included in a page or route that is accessible to users who have permission to create proposals within the DAO. For example, there may be a page called `Proposals` that lists all of the current proposals and allows users to create new ones. The `MakeProposals` component could be included on this page to provide the form for creating a new proposal.\n\nHere is an example of how this component could be used in a Next.js page:\n\n```jsx\nimport MakeProposals from \"components/MakeProposals\";\n\nconst ProposalsPage = () => {\n return (\n \n
\n );\n};\n\nexport default ProposalsPage;\n```\n\nIn this example, the `MakeProposals` component is included on a page called `ProposalsPage`, which displays a heading and the `CreateProposal` form. The `DaoLayout` is automatically applied to the component, providing a consistent look and feel for the entire DAO application.\n## Questions: \n 1. What is the purpose of the `useEffect` hook in this code?\n - The purpose of the `useEffect` hook is not clear from this code snippet alone. It would require further context to determine its purpose.\n\n2. What is the significance of the `ssr: false` option in the `dynamic` import statement?\n - The `ssr: false` option indicates that the component being imported should not be server-side rendered, and should only be rendered on the client-side.\n\n3. What is the relationship between `MakeProposals` and `DaoLayout`?\n - `MakeProposals` is a component that uses `DaoLayout` as its layout component. This means that `DaoLayout` will be used to wrap the content of `MakeProposals`.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/dao/proposal/create/index.md"}}],["1073",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/drop/[id]/index.tsx)\n\nThe code is a React component that renders a single drop page for the Zoo project. The component imports various dependencies such as `useEffect`, `useState`, `NextComponentType`, `NextPageContext`, `AppProps`, `DropLayout`, `NullLayout`, `useRouter`, `useSelector`, `useGetAvailableEggs`, `useGetDrops`, `dynamic`, `Link`, and `Drop`. \n\nThe component fetches data from the Redux store using the `useSelector` hook and the `useGetDrops` hook. It also uses the `useRouter` hook to get the `id` parameter from the URL. The `useEffect` hook is used to fetch the drops data from the server and set the `drop` state variable. \n\nThe component renders the drop information such as the title, description, supply, minted, and floor price. It also renders the collection of items associated with the drop. The items are displayed in a grid layout and can be either a video or a 3D model. The component uses the `ModelViewer` component to render the 3D models. \n\nThe component also includes a link to the market page where users can buy the items. The link is only displayed if the `id` parameter is not equal to 100. If the `id` parameter is equal to 100, a \"Coming Soon\" message is displayed instead of the link. \n\nOverall, this component is an important part of the Zoo project as it allows users to view and buy drops. It is used in conjunction with other components and pages to provide a seamless user experience. \n\nExample usage:\n\n```jsx\nimport SingleDrop from \"path/to/SingleDrop\";\n\nconst MyComponent = () => {\n return (\n Proposals
\n\n
\n );\n};\n\nexport default MyComponent;\n```\n## Questions: \n 1. What is the purpose of the `useGetAvailableEggs` hook imported from `state/zoo/hooks`?\n- It is not clear from the provided code what the purpose of the `useGetAvailableEggs` hook is, as it is not used anywhere in the code. A smart developer might want to investigate further to determine if it is necessary or can be removed.\n\n2. What is the significance of the `ModelViewer` component and why is it loaded dynamically using `dynamic`?\n- The `ModelViewer` component is used to display a 3D model of an item in the collection. It is loaded dynamically using `dynamic` with `ssr` set to `false` to prevent server-side rendering, as the component relies on client-side rendering and cannot be rendered on the server.\n\n3. What is the purpose of the `activeDrop` state variable and how is it used?\n- The `activeDrop` state variable is used to keep track of which item in the collection is currently being hovered over by the user. It is used to conditionally display a \"BUY\" button for the item when it is being hovered over.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/drop/[id]/index.md"}}],["1074",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/faqs/index.tsx)\n\nThe code defines an array of frequently asked questions (FAQs) and their corresponding answers for a project called ZOO. The FAQs cover various topics related to the ZOO project, such as its purpose, features, token, gameplay, and how to get started. The code also defines a functional component called Accordion that renders each FAQ as a collapsible item with a question and answer section. The Accordion component uses the useState hook to manage the open/closed state of each item. When a user clicks on a question, the corresponding answer is displayed or hidden depending on its current state. The code also defines another functional component called Faqs that renders a list of all the FAQs using the Accordion component. Additionally, the Faqs component includes a contact form and a message for users who need further assistance. \n\nThis code can be used as a reference for creating a FAQ section for any project. The Accordion component can be reused to render any list of collapsible items, not just FAQs. The code also demonstrates how to use the useState hook to manage state in a functional component. The Faqs component can be customized to fit the design and content needs of any project. \n\nExample usage:\n```\nimport Faqs from \"./Faqs\";\n\nfunction App() {\n return (\n \n
\n );\n}\n\nexport default App;\n```\n## Questions: \n 1. What is the purpose of the `Accordion` component?\n- The `Accordion` component is used to display each question and answer pair in a collapsible format, where the answer is hidden until the user clicks on the question.\n\n2. What is the significance of the `$ZOO` token in the game?\n- The `$ZOO` token is the native currency in the game and is used for various interactions such as buying NFTs, feeding animals, and investing. It also appreciates over time based on rarity, age, and gameplay.\n\n3. Where can users go for help or to interact with the community?\n- Users can join the Discord server for the project and post in the `#new-player-help` channel for assistance. They can also join the community on Discord to interact with other members. Additionally, a list of guides can be found on the project's blog.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/faqs/index.md"}}],["1075",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/global-leaderboard/[slug].tsx)\n\nThe `Slug` component is a React functional component that renders a page for displaying information about a specific item in the zoo project. The component imports the `useState` and `useRouter` hooks from the `react` and `next/router` packages respectively, and the `Image` component from the `next/image` package. \n\nThe component defines a `Props` type that is an empty object and a `Slug` type that is a React functional component that takes in the `Props` type as a parameter. The component then destructures the `router.query` object to get the `slug` value and initializes a `category` state variable to 0 using the `useState` hook.\n\nThe component defines an array of `items` that contains objects representing different items in the zoo project. Each object has an `id`, `nftId`, `nftName`, `nftImg`, and `price` property. \n\nThe component then returns a JSX element that contains several nested elements. The first element is a div that contains a gradient background and three clickable links that represent different categories of items. The `category` state variable is used to determine which link is currently active. When a link is clicked, the `setCategory` function is called to update the `category` state variable.\n\nThe second element is a div that contains information about the specific item being displayed. It has a gradient background and displays the `slug` value along with other information such as the user and address associated with the item.\n\nThe third element is a div that contains information about the item's details. It has a black background and displays information such as the transaction, token ID, and token standard associated with the item.\n\nThe fourth element is a div that contains information about the item's authenticity. It has a black background and displays the price of the item in $ZOO, a link to an Etherscan transaction, and a link to view the item on IPS.\n\nThe fifth element is a div that maps over the `items` array and renders information about each item. It displays the item's image, name, description, and details. It also has a button that allows users to make an offer on the item.\n\nOverall, the `Slug` component is a reusable component that can be used to display information about any item in the zoo project. It uses state variables and hooks to allow users to navigate between different categories of items and make offers on specific items.\n## Questions: \n 1. What is the purpose of the `Slug` component?\n- The `Slug` component is used to display information about different NFTs and their details.\n\n2. What is the significance of the `items` array?\n- The `items` array contains information about different NFTs, including their ID, name, image, and price.\n\n3. What is the purpose of the `setCategory` function and how is it used?\n- The `setCategory` function is used to update the `category` state variable, which determines which section of the page is currently active. It is used as an event handler for clicking on different category links.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/global-leaderboard/[slug].md"}}],["1076",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/global-leaderboard/index.tsx)\n\nThe `GlobalLeaderboard` component is a React component that renders a leaderboard for a project called ZOO. The component imports `React`, `useState`, `useRouter`, and `Image` from the `react`, `next/router`, and `next/image` modules respectively. \n\nThe component uses the `useState` hook to create two state variables: `isActive` and `category`. `isActive` is initialized to `'nft-value'`, and `category` is initialized to `0`. \n\nThe component then defines a `dummyData` array that contains ten objects, each with an `id`, `name`, and `address` property. \n\nThe component returns a section element with a class of `flex`, `flex-col`, and `items-center`. Within this section, there is a div element with a class of `px-4`, `py-16`, `lg:w-4/12`, and `mx-auto`. This div contains an h1 element with a class of `text-xl`, `lg:text-2xl`, `font-bold`, `mb-4`, and `p-3`, which displays the text \"ZOO NFT Leaderboard\". \n\nBelow the h1 element, there is a div element with a class of `rounded-xl`, `w-full`, `mb-4`, and `p-0.5`. This div has a background color that is a linear gradient from `#4B31AC` to `#2703F8`. Within this div, there is another div element with a class of `flex`, `items-center`, `justify-center`, `bg-black`, `rounded-xl`, `w-full`, and `h-full`. This div contains three anchor elements that display the text \"NFT Value\", \"Top ZOO\", and \"Global Users\". The anchor element that corresponds to the current value of `category` has a background color that is a linear gradient from `#4B31AC` to `#2703F8`. When an anchor element is clicked, the `setCategory` function is called with the index of the clicked element as an argument. \n\nBelow the div with the class of `rounded-xl`, there is another div element with no class. This div contains a map function that iterates over the `dummyData` array and returns a div element for each object in the array. Each div element has a class of `mb-4`, `rounded-lg`, `p-px`, and `cursor-pointer`, and a background color that is a linear gradient from `#4B31AC` to `#2703F8`. When a div element is clicked, the `route.push` function is called with the path `/global-leaderboard/${id}` as an argument. \n\nIn summary, the `GlobalLeaderboard` component renders a leaderboard for the ZOO project. The component allows the user to switch between three categories: \"NFT Value\", \"Top ZOO\", and \"Global Users\". When a category is selected, the corresponding anchor element is highlighted. The component also displays a list of users with their name and address. When a user is clicked, the user is redirected to a page that displays more information about the user.\n## Questions: \n 1. What is the purpose of the `GlobalLeaderboard` component?\n- The `GlobalLeaderboard` component is used to display a leaderboard of NFT users.\n\n2. What is the purpose of the `dummyData` array?\n- The `dummyData` array is used to provide sample data for the leaderboard.\n\n3. What is the purpose of the `setCategory` function?\n- The `setCategory` function is used to update the `category` state variable when a user clicks on one of the leaderboard categories (NFT Value, Top ZOO, Global Users).","metadata":{"source":".autodoc/docs/markdown/core/src/pages/global-leaderboard/index.md"}}],["1077",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/AnimalFamilySection.tsx)\n\nThis code defines a React component called `AnimalFamilySection` that displays information about animals and eggs in a zoo. The component imports several dependencies, including React, Next.js, and various custom hooks and components. \n\nThe component first defines an array of objects called `animalFamilyData`, which contains information about different animal species in the zoo. Each object contains properties such as `id`, `name`, `description`, `image`, and `gif`, which are used to display information about the animal on the page. \n\nThe component also imports a custom hook called `useGif` from a context called `GifContext`. This hook is used to determine whether to display a GIF or a 3D model of the animal on the page. \n\nThe component then defines a `useSelector` hook from the `react-redux` library, which is used to retrieve data from the Redux store. The component uses this hook to retrieve information about available eggs in the zoo. \n\nThe component also defines a custom hook called `useGetAvailableEggs`, which is used to retrieve data about available eggs from an API. This hook is called when the component mounts, using the `useEffect` hook. \n\nThe component then renders two sections: one for displaying information about available eggs, and one for displaying information about animal species. The section for displaying eggs maps over the `availableEggs` array retrieved from the Redux store and displays information about each egg, including its name, price, and an animation. \n\nThe section for displaying animal species maps over the `animalFamilyData` array and displays information about each animal, including its name, image, and a 3D model or GIF. \n\nOverall, this component provides a way to display information about animals and eggs in a zoo, and allows users to interact with this information by clicking on links and buttons. It is likely used as part of a larger application that provides additional functionality for managing and interacting with zoo data.\n## Questions: \n 1. What is the purpose of the `useEffect` hook in this code?\n \n The `useEffect` hook is used to call the `getAvailableEggs` function when the `zookeeper` variable changes. This is likely to update the available eggs in the `availableEggs` state variable.\n\n2. What is the purpose of the `ModelViewer` component and how is it used in this code?\n \n The `ModelViewer` component is used to display a 3D model of an animal. It is dynamically imported using `dynamic` from the `components/ModelViewer` file and is used to render the 3D model of each animal in the `animalFamilyData` array.\n\n3. What is the purpose of the `useSelector` hook and how is it used in this code?\n \n The `useSelector` hook is used to select data from the Redux store. In this code, it is used to select the `availableEggs` state variable from the `zoo` slice of the store and assign it to a variable of the same name.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/AnimalFamilySection.md"}}],["1078",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/BuyZooSection.tsx)\n\nThe code above is a React component that renders a section of a web page for buying $Zoo, which is likely a cryptocurrency or token associated with the larger project. The component imports several functions and hooks from other files in the project, including `handleFunds` from `utils/handleFunds`, `useBuyZoo` from `state/zoo/hooks`, and `useActiveWeb3React` from `hooks`. \n\nThe `useActiveWeb3React` hook likely provides access to the user's Ethereum wallet and blockchain network information, while `useBuyZoo` is a custom hook that likely handles the logic for buying $Zoo. The `handleFunds` function is likely a utility function that handles the actual transaction of buying $Zoo using the user's wallet and the `buyZoo` function.\n\nThe `BuyZooSection` component returns a section element with a heading, paragraph, and a button for buying $Zoo. The button has an `onClick` event that calls the `handleFunds` function with the `chainId` and `buyZoo` variables as arguments. The `chainId` variable likely specifies which blockchain network the user is connected to, while `buyZoo` is the function for buying $Zoo.\n\nOverall, this component provides a user interface for buying $Zoo and utilizes other functions and hooks from the project to handle the actual transaction. It is likely used in conjunction with other components and features of the larger project to provide a seamless user experience for buying and using $Zoo. \n\nExample usage:\n\n```\nimport BuyZooSection from \"components/BuyZooSection\";\n\nconst HomePage = () => {\n return (\n Welcome to my project
\n\n
\n );\n};\n\nexport default HomePage;\n```\n## Questions: \n 1. What is the purpose of the `handleFunds` function being imported from `utils/handleFunds`?\n - The smart developer might wonder what the `handleFunds` function does and how it is used in the code. It is used as a callback function for the `onClick` event of the \"Buy $Zoo\" button and takes in the `chainId` and `buyZoo` as parameters.\n\n2. What is the `useBuyZoo` hook being imported from `state/zoo/hooks`?\n - The smart developer might want to know what the `useBuyZoo` hook does and how it is implemented. It is a custom hook that provides a function to buy $Zoo tokens.\n\n3. What is the purpose of the `useActiveWeb3React` hook being imported from `hooks`?\n - The smart developer might be curious about the `useActiveWeb3React` hook and how it is used in the code. It is used to get the current `chainId` from the active Web3 React context.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/BuyZooSection.md"}}],["1079",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/Cards.tsx)\n\nThe code defines a React component called `CardsSection` that renders a set of cards, each representing a different segment of a project called \"Zoo\". The `segments` array contains four objects, each with an `id`, `title`, and `description` property. The `CardsSection` component maps over the `segments` array and renders a `Card` component for each segment. \n\nEach `Card` component displays the `title` of the corresponding segment, and when clicked, expands to show the `description`. The `Card` component also has an \"add\" button that, when clicked, expands the card to show the `description`. The `Card` component uses the `useState` hook to keep track of whether it is currently expanded or not. \n\nThe `Modal` component is used to display the expanded `Card` content in a full-screen overlay on smaller screens. The `Modal` component is only rendered when the screen width is less than 640 pixels, as determined by the `useMediaQuery` hook from the `@mui/material` library. \n\nOverall, this code provides a simple and reusable way to display a set of cards with expandable content. It could be used in a variety of contexts, such as displaying a set of products or services with descriptions, or displaying a set of frequently asked questions with answers. \n\nExample usage:\n\n```jsx\nimport CardsSection from \"components/CardsSection\";\n\nconst ZooPage = () => {\n return (\n Welcome to the Zoo Project
\n\n
\n );\n};\n\nexport default ZooPage;\n```\n## Questions: \n 1. What is the purpose of the `CardsSection` component?\n- The `CardsSection` component is responsible for rendering a section of cards, each representing a different segment of the project.\n\n2. What is the significance of the `useMediaQuery` hook in the `Card` component?\n- The `useMediaQuery` hook is used to conditionally render a modal component based on the screen size. If the screen size is smaller than 640px, the modal will be displayed when a card is clicked.\n\n3. How does the breeding mechanism work in the `Breed` segment?\n- To breed animals, the user must collect two Origin Adult Animals of the same species. They can then breed the animals up to 7 times, resulting in the birth of a 2nd Gen Baby Animal in the same species. These 2nd Gen Animals can mint older versions of themselves but cannot breed at the adult stage.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/Cards.md"}}],["1080",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/FaqSection.tsx)\n\nThe code defines a React component called FaqSection that renders a section of frequently asked questions (FAQs) for a project called ZOO. The component imports the React library and the Link component from the Next.js library. It also imports an animation function called fadeInOnScroll from an external module called \"animation\".\n\nThe FaqSection component returns a section element with an id of \"faqs\". The section contains a div element with a class of \"px-6 py-20 mx-auto max-w-7xl\" that sets some padding, margin, and maximum width styles. Inside this div, there is an h2 element that displays the title \"Game FAQ\" and a description of the game. The section also contains a flex container with four flex items, each containing a question and an answer about the game.\n\nThe first question asks \"What is ZOO?\" and the answer describes the project as a liquidity protocol that bridges tokens and NFTs at the intersection of DeFi and gaming. It explains that each NFT yields the native currency $ZOO and is collateralized by $ZOO, which appreciates over time based on rarity, age, and playing the game.\n\nThe second question asks \"What are the Key Features in ZOO?\" and the answer lists some of the key features, including growing and breeding animals, and an upcoming AR app that will allow players to interact with their NFTs in augmented reality.\n\nThe third question asks \"What is the $ZOO token?\" and the answer explains that it is the native currency in the game that allows token holders to play, invest, use the NFT marketplace, and be part of the game.\n\nThe fourth question asks \"How Do I Get Started?\" and the answer explains that players can access the game through the DApp or ZOO Labs' official website.\n\nThe fifth question asks \"How do I buy $ZOO?\" and the answer provides a link to a presentation that explains how to buy the token.\n\nThe section ends with a call-to-action button that links to a page with more FAQs.\n\nOverall, the FaqSection component provides a user-friendly way for players to learn about the ZOO project and its features. It can be used as part of a larger website or application that promotes the game and its community.\n## Questions: \n 1. What is the purpose of the `useEffect` hook that is currently commented out?\n- The `useEffect` hook is used to apply the `fadeInOnScroll` animation to the `faqsRef` element when the component mounts.\n2. What is the `ZOO` Liquidity Protocol and how does it work?\n- `ZOO` is a protocol that bridges tokens and NFTs at the intersection of Defi and gaming. Each NFT yields the native currency, $ZOO, which is collateralized by $ZOO and appreciates over time based on rarity, age, and gameplay.\n3. How can a player buy $ZOO?\n- A player can buy $ZOO by clicking on the link provided in the code, which redirects them to a website where they can purchase it.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/FaqSection.md"}}],["1081",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/GameFi.tsx)\n\nThe code above is a React component called `GameFi` that renders a section of the webpage for the Zoo project. The component takes in a prop called `gameFi`, which is an array of objects that contain information about different animal families. \n\nThe component starts by importing the `Image` component from the `next/image` library and the `React` library. It then defines the `GameFi` component as a function that takes in the `gameFi` prop. \n\nInside the component, there is a section element with a class of `AnimalFamily`. This section contains a div element with classes that set the padding, margin, and maximum width of the content. The div contains an h1 element with a class that sets the font size, font weight, and text alignment of the heading. The text inside the heading is \"GAME-FI For All\". \n\nBelow the heading, there is a grid element with classes that set the number of columns and the gap between the columns and rows. Inside the grid, there is a map function that iterates over the `gameFi` array and returns a div element for each object in the array. \n\nEach div element has a key attribute set to the index of the current object in the array. The div also has classes that set the border, padding, and alignment of the content. Inside the div, there is an `Image` component that displays the icon of the animal family. The `Image` component takes in the `src`, `alt`, `width`, and `height` attributes. The `src` attribute is set to the `icon` property of the current object in the array. The `alt` attribute is an empty string. The `width` and `height` attributes are set to 80. \n\nBelow the `Image` component, there is an h2 element with a class that sets the font size, font weight, and text alignment of the heading. The text inside the heading is the `title` property of the current object in the array. Below the h2 element, there is a p element with a class that sets the font size, font weight, and text alignment of the paragraph. The text inside the paragraph is the `description` property of the current object in the array. \n\nFinally, the component exports the `GameFi` function as the default export of the module. \n\nThis component is used to display information about different animal families on the Zoo project webpage. The `gameFi` prop is an array of objects that contain information about each animal family, including the icon, title, and description. The component maps over the `gameFi` array and returns a div element for each object in the array. Each div element contains an `Image` component, an h2 element, and a p element that display the icon, title, and description of the animal family, respectively.\n## Questions: \n 1. What is the purpose of the `Image` and `React` imports at the beginning of the code?\n \n The `Image` import is used to render images in the component, while the `React` import is necessary for defining and exporting the `GameFi` component.\n\n2. What is the `gameFi` prop and how is it used in the component?\n \n The `gameFi` prop is an array of objects that contain information about different games. It is mapped over to dynamically render each game's icon, title, and description in the component.\n\n3. What is the purpose of the CSS classes used in the component?\n \n The CSS classes are used to style the component's layout and content. For example, `max-w-7xl` sets the maximum width of the container to 7xl, while `text-[44px]` sets the font size of the heading to 44 pixels.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/GameFi.md"}}],["1082",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/GetStartedSection.tsx)\n\nThe `GetStartedSection` component is a React functional component that renders a section of the Zoo project's landing page. The section contains a heading, a paragraph, and a button that links to the project's blog page. Additionally, the section displays an image of a hippopotamus.\n\nThe component imports the `React` and `useEffect` modules from the `react` package and the `Image` component from the `next/image` package. The `fadeInFromLeft` and `fadeInFromRight` functions are imported from the `animation` module located in the `../../animation` directory.\n\nThe `GetStartedSection` component returns a JSX element that represents the section. The section has a class name of `GetStarted` and an ID of `about`. The section contains a `div` element with a class name of `px-6 pb-20 mx-auto max-w-7xl lg:flex lg:items-center lg:justify-between`. This `div` element contains two child `div` elements.\n\nThe first child `div` element contains the heading, paragraph, and button. The heading is a `h1` element with a class name of `mb-6 text-3xl font-bold md:text-4xl lg:text-[44px] leading-[3rem] lg:leading-4` and the text \"Make yield and do good.\" The paragraph is a `p` element with a class name of `mb-6 text-base text-white lg:text-lg lg:mb-8 text-opacity-70 md:max-w-2xl` and the text \"ZOO is a DeFi game that allows players to collect NFT animals representative of endangered species in the real world. Based on your game interactions users make more or less $ZOO.\" The button is an `a` element with a class name of `px-5 py-3 text-sm text-white rounded-full font-semibold bg-gradient-to-b from-purple to-blue md:text-base md:px-6 md:py-4 lg:px-10` and the text \"Get Started\". The `href` attribute of the button is set to \"/blog\".\n\nThe second child `div` element contains the image of the hippopotamus. The image is an `Image` component with a `src` attribute that points to an image of a hippopotamus, a `width` of 603 pixels, a `height` of 450 pixels, and an empty `alt` attribute.\n\nThe `GetStartedSection` component is exported as the default export of the module, which means that it can be imported and used in other parts of the Zoo project. For example, it could be imported into the `HomePage` component and rendered as part of the landing page.\n## Questions: \n 1. What is the purpose of the `useEffect` hook that is currently commented out?\n- The `useEffect` hook is used to trigger animations on the `getStartedContentRef` and `getStartedImageRef` elements, but it is currently commented out.\n\n2. What is the significance of the `Image` component being imported from \"next/image\"?\n- The `Image` component from \"next/image\" is used to optimize image loading and performance in the application.\n\n3. What is the overall purpose of the `GetStartedSection` component?\n- The `GetStartedSection` component is a section of the application that displays information about the ZOO DeFi game and allows users to navigate to the blog or get started with the game.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/GetStartedSection.md"}}],["1083",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/GrabAnimal.tsx)\n\nThe `GrabAnimal` component is a React component that renders a section of the webpage displaying animals that can be purchased. The component imports several modules including `Image` from the `next/image` library, `Link` from the `next/link` library, and `React`. It also imports the `dynamic` function from the `next/dynamic` library and the `ModelViewer` component from the `components/ModelViewer` file.\n\nThe `GrabAnimal` component takes two props, `grabAnimal` and `grabAnimal2`, which are arrays of objects containing information about the animals that can be purchased. The component maps over these arrays and renders the information for each animal in a specific format.\n\nThe component is divided into two main sections. The first section displays the animals in a grid format, with each animal's image and title displayed side by side. The image is displayed in a black box with rounded corners, and the title is displayed below the image. Each animal also has a \"Buy Now\" button that links to a \"coming soon\" page.\n\nThe second section displays the animals in a two-column grid format, with each animal's image, title, and description displayed in a column. The image is displayed in a black box with rounded corners, and the title is displayed above the image. The description is displayed below the image. Each animal also has a \"Learn More\" button that links to a page with more information about the animal.\n\nThe `GrabAnimal` component is used in the larger project to display the animals that can be purchased. It is likely used in conjunction with other components to create a complete webpage for purchasing animals. Here is an example of how the `GrabAnimal` component might be used in a larger project:\n\n```\nimport React from \"react\";\nimport GrabAnimal from \"./GrabAnimal\";\n\nconst animals = [\n {\n icon: \"/images/animal1.png\",\n title: \"Lion\",\n },\n {\n icon: \"/images/animal2.png\",\n title: \"Tiger\",\n },\n {\n icon: \"/images/animal3.png\",\n title: \"Bear\",\n },\n];\n\nconst animals2 = [\n {\n icon: \"/images/animal4.png\",\n title: \"Elephant\",\n description: \"The largest land animal in the world.\",\n },\n {\n icon: \"/images/animal5.png\",\n title: \"Giraffe\",\n description: \"The tallest land animal in the world.\",\n },\n {\n icon: \"/images/animal6.png\",\n title: \"Zebra\",\n description: \"A horse-like animal with black and white stripes.\",\n },\n];\n\nconst PurchaseAnimalsPage = () => {\n return (\n Welcome to Zoo!
\n\n
\n );\n};\n\nexport default PurchaseAnimalsPage;\n```\n\nIn this example, the `PurchaseAnimalsPage` component imports the `GrabAnimal` component and passes in two arrays of animal information as props. The `GrabAnimal` component is then rendered on the page, displaying the animals that can be purchased.\n## Questions: \n 1. What is the purpose of the `ModelViewer` component and why is it loaded dynamically?\n \n The `ModelViewer` component is imported dynamically using `next/dynamic` with `ssr` set to `false`. This means that the component is not included in the server-side rendering and is only loaded on the client-side. A smart developer might wonder why this is necessary and what the purpose of the `ModelViewer` component is.\n\n2. What is the purpose of the `GrabAnimal` component and what props does it expect?\n \n The `GrabAnimal` component is a functional component that takes in two props: `grabAnimal` and `grabAnimal2`. A smart developer might wonder what the purpose of this component is and what data is expected to be passed in through these props.\n\n3. What is the purpose of the `Image` and `Link` imports and how are they used in the component?\n \n The `Image` and `Link` components are imported from the `next/image` and `next/link` packages, respectively. A smart developer might wonder how these components are used in the `GrabAnimal` component and what benefits they provide over using traditional HTML `img` and `a` tags.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/GrabAnimal.md"}}],["1084",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/HeroSection.tsx)\n\nThe `HeroSection` component is a React component that renders a hero section for the zoo project. The hero section is the first section of the website that users see when they visit the website. The hero section contains a video background and a set of slides that display different animals and their information. The component uses the `useState`, `useEffect`, and `useRef` hooks from React to manage the state of the component and to interact with the DOM.\n\nThe `slides` array contains an array of objects that represent the different animals that are displayed in the hero section. Each object contains information about the animal, such as its title, video, price, type, and URI. The `activeSlideIndex` state variable is used to keep track of the currently active slide.\n\nThe `videoRef` and `videoCurrent` variables are used to reference the video element in the DOM and to interact with it. The `useEffect` hook is used to add an event listener to the video element that listens for the `timeupdate` event. When the `timeupdate` event is fired, the `handleVideoUpdate` function is called, which updates the `activeSlideIndex` state variable based on the current time of the video.\n\nThe `return` statement of the component renders the hero section. The hero section contains a `div` element that contains the video background and the slides. The `slides` array is mapped over to render each slide. The `activeSlideIndex` state variable is used to determine which slide is currently active. The `video` element is used to render the video background. The `Link` component from the `next/link` library is used to create a link to the animal's URI. The `button` element is used to display the animal's information and to allow users to navigate to the animal's page.\n\nOverall, the `HeroSection` component is an important part of the zoo project as it is the first section of the website that users see when they visit the website. The component provides users with an engaging and interactive experience that showcases the different animals that are available at the zoo.\n## Questions: \n 1. What is the purpose of the `HeroSection` component?\n- The `HeroSection` component is responsible for rendering a hero section with a video background and slides containing information about different animals and their types.\n\n2. What is the purpose of the `handleVideoUpdate` function?\n- The `handleVideoUpdate` function is responsible for updating the active slide index based on the current time of the video. It uses a switch statement to determine the active slide index based on the time.\n\n3. What external libraries or modules are being used in this code?\n- The code is importing the `React` library, as well as the `useState`, `useEffect`, and `useRef` hooks from React. It is also importing the `Link` component from the `next/link` module. Additionally, it is importing the `capitalize` function from a `functions/format` module and the `fadeInFromLeft` and `fadeInOnScroll` animations from an `animation` module.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/HeroSection.md"}}],["1085",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/InfoSection.tsx)\n\nThe code above defines a React component called `InfoSection` that renders a section of the Zoo project's website. The section contains information about the project's features and benefits, presented as a list of cards. Each card contains an icon, a title, and a description of a specific feature. \n\nThe `utils` array contains an object for each feature, with properties for the feature's title, description, and icon. The `InfoSection` component maps over this array to render a card for each feature. The icon is displayed as an image, and the title and description are displayed as text. \n\nThe `InfoSection` component is exported as the default export of the module, which means it can be imported and used in other parts of the project. For example, it could be included in a landing page or a features page to provide an overview of the project's capabilities. \n\nHere is an example of how the `InfoSection` component could be used in a landing page:\n\n```\nimport InfoSection from './components/InfoSection';\n\nconst LandingPage = () => {\n return (\n Purchase Animals
\n\n \n {/* header content */}\n \n \n \n \n
\n );\n};\n\nexport default LandingPage;\n```\n\nIn this example, the `InfoSection` component is imported from a file located in the `components` directory. It is then included in the `main` section of the landing page, along with other content. \n\nOverall, the `InfoSection` component provides a simple and reusable way to display information about the Zoo project's features. By encapsulating the feature cards in a component, the code is easier to read, maintain, and reuse.\n## Questions: \n 1. What is the purpose of the `utils` array?\n \n The `utils` array contains objects that represent different features of the Zoo project, such as \"Stability Tax\" and \"Mint New Animals\". Each object has a title, description, and icon associated with it.\n\n2. What is the `InfoSection` component responsible for?\n \n The `InfoSection` component is responsible for rendering a section of the Zoo website that displays information about the project's features. It uses the `utils` array to generate a list of feature descriptions with icons.\n\n3. What is the significance of the `Image` and `React` imports at the beginning of the code?\n \n The `Image` import is used to display images on the website, while the `React` import is necessary for defining React components. However, neither of these imports are actually used in the `InfoSection` component itself.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/InfoSection.md"}}],["1086",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/JoinZooSection.tsx)\n\nThe `JoinZooSection` component is a React component that renders a section of the Zoo project's website. The purpose of this section is to encourage users to follow Zoo on various social media platforms. The component imports the `React` library, as well as the `Image` component from the `next/image` library, and two custom icon components (`InstagramIcon` and `TwitterIcon`) from the `components/Icons` directory.\n\nThe component returns a section element with a purple background color and an ID of \"newsletter\". Within this section, there is a container element with a maximum width of 7xl (a custom tailwindcss class) that contains a heading, a paragraph, and a series of links to social media platforms. The heading encourages users to \"Join the ZOO family!\", while the paragraph instructs users to follow Zoo on social media. The links are represented as images, with each image wrapped in an anchor tag that links to the corresponding social media platform. The images are sourced from the `/img` directory and have a width and height of 32 pixels.\n\nThe component also contains a commented-out form element that would allow users to submit their email address to join the Zoo newsletter. However, this form is not currently being used and is therefore commented out.\n\nThis component can be used in the larger Zoo project to encourage users to follow Zoo on social media and stay up-to-date with the latest news and updates. It can be easily added to any page that requires a call-to-action for social media follows. For example, it could be added to the footer of the Zoo website to encourage users to follow Zoo on social media from any page. \n\nExample usage:\n```\nimport JoinZooSection from \"components/JoinZooSection\";\n\nconst HomePage = () => {\n return (\n \n
\n );\n};\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `JoinZooSection` that renders a section with a heading, a paragraph, and a list of social media links.\n\n2. What external dependencies does this code rely on?\n- This code imports several external dependencies, including React, Next.js's `Image` component, and custom icon components for Instagram and Twitter.\n\n3. What is the commented-out code at the end of the component for?\n- The commented-out code appears to be a form that allows users to submit their email address to join the ZOO mailing list. It is not currently being used in the component.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/JoinZooSection.md"}}],["1087",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/MarketPlaceSection.tsx)\n\nThe `MarketPlaceSection` component is a React component that renders a section of the Zoo project's website. The section contains information about the Zoo Labs Foundation, which is dedicated to saving and preserving endangered species. The component uses various third-party libraries and components to render the section.\n\nThe component imports the following libraries and components:\n\n- `React`: the core library for building user interfaces in React.\n- `useRef`, `useEffect`, and `useState`: React hooks for managing state and side effects in functional components.\n- `Image` and `Link` from the `next` library: components for optimizing images and links in Next.js applications.\n- `useActiveWeb3React` from the `hooks` module: a custom hook for accessing the active Web3 context in the Zoo project.\n- `Slider` from the `react-slick` library: a component for creating customizable image sliders.\n- `Web3Status` from the `components` module: a custom component for displaying the user's Web3 status.\n- `axios`: a library for making HTTP requests.\n\nThe component defines a `MarketPlaceSection` function that takes a `slideData` prop as input. The function destructures the `account`, `chainId`, and `library` properties from the Web3 context using the `useActiveWeb3React` hook. It also defines several state variables using the `useState` hook: `Form`, `succes`, `error`, and `sliderRef`. \n\nThe component then defines a `settings` object that configures the behavior of the `Slider` component. It also defines an event handler function `handleSubmit` that sends an HTTP POST request to an API endpoint `/api/subscribe` with the email address entered in the `Form` state variable. If the request is successful, the `succes` state variable is set to `true`, and the `error` state variable is set to `false`. If the request fails, the `error` state variable is set to `true`, and the `Form` state variable is updated with an error message.\n\nThe component also defines an event handler function `handleInputChange` that updates the `Form` state variable with the current value of the email input field.\n\nThe component then renders a section of the Zoo project's website using JSX. The section contains several HTML elements, including headings, paragraphs, and buttons. The `Slider` component is commented out, so it is not currently being used in the section. The `Web3Status` component is not used in this section either.\n\nOverall, the `MarketPlaceSection` component is a reusable React component that renders a section of the Zoo project's website. It uses various third-party libraries and components to create a visually appealing and interactive section that provides information about the Zoo Labs Foundation and its mission to save endangered species. The component also includes functionality for subscribing to a newsletter using an HTTP POST request.\n## Questions: \n 1. What is the purpose of the `useActiveWeb3React` hook and how is it used in this code?\n \n The `useActiveWeb3React` hook is used to access the current active Web3 context, including the user's account, chain ID, and library. It is used in this code to retrieve the user's account and chain ID.\n\n2. What is the purpose of the `handleSubmit` function and what API endpoint does it call?\n \n The `handleSubmit` function is called when the user submits a form with their email address. It sends a POST request to the `/api/subscribe` endpoint with the email address as the payload. \n\n3. What is the purpose of the commented out code referencing `marketRef` and `fadeInOnScroll`?\n \n The commented out code is a reference to a `ref` that is not used in the current implementation. It is likely that the `marketRef` was intended to be used to trigger a fade-in animation when the component is scrolled into view using the `fadeInOnScroll` function. However, this functionality is not currently implemented in the code.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/MarketPlaceSection.md"}}],["1088",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/OpportunitySection.tsx)\n\nThe `OpportunitySection` component is a React component that renders a section of the zoo project's website. The section displays a circle with four images of animals in different stages of maturity. The component is responsible for handling user interactions with the images and displaying information about each stage of the animal's life cycle.\n\nThe component imports several other components and hooks from the zoo project, including `EndangeredSpecies`, `useBuyZoo`, `useActiveWeb3React`, and `useFaucet`. It also imports the `Image` component from the `next/image` library and the `useState` and `useEffect` hooks from the `react` library.\n\nThe component defines two state variables using the `useState` hook: `stage` and `hovered`. `stage` is used to keep track of the current stage of the animal's life cycle that the user is hovering over. `hovered` is used to keep track of whether the user is currently hovering over one of the animal images.\n\nThe component defines several functions that are used to handle user interactions with the animal images. The `displayContent` function takes a string argument and sets the `stage` state variable to that string. The `handleHover` function toggles the `hovered` state variable between `true` and `false`.\n\nThe component renders a section element with the `id` \"endless-opportunity\". The section contains a div element with the class \"px-6 lg:mt-10\". Inside this div, there is another div element with the classes \"flex flex-col items-center justify-between mx-auto lg:flex-row max-w-7xl\". This div contains two child components: `EndangeredSpecies` and a div that displays the animal images.\n\nThe div that displays the animal images contains a div element with the class \"big-circle\". Inside this div, there are four div elements with the classes \"animate-animal incubate\", \"animate-animal feed\", \"animate-animal grow\", and \"animate-animal breed\". Each of these divs contains an `Image` component that displays an image of an animal in a different stage of maturity.\n\nThe `Image` components have several event listeners attached to them that call the `displayContent` function when the user hovers over them. The `displayContent` function sets the `stage` state variable to a string that describes the current stage of the animal's life cycle. When the user moves the mouse away from the image, the `displayContent` function is called again with an empty string argument to clear the `stage` state variable.\n\nOverall, the `OpportunitySection` component is responsible for rendering a section of the zoo project's website that displays information about the different stages of an animal's life cycle. The component handles user interactions with the animal images and updates the `stage` state variable to display information about the current stage of the animal's life cycle.\n## Questions: \n 1. What is the purpose of the `OpportunitySection` component?\n- The `OpportunitySection` component is responsible for rendering a section of the website that displays different animal images and descriptions, and allows users to interact with them by hovering over them.\n\n2. What is the role of the `useDispatch` hook from `react-redux`?\n- The `useDispatch` hook is used to dispatch actions to the Redux store. It is likely used in this code to dispatch the `getZooBalance` action.\n\n3. What is the purpose of the `useFaucet` hook from `hooks`?\n- It is unclear from this code what the purpose of the `useFaucet` hook is, as it is not used anywhere in the `OpportunitySection` component. It is possible that it is used elsewhere in the `zoo` project.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/OpportunitySection.md"}}],["1089",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/PartnersSection.tsx)\n\nThe `PartnersSection` component is a React functional component that renders a section of the zoo project's website that displays logos of partner organizations. The logos are displayed in a grid-like layout with varying sizes and are hyperlinked to the partner organizations' websites. \n\nThe component imports the `React`, `Image`, and `Link` modules from the `react`, `next/image`, and `next/link` packages respectively. The `React` module is used to define the component, while the `Image` and `Link` modules are used to display images and create hyperlinks respectively.\n\nThe component returns a JSX section element with a green background color and an ID of \"partnerships\". The section contains a div element with a flexbox layout that displays the logos of the partner organizations. The logos are displayed in three columns, with the first and third columns containing two logos each and the second column containing two larger logos. \n\nEach logo is wrapped in a `Link` component that creates a hyperlink to the partner organization's website. The `Image` component is used to display the logo image, with the `src`, `width`, `height`, and `alt` attributes set accordingly. \n\nOverall, this component serves as a way to showcase the partner organizations of the zoo project and provide users with a way to learn more about them. It can be easily modified to add or remove partner logos as needed. \n\nExample usage:\n\n```jsx\nimport PartnersSection from \"./PartnersSection\";\n\nfunction App() {\n return (\n \n
\n );\n}\n\nexport default App;\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `PartnersSection` that renders a section of the webpage with images and links to various partner organizations.\n\n2. What libraries or frameworks are being used in this code?\n- This code imports and uses the React, Next.js, and Image libraries.\n\n3. What is the layout of the partner images on the webpage?\n- The partner images are arranged in three columns, with the first column containing two images, the second column containing one image, and the third column containing two images. The images are all hyperlinked to external websites.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/PartnersSection.md"}}],["1090",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/PopularNftsSection.tsx)\n\nThe `PopularNftsSection` component is a React component that renders a section of the Zoo project's website that displays popular NFTs (non-fungible tokens) available for purchase on the marketplace. The component imports the `React` and `useEffect` modules from the `react` package, as well as the `Image` component from the `next/image` package, and the `NftCard` component from a local file. The component also imports two animation functions, `fadeInOnScroll` and `fadeInOnScrollAndStagger`, from a local `animation` module.\n\nThe `PopularNftsSection` component returns a JSX element that contains a `section` element with a `div` element inside of it. The `div` element has a `className` of `max-w-7xl mx-auto px-6 lg:pb-20`, which sets the maximum width of the element to 7xl, centers it horizontally, and adds padding to the bottom of the element on large screens. Inside the `div` element, there is another `div` element with a `className` of `flex flex-col items-center`, which centers its child elements vertically and horizontally. The `div` element contains an `h1` element with a `className` of `text-2xl md:text-2xl lg:text-[44px] leading-[3rem] lg:leading-4 text-center mb-4 font-semibold`, which sets the font size and weight of the text, centers it horizontally, and adds some margin to the bottom of the element. The `h1` element contains the text \"Popular NFTs\". Below the `h1` element, there is a `p` element with a `className` of `text-base lg:text-lg mb-6 lg:mb-8 text-white text-center text-opacity-70 md:max-w-xl`, which sets the font size, color, and opacity of the text, centers it horizontally, and adds some margin to the bottom of the element. The `p` element contains the text \"Browse and bid on the hottest ZOO NFTs on the marketplace.\".\n\nBelow the `div` element with the `h1` and `p` elements, there is another `div` element with a `className` of `flex flex-col items-center lg:flex-row lg: justify-between lg:gap-4`. This `div` element contains four instances of the `NftCard` component, each with different props passed to it. The `NftCard` component takes an `image` prop, which is an `Image` component with a `src`, `width`, `height`, and `alt` prop passed to it. The `NftCard` component also takes a `name`, `price`, `address`, `days`, `highestBid`, and `yields` prop, which are used to display information about the NFT. The `NftCard` component is defined in a separate file and is not included in this code snippet.\n\nThe `PopularNftsSection` component also includes two commented-out `useEffect` hooks that call the `fadeInOnScroll` and `fadeInOnScrollAndStagger` animation functions. These hooks are not currently being used in the component, but they could be used to animate the display of the NFTs when they come into view on the page.\n\nOverall, the `PopularNftsSection` component is a reusable component that can be used to display popular NFTs on any page of the Zoo project's website. The component is flexible and can be easily customized by passing different props to the `NftCard` component.\n## Questions: \n 1. What is the purpose of the `fadeInOnScroll` and `fadeInOnScrollAndStagger` functions?\n- These functions are used for animation and are imported from a separate file called \"animation\". \n\n2. Why are there commented out lines of code that reference `popularRef` and `nftsRef`?\n- It's unclear why these lines of code are commented out, but they may have been used for referencing elements in the DOM for animation purposes.\n\n3. What is the purpose of the `PopularNftsSection` component?\n- This component is used to display a section of popular NFTs with their associated information, such as name, price, and image.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/PopularNftsSection.md"}}],["1091",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/ReliableGovernance.tsx)\n\nThe code above is a React component that renders a section of a web page related to Reliable Governance. The component imports three modules: Image from \"next/image\", Link from \"next/link\", and React. \n\nThe ReliableGovernance component returns a JSX element that contains a div with a class name of \"max-w-7xl mx-auto\". This div contains another div with a class name of \"w-5/6 mx-auto mt-24\". Inside this div, there is another div with a class name of \"w-full flex flex-col-reverse md:flex-row items-center md:justify-between mb-11\". This div contains two child divs. The first child div has a class name of \"md:w-1/2\" and contains two paragraphs and a Link component. The second child div has a class name of \"flex-1 w-full md:w-1/2\" and contains a div with a class name of \"w-full bg-black rounded-xl h-[364px] flex items-center justify-center\" that contains an image.\n\nThe first paragraph inside the first child div has a class name of \"font-bold text-center lg:text-left mt-8 text-2xl md:text-[44px] md:leading-none mb-3 md:mb-[18px]\". It displays the text \"Reliable Governance\" in bold. The second paragraph has a class name of \"mb-5 md:mb-8 font-medium text-sm md:text-[20px] leading-7 text-muted-40 text-center lg:text-left mt-4\". It displays the text \"Our DAO leverages holographic consensus and quadratic voting.\" in a smaller font size. The Link component has a href attribute that points to \"/coming-soon\" and contains a div with a class name of \"px-5 py-3 text-[16px] font-semibold bg-black text-white flex items-center justify-between rounded-full w-48 md:text-lg md:px-6 lg:px-4 hover:cursor-pointer mx-auto lg:ml-0 mt-8\". This div contains a span element with the text \"Learn More\" and an Image component that displays an arrow icon.\n\nThe second child div contains a div with a class name of \"w-full bg-black rounded-xl h-[364px] flex items-center justify-center\". This div contains an image with a src attribute that points to \"/img/partnership.svg\".\n\nThis component can be used in a larger project to display information about reliable governance and provide a link to learn more about it. The component can be customized by changing the text and image displayed. For example, the text can be changed to display information about a different topic, and the image can be changed to display a different icon. Below is an example of how this component can be used in a larger project:\n\n```\nimport ReliableGovernance from \"./ReliableGovernance\";\n\nconst HomePage = () => {\n return (\n Welcome to the Zoo Project!
\n\n
\n );\n};\n\nexport default HomePage;\n```\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a React component called `ReliableGovernance` that renders a section of a webpage related to reliable governance.\n\n2. What external dependencies does this code have?\n \n This code imports three external dependencies: `Image` and `Link` from the `next` package, and `React` from the `react` package.\n\n3. What is the layout of the rendered section?\n \n The rendered section consists of two columns, with text on the left and an image on the right. The text includes a title, a description, and a \"Learn More\" button that links to a page with more information. The image is a black rectangle with a white icon in the center.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/ReliableGovernance.md"}}],["1092",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/SingleAnimal.tsx)\n\nThe `SingleAnimal` component is a React component that renders a 3D model of an animal and allows the user to switch between different categories of the animal (baby, teen, and adult). The component imports the `dynamic` function from the `next/dynamic` module and the `React` library. It also imports the `ModelViewer` component from the `components/ModelViewer` module.\n\nThe `ModelViewer` component is loaded dynamically using the `dynamic` function. This means that the component is not loaded during server-side rendering (SSR), but is instead loaded on the client-side. This is because the `ModelViewer` component requires access to the browser's WebGL API, which is not available during SSR.\n\nThe `SingleAnimal` component takes a `data` prop, which is an object containing the URLs for the 3D models of the animal in different categories. The component uses the `React.useState` hook to keep track of the current category of the animal being displayed. The `useMemo` hook is used to memoize the result of the switch statement that renders the appropriate `ModelViewer` component based on the current category.\n\nThe component renders a container `div` with a fixed height and width that clips any overflow. Inside this container, the `ModelViewer` component is rendered with the appropriate `usdz` and `glb` props based on the current category. Below the `ModelViewer`, there is a container `div` that is absolutely positioned at the bottom of the container. This container contains three clickable elements that allow the user to switch between the different categories of the animal. The current category is highlighted with a gradient background.\n\nThis component can be used in a larger project that displays information about different animals. It can be used to display a 3D model of a single animal and allow the user to switch between different categories of the animal. For example, it could be used in a virtual zoo application that allows users to view different animals in different categories. \n\nExample usage:\n\n```jsx\nimport SingleAnimal from \"components/SingleAnimal\";\n\nconst animalData = {\n usdz_baby: \"/path/to/baby.usdz\",\n glb_baby: \"/path/to/baby.glb\",\n usdz_teen: \"/path/to/teen.usdz\",\n glb_teen: \"/path/to/teen.glb\",\n usdz: \"/path/to/adult.usdz\",\n glb: \"/path/to/adult.glb\",\n};\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `ModelViewer` component and where is it defined?\n- The `ModelViewer` component is used to render 3D models of animals and it is defined in a file located at `components/ModelViewer`.\n2. What is the significance of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the result of the `switch` statement that renders the appropriate `ModelViewer` component based on the `category` state. This helps to optimize performance by avoiding unnecessary re-renders.\n3. What is the purpose of the `category` state and how is it used in the code?\n- The `category` state is used to determine which age category of the animal to display (`baby`, `teen`, or `adult`). It is used in the `switch` statement inside the `useMemo` hook to render the appropriate `ModelViewer` component. The `category` state is also updated when the user clicks on one of the age category buttons at the bottom of the component.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/SingleAnimal.md"}}],["1093",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/StartCollecting.tsx)\n\nThe code above is a React component that renders a section of the Zoo project's website. The purpose of this component is to encourage users to start collecting NFTs by clicking on a button that takes them to a specific page of the website. \n\nThe component is composed of two main sections: a text section and a video section. The text section contains a heading and a button that says \"Start Collecting\". The video section contains a looping video that showcases some of the NFTs available for collection. \n\nThe text section is made up of a div element with a class of \"flex flex-col px-6 mx-auto -mb-32 max-w-7xl gap-10 mt-6 lg:gap-36 lg:flex-row lg:items-center lg:justify-between\". This div element contains two child elements: a div element with a class of \"flex-1\" and a Link component. The \"flex-1\" div element contains a paragraph element with a class of \"text-3xl md:text-6xl font-bold mb-4 md:mb-9\" that displays the heading \"It all starts with one egg.\" The Link component wraps a div element that displays the \"Start Collecting\" button. \n\nThe video section is made up of a div element with a class of \"flex items-center justify-center flex-1 h-full max-h-[198px] md:max-h-[583px] border border-33 rounded-2xl max-w-max mx-auto bg-black\". This div element contains a video element that displays the looping video. The video element has a source attribute that points to a video file hosted on IPFS. \n\nThis component can be used in the larger Zoo project as a landing page for users who are interested in collecting NFTs. The \"Start Collecting\" button can be linked to a page that displays all of the available NFTs for collection. The video section can be updated with new videos to showcase new NFTs as they become available. \n\nExample usage:\n\n```\nimport StartCollecting from \"./StartCollecting\";\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a React component called `StartCollecting` that renders a section of a webpage with a video and a button that links to another page.\n\n2. What libraries or dependencies are being used in this code?\n \n This code imports two modules: `Link` from the `next/link` library and `React` from the `react` library. It also uses CSS classes from the `tailwindcss` library.\n\n3. What is the source of the video being displayed?\n \n The video source is a URL that points to a file hosted on the IPFS network.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/StartCollecting.md"}}],["1094",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/UnimagineableExperience.tsx)\n\nThis code defines a React component called `UnimagineableExperience`. The component returns a JSX element that renders a full-screen video background with a centered heading that reads \"Unimaginable Experiences\". The video source is a short clip of trippy animal footage. The component also includes some CSS classes to style the layout of the elements.\n\nThis component can be used as a landing page or introduction to a larger project, particularly one related to zoos or animal experiences. It provides a visually engaging and immersive experience for the user, with the video background and large heading drawing attention to the main message of the page. The component is also responsive, adapting to different screen sizes and orientations.\n\nHere is an example of how this component could be used in a larger React application:\n\n```\nimport React from \"react\";\nimport UnimagineableExperience from \"./UnimagineableExperience\";\n\nconst App = () => {\n return (\n \n
\n );\n};\n\nexport default App;\n```\n\nIn this example, the `UnimagineableExperience` component is imported and rendered as the first element in the `App` component. Other components and content can be added below it to create a complete application.\n## Questions: \n 1. What is the purpose of this component?\n - This component is rendering a full-screen video background with a centered heading that reads \"Unimaginable Experiences\".\n\n2. What is the significance of the class names used in the JSX?\n - The class names are used for styling purposes and are likely part of a larger CSS framework or custom styling system.\n\n3. Where is the video file being sourced from?\n - The video file is being sourced from a local directory called \"videoes\" and is in the format of a webm file.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/UnimagineableExperience.md"}}],["1095",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/WhatToDo.tsx)\n\nThe code above is a React component that renders a section of a web page for the Zoo project. The purpose of this component is to display a list of utilities that can be performed with the Zoo NFTs. The component is called WhatToDo and it is imported from the file located at `zoo`.\n\nThe component imports three modules: Image, Link, and React. The Image module is imported from the Next.js library and is used to display an arrow icon. The Link module is also imported from Next.js and is used to create links to external resources. The React module is imported to enable the use of React components.\n\nThe component defines an array of objects called utilities. Each object represents a utility that can be performed with the Zoo NFTs. Each object has a title and a link property. The title property is a string that describes the utility, while the link property is a URL that points to a resource that provides more information about the utility.\n\nThe component then renders a section of the web page that displays the list of utilities. The section contains a heading that describes the purpose of the list and a paragraph that provides additional information. The list of utilities is displayed as a grid of boxes, each containing the title of a utility and an arrow icon that links to the resource that provides more information about the utility.\n\nFinally, the component renders a section of the web page that displays an image of an egg and a button that links to a page where users can start collecting NFTs. The purpose of this section is to encourage users to start using the Zoo NFTs.\n\nOverall, this component provides a high-level overview of the utilities that can be performed with the Zoo NFTs and encourages users to start collecting them. It is a useful component for the Zoo project as it provides a clear and concise summary of the project's features and benefits.\n## Questions: \n 1. What is the purpose of the `utilities` array?\n \n The `utilities` array contains a list of different actions that can be performed with the Zoo NFTs, along with links to relevant documentation.\n\n2. What is the purpose of the `WhatToDo` component?\n \n The `WhatToDo` component appears to be a section of a larger website or application, and it displays information about the different actions that can be performed with Zoo NFTs.\n\n3. What is the significance of the egg animation in the `WhatToDo` component?\n \n The egg animation appears to be a visual representation of the starting point for collecting Zoo NFTs, as the accompanying text states that \"It all starts with 1 egg.\"","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/WhatToDo.md"}}],["1096",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/ZooFooter.tsx)\n\nThe `ZooFooter` component is a React component that renders the footer section of a website. It imports several modules, including `React`, `useEffect`, `useState`, `Link`, `axios`, and `Image`. The component defines a state object `Form` that has an `email` property and two other state variables `success` and `error`. The `Form` state object is updated when the user types in their email address in the input field. The `handleSubmit` function is called when the user clicks the submit button. It sends a POST request to the `/api/subscribe` endpoint with the email address entered by the user. If the request is successful, the `Form` state object is updated with a success message, and the `success` state variable is set to `true`. If the request fails, the `Form` state object is updated with an error message, and the `error` state variable is set to `true`.\n\nThe `ZooFooter` component renders a section with the id `faqs`. It contains a logo, a grid with three columns, and a social media section. The first column contains links to the marketplace, chart, community, press, and learn pages. The second column contains links to the user's profile, connect wallet, whitepaper, FAQ, and contact us pages. The third column contains a newsletter subscription form. The form has an input field for the user's email address and a submit button. When the user submits the form, the `handleSubmit` function is called, and the email address is sent to the server. If the request is successful, a success message is displayed, and if it fails, an error message is displayed.\n\nThe `CustomLink` and `CustomIconLink` components are used to render links and icons in the footer. The `CustomLink` component takes two props, `link` and `title`, and renders a link to the specified `link` with the specified `title`. The `CustomIconLink` component takes two props, `link` and `icon`, and renders an icon that links to the specified `link`.\n\nOverall, the `ZooFooter` component provides a way for users to subscribe to a newsletter and navigate to different pages of the website. It also displays social media links and copyright information.\n## Questions: \n 1. What is the purpose of the `handleSubmit` function?\n- The `handleSubmit` function is responsible for sending an API request to subscribe the user's email to the newsletter. It updates the state variables `Form`, `error`, and `succes` based on the response from the API.\n\n2. What is the purpose of the `CustomLink` and `CustomIconLink` components?\n- The `CustomLink` and `CustomIconLink` components are used to create links and icons with links respectively. They are used in the `ZooFooter` component to create the various links and icons in the footer.\n\n3. What is the purpose of the `fadeInOnScroll` function?\n- The `fadeInOnScroll` function is commented out and not currently being used in the code. Without additional context, it is unclear what its purpose is.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/ZooFooter.md"}}],["1097",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/ZooNewsSection.tsx)\n\nThe `ZooNewsSection` component is a React component that renders a section of the Zoo website dedicated to news about the project. The component imports the `React` and `useEffect` modules from the `react` package, as well as the `Image` component from the `next/image` package. It also imports an `fadeInOnScroll` function from an `animation` module located in a different part of the project.\n\nThe component renders a section element with the class name `ZooNews`. The section contains two child elements: a div with the class name `pt-16 pb-16 px-6 lg:max-w-7xl lg:mx-auto`, and a div with the class name `flex flex-col items-center max-w-xl lg:max-h-[494px] mx-auto lg:flex-row lg:items-stretch lg:max-w-5xl`.\n\nThe first child div contains two child elements: a div with the class name `flex items-center text-center flex-col`, and a paragraph element. The first child div contains a heading element with the text \"ZOO News\" and a paragraph element with a description of the news content.\n\nThe second child div contains two child elements: an `Image` component and a div with the class name `flex flex-col justify-center w-full lg:basis-1/2 bg-deep-gray rounded-r-2xl lg:-ml-2 -mt-3 lg:-mt-0`. The `Image` component displays an SVG image of the Zoo logo. The second child div contains a div with the class name `max-w-sm mx-auto py-8 lg:py-0 px-4 lg:px-0`, which contains a heading element, a paragraph element, and a link to a blog post.\n\nThe `ZooNewsSection` component does not use the `fadeInOnScroll` function, which is commented out. The component exports itself as the default export of the module.\n\nThis component can be used in the larger Zoo project to display news content to users. It is a reusable component that can be included in other pages or components that need to display news content. Developers can customize the content of the component by changing the text and images displayed. For example, they can replace the Zoo logo with a different image, or change the text of the heading and paragraph elements to reflect different news content.\n## Questions: \n 1. What is the purpose of the `fadeInOnScroll` function and why is it commented out?\n- The `fadeInOnScroll` function is an animation function that fades in an element on scroll. It is likely commented out because it is not currently being used or may have caused issues with the component's rendering.\n\n2. What is the `ZooNewsSection` component responsible for rendering?\n- The `ZooNewsSection` component renders a section of the Zoo website that displays news and information about the company's NFTs, conservation efforts, and educational resources.\n\n3. What is the purpose of the `Image` component and what props are being passed to it?\n- The `Image` component is being used to display an SVG image of the Zoo logo. The `src`, `width`, `height`, `alt`, and `objectFit` props are being passed to it to specify the image source, dimensions, accessibility text, and how the image should be scaled to fit its container.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/ZooNewsSection.md"}}],["1098",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/home/index.tsx)\n\nThe `Home` component in this file is the main entry point for the Zoo project's homepage. It imports various components and libraries such as `lodash`, `next/dynamic`, `react`, `axios`, and others. \n\nThe `Home` component renders several sections of the homepage, including the hero section, buy egg section, unimagineable experience section, reliable governance section, what to do section, grab animal section, marketplace section, and FAQ section. \n\nThe `getTypeURIs` function takes a string argument and returns an object with two properties: `contentURI` and `metadataURI`. These properties are URLs that point to the image and metadata of the specified type. \n\nThe `grabAnimal` and `grabAnimal2` arrays contain objects with information about animals that users can purchase on the Zoo marketplace. The `slideData` array contains objects with information about how to set up a Metamask wallet. The `experiences` array contains objects with information about the benefits of using the Zoo platform. \n\nThe `useTokenTypes` hook is imported from the `zoo/state` module and used to retrieve the token types from the Zoo platform. The `fetchBlog` function is defined using the `useCallback` hook and retrieves the latest blog posts from the Zoo Medium page using the `axios` library. \n\nOverall, this file defines the `Home` component that serves as the main entry point for the Zoo project's homepage. It imports various components and libraries and renders several sections of the homepage. It also defines helper functions and arrays with information about animals, Metamask wallets, and the benefits of using the Zoo platform.\n## Questions: \n 1. What is the purpose of the `getTypeURIs` function?\n- The `getTypeURIs` function returns an object containing the content and metadata URIs for a given type, with the base URL being \"https://db.zoolabs.io\".\n\n2. What is the significance of the `grabAnimal` and `grabAnimal2` arrays?\n- The `grabAnimal` and `grabAnimal2` arrays contain objects with information about different animals and steps to take in order to participate in the Zoo Marketplace.\n\n3. What is the purpose of the `fetchBlog` function and how is it used?\n- The `fetchBlog` function is used to fetch blog data from the Medium API and set it in the `blogs` state. It is called in a `useEffect` hook to fetch the data on component mount.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/home/index.md"}}],["1099",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/index.tsx)\n\nThis code is a React component that serves as the main dashboard for the Zoo project. It imports several dependencies, including React, nanoid from the Redux Toolkit, GetStaticProps from Next.js, Head from Next.js, loadTranslation from the entities file, Home component, and HomeLayout component. \n\nThe code exports a function called getStaticProps that is used to fetch data at build time. This function takes a locale parameter and generates a unique sessionId using nanoid. It then calls the loadTranslation function from the entities file, passing in the locale, sessionId, and a boolean indicating whether the environment is in production. The messages returned from this function are spread into an object and returned as props.\n\nThe default export of the file is a React component called Dashboard. This component renders a Head component from Next.js, which sets the title and meta description of the page. It also renders a Home component, which is the main content of the dashboard. Finally, the code sets the Layout property of the Dashboard component to the HomeLayout component.\n\nThis code is used to generate the main dashboard page of the Zoo project. The getStaticProps function is used to fetch translation messages at build time, which are then passed as props to the Dashboard component. The Dashboard component renders the main content of the dashboard, including the Home component and the Head component. The HomeLayout component is used to provide a consistent layout for the dashboard. \n\nExample usage:\n\n```jsx\nimport Dashboard from \"./path/to/dashboard\";\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `getStaticProps` function?\n- The `getStaticProps` function is used to fetch data at build time and pass it as props to the component.\n\n2. What is the significance of the `Dashboard.Layout` property?\n- The `Dashboard.Layout` property is used to specify the layout component for the `Dashboard` component.\n\n3. What is the purpose of the `loadTranslation` function?\n- The `loadTranslation` function is used to load translation messages for a given locale and session ID.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/index.md"}}],["1100",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/learn/index.tsx)\n\nThe code above is a React component called `Learn`. It imports a component called `ComingSoon` from a file located at \"components/ComingSoon\". When the `Learn` component is rendered, it returns a div element with an empty class name and the `ComingSoon` component inside it.\n\nThe purpose of this code is to display a \"Coming Soon\" message to users who try to access the `Learn` section of the larger project. This could be used in a variety of ways, such as when a new feature or section of the project is being developed and is not yet ready for public use. \n\nHere is an example of how this code might be used in the larger project:\n\n```jsx\nimport Learn from \"components/Learn\";\n\nconst App = () => {\n const [showLearn, setShowLearn] = useState(false);\n\n // logic to determine whether to show the Learn component\n // based on user permissions or other conditions\n\n return (\n \n {showLearn ?
\n );\n};\n\nexport default App;\n```\n\nIn this example, the `Learn` component is conditionally rendered based on some logic that determines whether the user has access to that section of the project. If the user does not have access, a message is displayed instead. \n\nOverall, the `Learn` component serves as a placeholder for a future feature or section of the project, and allows developers to work on that feature without disrupting the user experience.\n## Questions: \n 1. What is the purpose of the `ComingSoon` component?\n - The `ComingSoon` component is likely a placeholder for a feature or section of the `Learn` page that is not yet implemented or under development.\n\n2. What other components or elements are included in the `Learn` page?\n - The code only shows the `ComingSoon` component being rendered within a `div` element with an empty `className`. It is unclear what other components or elements are included in the `Learn` page.\n\n3. What is the overall functionality or purpose of the `Learn` page within the `zoo` project?\n - The code only shows the rendering of the `ComingSoon` component within the `Learn` page. It is unclear what the overall functionality or purpose of the `Learn` page is within the `zoo` project.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/learn/index.md"}}],["1101",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/my-nft.tsx)\n\nThis code defines a React component called `Seemynft` that renders a page displaying information about a user's NFTs (non-fungible tokens) in the context of the larger project called \"zoo\". \n\nThe component imports several dependencies: `React`, `Image` from the `next/image` library, and two custom components called `ZooItem`, `TradingHistory`, and `AllMyNfts`. \n\nThe `Seemynft` component returns a JSX element that contains three child components: `ZooItem`, `TradingHistory`, and `AllMyNfts`. The `ZooItem` component displays information about a specific NFT, including an image, title, description, and price. The `TradingHistory` component displays a history of the user's trading activity for their NFTs. The `AllMyNfts` component displays a list of all the user's NFTs. \n\nThis component is likely used as a page in the larger \"zoo\" project that allows users to view and manage their NFTs. The `Seemynft` component could be used in conjunction with other components to create a dashboard or profile page for users to manage their NFTs. \n\nHere is an example of how the `Seemynft` component could be used in a larger project:\n\n```\nimport React from \"react\";\nimport Seemynft from \"./Seemynft\";\nimport OtherComponents from \"./OtherComponents\";\n\nconst MyNftsPage = () => {\n return (\n You do not have access to this section.
}\n\n
\n );\n};\n\nexport default MyNftsPage;\n```\n\nIn this example, the `MyNftsPage` component renders the `Seemynft` component along with other components that make up the user's NFT management page.\n## Questions: \n 1. What dependencies are being imported in this file?\n- The code imports React, Image from Next.js, ZooItem, AllMyNfts, and TradingHistory components.\n\n2. What is the purpose of the Seemynft component?\n- The Seemynft component returns a JSX element that renders the ZooItem, TradingHistory, and AllMyNfts components in a grid layout.\n\n3. What props are being passed to the ZooItem component?\n- The ZooItem component is being passed the src, infoTitle, infoDesc, and authenticityPrice props.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/my-nft.md"}}],["1102",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/nft/index.tsx)\n\nThe `Nft` component is a React component that renders a page for displaying information about a specific NFT (non-fungible token). The page is divided into two main sections: an image of the NFT and a section with details about the NFT.\n\nThe image section displays an animated GIF of an egg and a button to place a bid. The egg image is wrapped in a div that has a reference set to `nftImageRef`. This reference is used in the `useEffect` hook to apply an animation to the image when the component mounts. The animation is defined in the `fadeInFromLeft` function, which is imported from the `animation` module. The button to place a bid is styled with a gradient background and a rounded shape.\n\nThe details section displays information about the NFT, including its name, description, and various metadata. The section is divided into two parts: a box with general details and a box with proof of authenticity. The general details box is wrapped in a div that has a reference set to `nftContentRef`. This reference is used in the `useEffect` hook to apply an animation to the box when the component mounts. The animation is defined in the `fadeInFromRight` function, which is also imported from the `animation` module.\n\nThe proof of authenticity box displays a price in $ZOO and a link to view the NFT on IPS (InterPlanetary File System). The link is styled with an arrow icon and is clickable.\n\nAt the bottom of the page, there is a section that displays popular NFTs and a link to view all NFTs.\n\nThis component can be used in the larger project as a template for displaying information about individual NFTs. It can be customized with different images, descriptions, and metadata to display information about different NFTs. The animation functions can also be reused in other parts of the project to apply consistent animations.\n## Questions: \n 1. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to trigger the `fadeInFromLeft` and `fadeInFromRight` animations on the `nftImageRef` and `nftContentRef` elements respectively, when the component mounts.\n\n2. What is the significance of the `Image` component imported from \"next/image\"?\n- The `Image` component is used to display an image with optimized performance and user experience, by automatically optimizing images based on the device and network conditions.\n\n3. What is the purpose of the `PopularNftsSection` component imported from \"pages/home/PopularNftsSection\"?\n- The `PopularNftsSection` component is used to display a section of popular NFTs on the home page of the application.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/nft/index.md"}}],["1103",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/nft-info/index.tsx)\n\nThe `NftInfo` component is a React component that renders information about a specific NFT (non-fungible token). The component imports the `Image` component from the `next/image` library and the `Modal` component from a local file located at `../../components/Modal/`. \n\nThe component renders an image of the NFT, along with some details about the NFT, such as its name, generation, and transaction details. The component also includes a button that, when clicked, opens a modal window that displays additional information about the NFT. \n\nThe `NftInfo` component is likely used in a larger project that involves buying, selling, and trading NFTs. The component could be used on a page that displays a list of NFTs for sale, and when a user clicks on a specific NFT, the `NftInfo` component would be rendered to display more information about that NFT. \n\nHere is an example of how the `NftInfo` component could be used in a larger project:\n\n```\nimport React from \"react\";\nimport NftInfo from \"./NftInfo\";\n\nconst NftList = ({ nfts }) => {\n return (\n \n {nfts.map((nft) => (\n
\n );\n};\n\nexport default NftList;\n```\n\nIn this example, the `NftList` component receives an array of NFTs as a prop, and maps over the array to render an `NftInfo` component for each NFT. The `NftInfo` component would receive the specific NFT as a prop, and would render the information for that NFT.\n## Questions: \n 1. What is the purpose of the `Modal` component and how is it triggered?\n- The `Modal` component is used to display additional information when the \"Place bid\" button is clicked. It is triggered by setting the `isOpen` state to `true` when the button is clicked.\n\n2. What is the significance of the commented out `TransactionHistory` component?\n- The `TransactionHistory` component was previously used to display transaction history related to the NFT, but it is currently commented out and not being used. It is unclear why it was commented out or if it will be used again in the future.\n\n3. What is the purpose of the `Proof of Authenticity` section and how is it related to the NFT?\n- The `Proof of Authenticity` section displays the price of the NFT in $ZOO and provides a link to view the NFT on IPS. It is related to the NFT by providing additional information about its authenticity and value.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/nft-info/index.md"}}],["1104",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/partnerships/index.tsx)\n\nThe `Partnership` component is a React component that renders a section of the Zoo website related to partnerships and donations. The component imports several dependencies, including React, Next.js, Material UI, and an animation library. \n\nThe component starts by defining a custom styled switch component using Material UI's `styled` function. The `UiSwitch` component is a switch with a custom thumb that displays the Zoo logo. \n\nThe `Partnership` component then defines a `partnerRef` using React's `useRef` hook and a `checked` state variable using React's `useState` hook. The `useEffect` hook is used to apply a fade-in animation to the `partnerRef` element when the component mounts. \n\nThe component then renders several sections of content related to Zoo partnerships and donations. The first section includes a heading and a paragraph of text. The second section includes two paragraphs of text. The third section includes a custom switch component, an input field, and a button. \n\nOverall, the `Partnership` component provides a way for users to learn about Zoo partnerships and make donations. The custom switch component adds a unique touch to the donation form. \n\nExample usage: \n\n```jsx\nimport Partnership from \"./Partnership\";\n\nfunction App() {\n return (\n \n
\n ))}\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `UiSwitch` component and how is it styled?\n \n The `UiSwitch` component is a custom styled switch component from the Material UI library. It is styled using the `styled` function from Material UI and has custom styles for the switch base, thumb, and track.\n\n2. What is the purpose of the `fadeInOnScroll` function and where is it used?\n \n The `fadeInOnScroll` function is an animation function that fades in an element when it comes into view on the screen. It is used in the `useEffect` hook to apply the animation to the `partnerRef` element.\n\n3. What is the purpose of the `Switch` component from Material UI and how is it used in this code?\n \n The `Switch` component from Material UI is a basic switch component that can be used to toggle between two states. It is used in this code to create a switch that toggles between a one-time donation and a monthly donation. The `checked` state is controlled by the `checked` prop and the `onChange` function updates the state when the switch is toggled.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/partnerships/index.md"}}],["1105",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/press/index.tsx)\n\nThe code above is a React component that renders a \"Coming Soon\" message. The component is imported from a file located at \"components/ComingSoon\". The purpose of this code is to provide a placeholder for a future feature or section of the website that is currently under development. \n\nThis component is likely to be used in the larger project as a way to inform users that a particular section of the website is not yet available. For example, if the website is a zoo website, this component may be used to indicate that a new exhibit or feature is coming soon. \n\nThe code is relatively simple. It defines a functional component called \"Press\" that returns a div containing the \"ComingSoon\" component. The \"ComingSoon\" component is likely to be a simple message or graphic that indicates that the feature is not yet available. \n\nHere is an example of how this component might be used in a larger project:\n\n```\nimport Press from \"components/Press\";\n\nconst App = () => {\n return (\n \n
\n );\n};\n\nexport default App;\n```\n\nIn this example, the \"Press\" component is used to indicate that a particular section of the website is not yet available. The message is displayed between the heading and the paragraph, providing a clear indication to the user that the website is still under development. \n\nOverall, this code provides a simple and effective way to indicate that a particular feature or section of the website is not yet available. It is likely to be used in a larger project as a way to manage user expectations and provide a clear indication of what is coming soon.\n## Questions: \n 1. What is the purpose of the `ComingSoon` component?\n - The `ComingSoon` component is likely a placeholder or teaser for a feature or section that is not yet available.\n2. Why is the `Press` component importing the `ComingSoon` component?\n - It is unclear why the `Press` component is importing the `ComingSoon` component without additional context about the overall functionality of the `zoo` project.\n3. What is the intended use of the `Press` component within the `zoo` project?\n - Without additional information about the project requirements or goals, it is unclear how the `Press` component fits into the overall functionality of the `zoo` project.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/press/index.md"}}],["1106",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/reward-calculator/index.tsx)\n\nThe `RewardCalculator` component is a React component that calculates the potential rewards for a user based on the collateral amount, term, and animal selected. The component imports several components from external libraries such as `recharts` and `components/Slider`. It also imports a custom hook `useGetAvailableEggs` from the `zoo` slice of the Redux store.\n\nThe component renders a form with three input fields: Collateral Amount, Term, and Animal. The Collateral Amount field is disabled, while the Term and Animal fields are dropdown menus. The Term dropdown menu has three options: 6 months, 12 months, and 18 months. The Animal dropdown menu is populated with options based on the available eggs in the Redux store. The options are dynamically generated based on the `availableEggs` state variable.\n\nWhen the user selects a Term and an Animal, the component calculates the potential rewards based on the yield of the selected animal and the selected term. The calculation is done in the `handleChange` function, which generates an array of objects representing the monthly rewards for the selected term. The array is then passed to a `LineChart` component from the `recharts` library, which displays the data in a line chart.\n\nThe component also includes a `MarketTypeSlider` component from the `components/Slider` library, which allows the user to adjust the potential rewards based on the market type. The slider has seven positions, ranging from \"Super Bearish\" to \"Moon\". The selected position is used to calculate the potential rewards, which are displayed in the `LineChart`.\n\nOverall, the `RewardCalculator` component is a useful tool for users to calculate their potential rewards based on their collateral amount, term, animal, and market type. It provides a visual representation of the potential rewards in a line chart, which can help users make informed decisions about their investments.\n## Questions: \n 1. What is the purpose of the `useGetAvailableEggs` hook and how is it used in this code?\n \n The `useGetAvailableEggs` hook is used to fetch a list of available eggs from the zoo state. It is called in the `useEffect` hook to fetch the eggs when the component mounts.\n\n2. What is the purpose of the `handleChange` function and how is it used in this code?\n \n The `handleChange` function is used to generate data for the line chart based on the selected time frame and animal yield. It returns an array of objects with the name of the month and the corresponding amount of yield. It is called in the `useMemo` hook to memoize the data and avoid unnecessary re-renders.\n\n3. What is the purpose of the `MarketTypeSlider` component and how is it used in this code?\n \n The `MarketTypeSlider` component is used to display a slider that allows the user to select a market type and see the corresponding earning potential. It is used in the second column of the grid to display the slider and the earning potential values. The `onChange` prop is used to update the `earning` state when the slider value changes.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/reward-calculator/index.md"}}],["1107",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/store/HeroSection.tsx)\n\nThe `HeroSection` component is a React component that renders a search bar and links to the shopping cart and checkout pages of an online store. The component imports the `Link` component from the Next.js library and the `useAppSelector` hook and `CartItem` type from the project's state management and type definitions, respectively.\n\nThe `HeroSection` component uses the `useAppSelector` hook to retrieve the `CartItems` array from the project's Redux store. This array contains the items that the user has added to their shopping cart. The component then renders a search bar and two links. The search bar allows the user to search for products in the store. The first link leads to the shopping cart page and displays the number of items in the cart. The number of items is obtained from the `CartItems` array. The second link leads to the checkout page.\n\nThe component uses Tailwind CSS classes to style the search bar and links. The search bar has a dark background and white text. The links have a dark background and light text. The shopping cart link has an image of a shopping cart and the number of items in the cart next to it.\n\nThis component can be used in the larger project as a reusable component that can be included in multiple pages of the online store. It provides a consistent user interface for searching for products and accessing the shopping cart and checkout pages. Developers can customize the component's appearance and behavior by modifying the Tailwind CSS classes and the links' URLs. For example, they can change the color scheme, add or remove links, or change the text displayed on the links. \n\nExample usage:\n\n```jsx\nimport HeroSection from \"zoo/components/HeroSection\";\n\nconst HomePage = () => {\n return (\n Welcome to the Zoo Website
\nCheck back soon for updates!
\n\n
\n );\n};\n\nexport default HomePage;\n```\n## Questions: \n 1. What is the purpose of the `useAppSelector` hook and how is it used in this code?\n - The `useAppSelector` hook is used to extract data from the Redux store in the application state. In this code, it is used to retrieve the `CartItems` array from the store.\n2. What is the purpose of the `Link` component and how is it used in this code?\n - The `Link` component is used to create links to other pages within the application. In this code, it is used to create links to the shopping cart and checkout pages.\n3. What is the purpose of the `HeroSection` component and where is it used in the application?\n - The `HeroSection` component is used to display the search bar and links to the shopping cart and checkout pages. It is likely used on the homepage or a main store page of the application.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/store/HeroSection.md"}}],["1108",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/store/ProductsSection.tsx)\n\nThe `ProductsSection` component is a React component that renders a section of the Zoo Store website that displays a list of products. The component imports the `useState` and `useAppSelector` hooks from the `react` and `state/hooks` modules respectively, and the `Product` type from the `types/product` module. \n\nThe `ProductInterface` interface defines the shape of a product object, which has properties such as `name`, `price`, `description`, `properties`, `image`, `gallery_image`, `quantity`, `_id`, and `status`. The `properties` property is an object that contains arrays of strings representing the available colors, sizes, and adendums for the product.\n\nThe `ProductsSection` component uses the `useAppSelector` hook to retrieve the `Products` array from the store state. If the `Products` array is not empty, the component maps over the array and renders a product card for each product. Each product card contains an image, name, short description, and base price. If the `Products` array is empty, the component displays a message indicating that there are no products.\n\nThe component is exported as the default export of the module, which means that it can be imported and used in other parts of the Zoo Store website. For example, the component could be imported and rendered in the `Home` component to display the list of products on the home page of the website.\n\nExample usage:\n\n```\nimport ProductsSection from 'zoo/ProductsSection';\n\nconst Home = () => {\n return (\n \n
\n );\n};\n\nexport default Home;\n```\n## Questions: \n 1. What is the purpose of the `ProductsSection` component?\n- The `ProductsSection` component is responsible for rendering a section of the Zoo Store that displays a list of products.\n\n2. What is the `ProductInterface` interface used for?\n- The `ProductInterface` interface defines the structure of a product object, including its name, price, description, properties, image, and other attributes.\n\n3. What is the `useAppSelector` hook used for?\n- The `useAppSelector` hook is used to extract data from the Redux store in the Zoo project. In this case, it is used to retrieve the `Products` array from the store and render it in the component.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/store/ProductsSection.md"}}],["1109",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/store/[id]/index.tsx)\n\nThe `ShopDetails` component is responsible for rendering the details of a single product in the online store. It imports several hooks and types from other files in the project, including `useCart` and `CartItem` from `state/store/hooks`, `Product` from `types/product`, and `useAppSelector` from `state/hooks`. \n\nThe component starts by initializing several state variables using the `useState` hook, including `product`, `size`, `color`, and `adendums`. It then uses the `useRouter` hook from the `next/router` library to get the `id` of the product from the URL. It also uses the `useAppSelector` hook to get the `Products` and `CartItems` from the global store. \n\nThe `useEffect` hook is used to set the `product` state variable to the product with the matching `id` from the `Products` array. This ensures that the correct product details are displayed on the page.\n\nThe component then renders the product details, including the product name, price, description, and images. It also renders a dropdown menu for selecting the product size, and buttons for adding or removing the product from the cart. If the product is already in the cart, the \"Remove From Cart\" button is displayed, otherwise the \"Add To Cart\" button is displayed. \n\nOverall, this component plays an important role in the larger project by allowing users to view and purchase products from the online store. It relies on several other hooks and types from other files in the project, and uses state variables to keep track of the selected product size, color, and adendums. Developers working on the project could use this component as a starting point for building out additional features related to product details and purchasing. \n\nExample usage:\n\n```jsx\nimport ShopDetails from 'path/to/ShopDetails';\n\nfunction ProductPage() {\n return (\n Welcome to the Zoo Store
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to update the `product` state variable when the `Products` or `id` variables change.\n\n2. What is the role of the `useAllProducts` hook in this code?\n- The `useAllProducts` hook is not used in this code and can be removed.\n\n3. What is the purpose of the `adendums` state variable?\n- The `adendums` state variable is used to store an array of additional product properties that are selected by the user.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/store/[id]/index.md"}}],["1110",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/store/checkout/cart.tsx)\n\nThe `Cart` component is responsible for rendering the shopping cart page of the e-commerce website. It imports several modules including `Link` and `useState` from the `next` and `react` libraries respectively. It also imports `useAppSelector` and `useCart` from the `state` module, `CartItem` from the `types/cart` module, and `Product` from the `types/product` module.\n\nThe `Cart` component uses the `useCart` hook to get the `addToCart`, `removeFromCart`, `updateCart`, and `clearCart` functions. These functions are used to add, remove, update, and clear items from the cart respectively. It also uses the `useAppSelector` hook to get the `Products` and `CartItems` from the store.\n\nThe `Cart` component renders the shopping cart page with a list of items in the cart, their images, names, descriptions, properties, base prices, and quantities. It also calculates the subtotal of the items in the cart and displays it. If the cart is empty, it displays a message saying so. The component also displays a checkbox for agreeing to the terms and conditions and a checkout button that links to the shipping page.\n\nThe `Cart` component also displays a list of new releases that are not in the cart. It filters the `Products` array to exclude items that are already in the cart and maps the remaining items to display their images, names, short descriptions, and base prices. Clicking on an item takes the user to the product page.\n\nThis component can be used in the larger project to provide users with a way to view and manage items in their shopping cart. It can also be used to display related products that the user may be interested in. Developers can customize the component to fit the design and functionality of their e-commerce website. For example, they can add more fields to the `CartItem` and `Product` types, change the layout of the shopping cart page, or add more filters to the list of new releases.\n## Questions: \n 1. What state management library is being used in this code?\n- The code is using the `useAppSelector` and `useCart` hooks, which suggests that it is using the Redux state management library.\n\n2. What is the purpose of the `Cart` component?\n- The `Cart` component is responsible for rendering the contents of the user's shopping cart, as well as the subtotal and other related information.\n\n3. What is the purpose of the `Link` component imported from \"next/link\"?\n- The `Link` component is used to create a link to the checkout page, which is located at \"/store/checkout/shipping\".","metadata":{"source":".autodoc/docs/markdown/core/src/pages/store/checkout/cart.md"}}],["1111",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/store/checkout/payment.tsx)\n\nThe `Shipping` component is responsible for rendering the shipping and payment information for the zoo project. It is a functional component that returns a JSX element. \n\nThe component is divided into two sections: the shipping section and the payment section. The shipping section displays the contact information, shipping address, and shipping method. Each section has a \"Change\" button that allows the user to modify the information. \n\nThe payment section displays a list of payment options. Each payment option is represented by an image and a radio button. The user can select one of the payment options to proceed with the payment. \n\nAt the bottom of the payment section, there is a \"Pay Now\" button that the user can click to complete the payment process. \n\nThis component can be used in the larger project by importing it and rendering it in a parent component that handles the overall checkout process. For example, the `Shipping` component can be rendered in a `Checkout` component that also handles the cart items and the total amount. \n\nHere is an example of how the `Shipping` component can be used in a `Checkout` component:\n\n```\nimport Shipping from './Shipping';\n\nconst Checkout = () => {\n return (\n \n {/* Render cart items and total amount */}\n
\n );\n};\n\nexport default Checkout;\n```\n\nOverall, the `Shipping` component provides a user-friendly interface for the shipping and payment information in the zoo project.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called Shipping that renders a form for entering shipping and payment information.\n\n2. What styling framework is being used in this code?\n- The code is using Tailwind CSS classes for styling.\n\n3. What payment methods are available in this form?\n- The form includes options for paying with Metamask, Moonpay, Stripe, and Paypal.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/store/checkout/payment.md"}}],["1112",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/store/checkout/shipping.tsx)\n\nThe `Info` component is responsible for rendering the shipping information form and the payment information for the checkout process of the online store. It imports several dependencies such as `Link` from Next.js, `useEffect` and `useState` from React, and `useAppSelector` from the store's hooks. It also imports the `CartItem` type from the `cart` file and the `countries` array from the `data` folder.\n\nThe component initializes several state variables using the `useState` hook. The `shippingDetails` state variable is an object that contains the user's email, first name, and last name. The `shippingPrice` state variable is a number that represents the shipping cost. The `subTotal` state variable is a number that represents the total cost of the items in the cart. The `country` state variable is a string that represents the user's country.\n\nThe component also initializes a `settings` object that is used to configure the `Slider` component from the `react-slick` library. The `handleChange` function is used to update the `shippingDetails` state variable when the user inputs their information into the form.\n\nThe `useAppSelector` hook is used to retrieve the `CartItems` array from the store. The `useEffect` hook is used to update the `subTotal` state variable whenever the `CartItems` array changes.\n\nThe `Info` component renders a form that allows the user to input their shipping information. The form includes fields for the user's email, first name, last name, address, city, state, postal code, and phone number. The form also includes a checkbox that allows the user to opt-in to receive news and offers via email.\n\nThe component also renders a section that displays the user's cart items. The `Slider` component is used to display each item in a carousel. The component also displays the subtotal, shipping cost, and total cost of the items in the cart.\n\nThe component includes buttons that allow the user to continue to the payment information section or return to the cart. The `Link` component from Next.js is used to create these buttons.\n\nOverall, the `Info` component is an important part of the checkout process for the online store. It allows the user to input their shipping information and displays the cost of their items and shipping. The component is reusable and can be used in other parts of the project that require shipping information input.\n## Questions: \n 1. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to update the `subTotal` state variable whenever the `CartItems` state variable changes.\n\n2. What is the purpose of the `Slider` component from the `react-slick` library?\n- The `Slider` component is used to display each item in the user's cart in a carousel format.\n\n3. Where is the `countries` array imported from and what is it used for?\n- The `countries` array is imported from a file located at `data/countries` and is used to populate a dropdown menu with a list of countries for the user to select from when entering their shipping address.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/store/checkout/shipping.md"}}],["1113",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/store/index.tsx)\n\nThe `Shop` component is a React component that renders a page for an online shop. It imports two components, `HeroSection` and `ProductsSection`, which are responsible for rendering the hero section and the products section of the page, respectively. \n\nThe `useEffect` hook is used to fetch all the products from the store using the `useAllProducts` hook, which is imported from the `state/store/hooks` module. The `useEffect` hook is called only once, when the component mounts, and it calls the `getProducts` function to fetch all the products.\n\nThe `Shop` component returns a div that contains the `HeroSection` and `ProductsSection` components. The `HeroSection` component is responsible for rendering the hero section of the page, which typically contains a banner or an image that promotes the shop or a specific product. The `ProductsSection` component is responsible for rendering the products section of the page, which typically contains a list of products that are available for purchase.\n\nThis component can be used as a template for an online shop page. It can be customized by modifying the `HeroSection` and `ProductsSection` components to fit the specific needs of the shop. For example, the `HeroSection` component can be modified to display a different banner or image, and the `ProductsSection` component can be modified to display different products or categories of products.\n\nHere is an example of how the `Shop` component can be used in a larger project:\n\n```jsx\nimport React from \"react\";\nimport Shop from \"./Shop\";\n\nconst App = () => {\n return (\n \n
\n );\n};\n\nexport default App;\n```\n\nIn this example, the `Shop` component is rendered inside the `App` component, which is the main component of the application. The `App` component renders a heading that welcomes the user to the shop, followed by the `Shop` component, which renders the shop page.\n## Questions: \n 1. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to call the `getProducts` function after the component mounts, by passing an empty dependency array as the second argument.\n\n2. Where is the `useAllProducts` function defined?\n- The `useAllProducts` function is defined in a file located at `state/store/hooks`.\n\n3. What components are being rendered in the `return` statement?\n- The `HeroSection` and `ProductsSection` components are being rendered in the `return` statement, wrapped in a `div` element with a class of `w-full mt-[100px]`.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/store/index.md"}}],["1114",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/tools/index.tsx)\n\nThis code defines a React component called `Tools` that renders a page displaying a list of tools available on the SushiSwap platform. The component imports various modules including `ArrowRightIcon` from `@heroicons/react/outline`, `Container` from `../../components/Container`, `Head` from `next/head`, `I18n` from `@lingui/core`, `Link` from `next/link`, `Typography` from `../../components/Typography`, `t` from `@lingui/macro`, and `useLingui` from `@lingui/react`. \n\nThe `TOOLS` constant is an array of objects that represent the tools available on the platform. Each object has an `id`, `name`, `description`, and `href` property. The `name` property represents the name of the tool, the `description` property provides a brief description of the tool, and the `href` property is the URL to the tool's page. The `description` property is localized using the `i18n` object passed as an argument to the `TOOLS` function.\n\nThe `Tools` component uses the `useLingui` hook to get the current language and the `TOOL` constant to generate a list of tools. The list is rendered using the `map` function to iterate over each tool object and generate a list item for each tool. Each list item contains a link to the tool's page, the tool's name, and a brief description of the tool. The `ArrowRightIcon` is used to indicate that the link leads to the tool's page.\n\nThe `Typography` component is used to render the page title \"Tools\". The `Head` component is used to set the page title and description in the HTML head element.\n\nThis component can be used as a template for displaying a list of tools on any page of the SushiSwap platform. The `TOOLS` constant can be modified to add or remove tools from the list, and the `Link` component can be used to link to the tool's page. The `Typography` component can be used to set the page title, and the `Head` component can be used to set the page title and description in the HTML head element.\n## Questions: \n 1. What is the purpose of the `TOOLS` constant?\n- The `TOOLS` constant is an array of objects that contains information about different tools available on the SushiSwap platform, including their names, descriptions, and links.\n\n2. What is the role of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the `TOOLS` array based on the current `i18n` object from the Lingui library. This helps to optimize performance by avoiding unnecessary re-renders when the `i18n` object changes.\n\n3. What is the purpose of the `ArrowRightIcon` component?\n- The `ArrowRightIcon` component is an icon from the Heroicons library that is used to display a right arrow next to each tool on the page, indicating that clicking on the tool will take the user to a new page.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/tools/index.md"}}],["1115",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/tools/meowshi.tsx)\n\nThe `Meowshi` component is a React component that renders a user interface for swapping tokens. The component imports various dependencies such as `ArrowDownIcon` and `InformationCircleIcon` from the `@heroicons/react/solid` library, `ChainId`, `Currency`, and `Token` from the `@zoolabs/zdk` library, and `MEOW`, `SUSHI`, and `XSUSHI` from the `../../config/tokens` file. The component also imports other components such as `Container`, `CurrencyInputPanel`, `Head`, `HeaderToggle`, `Image`, `MeowshiButton`, `NetworkGuard`, `Typography`, and custom hooks such as `useMeowshiPerXSushi` and `useSushiPerXSushi`.\n\nThe `Meowshi` component exports an enum called `Field` and an interface called `MeowshiState`. The `Field` enum has two properties, `INPUT` and `OUTPUT`, which are used to identify the input and output fields in the token swap form. The `MeowshiState` interface defines the state of the `Meowshi` component and has properties such as `currencies`, `setCurrency`, `fields`, `handleInput`, `switchCurrencies`, and `meow`.\n\nThe `Meowshi` component renders a user interface that consists of a container with a title, an image, and a description. The container also contains a token swap form that allows users to swap tokens. The token swap form has two input fields, an input token field and an output token field, and a swap button. The component also renders a `NetworkGuard` component that ensures that the user is connected to the correct network.\n\nThe `Meowshi` component uses various hooks such as `useState`, `useCallback`, `useEffect`, and `useMemo` to manage the state of the component and update the user interface. The `useState` hook is used to manage the state of the input and output fields in the token swap form. The `useCallback` hook is used to handle user input and update the state of the component. The `useEffect` hook is used to update the state of the component when the independent field changes. The `useMemo` hook is used to memoize the state of the component and prevent unnecessary re-renders.\n\nOverall, the `Meowshi` component is an important part of the `zoo` project as it provides a user interface for swapping tokens. The component is flexible and can be used in various contexts to allow users to swap tokens easily.\n## Questions: \n 1. What is the purpose of the `Meowshi` component?\n- The `Meowshi` component is a React component that renders a UI for swapping tokens and calculating exchange rates.\n\n2. What are the `useSushiPerXSushi` and `useMeowshiPerXSushi` hooks used for?\n- The `useSushiPerXSushi` hook is used to fetch the exchange rate between SUSHI and xSUSHI tokens, while the `useMeowshiPerXSushi` hook is used to fetch the exchange rate between MEOW and xSUSHI tokens.\n- These exchange rates are used to calculate the conversion rates between different tokens in the `handleInput` function.\n\n3. What is the purpose of the `MeowshiState` interface?\n- The `MeowshiState` interface defines the shape of the state object used by the `Meowshi` component to manage the selected currencies, input/output values, and other related functions.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/tools/meowshi.md"}}],["1116",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/tools/saave.tsx)\n\nThis code defines a React component called `Saave` that renders a page for the Saave feature of the SushiSwap application. The page is composed of several sub-components from the `Container`, `Head`, and `Typography` modules. \n\nThe `Container` component is used to create a container element with a specified maximum width and class names for responsive styling. The `Head` component is used to set the title and description metadata for the page. The `Typography` component is used to render headings and text with specified variants and styles. \n\nThe `Saave` component is exported as the default export of the module, which means it can be imported and used in other parts of the application. For example, it could be included as a route in the application's router to display the Saave page when the corresponding URL is accessed. \n\nHere is an example of how the `Saave` component could be used in a router:\n\n```\nimport Saave from './path/to/Saave'\n\nconst routes = [\n {\n path: '/saave',\n component: Saave\n },\n // other routes...\n]\n```\n\nOverall, this code is a small but important part of the larger SushiSwap application, providing a reusable component for displaying the Saave page.\n## Questions: \n 1. What is the purpose of the `Container` component being imported from '../../components/Container'?\n- The `Container` component is likely a custom component that provides a container element with specific styling and layout properties.\n\n2. What is the significance of the `Head` component being used in this code?\n- The `Head` component is used to modify the document head of the page, specifically setting the title and meta description.\n\n3. What is the purpose of the `Saave` function being exported as the default export?\n- The `Saave` function is likely a React component that renders a page or section of a page for the Zoo project.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/tools/saave.md"}}],["1117",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/pages/top-zoo.tsx)\n\nThe code above is a Next.js page component that renders a section of the Zoo project's website called \"Topzoo\". The purpose of this component is to display a grid of three ZooItem components, each representing a different animal or egg that can be purchased on the Zoo platform. \n\nThe Topzoo component imports the ZooItem component from the \"../components/ZooItem\" file, which is a layout component that defines the structure and styling of each animal/egg item. The Topzoo component then renders three instances of the ZooItem component, each with different props that define the image source, title, description, and price of the item. \n\nThe Topzoo component is exported as the default export of the file, which means it can be imported and used in other parts of the Zoo project. For example, the Topzoo component could be imported into a higher-level page component that renders multiple sections of the Zoo website, or it could be imported into a layout component that defines the overall structure of the website. \n\nHere is an example of how the Topzoo component could be used in a higher-level page component:\n\n```\nimport type { NextPage } from \"next\";\nimport Topzoo from \"../sections/Topzoo\";\n\nconst HomePage: NextPage = () => {\n return (\n <>\n Welcome to my online shop!
\n\n
\n );\n};\n\nexport default App;\n```\n\nIn this example, the `WhitePaper` component is imported and rendered inside the `App` component. The `App` component displays a welcome message and encourages users to read the white paper. The `WhitePaper` component is then rendered below the message to inform users that the white paper is coming soon.\n## Questions: \n 1. What is the purpose of the `ComingSoon` component?\n - The `ComingSoon` component is likely a placeholder for a feature or content that is not yet available in the current version of the project.\n\n2. What is the significance of the `mt-16` class name in the `div` element?\n - The `mt-16` class name likely adds a margin-top of 16 pixels to the `div` element, which could affect the layout of the surrounding elements.\n\n3. What is the `WhitePaper` component used for in the `zoo` project?\n - The `WhitePaper` component is likely a page or section of the project that displays information about a white paper, but without any content yet since it only renders the `ComingSoon` component.","metadata":{"source":".autodoc/docs/markdown/core/src/pages/whitepaper/index.md"}}],["1119",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/providers/SubgraphProvider.tsx)\n\nThis code is responsible for creating and providing an ApolloClient instance for interacting with a GraphQL subgraph API. The subgraph API is used to query data from the Zoo project. \n\nThe code imports the necessary dependencies from \"@zoolabs/zdk\" and \"@apollo/client\". It also imports a custom hook called \"useActiveWeb3React\" from \"../hooks\". \n\nThe code defines three constants that represent the URLs for the subgraph API on different networks: SUBGRAPH_LOCALHOST for local development, SUBGRAPH_RINKEBY for the Rinkeby test network, and SUBGRAPH_MAINNET for the Binance Smart Chain main network. \n\nThe code defines a function called \"createClient\" that takes a URI and returns a new ApolloClient instance with the provided URI and an InMemoryCache. \n\nThe code defines an object called \"clients\" that maps each ChainId (an enum from \"@zoolabs/zdk\") to a corresponding ApolloClient instance created using the \"createClient\" function and the appropriate subgraph API URL. \n\nThe code defines a fallbackClient that is used when the current environment is not development and the chainId is not available. The fallbackClient is set to the Rinkeby ApolloClient instance. \n\nFinally, the code exports a React component called \"SubgraphProvider\" that takes a \"children\" prop and returns an ApolloProvider component with a client prop that is set to the appropriate ApolloClient instance based on the current chainId. If the chainId is not available, the fallbackClient is used. The \"useActiveWeb3React\" hook is used to get the current chainId. \n\nThis code can be used in the larger Zoo project to interact with the subgraph API and query data from the Zoo project. For example, the code can be used to get information about Zoo NFTs, such as their owners, metadata, and transaction history. Here is an example of how the \"SubgraphProvider\" component can be used in a React component:\n\n```\nimport { SubgraphProvider } from \"./path/to/SubgraphProvider\";\n\nfunction MyComponent() {\n return (\n Welcome to the Zoo Project
\nLearn more about our project by reading our white paper.
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a React component called `AllMyNfts` that renders a section of a web page displaying a grid of NFT images.\n\n2. What external libraries or dependencies are being used?\n \n This code imports two external libraries: `React` and `next/image`.\n\n3. What is the expected output of this code?\n \n The expected output of this code is a section of a web page displaying a grid of NFT images, each contained within a border and with a fixed height and width. The images are sourced from the `/img` directory and are displayed using the `next/image` library.","metadata":{"source":".autodoc/docs/markdown/core/src/sections/my-nft/AllMyNfts.md"}}],["1121",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/sections/my-nft/TradingHistory.tsx)\n\nThe code defines a React component called `TradingHistory` that renders a trading history section on a web page. The component imports two modules, `React` and `Image` from `next/image`. \n\nThe `TradingHistory` component returns a JSX element that contains a `div` with a class name of `tradingHistory`. Inside this `div`, there is an `h3` element with a class name of `mb-12` that displays the text \"Trading History\". \n\nBelow the `h3` element, there is another `div` element with a class name of `mb-28`. This `div` contains an unordered list (`ul`) with a class name of `flex` and four list items (`li`) with class names of `mr-28`. The list items display the text \"ACTION\", \"BLOCK\", \"TOKEN ID\", and \"HASH\" respectively. \n\nBelow the unordered list, there is another `div` element with a class name of `rounded-xl tracking-tight not-italic py-8 px-3.5 text-xs leading-[3rem] lg:leading-4 font-bold text-center bg-trading-history`. This `div` contains two unordered lists (`ul`) with class names of `flex`. Each unordered list contains four list items (`li`) with class names of `mr-24`. The list items display the trading history data such as \"BOUGHT EGG\", \"12054184\", \"6\", and \"0xd8e1c294da833a8db\". \n\nThe `TradingHistory` component is exported as a default export, which means it can be imported and used in other parts of the project. For example, if there is a web page that displays a user's profile, the `TradingHistory` component can be used to display the user's trading history. \n\nExample usage:\n\n```\nimport TradingHistory from \"./components/TradingHistory\";\n\nfunction UserProfile() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this component and where is it being used in the project?\n - This component is called `TradingHistory` and it renders a section of trading history with some hardcoded data. It is not clear where this component is being used in the project.\n2. What is the significance of the `next/image` import and how is it being used in this component?\n - The `next/image` import is being used to optimize the loading of images in the project. However, it is not being used in this component and can be removed.\n3. What is the meaning of the various CSS classes being used in this component and where are they defined?\n - The CSS classes being used in this component are defining the styles for the trading history section. It is not clear where these classes are defined, but they likely exist in a separate CSS file or are being generated dynamically using a CSS-in-JS library.","metadata":{"source":".autodoc/docs/markdown/core/src/sections/my-nft/TradingHistory.md"}}],["1122",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/covalent/fetchers.ts)\n\nThis code provides a set of functions for interacting with the Covalent API, which is a blockchain data platform. The functions are designed to retrieve various types of data from the API, such as token balances, portfolio information, transfers, blocks, logs, NFT metadata, and more. \n\nEach function takes in a chain ID and an address (or other relevant parameters) as input, and returns a Promise that resolves to the requested data. The default chain ID is set to MAINNET, but can be overridden if needed. \n\nFor example, the `getTokenBalances` function retrieves the token balances for a given address on a specified chain. Here's an example usage:\n\n```\nimport { getTokenBalances } from 'zoo'\n\nconst address = '0x123abc...'\nconst chainId = 1 // Ethereum mainnet\n\ngetTokenBalances(chainId, address)\n .then((balances) => {\n console.log(balances)\n })\n .catch((error) => {\n console.error(error)\n })\n```\n\nThis would log an array of token balances for the specified address on the Ethereum mainnet. \n\nNote that there is also a `getSushiSwapLiquidityTransactions` function that is currently marked as a TODO. This function is designed to retrieve liquidity transactions for the SushiSwap decentralized exchange. It takes in a chain ID and an address as input, and returns a Promise that resolves to the requested data. \n\nOverall, these functions provide a convenient way to retrieve blockchain data from the Covalent API, and can be used to power various features within a larger project.\n## Questions: \n 1. What is the purpose of this code?\n- This code provides functions for fetching data from the Covalent API for various blockchain-related data such as token balances, transactions, and NFT metadata.\n\n2. What is the format of the data returned by the fetcher function?\n- The fetcher function returns a Promise that resolves to the JSON data returned by the Covalent API.\n\n3. What is the purpose of the TODO comment for CLASS B?\n- The TODO comment indicates that there is a planned addition of a function for fetching SushiSwap liquidity transactions, but it has not yet been implemented.","metadata":{"source":".autodoc/docs/markdown/core/src/services/covalent/fetchers.md"}}],["1123",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/covalent/hooks.ts)\n\nThis code provides a set of functions that can be used to fetch data from the Covalent API. The Covalent API provides a unified interface to access blockchain data across multiple chains. The functions in this code use the `useSWR` hook from the `swr` library to fetch data from the Covalent API and return it to the calling code.\n\nThe functions are organized into two classes: Class A and Class B. Class A contains functions that fetch data related to tokens, blocks, transactions, and NFTs. The functions in Class A take parameters such as `chainId`, `address`, `tokenId`, `blockHeight`, etc. to specify the data to be fetched. For example, the `useTokenBalances` function fetches the token balances for a given address on a given chain. The `useBlock` function fetches the block data for a given block height on a given chain. The `useNftMetadata` function fetches the metadata for a given NFT token on a given chain.\n\nClass B contains functions that fetch data related to chains and their status. The `useChains` function fetches the list of chains supported by the Covalent API, while the `useChainsStatus` function fetches the status of each chain.\n\nAll functions take an optional `fallbackData` parameter, which is used to provide initial data while the API call is being made. This can be useful for improving the user experience by showing some data immediately while the rest of the data is being fetched.\n\nThe functions in this code can be used in any React application that needs to fetch blockchain data from the Covalent API. For example, a DeFi dashboard application could use these functions to fetch data about the user's token balances, transaction history, and NFT holdings. The `useSWR` hook used in these functions provides a simple way to manage the state of the fetched data and update it automatically when needed.\n## Questions: \n 1. What is the purpose of this code?\n- This code provides a set of functions that use SWR to fetch data from the Covalent API for various blockchain-related tasks such as getting token balances, transaction details, and NFT metadata.\n\n2. What is the role of the `useActiveWeb3React` hook?\n- The `useActiveWeb3React` hook is used to get the current chain ID from the active Web3React context, which is then used as a parameter for some of the API endpoints.\n\n3. What is the purpose of the commented out \"CLASS B\" section?\n- It is unclear from the provided code what the purpose of the commented out \"CLASS B\" section is, so a smart developer might wonder if it is unfinished code or if it was intentionally left out for some reason.","metadata":{"source":".autodoc/docs/markdown/core/src/services/covalent/hooks.md"}}],["1124",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/covalent/index.ts)\n\nThis code exports all the functions and variables from two separate files located in the `zoo` project: `hooks.js` and `fetchers.js`. \n\nThe purpose of this code is to make all the functionality from these two files available to other parts of the project without having to import each function or variable individually. This can save time and make the code more readable by reducing the number of import statements needed.\n\nFor example, if another file in the `zoo` project needs to use a function from `hooks.js`, it can simply import it like this:\n\n```\nimport { useAnimal } from './zoo'\n```\n\nThis will import the `useAnimal` function from `hooks.js` and make it available for use in the importing file.\n\nSimilarly, if a function from `fetchers.js` is needed, it can be imported in the same way:\n\n```\nimport { getAnimalData } from './zoo'\n```\n\nOverall, this code helps to streamline the process of importing and using functions and variables from other files in the `zoo` project.\n## Questions: \n 1. **What is the purpose of the `hooks` and `fetchers` files?**\\\nA smart developer might wonder what functionality is contained within these files and how they are used within the `zoo` project.\n\n2. **Are there any dependencies or requirements for using these exports?**\\\nA smart developer might want to know if there are any specific versions of dependencies or other requirements needed to use the exported functions from these files.\n\n3. **Is there any documentation or examples available for using these exports?**\\\nA smart developer might want to know if there is any additional documentation or examples available for using the exported functions from these files, in order to better understand how to integrate them into their own code.","metadata":{"source":".autodoc/docs/markdown/core/src/services/covalent/index.md"}}],["1125",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/constants/index.ts)\n\nThis code defines a constant object GRAPH_HOST that maps each ChainId to a corresponding URL for a blockchain data indexing service. The ChainId values are imported from the '@zoolabs/zdk' library. The URLs are for various blockchain networks, including Ethereum mainnet, xDai, Matic, Fantom, Binance Smart Chain, Avalanche, Celo, Arbitrum, Harmony, OKExChain, and Heco. \n\nThis code is likely used in the larger project to provide a centralized location for accessing blockchain data indexing services across multiple networks. By defining the URLs in this object, the project can easily switch between different indexing services or add support for new networks by simply updating the object. \n\nFor example, if the project wanted to add support for a new network called \"MyChain\", they could simply add a new key-value pair to the GRAPH_HOST object like so:\n\n```\nconst MYCHAIN_GRAPH = 'https://api.mychain.com'\nexport const GRAPH_HOST = {\n [ChainId.MAINNET]: THE_GRAPH,\n [ChainId.XDAI]: THE_GRAPH,\n [ChainId.MATIC]: THE_GRAPH,\n [ChainId.FANTOM]: THE_GRAPH,\n [ChainId.BSC]: THE_GRAPH,\n [ChainId.AVALANCHE]: THE_GRAPH,\n [ChainId.CELO]: THE_GRAPH,\n [ChainId.ARBITRUM]: THE_GRAPH,\n [ChainId.HARMONY]: 'https://sushi.graph.t.hmny.io',\n [ChainId.OKEX]: HYPER_GRAPH,\n [ChainId.HECO]: HYPER_GRAPH,\n [ChainId.MYCHAIN]: MYCHAIN_GRAPH,\n}\n```\n\nThen, any code in the project that references GRAPH_HOST using the ChainId for \"MyChain\" would automatically use the new URL. \n\nOverall, this code provides a convenient way for the project to access blockchain data indexing services across multiple networks without having to hardcode URLs throughout the codebase.\n## Questions: \n 1. What is the purpose of the `ChainId` import from `@zoolabs/zdk`?\n - The `ChainId` import is likely used to define different blockchain networks within the `GRAPH_HOST` object.\n2. What are the different values assigned to `GRAPH_HOST` for each `ChainId`?\n - The different values assigned to `GRAPH_HOST` correspond to different blockchain networks, including MAINNET, XDAI, MATIC, FANTOM, BSC, AVALANCHE, CELO, ARBITRUM, HARMONY, OKEX, and HECO.\n3. What are the different URLs assigned to `THE_GRAPH`, `NAS_GRAPH`, and `HYPER_GRAPH`?\n - `THE_GRAPH` is assigned the URL `https://api.thegraph.com`, `NAS_GRAPH` is assigned the URL `https://graph.kkt.one/node`, and `HYPER_GRAPH` is assigned the URL `https://q.hg.network`.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/constants/index.md"}}],["1126",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/bar.ts)\n\nThe code above is a module that provides functions to interact with the Bar subgraph on The Graph protocol. The module imports the `ChainId` enum from the `@zoolabs/zdk` library, the `GRAPH_HOST` constant from a local `constants` file, and two GraphQL queries from a local `queries` file. \n\nThe `BAR` constant is an object that maps the `ChainId.MAINNET` value to a string representing the name of the Bar subgraph on The Graph protocol. \n\nThe `bar` function is an asynchronous function that takes a GraphQL query and optional variables as arguments and sends a request to the Bar subgraph using the `request` function from the `graphql-request` library. The function returns a Promise that resolves to the response data from the subgraph. \n\nThe `getBar` function is an asynchronous function that takes a block number as an argument and returns the Bar data for that block. The function calls the `bar` function with the `barQuery` and the block number as variables. If no block number is provided, the function returns the most recent Bar data. \n\nThe `getBarHistory` function is an asynchronous function that returns an array of Bar data objects representing the historical data for the Bar subgraph. The function calls the `bar` function with the `barHistoriesQuery` query. \n\nThese functions can be used in a larger project to retrieve data from the Bar subgraph on The Graph protocol. For example, the `getBar` function could be used to retrieve the current Bar data and display it on a dashboard or user interface. The `getBarHistory` function could be used to display a historical chart of the Bar data over time. Overall, this module provides a convenient way to interact with the Bar subgraph and retrieve data for use in a larger project.\n## Questions: \n 1. What is the purpose of the `zoo` project and how does this code fit into it?\n- This code is a part of the `zoo` project, but it is unclear what the overall purpose of the project is.\n\n2. What is the `@zoolabs/zdk` package and how is it used in this code?\n- It is unclear what the `@zoolabs/zdk` package is and how it is used in this code.\n\n3. What is the `BAR` object and why is it using `ChainId.MAINNET` as a key?\n- The `BAR` object is used to store a mapping of `ChainId` values to a specific string value. It is unclear why `ChainId.MAINNET` is being used as a key and what the purpose of this mapping is.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/fetchers/bar.md"}}],["1127",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/bentobox.ts)\n\nThe code is a module that exports several functions that interact with the BentoBox smart contract on different chains. BentoBox is a lending platform that allows users to deposit their assets and earn interest or borrow assets by using their deposited assets as collateral. \n\nThe `BENTOBOX` object is a map of BentoBox contract addresses on different chains. The `fetcher` function is an async function that takes a chainId, a query, and optional variables as arguments. It uses the `pager` function from the `.` module to fetch data from the BentoBox subgraph on the specified chain. \n\nThe `getKashiPairs` function is an async function that takes a chainId and optional variables as arguments. It fetches Kashi pairs data from the BentoBox subgraph and returns an array of Kashi pairs objects. Each Kashi pair object contains information about the pair, such as the two tokens in the pair, the amount of each token, and the total value of the pair. The function also fetches token data for the tokens in the pairs and adds it to the Kashi pair objects. \n\nThe `getUserKashiPairs` function is an async function that takes a chainId and variables as arguments. It fetches user Kashi pairs data from the BentoBox subgraph and returns an array of user Kashi pairs objects. Each user Kashi pair object contains information about the user's position in the pair, such as the amount of each token the user has borrowed or supplied as collateral. The function also fetches token data for the tokens in the pairs and adds it to the user Kashi pair objects. \n\nThe `getBentoUserTokens` function is an async function that takes a chainId and variables as arguments. It fetches user tokens data from the BentoBox subgraph and returns an array of user tokens objects. Each user token object contains information about the user's balance and total supply of the token. The function also calculates the user's share of the token's total supply and adds it to the user token objects. \n\nThe `getBentoBox` function is an async function that takes a chainId and variables as arguments. It fetches BentoBox data from the BentoBox subgraph and returns the first BentoBox object in the array of BentoBox objects returned by the subgraph. \n\nThese functions can be used to fetch data from the BentoBox subgraph and use it in other parts of the project. For example, the `getKashiPairs` function can be used to display a list of Kashi pairs on a web page, and the `getUserKashiPairs` function can be used to display a user's Kashi pairs and positions. The `getBentoUserTokens` function can be used to display a user's BentoBox token balances, and the `getBentoBox` function can be used to display information about the BentoBox platform.\n## Questions: \n 1. What is the purpose of the `fetcher` function?\n- The `fetcher` function is used to make GraphQL queries to the subgraph API for the BentoBox protocol.\n\n2. What is the `getKashiPairs` function doing?\n- The `getKashiPairs` function fetches Kashi pairs from the BentoBox subgraph API and returns an array of pairs with additional data such as token information and amounts.\n\n3. What is the `BENTOBOX` object used for?\n- The `BENTOBOX` object is used to map chain IDs to their corresponding BentoBox subgraph API endpoint paths.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/fetchers/bentobox.md"}}],["1128",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/blocks.ts)\n\nThis code defines a set of functions that interact with The Graph, a decentralized indexing protocol for querying networks like Ethereum. The functions are used to retrieve information about blocks on various chains, including Ethereum, xDai, Polygon, Fantom, BSC, Harmony, Avalanche, Celo, Arbitrum, OKExChain, and Heco. \n\nThe `BLOCKS` object maps each chain ID to a subgraph name on The Graph that contains information about blocks on that chain. The `fetcher` function takes a chain ID, a GraphQL query, and optional variables, and returns the result of the query from the corresponding subgraph. \n\nThe `getBlock` function takes a chain ID and a Unix timestamp, and returns the block number of the block that was mined closest to that timestamp. It does this by querying the subgraph for blocks with timestamps between `timestamp - 600` and `timestamp`, and returning the number of the first block in the result set. \n\nThe `getBlocks` function takes a chain ID, a start timestamp, and an end timestamp, and returns an array of blocks mined between those timestamps. It does this by querying the subgraph for blocks with timestamps between `start` and `end`. \n\nThe `getMassBlocks` function takes a chain ID and an array of Unix timestamps, and returns an array of objects containing the block number and timestamp of the block that was mined closest to each timestamp in the input array. It does this by constructing a GraphQL query that retrieves the block with the closest timestamp to each input timestamp, and returning the result set as an array of objects. \n\nThe `getAverageBlockTime` function takes a chain ID and returns the average time between blocks over the past 6 hours. It does this by calling `getBlocks` with a start time of 6 hours ago and an end time of the current time, and then calculating the average time between blocks in the result set. \n\nThese functions are used to retrieve information about blocks on various chains, which can be used for a variety of purposes such as calculating transaction fees, estimating confirmation times, and monitoring network health. For example, `getBlock` could be used to estimate the block number of a transaction that was mined at a specific time, while `getAverageBlockTime` could be used to monitor the health of a network by detecting changes in block times.\n## Questions: \n 1. What is the purpose of the `fetcher` function?\n- The `fetcher` function is used to make a GraphQL request to a subgraph for a specific chain ID and block data.\n\n2. What is the purpose of the `getBlock` function?\n- The `getBlock` function is used to retrieve the block number for a specific chain ID and timestamp.\n\n3. What is the purpose of the `getAverageBlockTime` function?\n- The `getAverageBlockTime` function is used to calculate the average time difference between a sample of blocks for a specific chain ID.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/fetchers/blocks.md"}}],["1129",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/exchange.ts)\n\nThe code provided is a collection of functions that interact with the SushiSwap subgraph API. The functions are used to retrieve data from the SushiSwap subgraph, which is a decentralized exchange built on the Ethereum blockchain. The functions are designed to be used in a larger project that interacts with the SushiSwap subgraph API.\n\nThe `import` statements at the beginning of the code import various queries and constants from other files in the project. The `pager` function is imported from the `./` file.\n\nThe `EXCHANGE` object is a mapping of chain IDs to the corresponding SushiSwap subgraph endpoint. The `exchange` function is an asynchronous function that takes a chain ID, a query, and variables as arguments. It returns the result of calling the `pager` function with the appropriate subgraph endpoint, query, and variables.\n\nThe remaining functions are all asynchronous functions that call the `exchange` function with the appropriate query and variables to retrieve specific data from the SushiSwap subgraph. For example, the `getPairs` function calls the `exchange` function with the `pairsQuery` query to retrieve a list of pairs on the exchange.\n\nEach function is designed to be used in a larger project that interacts with the SushiSwap subgraph API. For example, the `getPairs` function could be used to retrieve a list of pairs on the exchange and display them on a webpage. Similarly, the `getTokenPrice` function could be used to retrieve the price of a specific token and display it on a webpage.\n\nOverall, the code provides a set of functions that can be used to interact with the SushiSwap subgraph API and retrieve specific data from the exchange.\n## Questions: \n 1. What is the purpose of the `pager` function imported from `./`?\n- A smart developer might wonder what the `pager` function does and how it is used in this code. The `pager` function is used to paginate through results from The Graph API.\n\n2. What is the significance of the `EXCHANGE` object?\n- A smart developer might question the purpose of the `EXCHANGE` object and how it is used in this code. The `EXCHANGE` object maps chain IDs to subgraph names for different exchanges on The Graph API.\n\n3. What is the difference between `getTokens` and `getTokenSubset`?\n- A smart developer might wonder about the difference between `getTokens` and `getTokenSubset` and when to use each function. `getTokens` returns all tokens on a given chain, while `getTokenSubset` returns a subset of tokens based on a set of variables.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/fetchers/exchange.md"}}],["1130",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/index.ts)\n\nThe code in this file provides a function called `pager` that is used to make paginated requests to a GraphQL endpoint. The function takes three arguments: `endpoint`, which is the URL of the GraphQL endpoint to query; `query`, which is the GraphQL query to execute; and `variables`, which is an optional object containing any variables needed for the query.\n\nThe `pager` function first checks if the `endpoint` argument contains the string \"undefined\". If it does, the function returns an empty object. Otherwise, the function initializes an empty object called `data`, a variable called `skip` set to 0, and a boolean flag set to `true`.\n\nThe function then enters a `while` loop that will continue to execute as long as the `flag` variable is `true`. Inside the loop, the function makes a GraphQL request to the `endpoint` using the `request` function from the `graphql-request` library. The response from the request is stored in a variable called `req`.\n\nThe function then iterates over the keys of the `req` object using `Object.keys()` and for each key, it checks if the key already exists in the `data` object. If it does, the function concatenates the new data with the existing data using the spread operator (`...`). If it doesn't, the function simply adds the new data to the `data` object.\n\nThe function then iterates over the values of the `req` object using `Object.values()` and for each value, it checks if the length of the value is equal to 1000. If it is, the function sets the `flag` variable to `true`, which will cause the `while` loop to continue executing.\n\nIf the `variables` object passed to the function contains a key called \"first\", the function breaks out of the `while` loop. Otherwise, the function increments the `skip` variable by 1000 and updates the `variables` object to include the new `skip` value.\n\nOnce the `while` loop has completed, the function returns the `data` object.\n\nIn addition to the `pager` function, this file also exports several other modules (`blocks`, `exchange`, `masterchef`, and `status`) using the `export * from` syntax. These modules likely contain additional functions or classes that are used elsewhere in the project.\n## Questions: \n 1. What is the purpose of the `pager` function?\n - The `pager` function is used to make paginated requests to a GraphQL endpoint and return the combined data from all pages.\n2. What is the significance of checking if the `endpoint` includes the string `'undefined'`?\n - If the `endpoint` includes the string `'undefined'`, the function returns an empty object. This is likely a safeguard against making requests to an invalid or non-existent endpoint.\n3. What are the other files being exported from this module?\n - In addition to the `pager` function, this module also exports functions from four other files: `blocks`, `exchange`, `masterchef`, and `status`. It is unclear what these functions do without further context.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/fetchers/index.md"}}],["1131",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/masterchef.ts)\n\nThis code provides a set of functions for interacting with the subgraphs of the SushiSwap decentralized exchange on various blockchains. The subgraphs are used to query data from the blockchain and return it in a structured format. \n\nThe code imports a set of queries from a separate file, which are used to retrieve data from the subgraphs. It also imports a set of constants and functions from other files, including `ChainId` from the `@zoolabs/zdk` library, `GRAPH_HOST` from a `constants` file, and `getTokenSubset` from an `exchange` file. \n\nThe code defines a set of constants for the different subgraphs that can be queried, including `MINICHEF`, `MASTERCHEF_V2`, and `MASTERCHEF_V1`. Each of these constants is an object that maps a `ChainId` to a subgraph name. \n\nThe code defines a set of functions for querying the subgraphs, including `miniChef`, `masterChefV2`, and `masterChefV1`. Each of these functions takes a `query` parameter, which is a GraphQL query string, and an optional `chainId` parameter, which specifies the blockchain to query. The functions use the `request` function from the `graphql-request` library to send a request to the subgraph and return the result. \n\nThe code defines a set of functions for retrieving data from the subgraphs, including `getMasterChefV1TotalAllocPoint`, `getMasterChefV1SushiPerBlock`, `getMasterChefV1Farms`, `getMasterChefV1PairAddreses`, `getMasterChefV2Farms`, `getMasterChefV2PairAddreses`, `getMiniChefFarms`, and `getMiniChefPairAddreses`. Each of these functions calls the corresponding query function with the appropriate query string and returns the relevant data from the result. \n\nOverall, this code provides a set of tools for querying and retrieving data from the SushiSwap subgraphs on various blockchains. These tools can be used by other parts of the larger project to retrieve data about farms, pools, and other aspects of the decentralized exchange. \n\nExample usage:\n\n```\nimport { getMasterChefV1Farms } from 'zoo'\n\nconst farms = await getMasterChefV1Farms()\nconsole.log(farms)\n// Output: [{ id: '0x...', ... }, { id: '0x...', ... }, ...]\n```\n## Questions: \n 1. What is the purpose of the `zoo` project and how does this code fit into it?\n- This code provides functions for querying data from subgraphs related to SushiSwap's MasterChef and MiniChef contracts on various blockchains. It is likely part of a larger project related to analyzing or interacting with these contracts.\n\n2. What is the difference between `getMasterChefV1Farms` and `getMasterChefV1PairAddreses`?\n- `getMasterChefV1Farms` returns an array of objects representing the pools in the MasterChef contract, while `getMasterChefV1PairAddreses` returns an array of strings representing the addresses of the pairs in those pools.\n\n3. What is the purpose of the `getTokenSubset` function and where is it defined?\n- `getTokenSubset` is not defined in this file, but is likely defined in the `exchange.js` file imported on line 5. It appears to be a function for querying token data from a blockchain, and is used in `getMasterChefV2Farms` to retrieve information about the reward tokens for each pool.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/fetchers/masterchef.md"}}],["1132",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/status.ts)\n\nThis code is a module that exports a single function called `status`. The purpose of this function is to query the indexing status of a subgraph on a specified chain in the Zoo project. \n\nThe function takes two arguments: `chainId` and `subgraphName`. `chainId` is an optional argument that defaults to `ChainId.MAINNET`, which is an enum value from the `@zoolabs/zdk` library. `subgraphName` is a required argument that specifies the name of the subgraph to query.\n\nThe function uses the `request` function from the `graphql-request` library to send a GraphQL query to the Zoo project's indexing server. The query is a string that contains a GraphQL query that requests the indexing status for the specified subgraph on the specified chain. The query includes fields for the subgraph's sync status, health, fatal error (if any), and block information for the chain's head and latest blocks.\n\nThe function returns a Promise that resolves to an object containing the indexing status information for the specified subgraph on the specified chain. The object has the following properties:\n\n- `synced`: a boolean value indicating whether the subgraph is fully synced on the specified chain\n- `health`: a string value indicating the health status of the subgraph on the specified chain\n- `fatalError`: an object containing information about any fatal errors that have occurred during indexing, including an error message, block number and hash, and handler information\n- `chains`: an array of objects containing information about the chain(s) being queried, including the chain's head block number and the latest block number\n\nThis function can be used by other modules in the Zoo project to check the indexing status of a subgraph on a specified chain. For example, a monitoring module could use this function to periodically check the indexing status of all subgraphs on all chains and alert the development team if any subgraphs are not fully synced or have encountered fatal errors. \n\nExample usage:\n\n```\nimport { status } from 'zoo'\n\n// Get the indexing status for the \"my-subgraph\" subgraph on the Rinkeby testnet\nconst subgraphStatus = await status(ChainId.RINKEBY, 'my-subgraph')\nconsole.log(subgraphStatus)\n// Output: { synced: true, health: 'healthy', fatalError: null, chains: [{ chainHeadBlock: { number: 12345 }, latestBlock: { number: 12346 } }] }\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code is used to retrieve the indexing status of a subgraph on a specified chain.\n\n2. What is the significance of the `ChainId` and `GRAPH_HOST` constants?\n- `ChainId` is an enum that represents the different Ethereum networks (e.g. Mainnet, Rinkeby). `GRAPH_HOST` is a constant that holds the URL of the Graph Node API endpoint.\n- These constants are used to construct the URL for the GraphQL request based on the specified chain.\n\n3. What information is returned by the `status` function?\n- The `status` function returns an object that contains information about the indexing status of the specified subgraph on the specified chain, including whether it is synced, its health, any fatal errors, and information about the chain's latest blocks.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/fetchers/status.md"}}],["1133",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/hooks/bar.ts)\n\nThe code above is a module that provides two React hooks, `useBar` and `useBarHistory`, for fetching data related to a bar in the Zoo project. The module imports `ChainId` from the `@zoolabs/zdk` library, which is used to specify the chain ID for the data fetch. It also imports `useSWR` and `SWRConfiguration` from the `swr` library, which are used for data caching and revalidation. Additionally, the module imports `useActiveWeb3React` from a custom `hooks` module, and `getBar` and `getBarHistory` from a `fetchers/bar` module.\n\nThe `useBar` hook takes an optional object argument with `timestamp`, `block`, and `shouldFetch` properties, and an optional `swrConfig` argument. It uses the `useBlock` hook from the `blocks` module to fetch the block number for the given `timestamp` and `ChainId.MAINNET`. If `block` is not provided, it defaults to the fetched block number if `timestamp` is provided, or `undefined` otherwise. The hook then uses `useSWR` to fetch the bar data using the `getBar` function from the `fetchers/bar` module, passing in the `block` number as a parameter. If `shouldFetch` is `false`, the hook returns `undefined`. Otherwise, it returns the fetched data.\n\nThe `useBarHistory` hook takes an optional object argument with a `shouldFetch` property, and an optional `swrConfig` argument. It uses `useSWR` to fetch the bar history data using the `getBarHistory` function from the `fetchers/bar` module. If `shouldFetch` is `false`, the hook returns `undefined`. Otherwise, it returns the fetched data.\n\nThese hooks can be used in a React component to fetch and display data related to a bar in the Zoo project. For example, a component could use `useBar` to fetch the current data for a specific bar, and `useBarHistory` to fetch the historical data for the same bar. The fetched data could then be rendered in the component using JSX. Here is an example of how these hooks could be used in a component:\n\n```\nimport { useBar, useBarHistory } from 'zoo'\n\nfunction BarComponent({ barId }) {\n const barData = useBar({ shouldFetch: true })\n const barHistoryData = useBarHistory({ shouldFetch: true })\n\n return (\n User Profile
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `useBar` and `useBarHistory` functions?\n- `useBar` and `useBarHistory` are custom hooks that fetch data related to a bar and its history respectively using the `getBar` and `getBarHistory` functions.\n\n2. What is the role of the `useSWR` hook in this code?\n- The `useSWR` hook is used to fetch data and manage the state of the data in the component. It takes in a key and a fetcher function and returns the data.\n\n3. What is the significance of the `useBlock` hook in the `useBar` function?\n- The `useBlock` hook is used to fetch the block number based on the timestamp and chain ID provided. It is used to determine the block number to be used in the `useSWR` hook for fetching data related to the bar.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/hooks/bar.md"}}],["1134",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/hooks/bentobox.ts)\n\nThis code defines several custom hooks that can be used to fetch data related to the Kashi protocol and BentoBox smart contract on Ethereum. \n\nThe `useKashiPairs` hook fetches data on Kashi pairs, which are lending pairs on the Kashi protocol. The hook takes in several parameters, including the timestamp, block number, chain ID, and whether or not to fetch the data. It also takes in an optional user parameter and subset parameter, which can be used to filter the results. The hook uses the `useSWR` hook to fetch the data and returns the resulting data.\n\nThe `useUserKashiPairs` hook fetches data on Kashi pairs for a specific user. It takes in similar parameters as the `useKashiPairs` hook, but also takes in a variables parameter that can be used to filter the results. If the variables parameter includes a user property, the hook will fetch data for that user. Otherwise, it will fetch data for the current user. The hook uses the `useSWR` hook to fetch the data and returns the resulting data.\n\nThe `useBentoUserTokens` hook fetches data on tokens held by a specific user in the BentoBox smart contract. It takes in similar parameters as the `useUserKashiPairs` hook, but fetches data from the BentoBox smart contract instead. The hook uses the `useSWR` hook to fetch the data and returns the resulting data.\n\nThe `useBentoBox` hook fetches data on the BentoBox smart contract itself. It takes in similar parameters as the `useKashiPairs` hook, but only takes in the timestamp, block number, chain ID, and whether or not to fetch the data. The hook uses the `useSWR` hook to fetch the data and returns the resulting data.\n\nThese hooks can be used in a larger project to fetch data related to the Kashi protocol and BentoBox smart contract. For example, the `useKashiPairs` hook could be used to display a list of available lending pairs on the Kashi protocol, while the `useUserKashiPairs` hook could be used to display a list of lending pairs held by a specific user. The `useBentoUserTokens` hook could be used to display a list of tokens held by a specific user in the BentoBox smart contract, while the `useBentoBox` hook could be used to display information about the BentoBox smart contract itself.\n## Questions: \n 1. What is the purpose of the `useKashiPairs` function and what parameters does it take?\n- The `useKashiPairs` function is used to fetch Kashi pairs data based on the provided parameters such as timestamp, block, chainId, user, and subset. It takes two parameters: `useKashiPairsProps` object and `swrConfig` object.\n\n2. What is the difference between `useUserKashiPairs` and `useBentoUserTokens` functions?\n- `useUserKashiPairs` is used to fetch Kashi pairs data for a specific user, while `useBentoUserTokens` is used to fetch BentoBox user tokens data for a specific user.\n\n3. What is the purpose of the `useBentoBox` function and what parameters does it take?\n- The `useBentoBox` function is used to fetch BentoBox data based on the provided parameters such as timestamp, block, and chainId. It takes two parameters: `useBentoBoxProps` object and `swrConfig` object.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/hooks/bentobox.md"}}],["1135",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/hooks/blocks.ts)\n\nThis code defines three functions that are used to fetch data related to Ethereum blocks. The functions are `useBlock`, `useMassBlocks`, and `useAverageBlockTime`. \n\nThe `useBlock` function takes an object with four properties as its argument: `timestamp`, `daysAgo`, `chainId`, and `shouldFetch`. `timestamp` is a Unix timestamp in seconds, `daysAgo` is the number of days ago from the current time, `chainId` is the ID of the Ethereum chain, and `shouldFetch` is a boolean that determines whether or not the function should fetch data. The function then converts the `timestamp` to seconds if it is in milliseconds and calculates the timestamp based on the number of days ago if `daysAgo` is provided. It then uses the `useSWR` hook to fetch the block data using the `getBlock` function from the `fetchers` module. The `shouldFetch` parameter is used to determine whether or not to fetch the data. The function returns the fetched data.\n\nThe `useMassBlocks` function takes an array of timestamps or strings and an optional `swrConfig` object as its arguments. It uses the `useActiveWeb3React` hook to get the current chain ID and then uses the `useSWR` hook to fetch the mass block data using the `getMassBlocks` function from the `fetchers` module. The function returns the fetched data.\n\nThe `useAverageBlockTime` function takes an optional `swrConfig` object as its argument. It uses the `useActiveWeb3React` hook to get the current chain ID and then uses the `useSWR` hook to fetch the average block time data using the `getAverageBlockTime` function from the `fetchers` module. The function returns the fetched data.\n\nThese functions can be used to fetch Ethereum block data in a React application. For example, the `useBlock` function can be used to fetch the data for a specific block, while the `useMassBlocks` function can be used to fetch data for multiple blocks. The `useAverageBlockTime` function can be used to fetch the average block time for a specific chain. These functions can be used to display Ethereum block data in a user interface or to perform calculations based on the data.\n## Questions: \n 1. What is the purpose of the `useBlock` function and what parameters does it take?\n- The `useBlock` function is used to fetch a block from the blockchain based on a given timestamp or number of days ago, and it takes in an object with `timestamp`, `daysAgo`, `chainId`, and `shouldFetch` properties as well as an optional `swrConfig` parameter.\n\n2. What is the purpose of the `useMassBlocks` function and what parameters does it take?\n- The `useMassBlocks` function is used to fetch multiple blocks from the blockchain based on an array of timestamps or block numbers, and it takes in an array of `timestamps` or `blockNumbers` and an optional `swrConfig` parameter.\n\n3. What is the purpose of the `useAverageBlockTime` function and what parameters does it take?\n- The `useAverageBlockTime` function is used to fetch the average block time for a given blockchain, and it takes in an optional `swrConfig` parameter.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/hooks/blocks.md"}}],["1136",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/hooks/index.ts)\n\nThis code is a collection of hooks and utility functions related to fetching and processing data for various farming contracts in the larger project. The code imports several functions from the `fetchers` module, which are used to retrieve data from the various farming contracts. The `useSWR` hook is used to cache and manage the data returned from these fetchers.\n\nThe `useMasterChefV1TotalAllocPoint` and `useMasterChefV1SushiPerBlock` functions are used to retrieve the total allocation points and SUSHI rewards per block for the MasterChefV1 contract on the Ethereum mainnet. These functions return the data retrieved from the `getMasterChefV1TotalAllocPoint` and `getMasterChefV1SushiPerBlock` fetchers, respectively.\n\nThe `useMasterChefV1Farms`, `useMasterChefV2Farms`, and `useMiniChefFarms` functions are used to retrieve data for the various farming pools associated with the MasterChefV1, MasterChefV2, and MiniChef contracts, respectively. These functions return an array of farming pool objects, each of which contains information about the pool's contract address, allocation points, and other relevant data. The `useFarms` function is a utility function that combines the results of these three functions into a single array of farming pool objects.\n\nThe `useMasterChefV1PairAddresses`, `useMasterChefV2PairAddresses`, and `useMiniChefPairAddresses` functions are used to retrieve the contract addresses of the token pairs associated with the various farming pools. These functions return an array of contract addresses. The `useFarmPairAddresses` function is a utility function that combines the results of these three functions into a single array of contract addresses.\n\nOverall, this code provides a set of hooks and utility functions that can be used to retrieve and process data related to various farming contracts in the larger project. For example, the `useFarms` and `useFarmPairAddresses` functions could be used to display information about the available farming pools and their associated token pairs in a user interface.\n## Questions: \n 1. What is the purpose of the `useFarms` function and how does it work?\n- The `useFarms` function returns an array of farming pools across different chef contracts. It works by calling the `useMasterChefV1Farms`, `useMasterChefV2Farms`, and `useMiniChefFarms` functions and concatenating their results.\n\n2. What is the significance of the `shouldFetch` variable in the various `use*` functions?\n- The `shouldFetch` variable is used to determine whether or not to fetch data based on the current `chainId`. For example, some data is only relevant for the `MAINNET` chain, while other data is only relevant for specific testnets.\n\n3. What is the purpose of the `useMemo` hook in the various `use*` functions?\n- The `useMemo` hook is used to memoize the results of the data fetching functions. This can help improve performance by preventing unnecessary re-renders when the same data is requested multiple times.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/hooks/index.md"}}],["1137",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/index.ts)\n\nThis code exports all the functions and variables from two different files located in the `zoo` project: `hooks.js` and `fetchers.js`. \n\nThe purpose of this code is to make all the functionality from these two files available to other parts of the `zoo` project without having to import each function or variable individually. This can save time and make the code more readable by reducing the number of import statements needed.\n\nFor example, if another file in the `zoo` project needs to use a function from `hooks.js`, it can simply import everything from this file using the following code:\n\n```\nimport * as hooks from './hooks'\n```\n\nThis will import all the functions and variables from `hooks.js` and make them available under the `hooks` namespace. The same can be done for `fetchers.js`:\n\n```\nimport * as fetchers from './fetchers'\n```\n\nOverall, this code helps to simplify the process of importing and using functions and variables from multiple files within the `zoo` project.\n## Questions: \n 1. **What is the purpose of this file?** \nA smart developer might wonder what the overall purpose of this file is within the `zoo` project. Based on the code, it appears to be exporting functionality from two other files, but it's unclear what those files contain or how they relate to the rest of the project.\n\n2. **What are the `hooks` and `fetchers` modules?** \nA smart developer might want to know more about the `hooks` and `fetchers` modules being exported from this file. What functionality do they provide? Are they related to each other in any way? Understanding these modules could help the developer better understand the overall architecture of the `zoo` project.\n\n3. **Why is everything being exported?** \nA smart developer might question why everything is being exported from this file using the `export *` syntax. Is this necessary for the project to function properly? Are there any potential downsides to exporting everything in this way? Understanding the reasoning behind this design decision could help the developer make informed decisions about their own code.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/index.md"}}],["1138",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/queries/bar.ts)\n\nThis code defines three GraphQL queries related to the `bar` feature of the larger project. \n\nThe `bar` feature appears to be related to a cryptocurrency called Sushi, and the queries retrieve various pieces of information about the `bar` and its users. \n\nThe first query, `barQuery`, retrieves information about a specific `bar` identified by its `id`. The query takes an optional argument `block` which specifies the block height at which to retrieve the information. If no `block` is specified, the default value is used. The query returns various pieces of information about the `bar`, including its `id`, `totalSupply`, `ratio`, and various statistics related to `xSushi` (a type of token related to Sushi).\n\nThe second query, `barHistoriesQuery`, retrieves historical information about the `bar`. It retrieves the first 1000 historical records of the `histories` field, which includes information about `sushiStaked`, `sushiHarvested`, and other statistics related to `xSushi`.\n\nThe third query, `barUserQuery`, retrieves information about a specific user identified by their `id`. The query returns information about the user's `bar`, including `totalSupply` and `sushiStaked`, as well as various statistics related to `xSushi`. It also returns information about the user's transactions, including `sushiIn`, `sushiOut`, `usdIn`, and `usdOut`.\n\nThese queries can be used to retrieve information about the `bar` and its users, which can be used for various purposes within the larger project. For example, the information could be used to display statistics about the `bar` and its users, or to perform calculations related to `xSushi`. \n\nHere is an example of how the `barQuery` could be used in a React component:\n\n```\nimport { useQuery } from '@apollo/client';\nimport { barQuery } from './path/to/barQuery';\n\nfunction BarInfo({ barId }) {\n const { loading, error, data } = useQuery(barQuery, {\n variables: { id: barId },\n });\n\n if (loading) return Bar {barId}
\nCurrent price: {barData?.price}
\nHistorical prices:
\n- \n {barHistoryData?.map((price, index) => (\n
- {price} \n ))}\n
Loading...
;\n if (error) returnError :(
;\n\n const { bar } = data;\n\n return (\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code and what does it do?\n \n This code defines three GraphQL queries for the `bar` entity, which retrieves various data related to the SushiSwap bar. The queries retrieve data such as the total supply of the bar, the amount of SUSHI staked, and the amount of xSUSHI minted and burned.\n\n2. What is the significance of the commented out code in the `barQuery` function?\n \n The commented out code in the `barQuery` function is a GraphQL query for retrieving historical data related to the `bar` entity. It is currently not being used, but may be useful for future development or analysis.\n\n3. What is the purpose of the `barUserQuery` function and what data does it retrieve?\n \n The `barUserQuery` function is a GraphQL query for retrieving data related to a specific user of the SushiSwap bar. It retrieves data such as the user's ID, the total supply of the bar, the amount of SUSHI and xSUSHI staked, and various other transaction data such as amounts of SUSHI and USD in and out.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/queries/bar.md"}}],["1139",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/queries/bentobox.ts)\n\nThis code defines several GraphQL queries and fragments related to the BentoBox and KashiPair smart contracts on the Ethereum blockchain. These queries are used to retrieve data from the blockchain and display it in the user interface of the larger project.\n\nThe `bentoTokenFieldsQuery` fragment defines a set of fields that can be used to retrieve information about a specific token, such as its name, symbol, and total supply. This fragment is used in the `bentoUserTokensQuery` query, which retrieves a list of tokens owned by a specific user and the amount of each token they own.\n\nThe `kashiPairFieldsQuery` fragment defines a set of fields that can be used to retrieve information about a specific KashiPair, which is a type of lending pool on the BentoBox platform. This fragment is used in the `kashiPairsQuery` query, which retrieves a list of KashiPairs that meet certain criteria, such as having a high utilization rate. The `kashiUserPairsQuery` query retrieves a list of KashiPairs owned by a specific user and the user's share of each pair.\n\nThe `bentoBoxQuery` query retrieves information about the BentoBox platform itself, such as the total number of users and tokens, as well as a list of the tokens currently supported by the platform.\n\nOverall, these queries and fragments are used to display information about the BentoBox and KashiPair smart contracts in the user interface of the larger project. For example, the `bentoUserTokensQuery` query could be used to display a user's token balances, while the `kashiPairsQuery` query could be used to display a list of available lending pools.\n## Questions: \n 1. What is the purpose of the `bentoTokenFieldsQuery` and `kashiPairFieldsQuery` fragments?\n- These fragments define the fields that are commonly used in queries related to tokens and Kashi pairs, respectively. They allow for more efficient and reusable code by avoiding repetition of field definitions in multiple queries.\n\n2. What is the significance of the `$skip`, `$first`, and `$block` variables in the `bentoUserTokensQuery` and `kashiPairsQuery` queries?\n- These variables are used for pagination and filtering of results. `$skip` determines how many results to skip before returning data, `$first` determines the maximum number of results to return, and `$block` filters results based on the block height at which the data was recorded.\n\n3. What is the purpose of the `bentoBoxQuery` query and what is the default value for the `id` variable?\n- The `bentoBoxQuery` retrieves information about a BentoBox, which is a smart contract that allows for efficient token trading and lending. The default value for the `id` variable is the address of the BentoBox contract on the Ethereum network.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/queries/bentobox.md"}}],["1140",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/queries/blocks.ts)\n\nThis code defines GraphQL queries for retrieving information about blocks in a blockchain. The `blockFieldsQuery` defines a fragment that specifies the fields to be returned for a block, including its `id`, `number`, and `timestamp`. \n\nThe `blockQuery` is a GraphQL query that retrieves the most recent block that matches a given filter. It takes a filter object as an argument and returns the first block that matches the filter, sorted by timestamp in descending order. The query includes the `blockFields` fragment to specify the fields to be returned for the block. \n\nThe `blocksQuery` is a GraphQL query that retrieves a list of blocks that match a given time range. It takes four arguments: `first` (the number of blocks to return), `skip` (the number of blocks to skip), `start` (the start of the time range), and `end` (the end of the time range). The query returns the blocks sorted by block number in descending order and includes the `blockFields` fragment to specify the fields to be returned for each block. \n\nThe `massBlocksQuery` is a function that takes an array of timestamps and returns a GraphQL query that retrieves the first block after each timestamp. The query includes a separate block query for each timestamp, with the query name being the timestamp value. The query includes the `blockFields` fragment to specify the fields to be returned for each block. \n\nThese queries can be used to retrieve information about blocks in a blockchain, such as their number, timestamp, and other metadata. The `blockQuery` can be used to retrieve the most recent block that matches a given filter, while the `blocksQuery` can be used to retrieve a list of blocks that match a given time range. The `massBlocksQuery` can be used to retrieve the first block after a list of timestamps, which can be useful for tracking the progress of the blockchain over time. \n\nExample usage:\n\n```\nimport { blockQuery, blocksQuery, massBlocksQuery } from 'zoo'\n\n// Retrieve the most recent block\nconst latestBlock = await client.query({\n query: blockQuery,\n variables: { where: { number_gt: 0 } }\n})\n\n// Retrieve the blocks in a given time range\nconst blocksInRange = await client.query({\n query: blocksQuery,\n variables: { first: 100, skip: 0, start: 1609459200, end: 1609545600 }\n})\n\n// Retrieve the first block after a list of timestamps\nconst timestamps = [1609459200, 1609462800, 1609466400]\nconst massBlocks = await client.query({\n query: massBlocksQuery(timestamps)\n})\n```\n## Questions: \n 1. What is the purpose of the `blockFieldsQuery` fragment?\n- The `blockFieldsQuery` fragment defines the fields that should be returned for a `Block` object.\n\n2. What is the difference between `blockQuery` and `blocksQuery`?\n- `blockQuery` returns the most recent `Block` object that matches the specified filter, while `blocksQuery` returns a list of `Block` objects that match the specified filter.\n\n3. What is the purpose of the `massBlocksQuery` function?\n- The `massBlocksQuery` function generates a GraphQL query that returns the first `Block` object that matches a list of timestamps, sorted in ascending order by timestamp.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/queries/blocks.md"}}],["1141",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/queries/exchange.ts)\n\nThis file contains a set of GraphQL queries that can be used to retrieve data from the Uniswap V2 subgraph. The queries are organized into sections based on the type of data they retrieve, such as pairs, tokens, and transactions.\n\nThe `factoryQuery` retrieves data about the Uniswap factory contract, such as the total volume and liquidity in USD. The `userIdsQuery` retrieves a list of user IDs. The `uniswapUserQuery` retrieves data about a specific user, including their liquidity positions. The `ethPriceQuery` retrieves the current ETH price. The `tokenPriceQuery` retrieves the price of a specific token in ETH.\n\nThe `dayDatasQuery` retrieves daily data for Uniswap pairs, such as volume and liquidity. The `pairQuery` retrieves data about a specific pair, including its reserves and volume. The `pairIdsQuery` retrieves a list of pair IDs. The `pairCountQuery` retrieves the total number of pairs in the Uniswap factory. The `pairDayDatasQuery` retrieves daily data for a set of pairs.\n\nThe `liquidityPositionsQuery` retrieves data about liquidity positions, including the user and pair IDs. The `pairsQuery` retrieves data about pairs, including their reserves and volume. The `pairsTimeTravelQuery` retrieves historical data for a set of pairs.\n\nThe `tokenQuery` retrieves data about a specific token, including its symbol, name, and liquidity. The `tokenIdsQuery` retrieves a list of token IDs. The `tokenDayDatasQuery` retrieves daily data for a set of tokens. The `tokenPairsQuery` retrieves pairs that include a specific token. The `tokensQuery` retrieves data about tokens, including their volume and price.\n\nThe `transactionsQuery` retrieves data about swaps, mints, and burns.\n\nThese queries can be used to retrieve data from the Uniswap V2 subgraph for analysis and visualization. For example, the `dayDatasQuery` can be used to create a chart of daily volume and liquidity for a specific pair. The `tokensQuery` can be used to create a list of the top tokens by volume. The `transactionsQuery` can be used to analyze trading activity on Uniswap.\n## Questions: \n 1. What is the purpose of this code?\n- This code contains GraphQL queries for retrieving data related to Uniswap, such as factory information, user data, pair data, token data, and transaction data.\n\n2. What are some of the specific data fields that can be retrieved using these queries?\n- Some of the specific data fields that can be retrieved include pair and token IDs, reserve and liquidity amounts, transaction timestamps, and user and pair-specific data.\n\n3. Are there any limitations or restrictions to the data that can be retrieved using these queries?\n- It is unclear from this code whether there are any limitations or restrictions to the data that can be retrieved using these queries, such as time periods or specific filters.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/queries/exchange.md"}}],["1142",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/queries/index.ts)\n\nThis code exports all the modules from different files located in the `zoo` project. The `export *` statement is used to export all the functions, classes, and variables from the specified files. \n\nThe `blocks` module may contain code related to blockchain technology, such as creating and managing blocks. The `exchange` module may contain code related to cryptocurrency exchange, such as buying and selling cryptocurrencies. The `masterchef` and `masterchef-v2` modules may contain code related to yield farming, such as managing liquidity pools and distributing rewards. The `minichef` module may contain code related to a smaller version of the yield farming protocol.\n\nBy exporting all the modules from these files, other parts of the `zoo` project can easily access and use the functions and classes defined in these modules. For example, if there is a file in the `zoo` project that needs to use the functions defined in the `exchange` module, it can simply import them using the `import` statement:\n\n```\nimport { buyCrypto, sellCrypto } from './exchange';\n```\n\nThis code can then use the `buyCrypto` and `sellCrypto` functions to perform cryptocurrency exchange operations.\n\nOverall, this code serves as a way to organize and modularize the code in the `zoo` project, making it easier to maintain and reuse.\n## Questions: \n 1. **What is the purpose of this code file?** \nThis code file exports modules from different files located in the `zoo` project, specifically from the `blocks`, `exchange`, `masterchef`, `masterchef-v2`, and `minichef` files.\n\n2. **What are the contents of the `blocks`, `exchange`, `masterchef`, `masterchef-v2`, and `minichef` files?** \nWithout looking at the contents of these files, it is impossible to know what modules are being exported from them. A smart developer might want to investigate the contents of these files to understand the functionality of the `zoo` project.\n\n3. **Are there any dependencies required for these exported modules to work?** \nThe code file does not provide any information about dependencies required for the exported modules to work. A smart developer might want to check the documentation or source code of each module to determine if any dependencies are needed.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/queries/index.md"}}],["1143",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/queries/masterchef-v2.ts)\n\nThis code defines two GraphQL queries for the zoo project. The first query, `poolsV2Query`, retrieves information about pools in the project. The query takes in several variables, including `first`, `skip`, `orderBy`, `orderDirection`, `block`, and `where`. These variables are used to filter and sort the results of the query. The query returns information about each pool, including its ID, the pair associated with the pool, the allocation point for the pool, the SLP balance for the pool, and information about the pool's master chef and rewarder.\n\nThe second query, `masterChefV2PairAddressesQuery`, retrieves information about the pair addresses associated with the master chef in the project. This query takes in several variables, including `first`, `skip`, `orderBy`, `orderDirection`, and `where`. The query returns information about each pool associated with the master chef, including its ID, allocation point, accumulated Sushi per share, and the ID of the pair associated with the pool.\n\nThese queries can be used in the larger zoo project to retrieve information about pools and pair addresses associated with the master chef. For example, the `poolsV2Query` could be used to display a list of all pools in the project, sorted by allocation point or SLP balance. The `masterChefV2PairAddressesQuery` could be used to display a list of all pair addresses associated with the master chef, along with information about each pool. \n\nHere is an example of how the `poolsV2Query` could be used in a React component:\n\n```\nimport { useQuery } from '@apollo/client';\nimport { poolsV2Query } from './zoo';\n\nfunction PoolList() {\n const { loading, error, data } = useQuery(poolsV2Query);\n\n if (loading) return Bar Info
\nTotal Supply: {bar.totalSupply}
\nRatio: {bar.ratio}
\nxSushi Minted: {bar.xSushiMinted}
\nxSushi Burned: {bar.xSushiBurned}
\nSushi Staked: {bar.sushiStaked}
\nSushi Staked USD: {bar.sushiStakedUSD}
\nSushi Harvested: {bar.sushiHarvested}
\nSushi Harvested USD: {bar.sushiHarvestedUSD}
\nxSushi Age: {bar.xSushiAge}
\nxSushi Age Destroyed: {bar.xSushiAgeDestroyed}
\nLoading...
;\n if (error) returnError :(
;\n\n return (\n- \n {data.pools.map(pool => (\n
- \n
Pool ID: {pool.id}
\nPair: {pool.pair}
\nAllocation Point: {pool.allocPoint}
\nSLP Balance: {pool.slpBalance}
\n \n ))}\n
Loading...
;\n if (error) returnError :(
;\n\n return (\n\n {data.pools.map(pool => (\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines GraphQL queries for retrieving data related to pools and the MasterChef contract in a DeFi project called zoo.\n\n2. What are the default values for the variables used in the queries?\n- The default values for variables such as `first`, `skip`, `orderBy`, `orderDirection`, and `where` are specified in the query definitions.\n\n3. What is the significance of the `masterChefV1PairAddressesQuery` query?\n- This query retrieves the addresses of pairs associated with pools in the MasterChef contract, along with other relevant data such as allocation points and accumulated SUSHI rewards.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/queries/masterchef.md"}}],["1145",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/graph/queries/minichef.ts)\n\nThe code above contains two GraphQL queries that are used to retrieve data related to pools in the larger project. The first query is called `miniChefPoolsQuery` and it retrieves information about the pools, such as their ID, pair, rewarder, allocation point, last reward time, accumulated Sushi per share, SLP balance, user count, and mini chef. The query takes in several variables, such as `first`, `skip`, `orderBy`, `orderDirection`, `block`, and `where`, which can be used to filter and sort the results. For example, `first` and `skip` can be used to paginate the results, while `orderBy` and `orderDirection` can be used to sort the results by a specific field and direction. The `where` variable is used to filter the results based on certain conditions, such as `allocPoint_gt` and `accSushiPerShare_gt`, which filter out pools with an allocation point or accumulated Sushi per share less than or equal to zero. The query is exported as a constant, which can be imported and used in other parts of the project.\n\nThe second query is called `miniChefPairAddressesQuery` and it retrieves information about the pair addresses associated with the pools. The query takes in similar variables as the first query, such as `first`, `skip`, `orderBy`, `orderDirection`, and `where`, which can be used to filter and sort the results. The query retrieves the ID, allocation point, accumulated Sushi per share, and pair ID for each pool. The query is also exported as a constant, which can be imported and used in other parts of the project.\n\nOverall, these queries are used to retrieve data related to pools in the larger project, which can be used for various purposes, such as displaying the data on a dashboard or calculating rewards for users. The queries are written in GraphQL, which is a query language for APIs that allows for efficient and flexible data retrieval. The queries take in variables that can be used to customize the results, making them more versatile and reusable.\n## Questions: \n 1. What is the purpose of the `miniChefPoolsQuery` and `miniChefPairAddressesQuery` functions?\n \n `miniChefPoolsQuery` and `miniChefPairAddressesQuery` are GraphQL queries that retrieve data from the `pools` table. The former retrieves more detailed information about each pool, while the latter only retrieves the pool ID and the ID of its associated pair.\n\n2. What are the default values for the variables used in these queries?\n \n The default values for the variables used in both queries are as follows: `first` is 1000, `skip` is 0, `orderBy` is \"id\", `orderDirection` is \"desc\", and `where` is a filter object that specifies that the `allocPoint` and `accSushiPerShare` fields must be greater than 0.\n\n3. What is the purpose of the `Pool_filter` type used in the `miniChefPoolsQuery` and `miniChefPairAddressesQuery` functions?\n \n `Pool_filter` is a custom input type that is used to filter the `pools` table based on certain criteria. In this case, it is used to filter pools where the `allocPoint` and `accSushiPerShare` fields are greater than 0.","metadata":{"source":".autodoc/docs/markdown/core/src/services/graph/queries/minichef.md"}}],["1146",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/local-forage/fetcher.ts)\n\nThe code in this file is a function called `fetcher` that is used to retrieve data from a local storage using the `localForage` library. The function takes in a `key` parameter which is used to identify the data to be retrieved. \n\nThe `localForage` library is imported at the beginning of the file and is used to interact with the local storage. By default, the library uses IndexDB as the storage strategy, but this can be changed if needed.\n\nThe function uses the `await` keyword to wait for the `getItem` method of `localForage` to return the value associated with the given `key`. The value is then checked to see if it exists, and if it does not, `undefined` is returned. If the value exists, it is logged to the console and then parsed from a string to a JSON object using `JSON.parse`. The parsed object is then returned.\n\nIf an error occurs during the retrieval process, it is caught and logged to the console using `console.error`.\n\nThis function can be used in the larger project to retrieve data from the local storage. For example, if the project has a feature that allows users to save their preferences, this function can be used to retrieve those preferences when the user returns to the site. \n\nHere is an example of how the `fetcher` function can be used:\n\n```\nconst preferences = await fetcher('userPreferences')\nif (preferences) {\n // do something with the preferences\n} else {\n // handle case where preferences have not been set\n}\n```\n## Questions: \n 1. What is `localForage` and how is it being used in this code?\n `localForage` is a library for offline storage in web browsers, and it is being used to retrieve an item with a given key from the storage.\n\n2. What type of data is expected to be returned from the `fetcher` function?\n The `fetcher` function is expected to return a JSON-parsed object, or `undefined` if the requested item is not found in the storage.\n\n3. Is there any error handling in this code?\n Yes, there is error handling in this code. If an error occurs during the retrieval of the item, it will be logged to the console using `console.error`.","metadata":{"source":".autodoc/docs/markdown/core/src/services/local-forage/fetcher.md"}}],["1147",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/local-storage/fetcher.ts)\n\nThe code provided is a simple local storage fetcher function that exports as a default. The purpose of this function is to retrieve data from the local storage of the browser based on a given key. The function takes in a single parameter, which is the key to be used to retrieve the data from the local storage. \n\nThe function first uses the `localStorage.getItem()` method to retrieve the value associated with the given key from the local storage. If the value is not found, the function returns `undefined`. However, if the value is found, the function uses the `JSON.parse()` method to parse the value from a string to a JavaScript object and returns the parsed object.\n\nThis function can be used in a larger project that requires data to be stored and retrieved from the local storage of the browser. For example, if a web application requires user preferences to be saved and retrieved across sessions, this function can be used to store and retrieve the preferences from the local storage. \n\nHere is an example of how this function can be used:\n\n```\nimport fetcher from 'zoo/fetcher'\n\n// Store user preferences\nconst preferences = {\n theme: 'dark',\n language: 'en'\n}\nlocalStorage.setItem('preferences', JSON.stringify(preferences))\n\n// Retrieve user preferences using the fetcher function\nconst retrievedPreferences = await fetcher('preferences')\nconsole.log(retrievedPreferences) // { theme: 'dark', language: 'en' }\n``` \n\nIn this example, the `fetcher` function is used to retrieve the user preferences that were previously stored in the local storage. The preferences are stored as a JavaScript object, but they need to be converted to a string using `JSON.stringify()` before being stored in the local storage. The `fetcher` function is then used to retrieve the preferences by passing in the key `'preferences'`. The retrieved preferences are then logged to the console.\n## Questions: \n 1. What is the purpose of this code?\n Answer: This code exports an asynchronous function called `fetcher` that retrieves a value from local storage and returns it as a parsed JSON object.\n\n2. What happens if the specified key does not exist in local storage?\n Answer: If the specified key does not exist in local storage, the function returns `undefined`.\n\n3. Is this code part of a larger project or library?\n Answer: Yes, the code is part of the `swr` library and is located in an example file in the `storage-tab-sync` directory.","metadata":{"source":".autodoc/docs/markdown/core/src/services/local-storage/fetcher.md"}}],["1148",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/redis/index.ts)\n\nThis code imports the Redis library from the 'ioredis' package and creates a new Redis client instance using the URL specified in the environment variable 'REDIS_URL'. The Redis client instance is then exported as the default export of this module.\n\nRedis is an in-memory data structure store that can be used as a database, cache, and message broker. This code allows other modules in the 'zoo' project to use the Redis client instance to store and retrieve data from Redis.\n\nFor example, if a module in the 'zoo' project needs to store user session data, it can import the Redis client instance from this module and use the set() method to store the session data with a unique key:\n\n```\nimport redis from './redis'\n\nconst sessionId = 'abc123'\nconst sessionData = { userId: 123, isLoggedIn: true }\n\nredis.set(sessionId, JSON.stringify(sessionData))\n```\n\nLater, the module can retrieve the session data using the get() method:\n\n```\nconst sessionDataString = await redis.get(sessionId)\nconst sessionData = JSON.parse(sessionDataString)\n``` \n\nOverall, this code provides a simple and efficient way for modules in the 'zoo' project to use Redis as a data store.\n## Questions: \n 1. **What is the purpose of this code?**\\\nA smart developer might wonder what this code does and how it fits into the overall functionality of the `zoo` project. Based on the code, it appears to be importing the Redis library and creating a new Redis instance using the `REDIS_URL` environment variable, and then exporting that instance.\n\n2. **What is the Redis library and why is it being used in this project?**\\\nA smart developer might be familiar with Redis but may not know why it is being used in this specific project. Redis is an in-memory data structure store that can be used as a database, cache, and message broker. It's possible that this project is using Redis for one or more of these purposes.\n\n3. **What is the significance of exporting the Redis instance?**\\\nA smart developer might wonder why the Redis instance is being exported. Exporting the instance makes it available for use in other parts of the `zoo` project. This could be useful if other modules or files need to interact with Redis or if the Redis instance needs to be shared across multiple parts of the project.","metadata":{"source":".autodoc/docs/markdown/core/src/services/redis/index.md"}}],["1149",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/web3/fetcher.ts)\n\nThe `fetcher` function is a placeholder function that does not contain any code. It is likely that this function was created as a placeholder for future development or as a reference for other developers to know where to add code for fetching data from an external source. \n\nIn the larger project, this function may be used as a starting point for implementing data fetching functionality. For example, if the project requires data from an API, the `fetcher` function can be modified to make a request to the API and return the response. \n\nHere is an example of how the `fetcher` function can be modified to fetch data from an API using the `fetch` function:\n\n```\nexport async function fetcher(url) {\n const response = await fetch(url);\n const data = await response.json();\n return data;\n}\n```\n\nThis modified `fetcher` function takes a `url` parameter and uses the `fetch` function to make a request to the specified URL. The response is then parsed as JSON and returned as a JavaScript object. \n\nOverall, the `fetcher` function serves as a starting point for implementing data fetching functionality in the larger project.\n## Questions: \n 1. What is the purpose of the `fetcher` function?\n - The code does not provide any information about the purpose of the `fetcher` function. It would be helpful to have comments or documentation explaining what this function does.\n\n2. Are there any parameters or return values for the `fetcher` function?\n - The code does not show any parameters or return values for the `fetcher` function. It would be useful to know if this function takes any arguments or returns any data.\n\n3. Is this function used anywhere else in the `zoo` project?\n - The code snippet only shows the `fetcher` function in isolation, so it is unclear if this function is used elsewhere in the `zoo` project. It would be helpful to know if this function is called from other parts of the codebase.","metadata":{"source":".autodoc/docs/markdown/core/src/services/web3/fetcher.md"}}],["1150",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/zerion/constants.ts)\n\nThe code above defines two constants, `ZERION_API` and `ZERION_API_KEY`, which are likely used to connect to the Zerion API. The `ZERION_API` constant is a WebSocket Secure (wss) URL that points to the Zerion API endpoint. The `ZERION_API_KEY` constant is an API key that is used to authenticate the connection to the Zerion API. \n\nIn the larger project, this code may be used to establish a connection to the Zerion API, which is a platform that provides access to decentralized finance (DeFi) data. The API can be used to retrieve data on various DeFi protocols, such as Uniswap, Compound, and Aave. By connecting to the Zerion API, the project can retrieve data on these protocols and use it to display information to users or perform other actions.\n\nHere is an example of how this code may be used in the larger project:\n\n```javascript\nimport { ZERION_API, ZERION_API_KEY } from 'zoo';\n\nconst socket = new WebSocket(ZERION_API);\nsocket.onopen = () => {\n socket.send(`auth:${ZERION_API_KEY}`);\n // send other messages to the API to retrieve data\n};\n```\n\nIn this example, the `WebSocket` constructor is used to create a new WebSocket connection to the Zerion API endpoint. Once the connection is established, the `onopen` event is triggered, which sends an authentication message to the API using the `ZERION_API_KEY` constant. From here, the project can send other messages to the API to retrieve data on DeFi protocols.\n## Questions: \n 1. What is the purpose of this code and how is it used within the zoo project?\n- This code exports two constants, `ZERION_API` and `ZERION_API_KEY`, which likely serve as API endpoints or keys for interacting with the Zerion API. A smart developer may want to know how these constants are used within the zoo project and what functionality they enable.\n\n2. Is the `ZERION_API` endpoint secure and how is data transmitted over it?\n- The `ZERION_API` endpoint uses the `wss` protocol, which stands for \"WebSocket Secure\". This suggests that data transmitted over the endpoint is encrypted and secure. However, a smart developer may want to confirm this and ensure that sensitive data is not being transmitted in plain text.\n\n3. Are there any potential security vulnerabilities associated with the `ZERION_API_KEY` constant?\n- The `ZERION_API_KEY` constant appears to be a sensitive API key used to authenticate requests to the Zerion API. A smart developer may want to ensure that this key is not exposed in any public-facing code or configuration files, as this could potentially lead to unauthorized access to the API and its associated data.","metadata":{"source":".autodoc/docs/markdown/core/src/services/zerion/constants.md"}}],["1151",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/zerion/fetchers.ts)\n\nThe code is a module that exports a function called `getAssets` that fetches asset data from the Zerion API. The function takes an account address as an argument and returns an array of assets associated with that account. \n\nThe `getAssets` function uses a `fetcher` function to make a WebSocket connection to the Zerion API. The `fetcher` function takes an array of queries as an argument and returns a Promise that resolves with the data returned by the API. \n\nThe `fetcher` function first creates a WebSocket connection to the Zerion API using the `WebSocket` constructor. It then sends a series of queries to the API using the `send` method of the WebSocket object. The queries are sent in two parts: a `40` message that opens a query and a `42` message that sends the query payload. \n\nThe `fetcher` function listens for messages from the API using the `addEventListener` method of the WebSocket object. When a `40` message is received, the function sends the corresponding `42` message with the query payload. When a `42` message is received, the function adds the data to the `data` object and checks if all queries have been completed. If all queries have been completed, the function closes the WebSocket connection and resolves the Promise with the `data` object. \n\nThe `getAssets` function creates an array of queries to fetch asset data for the specified account. The queries are sent to the `fetcher` function, which returns an object containing asset data for each query. The `getAssets` function then maps over the object keys to extract the asset data and reduce the data into a single array. The resulting array contains objects with asset information, including the asset name, quantity, and network. \n\nThis code can be used in a larger project to fetch asset data for a user's account. The `getAssets` function can be called with a user's account address to retrieve their asset data. The resulting data can be used to display the user's assets in a UI or to perform other operations on the assets. \n\nExample usage:\n\n```\nimport { getAssets } from 'zoo'\n\nconst account = '0x123456789abcdef'\nconst assets = await getAssets(account)\n\nconsole.log(assets)\n// [\n// { name: 'Asset 1', quantity: 10, network: 'Mainnet' },\n// { name: 'Asset 2', quantity: 5, network: 'Matic' },\n// { name: 'Asset 3', quantity: 2, network: 'BSC' },\n// ...\n// ]\n```\n## Questions: \n 1. What is the purpose of the `fetcher` function?\n- The `fetcher` function is used to fetch asset data from the Zerion API using a WebSocket connection.\n\n2. What is the purpose of the `getAssets` function?\n- The `getAssets` function uses the `fetcher` function to retrieve asset data for a given account on multiple networks (Mainnet, Matic, and BSC) and returns an array of asset objects.\n\n3. What external dependencies does this code rely on?\n- This code relies on the `lodash` library for the `uniq` function and the `@lingui/macro` library for the `t` function.","metadata":{"source":".autodoc/docs/markdown/core/src/services/zerion/fetchers.md"}}],["1152",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/services/zerion/hooks.ts)\n\nThe code above is a TypeScript module that exports a function called `useAssets`. This function utilizes the `useSWR` hook from the `swr` library and the `useActiveWeb3React` hook from a custom `hooks` module. The purpose of this function is to fetch and return a user's assets from the `getAssets` function in the `fetchers` module.\n\nThe `useAssets` function takes an optional `swrConfig` parameter, which is a configuration object for the `useSWR` hook. If no configuration is provided, the default `useSWR` configuration is used. The function then calls the `useActiveWeb3React` hook to retrieve the current user's account information. If there is an account, the function calls `getAssets` with the account as a parameter and passes the result to the `useSWR` hook. The `useSWR` hook then caches the result and returns it to the `useAssets` function.\n\nThis function can be used in a larger project to retrieve a user's assets and display them in a user interface. For example, a decentralized exchange application could use this function to display a user's token balances and other assets. Here is an example of how this function could be used in a React component:\n\n```\nimport { useAssets } from './path/to/useAssets'\n\nfunction AssetList() {\n const assets = useAssets()\n\n if (!assets) {\n return \n
\n ))}\n Pool ID: {pool.id}
\nAssets: {pool.pair}
\nAllocation: {pool.allocPoint}
\nBalance: {pool.balance}
\nLoading...
\n }\n\n return (\n - \n {assets.map(asset => (\n
- {asset.name}: {asset.balance} \n ))}\n
\n
\n )\n}\n```\n## Questions: \n 1. What does this code do?\n- This code exports a React component called `Updater` that listens for changes in the block number of a specified blockchain and updates the block number in the Redux store.\n\n2. What are the dependencies of this code?\n- This code depends on several React hooks (`useCallback`, `useEffect`, `useState`) and custom hooks (`useActiveWeb3React`, `useDebounce`, `useIsWindowVisible`) from other files in the project. It also imports an action creator function (`updateBlockNumber`) from another file.\n\n3. What is the purpose of the `useDebounce` hook in this code?\n- The `useDebounce` hook is used to debounce the state updates of the `Updater` component. This means that the state updates will only be propagated to the Redux store after a certain amount of time has passed since the last update, which can help reduce unnecessary re-renders and improve performance.","metadata":{"source":".autodoc/docs/markdown/core/src/state/application/updater.md"}}],["1158",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/bentobox/hooks.ts)\n\nThe code is a TypeScript module that exports three functions: `useBentoBalances`, `useBentoBalance`, and `useBentoMasterContractAllowed`. The module imports several dependencies, including `@zoolabs/zdk`, `react`, `@ethersproject/bignumber`, and `@ethersproject/address`. \n\nThe `useBentoBalances` function returns an array of `BentoBalance` objects. Each `BentoBalance` object represents a token balance in the BentoBox smart contract. The function retrieves the user's account and the chain ID from the `useActiveWeb3React` hook. It then uses the `useAllTokens` hook to get a list of all tokens and the `useBoringHelperContract` hook to get the BoringHelper smart contract instance. The function calls the `getBalances` and `getUIInfo` methods of the BoringHelper contract to retrieve the user's token balances and the exchange rates of the tokens in USD. The function then calculates the USD value of each token balance and returns an array of `BentoBalance` objects that have a non-zero balance or BentoBox balance.\n\nThe `useBentoBalance` function returns an object that represents the user's balance of a specific token in the BentoBox smart contract. The function takes a `tokenAddress` parameter and retrieves the user's account from the `useActiveWeb3React` hook. It then uses the `useBoringHelperContract`, `useBentoBoxContract`, and `useContract` hooks to get the BoringHelper, BentoBox, and token smart contract instances, respectively. The function calls the `getBalances` method of the BoringHelper contract to retrieve the user's token balance in the BentoBox contract. The function then calculates the user's balance of the token in the BentoBox contract and returns an object that has the balance value and the number of decimals.\n\nThe `useBentoMasterContractAllowed` function returns a boolean value that indicates whether the user has approved a master contract to interact with the BentoBox smart contract. The function takes `masterContract` and `user` parameters and uses the `useBentoBoxContract` hook to get the BentoBox smart contract instance. The function calls the `masterContractApproved` method of the BentoBox contract to check if the user has approved the master contract to interact with the BentoBox contract. The function returns `true` if the user has approved the master contract, `false` if the user has not approved the master contract, and `undefined` if the function is still loading. \n\nThese functions are used to retrieve and display the user's token balances and BentoBox balances in the Zoo project. The `useBentoBalances` function is used to display the user's token balances in the BentoBox contract, while the `useBentoBalance` function is used to display the user's balance of a specific token in the BentoBox contract. The `useBentoMasterContractAllowed` function is used to check if the user has approved a master contract to interact with the BentoBox contract. These functions are essential for the Zoo project to provide users with accurate and up-to-date information about their token balances and BentoBox balances.\n## Questions: \n 1. What is the purpose of the `useBentoBalances` function?\n- The `useBentoBalances` function returns an array of `BentoBalance` objects that represent the balances of all tokens held in the user's BentoBox. \n\n2. What is the `useBentoBalance` function used for?\n- The `useBentoBalance` function returns the balance of a specific token held in the user's BentoBox, given the token's address. \n\n3. What is the `useBentoMasterContractAllowed` function used for?\n- The `useBentoMasterContractAllowed` function checks whether a given master contract is approved by the user to interact with their BentoBox. It returns a boolean value indicating whether the approval is granted or not.","metadata":{"source":".autodoc/docs/markdown/core/src/state/bentobox/hooks.md"}}],["1159",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/bridge/action.ts)\n\nThis code is a module that exports several Redux actions for a project called zoo. Redux is a state management library for JavaScript applications. The actions in this module are used to update the state of the application in response to user interactions with a swapping feature. \n\nThe `createAction` function is imported from the `@reduxjs/toolkit` package and is used to create Redux actions. Each action has a unique type and a payload that can be used to update the state of the application. \n\nThe `fetchTokens` action is used to fetch tokens from different blockchain networks. The payload is an object that maps each chain ID to an array of tokens. The `fetchBalances` action is used to fetch the balances of tokens for each chain ID. The payload is an object that maps each chain ID to an array of balances. \n\nThe `updateCurrentTrade` action is used to update the current trade being made by the user. The payload is an object that contains the `from` and `to` tokens. The `updateCurrentSelectSide` action is used to update the current side of the trade being selected by the user. The payload is a string that can be either `\"from\"` or `\"to\"`. \n\nThe `updateCurrentAmount` action is used to update the current amount of tokens being swapped. The payload is an object that contains the token being swapped and the amount. The `updateCurrentBalances` action is used to update the current balances of tokens for each chain ID. The payload is an object that contains the token being updated and the new balance. \n\nFinally, the `updateActiveChains` action is used to update the active chains for the swapping feature. The payload is an object that contains the selected chains. \n\nOverall, this module provides a set of Redux actions that can be used to manage the state of the swapping feature in the zoo project. Here is an example of how one of these actions can be used:\n\n```\nimport { useDispatch } from \"react-redux\";\nimport { updateCurrentAmount } from \"zoo\";\n\nfunction MyComponent() {\n const dispatch = useDispatch();\n\n function handleAmountChange(token, amount) {\n dispatch(updateCurrentAmount({ token, amount }));\n }\n\n return (\n // render component\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `createAction` function being imported from \"@reduxjs/toolkit\"?\n- The `createAction` function is used to create Redux actions with a specific type and payload.\n\n2. What is the significance of the `Field` enum?\n- The `Field` enum defines two constants, \"INPUT\" and \"OUTPUT\", which are used to identify the input and output fields in the swap feature.\n\n3. What is the relationship between the `fetchTokens` and `fetchBalances` actions?\n- Both `fetchTokens` and `fetchBalances` actions are used to fetch data related to tokens and balances, but `fetchTokens` fetches token data for all supported chains while `fetchBalances` fetches balance data for a specific chain.","metadata":{"source":".autodoc/docs/markdown/core/src/state/bridge/action.md"}}],["1160",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/bridge/reducer.ts)\n\nThis code defines a Redux reducer for a project called \"Swap\". The reducer manages the state of the Swap application, which allows users to swap tokens on different blockchain networks. \n\nThe `SwapState` interface defines the shape of the state object, which includes properties such as `loading`, `tokens`, `currentTrade`, `error`, `currentSelectSide`, `currentAmount`, `balances`, and `activeChains`. These properties represent various aspects of the application's state, such as whether data is currently being loaded, which tokens are available for swapping, the current trade being executed, any errors that occur, and the current balances and amounts being swapped.\n\nThe `initialState` object defines the initial state of the application, which includes default values for each of the state properties. For example, the `currentAmount` property is initialized with a default value of `{ to: 0, from: 0.1 }`, which represents the amount of tokens being swapped from and to the selected tokens.\n\nThe `createReducer` function from the `@reduxjs/toolkit` library is used to create the reducer function. The `builder` argument is used to define the reducer's behavior for each action type. For example, the `addCase` method is used to define how the reducer should update the state in response to the `loading` action, which sets the `loading` property to the value of the `action.payload`.\n\nOverall, this code defines the state management for the Swap application, which allows users to swap tokens on different blockchain networks. The reducer manages the state of the application, including loading data, updating token and balance information, and executing trades. The reducer can be used in conjunction with other parts of the application, such as UI components and middleware, to create a fully functional Swap application.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines the initial state and a reducer function for a Redux store related to a swapping feature for tokens on different chains.\n\n2. What are the types of data that this code is handling?\n- This code is handling various types of data such as tokens, balances, errors, and chain IDs, which are defined in the imported `types` module.\n\n3. What actions can trigger updates to the state in this code?\n- There are several actions defined in the imported `action` module that can trigger updates to the state, such as `loading`, `fetchTokens`, `updateCurrentTrade`, `updateError`, `updateCurrentSelectSide`, `updateCurrentAmount`, `fetchBalances`, `updateCurrentBalances`, and `updateActiveChains`. These actions are handled by the reducer function defined in this code.","metadata":{"source":".autodoc/docs/markdown/core/src/state/bridge/reducer.md"}}],["1161",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/bridge/types.ts)\n\nThis file contains a set of interfaces that define the structure of various objects used in the zoo project. \n\nThe `Proposal` interface defines the structure of a proposal object, which includes information such as the proposal type, status, and description, as well as the votes and vote count associated with the proposal. This interface also includes information about the token being used in the proposal, such as its address, decimal value, and IPFS hash.\n\nThe `Token` interface defines the structure of a token object, which includes information such as the token's address, decimal value, name, and symbol. This interface also includes a boolean value indicating whether the token is compliant with the EIP-2612 standard, as well as a URI for the token's logo.\n\nThe `CurrentTrade` interface defines the structure of a trade object, which includes information about the tokens being traded, such as their addresses and decimal values.\n\nThe `TokenList` interface defines the structure of a token list object, which includes information about a list of tokens, such as the name of the list, the timestamp of its creation, and the version of the list. This interface also includes an array of `Token` objects, as well as optional keywords, tags, and a URI for the list's logo.\n\nThe `Version` interface defines the structure of a version object, which includes information about the major, minor, and patch versions of a software release.\n\nThe `Tags` interface defines the structure of a tags object, which includes information about a set of tags associated with a token list.\n\nThe `Balance` interface defines the structure of a balance object, which includes information about the balance of a particular token for a given user.\n\nThe `MoralisError` interface defines the structure of an error object that may be returned by the Moralis API, which is used in the zoo project. This interface includes information such as the error code, description, and any metadata associated with the error.\n\nThe `MetaError` interface defines the structure of a metadata object associated with a `MoralisError`.\n\nFinally, the `TokenSelect` and `ChainSelect` interfaces define the structure of objects used to select tokens and chains, respectively, in the zoo project.\n\nOverall, these interfaces provide a standardized way of defining the structure of various objects used in the zoo project, which can help to ensure consistency and interoperability across different parts of the project. For example, the `Proposal` interface can be used to define the structure of proposal objects in both the front-end and back-end components of the project, allowing for easier communication and data sharing between these components.\n## Questions: \n 1. What is the purpose of the `BigNumber` import and how is it used in this code?\n- The `BigNumber` import is used to represent large numbers in a precise manner. It is used in the `Proposal` interface to define the `votes` and `voteCount` properties as arrays of `BigNumber` objects.\n\n2. What is the difference between the `Token` and `TokenList` interfaces?\n- The `Token` interface defines the properties of a single token, while the `TokenList` interface defines a list of tokens along with metadata such as name, version, and keywords.\n\n3. What is the `MoralisError` interface used for?\n- The `MoralisError` interface defines the structure of an error object that can be returned by the Moralis API. It includes properties such as `statusCode`, `error`, `description`, and `meta` to provide information about the error.","metadata":{"source":".autodoc/docs/markdown/core/src/state/bridge/types.md"}}],["1162",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/burn/actions.ts)\n\nThis code is a module that exports a single function called `typeInput`. The function is created using the `createAction` function from the `@reduxjs/toolkit` library. The `typeInput` function takes an object with two properties as its argument: `field` and `typedValue`. The `field` property is an enum that defines four possible values: `LIQUIDITY_PERCENT`, `LIQUIDITY`, `CURRENCY_A`, and `CURRENCY_B`. The `typedValue` property is a string that represents the user's input.\n\nThe purpose of this code is to create an action that can be dispatched to a Redux store. The action represents the user typing input into a form field. The `field` property specifies which field the user is typing into, and the `typedValue` property contains the user's input.\n\nThis code is likely used in a larger project that uses Redux for state management. The `typeInput` function is likely dispatched when the user types input into a form field. The Redux store would then update its state based on the action that was dispatched.\n\nHere is an example of how this code might be used in a React component:\n\n```\nimport { useDispatch } from 'react-redux';\nimport { typeInput, Field } from './zoo';\n\nfunction MyComponent() {\n const dispatch = useDispatch();\n\n function handleInputChange(field, value) {\n dispatch(typeInput({ field, typedValue: value }));\n }\n\n return (\n \n handleInputChange(Field.CURRENCY_A, e.target.value)} />\n
\n );\n}\n```\n\nIn this example, the `handleInputChange` function is called whenever the user types input into the text field. It dispatches the `typeInput` action with the `CURRENCY_A` field and the user's input as arguments. The Redux store would then update its state based on this action.\n## Questions: \n 1. What is the purpose of the `Field` enum?\n - The `Field` enum is used to define the different fields that can be updated in the `typeInput` action.\n\n2. What is the `typeInput` action used for?\n - The `typeInput` action is used to update the value of a specific field (defined by the `Field` enum) with a new typed value.\n\n3. What library is being used for the `createAction` function?\n - The `createAction` function is being imported from the `@reduxjs/toolkit` library.","metadata":{"source":".autodoc/docs/markdown/core/src/state/burn/actions.md"}}],["1163",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/burn/hooks.ts)\n\nThe code is a module that exports two React hooks: `useDerivedBurnInfo` and `useBurnActionHandlers`. These hooks are used to manage the state of a burn action in a decentralized exchange (DEX) application. \n\nThe `useDerivedBurnInfo` hook takes two arguments, `currencyA` and `currencyB`, which are instances of the `Currency` class from the `@zoolabs/zdk` library. It returns an object with four properties: `pair`, `parsedAmounts`, `error`, and `userLiquidity`. \n\nThe `pair` property is an instance of the `Pair` class from the `@zoolabs/zdk` library, which represents a pair of tokens in the DEX. The `parsedAmounts` property is an object that contains four properties: `LIQUIDITY_PERCENT`, `LIQUIDITY`, `CURRENCY_A`, and `CURRENCY_B`. These properties represent the parsed amounts of liquidity, token A, and token B that the user wants to burn. The `error` property is a string that represents any error that occurred during the parsing of the user input. The `userLiquidity` property is an instance of the `CurrencyAmount` class from the `@zoolabs/zdk` library, which represents the amount of liquidity tokens that the user has in their wallet.\n\nThe `useBurnActionHandlers` hook returns an object with one property: `onUserInput`. This property is a callback function that takes two arguments, `field` and `typedValue`, and dispatches an action to update the state of the burn action in the Redux store.\n\nThe `useDerivedBurnInfo` hook uses several other hooks to derive its state. The `useActiveWeb3React` hook is used to get the current Ethereum account and chain ID. The `useLingui` hook is used to get the current language for localization. The `useTokenBalances` hook is used to get the token balances for the current account. The `useTotalSupply` hook is used to get the total supply of the liquidity token for the current pair. The `useV2Pair` hook is used to get the pair instance for the current pair of tokens.\n\nThe `useDerivedBurnInfo` hook calculates the parsed amounts of liquidity, token A, and token B based on the user input and the current state of the DEX. It also calculates any errors that occurred during the parsing of the user input.\n\nThe `useBurnActionHandlers` hook dispatches an action to update the state of the burn action in the Redux store based on the user input.\n\nOverall, these hooks are used to manage the state of a burn action in a DEX application. They use several other hooks to derive their state and dispatch actions to update the Redux store.\n## Questions: \n 1. What is the purpose of the `useDerivedBurnInfo` function?\n- The `useDerivedBurnInfo` function is used to derive information related to burning tokens in a liquidity pool, including the liquidity pair, parsed amounts, error messages, and user liquidity.\n\n2. What is the significance of the `Field` enum?\n- The `Field` enum is used to identify the different fields that can be updated by the user when burning tokens in a liquidity pool, including liquidity percent, liquidity amount, currency A amount, and currency B amount.\n\n3. What is the role of the `useBurnActionHandlers` function?\n- The `useBurnActionHandlers` function returns an object with a single function `onUserInput`, which is used to dispatch an action to update the `typedValue` of a specific `Field` when the user inputs a new value.","metadata":{"source":".autodoc/docs/markdown/core/src/state/burn/hooks.md"}}],["1164",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/burn/reducer.ts)\n\nThis code is a TypeScript module that exports a Redux reducer function for the `BurnState` slice of the store in the larger project. The `BurnState` interface defines the shape of the state object, which has two properties: `independentField` and `typedValue`. The `initialState` object sets the initial values for these properties.\n\nThe `createReducer` function from the `@reduxjs/toolkit` package is used to create the reducer function. It takes the initial state object and a callback function that defines how the state should be updated in response to actions. The callback function is created using the `builder` object, which has a method `addCase` that takes an action type and a reducer function. The reducer function takes the current state and the action payload as arguments, and returns the new state object.\n\nIn this case, the action type is `typeInput`, which is presumably dispatched when the user types into an input field. The payload of the action is an object with two properties: `field` and `typedValue`. The reducer function updates the `independentField` and `typedValue` properties of the state object with the corresponding values from the action payload.\n\nThis reducer function can be used in conjunction with other reducer functions to create the overall Redux store for the project. For example, the `BurnState` slice of the store might be used to manage user input for a form that allows the user to burn tokens. The `independentField` property might represent the type of token being burned, and the `typedValue` property might represent the amount of tokens being burned.\n\nHere is an example of how this reducer function might be used in a Redux store:\n\n```typescript\nimport { configureStore } from '@reduxjs/toolkit'\nimport burnReducer from './burnReducer'\n\nconst store = configureStore({\n reducer: {\n burn: burnReducer,\n // other reducers...\n },\n})\n\nexport default store\n```\n\nThis code creates a Redux store with the `burn` slice of the state managed by the `burnReducer` function. Other slices of the state can be managed by other reducer functions. The `store` object can be used to dispatch actions and retrieve the current state of the store.\n## Questions: \n 1. What is the purpose of the `createReducer` function from `@reduxjs/toolkit` being imported?\n- The `createReducer` function is used to create a Redux reducer function that can handle actions and update the state of the application accordingly.\n\n2. What is the `BurnState` interface used for?\n- The `BurnState` interface defines the shape of the state object for the `zoo` project's \"burn\" feature, which includes an `independentField` property of type `Field` and a `typedValue` property of type `string`.\n\n3. What action is being handled in the reducer function?\n- The reducer function is handling the `typeInput` action, which takes in a `field` and `typedValue` payload and updates the `independentField` and `typedValue` properties of the state object accordingly.","metadata":{"source":".autodoc/docs/markdown/core/src/state/burn/reducer.md"}}],["1165",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/claim/hooks.ts)\n\nThe code in this file is part of the larger zoo project and contains functions that allow users to claim SUSHI tokens from a Merkle distributor contract. The code imports various libraries and hooks from the project, including `@zoolabs/zdk`, `@ethersproject/address`, `react`, and others. \n\nThe `fetchClaim` function takes an Ethereum address and a chain ID as input and returns a promise that resolves to the user's claim data or null if the address is invalid. The function fetches the Merkle root from a constant file and uses it to retrieve the claim data from the distributor contract. The claim data includes the user's index, amount, and proof. The function caches the promise for each address and chain ID combination to avoid redundant requests.\n\nThe `useUserClaimData` hook takes an Ethereum address as input and returns the user's claim data or null if the data is not available. The hook uses the `fetchClaim` function to fetch the claim data and stores it in state. The hook updates the state whenever the address or chain ID changes.\n\nThe `useUserHasAvailableClaim` hook takes an Ethereum address as input and returns a boolean indicating whether the user has an available claim. The hook uses the `useUserClaimData` hook to retrieve the user's claim data and the `useMerkleDistributorContract` hook to retrieve the distributor contract. The hook uses the `useSingleCallResult` hook to check whether the user has claimed their tokens.\n\nThe `useUserUnclaimedAmount` hook takes an Ethereum address as input and returns the user's unclaimed SUSHI tokens. The hook uses the `useUserClaimData` and `useUserHasAvailableClaim` hooks to retrieve the user's claim data and check whether the user has an available claim. The hook uses the `SUSHI` token from the project's configuration file to calculate the amount of unclaimed tokens.\n\nThe `useClaimCallback` hook takes an Ethereum address as input and returns a function that allows the user to claim their SUSHI tokens. The hook uses the `useActiveWeb3React`, `useUserClaimData`, `useUserUnclaimedAmount`, `useTransactionAdder`, and `useMerkleDistributorContract` hooks to retrieve the user's claim data, unclaimed tokens, and the distributor contract. The hook estimates the gas limit for the claim transaction and adds the transaction to the project's transaction list.\n\nOverall, this file contains functions and hooks that allow users to claim SUSHI tokens from a Merkle distributor contract. These functions and hooks are used in other parts of the project to provide users with information about their claims and allow them to claim their tokens.\n## Questions: \n 1. What is the purpose of the `fetchClaim` function?\n- The `fetchClaim` function fetches the claim data for a given address and chain ID from a merkle root and returns it as a promise.\n\n2. What is the purpose of the `useUserHasAvailableClaim` function?\n- The `useUserHasAvailableClaim` function checks if a user is in the merkle root blob and has not yet claimed UNI.\n\n3. What is the purpose of the `useClaimCallback` function?\n- The `useClaimCallback` function returns a callback function that can be used to claim SUSHI for a user with unclaimed rewards.","metadata":{"source":".autodoc/docs/markdown/core/src/state/claim/hooks.md"}}],["1166",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/create/actions.ts)\n\nThis code defines several Redux actions related to currency selection and input in a project called zoo. The `createAction` function is imported from the `@reduxjs/toolkit` library, which simplifies the process of creating Redux actions and reducers.\n\nThe `Field` enum defines two possible values for the `field` property that is used in several of the actions: `COLLATERAL` and `ASSET`. These likely refer to different types of assets that can be traded or managed within the larger project.\n\nThe `selectCurrency` action takes an object with two properties: `field` and `currencyId`. This action is likely dispatched when a user selects a currency from a dropdown or other UI element. The `field` property indicates whether the selected currency is for collateral or an asset, and the `currencyId` property is a string identifier for the selected currency.\n\nThe `switchCurrencies` action takes no arguments and is likely dispatched when a user clicks a button to swap the selected currencies. This action may trigger a UI update to reflect the new currency selections.\n\nThe `typeInput` action takes an object with two properties: `field` and `typedValue`. This action is likely dispatched when a user types a value into an input field related to a particular currency. The `field` property indicates which currency the input is for, and the `typedValue` property is the string value that the user has typed.\n\nThe `replaceCreateState` action takes an object with several optional properties: `field`, `typedValue`, `collateralId`, and `assetId`. This action is likely dispatched when a user submits a form or completes some other action related to creating a new asset or trade. The `field` and `typedValue` properties likely correspond to the user's input for the asset or trade, while the `collateralId` and `assetId` properties may be used to specify the selected currencies for the asset or trade.\n\nOverall, these actions likely form part of a larger Redux store that manages the state of the zoo project's currency-related functionality. Other parts of the project may dispatch these actions or listen for changes to the store in order to update the UI or perform other actions. For example, a component that displays a list of available currencies may listen for changes to the `selectCurrency` action in order to update its display.\n## Questions: \n 1. What is the purpose of the `createAction` function being imported from `@reduxjs/toolkit`?\n - The `createAction` function is used to create Redux actions with a specific type and payload structure.\n2. What is the significance of the `Field` enum and how is it used in the code?\n - The `Field` enum defines two possible values for the `field` property in the payloads of the `selectCurrency`, `typeInput`, and `replaceCreateState` actions. It is used to ensure that the correct field is being targeted by these actions.\n3. What is the difference between the `replaceCreateState` action and the other actions defined in the code?\n - The `replaceCreateState` action has a more complex payload structure than the other actions, as it includes optional `collateralId` and `assetId` properties. It is used to completely replace the state of the `create` slice of the Redux store with a new state object that includes the specified values.","metadata":{"source":".autodoc/docs/markdown/core/src/state/create/actions.md"}}],["1167",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/create/hook.ts)\n\nThe code is a module that exports three React hooks that can be used in the larger project. The module imports several functions and objects from other modules in the project. \n\nThe first hook, `useCreateState`, returns the `create` state from the Redux store. This hook can be used to access the current state of the create feature in the project. \n\nThe second hook, `useCreateActionHandlers`, returns an object with three functions that dispatch Redux actions to update the `create` state. The `onCurrencySelection` function takes a `Field` and a `Currency` object and dispatches a `selectCurrency` action with the selected currency and field. The `onSwitchTokens` function dispatches a `switchCurrencies` action to switch the selected collateral and asset tokens. The `onUserInput` function takes a `Field` and a string value and dispatches a `typeInput` action with the typed value and field. These functions can be used to handle user input in the create feature. \n\nThe third hook, `useDerivedCreateInfo`, returns an object with the selected collateral and asset currencies and an input error message. This hook uses other hooks from the project to derive the selected currencies from the `create` state and check for input errors. If there is no account connected, the input error is set to 'Connect Wallet'. If there is no selected collateral or asset currency, the input error is set to 'Select a collateral token' or 'Select an asset token', respectively. This hook can be used to display the selected currencies and input errors in the create feature. \n\nOverall, this module provides hooks that can be used to access and update the `create` state and derive information from it. These hooks can be used in the larger project to implement the create feature and handle user input. \n\nExample usage:\n\n```\nimport { useCreateState, useCreateActionHandlers, useDerivedCreateInfo } from './createHooks'\n\nfunction CreateFeature() {\n const { currencies, inputError } = useDerivedCreateInfo()\n const { onCurrencySelection, onSwitchTokens, onUserInput } = useCreateActionHandlers()\n const { independentField } = useCreateState()\n\n // render the create feature UI with the selected currencies and input error\n // handle user input with the action handlers\n}\n```\n## Questions: \n 1. What is the purpose of this code file?\n- This code file contains functions related to creating and handling trade orders in the zoo project.\n\n2. What external libraries or dependencies are being used in this code?\n- The code imports various functions and types from external libraries such as '@zoolabs/zdk', '@lingui/macro', and 'react'.\n\n3. What is the purpose of the `useDerivedCreateInfo` function?\n- The `useDerivedCreateInfo` function returns an object containing information about the selected collateral and asset currencies for a trade order, as well as any input errors. It uses various hooks and functions to derive this information from the current state of the application.","metadata":{"source":".autodoc/docs/markdown/core/src/state/create/hook.md"}}],["1168",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/create/reducer.ts)\n\nThis code defines a Redux reducer for managing the state of a form used to create a new asset. The state is represented by an object of type `CreateState`, which has four properties: `independentField`, `typedValue`, `collateral`, and `asset`. The `independentField` property is an enum value indicating which field in the form is currently being edited independently of the other field. The `typedValue` property is a string representing the user's input in the currently active field. The `collateral` and `asset` properties are objects with a single property `currencyId`, which is a string representing the ID of the currency selected for that field.\n\nThe reducer handles four types of actions: `replaceCreateState`, `selectCurrency`, `switchCurrencies`, and `typeInput`. The `replaceCreateState` action is dispatched when the user submits the form, and its payload contains the values of all four form fields. The reducer updates the state to reflect these values. The `selectCurrency` action is dispatched when the user selects a currency from a dropdown menu in one of the form fields. The reducer updates the state to reflect the new currency selection. If the user selects the same currency for both fields, the reducer swaps the order of the fields. The `switchCurrencies` action is dispatched when the user clicks a button to swap the currencies between the two fields. The reducer updates the state to reflect this change. The `typeInput` action is dispatched when the user types a value into one of the form fields. The reducer updates the state to reflect the new value.\n\nThis reducer is used in conjunction with other reducers and middleware to manage the overall state of the application. For example, the state managed by this reducer might be used to populate a preview of the new asset on the screen, or to enable/disable a \"submit\" button based on whether all required fields have been filled out. Here is an example of how this reducer might be used in a React component:\n\n```jsx\nimport { useDispatch, useSelector } from 'react-redux'\nimport { CreateState, selectCurrency, switchCurrencies, typeInput } from './zoo'\n\nfunction CreateAssetForm() {\n const dispatch = useDispatch()\n const createAssetState = useSelector((state: { createAsset: CreateState }) => state.createAsset)\n\n function handleCurrencySelect(field: Field, currencyId: string) {\n dispatch(selectCurrency({ field, currencyId }))\n }\n\n function handleSwitchCurrencies() {\n dispatch(switchCurrencies())\n }\n\n function handleTypeInput(field: Field, typedValue: string) {\n dispatch(typeInput({ field, typedValue }))\n }\n\n return (\n \n )\n}\n```\n## Questions: \n 1. What is the purpose of the `CreateState` interface and what fields does it contain?\n- The `CreateState` interface defines the shape of the state object for the `zoo` project's create feature. It contains fields for `independentField`, `typedValue`, `collateral`, and `asset`, each with their own `currencyId` property.\n\n2. What is the purpose of the `createReducer` function and how is it used in this code?\n- The `createReducer` function is used to create a Redux reducer function for the `zoo` project's create feature. It takes an initial state object and a builder function that defines how the state should be updated in response to different actions.\n\n3. What is the purpose of the `switchCurrencies` case in the reducer and what does it do?\n- The `switchCurrencies` case in the reducer is used to handle the action of switching the `collateral` and `asset` currencies in the `zoo` project's create feature. It updates the state object by swapping the `currencyId` properties of the `collateral` and `asset` fields, and also updates the `independentField` property to reflect the new active field.","metadata":{"source":".autodoc/docs/markdown/core/src/state/create/reducer.md"}}],["1169",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/drop/action.ts)\n\nThis code is a module that exports a single function called `addDrops`. The function is created using the `createAction` method from the `@reduxjs/toolkit` library. The function takes an array of `Drop` objects as its argument and returns an action object with a type of \"zoo/addDrops\" and a payload of the array of `Drop` objects.\n\nThe purpose of this code is to provide a Redux action creator for adding drops to the zoo. The `Drop` type is likely defined elsewhere in the project and represents some kind of object that can be added to the zoo. The `addDrops` action can be dispatched by a Redux store to update the state of the zoo with the new drops.\n\nHere is an example of how this code might be used in a larger project:\n\n```typescript\nimport { useDispatch } from \"react-redux\";\nimport { addDrops } from \"zoo\";\n\nfunction AddDropsButton({ drops }: { drops: Drop[] }) {\n const dispatch = useDispatch();\n\n function handleClick() {\n dispatch(addDrops(drops));\n }\n\n return ;\n}\n```\n\nIn this example, a React component called `AddDropsButton` is defined. The component takes an array of `Drop` objects as a prop and renders a button. When the button is clicked, the `addDrops` action is dispatched with the array of drops as its payload. The Redux store will then update the state of the zoo with the new drops.\n## Questions: \n 1. What is the purpose of the `createAction` function from \"@reduxjs/toolkit\" being imported?\n- The `createAction` function is used to create an action creator function that returns an action object with a specific type and payload.\n\n2. What is the significance of the \"zoo/addDrops\" string being passed as an argument to the `createAction` function?\n- The \"zoo/addDrops\" string is used as the type of the action object that is returned by the action creator function. It identifies the specific action being dispatched.\n\n3. What is the `Drop` type being imported from \"types\" and how is it used in this code?\n- The `Drop` type is being imported from a module named \"types\". It is used as the generic type argument for the `createAction` function, specifying the type of the payload that the action creator function will accept.","metadata":{"source":".autodoc/docs/markdown/core/src/state/drop/action.md"}}],["1170",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/drop/hooks.tsx)\n\nThe code is a module that exports two functions: `getMetaData` and `useGetDrops`. \n\nThe `getMetaData` function is an asynchronous function that takes a metadataURI and an optional `from` parameter. It uses the `axios` library to make a GET request to the specified URI and returns the response data. If there is an error, it logs the error message along with the `from` and `metadataURI` parameters to the console.\n\nThe `useGetDrops` function is a React hook that returns a memoized callback function. It uses several other hooks and functions from the `hooks`, `functions`, and `state` modules. When the callback function is called, it retrieves information about all the drops from the `zooKeeper` contract and maps over them to retrieve information about each egg in the drop. It then uses the `getMetaData` function to retrieve metadata for each egg and creates an `AvailableEgg` object for each egg. Finally, it creates a `Drop` object for each drop and dispatches an `addDrops` action to the Redux store with an array of `Drop` objects. \n\nThis function is used to retrieve information about all the drops and eggs in the Zoo project and store it in the Redux store. This information can then be used by other components in the project to display information about drops and eggs to the user. \n\nExample usage:\n\n```\nimport { useGetDrops } from 'path/to/zoo';\n\nfunction MyComponent() {\n const getDrops = useGetDrops();\n\n useEffect(() => {\n getDrops();\n }, [getDrops]);\n\n // rest of component code\n}\n```\n## Questions: \n 1. What is the purpose of the `useGetDrops` function?\n- The `useGetDrops` function is used to retrieve information about drops and their associated eggs from the blockchain and IPFS, and then dispatches the information to the Redux store.\n\n2. What is the purpose of the `getMetaData` function?\n- The `getMetaData` function is used to retrieve metadata associated with an egg from IPFS, given its metadata URI.\n\n3. What is the purpose of the `convertIpfsUrl` function?\n- The `convertIpfsUrl` function is used to convert an IPFS URI to a URL that can be used to retrieve data from IPFS.","metadata":{"source":".autodoc/docs/markdown/core/src/state/drop/hooks.md"}}],["1171",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/drop/reducer.ts)\n\nThis code is a Redux reducer function that handles the state updates for the \"drops\" feature in the larger zoo project. The \"drops\" feature likely refers to the eggs or other items that animals in the zoo may produce or drop. \n\nThe code imports the \"addDrops\" action from another file, which is likely dispatched when a new drop is added to the zoo. It also imports the \"createReducer\" function from the \"@reduxjs/toolkit\" library, which simplifies the process of creating Redux reducers.\n\nThe reducer function initializes the state with an empty array for the \"drops\" property. When the \"addDrops\" action is dispatched, the reducer updates the state by setting the \"drops\" property to the payload of the action. The payload is likely an array of new drops that were added to the zoo.\n\nHere is an example of how this reducer function may be used in the larger zoo project:\n\n```javascript\nimport { createStore } from \"redux\";\nimport dropsReducer from \"./reducers/drops\";\n\nconst store = createStore(dropsReducer);\n\n// Dispatch an action to add new drops to the zoo\nstore.dispatch({\n type: \"addDrops\",\n payload: [\n { type: Drop.CHICKEN_EGG, animal: \"chicken\" },\n { type: Drop.COW_MILK, animal: \"cow\" },\n ],\n});\n\n// Get the current state of the drops feature\nconst dropsState = store.getState().drops;\nconsole.log(dropsState); // [{ type: \"chicken_egg\", animal: \"chicken\" }, { type: \"cow_milk\", animal: \"cow\" }]\n```\n\nIn this example, the \"createStore\" function from the Redux library is used to create a store with the \"dropsReducer\" function as the root reducer. An action is then dispatched to add two new drops to the zoo, and the current state of the drops feature is logged to the console.\n## Questions: \n 1. What is the purpose of the `addDrops` function imported from \"./action\"?\n - The `addDrops` function is likely an action creator that creates an action object with a payload of drops to be added to the state.\n\n2. What is the `AvailableEgg` type imported from \"types\"?\n - The `AvailableEgg` type is likely a custom type defined in a separate file that specifies the shape of an object representing an available egg.\n\n3. What does the `createReducer` function from \"@reduxjs/toolkit\" do?\n - The `createReducer` function is a utility function provided by the Redux Toolkit that simplifies the process of creating a Redux reducer by allowing the developer to define reducer logic using a \"builder\" syntax.","metadata":{"source":".autodoc/docs/markdown/core/src/state/drop/reducer.md"}}],["1172",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/global/actions.ts)\n\nThe code above is a TypeScript module that imports a function called `createAction` from the `@reduxjs/toolkit` library. It also exports a function called `updateVersion` that takes no arguments and returns `void`. \n\nThe purpose of this code is to create an action that can be dispatched to update the version of the application. This action is fired once when the app reloads but before the app renders. It allows any updates to be applied to store data loaded from localStorage. \n\nIn the context of the larger project, this code is likely used in conjunction with a Redux store to manage the state of the application. When the app is reloaded, the `updateVersion` action is dispatched to update the version of the application and apply any necessary updates to the store data. \n\nHere is an example of how this code might be used in a Redux store:\n\n```typescript\nimport { configureStore } from '@reduxjs/toolkit'\nimport { updateVersion } from './path/to/updateVersion'\n\nconst store = configureStore({\n reducer: {\n // reducers go here\n },\n preloadedState: {\n // initial state goes here\n },\n})\n\nstore.dispatch(updateVersion())\n```\n\nIn this example, the `updateVersion` action is dispatched when the store is created to ensure that any necessary updates are applied to the store data. \n\nOverall, this code plays an important role in managing the state of the application and ensuring that the store data is up-to-date.\n## Questions: \n 1. What is the purpose of the `createAction` function from `@reduxjs/toolkit` being imported?\n- The `createAction` function is used to create an action creator function that returns an action object with a type and payload.\n\n2. When is the `updateVersion` action creator function fired?\n- The `updateVersion` action creator function is fired once when the app reloads but before the app renders. It allows any updates to be applied to store data loaded from localStorage.\n\n3. What is the payload type of the `updateVersion` action creator function?\n- The `updateVersion` action creator function does not have a payload type as it is defined with `void`. This means that it does not expect any payload to be passed when the action is dispatched.","metadata":{"source":".autodoc/docs/markdown/core/src/state/global/actions.md"}}],["1173",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/hooks.ts)\n\nThis code is a module that exports two hooks, `useAppDispatch` and `useAppSelector`, which are used to interact with the Redux store in the larger project. \n\nThe `useAppDispatch` hook returns a reference to the `dispatch` function provided by the Redux store. This function is used to dispatch actions to the store, which in turn trigger updates to the application state. The `AppDispatch` type is a generic type that is defined in another file, and it specifies the type of the `dispatch` function. \n\nHere is an example of how `useAppDispatch` can be used in a component:\n\n```\nimport { useAppDispatch } from 'path/to/zoo'\n\nconst MyComponent = () => {\n const dispatch = useAppDispatch()\n\n const handleClick = () => {\n dispatch({ type: 'INCREMENT' })\n }\n\n return (\n \n )\n}\n```\n\nIn this example, `useAppDispatch` is used to get a reference to the `dispatch` function, which is then used to dispatch an action when the button is clicked. \n\nThe `useAppSelector` hook returns a function that can be used to select data from the Redux store. The `AppState` type is a generic type that is defined in another file, and it specifies the type of the application state. \n\nHere is an example of how `useAppSelector` can be used in a component:\n\n```\nimport { useAppSelector } from 'path/to/zoo'\n\nconst MyComponent = () => {\n const count = useAppSelector(state => state.count)\n\n return (\n \n Count: {count}\n
\n )\n}\n```\n\nIn this example, `useAppSelector` is used to select the `count` property from the application state, which is then rendered in the component. \n\nOverall, this module provides two hooks that simplify the process of interacting with the Redux store in the larger project.\n## Questions: \n 1. What is the purpose of the `AppDispatch` and `AppState` imports?\n - `AppDispatch` and `AppState` are likely types/interfaces defined in another file that are used to provide type safety for the `useAppDispatch` and `useAppSelector` hooks.\n\n2. What is the difference between `useAppDispatch` and `useAppSelector`?\n - `useAppDispatch` returns a function that can be used to dispatch actions to the Redux store, while `useAppSelector` returns a selector function that can be used to retrieve data from the store.\n\n3. Why is `TypedUseSelectorHook` used instead of `useSelector` directly?\n - `TypedUseSelectorHook` is used to provide type safety for the `useAppSelector` hook by specifying the type of the Redux store state that it should be used with. This helps prevent errors caused by using the wrong type of state.","metadata":{"source":".autodoc/docs/markdown/core/src/state/hooks.md"}}],["1174",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/actions.ts)\n\nThis code is a module that exports three Redux actions: `setStrategy`, `setZapIn`, and `setValues`. These actions are used to update the state of the `inari` slice of the Redux store in the larger project. \n\nThe `setStrategy` action takes a `Strategy` object as its payload and updates the `strategy` property of the `inari` slice in the Redux store. The `Strategy` type is likely defined in the `types` module that is imported at the top of this file. An example usage of this action could be:\n\n```\nimport { setStrategy } from 'zoo'\n\nconst myStrategy = { name: 'aggressive', riskLevel: 'high' }\ndispatch(setStrategy(myStrategy))\n```\n\nThe `setZapIn` action takes a boolean value as its payload and updates the `zapIn` property of the `inari` slice in the Redux store. This property likely controls whether or not a certain feature is enabled in the larger project. An example usage of this action could be:\n\n```\nimport { setZapIn } from 'zoo'\n\ndispatch(setZapIn(true))\n```\n\nThe `setValues` action takes an object with two string properties (`inputValue` and `outputValue`) as its payload and updates the `inputValue` and `outputValue` properties of the `inari` slice in the Redux store. This action is likely used to update the values of certain inputs and outputs in the larger project. An example usage of this action could be:\n\n```\nimport { setValues } from 'zoo'\n\nconst newValues = { inputValue: 'hello', outputValue: 'world' }\ndispatch(setValues(newValues))\n```\n\nOverall, this module provides a simple interface for updating the state of the `inari` slice in the Redux store, which is likely used to control various features and inputs/outputs in the larger project.\n## Questions: \n 1. What is the purpose of the `createAction` function from `@reduxjs/toolkit`?\n- `createAction` is a function from the `@reduxjs/toolkit` library that creates an action creator function for Redux. It takes a type parameter that defines the type of the action payload.\n\n2. What is the `Strategy` type from the `types` module used for?\n- The `Strategy` type is used as the payload type for the `setStrategy` action creator. It likely represents some kind of strategy object or configuration.\n\n3. What is the purpose of the `setZapIn` and `setValues` action creators?\n- `setZapIn` and `setValues` are action creators that likely update some state related to input values or settings in the `inari` slice of the Redux store. The former takes a boolean payload, while the latter takes an object with two string properties.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/actions.md"}}],["1175",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/hooks.tsx)\n\nThe code is a collection of React hooks that are used to manage the state of the Inari DEX (decentralized exchange) in the larger Zoo project. The Inari DEX is a platform that allows users to swap tokens on different blockchains. \n\nThe `useInariState` hook is used to retrieve the current state of the Inari DEX from the Redux store. The `useDerivedInariState` hook is used to derive a new state object from the `useInariState` hook. This is necessary because the `Token` class used in the `tokens` property of the state object is not serializable and cannot be stored in the Redux store. The `useSelectedInariStrategy` hook is used to retrieve the currently selected strategy from the Inari state object. Finally, the `useInariStrategies` hook is used to register all the available strategies for the Inari DEX.\n\nThe `useDerivedInariState` hook uses the `useMemo` hook to create two new `Token` objects from the `inputToken` and `outputToken` properties of the `tokens` object in the Inari state. These `Token` objects are then used to parse the `inputValue` and `outputValue` properties of the Inari state object using the `tryParseAmount` function from the `functions` module. The resulting derived state object is returned by the hook.\n\nThe `useInariStrategies` hook is used to register all the available strategies for the Inari DEX. It uses the `useStakeSushiToBentoStrategy`, `useStakeSushiToCreamStrategy`, and `useStakeSushiToAaveStrategy` hooks to create instances of the different strategies. These instances are then stored in an object and returned by the hook.\n\nOverall, these hooks are used to manage the state of the Inari DEX in the Zoo project. They allow developers to easily retrieve and derive state information, as well as register and retrieve available strategies. Here is an example of how the `useInariState` hook can be used in a component:\n\n```\nimport { useInariState } from './path/to/inari/hooks';\n\nfunction MyComponent() {\n const inariState = useInariState();\n\n // Use inariState to render component\n}\n```\n## Questions: \n 1. What is the purpose of the `useDerivedInariState` hook?\n- The `useDerivedInariState` hook is used to derive complex state values from the `useInariState` hook, which is a Redux selector. It creates new instances of `Token` objects based on the input and output tokens, and parses the input and output values using the `tryParseAmount` function.\n\n2. Why are the strategy hooks not used in the `useDerivedInariState` hook?\n- The strategy hooks are not used in the `useDerivedInariState` hook to avoid an infinite loop. Since the `useDerivedInariState` hook is called every time the state changes, using the strategy hooks could cause an infinite loop of state updates.\n\n3. What is the purpose of the `useInariStrategies` hook?\n- The `useInariStrategies` hook is used to register all available strategies for the Inari state. It creates an object with each strategy as a property, using the strategy ID as the key.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/hooks.md"}}],["1176",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/reducer.ts)\n\nThis code defines a Redux reducer for the InariState slice of the store in the larger project. The InariState represents the state of the Inari DEX, which allows users to swap tokens between different protocols. The reducer handles three actions: setStrategy, setZapIn, and setValues.\n\nThe setStrategy action updates the state with a new strategy object, which contains information about the tokens being swapped and the exchange rate. The reducer updates the state by merging the new strategy object with the existing state, and then updating the general and tokens properties to reflect the new strategy. If the zapIn property is true, the input token and symbol are set to the strategy's input token and symbol, and the output token and symbol are set to the strategy's output token and symbol. Otherwise, the input and output tokens and symbols are swapped. Finally, the inputValue and outputValue properties are reset to empty strings.\n\nThe setZapIn action toggles the zapIn property of the state, which determines whether the user is swapping tokens in or out of the Inari DEX. The reducer updates the state by swapping the input and output symbols and tokens in the general and tokens properties, and swapping the inputValue and outputValue properties.\n\nThe setValues action updates the inputValue and outputValue properties of the state with the user's input and output amounts.\n\nOverall, this reducer is a critical part of the Inari DEX functionality, as it handles the state changes required for swapping tokens between different protocols. It can be used in conjunction with other reducers and actions to build a complete trading interface for the Inari DEX. Here is an example of how this reducer might be used in a React component:\n\n```\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setStrategy, setZapIn, setValues } from './actions';\nimport { InariState } from './types';\n\nfunction InariSwap() {\n const dispatch = useDispatch();\n const inariState = useSelector((state: { inari: InariState }) => state.inari);\n\n const handleStrategyChange = (strategy: any) => {\n dispatch(setStrategy(strategy));\n };\n\n const handleZapInToggle = () => {\n dispatch(setZapIn(!inariState.zapIn));\n };\n\n const handleValuesChange = (inputValue: string, outputValue: string) => {\n dispatch(setValues({ inputValue, outputValue }));\n };\n\n return (\n \n \n handleValuesChange(e.target.value, inariState.outputValue)} />\n handleValuesChange(inariState.inputValue, e.target.value)} />\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code defines the initial state and reducers for the InariState slice of the Redux store for the zoo project. It handles setting the strategy, zap in, and input/output values for the stakeSushiToBentoStrategy.\n\n2. What are the dependencies of this code?\n- This code imports functions and types from other files in the `zoo` project, including `actions.ts`, `types.ts`, and `useStakeSushiToBentoStrategy.ts`. It also imports `createReducer` from the `@reduxjs/toolkit` library.\n\n3. What is the expected shape of the `InariState` object?\n- The `InariState` object is expected to have an `id` string, a `zapIn` boolean, `inputValue` and `outputValue` strings, a `general` object with `inputSymbol` and `outputSymbol` strings, and a `tokens` object with `inputToken` and `outputToken` objects. The `tokens` object is defined by the `tokenDefinitions` array imported from `useStakeSushiToBentoStrategy.ts`.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/reducer.md"}}],["1177",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/strategies/useBaseStrategy.ts)\n\nThe `useBaseStrategy` function is a React hook that provides a base implementation for a strategy used in the Inari DEX. The function takes an object with three properties: `id`, `general`, and `tokenDefinitions`. The `id` is a string that identifies the strategy, `general` is an object that contains general information about the strategy, and `tokenDefinitions` is an object that defines the input and output tokens for the strategy.\n\nThe hook returns an object that implements the `BaseStrategyHook` interface. This interface extends the `Strategy` interface and adds several properties and methods that are specific to the base strategy. The `execute` method is a function that executes the strategy with a given input value. The `approveCallback` property is an array that contains the approval state, a function to approve the transaction, and the input value. The `getStrategy` method returns an object that contains the `id`, `general`, and `tokenDefinitions` properties. The `calculateOutputFromInput` method is a function that calculates the output value based on the input value. The `balances` property is an object that contains the input and output token balances. The `setBalances` method is a function that sets the input and output token balances.\n\nThe `useBaseStrategy` hook uses several other hooks and functions to implement the base strategy. The `useActiveWeb3React` hook provides the current web3 context. The `useDerivedInariState` hook provides the input value, whether the strategy is zapping in or out, and the input and output tokens. The `useInariContract` hook provides the Inari contract instance. The `useTransactionAdder` hook provides a function to add a transaction to the transaction list. The `useApproveCallback` hook provides a function to approve the transaction. The `useSushiPerXSushi` hook provides the exchange rate between Sushi and xSushi. The `e10` function converts a number to its exponential form. The `tryParseAmount` function parses a string to a `CurrencyAmount` object. The `BentoPermit` type is an object that contains the permit data for the BentoBox contract.\n\nThe `useBaseStrategy` hook is used as a base implementation for other strategies in the Inari DEX. The other strategies can override the `execute` and `calculateOutputFromInput` methods to implement their own logic. The `balances` property can be used to load the input and output token balances asynchronously. The `setBalances` method can be used to set the input and output token balances. The `approveCallback` property can be used to approve the transaction before executing the strategy. The `getStrategy` method can be used to get the strategy information.\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code defines a hook called `useBaseStrategy` which provides a set of functions and state variables for creating a strategy for swapping tokens on the Inari DEX. It solves the problem of having to write repetitive code for each strategy by providing a base implementation that can be extended.\n\n2. What external dependencies does this code have?\n- This code depends on several external packages and modules, including `@zoolabs/zdk`, `react`, `useCallback`, `useMemo`, `useState`, and several custom hooks defined in the `../../../hooks` directory.\n\n3. What are some examples of how this code might be used in a larger project?\n- This code might be used in a larger project that involves swapping tokens on the Inari DEX. Developers could use this hook as a starting point for creating custom strategies that implement different token swapping algorithms. They could also use this hook to create a UI for interacting with the Inari DEX, displaying balances, and executing trades.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/strategies/useBaseStrategy.md"}}],["1178",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/strategies/useStakeSushiToAaveStrategy.ts)\n\nThe code is a React hook that provides a strategy for staking SUSHI tokens to Aave. The hook is called `useStakeSushiToAaveStrategy` and it returns a `StrategyHook` object. The `StrategyHook` object contains a set of functions and data that can be used to interact with the strategy.\n\nThe `useStakeSushiToAaveStrategy` hook uses other hooks and functions to implement the strategy. It uses the `useBaseStrategy` hook to get the base strategy object, which contains the common functions and data for all strategies. It also uses the `useTokenBalances` hook to get the SUSHI and AXSUSHI token balances for the current user's account.\n\nThe `GENERAL` function returns an object that contains general information about the strategy, such as the name, steps, zap method, and description. The `tokenDefinitions` object contains the input and output token definitions for the strategy.\n\nThe `useEffect` hook is used to update the token balances when they change. The `setBalances` function is used to set the input and output token balances for the strategy.\n\nThe `useMemo` hook is used to memoize the `GENERAL` function and the `StrategyHook` object. This improves performance by avoiding unnecessary re-renders.\n\nOverall, this code provides a reusable strategy for staking SUSHI tokens to Aave. It can be used in other parts of the project to provide a seamless user experience for staking SUSHI tokens. For example, it could be used in a staking pool UI to allow users to stake their SUSHI tokens with a single click.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines a strategy for staking SUSHI tokens and depositing them into Aave in one click, using xSUSHI in Aave (aXSUSHI) as collateral for borrowing or lending.\n2. What are the dependencies of this code?\n - This code depends on several external packages and modules, including `@zoolabs/zdk`, `@lingui/core`, `@lingui/macro`, `@lingui/react`, `react`, and various custom hooks and types defined in other files within the `zoo` project.\n3. What is the expected output of this code?\n - The expected output of this code is a custom React hook called `useStakeSushiToAaveStrategy`, which returns an object containing various properties and methods related to the SUSHI → Aave staking strategy, including the `setBalances` method and the `general` and `tokenDefinitions` objects.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/strategies/useStakeSushiToAaveStrategy.md"}}],["1179",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/strategies/useStakeSushiToBentoStrategy.ts)\n\nThe code is a React hook that defines a strategy for staking SUSHI tokens and depositing them into BentoBox, a smart contract-based lending platform. The strategy is designed to be used in a larger project called zoo, which is not described in this code.\n\nThe code imports several modules from different packages, including `@zoolabs/zdk`, `@lingui/core`, and `@lingui/react`. It also imports several functions and hooks from other files in the project, such as `useBaseStrategy` and `useBentoBoxTrait`.\n\nThe code defines two constants: `GENERAL` and `tokenDefinitions`. `GENERAL` is an object that contains general information about the strategy, such as its name, steps, and description. `tokenDefinitions` is an object that defines the input and output tokens for the strategy, including their chain ID, address, decimals, and symbol.\n\nThe code defines a React hook called `useStakeSushiToBentoStrategy`. This hook uses several other hooks, such as `useLingui`, `useActiveWeb3React`, `useTokenBalances`, and `useBentoBalance`, to retrieve information about the user's account, token balances, and BentoBox balances. It also uses the `useBaseStrategy` and `useBentoBoxTrait` hooks to define the base strategy and add the BentoBox trait to it.\n\nThe `useStakeSushiToBentoStrategy` hook returns an object that contains the `setBalances` function and the `strategy` object. The `setBalances` function is used to set the input and output token balances for the strategy, based on the user's token balances and BentoBox balances. The `strategy` object contains several functions that are used to execute the strategy, such as `approveInputToken`, `deposit`, and `withdraw`.\n\nOverall, this code defines a strategy for staking SUSHI tokens and depositing them into BentoBox, using a combination of React hooks and smart contracts. The strategy is designed to be used in a larger project called zoo, which is not described in this code.\n## Questions: \n 1. What is the purpose of this code?\n - This code defines a strategy for staking SUSHI tokens and depositing them into BentoBox, a yield aggregator. It also includes definitions for the input and output tokens and a hook for implementing the strategy.\n\n2. What dependencies does this code have?\n - This code imports various modules from '@zoolabs/zdk', '../../../config/tokens', 'react', '@lingui/core', and '../../../functions', as well as several custom hooks from '../../../hooks', '../../bentobox/hooks', and '../../wallet/hooks'.\n\n3. What is the role of the useStakeSushiToBentoStrategy hook?\n - The useStakeSushiToBentoStrategy hook is responsible for implementing the SUSHI to BentoBox staking strategy. It uses the useBaseStrategy hook to define the strategy and the useBentoBoxTrait hook to add in BentoBox-specific functionality. It also retrieves token balances using the useTokenBalances and useBentoBalance hooks and sets them using the setBalances function.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/strategies/useStakeSushiToBentoStrategy.md"}}],["1180",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/strategies/useStakeSushiToCreamStrategy.ts)\n\nThis code defines a custom hook called `useStakeSushiToCreamStrategy` that returns an object with properties and methods used to execute a specific strategy for swapping SUSHI for xSUSHI and depositing it into Cream. The hook is used in a larger project called `zoo`.\n\nThe hook imports several dependencies, including tokens from a configuration file, types, and hooks from the `zoo` project, and functions from external libraries. It also defines two constants: `GENERAL` and `tokenDefinitions`. `GENERAL` is an object that contains general information about the strategy, such as its name, steps, and description. `tokenDefinitions` is an object that defines the input and output tokens for the strategy, including their chain ID, address, decimals, and symbol.\n\nThe `useStakeSushiToCreamStrategy` hook uses several hooks from the `zoo` project, including `useActiveWeb3React`, `useDerivedInariState`, `useZenkoContract`, `useInariContract`, `useTokenBalances`, and `useBaseStrategy`. It also defines several variables and functions, including `approveAmount`, `cTokenAmountRef`, `approveCallback`, `general`, `toCTokenAmount`, `preExecute`, and `execute`.\n\nThe `useStakeSushiToCreamStrategy` hook is used to execute a specific strategy for swapping SUSHI for xSUSHI and depositing it into Cream. The strategy involves staking SUSHI for xSUSHI and depositing it into Cream in one click. xSUSHI in Cream (crXSUSHI) can be lent or used as collateral for borrowing. The strategy is executed by calling the `execute` method of the returned object from the hook.\n\nThe `useStakeSushiToCreamStrategy` hook can be used in the larger `zoo` project to provide a way for users to swap SUSHI for xSUSHI and deposit it into Cream. The hook can be used in conjunction with other hooks and components to create a user interface for executing the strategy. For example, the `useDerivedInariState` hook can be used to get the input value and whether the user is zapping in or out, and the `useTokenBalances` hook can be used to get the user's token balances. The `useStakeSushiToCreamStrategy` hook can then be used to execute the strategy and update the user's token balances.\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n- This code defines a strategy for staking SUSHI for xSUSHI and depositing it into Cream in one click, allowing xSUSHI to be lent or used as collateral for borrowing.\n\n2. What external dependencies does this code have?\n- This code imports various tokens and libraries from external packages, including `@zoolabs/zdk`, `@lingui/core`, `@lingui/macro`, and `react`.\n\n3. What are some of the key functions and hooks used in this code?\n- This code uses several custom hooks, including `useActiveWeb3React`, `useApproveCallback`, `useInariContract`, `useZenkoContract`, `useDerivedInariState`, `useBaseStrategy`, and `useTokenBalances`. It also defines a `preExecute` function for transforming xSUSHI to crXSUSHI and a `toCTokenAmount` function for converting between token amounts.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/strategies/useStakeSushiToCreamStrategy.md"}}],["1181",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/strategies/useStakeSushiToCreamToBentoStrategy.ts)\n\nThis code defines a custom hook called `useStakeSushiToCreamToBentoStrategy` that returns a `StrategyHook` object. This hook is used to stake SUSHI tokens for xSUSHI into Cream and deposit crXSUSHI into BentoBox in one click. \n\nThe `StrategyHook` object returned by this hook includes a `setBalances` function and a `calculateOutputFromInput` function. The `setBalances` function sets the input and output token balances for the strategy. The `calculateOutputFromInput` function calculates the output token amount based on the input token amount and the current exchange rate.\n\nThe `GENERAL` function returns an object that contains general information about the strategy, such as the name, steps, zap method, and description. The `tokenDefinitions` object defines the input and output tokens for the strategy.\n\nThe hook uses several other hooks and functions to implement the strategy. The `useActiveWeb3React` hook is used to get the current account. The `useZenkoContract` hook is used to get the Zenko contract instance. The `useTokenBalances` hook is used to get the SUSHI token balance for the current account. The `useSushiPerXSushi` hook is used to get the current exchange rate between SUSHI and xSUSHI. The `useBentoBalance` hook is used to get the crXSUSHI balance in BentoBox for the current account. The `useBaseStrategy` hook is used to get the base strategy object. The `useBentoBoxTrait` hook is used to add the BentoBox trait to the strategy.\n\nThe `calculateOutputFromInput` function uses the exchange rate and the Zenko contract to calculate the output token amount based on the input token amount. If `zapIn` is true, it calculates the crXSUSHI amount based on the SUSHI amount. If `zapIn` is false, it calculates the SUSHI amount based on the crXSUSHI amount.\n\nOverall, this code defines a custom hook that implements a specific strategy for staking SUSHI tokens for xSUSHI into Cream and depositing crXSUSHI into BentoBox in one click. This hook can be used in the larger project to provide a convenient way for users to execute this strategy.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a strategy for staking SUSHI for xSUSHI into Cream and depositing crXSUSHI into BentoBox in one click.\n\n2. What tokens are involved in this strategy?\n- The input token is SUSHI and the output token is crXSUSHI.\n\n3. What hooks and functions are being used in this code?\n- The code is using several hooks including `useActiveWeb3React`, `useZenkoContract`, `useCallback`, `useEffect`, `useMemo`, `useLingui`, `useSushiPerXSushi`, `useTokenBalances`, and `useBentoBalance`. It is also using several functions including `e10` and `tryParseAmount`.","metadata":{"source":".autodoc/docs/markdown/core/src/state/inari/strategies/useStakeSushiToCreamToBentoStrategy.md"}}],["1182",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/inari/traits/useBentoBoxTrait.ts)\n\nThe code defines a hook called `useBentoBoxTrait` that is used to add a trait to strategies that have BentoBox as their output. The trait is used to handle approvals for spending tokens when unzapping. The hook returns an object that includes the trait and overrides some of the properties of the `BaseStrategyHook` object.\n\nThe hook imports several other hooks and interfaces from different files in the project. It also imports `CurrencyAmount` and `Token` from the `@zoolabs/zdk` library.\n\nThe `useBentoBoxTrait` hook takes a `BaseStrategyHook` object as an argument and returns a `BaseStrategyWithBentoBoxTraitHook` object. The returned object includes the `BaseTrait` object and overrides the `approveCallback` and `bentoApproveCallback` properties of the `BaseStrategyHook` object.\n\nThe `batchExecute` function is defined inside the hook and is used to batch execute transactions with permit if one is provided or else execute normally. The function takes a `CurrencyAmount{user.name}
\n}\n```\n## Questions: \n 1. What is the purpose of the `persistConfig` object?\n \n The `persistConfig` object is used to configure the `redux-persist` library, which allows for persisting the Redux store to local storage. It specifies the key to use for the persisted data, which keys to whitelist, and the storage engine to use.\n\n2. What is the purpose of the `makeStore` function?\n \n The `makeStore` function creates a new Redux store using the `configureStore` function from the `@reduxjs/toolkit` library. It uses the persisted reducer created by `persistReducer` and applies middleware to the store.\n\n3. What is the purpose of the `getOrCreateStore` function?\n \n The `getOrCreateStore` function returns the existing Redux store if it exists, or creates a new one if it doesn't. It also merges any preloaded state with the current state in the store, and resets the store if necessary. This function is used to ensure that there is only one Redux store instance in the client.","metadata":{"source":".autodoc/docs/markdown/core/src/state/index.md"}}],["1187",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/limit-order/actions.ts)\n\nThis file contains a set of Redux actions that are used in the larger project called \"zoo\". Redux is a state management library that is commonly used in React applications. The purpose of this file is to define a set of actions that can be dispatched to update the state of the application.\n\nThe first thing that is imported is the `createAction` function from the `@reduxjs/toolkit` package. This function is used to create a new Redux action. An action is a plain JavaScript object that describes a change that should be made to the state of the application. Actions are dispatched to the Redux store, which then updates the state of the application accordingly.\n\nThe file then defines a set of actions using the `createAction` function. Each action has a unique name and a payload that can be used to update the state of the application. For example, the `setLimitPrice` action takes a string or null value as its payload and updates the limit price of a limit order. The `replaceLimitOrderState` action takes a complex object as its payload and updates multiple fields of a limit order.\n\nIn addition to the actions, the file also defines an enum called `Field`. This enum is used to specify which field of a limit order is being updated. The `Field` enum has two possible values: `INPUT` and `OUTPUT`.\n\nThese actions can be used in the larger project to update the state of the application in response to user interactions. For example, when a user types in a new limit price for a limit order, the `setLimitPrice` action can be dispatched with the new value as its payload. This will update the state of the application and cause the UI to re-render with the new limit price displayed.\n\nHere is an example of how the `setLimitPrice` action can be used in a React component:\n\n```\nimport { useDispatch } from 'react-redux';\nimport { setLimitPrice } from './path/to/limit-order-actions';\n\nfunction LimitOrderForm() {\n const dispatch = useDispatch();\n\n function handleLimitPriceChange(event) {\n const newLimitPrice = event.target.value;\n dispatch(setLimitPrice(newLimitPrice));\n }\n\n return (\n \n );\n}\n```\n\nIn this example, the `setLimitPrice` action is imported from the `limit-order-actions` module and used to update the limit price of a limit order when the user types in a new value in the input field. The `useDispatch` hook is used to get a reference to the Redux store's `dispatch` function, which is then used to dispatch the `setLimitPrice` action with the new value as its payload.\n## Questions: \n 1. What is the purpose of the `createAction` function being imported from `@reduxjs/toolkit`?\n - The `createAction` function is used to create Redux actions with a specified type and payload.\n2. What is the `Field` enum used for?\n - The `Field` enum defines two constants, `INPUT` and `OUTPUT`, which are used to specify the input and output fields in the `replaceLimitOrderState` action.\n3. What is the purpose of the `replaceLimitOrderState` action and what payload does it accept?\n - The `replaceLimitOrderState` action is used to replace the entire state of the limit order feature with a new state. It accepts an object payload with various properties such as `independentField`, `typedValue`, `inputCurrencyId`, `outputCurrencyId`, `recipient`, `fromBentoBalance`, `limitPrice`, and `orderExpiration`.","metadata":{"source":".autodoc/docs/markdown/core/src/state/limit-order/actions.md"}}],["1188",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/limit-order/hooks.ts)\n\nThe code is a module that exports several functions and a hook that are used in the larger project called \"zoo\". The module contains functions that handle limit order actions, derive limit order information, and parse URL parameters to swap state. It also exports a hook that returns the current limit order state.\n\nThe `useLimitOrderActionHandlers` function returns an object with four functions that handle different actions related to limit orders. The `onCurrencySelection` function selects a currency for a given field (either input or output) and dispatches a `selectCurrency` action. The `onSwitchTokens` function switches the input and output currencies and dispatches a `switchCurrencies` action. The `onUserInput` function updates the typed value for a given field and dispatches a `typeInput` action. The `onChangeRecipient` function updates the recipient address and dispatches a `setRecipient` action.\n\nThe `useDerivedLimitOrderInfo` hook returns an object with several properties that are derived from the current limit order state. The `currencies` property is an object that contains the input and output currencies. The `parsedAmounts` property is an object that contains the parsed input and output amounts. The `walletBalances` property is an object that contains the wallet balances for the input and output currencies. The `bentoboxBalances` property is an object that contains the BentoBox balances for the input and output currencies. The `inputError` property is a string that contains an error message if there is an error with the input. The `currentPrice` property is the current price for the input and output currencies.\n\nThe `useLimitOrderState` function returns the current limit order state from the Redux store.\n\nThe `queryParametersToSwapState` function parses URL parameters and returns an object that contains the input and output currencies, the typed value, the independent field, the recipient address, the limit price, whether to use the BentoBox balance, and the order expiration.\n\nThe `useDefaultsFromURLSearch` hook sets the default limit order state based on the URL parameters and dispatches a `replaceLimitOrderState` action.\n\nOverall, this module provides functions and a hook that are used to handle limit order actions, derive limit order information, and parse URL parameters to swap state in the larger \"zoo\" project.\n## Questions: \n 1. What is the purpose of the `useLimitOrderActionHandlers` function?\n- The `useLimitOrderActionHandlers` function returns an object containing functions that handle user actions such as currency selection, token switching, user input, and recipient change for a limit order.\n\n2. What is the `useDerivedLimitOrderInfo` function used for?\n- The `useDerivedLimitOrderInfo` function returns an object containing derived information for a limit order such as selected currencies, parsed amounts, wallet and bentobox balances, input error, and current price.\n\n3. What is the purpose of the `queryParametersToSwapState` function?\n- The `queryParametersToSwapState` function converts query parameters from a URL into a swap state object containing input and output currencies, typed value, independent field, recipient, limit price, and order expiration.","metadata":{"source":".autodoc/docs/markdown/core/src/state/limit-order/hooks.md"}}],["1189",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/limit-order/reducer.ts)\n\nThis code defines a Redux reducer for managing the state of a limit order form in a decentralized exchange application. The `LimitOrderState` interface defines the shape of the state object, which includes fields for the input and output currencies, the typed value, the limit price, the recipient address, and other related data. The `OrderExpiration` enum defines the possible values for the order expiration time.\n\nThe `initialState` object defines the initial state of the form, with empty values for all fields. The `createReducer` function from the `@reduxjs/toolkit` library is used to create a reducer function that handles various actions dispatched by the application.\n\nThe `replaceLimitOrderState` action is dispatched when the user updates the form with new data. The reducer updates the state with the new values for the input and output currencies, the typed value, the limit price, the recipient address, and other related data. The `setLimitPrice`, `setLimitOrderApprovalPending`, `setOrderExpiration`, `setFromBentoBalance`, `selectCurrency`, `switchCurrencies`, `typeInput`, and `setRecipient` actions are used to update specific fields of the state object in response to user input.\n\nOverall, this code provides a way to manage the state of a limit order form in a decentralized exchange application, allowing users to specify the input and output currencies, the limit price, the recipient address, and other related data. The reducer function can be used in conjunction with other Redux middleware and components to create a fully functional limit order form. \n\nExample usage:\n\n```javascript\nimport { createStore } from 'redux';\nimport limitOrderReducer from './limitOrderReducer';\n\nconst store = createStore(limitOrderReducer);\n\n// Dispatch an action to update the input currency\nstore.dispatch(selectCurrency({ currencyId: 'ETH', field: Field.INPUT }));\n\n// Dispatch an action to update the limit price\nstore.dispatch(setLimitPrice('0.1'));\n\n// Get the current state of the limit order form\nconst state = store.getState();\nconsole.log(state);\n```\n## Questions: \n 1. What is the purpose of the `LimitOrderState` interface?\n- The `LimitOrderState` interface defines the shape of the state object for the limit order feature, including fields such as `independentField`, `typedValue`, `limitPrice`, `recipient`, and `orderExpiration`.\n\n2. What is the significance of the `OrderExpiration` enum?\n- The `OrderExpiration` enum provides a set of possible values for the `orderExpiration` field in the `LimitOrderState` object, including `never`, `hour`, `day`, `week`, and `month`.\n\n3. What actions can trigger changes to the `LimitOrderState` object?\n- The `LimitOrderState` object can be updated by dispatching actions such as `replaceLimitOrderState`, `setLimitPrice`, `setLimitOrderApprovalPending`, `setOrderExpiration`, `setFromBentoBalance`, `selectCurrency`, `switchCurrencies`, `typeInput`, and `setRecipient`. These actions are defined in the `./actions` module and are handled by the `createReducer` function from the `@reduxjs/toolkit` library.","metadata":{"source":".autodoc/docs/markdown/core/src/state/limit-order/reducer.md"}}],["1190",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/lists/actions.ts)\n\nThis code defines a set of Redux actions related to managing token lists. The `fetchTokenList` object contains three actions (`pending`, `fulfilled`, and `rejected`) that are dispatched during the process of fetching a token list from a given URL. The `addList` and `removeList` actions allow for adding and removing token lists from the application state. The `enableList` and `disableList` actions are used to select which token lists to search across from the loaded lists. Finally, the `acceptListUpdate` and `rejectVersionUpdate` actions are used for versioning.\n\nThis code is part of a larger project that likely involves managing and displaying token lists in a decentralized exchange or similar application. The `fetchTokenList` actions are likely used when the application needs to retrieve a new token list from a remote source. The `addList` and `removeList` actions are used to manage the set of available token lists in the application. The `enableList` and `disableList` actions are used to filter the set of available tokens based on the selected token lists. Finally, the `acceptListUpdate` and `rejectVersionUpdate` actions are used to manage updates to the token lists, likely to ensure that the application is using the latest version of each list.\n\nHere is an example of how these actions might be used in a Redux store:\n\n```\nimport { combineReducers, configureStore } from '@reduxjs/toolkit'\nimport {\n fetchTokenList,\n addList,\n removeList,\n enableList,\n disableList,\n acceptListUpdate,\n rejectVersionUpdate,\n} from './actions'\n\nconst listsReducer = combineReducers({\n // ... other reducers ...\n tokenLists: (state = [], action) => {\n switch (action.type) {\n case fetchTokenList.fulfilled.type:\n return [...state, action.payload.tokenList]\n case addList.type:\n return [...state, { url: action.payload }]\n case removeList.type:\n return state.filter(list => list.url !== action.payload)\n default:\n return state\n }\n },\n enabledLists: (state = [], action) => {\n switch (action.type) {\n case enableList.type:\n return [...state, action.payload]\n case disableList.type:\n return state.filter(list => list !== action.payload)\n default:\n return state\n }\n },\n version: (state = null, action) => {\n switch (action.type) {\n case acceptListUpdate.type:\n return action.payload.version\n case rejectVersionUpdate.type:\n return state\n default:\n return state\n }\n },\n})\n\nconst store = configureStore({\n reducer: {\n // ... other reducers ...\n lists: listsReducer,\n },\n})\n\n// Fetch a token list\nstore.dispatch(fetchTokenList.pending({ url: 'https://example.com/tokens.json', requestId: 'abc123' }))\n// Add a token list\nstore.dispatch(addList('https://example.com/tokens2.json'))\n// Enable a token list\nstore.dispatch(enableList('https://example.com/tokens.json'))\n// Accept a list update\nstore.dispatch(acceptListUpdate('v2'))\n```\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a set of Redux actions related to fetching and managing token lists, as well as versioning updates.\n\n2. What external dependencies does this code rely on?\n \n This code relies on two external dependencies: `@reduxjs/toolkit` and `@uniswap/token-lists`.\n\n3. How are the actions organized and what do they do?\n \n The actions are organized into several categories: fetching token lists, adding/removing lists, enabling/disabling lists, and versioning updates. The actions allow for managing token lists and versioning updates within a Redux store.","metadata":{"source":".autodoc/docs/markdown/core/src/state/lists/actions.md"}}],["1191",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/lists/hooks.ts)\n\nThe code in this file is responsible for managing token lists used in the larger project. It imports the `AppState` from another file, as well as several other dependencies, including `DEFAULT_TOKEN_LIST` and `UNSUPPORTED_TOKEN_LIST`. It also defines several functions that are used to manipulate and combine token lists.\n\nThe `listToTokenMap` function takes a `TokenList` object and returns a `TokenAddressMap` object, which is a nested object that maps token addresses to their corresponding `WrappedTokenInfo` objects and `TokenList` objects. This function is used to create a map of all tokens in a given list, which can then be combined with other maps to create a master list of all tokens.\n\nThe `useCombinedTokenMapFromUrls` function takes an array of URLs and returns a `TokenAddressMap` object that combines all tokens from the lists at those URLs. This function is used to merge tokens contained within lists from URLs.\n\nThe `useActiveListUrls` function returns an array of active list URLs, filtered to exclude any unsupported lists. This function is used to filter out unsupported lists.\n\nThe `useCombinedActiveList` function returns a `TokenAddressMap` object that combines all tokens from the active lists and the default token list. This function is used to get all the tokens from active lists and combine them with local default tokens.\n\nThe `useUnsupportedTokenList` function returns a `TokenAddressMap` object that contains all tokens that are not supported on the interface. This function is used to show warnings and prevent swaps and adds.\n\nFinally, the `useIsListActive` function takes a URL and returns a boolean indicating whether that list is active. This function is used to determine whether a list is active or not.\n\nOverall, this code is responsible for managing token lists and combining them to create a master list of all tokens. It is used throughout the larger project to ensure that all tokens are accounted for and that unsupported tokens are properly handled.\n## Questions: \n 1. What is the purpose of the `listToTokenMap` function?\n- The `listToTokenMap` function takes a `TokenList` object and returns a `TokenAddressMap` object that maps token addresses to their corresponding `WrappedTokenInfo` and `TokenList` objects.\n\n2. What is the purpose of the `useCombinedTokenMapFromUrls` function?\n- The `useCombinedTokenMapFromUrls` function takes an array of token list URLs and returns a `TokenAddressMap` object that combines the tokens from all the specified lists.\n\n3. What is the purpose of the `useUnsupportedTokenList` function?\n- The `useUnsupportedTokenList` function returns a `TokenAddressMap` object that contains all the tokens that are not supported by the interface, which is used to show warnings and prevent swaps and adds. This includes both hard-coded unsupported tokens and any loaded unsupported tokens.","metadata":{"source":".autodoc/docs/markdown/core/src/state/lists/hooks.md"}}],["1192",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/lists/reducer.ts)\n\nThe code is a module that manages the state of token lists in the Zoo project. It exports a `ListsState` interface that defines the shape of the state object, which has three properties: `byUrl`, `lastInitializedDefaultListOfLists`, and `activeListUrls`. The `byUrl` property is an object that maps a URL string to an object that contains information about the token list at that URL. The `lastInitializedDefaultListOfLists` property is an optional array of strings that contains the default list of lists from the last time the `updateVersion` function was called. The `activeListUrls` property is an array of strings that contains the URLs of the currently active token lists.\n\nThe module exports a default reducer function that uses the `createReducer` function from the `@reduxjs/toolkit` package to create a reducer that handles actions that modify the state. The reducer function uses the `builder` object to define case reducers for each action. The actions are defined in a separate `actions` module that is imported at the top of the file.\n\nThe reducer function handles several actions that modify the `byUrl` property of the state object. The `fetchTokenList` action is dispatched when a token list is being fetched from a URL. The `addList`, `removeList`, `enableList`, and `disableList` actions are dispatched when a token list is added, removed, enabled, or disabled, respectively. The `acceptListUpdate` action is dispatched when a pending update to a token list is accepted.\n\nThe reducer function also handles the `updateVersion` action, which is dispatched when the version of the token lists is updated. This action initializes the state object with the default list of lists and activates the default lists if no lists are currently active.\n\nThe module imports several functions and types from other modules. The `DEFAULT_ACTIVE_LIST_URLS` and `DEFAULT_LIST_OF_LISTS` constants are imported from the `../../config/token-lists` module. The `VersionUpgrade` and `getVersionUpgrade` functions are imported from the `@uniswap/token-lists` module. The `TokenList` type is imported from the `@uniswap/token-lists/dist/types` module. The `createReducer` function is imported from the `@reduxjs/toolkit` module. The `updateVersion` action is imported from the `../global/actions` module.\n\nExample usage:\n\n```typescript\nimport listsReducer, { ListsState } from './lists'\n\nconst initialState: ListsState = {\n byUrl: {},\n activeListUrls: [],\n}\n\nconst store = configureStore({\n reducer: {\n lists: listsReducer,\n },\n preloadedState: {\n lists: initialState,\n },\n})\n\nstore.dispatch(fetchTokenList({ url: 'https://example.com/list.json' }))\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code manages the state of token lists in the zoo project, including fetching, adding, removing, enabling, and disabling lists.\n\n2. What is the structure of the `ListsState` interface?\n- The `ListsState` interface has a property `byUrl` which is an object with keys as URLs and values as objects containing `current`, `pendingUpdate`, `loadingRequestId`, and `error` properties. It also has a `lastInitializedDefaultListOfLists` property and an `activeListUrls` property.\n\n3. What is the purpose of the `createReducer` function?\n- The `createReducer` function is used to create a Redux reducer function that handles actions and updates the state of the `ListsState` object accordingly. It takes an initial state and a builder function that defines how the state should be updated for each action.","metadata":{"source":".autodoc/docs/markdown/core/src/state/lists/reducer.md"}}],["1193",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/lists/updater.ts)\n\nThe `Updater` function in this code is responsible for updating token lists used in the larger project. It imports several functions and hooks from other files in the project, including `getVersionUpgrade` and `minVersionBump` from `@uniswap/token-lists`, and `useCallback` and `useEffect` from `react`. \n\nThe `Updater` function first initializes several variables using the imported hooks, including `lists` and `activeListUrls`. It then defines a `fetchAllListsCallback` function that fetches all lists every 10 minutes, but only after the `library` has been initialized. This function is called using the `useInterval` hook. \n\nThe `Updater` function also defines two `useEffect` hooks. The first one tries to load any lists that are not currently loaded and not currently loading. The second one checks for any lists from unsupported URLs that are loaded and checks them for updates. \n\nFinally, the `Updater` function defines another `useEffect` hook that automatically updates lists if their versions are minor or patch. If the version bump is major, the list is not automatically updated. \n\nOverall, the `Updater` function is an important part of the larger project as it ensures that token lists are up-to-date and that any breaking changes are handled appropriately. It can be used by other parts of the project to ensure that token lists are always current. \n\nExample usage:\n\n```jsx\nimport Updater from './Updater'\n\nfunction App() {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What does this code do?\n- This code defines a React component called `Updater` that updates token lists used in the application. It fetches all loaded lists and active URLs, fetches all lists every 10 minutes, and automatically updates lists if versions are minor/patch.\n\n2. What external dependencies does this code have?\n- This code imports several functions and hooks from external dependencies such as `@uniswap/token-lists`, `react`, and custom hooks defined in other files.\n\n3. What is the purpose of the `useEffect` hook that checks unsupported list URLs?\n- The `useEffect` hook checks unsupported list URLs to see if any lists from those URLs are loaded and not loading, and if so, tries to load them again. This is done in case there are new updates since the last visit.","metadata":{"source":".autodoc/docs/markdown/core/src/state/lists/updater.md"}}],["1194",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/lists/wrappedTokenInfo.ts)\n\nThis code defines a class called `WrappedTokenInfo` that represents a token on a token list. The `TokenList` is imported from the `@uniswap/token-lists` package, which provides a standardized format for token lists. The `TokenInfo` interface is also imported from this package, which defines the properties of a token on a token list. The `Tags` interface is also imported from this package, which defines the tags that can be associated with a token on a token list.\n\nThe `WrappedTokenInfo` class implements the `Token` interface from the `@zoolabs/zdk` package, which defines the properties and methods of a token. The `Token` interface has properties such as `address`, `chainId`, `decimals`, `name`, `symbol`, and `logoURI`, which are all defined in the `TokenInfo` interface. The `WrappedTokenInfo` class also has a `list` property, which is the token list that the token belongs to.\n\nThe `WrappedTokenInfo` class has a constructor that takes a `TokenInfo` object and a `TokenList` object as arguments. The `TokenInfo` object contains the information about the token, such as its `address`, `chainId`, `decimals`, `name`, `symbol`, and `logoURI`. The `TokenList` object contains the information about the token list, such as its `name`, `logoURI`, and `tags`.\n\nThe `WrappedTokenInfo` class has methods such as `equals`, `sortsBefore`, and `serialize`, which are all defined in the `Token` interface. The `equals` method checks if two tokens are equal by comparing their `chainId` and `address`. The `sortsBefore` method checks if a token should be sorted before another token based on their `address`. The `serialize` method returns the `address` of the token as a string.\n\nThe `WrappedTokenInfo` class also has a `tags` property, which is an array of `TagInfo` objects. The `TagInfo` interface extends the `TagDetails` interface from the `Tags` interface and adds an `id` property. The `tags` property maps the `tagId` values from the `TokenInfo` object to the corresponding `TagInfo` objects from the `TokenList` object.\n\nThis code can be used to create instances of the `WrappedTokenInfo` class from `TokenInfo` objects on a token list. These instances can be used to represent tokens in a decentralized exchange or other applications that use tokens. The `tags` property can be used to get the tags associated with a token on a token list. The `equals`, `sortsBefore`, and `serialize` methods can be used to compare and serialize tokens.\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a class `WrappedTokenInfo` that represents a token on a token list. It provides methods to get information about the token such as its name, symbol, and tags.\n\n2. What external dependencies does this code have?\n \n This code imports `Currency` and `Token` from the `@zoolabs/zdk` library, and `Tags` and `TokenInfo` from the `@uniswap/token-lists` library. It also imports the `TokenList` type from the same library, and the `isAddress` function from a local file.\n\n3. What is the purpose of the `tags` property and how is it populated?\n \n The `tags` property is an array of `TagInfo` objects that represent the tags associated with the token. It is populated by mapping over the `tagIds` array in the `tokenInfo` object and looking up the corresponding `TagDetails` object in the `list.tags` object. The resulting `TagInfo` objects have an additional `id` property that is set to the corresponding `tagId`.","metadata":{"source":".autodoc/docs/markdown/core/src/state/lists/wrappedTokenInfo.md"}}],["1195",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/mint/actions.ts)\n\nThis code is a module that exports two functions: `typeInput` and `resetMintState`. It also exports an enum called `Field` that defines two constants: `CURRENCY_A` and `CURRENCY_B`. \n\nThe `typeInput` function is created using the `createAction` function from the `@reduxjs/toolkit` library. It takes in an object with three properties: `field`, `typedValue`, and `noLiquidity`. The `field` property is of type `Field`, which is the enum defined in this module. The `typedValue` property is of type `string` and represents the user's input. The `noLiquidity` property is of type `boolean` and is used to indicate whether there is enough liquidity to perform the requested action. \n\nThe purpose of the `typeInput` function is to create an action that can be dispatched to the Redux store. This action represents the user's input when they are trying to mint a new currency. The `field` property indicates which currency the user is trying to mint, and the `typedValue` property represents the amount they want to mint. The `noLiquidity` property is used to indicate whether there is enough liquidity to perform the requested action. \n\nThe `resetMintState` function is also created using the `createAction` function. It takes no arguments and is used to reset the state of the minting process. \n\nIn the larger project, these functions would be used to update the state of the Redux store when the user interacts with the minting feature. For example, when the user types in a value to mint, the `typeInput` function would be called with the appropriate arguments, and an action would be dispatched to the Redux store. This action would then be handled by a reducer, which would update the state of the store accordingly. The `resetMintState` function would be used to reset the state of the store when the user cancels the minting process or when it is completed. \n\nExample usage:\n\n```\nimport { typeInput, resetMintState, Field } from 'zoo'\n\n// Dispatch an action to update the state of the store with the user's input\ndispatch(typeInput({ field: Field.CURRENCY_A, typedValue: '100', noLiquidity: false }))\n\n// Reset the state of the store\ndispatch(resetMintState())\n```\n## Questions: \n 1. What is the purpose of the `createAction` function from `@reduxjs/toolkit` being imported?\n- The `createAction` function is used to create two Redux actions: `typeInput` and `resetMintState`.\n\n2. What is the purpose of the `Field` enum?\n- The `Field` enum is used to define two currency fields: `CURRENCY_A` and `CURRENCY_B`.\n\n3. What parameters are expected for the `typeInput` action?\n- The `typeInput` action expects an object with three properties: `field` (a value from the `Field` enum), `typedValue` (a string), and `noLiquidity` (a boolean).","metadata":{"source":".autodoc/docs/markdown/core/src/state/mint/actions.md"}}],["1196",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/mint/hooks.ts)\n\nThe code is a module that exports several functions and a constant. It imports several modules from the project's index file, as well as from external libraries such as `@zoolabs/zdk`, `react`, and `@lingui/macro`. \n\nThe `useMintState` function returns the `mint` state from the Redux store using the `useSelector` hook. The `useMintActionHandlers` function returns two functions that dispatch Redux actions to update the `typedValue` of two input fields (`Field.CURRENCY_A` and `Field.CURRENCY_B`) in the `mint` state. The `useDerivedMintInfo` function returns an object containing various derived information based on the `mint` state and the input currencies (`currencyA` and `currencyB`). \n\nThe `useDerivedMintInfo` function first gets the `independentField`, `typedValue`, and `otherTypedValue` from the `mint` state. It then calculates the `dependentField` based on the `independentField`. It creates an object `currencies` with the input currencies mapped to their respective fields. It uses the `useV2Pair` hook to get the `pairState` and `pair` based on the input currencies. It also gets the `totalSupply` of the liquidity token from the `pair`. \n\nThe function then calculates the `noLiquidity` boolean based on the `pairState`, `totalSupply`, and `pair` variables. It gets the `balances` of the input currencies for the current user's account using the `useCurrencyBalances` hook. It calculates the `independentAmount` and `dependentAmount` based on the `typedValue`, `independentField`, `otherTypedValue`, `dependentField`, and the input currencies. It also calculates the `parsedAmounts` object based on the `independentAmount` and `dependentAmount`. \n\nThe function then calculates the `price` of the input currencies based on the `noLiquidity` boolean, `currencyA`, `currencyB`, and the `pair`. It calculates the `liquidityMinted` based on the `parsedAmounts`, `pair`, and `totalSupply`. It calculates the `poolTokenPercentage` based on the `liquidityMinted` and `totalSupply`. Finally, it calculates the `error` string based on various conditions such as whether the user is connected to a wallet, whether the `pairState` is invalid, and whether the input amounts are valid. \n\nOverall, this module provides several hooks that can be used to get and update the `mint` state in the Redux store, as well as to calculate various derived information based on the input currencies and the `mint` state. These hooks can be used in other parts of the project to implement the minting functionality for a liquidity pool.\n## Questions: \n 1. What is the purpose of this code file?\n- This code file contains several custom hooks and a function that are used for handling the minting of liquidity in a decentralized exchange.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries such as `@zoolabs/zdk`, `@lingui/macro`, and `react-redux`.\n\n3. What is the role of the `useDerivedMintInfo` hook?\n- The `useDerivedMintInfo` hook is responsible for deriving various information needed for minting liquidity, such as the currencies being used, the pair being traded, the parsed amounts of each currency, the price of the pair, and any errors that may occur during the process.","metadata":{"source":".autodoc/docs/markdown/core/src/state/mint/hooks.md"}}],["1197",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/mint/reducer.ts)\n\nThis code defines a Redux reducer for the `MintState` slice of the store in the `zoo` project. The `MintState` interface defines the shape of the state object, which has three properties: `independentField`, `typedValue`, and `otherTypedValue`. The `createReducer` function from the `@reduxjs/toolkit` package is used to create the reducer function, which takes an initial state object and a \"builder\" function that defines how the state should be updated in response to different actions.\n\nThe `resetMintState` action resets the state to the initial state, and the `typeInput` action updates the state based on the `field`, `typedValue`, and `noLiquidity` payload properties. If `noLiquidity` is true, it means that there is no liquidity for the selected currency pair, so the user is typing into the field they last typed in. If the `field` matches the current `independentField`, the `typedValue` is updated for that field. Otherwise, the `otherTypedValue` property is updated with the previous `typedValue`, and the `independentField` and `typedValue` properties are updated for the new field.\n\nThis reducer can be used in the `zoo` project to manage the state of the minting feature, which allows users to create new tokens by providing liquidity to a currency pair. The `MintState` slice of the store tracks the user's input for the minting process, including the selected currency pair and the amount of tokens to mint. The `typeInput` action is dispatched whenever the user types into one of the input fields, and the reducer updates the state accordingly. The `resetMintState` action can be dispatched to reset the state when the user cancels the minting process. \n\nExample usage:\n\n```typescript\nimport { createStore } from 'redux'\nimport mintReducer, { MintState, resetMintState, typeInput, Field } from './mintReducer'\n\nconst initialState: MintState = {\n independentField: Field.CURRENCY_A,\n typedValue: '',\n otherTypedValue: '',\n}\n\nconst store = createStore(mintReducer, initialState)\n\nstore.dispatch(typeInput({\n field: Field.CURRENCY_B,\n typedValue: '100',\n noLiquidity: false,\n}))\n\nconsole.log(store.getState())\n// Output: { independentField: Field.CURRENCY_B, typedValue: '100', otherTypedValue: '' }\n\nstore.dispatch(resetMintState())\n\nconsole.log(store.getState())\n// Output: { independentField: Field.CURRENCY_A, typedValue: '', otherTypedValue: '' }\n```\n## Questions: \n 1. What is the purpose of this code and what problem does it solve?\n - This code is a reducer function for managing state related to a minting feature. It handles resetting the state and updating the state based on user input.\n2. What are the possible values for the `Field` enum and how are they used in this code?\n - The `Field` enum has at least two possible values, `CURRENCY_A` and `CURRENCY_B`, which represent the two fields that the user can input values into. In this code, the `independentField` property of the state is set to one of these values and is updated based on user input.\n3. What is the purpose of the `noLiquidity` parameter and how does it affect the behavior of the `typeInput` case?\n - The `noLiquidity` parameter is a boolean value that indicates whether or not there is liquidity available for the selected currency pair. If there is no liquidity, the behavior of the `typeInput` case is different - it stores the value of the previously typed field in the `otherTypedValue` property of the state.","metadata":{"source":".autodoc/docs/markdown/core/src/state/mint/reducer.md"}}],["1198",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/multicall/actions.ts)\n\nThis code defines a set of actions and an interface for a Redux store related to fetching data from multiple sources in a blockchain network. The `ListenerOptions` interface defines an object with a single property, `blocksPerFetch`, which specifies how often data should be fetched. The `addMulticallListeners` and `removeMulticallListeners` actions take in an object with three properties: `chainId`, which specifies the blockchain network to fetch data from, `calls`, which is an array of `Call` objects that specify the data to fetch, and `options`, which is an object of type `ListenerOptions`. These actions are used to add and remove listeners for fetching data from multiple sources in the blockchain network.\n\nThe `fetchingMulticallResults` action takes in an object with three properties: `chainId`, `calls`, and `fetchingBlockNumber`. This action is dispatched when the data is being fetched from the blockchain network. The `errorFetchingMulticallResults` action takes in an object with the same properties as `fetchingMulticallResults`, but is dispatched when there is an error fetching the data.\n\nThe `updateMulticallResults` action takes in an object with three properties: `chainId`, `blockNumber`, and `results`. This action is dispatched when the data has been successfully fetched from the blockchain network. The `results` property is an object with keys that correspond to the `Call` objects in the `calls` array, and values that are either strings or null.\n\nOverall, this code provides a set of actions and an interface for fetching data from multiple sources in a blockchain network. These actions can be used in a Redux store to manage the state of the data fetching process. For example, the `addMulticallListeners` action can be dispatched when a component mounts to start fetching data, and the `updateMulticallResults` action can be used to update the state of the store with the fetched data. Here is an example of how these actions can be used in a Redux store:\n\n```\nimport { createStore } from 'redux'\nimport { addMulticallListeners, updateMulticallResults } from './path/to/zoo'\n\nconst initialState = {\n data: {}\n}\n\nfunction reducer(state = initialState, action) {\n switch (action.type) {\n case 'multicall/addMulticallListeners':\n // start fetching data\n return state\n case 'multicall/updateMulticallResults':\n // update state with fetched data\n return {\n ...state,\n data: {\n ...state.data,\n [action.chainId]: {\n ...state.data[action.chainId],\n [action.blockNumber]: action.results\n }\n }\n }\n default:\n return state\n }\n}\n\nconst store = createStore(reducer)\n\n// dispatch addMulticallListeners action to start fetching data\nstore.dispatch(addMulticallListeners({\n chainId: 1,\n calls: [{}, {}, {}],\n options: { blocksPerFetch: 1 }\n}))\n\n// dispatch updateMulticallResults action to update state with fetched data\nstore.dispatch(updateMulticallResults({\n chainId: 1,\n blockNumber: 12345,\n results: {\n 'call1': 'result1',\n 'call2': 'result2',\n 'call3': null\n }\n}))\n```\n## Questions: \n 1. What is the purpose of the `Call` interface in the `import` statement?\n- The `Call` interface is imported from the `utils` module, but its purpose is not clear from this code alone.\n\n2. What is the `multicall` feature and how does it work?\n- The code defines several actions related to `multicall`, but it is not clear what this feature is or how it is implemented.\n\n3. What is the expected format of the `results` object in the `updateMulticallResults` action?\n- The `updateMulticallResults` action takes an object with a `results` property that is an object with string keys and string or null values. It is not clear what these keys and values represent or how they are used.","metadata":{"source":".autodoc/docs/markdown/core/src/state/multicall/actions.md"}}],["1199",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/multicall/hooks.ts)\n\nThe code in this file provides functions and hooks for interacting with smart contracts on the Ethereum blockchain. It imports various utility functions and types from other files and libraries, including `utils`, `@ethersproject/abi`, and `@ethersproject/bignumber`. \n\nThe `useCallsData` function is the lowest-level function for subscribing to contract data. It takes an array of `Call` objects, which contain the address and encoded data for a contract method call, and an optional `ListenerOptions` object. It returns an array of `CallResult` objects, which contain the result data and block number for each call. This function is used by the higher-level hooks `useSingleContractMultipleData`, `useMultipleContractSingleData`, and `useSingleCallResult`.\n\n`useSingleContractMultipleData` is a hook that takes a `Contract` object, a method name, an array of method inputs, and optional `ListenerOptions` and `gasRequired` objects. It returns an array of `CallState` objects, which contain information about the state of each method call. This hook is used when you want to call the same method on a single contract with multiple sets of inputs.\n\n`useMultipleContractSingleData` is a hook that takes an array of contract addresses, a contract interface, a method name, method inputs, and optional `ListenerOptions` and `gasRequired` objects. It returns an array of `CallState` objects, which contain information about the state of each method call. This hook is used when you want to call the same method on multiple contracts with the same inputs.\n\n`useSingleCallResult` is a hook that takes a `Contract` object, a method name, method inputs, and optional `ListenerOptions` and `gasRequired` objects. It returns a single `CallState` object, which contains information about the state of the method call. This hook is used when you want to call a single method on a single contract.\n\nThe `toCallState` function takes a `CallResult` object, a contract interface, a method fragment, and the latest block number, and returns a `CallState` object. This function is used by the higher-level hooks to convert the `CallResult` objects into `CallState` objects.\n\nOverall, this file provides a set of hooks and functions that make it easy to interact with smart contracts on the Ethereum blockchain. These hooks and functions can be used in a larger project to fetch data from contracts and display it in a user interface. Here is an example of how to use the `useSingleCallResult` hook:\n\n```\nimport { useSingleCallResult } from './path/to/zoo'\n\nconst MyComponent = ({ contract }) => {\n const { result, loading, error } = useSingleCallResult(contract, 'balanceOf', ['0x123...'])\n\n if (loading) {\n return Loading...
\n }\n\n if (error) {\n return Error fetching balance
\n }\n\n return Balance: {result?.[0]}
\n}\n```\n## Questions: \n 1. What is the purpose of the `useCallsData` function?\n- The `useCallsData` function is the lowest level call for subscribing to contract data and returns an array of `CallResult` objects.\n\n2. What is the purpose of the `useSingleContractMultipleData` function?\n- The `useSingleContractMultipleData` function is used to fetch multiple data points from a single contract and returns an array of `CallState` objects.\n\n3. What is the purpose of the `useSingleCallResult` function?\n- The `useSingleCallResult` function is used to fetch a single data point from a single contract and returns a single `CallState` object.","metadata":{"source":".autodoc/docs/markdown/core/src/state/multicall/hooks.md"}}],["1200",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/multicall/reducer.ts)\n\nThis code defines a Redux reducer for handling the state of a multicall feature in the larger project. The multicall feature allows for batching of multiple Ethereum contract function calls into a single request, which can improve performance and reduce gas costs. \n\nThe `MulticallState` interface defines the shape of the state object, which includes two properties: `callListeners` and `callResults`. `callListeners` is an object that stores the preferences of listeners for each call key and how many listeners there are per each blocks per fetch preference. `callResults` is an object that stores the results of each call key, including the data returned, the block number at which the call was made, and the block number at which the data was fetched. \n\nThe `initialState` object sets the initial state of the reducer, which only includes an empty `callResults` object. \n\nThe `createReducer` function from the `@reduxjs/toolkit` library is used to create the reducer. The `builder` object is used to define the reducer's behavior for each action type. \n\nThe `addMulticallListeners` action adds listeners for multiple contract function calls. It takes in an array of `calls`, a `chainId`, and an object of `options` that includes a `blocksPerFetch` preference. The reducer updates the `callListeners` object to include the new listeners for the specified `chainId` and `callKey`. If the `callKey` or `blocksPerFetch` preference already exists, the listener count is incremented. \n\nThe `removeMulticallListeners` action removes listeners for multiple contract function calls. It takes in an array of `calls`, a `chainId`, and an object of `options` that includes a `blocksPerFetch` preference. The reducer updates the `callListeners` object to remove the specified listeners for the specified `chainId` and `callKey`. If the `callKey` or `blocksPerFetch` preference still has listeners, the listener count is decremented. \n\nThe `fetchingMulticallResults` action updates the `callResults` object to indicate that the specified contract function calls are being fetched. It takes in a `chainId`, a `fetchingBlockNumber`, and an array of `calls`. The reducer updates the `callResults` object to include the specified `fetchingBlockNumber` for each `callKey`. If the `callKey` already has a `fetchingBlockNumber` that is greater than or equal to the specified `fetchingBlockNumber`, the reducer does not update the state. \n\nThe `errorFetchingMulticallResults` action updates the `callResults` object to indicate that there was an error fetching the specified contract function calls. It takes in a `fetchingBlockNumber`, a `chainId`, and an array of `calls`. The reducer updates the `callResults` object to set the `data` property to `null` for each `callKey` that has a `fetchingBlockNumber` equal to the specified `fetchingBlockNumber`. \n\nThe `updateMulticallResults` action updates the `callResults` object with the results of the specified contract function calls. It takes in a `chainId`, an object of `results` that maps `callKey` to data, and a `blockNumber`. The reducer updates the `callResults` object to include the specified `results` and `blockNumber` for each `callKey`. If the `callKey` already has a `blockNumber` that is greater than the specified `blockNumber`, the reducer does not update the state. \n\nOverall, this code provides a way to manage the state of a multicall feature in the larger project. It allows for adding and removing listeners for multiple contract function calls, tracking the results of those calls, and handling errors that may occur during the fetching process. This code can be used in conjunction with other parts of the project to implement the multicall feature and improve performance and gas costs. \n\nExample usage:\n\n```javascript\nimport multicallReducer from './multicallReducer'\nimport { configureStore } from '@reduxjs/toolkit'\n\nconst store = configureStore({\n reducer: {\n multicall: multicallReducer,\n },\n})\n\n// Add listeners for multiple contract function calls\nstore.dispatch(addMulticallListeners({\n calls: [\n { address: '0x123...', data: '0x123...' },\n { address: '0x456...', data: '0x456...' },\n ],\n chainId: 1,\n options: { blocksPerFetch: 5 },\n}))\n\n// Fetch the results of the contract function calls\nstore.dispatch(fetchingMulticallResults({\n chainId: 1,\n fetchingBlockNumber: 12345,\n calls: [\n { address: '0x123...', data: '0x123...' },\n { address: '0x456...', data: '0x456...' },\n ],\n}))\n\n// Update the results of the contract function calls\nstore.dispatch(updateMulticallResults({\n chainId: 1,\n results: {\n '0x123...': '0xabc...',\n '0x456...': '0xdef...',\n },\n blockNumber: 12345,\n}))\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a Redux reducer for handling multicall state, which includes call listeners and call results for different chains.\n\n2. What are the inputs and outputs of the `addMulticallListeners` function?\n- The `addMulticallListeners` function takes in an array of calls, a chain ID, and a blocks per fetch option, and updates the call listeners state accordingly. It does not have any output.\n\n3. What is the purpose of the `updateMulticallResults` case?\n- The `updateMulticallResults` case updates the call results state with the results of a multicall query for a specific chain and block number. It only updates the state for call keys that have not already been updated with a later block number.","metadata":{"source":".autodoc/docs/markdown/core/src/state/multicall/reducer.md"}}],["1201",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/multicall/updater.tsx)\n\nThe `Updater` function in this file is responsible for fetching data from a smart contract using the Multicall2 contract. The Multicall2 contract allows multiple calls to be made to a smart contract in a single transaction, which can improve efficiency and reduce gas costs. \n\nThe `Updater` function uses several helper functions to determine which calls need to be made and how often they need to be made. The `activeListeningKeys` function takes in a list of all listeners and the current chain ID and returns a mapping of each call key to the minimum number of blocks per fetch. This determines how often each key must be fetched. The `outdatedListeningKeys` function takes in the current call result state, the listening keys, the chain ID, and the latest block number. It returns the keys that need to be refetched based on how old the data can be in blocks. \n\nThe `Updater` function then uses the `useEffect` hook to fetch the data for the outdated call keys. It chunks the calls into smaller groups and uses the `fetchChunk` function to fetch the data for each group. If any calls fail, the `errorFetchingMulticallResults` function is called to handle the error. If the calls are successful, the `updateMulticallResults` function is called to update the state with the new results. \n\nOverall, this code is an important part of the larger project because it allows for efficient and cost-effective fetching of data from smart contracts. It uses the Multicall2 contract to make multiple calls in a single transaction and determines which calls need to be made and how often they need to be made. This can improve the performance of the application and reduce gas costs. \n\nExample usage:\n\n```\nimport Updater from './Updater'\n\nfunction App() {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `fetchChunk` function?\n - The `fetchChunk` function fetches a chunk of calls from a multicall contract, enforcing a minimum block number constraint.\n2. What is the purpose of the `activeListeningKeys` function?\n - The `activeListeningKeys` function returns each call key mapped to the minimum number of blocks per fetch, based on the current all listeners state and chain ID.\n3. What is the purpose of the `Updater` component?\n - The `Updater` component is responsible for fetching and updating multicall results based on the current call listeners and call results state, as well as the latest block number and chain ID.","metadata":{"source":".autodoc/docs/markdown/core/src/state/multicall/updater.md"}}],["1202",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/multicall/utils.ts)\n\nThis file contains two functions and an interface related to encoding and decoding Ethereum contract calls. The `Call` interface defines the structure of a contract call, including the address of the contract and the data to be sent with the call. The `toCallKey` function takes a `Call` object and returns a string that can be used as a key for caching the result of the call. The key is constructed by concatenating the contract address and call data, separated by a hyphen. If the `gasRequired` property is present in the `Call` object, it is also included in the key. If `gasRequired` is not a safe integer, an error is thrown.\n\nThe `parseCallKey` function takes a string that was generated by `toCallKey` and returns a `Call` object. The string is split on hyphens, and the resulting array is used to populate the `address` and `callData` properties of the `Call` object. If the array has a length of 3, the third element is parsed as an integer and used to set the `gasRequired` property of the `Call` object. If the array has a length other than 2 or 3, an error is thrown.\n\nThese functions are likely used in the larger project to cache the results of contract calls in order to reduce the number of calls made to the Ethereum network. By using the `toCallKey` function to generate a key based on the contract address and call data, the project can check if the result of a call has already been cached before making a new call. The `parseCallKey` function is used to decode the cached key back into a `Call` object so that the cached result can be returned. \n\nExample usage:\n\n```\nconst call: Call = {\n address: '0x1234567890123456789012345678901234567890',\n callData: '0xabcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789',\n gasRequired: 1000000,\n}\n\nconst key = toCallKey(call)\nconsole.log(key) // '0x1234567890123456789012345678901234567890-0xabcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789-1000000'\n\nconst parsedCall = parseCallKey(key)\nconsole.log(parsedCall) // { address: '0x1234567890123456789012345678901234567890', callData: '0xabcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789', gasRequired: 1000000 }\n```\n## Questions: \n 1. What is the purpose of the `Call` interface?\n - The `Call` interface defines the structure of an object that contains an `address` and `callData` property, and optionally a `gasRequired` property.\n\n2. What does the `toCallKey` function do?\n - The `toCallKey` function takes a `Call` object as input and returns a string that concatenates the `address` and `callData` properties. If the `gasRequired` property is present, it is also appended to the string.\n\n3. What is the purpose of the `parseCallKey` function?\n - The `parseCallKey` function takes a string as input and returns a `Call` object that contains the `address` and `callData` properties parsed from the input string. If the input string contains a `gasRequired` value, it is also included in the returned object.","metadata":{"source":".autodoc/docs/markdown/core/src/state/multicall/utils.md"}}],["1203",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/network/actions.ts)\n\nThe code above is a function that updates the gas price of a network using the createAsyncThunk method from the Redux Toolkit library. The gas price is the amount of ether that a user is willing to pay for a transaction to be processed on the Ethereum network. \n\nThe function takes in a library object as a parameter, which is expected to have an eth property that contains a getGasPrice method. This method is used to retrieve the current gas price in wei (the smallest unit of ether). The wei price is then converted to a number and returned as an object with a gasPrice property.\n\nThis function can be used in a larger project that involves interacting with the Ethereum network. For example, it can be used in a dApp (decentralized application) that allows users to perform transactions on the network. The gas price is an important parameter to consider when submitting a transaction, as it determines how quickly the transaction will be processed by the network. By updating the gas price, the function can help ensure that transactions are processed in a timely manner.\n\nHere is an example of how this function can be used in a Redux slice:\n\n```\nimport { updateGasPrice } from './gasPriceSlice'\n\nconst gasPriceSlice = createSlice({\n name: 'gasPrice',\n initialState: { gasPrice: 0 },\n reducers: {},\n extraReducers: (builder) => {\n builder.addCase(updateGasPrice.fulfilled, (state, action) => {\n state.gasPrice = action.payload.gasPrice\n })\n },\n})\n\nexport default gasPriceSlice.reducer\n```\n\nIn this example, the updateGasPrice function is used as an extra reducer in a gasPriceSlice. When the function is fulfilled (i.e. when the gas price is successfully updated), the gasPrice state is updated with the new value. This allows other parts of the application to access the current gas price and use it when submitting transactions to the network.\n## Questions: \n 1. What is the purpose of the `createAsyncThunk` function and how does it work?\n- `createAsyncThunk` is a function provided by the `@reduxjs/toolkit` library that allows developers to create asynchronous Redux action creators. It takes in a string argument representing the action type and an async function that returns the payload data.\n\n2. What is the `updateGasPrice` action responsible for and how is it triggered?\n- The `updateGasPrice` action is responsible for fetching the current gas price from the Ethereum network using the provided `library` object and returning it as the payload data. It is triggered by dispatching the action to the Redux store.\n\n3. What is the expected data type of the `library` parameter and where is it defined?\n- The `library` parameter is expected to be of type `any` and is not defined within this code file. It is likely defined elsewhere in the project and passed as an argument when dispatching the `updateGasPrice` action.","metadata":{"source":".autodoc/docs/markdown/core/src/state/network/actions.md"}}],["1204",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/network/hooks.ts)\n\nThis code is a custom hook that utilizes the `useSelector` hook from the `react-redux` library to retrieve the current gas price from the `NetworkState` reducer. The `useGasPrice` hook can be used in any component that needs to access the gas price value from the Redux store.\n\nThe `useSelector` hook takes a selector function as its argument, which is used to extract a specific piece of state from the Redux store. In this case, the selector function takes the `NetworkState` object as its argument and returns the `gasPrice` value.\n\nThe `useGasPrice` hook returns the `gasPrice` value, which is either a number or `undefined`. This allows components to handle the case where the gas price has not yet been fetched or is not available.\n\nHere is an example of how this hook can be used in a component:\n\n```\nimport React from 'react'\nimport { useGasPrice } from './useGasPrice'\n\nfunction GasPrice() {\n const gasPrice = useGasPrice()\n\n if (gasPrice === undefined) {\n return Loading gas price...
\n }\n\n return Current gas price: {gasPrice} Gwei
\n}\n```\n\nIn this example, the `GasPrice` component uses the `useGasPrice` hook to retrieve the current gas price from the Redux store. If the gas price is not yet available, the component displays a loading message. Otherwise, it displays the current gas price in Gwei units.\n\nOverall, this code provides a simple and reusable way to access the gas price value from the Redux store in any component that needs it.\n## Questions: \n 1. What is the purpose of the `useSelector` hook from `react-redux` being used in this code?\n - The `useSelector` hook is used to extract data from the Redux store state, specifically the `gasPrice` value from the `NetworkState` reducer.\n\n2. What is the expected return type of the `useGasPrice` function?\n - The expected return type of the `useGasPrice` function is either a number or `undefined`.\n\n3. What is the `NetworkState` import and how is it used in this code?\n - The `NetworkState` import is likely a custom type or interface defined in the `reducer` file. It is used as the type for the `state` argument in the `useSelector` callback function to ensure type safety when accessing the `gasPrice` value from the Redux store state.","metadata":{"source":".autodoc/docs/markdown/core/src/state/network/hooks.md"}}],["1205",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/network/reducer.ts)\n\nThis code is a TypeScript module that exports a Redux reducer function for managing the state of a network in a larger project called \"zoo\". The reducer function is created using the `createReducer` function from the `@reduxjs/toolkit` library, which simplifies the process of creating Redux reducers by providing a more concise syntax and built-in immutability handling.\n\nThe `NetworkState` interface defines the shape of the state object managed by the reducer, which in this case includes a single property `gasPrice` of type `number`. The `initialState` constant initializes the state object with a `gasPrice` value of 0.\n\nThe reducer function is defined using the `createReducer` function, which takes the initial state object and a \"builder\" function that defines how the state should be updated in response to different actions. In this case, the builder function uses the `addCase` method to define a single case that responds to the `updateGasPrice.fulfilled` action. When this action is dispatched, the reducer updates the `gasPrice` property of the state object with the value provided in the action payload.\n\nThis reducer function can be used in conjunction with other Redux functionality to manage the state of the network in the larger \"zoo\" project. For example, an action creator function could be defined to dispatch the `updateGasPrice` action with a new gas price value, and a component could use the `useSelector` hook from the `react-redux` library to access the current `gasPrice` value from the state object.\n\nExample usage:\n\n```\nimport { useDispatch, useSelector } from 'react-redux'\nimport { updateGasPrice } from './actions'\nimport { NetworkState } from './reducer'\n\nfunction NetworkComponent() {\n const dispatch = useDispatch()\n const gasPrice = useSelector((state: { network: NetworkState }) => state.network.gasPrice)\n\n function handleGasPriceChange(newPrice: number) {\n dispatch(updateGasPrice(newPrice))\n }\n\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `createReducer` function and how does it work?\n- `createReducer` is a function from the `@reduxjs/toolkit` library that creates a Redux reducer function based on a set of case reducers. It takes an initial state and a builder function that defines the case reducers, which are functions that handle specific actions and update the state accordingly.\n\n2. What is the `updateGasPrice` action and where is it defined?\n- `updateGasPrice` is an action that is imported from a file located at `./actions`. Without seeing the contents of that file, it's unclear what the action does or how it is defined.\n\n3. What is the purpose of the `NetworkState` interface and how is it used?\n- `NetworkState` is an interface that defines the shape of the state object for the `Network` slice of the Redux store. It includes a single property `gasPrice` of type `number`. The interface is used to define the type of the `initialState` object and the `state` parameter in the case reducer function.","metadata":{"source":".autodoc/docs/markdown/core/src/state/network/reducer.md"}}],["1206",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/reducer.ts)\n\nThis code is a part of a larger project called \"zoo\" and it imports the `combineReducers` function from the `@reduxjs/toolkit` library. The purpose of this code is to combine all the reducers from different modules of the project into a single reducer that can be used by the Redux store.\n\nThe `combineReducers` function takes an object as an argument, where each key represents a slice of the state and the corresponding value is the reducer function that manages that slice of the state. In this code, the object passed to `combineReducers` contains all the reducers from different modules of the project. Each reducer is imported from a separate file and given a key that represents the slice of the state it manages.\n\nFor example, the `application` reducer manages the state related to the application, such as the current theme, language, and notifications. Similarly, the `user` reducer manages the state related to the user, such as the user's wallet address, balance, and transaction history. The `transactions` reducer manages the state related to the transactions, such as the pending and completed transactions. The `swap`, `mint`, `burn`, and `limitOrder` reducers manage the state related to the corresponding functionalities of the project.\n\nOnce all the reducers are combined using `combineReducers`, the resulting reducer is exported as the default export of this module. This combined reducer can then be used to create the Redux store for the project.\n\nFor example, in another module of the project, we can import this combined reducer and use it to create the Redux store as follows:\n\n```\nimport { createStore } from \"redux\";\nimport rootReducer from \"./path/to/rootReducer\";\n\nconst store = createStore(rootReducer);\n```\n\nIn summary, this code combines all the reducers from different modules of the \"zoo\" project into a single reducer that can be used to create the Redux store. This allows the project to manage its state in a structured and organized way, making it easier to maintain and scale.\n## Questions: \n 1. What is the purpose of this code?\n - This code is combining multiple reducers from different files into a single reducer using the `combineReducers` function from the `@reduxjs/toolkit` library.\n\n2. What are the different reducers being combined?\n - The different reducers being combined are `application`, `user`, `transactions`, `swap`, `mint`, `burn`, `multicall`, `network`, `lists`, `limitOrder`, `create`, `inari`, `zoo`, `store`, `voting`, `bridge`, and `drop`.\n\n3. What is the significance of the `zoo` reducer?\n - The `zoo` reducer is one of the reducers being combined and it is likely specific to this project. Without more context, it is unclear what its purpose is within the overall application.","metadata":{"source":".autodoc/docs/markdown/core/src/state/reducer.md"}}],["1207",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/stake/hook.ts)\n\nThis file contains two functions that are used to derive stake and unstake information based on typed input values. These functions are exported for use in other parts of the project. \n\nThe `useDerivedStakeInfo` function takes in three parameters: `typedValue`, `stakingToken`, and `userLiquidityUnstaked`. `typedValue` is a string representing the user's input value. `stakingToken` is a `Token` object representing the token being staked. `userLiquidityUnstaked` is a `CurrencyAmount` object representing the amount of unstaked liquidity the user has. \n\nThe function first uses the `tryParseAmount` function to parse the `typedValue` into a `CurrencyAmount` object. If the parsing is successful and the parsed amount is less than or equal to the user's unstaked liquidity, the parsed amount is returned. Otherwise, the function returns `undefined`. \n\nThe function also checks if the user is connected to a wallet and sets an error message accordingly. If the parsed amount is not valid, the error message is set to \"Enter an amount\". The function returns an object containing the parsed amount and error message. \n\nThe `useDerivedUnstakeInfo` function takes in two parameters: `typedValue` and `stakingAmount`. `typedValue` is a string representing the user's input value. `stakingAmount` is a `CurrencyAmount` object representing the amount of liquidity being staked. \n\nThe function first uses the `tryParseAmount` function to parse the `typedValue` into a `CurrencyAmount` object. If the parsing is successful and the parsed amount is less than or equal to the staked liquidity, the parsed amount is returned. Otherwise, the function returns `undefined`. \n\nThe function also checks if the user is connected to a wallet and sets an error message accordingly. If the parsed amount is not valid, the error message is set to \"Enter an amount\". The function returns an object containing the parsed amount and error message. \n\nThese functions are useful for validating user input and deriving stake and unstake information. They can be used in other parts of the project where stake and unstake functionality is required. For example, they could be used in a form where the user enters the amount they want to stake or unstake. The functions would validate the input and return the parsed amount or an error message.\n## Questions: \n 1. What is the purpose of this code?\n \n This code exports two functions, `useDerivedStakeInfo` and `useDerivedUnstakeInfo`, which are used to derive stake and unstake information respectively based on user input.\n\n2. What external dependencies does this code rely on?\n \n This code relies on several external dependencies, including `@zoolabs/zdk`, `@lingui/macro`, `../../functions`, and `../../hooks/useActiveWeb3React`.\n\n3. What is the expected input and output of the `useDerivedStakeInfo` and `useDerivedUnstakeInfo` functions?\n \n Both functions take a string `typedValue` as input, along with other optional parameters depending on the function. They return an object with two properties: `parsedAmount`, which is a `CurrencyAmountCurrent gas price: {gasPrice}
\n handleGasPriceChange(Number(e.target.value))} />\n\n handleTypeInput(Field.INPUT, e.target.value)} />\n \n \n \n handleSetRecipient(e.target.value)} />\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `SwapState` interface?\n- The `SwapState` interface defines the shape of the state object used in the `zoo` project's swap feature.\n\n2. What is the role of the `createReducer` function from `@reduxjs/toolkit`?\n- The `createReducer` function is used to create a Redux reducer function that handles state updates for the `SwapState` object.\n\n3. What is the significance of the `replaceSwapState` action?\n- The `replaceSwapState` action is used to replace the entire `SwapState` object with a new state object that is passed as the payload. This action is used to update the state when a user types in a new value, selects a new currency, or switches the input/output fields.","metadata":{"source":".autodoc/docs/markdown/core/src/state/swap/reducer.md"}}],["1213",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/toasts/index.ts)\n\nThis code defines a Redux slice for managing a stack of toast notifications. Toast notifications are small messages that appear on the screen to provide feedback to the user. The `ToastsState` type is defined in a separate file and specifies that the `data` property is an array of `Toast` objects. \n\nThe `createSlice` function from the `@reduxjs/toolkit` library is used to create the slice. It takes an object with several properties, including `name`, `initialState`, and `reducers`. The `name` property is a string that identifies the slice in the Redux store. The `initialState` property is an object that specifies the initial state of the slice. In this case, the `data` property is an empty array. The `reducers` property is an object that defines the actions that can be dispatched to modify the state of the slice.\n\nThe `push` reducer adds a new toast to the top of the stack. It takes a `Toast` object as its payload and adds it to the beginning of the `data` array. If a toast with the same `id` already exists in the stack, it is removed before the new toast is added. This ensures that there are no duplicate toasts in the stack.\n\nThe `remove` reducer removes a toast from the stack. It takes a string as its payload, which is the `id` of the toast to be removed. It finds the index of the toast with the matching `id` and removes it from the `data` array.\n\nThe `clear` reducer removes all toasts from the stack. It sets the `data` property to an empty array.\n\nThe `push`, `remove`, and `clear` actions are exported from the module and can be used to dispatch the corresponding reducers. The `default` export is the reducer function itself.\n\nThis code can be used in a larger project to manage toast notifications. Other parts of the application can dispatch the `push` action to add new toasts to the stack, the `remove` action to remove a specific toast, or the `clear` action to remove all toasts. The state of the toast stack can be accessed from the Redux store using the `toasts` slice name. For example, to get the current stack of toasts:\n\n```javascript\nimport { useSelector } from 'react-redux'\n\nconst toasts = useSelector((state) => state.toasts.data)\n```\n## Questions: \n 1. What is the purpose of the `ToastsState` type?\n - The `ToastsState` type is used to define the initial state of the `toastsSlice` slice, which contains an array of `Toast` objects.\n2. What is the role of the `push` reducer function?\n - The `push` reducer function is used to add a new `Toast` object to the beginning of the `data` array in the `toastsSlice` slice. If a `Toast` with the same `id` already exists in the array, it is removed before the new `Toast` is added.\n3. What is the relationship between the `toastsSlice` slice and the `clear`, `remove`, and `push` actions?\n - The `toastsSlice` slice is created using the `createSlice` function from the `@reduxjs/toolkit` library, and it defines the `clear`, `remove`, and `push` actions as reducers. These actions can be dispatched to modify the state of the `toastsSlice` slice.","metadata":{"source":".autodoc/docs/markdown/core/src/state/toasts/index.md"}}],["1214",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/transactions/actions.ts)\n\nThis code defines a set of actions and interfaces related to transactions in the Zoo project. The `import` statements at the top of the file bring in the `ChainId` type from the `@zoolabs/zdk` library and the `createAction` function from the `@reduxjs/toolkit` library.\n\nThe `SerializableTransactionReceipt` interface defines the shape of a transaction receipt object that can be serialized and stored in the project's state. It includes properties such as the `to` and `from` addresses, the `transactionHash`, and the `blockNumber`.\n\nThe file then exports four different actions using the `createAction` function. Each action corresponds to a different type of transaction-related event that can occur in the project. \n\nThe `addTransaction` action is used to add a new transaction to the project's state. It takes an object as its payload that includes the `chainId`, `hash`, `from` address, and optional `approval`, `claim`, `summary`, and `archer` properties. These properties provide additional context about the transaction, such as the token being approved or the recipient of a claim.\n\nThe `clearAllTransactions` action is used to clear all transactions from the project's state for a given `chainId`.\n\nThe `finalizeTransaction` action is used to update the project's state with the final details of a transaction, such as the `receipt` object that includes information about the transaction's execution.\n\nThe `checkedTransaction` action is used to update the project's state with the latest block number for a given transaction.\n\nOverall, this code provides a set of actions and interfaces that can be used to manage transactions in the Zoo project. These actions can be dispatched from other parts of the project to update the state and trigger side effects, such as displaying transaction details to the user or triggering additional actions based on the outcome of a transaction. Here is an example of how the `addTransaction` action might be used:\n\n```\nimport { addTransaction } from 'zoo/transactions'\n\nconst transaction = {\n chainId: 1,\n hash: '0x123abc',\n from: '0x456def',\n approval: { tokenAddress: '0x789ghi', spender: '0xabcjkl' },\n summary: 'Approved tokens for spending'\n}\n\ndispatch(addTransaction(transaction))\n```\n## Questions: \n 1. What is the purpose of the `addTransaction` function?\n - The `addTransaction` function is a Redux action creator that adds a new transaction to the state with various properties such as chainId, hash, from, approval, claim, summary, and archer.\n\n2. What is the `SerializableTransactionReceipt` interface used for?\n - The `SerializableTransactionReceipt` interface defines the structure of a transaction receipt object that contains information such as the sender, recipient, contract address, transaction hash, block number, and status.\n\n3. What is the `checkedTransaction` function used for?\n - The `checkedTransaction` function is a Redux action creator that updates the block number of a transaction with the given hash on the specified chain.","metadata":{"source":".autodoc/docs/markdown/core/src/state/transactions/actions.md"}}],["1215",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/transactions/hooks.tsx)\n\nThis file contains several functions and hooks related to managing transactions in a decentralized application. \n\nThe `useTransactionAdder` function is a helper function that takes a transaction response from an ethers library and adds it to the list of transactions. It returns a function that can be called with the transaction response and optional custom data such as a summary, approval, claim, or archer. This function checks if there is an account and chainId available, and if so, dispatches an action to add the transaction to the store.\n\nThe `useAllTransactions` function returns all the transactions for the current chain. It uses the `useActiveWeb3React` hook to get the current chainId and the `useAppSelector` hook to get the transactions from the store. It returns an object with the transaction hash as the key and the transaction details as the value.\n\nThe `useIsTransactionPending` function takes a transaction hash and returns a boolean indicating whether the transaction is pending. It uses the `useAllTransactions` hook to get all the transactions and checks if the transaction hash exists and if there is no receipt for the transaction.\n\nThe `isTransactionRecent` function takes a transaction and returns a boolean indicating whether the transaction happened in the last day. It compares the current time to the time the transaction was added.\n\nThe `useHasPendingApproval` function takes a token address and spender and returns a boolean indicating whether there is a pending approval transaction for the token and spender. It uses the `useAllTransactions` hook to get all the transactions and filters them based on the token address, spender, and recency using the `isTransactionRecent` function.\n\nThe `useUserHasSubmittedClaim` function takes an account and returns an object with a boolean indicating whether the user has submitted a claim and the transaction details for the claim if it exists. It uses the `useAllTransactions` hook to get all the transactions and filters them based on the claim recipient and account.\n\nThe `useTransactionPopups` function returns an object with functions to add error, warning, and transaction popups. It uses the `useAddPopup` and `useTransactionAdder` hooks to add the popups and transactions. It also takes optional callbacks for when a transaction is pending or has a receipt. \n\nOverall, these functions and hooks provide a way to manage transactions in a decentralized application by adding, retrieving, and checking the status of transactions. They can be used in conjunction with other parts of the application to provide feedback to the user and manage state. For example, the `useHasPendingApproval` function can be used to disable a button until the approval transaction is confirmed.\n## Questions: \n 1. What is the purpose of the `useTransactionAdder` function?\n- The `useTransactionAdder` function is a helper function that takes a transaction response and adds it to the list of transactions.\n2. What does the `useHasPendingApproval` function do?\n- The `useHasPendingApproval` function returns whether a token has a pending approval transaction.\n3. What is the purpose of the `useTransactionPopups` function?\n- The `useTransactionPopups` function is used to add error, warning, and transaction popups to the UI. It takes in optional callbacks for handling pending transactions and transaction receipts.","metadata":{"source":".autodoc/docs/markdown/core/src/state/transactions/hooks.md"}}],["1216",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/transactions/reducer.ts)\n\nThis code defines a Redux reducer for managing transaction details in a multi-chain environment. The `TransactionDetails` interface defines the shape of a transaction object, which includes various details such as the transaction hash, approval information, summary, claim recipient, receipt, and timestamps. The `TransactionState` interface defines the shape of the state object, which is a nested object with chain IDs as keys and transaction hashes as sub-keys, with each value being a `TransactionDetails` object.\n\nThe reducer defines four cases using the `createReducer` function from the `@reduxjs/toolkit` package. The `addTransaction` case adds a new transaction to the state object, given the chain ID, sender address, transaction hash, approval information, summary, claim recipient, and Archer details. If the transaction already exists in the state object, an error is thrown. The `clearAllTransactions` case clears all transactions for a given chain ID. The `checkedTransaction` case updates the last checked block number for a given transaction hash and chain ID. The `finalizeTransaction` case updates the transaction receipt and confirmed time for a given transaction hash and chain ID.\n\nThis reducer can be used in a larger project that involves managing transactions across multiple chains, such as a decentralized exchange or a wallet application. For example, when a user initiates a transaction, the `addTransaction` case can be called to add the transaction details to the state object. As the transaction is processed and confirmed, the `checkedTransaction` and `finalizeTransaction` cases can be called to update the transaction details. The `clearAllTransactions` case can be used to clear all transactions for a given chain ID when the user switches to a different network. \n\nExample usage:\n\n```\nimport { addTransaction } from './actions'\nimport transactionReducer from './transactionReducer'\n\nconst store = configureStore({\n reducer: {\n transactions: transactionReducer,\n },\n})\n\nconst chainId = 1\nconst from = '0x123abc'\nconst hash = '0x456def'\nconst approval = { tokenAddress: '0x789ghi', spender: '0xabcjkl' }\nconst summary = 'Transaction summary'\nconst claim = { recipient: '0xdefmno' }\nconst archer = { deadline: 123456789, rawTransaction: '0x123abc', nonce: 1, ethTip: '0.1' }\n\nstore.dispatch(addTransaction({ chainId, from, hash, approval, summary, claim, archer }))\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a Redux reducer for managing transaction details, including adding, checking, and finalizing transactions.\n\n2. What is the `TransactionDetails` interface used for?\n- The `TransactionDetails` interface defines the shape of an object that stores details about a transaction, including its hash, approval, summary, claim, receipt, and other metadata.\n\n3. What is the `archer` property in the `TransactionDetails` interface?\n- The `archer` property is an optional object that stores additional details about a transaction that was submitted via Archer, including the deadline, raw transaction data, nonce, and ETH tip.","metadata":{"source":".autodoc/docs/markdown/core/src/state/transactions/reducer.md"}}],["1217",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/transactions/updater.tsx)\n\nThe `Updater` function in the `zoo` project is responsible for updating the state of transactions in the application. It does this by checking the status of transactions that have been submitted to the blockchain and updating the application state accordingly. \n\nThe `Updater` function imports several functions and hooks from other files in the project. These include `AppDispatch` and `AppState` from the `index` file, `RetryOptions`, `RetryableError`, and `retry` from the `retry` file, `checkedTransaction` and `finalizeTransaction` from the `actions` file, and `useAddPopup` and `useBlockNumber` from the `hooks` file. \n\nThe `Updater` function also imports `useCallback`, `useEffect`, and `useMemo` from the `react` library, and `ChainId` and `updateBlockNumber` from the `zdk` library. \n\nThe `Updater` function defines an interface called `TxInterface` that describes the properties of a transaction object. The `shouldCheck` function takes a `lastBlockNumber` and a `tx` object as arguments and returns a boolean value indicating whether the transaction should be checked. \n\nThe `Updater` function defines two constants: `RETRY_OPTIONS_BY_CHAIN_ID` and `DEFAULT_RETRY_OPTIONS`. These constants are used to set the retry options for fetching transaction receipts. \n\nThe `Updater` function then defines a component that returns `null`. This component uses several hooks to get the current state of the application, including `useActiveWeb3React`, `useBlockNumber`, `useAppDispatch`, and `useAppSelector`. \n\nThe `Updater` function also defines a `getReceipt` function that takes a transaction hash as an argument and returns a promise that resolves to the transaction receipt. This function uses the `retry` function to retry fetching the receipt if it is not available. \n\nThe `Updater` function uses the `useEffect` hook to check the status of transactions and update the application state accordingly. This hook runs whenever the `chainId`, `library`, `transactions`, `lastBlockNumber`, `dispatch`, `addPopup`, or `getReceipt` values change. \n\nOverall, the `Updater` function is an important part of the `zoo` project that ensures that the application state is updated with the latest information about transactions submitted to the blockchain.\n## Questions: \n 1. What is the purpose of the `shouldCheck` function?\n- The `shouldCheck` function determines whether a transaction should be checked for updates based on its current state and how long it has been pending.\n\n2. What is the significance of the `RETRY_OPTIONS_BY_CHAIN_ID` and `DEFAULT_RETRY_OPTIONS` constants?\n- These constants define the retry options for fetching transaction receipts based on the current chain ID. If the chain ID is not recognized, the default options are used.\n\n3. What is the purpose of the `Updater` component?\n- The `Updater` component is responsible for periodically checking the status of pending transactions and updating the state of the application accordingly. It also handles fetching transaction receipts and displaying popups on confirmation.","metadata":{"source":".autodoc/docs/markdown/core/src/state/transactions/updater.md"}}],["1218",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/user/actions.ts)\n\nThis code defines a set of actions that can be dispatched in a Redux store for the purpose of updating user preferences and settings related to a trading application. The actions are defined using the `createAction` function from the `@reduxjs/toolkit` library, which simplifies the process of creating Redux actions and reducers.\n\nThe actions include updating the user's preferences for dark mode, animation mode, expert mode, and single-hop only mode. They also include updating the user's slippage tolerance and deadline for trades, as well as adding and removing serialized tokens and pairs. Additionally, there are actions for toggling a URL warning and updating various settings related to the use of the Archer trading protocol.\n\nThese actions can be dispatched by components in the application to update the state of the Redux store, which can then be used to render the UI and make decisions about how to handle user interactions. For example, a component that displays the user's current slippage tolerance could subscribe to changes in the `userSlippageTolerance` state and update its display accordingly.\n\nHere is an example of how one of these actions might be dispatched:\n\n```\nimport { updateUserDarkMode } from 'zoo'\n\ndispatch(updateUserDarkMode({ userDarkMode: true }))\n```\n\nThis would dispatch the `updateUserDarkMode` action with a payload indicating that the user has enabled dark mode. The Redux store would then update its state accordingly, and any components that are subscribed to changes in the `userDarkMode` state would be re-rendered with the new value.\n## Questions: \n 1. What is the purpose of the `SerializedToken` and `SerializedPair` interfaces?\n - The `SerializedToken` and `SerializedPair` interfaces define the structure of objects used to represent tokens and pairs in a serialized format.\n2. What is the significance of the `createAction` function being imported from `@reduxjs/toolkit`?\n - The `createAction` function is a utility provided by the `@reduxjs/toolkit` package for creating Redux actions with a standardized format and payload structure.\n3. What is the purpose of the various `updateUser` and `updateArcher` actions?\n - The `updateUser` actions are used to update various user preferences and settings, while the `updateArcher` actions are specifically related to settings for using the Archer swap service.","metadata":{"source":".autodoc/docs/markdown/core/src/state/user/actions.md"}}],["1219",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/user/reducer.ts)\n\nThis code defines the Redux store for the user state in the Zoo project. The user state contains information about the user's preferences and settings, such as their choice for dark or light mode, animation mode, expert mode, and slippage tolerance. It also contains information about the tokens and pairs that the user has interacted with, as well as settings related to the Archer network, which is used for faster and more reliable trades.\n\nThe code defines an initial state for the user state, which includes default values for all the fields. It also defines a set of actions that can be dispatched to update the user state. These actions include updating the user's dark mode preference, animation mode, expert mode, slippage tolerance, and deadline for trades. They also include adding and removing serialized tokens and pairs, toggling the URL warning, and updating the Archer network settings.\n\nThe code uses the `createReducer` function from the `@reduxjs/toolkit` library to create a reducer function that handles all the defined actions. The reducer function updates the user state based on the dispatched action and returns the updated state.\n\nOverall, this code provides a central store for all the user-related information in the Zoo project and allows for easy updating of this information through dispatched actions. It can be used in conjunction with other parts of the project to provide a personalized and customizable experience for users. \n\nExample usage:\n\n```javascript\nimport { useDispatch, useSelector } from 'react-redux';\nimport { updateUserDarkMode } from './actions';\n\nfunction App() {\n const dispatch = useDispatch();\n const userDarkMode = useSelector(state => state.user.userDarkMode);\n\n const toggleDarkMode = () => {\n dispatch(updateUserDarkMode(!userDarkMode));\n }\n\n return (\n \n \n
\n );\n}\n```\n\nIn this example, the `useSelector` hook is used to access the `userDarkMode` field from the user state in the Redux store. The `updateUserDarkMode` action is dispatched when the user clicks the \"Toggle Dark Mode\" button, which updates the `userDarkMode` field in the user state. The `className` of the `div` element is set based on the `userDarkMode` field, which allows for easy theming of the app based on the user's preference.\n## Questions: \n 1. What is the purpose of the `zoo` project and how does this file fit into the overall project?\n- This code file is a reducer for the `UserState` slice of the Redux store in the `zoo` project. The purpose of the `zoo` project is not specified in the code provided.\n\n2. What actions can trigger updates to the `UserState` slice of the Redux store?\n- Updates to the `UserState` slice can be triggered by actions such as `updateUserDarkMode`, `updateUserAnimationMode`, `updateMatchesDarkMode`, `updateUserExpertMode`, `updateUserSlippageTolerance`, `updateUserDeadline`, `updateUserSingleHopOnly`, `addSerializedToken`, `removeSerializedToken`, `addSerializedPair`, `removeSerializedPair`, `toggleURLWarning`, `updateUserArcherUseRelay`, `updateUserArcherGasPrice`, `updateUserArcherETHTip`, `updateUserArcherGasEstimate`, and `updateUserArcherTipManualOverride`.\n\n3. What is the purpose of the `createReducer` function and how is it used in this code file?\n- The `createReducer` function is used to create a Redux reducer function that handles updates to the `UserState` slice of the Redux store. It takes an initial state object and a builder function that defines how the state should be updated in response to different actions. The builder function uses methods like `addCase` to define how the state should be updated for each action.","metadata":{"source":".autodoc/docs/markdown/core/src/state/user/reducer.md"}}],["1220",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/user/updater.tsx)\n\nThe code above is a React component that updates the dark mode of the application based on the system's preference. The component is called Updater and it imports the AppDispatch and updateMatchesDarkMode from the actions file. It also imports the useDispatch and useEffect hooks from the react-redux and react libraries respectively.\n\nThe Updater component uses the useEffect hook to keep the dark mode of the application in sync with the system. The useEffect hook takes a function as its first argument and an array of dependencies as its second argument. The function passed to useEffect is executed after the component is mounted and every time the dependencies change. In this case, the only dependency is the dispatch function.\n\nThe function passed to useEffect sets up an event listener for changes in the system's preference for dark mode. It first creates a darkHandler function that takes a MediaQueryListEvent as its argument. The darkHandler function dispatches an action to update the matchesDarkMode property in the store with the value of the match.matches property.\n\nThe function then creates a match variable that uses the window.matchMedia method to check if the system prefers dark mode. The value of match.matches is then dispatched to the store using the updateMatchesDarkMode action.\n\nThe function then checks if the match variable has an addListener method and adds the darkHandler function as a listener if it does. If not, it checks if the match variable has an addEventListener method and adds the darkHandler function as a listener if it does.\n\nFinally, the function returns a cleanup function that removes the event listener when the component is unmounted. The cleanup function checks if the match variable has a removeListener method and removes the darkHandler function as a listener if it does. If not, it checks if the match variable has a removeEventListener method and removes the darkHandler function as a listener if it does.\n\nOverall, the Updater component is a useful tool for keeping the dark mode of the application in sync with the system's preference. It can be used in the larger project to ensure that the application's dark mode is always up to date with the user's system settings. An example of how to use the Updater component in a larger project is shown below:\n\n```jsx\nimport React from 'react';\nimport Updater from './Updater';\n\nfunction App() {\n return (\n Welcome to the Zoo!
\n\n
\n );\n}\n\nexport default App;\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code is responsible for keeping the dark mode of the application in sync with the system's dark mode.\n\n2. What dependencies are being used in this code?\n- This code is using the `react-redux` and `react` dependencies.\n\n3. What is the significance of the `AppDispatch` type and how is it being used?\n- The `AppDispatch` type is being used to define the type of the `dispatch` function being used in this code. It ensures that the dispatched actions are properly typed and avoids potential errors.","metadata":{"source":".autodoc/docs/markdown/core/src/state/user/updater.md"}}],["1221",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/voting/actions.tsx)\n\nThis code is a module that exports several Redux actions related to a voting feature in the larger project. The `createAction` function is imported from the `@reduxjs/toolkit` library and is used to create action objects with a specific type string. \n\nThe `loading` action is used to indicate that the voting feature is currently loading. The `addProposals` action is used to add new proposals to the list of available proposals for voting. The `getAllProposals` action is used to retrieve all available proposals for voting. The `voteProposal` action is used to submit a vote for a specific proposal. The `getVotingPower` action is used to retrieve the voting power of a user. The `getVoterAllowance` action is used to retrieve the number of votes a user is allowed to cast.\n\nThese actions can be used in conjunction with a Redux store to manage the state of the voting feature. For example, when the `loading` action is dispatched, the UI can display a loading spinner until the feature is ready. When the `addProposals` action is dispatched, the UI can update to show the new proposals. When the `voteProposal` action is dispatched, the UI can update to show the user's vote and the updated vote count for the proposal.\n\nHere is an example of how these actions can be used in a Redux store:\n\n```\nimport { createSlice } from \"@reduxjs/toolkit\";\nimport * as votingActions from \"./votingActions\";\n\nconst initialState = {\n loading: false,\n proposals: [],\n votingPower: 0,\n voterAllowance: 0,\n};\n\nconst votingSlice = createSlice({\n name: \"voting\",\n initialState,\n reducers: {},\n extraReducers: (builder) => {\n builder\n .addCase(votingActions.loading, (state) => {\n state.loading = true;\n })\n .addCase(votingActions.addProposals, (state, action) => {\n state.proposals = action.payload;\n })\n .addCase(votingActions.getVotingPower, (state, action) => {\n state.votingPower = action.payload;\n })\n .addCase(votingActions.getVoterAllowance, (state, action) => {\n state.voterAllowance = action.payload;\n });\n },\n});\n\nexport default votingSlice.reducer;\n```\n\nIn this example, the `loading`, `addProposals`, `getVotingPower`, and `getVoterAllowance` actions are used to update the state of the voting feature in the Redux store. The `extraReducers` property of the `createSlice` function is used to define how the state should be updated when these actions are dispatched.\n## Questions: \n 1. What library is being used for creating actions in this code?\n- The code is using the \"@reduxjs/toolkit\" library for creating actions.\n\n2. What is the purpose of each action being created in this code?\n- The actions being created are for loading, adding proposals, getting all proposals, voting on a proposal, getting voting power, and getting voter allowance in a voting system.\n\n3. What type of data is expected to be passed as an argument to the \"addProposals\", \"getAllProposals\", \"voteProposal\", \"getVotingPower\", and \"getVoterAllowance\" actions?\n- The type of data expected to be passed as an argument to these actions is \"any\", meaning any type of data can be passed.","metadata":{"source":".autodoc/docs/markdown/core/src/state/voting/actions.md"}}],["1222",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/voting/hooks.ts)\n\nThe code is a module that exports three React hooks: `useCreateProposals`, `useHandleVoteProposal`, and `useGetVotingAmount`. These hooks are used to create, vote on, and retrieve voting amounts for proposals respectively. \n\nThe `useCreateProposals` hook is used to create a new proposal. It takes in a `Proposal` object, a callback function, and a success callback function. The `Proposal` object contains the details of the proposal such as the title, description, start and end dates, and choices. The hook then validates the input data and signs the proposal using the user's account and library. It then sends the signed proposal to the IPFS network using the `pinJSONToIPFS` function. If the proposal is successfully added to IPFS, it is then added to the state using the `addProposal` function. \n\nThe `useHandleVoteProposal` hook is used to vote on a proposal. It takes in a `Proposal` object, a vote choice, and an optional success callback function. The hook validates the user's account and vote choice, and then checks if the user has already voted on the proposal. If the user has not voted, it checks if the user has approved the contract to spend their tokens using the `useVotingApproveCallback` hook. If the user has not approved the contract, it prompts the user to approve it. Finally, it calls the `voteProposal` function to submit the vote to the contract.\n\nThe `useGetVotingAmount` hook is used to retrieve the number of approved and disapproved votes for a proposal. It takes in the user's address and the proposal ID, and then calls the `votingAmount` function on the contract to retrieve the voting amounts. It then returns an object containing the number of approved and disapproved votes.\n\nOverall, these hooks are used to manage the creation and voting on proposals in the larger project. They provide an easy-to-use interface for interacting with the contract and IPFS network. Below is an example of how the `useCreateProposals` hook can be used in a React component:\n\n```\nimport { useCreateProposals } from 'zoo';\n\nfunction CreateProposalForm() {\n const createProposal = useCreateProposals();\n\n const handleSubmit = (data) => {\n createProposal(data, () => {\n console.log('Creating proposal...');\n }, () => {\n console.log('Proposal created successfully!');\n });\n };\n\n return (\n \n );\n}\n```\n## Questions: \n 1. What is the purpose of the `useCreateProposals` function?\n- The `useCreateProposals` function is used to create a new proposal by sending a JSON payload to IPFS and adding the proposal to the state using the `addProposal` hook.\n\n2. What is the purpose of the `pinJSONToIPFS` function?\n- The `pinJSONToIPFS` function is used to send a JSON payload to the Pinata API and return the IPFS hash of the pinned content.\n\n3. What is the purpose of the `useHandleVoteProposal` function?\n- The `useHandleVoteProposal` function is used to handle the voting process for a proposal by calling the `voteProposal` hook and passing in the proposal IPFS hash and the user's vote choice. It also handles the approval process by calling the `approve` function if the user has not yet approved the contract.","metadata":{"source":".autodoc/docs/markdown/core/src/state/voting/hooks.md"}}],["1223",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/state/voting/reducer.tsx)\n\nThis code defines a Redux reducer for managing the state related to voting on proposals in a decentralized application (dApp). The reducer handles actions related to loading, adding, and voting on proposals, as well as getting the user's voting power and voter allowance. \n\nThe `VotingState` interface defines the shape of the state object, which includes a boolean `loading` flag, an array of `proposals`, and the user's `votingPower` and `voterAllowance`. The `initialState` object sets the initial values for these properties.\n\nThe `createReducer` function from the `@reduxjs/toolkit` library is used to create the reducer function. It takes the `initialState` object and a callback function that defines how the state should be updated in response to different actions. \n\nThe `builder` object passed to the callback function is used to define the different cases for updating the state. Each case corresponds to a specific action, and the `addCase` method is used to define the action and the state update that should occur. For example, the `loading` action sets the `loading` property of the state to the value of the `payload` property of the action.\n\nThe `Web3` library is used to convert the user's voting power from wei to ether in the `getVotingPower` case. The `console.log` statement in the `getVoterAllowance` case is likely for debugging purposes and can be removed in production code.\n\nThis reducer can be used in conjunction with other reducers and middleware to manage the overall state of the dApp. For example, it could be combined with a reducer for managing user authentication and a middleware for interacting with a blockchain network. \n\nHere is an example of how this reducer could be used in a React component:\n\n```\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { getAllProposals } from \"./actions\";\nimport { RootState } from \"./store\";\nimport { VotingState } from \"./reducer\";\n\nfunction ProposalList() {\n const dispatch = useDispatch();\n const proposals = useSelectorWelcome to my app
\n- \n {proposals.map((proposal) => (\n
- {proposal.title} \n ))}\n
\n This component uses the primary color from the theme.\n
\n );\n};\n```\n## Questions: \n 1. What types of components are being imported in the commented out lines at the top of the file?\n- The commented out lines are importing types for Alert, Card, Radio, Toggle, Tooltip, Nav, and Modal components.\n\n2. What is the purpose of the `Theme` interface?\n- The `Theme` interface defines the structure of the theme object, which includes properties for site width, color scheme, breakpoints, spacing, shadows, radii, and z-indices.\n\n3. What are the `dark` and `light` exports, and what do they do?\n- The `dark` and `light` exports are default exports of objects that define the color scheme for the dark and light themes. They are likely used to set the `isDark` property in the `Theme` interface. Additionally, the `lightColors` and `darkColors` exports provide the color values used in the themes.","metadata":{"source":".autodoc/docs/markdown/core/src/theme/index.md"}}],["1236",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/theme/light.ts)\n\nThis code defines a light theme for the zoo project using the styled-components library. The DefaultTheme interface from styled-components is imported and used to define the type of the lightTheme object. The lightTheme object is created by spreading the properties of the base object defined in another file and adding additional properties specific to the light theme.\n\nThe lightTheme object has the following properties:\n- isDark: a boolean value set to false to indicate that this is a light theme\n- colors: an object containing color values specific to the light theme, imported from another file\n- alert, card, toggle, nav, modal, radio, and tooltip: commented out properties that could be added to the lightTheme object to customize the styling of specific components in the zoo project.\n\nThis code can be used to provide a consistent look and feel to the zoo project by defining a theme that can be easily applied to all components. For example, a component can be styled using the light theme by wrapping it in a ThemeProvider component from styled-components and passing the lightTheme object as a prop:\n\n```\nimport React from 'react'\nimport { ThemeProvider } from 'styled-components'\nimport lightTheme from './path/to/lightTheme'\n\nconst MyComponent = () => {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `Account` component?\n- The `Account` component is used to display an Ethereum account address and its associated ENS name (if available), along with optional label text.\n\n2. What external libraries or components are being used in this code?\n- The code imports several components and functions from external libraries, including `React`, `next/image`, `react-feather`, and `@lingui/react`. It also imports two custom components, `Copy` and `ExternalLink`, from the `../components/AccountDetails` directory, and uses a custom hook `useENSName` from `../hooks/useENSName`.\n\n3. What is the purpose of the `useActiveWeb3React` hook?\n- The `useActiveWeb3React` hook is used to retrieve the current Ethereum chain ID, active account address, and wallet connector from the user's web3 provider. These values are used to construct links to blockchain explorers and to determine the current user's account address.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/Account.md"}}],["1246",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AskItem.tsx)\n\nThe `AskItem` component is a React component that renders an item in a list of asks. An ask is a request to sell a digital asset, such as an NFT (non-fungible token), for a certain amount of cryptocurrency. The component takes in an `ask` object as a prop, which contains information about the ask, such as the amount of cryptocurrency being asked for, the currency being used, and the owner of the asset being sold. \n\nThe component renders the information about the ask in a grid format, with the left column displaying information about the asset being sold and the right column displaying information about the price being asked. The left column displays the name of the asset being sold, as well as a small icon representing the asset. The right column displays the amount of cryptocurrency being asked for, as well as the symbol of the currency being used. \n\nThe component also has several optional props that can be passed in. The `showToken` prop determines whether or not to display the token ID of the asset being sold. The `summary` prop is a string that can be used to provide additional information about the owner of the asset being sold. The `onClick` prop is a function that is called when the user clicks on the \"eye\" icon in the right column, and is typically used to display more information about the ask. \n\nThe component uses several other functions and hooks to retrieve and format the data needed to display the ask. For example, it uses the `useActiveWeb3React` hook to retrieve the current Ethereum chain ID and the user's account address. It also uses the `getContent` function to retrieve the name and type of the asset being sold from its content URI. Finally, it uses the `usePrice` hook to retrieve the current USD value of the cryptocurrency being used in the ask. \n\nOverall, the `AskItem` component is a small but important part of a larger project that allows users to buy and sell digital assets using cryptocurrency. It provides a clear and concise way to display information about an ask, and can be easily customized to fit the needs of different users and use cases.\n## Questions: \n 1. What is the purpose of the `AskItem` component?\n- The `AskItem` component is used to display information about an \"ask\" object, including the owner, amount, and currency.\n\n2. What external libraries are being used in this file?\n- The file is importing several external libraries, including `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, and `react-timeago`.\n\n3. What is the purpose of the `getUsdAmount` function in the `AskProps` type?\n- The `getUsdAmount` function is an optional prop that can be passed to the `AskItem` component to calculate the USD value of the ask based on the token address and amount.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/AskItem.md"}}],["1247",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AskList.tsx)\n\nThe code defines a React component called `AskList` that queries a GraphQL API for a list of \"asks\" and renders them as a list of `AskItem` components. An \"ask\" is a request to sell a digital asset (e.g. an NFT) for a certain amount of currency. \n\nThe `AskList` component takes several props: `where` is an object that can contain filters for the query (e.g. to only show asks for a certain media or owner), `empty` is an optional JSX element to render if there are no asks, and `showToken` is a boolean flag to determine whether to show the token symbol for the currency in addition to the amount.\n\nThe component uses the `useQuery` hook from the `@apollo/client` library to fetch data from the GraphQL API. The query is defined using the `gql` template literal tag and fetches the `id`, `amount`, `createdAtTimestamp`, `currency`, `owner`, and `media` fields for each ask. The `where` object is passed as a variable to the query, with optional filters for `media` and `owner` fields.\n\nThe `usePrice` hook from a `state` module is used to get a function `getUsdAmount` that converts an amount of currency to its equivalent in USD. The `router` hook from the `next/router` module is used to navigate to a new page when an `AskItem` is clicked.\n\nThe `loading`, `error`, and `data` variables returned by `useQuery` are destructured and used to conditionally render the list of `AskItem` components. If there are no asks, the `empty` prop is rendered (or a default message if `empty` is not provided). If there are asks, each one is mapped to an `AskItem` component with the `getUsdAmount` and `onClick` props passed in.\n\nThis component can be used in a larger project to display a list of asks for a particular digital asset marketplace. It can be customized with filters and styling to fit the specific needs of the project. Here is an example usage of the `AskList` component:\n\n```jsx\n\n
\n );\n};\n```\n\nIn this example, the `AssetList` component is used to display a grid of assets owned by a specific user. The `where` prop is used to filter the assets by owner, and the `orderBy` prop is used to sort the assets by creation date in descending order. The `perPage` prop is set to 12, which means that each page will display 12 assets. The `cols` prop is set to 4, which means that each row will display 4 assets. The `showPageNumbers` prop is set to `false`, which means that the page numbers will not be displayed.\n## Questions: \n 1. What is the purpose of the `AssetList` component?\n- The `AssetList` component is used to display a list of assets with pagination and filtering options.\n\n2. What external libraries are being used in this code?\n- The code is using several external libraries including React, react-morphing-modal, next/link, lodash, @apollo/client, and ethers.\n\n3. What is the purpose of the `useContract` and `useTokenTypes` hooks?\n- It is unclear from this code what the `useContract` and `useTokenTypes` hooks are doing, as they are not used in this file. It is possible that they are custom hooks defined elsewhere in the project.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/AssetList.md"}}],["1250",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AssetListLegacy.tsx)\n\nThe `AssetList` component is a React component that renders a paginated list of assets. It receives several props, including `tokenType`, `tokenName`, `autoPlay`, `animate`, `large`, `getTriggerProps`, and `onLoadAssets`. \n\nThe component uses the `useContract` hook to get a reference to a smart contract called `Drop`. It then uses the `useEffect` hook to fetch the `firstTokenId` and `totalMinted` values from the contract. Once these values are fetched, the component uses the `getPaginatedAssets` function to calculate the paginated assets to display. The `getPaginatedAssets` function takes in several parameters, including `type`, `firstTokenId`, `totalMinted`, `page`, and `perPage`. It returns an object that contains information about the paginated assets, including the `start` and `end` indices, the `endTokenId`, the `totalPages`, and an array of `assets`.\n\nThe `AssetList` component renders a list of `Asset` components, passing in the appropriate props. It also renders pagination controls that allow the user to navigate between pages of assets. The `previousPage` and `nextPage` functions are used to update the `page` state when the user clicks on the pagination controls.\n\nOverall, the `AssetList` component is a reusable component that can be used to display a paginated list of assets in a React application. It is designed to work with a specific smart contract (`Drop`), but could be adapted to work with other contracts as well. Here is an example of how the `AssetList` component might be used in a larger React application:\n\n```jsx\nimport React, { useState } from 'react'\nimport AssetList from './AssetList'\n\nconst App = () => {\n const [assets, setAssets] = useState([])\n\n const handleLoadAssets = (newAssets) => {\n setAssets(newAssets)\n }\n\n return (\n \n
\n )\n}\n\nexport default App\n``` \n\nIn this example, the `AssetList` component is used to display a paginated list of NFT assets. When the assets are loaded, the `handleLoadAssets` function is called, which updates the `assets` state. The `assets` state is then used to render a list of asset names.\n## Questions: \n 1. What is the purpose of the `useContract` hook from the `../hooks` module?\n- A smart developer might ask what the `useContract` hook does and what it is used for. This hook is likely used to interact with a smart contract on the blockchain.\n\n2. What is the significance of the `getPaginatedAssets` function?\n- A smart developer might ask what the `getPaginatedAssets` function does and why it is important. This function is used to retrieve a paginated list of assets based on certain parameters such as the type of asset, the first token ID, and the total number of minted assets.\n\n3. What is the purpose of the `AssetList` component and what are its required props?\n- A smart developer might ask what the `AssetList` component does and what props it requires. This component is used to display a list of assets and requires props such as `tokenType`, `tokenName`, and `onLoadAssets` to function properly.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/AssetListLegacy.md"}}],["1251",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AssetModal.tsx)\n\nThe `AssetModal` component is a React component that renders a modal window displaying information about a specific asset. It imports several other components and libraries, including `useRouter` from the Next.js framework, `Modal` from the `react-morphing-modal` library, and several custom components related to bidding and asset ownership.\n\nThe `AssetModal` component takes in a `props` object, which includes a `modalProps` object that is passed to the `Modal` component. The `Modal` component is used to display the asset information in a modal window, and the `modalProps` object is used to configure the modal's appearance and behavior.\n\nThe `AssetModal` component also uses the `useAsset` hook to retrieve information about the asset being displayed. This hook takes in a `tokenId` parameter, which is obtained from the `router.query` object using the `useRouter` hook. The `useAsset` hook returns an object containing various properties related to the asset, such as its current ask price, highest bid, and content URI.\n\nThe `AssetModal` component also includes several other custom components related to bidding and asset ownership, such as `SetBid`, `SetAsk`, `BidList`, and `BidModal`. These components are conditionally rendered based on whether the current user is the owner of the asset or not, and whether certain sections of the modal are currently being displayed or not.\n\nOverall, the `AssetModal` component is a key part of the larger project's user interface, allowing users to view detailed information about specific assets and interact with them through bidding and ownership-related actions. Here is an example of how the `AssetModal` component might be used in the larger project:\n\n```jsx\nimport AssetModal from \"./components/AssetModal\";\n\nfunction App() {\n return (\n \n );\n}\n```\n\nIn this example, the `AssetModal` component is rendered at the bottom of the page, and is used to display detailed information about a specific asset when the user clicks on a link to that asset. The `AssetModal` component is passed any necessary props, such as the `tokenId` of the asset to display, and handles the rest of the logic for displaying the modal window and related components.\n## Questions: \n 1. What is the purpose of the `useRouter` hook and how is it used in this code?\n- The `useRouter` hook is used to access the Next.js router object and retrieve the `tokenId` parameter from the query string. It is used to set the `tokenId` state variable and open the modal for the corresponding asset.\n\n2. What is the purpose of the `show` state variable and how is it used in this code?\n- The `show` state variable is an object that keeps track of which sections of the modal should be displayed. It is used to conditionally render the `SetAsk`, `HowOffline`, `HowReservations`, and `SetBid` components based on user actions.\n\n3. What is the purpose of the `onClickBid` function and how is it used in this code?\n- The `onClickBid` function is used to set the `modalBid` state variable and toggle the `showBidModal` state variable, which controls whether the `BidModal` component is displayed. It is passed as a prop to the `Asset` component and the `BidList` component to handle bid selection.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/AssetModal.md"}}],["1252",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AssetSale.tsx)\n\nThe `AssetSale` component is a React component that renders a single asset for sale. It takes in a number of props, including the `dropId`, `name`, `contentURI`, `metadataURI`, `ask`, `formattedAmount`, `usdAmount`, `symbol`, `highest`, `className`, `height`, `width`, `showPrice`, `isOwner`, `autoPlay`, `animate`, `large`, `getUsdAmount`, `onClickBid`, and `onClickTokenType`. \n\nThe component first imports several dependencies, including `React`, `useCallback`, `useEffect`, `useRef`, and `useState` from the `react` package, `Player` from the `react-player` package, `BigintIsh` and `ZERO_ADDRESS` from the `@zoolabs/zdk` package, `getContent` and `useTokenType` from a local `state` module, `Ask`, `Bid`, `GraphBid`, and `HighestBid` from a local `types` module, `useActiveWeb3React` and `useContract` from a local `hooks` module, `EyeIcon` from the `@heroicons/react/solid` package, `shortenAddress` from a local `functions` module, `TimeAgo` from the `react-timeago` package, and `Image` from the `next/image` package.\n\nThe component then defines a type for its props, which includes all of the props listed above, as well as some additional HTML attributes. The component itself is defined as a function that takes in its props as an argument. \n\nWithin the component, several variables are defined using destructuring assignment from the props object, including `account`, `ask`, `highest`, `dropId`, `name`, `showPrice`, `formattedAmount`, `usdAmount`, `symbol`, `getUsdAmount`, and `isOwner`. The `useTokenType` hook is called with `dropId` and `name` as arguments to get information about the token type associated with the asset. The `useState` hook is used to define state variables for `bid` and `tokenType`. The `useContract` hook is called with `\"Drop\"` as an argument to get the contract for the `Drop` smart contract. The `getContent` function is called with `props.contentURI` as an argument to get information about the content associated with the asset. The `shortenAddress` function is used to shorten the address of the highest bidder. \n\nThe component then returns a div that contains the asset for sale. If `props.large` is true and the asset has a video, a `Player` component is rendered with the video as its `url` prop. Otherwise, an `Image` component is rendered with the image as its `src` prop. \n\nBelow the asset, information about the asset is displayed, including its name, the number of tokens that have been minted and sold, and the highest bid (if applicable). If `showPrice` is true and the asset has a formatted amount and symbol, the highest bid is displayed along with the bid amount and the USD amount (if available). If the user is the owner of the asset, an \"Accept Bid\" button is also displayed. \n\nFinally, the component exports the `AssetSale` function as the default export of the module. \n\nOverall, the `AssetSale` component is a reusable component that can be used to display a single asset for sale, along with information about the asset and its current bid status. It can be customized with a variety of props to control its appearance and behavior.\n## Questions: \n 1. What is the purpose of the `AssetSale` component?\n- The `AssetSale` component is used to display information about an asset for sale, including its name, image or video, sale price, and highest bid.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, react-player, @zoolabs/zdk, @heroicons/react, react-timeago, and next/image.\n\n3. What is the role of the `useActiveWeb3React` and `useContract` hooks?\n- The `useActiveWeb3React` hook is used to access the current user's Ethereum account and provider, while the `useContract` hook is used to interact with Ethereum smart contracts.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/AssetSale.md"}}],["1253",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AssetSaleModal.tsx)\n\nThe `AssetModal` component is a React component that renders a modal window for displaying information about a particular asset. It imports several other components and hooks from various files in the project, including `useRouter` and `Modal` from `next/router` and `react-morphing-modal`, respectively. It also imports several custom components such as `AssetSale`, `SetSaleBid`, `LazySetAsk`, `HowReservations`, `HowOffline`, `LazyBidList`, and `LazyBidModal`, which are used to display information about the asset and allow users to interact with it.\n\nThe component takes in a `props` object, which includes a `modalProps` object that contains various properties for configuring the modal window, such as its size and position. The component also defines several state variables using the `useState` hook, including `show`, which is an object that keeps track of which sections of the modal are currently visible, and `showBidModal`, which determines whether the bid modal is currently visible. \n\nThe `AssetModal` component renders a `Modal` component from `react-morphing-modal` that contains two columns. The first column displays information about the asset, including its name, image, price, and highest bid. The second column displays information about bids and allows users to place bids or asks on the asset. If the user is the owner of the asset, they can also set an ask price for the asset. If the user is not the owner, they can place a bid on the asset. \n\nThe component also defines several helper components, including `NoBids` and `NoAsks`, which are displayed if there are no bids or asks for the asset, respectively. \n\nOverall, the `AssetModal` component is an important part of the larger project as it allows users to view and interact with assets in a user-friendly way. It provides a centralized location for displaying information about assets and allows users to place bids and asks on them.\n## Questions: \n 1. What is the purpose of the `AssetModal` component?\n- The `AssetModal` component is a modal that displays information about a specific asset, including its sale price, bids, and how to place a bid.\n\n2. What is the significance of the `DROP_ID` constant?\n- The `DROP_ID` constant is used to identify the specific drop that the asset belongs to.\n\n3. What is the purpose of the `useActiveWeb3React` hook?\n- The `useActiveWeb3React` hook is used to retrieve the active Web3 provider and account, which is used to determine whether the user is the owner of the asset and whether they can place a bid.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/AssetSaleModal.md"}}],["1254",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/BidEditable.tsx)\n\nThe code above is a React component called `BidEditable` that renders a `BidItem` component with a `GraphBid` object as a prop. The purpose of this component is to provide a way to display and edit a bid in a user interface. \n\nThe `GraphBid` type is imported from the `types` module, which suggests that this project may involve some sort of graph data structure. The `BidItem` component is imported from another file in the same directory, and it is likely responsible for rendering the actual bid information.\n\nThe `BidEditable` component is a functional component that takes a `GraphBid` object as a prop and returns a JSX element that renders a `div` with the class name \"BidEditable\" and a `BidItem` component with the `GraphBid` object passed as a prop. \n\nThis component can be used in a larger project by importing it and rendering it wherever a bid needs to be displayed or edited. For example, if there is a page in the project that displays a list of bids, the `BidEditable` component could be used to render each individual bid in the list. \n\nHere is an example of how the `BidEditable` component could be used in a larger project:\n\n```\nimport React from 'react';\nimport BidEditable from './BidEditable';\n\nconst BidList = ({ bids }) => {\n return (\n \n {assets.map((asset, i) => (\n
\n {asset.name}
\n ))}\n \n {bids.map((bid) => (\n
\n );\n};\n\nexport default BidList;\n```\n\nIn this example, the `BidList` component takes an array of `GraphBid` objects as a prop and maps over them to render a `BidEditable` component for each bid. The `key` prop is set to the `id` of each bid to ensure that React can efficiently update the list when changes occur.\n## Questions: \n 1. What is the purpose of the `GraphBid` type and where is it defined?\n- The `GraphBid` type is imported from the `types` module, but it's unclear what properties or methods it contains and what its purpose is within the `BidEditable` component.\n\n2. What is the `BidItem` component and how is it used within `BidEditable`?\n- It's unclear what the `BidItem` component does and how it's used within the `BidEditable` component. More information is needed to understand the relationship between these two components.\n\n3. Are there any other components or modules that import and use `BidEditable`?\n- It's unclear if `BidEditable` is used by any other components or modules within the `zoo` project. Knowing this information could help understand the overall architecture and functionality of the project.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/BidEditable.md"}}],["1255",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/BidItem.tsx)\n\nThe `BidItem` component is a React component that renders a single bid item. It takes in a `bid` object, which contains information about the bid, such as the bidder, the amount, and the currency used. It also takes in some optional props, such as `showToken`, `summary`, and `onClick`, which determine how the bid item is displayed and what actions can be taken on it.\n\nThe component first imports several dependencies, such as icons, currency and token types, and various utility functions. It then defines the `BidProps` type, which specifies the shape of the `bid` object and the optional props. It also defines the `BidItem` component, which takes in the `bid` object and the optional props as props.\n\nInside the component, it first uses the `useActiveWeb3React` hook to get the current chain ID and account. It then initializes some state variables using the `useState` hook, such as `formattedAmount` and `currencyToken`. It also uses the `useEffect` hook to update the `currencyToken` state variable when the chain ID changes.\n\nThe component then renders the bid item using JSX. It conditionally renders different elements based on the `showToken` prop. If `showToken` is true, it displays information about the bid, such as the name of the asset being bid on, the ID of the asset, the bidder's address, and the time the bid was made. If `showToken` is false, it displays information about the bidder, such as the bidder's address and a summary of the bid.\n\nThe component also displays the bid amount and the currency used, as well as an eye icon that can be clicked to view more details about the bid. It formats the bid amount using the `formatCurrencyAmountWithCommas` function and the `currencyToken` state variable. It also calculates the USD value of the bid using the `getUsdAmount` function from the `usePrice` hook.\n\nOverall, the `BidItem` component is a reusable component that can be used to display bid items in various parts of the larger project. It provides a flexible and customizable way to display bid information and allows users to view more details about each bid.\n## Questions: \n 1. What is the purpose of the `BidItem` component?\n- The `BidItem` component is used to display information about a bid, including the bidder's address, bid amount, and timestamp.\n\n2. What external libraries are being used in this file?\n- The file is importing several external libraries, including `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, and `react-timeago`.\n\n3. What is the purpose of the `getUsdAmount` function passed as a prop to `BidItem`?\n- The `getUsdAmount` function is used to convert a bid amount from the token's native currency to USD. It takes in a token address and amount as arguments and returns the equivalent USD value.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/BidItem.md"}}],["1256",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/BidList.tsx)\n\nThe code defines a React component called `BidList` that fetches and displays a list of bids from a GraphQL API. The component takes in several props, including `where`, `empty`, `showToken`, and `onClick`, which are used to filter the bids, display a message when there are no bids, show the token used for the bids, and handle click events respectively.\n\nThe component uses the `useQuery` hook from the `@apollo/client` library to fetch the bids from the GraphQL API. The GraphQL query is defined using the `gql` function and specifies the fields to be returned for each bid, including the bid amount, creation timestamp, currency, bidder, and media. The `where` prop is used to filter the bids based on the media and/or bidder ID. The `fetchPolicy` option is set to `'no-cache'` to ensure that the query is always sent to the server instead of being cached. The `pollInterval` option is set to `10000` to refetch the bids every 10 seconds.\n\nThe fetched bids are stored in the `data` object returned by the `useQuery` hook. If there are bids, the component maps over them and renders a `BidItem` component for each bid. The `getUsdAmount` function is passed to each `BidItem` component to convert the bid amount to USD. If there are no bids, the component either renders the `empty` prop or a default message.\n\nThe `BidList` component is exported as the default export of the module and can be imported and used in other parts of the project. For example, it could be used in a page that displays a list of bids for a particular media item or bidder. Here's an example of how the `BidList` component could be used:\n\n```\nimport BidList from './BidList'\n\nconst MyBidsPage = () => {\n const myBidsFilter = { bidder: 'my-bidder-id' }\n\n return (\n \n No bids yet.
} showToken={true} />\n \n )\n}\n```\n## Questions: \n 1. What is the purpose of the `usePrice` hook imported from `./state`?\n- The `usePrice` hook is used to get the USD amount of a bid.\n\n2. What is the purpose of the `pollInterval` option passed to `useQuery`?\n- The `pollInterval` option specifies the time interval (in milliseconds) for refetching the query data.\n\n3. What is the purpose of the `BidFilter` type and the `where` prop in `BidListProps`?\n- The `BidFilter` type is used to define the filter options for the `where` prop, which is used to filter the bids returned by the GraphQL query.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/BidList.md"}}],["1257",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/BidModal.tsx)\n\nThe `BidModal` component is a React component that renders a modal for displaying information about a bid on a media asset. It takes in three props: `bid`, `isOpen`, and `onClose`. `bid` is an object that contains information about the bid, including the bidder, the owner of the media asset, the currency used for the bid, and the ID of the media asset. `isOpen` is a boolean that determines whether the modal is open or closed, and `onClose` is a function that is called when the modal is closed.\n\nThe component imports several other components and functions from other files in the project. These include `Modal`, `ModalHeader`, `useActiveWeb3React`, `getContent`, `usePrice`, `formatCurrencyAmountWithCommas`, `isSameAddress`, `shortenAddress`, `RemoveBidButton`, `useContract`, `BidItem`, and `AcceptBidButton`.\n\nThe component uses the `useActiveWeb3React` hook to get the current user's account address. It also uses the `useContract` hook to get a reference to the `Market` contract. When the component is mounted, it uses the `bidForTokenBidder` function of the `Market` contract to check whether the bid is offline or not. If the bid is offline, the component sets the `offline` state to `true`.\n\nThe component then extracts various pieces of information from the `bid` object, such as the type and name of the media asset, the ID of the bidder, the ID of the owner, the currency used for the bid, and the ID of the media asset.\n\nThe component defines two callback functions, `isBidder` and `isOwner`, which are used to determine whether the current user is the bidder or the owner of the media asset, respectively.\n\nThe component then renders the modal using the `Modal` component. The modal contains a header with the name of the media asset and a `BidItem` component that displays information about the bid. If the bid is not offline and the current user is the bidder, a message is displayed indicating that the bidder's address will be refunded if the bid is removed.\n\nThe modal also contains two buttons: a \"Remove Bid\" button and an \"Accept Bid\" button. The \"Remove Bid\" button is only displayed if the current user is the bidder, and it allows the user to remove their bid. The \"Accept Bid\" button is only displayed if the current user is the owner of the media asset, and it allows the user to accept the bid.\n\nOverall, the `BidModal` component provides a way for users to view and manage bids on media assets in the project's marketplace. It allows users to remove their own bids and accept bids on their own media assets.\n## Questions: \n 1. What is the purpose of this code?\n- This code is for a BidModal component that displays bid information and allows the user to remove or accept a bid.\n\n2. What external dependencies does this code have?\n- This code imports several components and functions from other files, including Modal, ModalHeader, useActiveWeb3React, getContent, usePrice, isSameAddress, shortenAddress, RemoveBidButton, AcceptBidButton, and BidItem.\n\n3. What is the significance of the \"offline\" state variable?\n- The \"offline\" state variable is used to determine whether a bid was made offline (i.e. not through the app) and display a message to the bidder if they try to remove the bid.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/BidModal.md"}}],["1258",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/CurrencyLogo.tsx)\n\nThe code above defines a React component called `CurrencyLogo` that renders an image of a currency symbol. The component takes in three props: `symbol`, `size`, and `className`. The `symbol` prop is required and can be either a `CurrencySymbol` enum value or a string. The `size` prop is optional and defaults to 32. The `className` prop is also optional and can be used to add additional CSS classes to the rendered image.\n\nThe component uses the `CURRENCY_SYMBOL_LOGO` object from the `@zoolabs/zdk` library to determine the URL of the image to be displayed. The `CURRENCY_SYMBOL_LOGO` object maps each currency symbol to its corresponding image URL. If the `symbol` prop matches a key in the `CURRENCY_SYMBOL_LOGO` object, the component will render an `Image` component from the `next/image` library with the appropriate `src`, `alt`, `className`, `width`, and `height` props.\n\nThis component can be used in a larger project that requires displaying currency symbols. For example, a financial application that displays account balances in different currencies could use this component to display the currency symbol next to each balance. Here's an example of how the `CurrencyLogo` component could be used in a React component:\n\n```\nimport CurrencyLogo from \"./CurrencyLogo\";\n\nconst AccountBalance = ({ currency, balance }) => {\n return (\n My Bids
\n\n
\n );\n};\n```\n\nIn this example, the `AccountBalance` component takes in two props: `currency` and `balance`. The `currency` prop is a string representing the currency symbol, and the `balance` prop is a number representing the account balance. The component renders a `CurrencyLogo` component with the `symbol` prop set to the `currency` prop and the `size` prop set to 24. The component also renders a `span` element with the `balance` prop as its text content.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a component called `CurrencyLogo` that displays an image logo for a given currency symbol.\n\n2. What dependencies does this code have?\n This code imports two dependencies: `next/image` and `@zoolabs/zdk`.\n\n3. What props can be passed to the `CurrencyLogo` component?\n The `CurrencyLogo` component accepts three props: `symbol` (a currency symbol or string), `size` (an optional number for the size of the logo), and `className` (an optional string for additional CSS classes).","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/CurrencyLogo.md"}}],["1259",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/HowOffline.tsx)\n\nThe code defines a React component called `HowOffline` that renders a section of text explaining how offline asks work in the context of a smart contract-based marketplace for NFTs. The component takes a single prop called `onClick`, which is a function to be called when the user clicks the \"Ok\" button at the end of the text.\n\nThe text itself explains that an offline ask is a way for a buyer to place a bid on an NFT without sending funds to the smart contract. Instead, the buyer and seller will need to arrange a separate transaction outside of the platform, such as a bank wire transfer. Once the seller has verified receipt of the funds, they can accept the bid, which will transfer ownership of the NFT to the buyer.\n\nThis component is likely to be used as part of a larger user interface for the marketplace, perhaps as a modal or tooltip that appears when the user selects the option to place an offline ask. The `onClick` prop could be used to dismiss the modal or perform some other action in response to the user acknowledging the information presented.\n\nExample usage:\n\n```\nimport HowOffline from './HowOffline';\n\nfunction PlaceOfflineAsk() {\n const handleOkClick = () => {\n // Do something when the user clicks \"Ok\"\n };\n\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n \n This code is a React component that explains how offline asks work in the context of buying and selling NFTs.\n\n2. What is the expected behavior when the \"Ok\" button is clicked?\n \n When the \"Ok\" button is clicked, it will trigger the onClick function that is passed as a prop to the component.\n\n3. How can a buyer send funds for an offline ask?\n \n A buyer can send funds for an offline ask through an \"over the counter\" deal, such as a bank wire transfer, directly to the seller.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/HowOffline.md"}}],["1260",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/HowReservations.tsx)\n\nThe code defines a React functional component called `HowReservations`. This component renders a section of text and a button that triggers an `onClick` event. The purpose of this component is to provide information to users about how reservations work in the ZOO network and to prompt them to take action by clicking the \"Ok\" button.\n\nThe component is designed to be used within a larger project that involves the creation and management of non-fungible tokens (NFTs) on the ZOO network. When a user visits the reservation page, they will see this component displayed on the screen. The text explains that users can reserve an NFT to ensure they are part of the ZOO network at launch. If their bid is not accepted, their reservation will be refunded. The \"Ok\" button allows the user to acknowledge this information and proceed with the reservation process.\n\nThe component is written in JSX, which is a syntax extension for JavaScript that allows developers to write HTML-like code within their JavaScript files. The `return` statement in the component defines the structure and content of the rendered HTML. The `onClick` prop is passed to the button element, which allows the parent component to define what happens when the button is clicked.\n\nHere is an example of how this component might be used within a larger project:\n\n```\nimport HowReservations from './HowReservations';\n\nconst ReservationPage = () => {\n const handleOkClick = () => {\n // Handle the user clicking the \"Ok\" button\n };\n\n return (\n Place an Offline Ask
\n...
\n\n
\n );\n};\n```\n\nIn this example, the `ReservationPage` component renders the `HowReservations` component along with other components related to the reservation process. The `handleOkClick` function is defined within the `ReservationPage` component and passed as a prop to the `HowReservations` component. When the user clicks the \"Ok\" button, the `handleOkClick` function will be called, allowing the parent component to handle the event appropriately.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `HowReservations` that displays information about how reservations work for the ZOO network launch and includes a button to close the dialog box.\n\n2. What props does the `HowReservations` component accept?\n- The `HowReservations` component accepts a single prop called `onClick`, which is a function that will be called when the \"Ok\" button is clicked.\n\n3. What styling classes are applied to the elements in this component?\n- The component uses Tailwind CSS classes to style the elements, including `m-auto`, `w-96`, `mb-6`, `text-xl`, `mb-10`, `w-full`, `px-4`, `py-3`, `text-base`, `font-semibold`, `text-center`, `text-white`, `transition`, `duration-200`, `ease-in`, `bg-indigo-600`, `rounded-lg`, `shadow-md`, `hover:bg-indigo-700`, `focus:ring-offset-indigo-200`, and `focus:outline-none`.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/HowReservations.md"}}],["1261",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/InfinityLoader.tsx)\n\nThe code above defines a React component called `InfinityLoader`. This component is responsible for rendering an animated infinity symbol that can be used as a loading indicator in the larger project. \n\nThe component takes in three props: `alt`, `height`, and `width`. The `alt` prop is used to provide alternative text for the image, which is important for accessibility purposes. The `height` and `width` props are used to set the dimensions of the image. If these props are not provided, the default values of 32 pixels for height and 50 pixels for width will be used.\n\nThe component uses the `Image` component from the `../components/Image` file to render the animated infinity symbol. The `Image` component is likely a custom component that wraps the standard `img` HTML element and provides additional functionality or styling.\n\nTo use the `InfinityLoader` component in the larger project, it can be imported and rendered wherever a loading indicator is needed. For example:\n\n```\nimport { InfinityLoader } from 'zoo';\n\nfunction MyComponent() {\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n // simulate a delay\n setTimeout(() => {\n setIsLoading(false);\n }, 2000);\n }, []);\n\n return (\n Reserve your NFT
\n\n {isLoading ?
\n );\n}\n```\n\nIn this example, the `InfinityLoader` component is used to display a loading indicator while some data is being fetched or processed. Once the data is ready, the `isLoading` state is set to `false` and the `InfinityLoader` component is replaced with a simple \"Loaded!\" message.\n\nOverall, the `InfinityLoader` component is a simple but useful piece of code that can help improve the user experience of the larger project by providing visual feedback during loading operations.\n## Questions: \n 1. What is the purpose of the `Image` component being imported?\n- The `Image` component is being imported from a file located at `../components/Image`. It is likely used to display images in the application.\n\n2. What is the purpose of the `InfinityLoader` function?\n- The `InfinityLoader` function returns an `Image` component with a specific source and dimensions. It is likely used to display a loading animation in the application.\n\n3. What is the significance of the default values for the `alt`, `height`, and `width` props?\n- The default values for the `alt`, `height`, and `width` props provide fallback values in case these props are not passed in when the `InfinityLoader` component is used. This ensures that the component will still render with appropriate values even if the props are not specified.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/InfinityLoader.md"}}],["1262",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/LazyAcceptBidButton.tsx)\n\nThe code imports several modules including `isNativeCurrency` from `@zoolabs/zdk`, `ethers`, `useCallback`, `useEffect`, `useState`, `useActiveWeb3React`, `useContract`, `useGasPrice`, and `useTransactionPopups`. It also imports `Bid`, `GraphBid`, and `TokenId` from `./types`.\n\nThe code defines a functional component called `LazyAcceptBidButton` that takes in several props including `dropId`, `name`, `bidder`, `onError`, and `onAccept`. The component uses the `useActiveWeb3React` hook to get the current user's account and the `useGasPrice` hook to get the current gas price. It also uses the `useContract` hook to get the `App` and `Market` contracts.\n\nThe component uses the `useEffect` hook to fetch a `marketBid` object from the `Market` contract using the `lazyBidForTokenBidder` method. If the `dropId`, `name`, and `bidder` props are all truthy, the `marketBid` object is used to create a `Bid` object which is stored in the component's state using the `setBid` function.\n\nThe component defines a `acceptBid` function using the `useCallback` hook. This function attempts to accept the bid stored in the component's state by calling the `acceptLazyBid` method on the `App` contract. If the bid is successfully accepted, the `onAccept` function is called with the `dropId` prop. If an error occurs, the `onError` function is called with the error.\n\nFinally, the component returns a button element that calls the `acceptBid` function when clicked.\n\nThis component can be used in a larger project to allow users to accept bids on a particular token. The `LazyAcceptBidButton` component can be passed the necessary props to identify the token and the bidder, and it will handle the logic of fetching the bid and accepting it. This can simplify the code needed to implement this functionality elsewhere in the project. For example:\n\n```\nLoaded!
}\n\n
\n );\n}\n```\n\nIn this example, the `MediaItem` component displays information about a media item, including its name and current bid (if any). It also renders a button that, when clicked, opens the `LazyBidModal` component to display more details about the bid. The `MediaItem` component passes several props to the `LazyBidModal` component, including the `dropId`, `name`, `bid`, `isOpen`, and `onClose` props.\n## Questions: \n 1. What is the purpose of the `LazyBidModal` component?\n- The `LazyBidModal` component is used to display bid information and allow the user to remove or accept a bid.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `react`, `react-dom`, and various custom components and hooks defined in other files within the project.\n\n3. What is the significance of the `offline` state variable?\n- The `offline` state variable is used to determine whether the current user is offline or not, and is used to conditionally render a message to the user if they are the bidder and the bid is removed.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/LazyBidModal.md"}}],["1266",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/LazyRemoveBidButton.tsx)\n\nThe code is a React component called `LazyRemoveBidButton` that provides a button to remove a bid for a given token. It imports several hooks and a type from other files in the project. \n\nThe component takes in several props, including the `dropId` of the token, its `name`, and the `currency` used for the bid. It also takes in optional `onError` and `onRemove` callbacks.\n\nThe component uses the `useActiveWeb3React` hook to get the current user's account, and the `useGasPrice` hook to get the current gas price. It also uses the `useContract` hook to get instances of the `App` and `Media` contracts.\n\nThe `removeBid` function is defined using the `useCallback` hook. It attempts to remove the bid by calling the `removeLazyBid` function on the `App` contract with the given `dropId`, `name`, and `gasPrice`. If the bid was successfully removed, the `onRemove` callback is called with the `dropId`. If an error occurs, the `onError` callback is called with the error.\n\nThe `removeBid` function also adds a transaction popup using the `addTransactionPopup` function from the `useTransactionPopups` hook. This popup displays information about the transaction, including the summary \"Removed Bid for {name}\".\n\nFinally, the component returns a button that calls the `removeBid` function when clicked. The button has a red background and white text, and changes to an indigo background when hovered over.\n\nThis component can be used in a larger project that involves bidding on tokens. It provides a simple way for users to remove their bids, and handles errors and transaction popups. An example usage of this component might look like:\n\n```\n{name}
\n{bid ? `Current bid: ${bid.amount}` : \"No bids yet\"}
\n \n {isModalOpen && (\n\n
\n )\n}\n```\n\nIn the example above, the `PaymentForm` component renders the `SelectCurrency` component and passes in a callback function `handleCurrencySelect` to the `onSelect` prop. When a user selects a currency, the `handleCurrencySelect` function is called with the selected currency as an argument, and logs the selected currency symbol to the console. The `PaymentForm` component can then use the selected currency to calculate payment amounts or perform other payment-related tasks.\n## Questions: \n 1. What is the purpose of the `SelectCurrency` component?\n - The `SelectCurrency` component is used to display a list of supported payment currencies and allow the user to select one.\n2. Where does the `getSupportedPaymentCurrencies` function come from?\n - The `getSupportedPaymentCurrencies` function is imported from a file located at `../config/currencies`.\n3. What is the role of the `CurrencyLogo` component?\n - The `CurrencyLogo` component is used to display the logo or icon associated with each currency symbol.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/SelectCurrency.md"}}],["1271",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/SetAsk.tsx)\n\nThe `SetAsk` component is a React component that allows users to set an asking price for a particular asset in the Zoo project. The component imports several dependencies, including `Currency`, `Token`, and `ZERO_ADDRESS` from the `@zoolabs/zdk` library, as well as various other components and hooks from the project.\n\nThe component takes a `tokenId` prop, which is used to retrieve information about the asset being priced. It then uses the `useAsset` hook to retrieve the current asking price (`ask`), the currency token being used (`currencyToken`), and the type of asset (`type`). The component also initializes several pieces of state, including the current value of the input field (`value`), whether the user is offline (`offline`), the currently selected currency token (`selectedCurrencyToken`), and whether the currency selection dropdown is currently visible (`showSelectCurrency`).\n\nThe component renders a form that allows the user to input a new asking price for the asset. The form includes an input field that accepts numeric input, as well as a button that allows the user to select a currency token. When the user selects a currency token, the `onSelectCurrency` function is called, which updates the `selectedCurrencyToken` state and hides the currency selection dropdown.\n\nWhen the user submits the form, the `SetAskButton` component is called with several props, including the `tokenType`, `tokenId`, `amount`, `currencyToken`, and `offline` values. This component is responsible for actually setting the new asking price for the asset.\n\nOverall, the `SetAsk` component provides a simple and intuitive interface for users to set asking prices for Zoo assets. It leverages several other components and hooks from the project to provide a seamless user experience.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `SetAsk` that allows users to set an asking price for a particular asset represented by a `tokenId`.\n\n2. What external dependencies does this code rely on?\n- This code imports various modules from external packages such as `@zoolabs/zdk`, `ethers`, and `@headlessui/react`. It also imports several functions and hooks from local files.\n\n3. What is the role of the `useEffect` hook in this code?\n- The `useEffect` hook is used to update the component's state when the `ask` or `currencyToken` values change. Specifically, it sets the `selectedCurrencyToken`, `value`, and `offline` state variables based on the current `ask` and `currencyToken` values.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/SetAsk.md"}}],["1272",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/SetAskButton.tsx)\n\nThe code is a React component called `SetAskButton` that allows a user to set an asking price for a specific token. The component takes in several props including `tokenId`, `tokenType`, `amount`, `currencyToken`, and `offline`. \n\nThe component uses several hooks including `useActiveWeb3React`, `useGasPrice`, `useContract`, and `useTransactionPopups`. These hooks allow the component to interact with the Ethereum blockchain and display transaction popups to the user.\n\nWhen the user clicks the \"Set Ask\" button, the `setAsk` function is called. This function first checks if an `amount` has been provided. If an `amount` has been provided, it creates an `Ask` object with the `currency` and `amount` properties. The `amount` property is converted to the appropriate units using the `ethers.utils.parseUnits` function. \n\nThe `media.setAsk` function is then called with the `tokenId`, `ask`, and `from` and `gasPrice` options. This function sets the asking price for the specified token on the blockchain. If the transaction is successful, a transaction popup is displayed to the user.\n\nIf an error occurs during the transaction, an error popup is displayed to the user.\n\nOverall, this component allows users to set an asking price for a specific token on the Ethereum blockchain. It is likely used in a larger project that involves buying and selling tokens. Here is an example of how the component might be used in a larger project:\n\n```\nimport { SetAskButton } from \"./components/SetAskButton\";\n\nconst MyToken = () => {\n const tokenId = 123;\n const tokenType = \"MyToken\";\n const amount = 1;\n const currencyToken = { address: \"0x123\", decimals: 18 };\n const offline = false;\n\n return (\n Payment Form
\n\n
\n );\n};\n```\n## Questions: \n 1. What is the purpose of the `SetAskButton` component?\n- The `SetAskButton` component is used to set an asking price for a specific token.\n\n2. What libraries and hooks are being imported and used in this code?\n- The code imports `Currency` from `@zoolabs/zdk`, `ethers` from `ethers`, and `useCallback`, `useActiveWeb3React`, and `useContract` from custom `../hooks`. It also imports `useGasPrice` and `useTransactionPopups` from custom `../state/network/hooks` and `../state/transactions/hooks`, respectively. These hooks are used to interact with the Ethereum network and manage transactions.\n\n3. What happens if the `amount` parameter is not provided?\n- If the `amount` parameter is not provided, a message is logged to the console with the text \"@todo - amount required message\". It is unclear what this message is intended to do or how it is implemented.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/SetAskButton.md"}}],["1273",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/SetBid.tsx)\n\nThe `SetBid` component is a React component that allows a user to set a bid for a specific token. It imports various dependencies such as `useEffect`, `useState`, `CurrencyAmount`, `i18n`, `t`, `shortenAddress`, `shortenString`, `ApprovalState`, `useActiveWeb3React`, `useApproveCallback`, `useContract`, `useAsset`, `InfinityLoader`, `SetBidButton`, `Dots`, and `getExplorerLink`. \n\nThe component takes in two props: `tokenId` and `children`. The `tokenId` prop is used to identify the token for which the user is setting a bid. The `children` prop is used to render any child components that are passed to the `SetBid` component.\n\nThe `SetBid` component uses the `useActiveWeb3React` hook to get the current user's account and chain ID. It then uses the `useAsset` hook to get information about the token with the specified `tokenId`. This includes the `ask` price, `currencyToken`, `formattedAmount`, `formattedBalance`, `symbol`, and `type`. \n\nThe component then uses the `useApproveCallback` hook to check if the user has approved the contract to spend their `currencyToken`. If the user has not approved the contract, the component displays a button that allows the user to approve the contract. If the user has approved the contract or if the `currencyToken` is a native token, the component displays a button that allows the user to set a bid for the specified token.\n\nThe component also displays the user's account address and `formattedBalance` of the `currencyToken`. If the `formattedBalance` is zero, the component displays a message indicating that the user has insufficient balance. If the `approvalState` is pending, the component displays a loading button. If there is a pending transaction, the component displays a link to the transaction on the blockchain explorer.\n\nOverall, the `SetBid` component is a reusable component that can be used to allow users to set bids for tokens in a decentralized marketplace. It handles the approval process for spending `currencyToken` and provides a user-friendly interface for setting bids.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n- This code is a React component called `SetBid` that handles the process of setting a bid for a specific token. It retrieves information about the token and the user's account using various hooks, and allows the user to approve the bid and submit it to the market contract.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including `react`, `@zoolabs/zdk`, `@lingui/core`, `@lingui/macro`, and `react-icons`.\n\n3. What are some potential issues or edge cases that a developer should be aware of when using this code?\n- One potential issue is that the `SetBid` component assumes that the `Market` contract is available and has been initialized using the `useContract` hook. If the contract is not available or has not been initialized correctly, the component may not function as expected. Additionally, the component assumes that the user has sufficient funds and approval to make the bid, so it may not handle cases where the user does not have enough funds or has not approved the necessary tokens.","metadata":{"source":".autodoc/docs/markdown/core/src/zoo/SetBid.md"}}],["1274",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/SetBidButton.tsx)\n\nThe code defines a React component called `SetBidButton` that represents a button for placing a bid on a particular token. The component takes in several props, including the details of the ask (the current highest bid), the ID and type of the token being bid on, the bid amount, and the currency being used. \n\nWhen the button is clicked, the `setBid` function is called. This function first checks that an amount has been specified for the bid, and if not, displays a message indicating that an amount is required. It then creates a `Bid` object containing the details of the bid, including the bidder's address, the bid amount, the currency being used, and other metadata. \n\nThe function then determines whether the currency being used is a native currency (e.g. Ether) or a token, and calls the appropriate contract function (`setBid` on the `App` contract for native currencies, and `setBid` on the `Media` contract for tokens) to place the bid. It passes in the necessary parameters, including the token ID, the `Bid` object, the bidder's address, and the gas price. \n\nIf the bid is successfully placed, the function adds a transaction popup to the UI indicating that the bid was placed. If there is an error, it adds an error popup instead. \n\nThe `SetBidButton` component is likely used in a larger project that involves buying and selling tokens on a marketplace. It provides a simple and reusable way to place a bid on a token, abstracting away the details of interacting with the contracts and handling transaction popups. \n\nExample usage:\n\n```\n{tokenType}
\nToken ID: {tokenId}
\nAmount: {amount}
\n\n This is a styled component\n
\n```\n## Questions: \n 1. What is the purpose of the `linearBorderGradients` property in the `variants` object?\n- The `linearBorderGradients` property is used to specify the variants for the `linearBorderGradients` plugin, which allows for the creation of linear border gradients. The specified variants are `responsive`, `hover`, and `dark`.\n\n2. What is the purpose of the `plugin` function in the `plugins` array?\n- The `plugin` function is used to define a custom plugin for Tailwind CSS. In this case, it adds a utility class called `.header-border-b` that applies a linear gradient to the bottom border of an element.\n\n3. What is the purpose of the `minHeight` property in the `theme` object?\n- The `minHeight` property is used to specify minimum height values for elements. It includes values such as `empty` for a height of 128px, `cardContent` for a height of 230px, and `nftContainer` for a height of 503px.","metadata":{"source":".autodoc/docs/markdown/core/tailwind.config.md"}}],["1281",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/core/tsconfig.json)\n\nThis code is a configuration file for the TypeScript compiler. It specifies the options and settings that the compiler should use when compiling TypeScript code into JavaScript. \n\nThe `compilerOptions` object contains various settings that affect how the compiler operates. Some notable options include:\n- `target`: specifies the version of ECMAScript that the compiled JavaScript should be compatible with. In this case, it is set to ES5.\n- `lib`: specifies the libraries that should be included in the compilation process. In this case, it includes the DOM and iterable libraries, as well as the esnext library.\n- `allowJs`: allows JavaScript files to be included in the compilation process.\n- `module`: specifies the module format that should be used in the compiled JavaScript. In this case, it is set to ES modules.\n- `moduleResolution`: specifies how module dependencies should be resolved. In this case, it is set to Node.js-style module resolution.\n- `resolveJsonModule`: allows JSON files to be imported as modules.\n- `jsx`: specifies how JSX syntax should be handled. In this case, it is set to preserve, which means that the JSX syntax will be left intact in the compiled JavaScript.\n- `baseUrl`: specifies the base directory for resolving non-relative module names.\n\nThe `include` and `exclude` arrays specify which files should be included or excluded from the compilation process. In this case, it includes all TypeScript and TypeScript React files in the project, as well as some specific JavaScript files. It excludes the `node_modules` directory.\n\nOverall, this configuration file ensures that the TypeScript compiler is set up to compile the project's TypeScript and JavaScript files into ES5-compatible JavaScript modules, with support for various libraries and module formats. It also specifies which files should be included or excluded from the compilation process. This file is an important part of the project's build process, as it ensures that the code is compiled correctly and consistently.\n## Questions: \n 1. What is the purpose of this code file?\n- This code file is a configuration file for the TypeScript compiler for the zoo project.\n\n2. What version of ECMAScript is being targeted?\n- The \"target\" property is set to \"es5\".\n\n3. What files are included and excluded from compilation?\n- The \"include\" property specifies which files should be compiled, while the \"exclude\" property specifies which files should be ignored. In this case, all TypeScript and TypeScript React files are included, while the \"node_modules\" directory is excluded. Additionally, there are specific files included in the \"include\" property, such as \"next-env.d.ts\", \"src/animation/index.js\", \"src/pages/_error.js\", and \"src/pages/_error.ts\".","metadata":{"source":".autodoc/docs/markdown/core/tsconfig.md"}}],["1282",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/commitlint.config.js)\n\nThis code exports an object that contains configuration options for the commitlint library. Commitlint is a tool that checks commit messages to ensure they follow a certain format. The configuration options in this file specify the rules that commitlint should use when checking commit messages.\n\nThe `extends` property specifies that this configuration file extends the `config-conventional` configuration provided by commitlint. This means that the rules defined in `config-conventional` will be applied, and any additional rules defined in this file will override or add to those rules.\n\nThe `rules` property is an object that contains the specific rules to be applied. The `type-enum` rule specifies that the `type` field in a commit message must be one of the values listed in the array. The values in the array correspond to different types of changes that can be made in a commit, such as `feat` for a new feature, `fix` for a bug fix, `docs` for documentation changes, and so on.\n\nThe `// TODO Add Scope Enum Here` comment indicates that there is a rule that is currently commented out, but could be added later. This rule would specify that the `scope` field in a commit message must be one of a list of predefined values.\n\nOverall, this code ensures that commit messages in the project follow a consistent format, making it easier to understand the changes made in each commit. Here is an example of a valid commit message that would pass the rules defined in this file:\n\n```\nfeat: Add new animal to zoo\n```\n\nAnd here is an example of an invalid commit message that would fail the `type-enum` rule:\n\n```\nbugfix: Fix typo in animal name\n```\n\nIn summary, this code is an important part of the project's development process, as it helps maintain consistency and clarity in commit messages.\n## Questions: \n 1. What is the purpose of this code?\n This code exports an object that extends a conventional commit linting configuration and defines rules for commit message types.\n\n2. What is the significance of the `type-enum` rule?\n The `type-enum` rule enforces that commit messages must have one of the specified types, such as `feat`, `fix`, `docs`, etc.\n\n3. What is the purpose of the commented out `scope-enum` rule?\n The `scope-enum` rule is currently commented out, but it appears to be intended to enforce that commit messages must have a valid scope value.","metadata":{"source":".autodoc/docs/markdown/foundation/commitlint.config.md"}}],["1283",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/jest.config.js)\n\nThis code is responsible for creating a Jest configuration for testing a Next.js application. Jest is a popular JavaScript testing framework that is widely used in the industry. The `nextJest` function is imported from the `next/jest` package, which is a wrapper around Jest that provides additional functionality specific to Next.js applications.\n\nThe `createJestConfig` function is created by calling `nextJest` with an options object that specifies the directory where the Next.js application is located. This allows Jest to load the `next.config.js` and `.env` files in the test environment. The resulting `createJestConfig` function is then customized by adding additional configuration options to the Jest configuration object.\n\nThe `customJestConfig` object contains several configuration options that are specific to the project being tested. For example, the `setupFilesAfterEnv` option specifies a list of setup files that should be run before each test is executed. The `moduleDirectories` option specifies the directories that Jest should search for modules when resolving imports. The `testEnvironment` option specifies the environment in which the tests should be run.\n\nThe `moduleNameMapper` option is used to map module names to file paths. This is useful for resolving absolute imports and module path aliases. For example, the `^@/(.*)$` regular expression matches any import that starts with `@/` and captures the rest of the path. The `![\"Zoo](\"/images/logo.png\"){kind=logo}
\n \n Welcome to My Web App
\nThis is a great app that does amazing things.
\n \n\n```\n\nIn this example, the `link` element with `rel=\"manifest\"` specifies the location of the metadata file, and the `link` element with `rel=\"icon\"` specifies the location of a favicon that can be used to represent the application in the browser's UI. \n\nOverall, this code is an important part of a web application's infrastructure, as it provides information that can be used to optimize the user experience and make the application more accessible and user-friendly.\n## Questions: \n 1. What is the purpose of this code?\n This code is a JSON file that defines the name, icons, theme color, background color, and display settings for a web application.\n\n2. What are the dimensions of the icons?\n The icons have two different sizes: 192x192 and 512x512.\n\n3. What does the \"display\" property mean?\n The \"display\" property is set to \"standalone\", which means that the web application should be launched in a standalone mode, without any browser UI elements.","metadata":{"source":".autodoc/docs/markdown/foundation/public/favicon/site.md"}}],["1291",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/public/robots.txt)\n\nThis code is a robots.txt file that is used to communicate with web crawlers or robots that visit a website. The purpose of this file is to provide instructions to these robots on which pages or sections of the website they are allowed to access and index. \n\nThe first line of the code, \"User-agent: *\", specifies that the following instructions apply to all robots that visit the website. The next line, \"Allow: /\", allows all robots to access all pages and sections of the website. \n\nThe following lines specify the host and sitemap of the website. The \"Host\" line specifies the URL of the website that the robots should visit. The \"Sitemap\" line specifies the location of the sitemap file, which contains a list of all the pages on the website that the robots should index. \n\nThis code is important for search engine optimization (SEO) as it helps ensure that the website is properly indexed by search engines. By providing clear instructions to robots on which pages to index, the website can improve its search engine rankings and visibility. \n\nAn example of how this code may be used in the larger project is if the zoo website has multiple sections or pages that are not meant to be indexed by search engines, such as administrative pages or pages with sensitive information. The robots.txt file can be used to block these pages from being indexed, ensuring that they remain private and secure. \n\nOverall, the robots.txt file is a crucial component of any website's SEO strategy, and this code provides clear instructions to robots on how to properly index the zoo website.\n## Questions: \n 1. **What is the purpose of this code?**\\\nA smart developer might wonder what this code is for and how it fits into the overall project. Based on the content, it appears to be a robots.txt file that specifies which pages of the website can be crawled by search engines.\n\n2. **What does the \"User-agent\" and \"Allow\" directives mean?**\\\nA smart developer might be curious about the meaning of the \"User-agent\" and \"Allow\" directives in the code. The \"User-agent\" directive specifies which search engine robots are allowed to access the site, while the \"Allow\" directive specifies which pages or directories are allowed to be crawled.\n\n3. **Why is the \"Host\" and \"Sitemap\" specified in the code?**\\\nA smart developer might question why the \"Host\" and \"Sitemap\" are specified in the code. The \"Host\" directive specifies the domain name of the website, while the \"Sitemap\" directive specifies the location of the sitemap file that contains a list of all the pages on the website. This information is useful for search engines to properly index the site.","metadata":{"source":".autodoc/docs/markdown/foundation/public/robots.md"}}],["1292",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/public/sitemap-0.xml)\n\nThis code is an XML sitemap file that provides information about the URLs of a website to search engines. The sitemap is a list of URLs that are organized in a specific format to help search engines crawl and index the website more efficiently. \n\nThe file starts with an XML declaration that specifies the version and encoding of the document. The root element of the document is `urlset`, which is defined by the `http://www.sitemaps.org/schemas/sitemap/0.9` namespace. The `urlset` element contains a list of `url` elements, each of which represents a URL on the website. \n\nEach `url` element contains a `loc` element that specifies the URL of the page, a `changefreq` element that indicates how frequently the page is likely to change, a `priority` element that indicates the relative priority of the page compared to other pages on the site, and a `lastmod` element that specifies the date and time the page was last modified. \n\nThis sitemap file can be used by search engines to discover and index the pages on the website more efficiently. It can also be used by website owners to monitor the crawling and indexing of their site. \n\nFor example, a website owner can submit the sitemap file to Google Search Console to monitor the indexing status of their site. They can also use the sitemap to identify any crawl errors or indexing issues that may be preventing their site from appearing in search results. \n\nOverall, this sitemap file is an important component of a website's SEO strategy, as it helps search engines discover and index the pages on the site more efficiently.\n## Questions: \n 1. What is the purpose of this code?\n \n This code is an XML sitemap that lists the URLs of various pages on the website `https://tsnext-tw.thcl.dev` along with some metadata such as the last modification date and priority.\n\n2. What is the significance of the `changefreq`, `priority`, and `lastmod` elements?\n \n The `changefreq` element indicates how frequently the page is likely to change, the `priority` element indicates the relative importance of the page compared to other pages on the site, and the `lastmod` element indicates the date and time when the page was last modified.\n\n3. Is there any reason why some URLs have additional path components (e.g. `/animals/Carousel`) while others do not?\n \n It's possible that the additional path components correspond to different sections or categories of the website, but without more context it's difficult to say for sure.","metadata":{"source":".autodoc/docs/markdown/foundation/public/sitemap-0.md"}}],["1293",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/public/sitemap.xml)\n\nThis code is an XML file that contains a sitemap index for a website. The sitemap index is a list of all the sitemaps for the website, which are XML files that contain information about the website's pages and how they are organized. \n\nThe XML file starts with a declaration that specifies the version of XML being used and the character encoding. The sitemap index is then defined using the \"sitemapindex\" tag, which is part of the sitemap schema. The schema defines the structure and elements that can be used in a sitemap or sitemap index.\n\nWithin the sitemap index, there is a single sitemap defined using the \"sitemap\" tag. The \"loc\" element within the sitemap tag specifies the URL of the sitemap file. In this case, the URL is \"https://tsnext-tw.thcl.dev/sitemap-0.xml\". \n\nThis code is important for search engine optimization (SEO) because it helps search engines like Google understand the structure of the website and how its pages are organized. By providing a sitemap index, the website owner can ensure that all of their pages are being indexed by search engines and that the search engines are able to find the most important pages on the site. \n\nIn the larger project, this code would be used in conjunction with other sitemap files to provide a comprehensive list of all the pages on the website. The sitemap files would be generated automatically by a tool or plugin that crawls the website and extracts information about each page. The sitemap index would then be submitted to search engines like Google using the Google Search Console, which would help the website get indexed more quickly and accurately. \n\nExample usage:\n\n```xml\n\n\n
\n Slide 1
\n\n
\n Slide 2
\n\n
\n Slide 3
\n\n \n {/* header content */}\n \n \n \n \n
\n );\n}\n\nexport default HomePage;\n```\n\nIn this example, the `HomePage` component imports and renders the `Aiding` component as part of its `main` content. This allows the `HomePage` component to reuse the `Aiding` component's code and styling without having to duplicate it.\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a React component called `Aiding` that returns a JSX element representing a section of content related to a project called \"Aiding Species with Digital Twins\" for a zoo website.\n\n2. What libraries or frameworks are being used in this code?\n \n This code is using React, as evidenced by the use of JSX syntax and the `export default` statement at the end of the file. It is also using Tailwind CSS classes to style the HTML elements.\n\n3. What is the expected output of this code?\n \n The expected output of this code is a styled HTML section with a black background, containing a centered heading, two paragraphs of text, and some responsive layout adjustments based on screen size. This section is likely to be displayed on a webpage related to the zoo's digital initiatives.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/Aiding.md"}}],["1296",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Campaign.tsx)\n\nThe code above defines a React component called Campaign. This component is responsible for rendering a section of the Zoo website that encourages users to create their own fundraising campaigns to support the animals at the zoo. \n\nThe component returns a div element with a black background, containing several child elements. The first child element is a paragraph that encourages users to bring their community to the Zoo foundation. The second child element is a heading that invites users to create their own campaign. The third child element is a paragraph that explains how users can raise funds for the animals by leveraging their network. \n\nThe final child element is a Link component from the Next.js library. This component renders a hyperlink that says \"Learn More\". When the user clicks on this link, they will be directed to a different page on the Zoo website where they can learn more about creating a fundraising campaign. \n\nThis Campaign component is likely used in the larger Zoo project as a way to encourage user engagement and fundraising. By providing users with the tools and resources they need to create their own campaigns, the Zoo can tap into the power of social networks to raise awareness and funds for their cause. \n\nHere is an example of how this Campaign component might be used in a larger React application:\n\n```\nimport Campaign from './Campaign';\n\nfunction HomePage() {\n return (\n \n
\n );\n}\n\nexport default HomePage;\n```\n\nIn this example, the Campaign component is imported and rendered within a larger HomePage component. This allows the Zoo to showcase their fundraising campaign on their homepage and encourage users to get involved.\n## Questions: \n 1. What is the purpose of this code?\n - This code is defining a React component called `Campaign` that renders a section of a webpage with text and a button that links to more information.\n\n2. What is the role of the `Link` component from the `next/link` library?\n - The `Link` component is used to create a clickable link that navigates to a different page or section of the same page. In this code, it is used to create a button that links to more information.\n\n3. What is the significance of the CSS classes used in this code?\n - The CSS classes are used to style the elements of the webpage. They define properties such as font size, color, padding, and border. The classes are written using a syntax called Tailwind CSS, which provides pre-defined styles that can be easily applied to elements.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/Campaign.md"}}],["1297",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Collecting.tsx)\n\nThe code defines a React functional component called `Collecting`. This component renders a section of the web page related to collecting digital collectibles. The section has a black background and contains a heading, an image, and two links. \n\nThe heading is centered and has white text. It reads \"Start Collecting\" and is displayed in a larger font size on larger screens. \n\nThe image is displayed below the heading and is centered. It is a digital image of a collectible card and is loaded from the `/images/collecting.png` file. The image is displayed at a width of 3/5 of its container and has a fixed height of 800 pixels. \n\nBelow the image, there are two links displayed side by side on larger screens and stacked vertically on smaller screens. The links are styled as text with an arrow icon to the right. The first link has the text \"View Endangered Cards\" and is not currently linked to any URL. The second link has the text \"Shop Digital Collectibles\" and is linked to the `/collect` URL. \n\nThis component can be used in the larger project to display a section of the web page related to collecting digital collectibles. It can be imported and rendered within another component or page using the following code:\n\n```\nimport Collecting from 'path/to/Collecting';\n\nfunction MyPage() {\n return (\n Welcome to the Zoo!
\nCheck out our latest fundraising campaign:
\n\n
\n );\n}\n``` \n\nThis will render the `Collecting` component within the `MyPage` component, allowing the user to view and interact with the collectibles section of the page.\n## Questions: \n 1. What is the purpose of the `Link` and `Image` imports?\n- The `Link` import is used to create clickable links to other pages, while the `Image` import is used to display an image on the page.\n\n2. What is the significance of the `max-md` class in the code?\n- The `max-md` class is used to apply styles only to screens with a maximum width of the medium breakpoint, which is typically around 768px.\n\n3. Why are there SVG paths in the `Link` components?\n- The SVG paths are used to display an arrow icon next to the link text, indicating that the link will take the user to another page.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/Collecting.md"}}],["1298",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Comment.tsx)\n\nThe `Comment` function in this code file is responsible for rendering a section of the zoo website that displays various statistics related to animal conservation. The function defines an array of objects called `comments`, where each object represents a different statistic. Each object has four properties: `title`, `comment`, `link`, and `href`. \n\nThe `title` property is a string that represents the statistic being displayed. The `comment` property is a string that provides additional information about the statistic. The `link` property is a string that represents the text of a hyperlink that is displayed below the `comment`. Finally, the `href` property is a string that represents the URL that the hyperlink should point to.\n\nThe `Comment` function then returns a JSX element that renders the `comments` array. The array is mapped over using the `map` function, which returns a new array of JSX elements. For each object in the `comments` array, a new `div` element is created that displays the `title`, `comment`, and `link` properties. The `href` property is used to create a `Link` component from the `next/link` library, which wraps the hyperlink text and arrow icon. \n\nOverall, this code file is responsible for rendering a section of the zoo website that displays various statistics related to animal conservation. The `Comment` function takes an array of objects that represent these statistics and returns a JSX element that renders them in a visually appealing way. This code can be used in the larger project to provide users with important information about animal conservation and encourage them to take action to protect endangered species. \n\nExample usage:\n\n```\nimport Comment from './Comment';\n\nfunction HomePage() {\n return (\n \n
\n );\n}\n\nexport default HomePage;\n```\n## Questions: \n 1. What is the purpose of the `Link` import from 'next/link'?\n - The `Link` import is used to create links to other pages within the application.\n\n2. What is the purpose of the `comments` array?\n - The `comments` array contains objects with information about various animal-related issues, including statistics and links to relevant pages.\n\n3. What is the purpose of the `fill-rule` and `clip-rule` attributes in the SVG path?\n - The `fill-rule` and `clip-rule` attributes are used to define how the interior of the SVG path should be filled and how the path should be clipped, respectively.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/Comment.md"}}],["1299",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Donation.tsx)\n\nThe `Donation` function in this code file is responsible for rendering a donation page for the zoo project. The page displays three donation options with different amounts and descriptions of how the funds will be used. The first two options are fixed amounts of $50 and $100, respectively, while the third option allows the user to enter a custom donation amount. \n\nThe function uses an array of objects called `comments` to store the donation options. Each object has three properties: `title`, `comment`, and `type`. The `title` property stores the donation amount, the `comment` property provides a description of how the funds will be used, and the `type` property specifies whether the donation is a fixed amount or a custom amount. \n\nThe function then maps over the `comments` array to render each donation option as a separate `div` element. Each `div` contains the `title` and `comment` properties of the corresponding object from the `comments` array. If the `type` property of the object is `'normal'`, the `div` also contains a `Link` component that allows the user to navigate to a donation page. If the `type` property is `'custom'`, the `div` contains an input field that allows the user to enter a custom donation amount. \n\nThe function uses various CSS classes to style the donation page, including `text-gray-300`, `text-white`, `text-center`, `max-md`, `xl`, `md`, `lg`, `py-16`, `pb-10`, `w-full`, `border`, `rounded-xl`, and `cursor-pointer`. \n\nOverall, this code file provides a simple and user-friendly way for zoo visitors to make donations to support the zoo's conservation efforts. The `Donation` function can be imported and used in other parts of the zoo project to create a donation page or component. \n\nExample usage:\n\n```\nimport Donation from './Donation';\n\nfunction App() {\n return (\n Welcome to the Zoo!
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `Donation` function?\n- The `Donation` function is responsible for rendering a donation page with different donation options.\n\n2. What is the structure of the `comments` array and how is it used in the code?\n- The `comments` array is an array of objects that contain information about different donation options, including the title, comment, and type. It is used to dynamically render each donation option on the page.\n\n3. What is the difference between the `normal` and `custom` types of donation options?\n- The `normal` type of donation option has a fixed donation amount and includes a \"Donate\" button that redirects the user to a donation page. The `custom` type of donation option allows the user to enter a custom donation amount and includes an input field for the user to enter their desired amount.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/Donation.md"}}],["1300",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Footer.tsx)\n\nThe `Footer` component is responsible for rendering the footer section of the website. It contains two sections, one for larger screens and one for smaller screens. The larger screen section contains five columns, each with a different set of links. The first column contains links to the Zoo Foundation's social media pages, including Twitter, Telegram, Instagram, Discord, Medium, and YouTube. The second column contains links to pages about the Zoo Foundation, including the About page, Get Involved page, Donation page, Volunteer page, and Initiatives page. The third column contains links to pages about different animals, including the Red Wolf, Nubian Giraffe, Amur Leopard, and Sumatran Elephant. The fourth column contains links to pages about other animals, including the Javan Rhino, Pygmy Hippo, and Siberian Tiger. The fifth column contains links to the Zoo Foundation's Terms of Use, the zoolabs.io website, and the foundation's email address.\n\nThe smaller screen section contains fewer links and is more condensed. It contains links to the Home page, About page, Get Involved page, Collect page, and Donation page. It also contains links to the Zoo Foundation's social media pages.\n\nThis component can be used in the larger project by importing it into other components and rendering it at the bottom of the page. For example, a `Layout` component could import the `Footer` component and render it after the main content of the page. This would ensure that the footer is consistent across all pages of the website.\n\nExample usage:\n\n```\nimport Footer from './Footer';\n\nfunction Layout(props) {\n return (\n \n {props.children} \n \n
\n );\n}\n\nexport default Layout;\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `Footer` that renders the footer section of a website called Zoo Foundation.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several icons from the `react-icons` library and a `Link` component from the `next/link` library.\n\n3. What is the layout and content of the footer section?\n- The footer section is divided into two parts: a visible section for larger screens and a hidden section for smaller screens. Both sections contain links to various pages on the website, as well as links to the Zoo Foundation's social media accounts. The visible section also includes the Zoo Labs logo and links to the website's home page and donation page, while the hidden section includes links to the website's privacy policy and terms of service.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/Footer.md"}}],["1301",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/InvolvedContent.tsx)\n\nThe `InvolvedContent` function in the `zoo` project is a React component that renders a section of content related to getting involved with the zoo. The component takes in several props, including `title`, `content1`, `content2`, `image`, `direction`, and `type`. \n\nThe `title` prop is a string that represents the main heading of the section, while `content1` and `content2` are strings that represent the body content. The `image` prop is a string that represents the URL of an image to be displayed alongside the content. The `direction` prop is a string that determines the layout of the content and image, while the `type` prop is a string that determines which set of buttons to display.\n\nThe component returns a div that contains the content and image, with the layout determined by the `direction` prop. The content is styled with various classes that determine the font size, color, and spacing. The image is displayed using the `next/image` component, which optimizes the image for performance and responsiveness.\n\nThe buttons displayed at the bottom of the content are determined by the `type` prop. If `type` is equal to 2, then two buttons are displayed: one for donating and one for volunteering. If `type` is not equal to 2, then three buttons are displayed: one for volunteering, one for donating, and one for learning more. The buttons are styled with various classes that determine the font size, color, and spacing.\n\nOverall, the `InvolvedContent` component is a reusable component that can be used to display content related to getting involved with the zoo. It provides flexibility in terms of layout and button options, and uses the `next/image` component for optimized image display. \n\nExample usage:\n\n```\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code is for rendering a newsletter subscription form with an image and input fields for name and email.\n\n2. What is the role of the `Image` component imported from `next/image`?\n- The `Image` component is used to display an image with optimized performance and automatic optimization for different screen sizes.\n\n3. What is the significance of the CSS classes used in this code?\n- The CSS classes are used for styling the elements in the newsletter form, including the background color, text color, font size, input fields, and spacing between elements. The classes also have responsive variations for different screen sizes.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/Newsletter.md"}}],["1303",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/NextImage.tsx)\n\nThe code is a React component that wraps the Next.js Image component to provide additional functionality. The NextImage component accepts several props, including useSkeleton, imgClassName, blurClassName, alt, width, height, and ImageProps. The useSkeleton prop is a boolean that determines whether or not to add a background with a pulse animation. The imgClassName prop is a string that specifies the class name for the image. The blurClassName prop is a string that specifies the class name for the blur effect. The alt prop is a string that specifies the alt text for the image. The width and height props specify the dimensions of the image. The ImageProps prop is an object that contains additional props for the Next.js Image component.\n\nThe NextImage component renders a figure element that contains the Next.js Image component. If the width prop is not set, the figure element is given a width style that is equal to the width of the image. The Image component is given a className that is a combination of the imgClassName and blurClassName props. If the useSkeleton prop is true, the className also includes the animate-pulse class. The Image component is passed the src, width, height, alt, and rest props. The onLoadingComplete prop is used to set the status state to complete when the image has finished loading.\n\nThis component can be used in a larger project to display images with additional functionality, such as a loading animation or a blur effect. Here is an example of how the NextImage component can be used:\n\n```\nimport NextImage from '@/components/NextImage';\n\nfunction MyComponent() {\n return (\n Welcome to the Zoo!
\nLearn about our mission and subscribe to our newsletter:
\n\n
\n );\n}\n```\n\nIn this example, the NextImage component is used to display an image with a width and height of 500 pixels. The useSkeleton prop is set to true, which adds a background with a pulse animation. The imgClassName prop is set to \"my-image\", and the blurClassName prop is set to \"my-blur\". These class names can be used to style the image and the blur effect.\n## Questions: \n 1. What is the purpose of the `useSkeleton` prop?\n- The `useSkeleton` prop is used to add a background with pulse animation to the image, but should not be used if the image is transparent.\n\n2. What is the purpose of the `widthIsSet` variable?\n- The `widthIsSet` variable is used to check if the `className` prop includes the `w-` class, which is used to set the width of the image.\n\n3. What is the purpose of the `onLoadingComplete` prop?\n- The `onLoadingComplete` prop is used to set the status of the image to 'complete' once the image has finished loading.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/NextImage.md"}}],["1304",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Ourefforts.tsx)\n\nThe `Ourefforts` function is a React component that renders a section of the zoo project's website. The purpose of this section is to showcase the conservation efforts that the zoo is undertaking to protect endangered species. The component imports the `Image` component from the `next/image` library, which is used to display icons for each conservation effort.\n\nThe component defines an array of objects called `efforts`, where each object represents a conservation effort. Each object has a `title` property, which is a string that describes the conservation effort, a `content` property, which is a string that provides more details about the effort, and an `icon` property, which is a string that specifies the path to the icon image for the effort.\n\nThe `efforts` array is then mapped over to create a grid of cards, where each card displays the icon, title, and content for a conservation effort. The `Image` component is used to display the icon for each effort, and the `title` and `content` properties are used to populate the text content of each card.\n\nThe component also includes some CSS classes to style the cards and their contents. The cards are displayed in a grid layout, with two columns on larger screens and one column on smaller screens. The text content of each card is displayed in a flexbox layout, with the title and content displayed in separate paragraphs.\n\nThis component can be used in the larger zoo project to showcase the conservation efforts that the zoo is undertaking. It provides a visually appealing and informative way to communicate the zoo's commitment to protecting endangered species. Here is an example of how this component might be used in the larger project:\n\n```\nimport Ourefforts from './Ourefforts';\n\nfunction ConservationPage() {\n return (\n \n
\n );\n}\n\nexport default ConservationPage;\n```\n\nIn this example, the `ConservationPage` component renders a heading and the `Ourefforts` component, which displays the conservation efforts. This page could be linked to from the zoo's homepage or navigation menu to provide visitors with more information about the zoo's conservation efforts.\n## Questions: \n 1. What is the purpose of the `Image` import from 'next/image'?\n - The `Image` import is used to display images in the component, with optimized performance and automatic optimization of image sizes and formats.\n\n2. What is the purpose of the `efforts` array?\n - The `efforts` array contains information about the conservation efforts for different endangered species, including their titles, descriptions, and icons.\n\n3. What is the purpose of the `className` attributes in the JSX code?\n - The `className` attributes are used to apply CSS classes to the HTML elements in the component, for styling and layout purposes.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/Ourefforts.md"}}],["1305",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Principles.tsx)\n\nThe code above defines a React component called Principles that renders a section of the Zoo website. The purpose of this component is to display the principles that drive the Zoo's mission and encourage visitors to donate, get involved, or learn more about the organization.\n\nThe component is composed of a div element with a black background and a height of 52 pixels on larger screens and 28 pixels on smaller screens. Inside this div, there is another div element with a white background that contains the content of the section. The content is centered horizontally and vertically and has a maximum width of 16 pixels on smaller screens.\n\nThe content of the section consists of a title, five paragraphs, and three links. The title is centered and has a white color. It is displayed in a larger font size on larger screens and a smaller font size on smaller screens. The title has an underline that is achieved by wrapping the \"us\" word in an HTML u tag.\n\nThe five paragraphs describe the principles that drive the Zoo's mission. Each paragraph has a white color and a font size that varies depending on the screen size. The first paragraph is bold and describes the Zoo's commitment to wildlife conservation. The second paragraph describes the Zoo's goal of inspiring positive action through education. The third paragraph highlights the Zoo's use of innovative technology. The fourth paragraph emphasizes the importance of engaging communities for species protection. The fifth and final paragraph describes the Zoo's mission to foster human-nature coexistence.\n\nThe three links at the bottom of the section encourage visitors to donate, get involved, or learn more about the Zoo. Each link is wrapped in a Next.js Link component that provides client-side navigation without a full page refresh. The links have different styles depending on their background color, text color, and border color. The first link is white with a black border and black text on hover. The second link is black with a white border and white text on hover. The third link is black with a white border and white text on hover, but it is only displayed on smaller screens.\n\nOverall, the Principles component is an important part of the Zoo website that communicates the organization's mission and encourages visitors to take action. It is a well-designed and responsive section that adapts to different screen sizes and provides an easy way to navigate to other parts of the website.\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a React component called Principles that renders a section of the zoo website that displays the principles that drive the organization, along with links to donate, get involved, and learn more.\n\n2. What technologies or libraries are being used in this code?\n \n This code uses the React library and the Next.js framework, as well as the Link component from Next.js to create the links in the component.\n\n3. What is the expected behavior of the links in this component?\n \n The links in this component are expected to navigate the user to different pages on the zoo website when clicked. The \"Donate\" and \"Get Involved\" links are visible on all screen sizes, while the \"Learn More\" link is only visible on smaller screens.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/Principles.md"}}],["1306",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Safeguard.tsx)\n\nThe `Safeguard` function in this code file is responsible for rendering a section of the zoo website that highlights the conservation efforts of the zoo. The function returns a JSX element that contains a header, a short video link, and four sections of text that describe the conservation efforts of the zoo. \n\nThe `contents` array contains four objects, each with a `title` and `content` property. These properties are used to dynamically render the four sections of text on the page. The `map` function is used to iterate over the `contents` array and create a new `div` element for each object in the array. The `title` property is used to render a header for each section, and the `content` property is used to render a paragraph of text that describes the conservation effort.\n\nThe `Link` component from the `next/link` library is used to create a hyperlink to a short video about the zoo's conservation efforts. The `svg` element is used to render an arrow icon next to the hyperlink.\n\nOverall, this code file is a small part of a larger project that aims to showcase the conservation efforts of the zoo. The `Safeguard` function is likely used in conjunction with other functions and components to create a cohesive website that informs visitors about the zoo's mission and values. \n\nExample usage:\n\n```jsx\nimport Safeguard from './Safeguard';\n\nfunction App() {\n return (\n Conservation Efforts
\n\n
\n );\n}\n\nexport default App;\n```\n## Questions: \n 1. What is the purpose of the `Link` import from 'next/link'?\n - The purpose of the `Link` import is not clear from this code alone, but it is likely used to create a hyperlink to another page or resource within the application.\n\n2. What is the purpose of the `contents` array?\n - The `contents` array appears to be used to store information about different activities related to wildlife conservation, which are then displayed on the page.\n\n3. What is the purpose of the `max-md` class name used throughout the code?\n - The `max-md` class name is likely used to apply specific styling to elements when the screen size is below a certain threshold, such as on mobile devices.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/Safeguard.md"}}],["1307",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Seo.tsx)\n\nThe code is a React component that generates meta tags for search engine optimization (SEO) and social media sharing. The component is called Seo and takes in props that can override the default meta tags. The default meta tags are defined in the constant defaultMeta. \n\nThe component uses the Head component from the Next.js library to add the meta tags to the HTML head section. The useRouter hook is used to get the current URL path. \n\nThe meta tags include the title, description, URL, and image for the website. The Open Graph protocol is used to provide additional metadata for social media sharing. Twitter-specific meta tags are also included. \n\nThe component also includes links to various favicon images and a manifest file for progressive web apps. \n\nThe Seo component can be used in any page of the Zoo project to provide consistent and customizable meta tags. For example, a page about a specific animal in the zoo can use the Seo component to set the title to the animal's name and the image to a photo of the animal. \n\nHere is an example of how the Seo component can be used:\n\n```\nimport Seo from '../components/Seo';\n\nfunction AnimalPage({ animal }) {\n return (\n <>\n {animal.name}
\n{animal.description}
\n\n {isLoading ? (\n
\n );\n}\n```\n\nIn this example, the `App` component fetches some data from an API and renders it in a list. While the data is being fetched, the `Skeleton` component is rendered instead, with a height of 50 pixels. Once the data is loaded, the `Skeleton` component is replaced with the actual list of items. This provides a smooth and seamless user experience, as the user can see that something is happening while the data is being fetched.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a React component called Skeleton that renders a shimmering effect using CSS.\n\n2. What is the significance of the `clsxm` function?\n The `clsxm` function is likely a utility function that combines multiple class names into a single string, which is used to set the `className` prop of the `div` element.\n\n3. What is the purpose of the `backgroundImage` and `backgroundSize` styles?\n These styles are used to create the shimmering effect by animating a gradient background image that moves from left to right. The `backgroundSize` value of `700px 100%` ensures that the gradient is wide enough to cover the entire element.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/Skeleton.md"}}],["1309",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Volunteer.tsx)\n\nThe code above is a React component that renders a volunteer form on a webpage. The purpose of this component is to allow users to input their name and email address to express interest in volunteering for the zoo project. \n\nThe component is written in JSX, which is a syntax extension for JavaScript that allows developers to write HTML-like code in their JavaScript files. The component imports the `Image` component from the `next/image` library, which is used to display an image on the webpage. \n\nThe `Volunteer` function returns a div element that contains two child div elements. The first child div element contains a form that prompts users to input their name and email address. The form includes two input fields and a button that users can click to submit their information. The second child div element contains an image that is displayed on the right side of the form. \n\nThe form is styled using CSS classes that are defined in the `tailwindcss` library. The classes are used to set the background color, font size, and padding of the form elements. \n\nThis component can be used in the larger project to encourage users to get involved with the zoo project by volunteering their time and skills. The component can be added to a webpage using the `import` statement and the `Volunteer` component can be rendered using the `ReactDOM.render()` method. \n\nExample usage:\n\n```\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Volunteer from './Volunteer';\n\nReactDOM.render(\n - \n {data.map(item => (\n
- {item.name} \n ))}\n
\n
\n );\n}\n\nexport default AnimalPage;\n```\n\nIn this example, the `AnimalPage` component is responsible for rendering a page that displays information about a specific animal. The `Detail` component is used to display a detailed view of the animal, which includes an image and links to allow the user to take action to support the animal. By using the `Detail` component in this way, the `AnimalPage` component can provide a consistent and informative experience for users who want to learn more about the animals in the zoo.\n## Questions: \n 1. What is the purpose of the `Detail` function?\n- The `Detail` function is a React component that returns JSX code for rendering a page with information about the Red Wolf and options for volunteering, donating, and learning more.\n\n2. What is the significance of the `max-md` class name used throughout the code?\n- The `max-md` class name is used to apply styles that only take effect when the screen size is smaller than or equal to the maximum width specified for medium-sized devices.\n\n3. How are the `Link` components used in this code?\n- The `Link` components are used to create clickable links that navigate to different pages or sections within the same page. They are styled with CSS classes and contain SVG icons as well as text labels.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/animal/Detail.md"}}],["1311",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/animal/Item.tsx)\n\nThe code above is a React component that renders a list of animals with their images and links to their respective pages. The component receives a list of animals as a prop, and if the list is undefined, it uses a default list of animals. \n\nThe component uses the `Link` and `Image` components from the Next.js library to create links and images for each animal. It then maps over the list of animals and renders a div for each animal with its image and link. \n\nThe component also uses CSS classes to style the layout of the animals' images and links. The `grid` class creates a grid layout with three columns on medium and large screens and one column on small screens. The `border`, `rounded-xl`, and `space-y-8` classes create a border, rounded corners, and vertical spacing between the animals' images and links. \n\nThis component can be used in a larger project that displays a list of animals, such as a zoo website. The component can be imported and used in a page or another component that needs to display a list of animals. For example, the following code imports the `Item` component and uses it to display a list of animals:\n\n```\nimport Item from '../components/Item';\n\nfunction AnimalsPage() {\n const animals = [\n {\n title: \"African Lion\",\n img: \"/images/lion.png\",\n href: \"/animals/african_lion\"\n },\n {\n title: \"Bengal Tiger\",\n img: \"/images/tiger.png\",\n href: \"/animals/bengal_tiger\"\n },\n {\n title: \"Giant Panda\",\n img: \"/images/panda.png\",\n href: \"/animals/giant_panda\"\n }\n ];\n\n return (\n {animal.name}
\n\n
\n );\n}\n\nexport default AnimalsPage;\n```\n\nIn this example, the `AnimalsPage` component defines a list of animals and passes it to the `Item` component as a prop. The `Item` component then renders the list of animals with their images and links.\n## Questions: \n 1. What is the purpose of the `Item` function and what does it return?\n \n The `Item` function takes in a list of animal objects and returns a JSX element that displays the animals' images, titles, and links to their respective pages.\n\n2. What is the purpose of the `Link` and `Image` components imported from the `next` library?\n \n The `Link` component is used to create clickable links to the animal pages, while the `Image` component is used to display the animal images.\n\n3. What is the purpose of the `animals` constant and how is it used in the code?\n \n The `animals` constant is an array of animal objects that is used to populate the list of animals to be displayed. If a list of animals is not provided as a prop to the `Item` function, the `animals` constant is used as a default.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/animal/Item.md"}}],["1312",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/buttons/Button.tsx)\n\nThe `Button` component is a reusable React component that renders a button element with customizable styles and optional icons. It takes in several props, including `isLoading`, `isDarkBg`, `variant`, `size`, `leftIcon`, `rightIcon`, `leftIconClassName`, and `rightIconClassName`. \n\nThe `isLoading` prop is a boolean that determines whether the button should display a loading spinner. The `isDarkBg` prop is a boolean that determines whether the button should have a dark background. The `variant` prop is a string that determines the color scheme of the button and can be one of `primary`, `outline`, `ghost`, `light`, or `dark`. The `size` prop is a string that determines the size of the button and can be one of `sm` or `base`. The `leftIcon` and `rightIcon` props are React components that render icons to the left or right of the button text, respectively. The `leftIconClassName` and `rightIconClassName` props are strings that can be used to add additional classes to the icon elements.\n\nThe `Button` component uses the `clsxm` library to generate a dynamic class string based on the props passed in. This class string is used to apply the appropriate styles to the button element. The styles are defined using Tailwind CSS classes and are organized into regions based on the `size` and `variant` props. \n\nIf the `isLoading` prop is `true`, the button will display a loading spinner in the center of the button. The spinner is an instance of the `ImSpinner2` component from the `react-icons/im` library. The color of the spinner is determined by the `variant` prop.\n\nIf the `leftIcon` or `rightIcon` props are provided, the corresponding icon will be rendered to the left or right of the button text, respectively. The size of the icon is determined by the `size` prop, and additional classes can be added using the `leftIconClassName` and `rightIconClassName` props.\n\nOverall, the `Button` component provides a flexible and customizable way to render buttons with consistent styles throughout a React application. Here is an example of how the `Button` component can be used:\n\n```jsx\nimport Button from './Button';\n\nfunction MyComponent() {\n return (\n Animals
\n\n \n \n \n
\n );\n}\n```\n## Questions: \n 1. What are the available variants and sizes for the Button component?\n- The available variants for the Button component are 'primary', 'outline', 'ghost', 'light', and 'dark', while the available sizes are 'sm' and 'base'.\n2. What are the props that can be passed to the Button component?\n- The props that can be passed to the Button component are isLoading, isDarkBg, variant, size, leftIcon, rightIcon, leftIconClassName, rightIconClassName, and all the props that can be passed to a regular HTML button element.\n3. What is the purpose of the clsxm library used in this code?\n- The clsxm library is used to conditionally concatenate class names based on the values of the props passed to the Button component. This allows for dynamic styling of the button based on its props.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/buttons/Button.md"}}],["1313",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/buttons/IconButton.tsx)\n\nThe `IconButton` component is a reusable button component that can be used throughout the project. It is built using React and the `react-icons` library. The component accepts several props, including `isLoading`, `isDarkBg`, `variant`, `icon`, and `iconClassName`. \n\nThe `variant` prop determines the appearance of the button and can be one of five values: `primary`, `outline`, `ghost`, `light`, or `dark`. The `isDarkBg` prop is a boolean that determines whether the button is on a dark background. The `icon` prop is an icon from the `react-icons` library that will be displayed on the button. The `iconClassName` prop is an optional class name that can be applied to the icon.\n\nThe `IconButton` component renders a `button` element with the appropriate classes based on the props passed to it. The `clsxm` function is used to conditionally apply classes based on the `variant` and `isDarkBg` props. The `isLoading` prop is used to disable the button and display a spinner while the button is loading. \n\nIf the `isLoading` prop is `true`, the button is disabled and a spinner is displayed in the center of the button. The spinner is an instance of the `ImSpinner2` icon from the `react-icons/im` library. The color of the spinner is determined by the `variant` prop.\n\nIf the `icon` prop is provided, the icon is displayed to the left of the button text. The `iconClassName` prop can be used to apply additional classes to the icon.\n\nOverall, the `IconButton` component provides a flexible and reusable button component that can be customized to fit the needs of the project. It can be used in a variety of contexts, such as forms, modals, and navigation menus. \n\nExample usage:\n\n```jsx\nimport IconButton from './path/to/IconButton';\n\nfunction MyComponent() {\n return (\n \n \n Click me\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a React component called `IconButton` that renders a button with an icon and different variants based on the `variant` prop.\n\n2. What props can be passed to the `IconButton` component?\n- The `IconButton` component accepts the following props: `isLoading`, `isDarkBg`, `variant`, `icon`, `iconClassName`, and all the props that can be passed to a regular HTML button element.\n\n3. What are the different variants available for the `IconButton` component?\n- The `IconButton` component has five different variants: `primary`, `outline`, `ghost`, `light`, and `dark`. Each variant has its own set of styles that can be customized using the `variant` prop.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/buttons/IconButton.md"}}],["1314",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/buttons/TextButton.tsx)\n\nThe code defines a React component called `TextButton` that renders a button element with customizable styling. The component accepts several props, including `variant`, which determines the color scheme of the button. The available variants are `'primary'` and `'basic'`. \n\nThe component uses the `clsxm` library to conditionally apply CSS classes to the button element based on the `variant` prop and other props like `disabled` and `className`. The CSS classes define the appearance of the button, including its font weight, text color, and background color. \n\nThe `TextButton` component is exported as the default export of the module, which means it can be imported and used in other parts of the project. For example, a component that needs to render a button with a specific color scheme could import `TextButton` and pass the desired `variant` prop. \n\nHere's an example of how `TextButton` could be used in another component:\n\n```\nimport TextButton from '@/components/TextButton';\n\nfunction MyComponent() {\n return (\n \n Click me! \n Cancel \n
\n );\n}\n```\n\nIn this example, `MyComponent` renders two `TextButton` components with different `variant` props. The first button has a primary color scheme, while the second button has a basic color scheme.\n## Questions: \n 1. What is the purpose of the `clsxm` function being imported from `@/lib/clsxm`?\n - The smart developer might ask what the `clsxm` function does and how it is used in the code. The answer is that `clsxm` is a utility function used to concatenate class names together for use in the `className` attribute of the `button` element.\n\n2. What are the possible values for the `variant` prop and how do they affect the appearance of the button?\n - The smart developer might ask what the `variant` prop does and what values it can take. The answer is that `variant` is an optional prop that can take either `'primary'` or `'basic'` as its value, and it affects the color and text styles of the button.\n\n3. Why is the `buttonDisabled` prop being used instead of the `disabled` prop?\n - The smart developer might ask why the `buttonDisabled` prop is being used instead of the `disabled` prop, which is a standard prop for disabling form elements. The answer is that `buttonDisabled` is used to avoid a naming conflict with the `disabled` attribute of the `button` element, which is used to disable the button.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/buttons/TextButton.md"}}],["1315",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/intro/Intro.tsx)\n\nThe `Intro` function in this code file is responsible for rendering the introductory section of a web page. It takes in three props: `breadcrumbs`, `title`, and `comment`. The `breadcrumbs` prop is a string that represents the navigation path to the current page. The `title` prop is a string that represents the main title of the page. The `comment` prop is an optional string that represents a short description of the page.\n\nThe function returns a JSX element that contains the introductory section of the page. The section has a black background and is divided into two parts: one for larger screens and one for smaller screens. The larger screen section contains a video of a giraffe and some text, while the smaller screen section contains an image of a jungle and some text.\n\nThe video in the larger screen section is set to autoplay and loop. It is sourced from a file called `Giraffe_teen.webm`. The text in the section is divided into three parts: the `breadcrumbs` prop, the `title` prop, and the `comment` prop. The `breadcrumbs` and `title` props are displayed as headings, while the `comment` prop is displayed as a paragraph. There is also a horizontal line that separates the `comment` prop from the rest of the text.\n\nThe image in the smaller screen section is sourced from a file called `intro_bg.png`. It is displayed on the right side of the section and takes up most of the available space. The text in the section is similar to the text in the larger screen section, but it is arranged differently. The `breadcrumbs` prop is displayed above the `title` prop, and the `comment` prop is displayed below the `title` prop.\n\nThis function is likely used in the larger project to provide a consistent and visually appealing introduction to each page. By passing in different values for the `breadcrumbs`, `title`, and `comment` props, the function can be used to create unique introductory sections for each page. For example, on a page about lions, the `title` prop might be \"Lions\" and the `comment` prop might be \"Learn about the king of the jungle and how you can help protect them\". The `breadcrumbs` prop might be \"Home > Animals > Lions\". This would create an introductory section that is specific to the lion page and provides useful information to the user.\n## Questions: \n 1. What is the purpose of the `Intro` function and what are its required and optional parameters?\n \n The `Intro` function is a React component that returns JSX for rendering an introductory section of the website. It requires `breadcrumbs` and `title` parameters, and has an optional `comment` parameter.\n\n2. What is the purpose of the `Image` component from the `next/image` library and how is it used in this code?\n \n The `Image` component is used to display an image with optimized loading and resizing. In this code, it is used to display an image with the source `/images/intro_bg.png` and dimensions of 1000x1000 pixels.\n\n3. What is the purpose of the `max-md` class and how is it used in this code?\n \n The `max-md` class is used to apply styles that only take effect when the screen width is less than or equal to the `md` breakpoint. It is used to adjust the layout and font sizes of certain elements for smaller screens.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/intro/Intro.md"}}],["1316",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/layout/Header.tsx)\n\nThis code defines a React component called `Header` that renders a navigation bar at the top of a web page. The navigation bar consists of a logo or home link on the left and a list of links on the right. The links are defined in an array called `links`, which contains objects with `href` and `label` properties. The `href` property specifies the URL that the link should point to, while the `label` property specifies the text that should be displayed for the link.\n\nThe `Header` component uses the `UnstyledLink` component from the `@/components/links/UnstyledLink` module to render the links. The `UnstyledLink` component is a custom component that wraps the standard `a` tag and provides some additional styling and functionality. The `UnstyledLink` component takes two props: `href` and `className`. The `href` prop specifies the URL that the link should point to, while the `className` prop specifies the CSS class that should be applied to the link.\n\nThe `Header` component maps over the `links` array using the `Array.map()` method to render each link as an `li` element with an `UnstyledLink` component inside. The `key` prop is set to a unique string that combines the `href` and `label` properties of each link object. This is necessary to help React identify each list item when the component is updated.\n\nThe `Header` component is exported as the default export of the module, which means that it can be imported and used in other modules like this:\n\n```javascript\nimport Header from '@/components/Header';\n\nfunction App() {\n return (\n \n \n {/* rest of the app */}\n \n
\n );\n}\n```\n\nBy importing and rendering the `Header` component in another module, the navigation bar will be displayed at the top of the web page. The `Header` component can be customized by changing the `links` array or by passing additional props to the `UnstyledLink` component.\n## Questions: \n 1. What is the purpose of the `UnstyledLink` component and where is it defined?\n- The `UnstyledLink` component is used to create links without any default styling. It is defined in a file located at `@/components/links/UnstyledLink`.\n\n2. What is the purpose of the `Header` component and where is it used?\n- The `Header` component is used to render a sticky header with a logo and navigation links. It is likely used at the top of a website or application.\n\n3. What is the purpose of the `links` array and how is it used?\n- The `links` array contains objects with `href` and `label` properties that define the links to be displayed in the header. It is used to dynamically render the navigation links using the `map` function.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/layout/Header.md"}}],["1317",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/layout/Layout.tsx)\n\nThe code above is a React functional component that exports a default function called `Layout`. The purpose of this component is to provide a layout structure for other components in the project. It takes in a single prop called `children`, which is of type `React.ReactNode`. This prop is used to render the content that will be displayed within the layout.\n\nThe component is written using TypeScript, which is a superset of JavaScript that adds static type checking to the language. The `React.ReactNode` type is used to ensure that only valid React nodes can be passed as children to the `Layout` component.\n\nThe component returns a JSX expression that wraps the `children` prop within an empty fragment. This is done to avoid adding any additional markup to the DOM that could interfere with the layout of the child components.\n\nThe `Layout` component can be used in other components by importing it and wrapping the content that needs to be displayed within the layout with it. For example:\n\n```\nimport Layout from './Layout';\n\nfunction MyComponent() {\n return (\n Hello World!
\nThis is my component.
\n\n
\n );\n}\n```\n\nIn this example, the `UnderlineLink` component is used to render a link to the products page. The `href` prop is passed to the `UnderlineLink` component, which passes it down to the `UnstyledLink` component. The link text \"products\" is passed as a child to the `UnderlineLink` component.\n## Questions: \n 1. What is the purpose of the `clsxm` library being imported?\n - `clsxm` is likely being used to generate a class string based on the provided arguments, which is then used to apply multiple CSS classes to the `UnstyledLink` component.\n\n2. What is the `UnderlineLink` component and how is it different from `UnstyledLink`?\n - `UnderlineLink` is a custom component that extends `UnstyledLink` and adds additional CSS classes to create an animated underline effect on hover and focus. It also accepts a `className` prop to allow for further customization.\n\n3. Why is `React.forwardRef` being used in the definition of `UnderlineLink`?\n - `React.forwardRef` is being used to forward the `ref` prop from `UnderlineLink` to the underlying `UnstyledLink` component, allowing the parent component to access and manipulate the DOM node directly if needed.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/links/UnderlineLink.md"}}],["1323",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/links/UnstyledLink.tsx)\n\nThe code defines a React component called `UnstyledLink` that can be used to create links in a web application. The component takes in several props, including `href`, `children`, `openNewTab`, `className`, and `nextLinkProps`. \n\nThe `href` prop is a required string that specifies the URL that the link should point to. The `children` prop is also required and specifies the content of the link. The `openNewTab` prop is an optional boolean that specifies whether the link should open in a new tab or not. The `className` prop is an optional string that specifies additional CSS classes to apply to the link. Finally, the `nextLinkProps` prop is an optional object that contains any additional props that should be passed to the `Link` component from the Next.js framework.\n\nThe `UnstyledLink` component uses the `React.forwardRef` method to forward any refs passed to it to the underlying `a` or `Link` element. The component then checks whether the `openNewTab` prop is set to `true` or not. If it is not set or if the `href` prop starts with a `/` or `#`, the component renders a `Link` element from the Next.js framework. Otherwise, the component renders a regular `a` element with the `target='_blank'` attribute set to open the link in a new tab.\n\nThe `UnstyledLink` component is useful in a larger web application because it provides a consistent way to create links that can be styled and customized as needed. By default, the component uses the `Link` component from the Next.js framework, which provides client-side navigation and other benefits. However, if a link needs to open in a new tab, the `UnstyledLink` component can handle that as well. \n\nHere is an example of how the `UnstyledLink` component can be used in a React component:\n\n```\nimport UnstyledLink from '@/components/UnstyledLink';\n\nfunction MyComponent() {\n return (\n Check out our
\n About Us \n External Link \n
\n );\n}\n```\n\nIn this example, the `MyComponent` component renders two links using the `UnstyledLink` component. The first link points to a page within the application and uses the default behavior of the `Link` component. The second link points to an external website and opens in a new tab because the `openNewTab` prop is set to `true`.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a React component called `UnstyledLink` that conditionally renders either a `Link` component from the `next/link` library or a regular `a` tag with `target='_blank'` if the `openNewTab` prop is set to `true`.\n\n2. What are the required props for using this component?\n The required props for using this component are `href` and `children`, which specify the URL and content of the link, respectively. The `href` prop must be a string.\n\n3. What is the purpose of the `nextLinkProps` prop?\n The `nextLinkProps` prop is an optional object that can be used to pass additional props to the `Link` component when it is rendered. Any props that are valid for the `Link` component can be passed in this object, except for the `href` prop, which is already specified by the `href` prop of the `UnstyledLink` component.","metadata":{"source":".autodoc/docs/markdown/foundation/src/components/links/UnstyledLink.md"}}],["1324",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/constant/env.ts)\n\nThe code above defines three constants that are used to determine the environment in which the code is running. The first constant, `isProd`, checks if the `NODE_ENV` environment variable is set to `'production'`. If it is, then `isProd` is set to `true`. Otherwise, it is set to `false`. This constant can be used to determine if the code is running in a production environment or not.\n\nThe second constant, `isLocal`, checks if the `NODE_ENV` environment variable is set to `'development'`. If it is, then `isLocal` is set to `true`. Otherwise, it is set to `false`. This constant can be used to determine if the code is running in a local development environment or not.\n\nThe third constant, `showLogger`, is a bit more complex. It first checks if `isLocal` is `true`. If it is, then `showLogger` is set to `true`. This means that the logger will be shown in the console when running the code locally. If `isLocal` is `false`, then `showLogger` checks if the `NEXT_PUBLIC_SHOW_LOGGER` environment variable is set to `'true'`. If it is, then `showLogger` is set to `true`. Otherwise, it is set to `false`. This constant can be used to determine if the logger should be shown or not.\n\nOverall, this code is used to determine the environment in which the code is running and whether or not the logger should be shown. This information can be used to configure the code differently depending on the environment. For example, if the code is running in a production environment, certain features may be disabled or optimized for performance. If the code is running locally, the logger may be shown to aid in debugging. \n\nExample usage:\n\n```javascript\nif (isProd) {\n // disable certain features for production environment\n}\n\nif (isLocal) {\n // enable additional debugging features for local development\n}\n\nif (showLogger) {\n console.log('Logger enabled');\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n This code exports three constants related to the environment: `isProd` checks if the environment is production, `isLocal` checks if the environment is development, and `showLogger` determines whether to show a logger based on the environment and a public variable.\n\n2. What is the significance of `process.env.NODE_ENV` and `process.env.NEXT_PUBLIC_SHOW_LOGGER`?\n `process.env.NODE_ENV` is a built-in Node.js variable that indicates the current environment (e.g. development, production). `process.env.NEXT_PUBLIC_SHOW_LOGGER` is a public variable that can be set to `true` or `false` to control whether to show a logger.\n\n3. What is the purpose of the `??` operator in the `showLogger` constant?\n The `??` operator is a nullish coalescing operator that returns the left-hand side if it is not `null` or `undefined`, otherwise it returns the right-hand side. In this case, it returns `false` if `process.env.NEXT_PUBLIC_SHOW_LOGGER` is `null` or `undefined`.","metadata":{"source":".autodoc/docs/markdown/foundation/src/constant/env.md"}}],["1325",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/lib/clsxm.ts)\n\nThe code above is a function called `clsxm` that merges classes using two external libraries: `clsx` and `tailwind-merge`. The purpose of this function is to provide a way to merge classes with the full feature of `clsx` while also using `tailwind-merge` to merge classes with Tailwind CSS.\n\nThe `clsx` library is used to generate a string of classes based on the input provided. It can handle various types of input, such as strings, arrays, and objects, and it can also handle conditional classes. The `tailwind-merge` library is used to merge classes based on the Tailwind CSS utility classes.\n\nThe `clsxm` function takes in an array of `ClassValue` types, which can be any type that `clsx` can handle. It then passes this array to `clsx` to generate a string of classes. This string is then passed to `tailwind-merge` to merge any classes that match the Tailwind CSS utility classes. Finally, the merged classes are returned as a string.\n\nThis function can be used in the larger project to simplify the process of merging classes. Instead of manually merging classes using `clsx` and `tailwind-merge`, developers can simply call the `clsxm` function and pass in the classes they want to merge. This can save time and reduce the chance of errors.\n\nExample usage:\n\n```\nimport clsxm from 'path/to/clsxm';\n\nconst classes = clsxm('text-red-500', { 'font-bold': true }, 'bg-gray-200');\n// classes = 'text-red-500 font-bold bg-gray-200'\n```\n\nIn the example above, the `clsxm` function is used to merge three classes: `text-red-500`, `{ 'font-bold': true }`, and `bg-gray-200`. The resulting string of classes is `'text-red-500 font-bold bg-gray-200'`.\n## Questions: \n 1. What is the purpose of the `clsx` and `tailwind-merge` libraries being imported?\n- `clsx` is a library that allows for conditional joining of class names, while `tailwind-merge` is a library that merges Tailwind CSS classes together. \n\n2. What is the purpose of the `clsxm` function?\n- The `clsxm` function takes in any number of class values and merges them together using `clsx` and `tailwind-merge`, allowing for more flexible and powerful class merging capabilities.\n\n3. Are there any potential drawbacks or limitations to using this `clsxm` function?\n- Without knowing the specific use case and implementation of this function, it is difficult to determine any potential drawbacks or limitations. However, it is important to note that using multiple class merging libraries together may result in increased bundle size and potential conflicts between the libraries.","metadata":{"source":".autodoc/docs/markdown/foundation/src/lib/clsxm.md"}}],["1326",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/lib/helper.ts)\n\nThe code in this file provides three functions that can be used in a larger project. The first function, `openGraph`, generates an Open Graph (OG) image for a website. The function takes in an object with four properties: `siteName`, `description`, `templateTitle`, and `logo`. The `siteName` and `description` properties are required, while the other two are optional. The function returns a URL that can be used to generate the OG image. \n\nHere is an example of how to use the `openGraph` function:\n\n```\nconst ogUrl = openGraph({\n siteName: 'My Website',\n description: 'This is a description of my website',\n templateTitle: 'My Template',\n logo: 'https://example.com/logo.png'\n});\n\n// ogUrl will be a string containing the URL for the OG image\n```\n\nThe second and third functions, `getFromLocalStorage` and `getFromSessionStorage`, respectively, retrieve a value from either local or session storage. Both functions take in a `key` parameter and return the value associated with that key in the storage. If the storage is not available (e.g. if `window` or `sessionStorage` is undefined), the functions return `null`.\n\nHere is an example of how to use the `getFromLocalStorage` function:\n\n```\nconst myValue = getFromLocalStorage('myKey');\n\n// myValue will be either the value associated with 'myKey' in local storage or null\n```\n\nOverall, these functions can be used to add functionality to a larger project. The `openGraph` function can be used to generate OG images for a website, while the `getFromLocalStorage` and `getFromSessionStorage` functions can be used to retrieve values from storage.\n## Questions: \n 1. What is the purpose of the `openGraph` function?\n - The `openGraph` function generates an Open Graph URL based on the provided parameters such as site name, description, logo, and template title.\n\n2. What is the purpose of the `getFromLocalStorage` function?\n - The `getFromLocalStorage` function retrieves a value from the local storage of the browser based on the provided key.\n\n3. What is the purpose of the `getFromSessionStorage` function?\n - The `getFromSessionStorage` function retrieves a value from the session storage of the browser based on the provided key.","metadata":{"source":".autodoc/docs/markdown/foundation/src/lib/helper.md"}}],["1327",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/lib/logger.ts)\n\nThe code above is a logger function that is used to log information during development. It is designed to only log information when the `showLogger` constant is set to true. This function takes two parameters: `object` and `comment`. The `object` parameter is the object that needs to be logged, while the `comment` parameter is an optional string that can be used to provide additional information about the log.\n\nThe logger function uses the `console.log()` method to output the log information. The log information is formatted using a template literal that includes the `typeof window` check to ensure that the function works in both the browser and server environments. The log information includes the path name of the current page, the comment (if provided), and the object that needs to be logged.\n\nThis logger function is useful in the larger project because it allows developers to log information during development without cluttering the console with unnecessary logs. By setting the `showLogger` constant to true, developers can easily see the information they need to debug the application. Here is an example of how this logger function can be used in the larger project:\n\n```\nimport logger from '@/utils/logger';\n\nfunction myFunction() {\n const myObject = { name: 'John', age: 30 };\n logger(myObject, 'This is my object');\n}\n```\n\nIn the example above, the `myFunction()` function creates an object called `myObject` and passes it to the `logger()` function along with a comment. If the `showLogger` constant is set to true, the logger function will output the log information to the console. This information can be used to debug the application and identify any issues that may be present.\n## Questions: \n 1. What is the purpose of the `showLogger` constant and where is it defined?\n- `showLogger` is used to determine whether or not to log information and is likely defined in the `env` module. \n\n2. What is the significance of the `lg` snippet mentioned in the `comment` parameter?\n- The `lg` snippet is likely a shorthand for a comment template used by the developer to quickly generate comments for logging purposes. \n\n3. What is the purpose of the `%c` and `color` parameters in the `console.log` statement?\n- The `%c` parameter is used to apply CSS styles to the logged text, and the `color` parameter sets the color of the text to a specific shade of blue.","metadata":{"source":".autodoc/docs/markdown/foundation/src/lib/logger.md"}}],["1328",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/404.tsx)\n\nThis code defines a React component called `NotFoundPage` that renders a custom 404 error page for a web application. The component imports several other components and icons from the project's codebase, including `Layout`, `ArrowLink`, and `Seo`, as well as the `RiAlarmWarningFill` icon from the `react-icons/ri` library.\n\nWhen the `NotFoundPage` component is rendered, it returns a JSX template that includes the imported components and icon. The `Layout` component provides a consistent layout for the page, while the `Seo` component sets the page's metadata, including the title. The `ArrowLink` component renders a link to the home page of the application.\n\nThe main content of the page is contained within a `section` element with a white background. The content is centered vertically and horizontally using flexbox, and includes the `RiAlarmWarningFill` icon, which is animated to flicker and has a red color. The icon is followed by a heading that reads \"Page Not Found\" in large text, and a link to the home page of the application.\n\nThis component can be used in a larger web application to provide a custom 404 error page that matches the application's branding and design. The `NotFoundPage` component can be imported and used in a routing system to handle requests for pages that do not exist. For example, in a Next.js application, the `NotFoundPage` component could be used as the fallback page for undefined routes by defining a custom 404 page in the `pages/404.js` file:\n\n```javascript\nimport NotFoundPage from '@/components/NotFoundPage';\n\nexport default function Custom404() {\n return \n
\n );\n}\n\nexport default HomePage;\n```\n\n```tsx\n// MyApp.tsx\nimport { AppProps } from 'next/app';\nimport HomePage from './HomePage';\n\nimport '@/styles/globals.css';\nimport '@/styles/colors.css';\nimport 'slick-carousel/slick/slick.css';\nimport 'slick-carousel/slick/slick-theme.css';\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n return {title}
\nWelcome to the homepage!
\n\n
\n );\n}\n\nexport default App;\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code is for a carousel component that displays images of different animals and some text.\n\n2. What libraries or frameworks are being used in this code?\n- This code is using Next.js, React-Slick, and Next/Image.\n\n3. What is the future upgrade mentioned in the code?\n- The future upgrade mentioned in the code is an AI chat feature that will be available for all Zoo Animals.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/animals/Carousel.md"}}],["1333",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/animals/Content.tsx)\n\nThe `Content` function in this file is responsible for rendering a component that displays a title and content in a specific layout. The function takes in two parameters, `title` and `content`, both of which are strings. The `title` parameter is used to display the title of the content, while the `content` parameter is used to display the actual content.\n\nThe component is rendered using JSX, which is a syntax extension for JavaScript that allows for the creation of HTML-like elements. The component is wrapped in a `div` element with a class of `bg-black` and `md:px-64`, which sets the background color to black and adds padding to the left and right sides of the component on medium-sized screens and above.\n\nInside the `div` element, there is another `div` element with a class of `flex` and `max-md:flex-col max-md:px-4 justify-between py-20`. This sets the layout of the component to a flexbox with a column layout on screens smaller than medium-sized screens and adds padding to the left and right sides of the component on screens smaller than medium-sized screens. It also adds space between the title and content using `justify-between` and adds padding to the top and bottom of the component using `py-20`.\n\nInside the second `div` element, there are two `div` elements. The first `div` element has a class of `relative md:w-1/2 max-md:w-full md:pr-32 max-md:pb-8` and is used to display the title. It is positioned relative to its normal position and has a width of half the screen on medium-sized screens and above. It also adds padding to the right side of the component on medium-sized screens and below and padding to the bottom of the component on screens smaller than medium-sized screens.\n\nThe second `div` element has a class of `w-1/2 max-md:w-full flex justify-between space-x-16` and is used to display the content. It has a width of half the screen on medium-sized screens and above and is a flexbox with space between the elements using `justify-between`. It also adds space between the elements using `space-x-16`.\n\nInside the second `div` element, there is a `p` element with a class of `flex-1 text-white text-xl md:columns-2 gap-12`. This sets the text color to white, the font size to extra large, and adds two columns on medium-sized screens and above. It also adds space between the columns using `gap-12`. The `span` element inside the `p` element uses the `dangerouslySetInnerHTML` prop to render the `content` parameter as HTML.\n\nFinally, the `Content` function is exported as the default export of the file, which allows it to be imported and used in other files in the project. For example, in another file in the project, the `Content` component could be imported and used like this:\n\n```\nimport Content from './path/to/Content';\n\nfunction MyComponent() {\n return (\n \n My content\" />\n
\n );\n}\n```\n\nThis would render the `Content` component with a title of \"My Title\" and content of \"My content
\".\n## Questions: \n 1. What is the purpose of this code?\n - This code defines a React component called `Content` that takes in a `title` and `content` as props and returns a styled div with the `title` displayed in a large font and the `content` displayed in a smaller font with HTML formatting.\n\n2. What styling classes are being used in this code?\n - The code uses several Tailwind CSS classes for styling, including `bg-black`, `md:px-64`, `max-md:flex-col`, `max-md:px-4`, `py-20`, `relative`, `md:w-1/2`, `max-md:w-full`, `md:pr-32`, `max-md:pb-8`, `text-white`, `text-4xl`, `w-1/2`, `flex`, `justify-between`, `space-x-16`, `flex-1`, `text-xl`, and `md:columns-2`.\n\n3. What is the purpose of the `dangerouslySetInnerHTML` prop?\n - The `dangerouslySetInnerHTML` prop is used to render the `content` prop as HTML, which allows for the use of HTML tags and formatting within the `content` string. However, it is important to note that using this prop can pose a security risk if the `content` string is not properly sanitized.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/animals/Content.md"}}],["1334",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/animals/Header.tsx)\n\nThe `Header` function in this code file is a React component that renders a header section for a website. The header includes an image that flips when clicked, a title, a description, and two links for purchasing and adding items to a cart. The header also includes a navigation bar for mobile devices that displays links to different animal pages.\n\nThe `useState` hook is used to create a state variable `flip` that is initially set to `false`. This variable is used to determine whether the image should be flipped or not. When the image is clicked, the `setFlip` function is called with the opposite value of `flip`, which causes the image to flip.\n\nThe `ReactCardFlip` component is used to create a flipping effect for the image. It takes two `Image` components as children, each with a different image source. When the `isFlipped` prop is set to `true`, the second `Image` component is displayed, and when it is set to `false`, the first `Image` component is displayed.\n\nThe `Link` components are used to create two buttons for purchasing and adding items to a cart. They are styled with different colors and borders to differentiate them. The `href` prop is set to `#` for both links, indicating that they are not functional in this code file.\n\nThe navigation bar for mobile devices is created using `Link` components that link to different animal pages. The `className` prop is used to style the links with white text and a black background. The `active` class is added to the second link to indicate the current page.\n\nThis `Header` component can be used in a larger project as a reusable header section for different pages. The image, title, and description can be customized for each page, and the links can be made functional by adding appropriate URLs. The navigation bar can also be customized with different links and styles. Here is an example of how this component can be used in a larger project:\n\n```\nimport Header from './Header';\n\nfunction HomePage() {\n return (\n\n
\n );\n}\n\nexport default HomePage;\n```\n## Questions: \n 1. What is the purpose of the `ReactCardFlip` component and how does it work?\n - The `ReactCardFlip` component is used to flip between two images of an Amur Leopard trading card. It works by toggling the `isFlipped` state between `true` and `false` when the user clicks on a button, which triggers the flip animation.\n2. What is the significance of the `max-md` class name used throughout the code?\n - The `max-md` class name is used to apply styles that only affect screen sizes up to a certain width (in this case, the maximum width for medium-sized screens). This allows for responsive design that adapts to different screen sizes.\n3. What is the purpose of the `Link` components and how do they work?\n - The `Link` components are used to create clickable links to other pages within the website. They work by using the `href` prop to specify the URL of the destination page, and the `className` prop to apply styling to the link. When clicked, the link will navigate to the specified page.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/animals/Header.md"}}],["1335",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/animals/[animal].tsx)\n\nThis code defines the homepage of the zoo project using React. It imports various components from the project's file structure and renders them in a specific order to create the homepage. \n\nThe `Layout` component is imported from `@/components/layout/Layout` and is used to define the overall structure of the page. The `Seo` component is imported from `@/components/Seo` and is used to define the search engine optimization settings for the page. The `Navbar` component is imported from `@/components/Navbar` and is used to create the navigation bar at the top of the page. \n\nThe `Header` component is imported from `@/pages/animals/Header` and is used to create the header section of the page. The `Avatars` component is imported from `@/components/animal/Item` and is used to display a list of animal avatars. The `Content` component is imported from `@/pages/animals/Content` and is used to display information about the Amur leopard. The `Carousel` component is imported from `@/pages/animals/Carousel` and is used to display a carousel of images of various animals. \n\nThe `Aiding` component is imported from `@/components/Aiding` and is used to display information about how to aid the zoo. The `Newsletter` component is imported from `@/components/Newsletter` and is used to display a newsletter subscription form. The `Footer` component is imported from `@/components/Footer` and is used to create the footer section of the page. \n\nThe `HomePage` function is the main function that defines the structure of the page. It defines an array of animal avatars and passes it to the `Avatars` component as a prop. It also passes a title and content to the `Content` component as props. The content includes HTML tags for formatting. \n\nOverall, this code creates the homepage of the zoo project using various components that are imported from the project's file structure. It displays information about the Amur leopard, a carousel of animal images, and various sections for aiding the zoo and subscribing to a newsletter. It can be used as a starting point for creating other pages in the project. \n\nExample usage: \n\n```jsx\nimport HomePage from '@/pages/HomePage';\n\nfunction App() {\n return (\n Welcome to the Zoo!
\nExplore our collection of rare and endangered animals.
\n\n
\n );\n}\n```\n## Questions: \n 1. What components are being imported in this file?\n- The file is importing various components from different directories such as Layout, Seo, Navbar, StartCollecting, Newsletter, Footer, Header, Animal_Item, Animals, Donation, Volunteer, Campaign, Aiding, TradingCard, CardList, Support, Avatars, Content, and Carousel.\n\n2. What is the purpose of the `avatars` constant?\n- The `avatars` constant is an array of objects that contain information about different types of leopards such as their title, image, and href. It is used to display these avatars on the page using the `Avatars` component.\n\n3. What is the content being displayed on the page?\n- The page displays information about the Amur leopard, including its speed, agility, and behavior. It also includes a carousel of images and information about how to aid in the conservation of this species.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/animals/[animal].md"}}],["1336",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/api/hello.ts)\n\nThis code is a simple Next.js API route that returns a JSON response with a name property set to 'Bambang'. The purpose of this code is to provide a basic example of how to create an API route using Next.js. \n\nThe code imports the NextApiRequest and NextApiResponse types from the 'next' module. These types are used to define the types of the req and res parameters in the hello function. The req parameter is an instance of the NextApiRequest type, which represents the incoming HTTP request. The res parameter is an instance of the NextApiResponse type, which represents the outgoing HTTP response.\n\nThe hello function is the main function of this code. It takes in the req and res parameters and uses the res parameter to send a JSON response with a name property set to 'Bambang'. The res.status(200) method sets the HTTP status code of the response to 200, which means the request was successful. The .json() method serializes the response object to JSON and sends it as the response body.\n\nThis code can be used as a starting point for creating more complex API routes in a larger project. For example, if the project required an API route to retrieve data from a database, the hello function could be modified to query the database and return the results as a JSON response. \n\nHere is an example of how this code could be used in a larger project:\n\n```javascript\nimport { NextApiRequest, NextApiResponse } from 'next';\n\nexport default function getData(req: NextApiRequest, res: NextApiResponse) {\n // Query the database to get the data\n const data = queryDatabase();\n\n // Send the data as a JSON response\n res.status(200).json(data);\n}\n```\n\nIn this example, the getData function queries the database to get some data and sends it as a JSON response using the res.status(200).json() methods. This function could be used as an API route in a larger project to retrieve data from a database.\n## Questions: \n 1. What is the purpose of this API route?\n This API route is a simple example that returns a JSON response with a name property set to 'Bambang'.\n\n2. What is the expected input for this API route?\n This API route does not expect any input as it does not use the `req` parameter.\n\n3. What is the expected output format for this API route?\n The expected output format for this API route is a JSON object with a single property named 'name' set to a string value. The HTTP status code returned is 200.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/api/hello.md"}}],["1337",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/collect/CardList.tsx)\n\nThe `CardList` function in the `zoo` project is responsible for rendering a list of trading cards on a webpage. The function imports the `Image` component from the `next/image` library, which is used to display the images of the trading cards. \n\nThe function defines an array called `cardlist` that contains objects with the `img` property set to the file path of each trading card image. The function then returns a JSX element that contains a `div` with a black background color. Inside this `div`, there is another `div` with a grid layout that displays the trading cards in a 3-column layout. \n\nThe `map` method is used to iterate over the `cardlist` array and render an `Image` component for each trading card. The `src` attribute of the `Image` component is set to the `img` property of each object in the `cardlist` array. The `width` and `height` attributes are set to 800 pixels, which is the size of the trading card images. \n\nThis function can be used in the larger `zoo` project to display a collection of trading cards on a webpage. The `cardlist` array can be updated with new trading cards, and the `CardList` function will automatically render the updated list of cards. \n\nExample usage of the `CardList` function:\n\n```\nimport CardList from './CardList';\n\nfunction TradingCardsPage() {\n return (\n \n
\n );\n}\n\nexport default TradingCardsPage;\n```\n\nIn this example, the `TradingCardsPage` component renders a heading and the `CardList` component to display a collection of trading cards.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a component called `CardList` that renders a grid of trading card images using the Next.js `Image` component.\n\n2. Where are the trading card images sourced from?\n The trading card images are sourced from the `/images` directory, but it is unclear where this directory is located relative to the `zoo` project.\n\n3. Why are there duplicate entries in the `cardlist` array?\n It is unclear why there are duplicate entries for the `img` property in the `cardlist` array. This may be intentional or a mistake that needs to be corrected.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/collect/CardList.md"}}],["1338",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/collect/Header.tsx)\n\nThe `Header` function in this code file is responsible for rendering the header section of the zoo website. It imports two components from the Next.js library, `Link` and `Image`, which are used to create links to different animal pages and display an image of an elephant, respectively. \n\nThe header is contained within a `div` element with a black background color. The header is divided into two sections, which are aligned vertically on smaller screens and horizontally on larger screens. The first section contains a heading that reads \"Animals we support.\" The heading is styled with white text and is responsive, changing size based on the screen size. The second section contains an image of an elephant and a list of links to different animal pages. \n\nThe list of links is created using the `Link` component from Next.js. Each link is styled with white text and has a hover effect. When clicked, the link takes the user to a different page on the website that contains information about the animal. The links are hardcoded in the `Header` function, but they could be generated dynamically based on data from a database or API. \n\nThe `Image` component is used to display an image of an elephant on the right side of the header. The image is responsive and changes size based on the screen size. The `src` attribute specifies the path to the image file, which is located in the `public/images` directory. The `width` and `height` attributes specify the dimensions of the image in pixels. \n\nOverall, the `Header` function is an important component of the zoo website that provides users with easy access to information about different animals. It is responsive and visually appealing, with a black background, white text, and an image of an elephant. The links to different animal pages are hardcoded, but could be generated dynamically based on data from a database or API.\n## Questions: \n 1. What is the purpose of this code?\n - This code is for rendering the header section of a web page related to a project called zoo. It includes a title and links to different animal pages.\n\n2. What is the role of the `next/link` and `next/image` modules?\n - The `next/link` module is used to create links to different animal pages, while the `next/image` module is used to display an image of a collectible elephant.\n\n3. What is the significance of the class names used in the code?\n - The class names are used for styling the elements using CSS. They are used to specify the layout, font size, padding, margin, and other visual properties of the header and the links.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/collect/Header.md"}}],["1339",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/collect/Support.tsx)\n\nThe `Support` function in the `zoo` project returns a JSX element that renders a section of the project's website. The purpose of this section is to inform visitors about the project's mission to support endangered species through the sale of digital collectibles. \n\nThe JSX element returned by the `Support` function contains a `div` element with a black background and padding. Inside this `div`, there is another `div` element with a flexbox layout and padding. The `flex` class is used to arrange the child elements of this `div` in a row on larger screens and in a column on smaller screens. \n\nThe `h1` element inside the second `div` contains the main heading of the section, which is displayed in white text and has varying font sizes depending on the screen size. The `p` elements contain paragraphs of text that describe the project's mission and how it works. These paragraphs are also displayed in white text and have varying font sizes depending on the screen size. \n\nThe `Support` function is exported as the default export of the module, which means that it can be imported and used in other parts of the project. For example, if another component needs to display the `Support` section on a different page of the website, it can import the `Support` function and render it as a child element. \n\nHere is an example of how the `Support` function can be used in another component:\n\n```\nimport Support from './Support';\n\nfunction HomePage() {\n return (\n My Trading Cards
\n\n
\n );\n}\n\nexport default HomePage;\n```\n\nIn this example, the `HomePage` component imports the `Support` function from the `Support.js` module and renders it as a child element inside a `div` element. This will display the `Support` section below the main heading of the page.\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a React component called `Support` that returns a JSX element representing a section of a webpage related to supporting endangered species through digital collectibles.\n\n2. What libraries or frameworks are being used in this code?\n \n This code is using React, as evidenced by the use of JSX syntax and the `export default` statement at the end of the file. It is also using Tailwind CSS classes to style the HTML elements.\n\n3. What is the expected output of this code?\n \n The expected output of this code is a section of a webpage with a black background, containing a heading and three paragraphs of text in white font. The text describes the purpose and benefits of purchasing digital collectibles to support endangered species, and encourages the reader to take action. The layout of the text is responsive, with different styles applied depending on the screen size.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/collect/Support.md"}}],["1340",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/collect/TradingCard.tsx)\n\nThe `TradingCard` function in this file is responsible for rendering a trading card component on a web page. The component includes an image of a trading card, a title, and a description. The purpose of this component is to provide users with a visual representation of the trading cards available on the website and encourage them to explore and learn more about the animals featured on the cards.\n\nThe component is built using the Next.js framework and includes two imported modules: `Image` and `Link`. The `Image` module is used to display the image of the trading card, while the `Link` module is used to create a link to the page where users can view all of the trading cards available on the website.\n\nThe component is structured using HTML-like syntax, with the `className` attribute used to apply CSS classes to the various elements. The `div` element with the class `bg-black` sets the background color of the component to black, while the `h1` element with the class `text-white` sets the color of the text to white.\n\nThe `Image` component is used to display the image of the trading card. The `src` attribute specifies the path to the image file, while the `width` and `height` attributes set the dimensions of the image. The `alt` attribute is left blank, indicating that the image is purely decorative and does not require an alternative text description.\n\nThe `Link` component is used to create a link to the page where users can view all of the trading cards available on the website. The `href` attribute specifies the URL of the page, while the `className` attribute applies CSS classes to the link. The link includes a text label and an SVG icon, which are styled using CSS.\n\nOverall, the `TradingCard` component is a simple but effective way to showcase the trading cards available on the website and encourage users to explore and learn more about the animals featured on the cards. It can be easily integrated into the larger project by importing and rendering the component wherever trading cards are displayed. For example:\n\n```\nimport TradingCard from './TradingCard';\n\nfunction TradingCardPage() {\n return (\n Welcome to the Zoo Project
\n\n
\n );\n}\n\nexport default TradingCardPage;\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code is for a TradingCard component that displays an image of a trading card and some text, with a link to view all cards.\n\n2. What libraries or frameworks are being used in this code?\n- This code is using the Next.js framework and the Image and Link components from the Next.js library.\n\n3. What is the expected output of this code?\n- The expected output of this code is a TradingCard component that displays an image of a trading card, some text, and a link to view all cards. The component is styled with some responsive design using CSS classes.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/collect/TradingCard.md"}}],["1341",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/collect/index.tsx)\n\nThis code defines the `HomePage` component for the `zoo` project. The component is a functional component that returns a JSX expression. The purpose of this component is to render the entire home page of the `zoo` website. \n\nThe `HomePage` component imports various components from the `@/components` and `@/pages` directories. These components include `Layout`, `Seo`, `Navbar`, `Header`, `Aiding`, `TradingCard`, `CardList`, `Support`, `Animal_Item`, `Animals`, `Donation`, `Volunteer`, `StartCollecting`, `Campaign`, `Newsletter`, and `Footer`. \n\nThe `Layout` component is a higher-order component that wraps the entire page content. The `Seo` component is responsible for setting the meta tags for the page. The `Navbar` component renders the navigation bar for the website. The `Header` component renders the header section of the home page. The `Aiding`, `TradingCard`, `CardList`, and `Support` components render various sections of the home page related to collecting and trading cards. The `Animal_Item` and `Animals` components render the details of individual animals and a list of animals, respectively. The `Donation` and `Volunteer` components render sections related to donations and volunteering. The `StartCollecting` component renders a section that encourages users to start collecting cards. The `Campaign` component renders a section related to ongoing campaigns. The `Newsletter` component renders a section for subscribing to the newsletter. The `Footer` component renders the footer section of the home page.\n\nThis `HomePage` component is used as the main entry point for the home page of the `zoo` website. It imports and renders all the necessary components to display the entire home page. \n\nExample usage:\n```jsx\nimport HomePage from '@/pages/HomePage';\n\nfunction App() {\n return (\n Trading Cards
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `Layout` component being imported?\n- The `Layout` component is likely responsible for providing a consistent layout structure for the entire application.\n\n2. What is the difference between the `Animal_Item` and `Animals` components?\n- Without further context, it is unclear what the difference is between these two components. It is possible that `Animal_Item` is responsible for rendering a single animal detail, while `Animals` is responsible for rendering a list of animals.\n\n3. What is the purpose of the `TradingCard`, `CardList`, and `Support` components?\n- Without further context, it is unclear what the purpose of these components is. It is possible that they are related to a feature for collecting or trading animal-themed cards.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/collect/index.md"}}],["1342",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/donation/Header.tsx)\n\nThe `Header` function in this code file is a React component that renders a donation header for the Zoo Labs Foundation website. The component imports the `useState` hook from React and the `Image` component from the `next/image` library. It also imports the `Switch` component from the `react-switch` library.\n\nThe `Header` function returns a JSX element that contains the donation header. The header is divided into two sections: the left section contains the donation form and the right section contains an image. The left section is further divided into four parts: a title, a heading, a paragraph, and a donation form.\n\nThe title is a short statement that reads \"End the road to extinction\". The heading is a call to action that reads \"Donate to the Zoo Labs Foundation\". The paragraph is a description of the foundation's mission and purpose. The donation form contains three elements: a switch, an input field, and a button.\n\nThe switch is a toggle button that allows the user to switch between a one-time donation and a monthly donation. The input field allows the user to enter the amount they wish to donate. The button is a call to action that reads \"Donate Now\".\n\nThe right section contains an image that is floated to the right. The image is a visual representation of the foundation's mission and purpose.\n\nThe `Header` function exports the component so that it can be used in other parts of the Zoo Labs Foundation website. For example, the component can be imported into the homepage of the website and rendered as a header at the top of the page.\n\nHere is an example of how the `Header` component can be used in a React application:\n\n```\nimport React from 'react';\nimport Header from './Header';\n\nfunction App() {\n return (\n \n
\n );\n}\n\nexport default App;\n```\n## Questions: \n 1. What is the purpose of the `Switch` component and how does it work?\n - The `Switch` component is used to toggle between monthly and one-time donations. It works by calling the `handleChange` function when it is toggled, which updates the `checked` state variable.\n2. What is the purpose of the `Image` component and how is it positioned on the page?\n - The `Image` component is used to display an image of a donation header. It is positioned on the right side of the page using the `float-right` class.\n3. What is the purpose of the `useState` hook and how is it used in this code?\n - The `useState` hook is used to create a state variable called `checked` and a function called `setChecked` to update it. It is used to keep track of whether the monthly donation switch is toggled on or off.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/donation/Header.md"}}],["1343",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/donation/index.tsx)\n\nThis code is a React component that renders the homepage of a website. It imports several components from the project's source code and uses them to build the page layout. \n\nThe `Layout` component is the top-level container for the page, and it wraps all the other components. The `Seo` component is responsible for setting the metadata for the page, such as the title and description. The `Navbar` component is the website's navigation menu, and it provides links to other pages on the site. The `Header` component is a custom component that displays a banner image and some text. The `StartCollecting` component is a form that allows users to donate money to the website. The `Campaign` component displays information about the website's current fundraising campaign. The `Newsletter` component is a form that allows users to sign up for the website's newsletter. Finally, the `Footer` component contains links to social media and other information about the website.\n\nThis component is likely used as the main entry point for the website, and it is responsible for rendering the content that users see when they first visit the site. Other components and pages may be linked to from this page, but this component is the starting point for the user's journey through the site.\n\nHere is an example of how this component might be used in a larger project:\n\n```jsx\nimport * as React from 'react';\nimport { BrowserRouter as Router, Switch, Route } from 'react-router-dom';\n\nimport HomePage from '@/pages/HomePage';\nimport AboutPage from '@/pages/AboutPage';\nimport ContactPage from '@/pages/ContactPage';\n\nexport default function App() {\n return (\n Welcome to the Zoo Labs Foundation website!
\n\n
\n );\n}\n```\n\nThis will render the `Header` component at the top of the `MyPage` component.\n\nOverall, this code demonstrates how React components can be used to create reusable UI elements that can be composed together to build complex web pages. The use of the Next.js `Image` component also shows how images can be optimized for performance and accessibility in a Next.js project.\n## Questions: \n 1. What is the purpose of the `Image` import from 'next/image'?\n - The `Image` import is used to display an image on the webpage with optimized performance and accessibility.\n\n2. What is the significance of the `className` attributes used in the `div` and `h1` tags?\n - The `className` attributes are used to apply CSS styles to the corresponding HTML elements.\n\n3. What is the purpose of the `export default Header` statement at the end of the code?\n - The `export default` statement is used to export the `Header` function as the default export of this module, allowing it to be imported and used in other parts of the project.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/getinvolved/Header.md"}}],["1345",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/getinvolved/index.tsx)\n\nThis code defines the homepage of the Zoo project, a website dedicated to conservation efforts for endangered species. The code imports various React components from the project's components directory and renders them within a Layout component. \n\nThe rendered components include a Navbar, Seo, Header, InvolvedContent, Comments, Donation, Volunteer, StartCollecting, Campaign, Newsletter, and Footer. These components provide information about the Zoo's conservation programs, on-the-ground activities, animal rescue efforts, data collection, legal policies, and opportunities for involvement through volunteering, donating, and collecting.\n\nThe InvolvedContent component is used multiple times to display information about the Zoo's various initiatives. It takes in props such as an image, title, and content and renders them in a specific layout based on the type and direction props. The Comments component allows users to leave comments on the page, while the Donation and Volunteer components provide ways for users to contribute to the Zoo's efforts.\n\nOverall, this code defines the structure and content of the Zoo project's homepage, providing users with information about the organization's conservation efforts and ways to get involved. It can be used as a starting point for further development of the project's website and can be customized to fit the specific needs of the organization. \n\nExample usage:\n```\nimport HomePage from '@/pages/HomePage';\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What components are being imported and used in this code?\n- The code is importing and using various components such as Layout, Seo, Navbar, Header, InvolvedContent, Comments, Donation, Volunteer, StartCollecting, Campaign, Newsletter, and Footer.\n\n2. What is the purpose of this code?\n- This code is rendering a homepage for the Zoo Labs Foundation website, which includes various sections such as information about their conservation programs, on-ground activities, rescuing animals, collecting data, legal avenues, and ways to get involved through volunteering, donating, and signing up for their newsletter.\n\n3. What is the significance of the \"type\" and \"direction\" props being passed to the InvolvedContent component?\n- The \"type\" prop is used to determine the layout of the InvolvedContent component, with a value of 1 indicating a left-aligned layout and a value of 2 indicating a right-aligned layout. The \"direction\" prop is used to determine the order in which the image and content are displayed, with a value of 1 indicating that the image is displayed before the content and a value of 2 indicating that the content is displayed before the image.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/getinvolved/index.md"}}],["1346",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/index.tsx)\n\nThis code defines the `HomePage` component for the `zoo` project. The component is a functional component that returns a JSX element. The `HomePage` component is composed of several other components imported from the `@/components` directory. \n\nThe `Layout` component is the top-level component that wraps all the other components. It provides a consistent layout for the entire page. The `Seo` component is used to set the metadata for the page, such as the title and description. The `Navbar` component is the navigation bar that appears at the top of the page. \n\nThe `Intro` component is used to display an introduction to the page. It takes in several props, including `breadcrumbs`, `title`, and `comment`, which are used to customize the content of the component. The `Comment` component is a section for user comments. The `Principles` component displays the guiding principles of the `zoo` project. The `Donation` component is used to solicit donations from users. \n\nThe `AnimalDetail` component is used to display detailed information about a specific animal. It is wrapped in a `div` with a black background. The `AnimalItems` component displays a list of animals with brief descriptions. The `Safeguard` component displays information about how the `zoo` project is safeguarding wildlife. The `StartCollecting` component is used to encourage users to start collecting donations. The `Newsletter` component is used to encourage users to sign up for the `zoo` project's newsletter. The `Footer` component is the footer that appears at the bottom of the page. \n\nOverall, the `HomePage` component is the main landing page for the `zoo` project. It provides an overview of the project's mission, principles, and activities. It also provides users with opportunities to donate, learn more about specific animals, and sign up for the newsletter. The component is composed of several smaller components that are used to display specific types of content. \n\nExample usage:\n\n```jsx\nimport HomePage from '@/pages/HomePage';\n\nfunction App() {\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What components are being imported and used in this file?\n- The file is importing and using various components such as Layout, Intro, Seo, Navbar, Comment, Principles, Donation, AnimalDetail, AnimalItems, Safeguard, StartCollecting, Newsletter, and Footer.\n\n2. What is the purpose of the HomePage function?\n- The HomePage function is the default export of the file and it returns a JSX element that renders the imported components in a specific order to create the homepage of the website.\n\n3. What is the significance of the \"breadcrumbs\" and \"comment\" props passed to the Intro component?\n- The \"breadcrumbs\" prop is used to display the hierarchy of the website and the \"comment\" prop is used to display a short description of the foundation's mission. These props are used to provide context and information to the user about the website and its purpose.","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/index.md"}}],["1347",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/terms/index.tsx)\n\nThis code defines the homepage of the Zoo Labs Foundation website. The purpose of this code is to display the Privacy Policy of the organization. The code imports several components from the `@/components` directory, including `Layout`, `Seo`, `Navbar`, `Newsletter`, and `Footer`. These components are used to structure the page and provide additional functionality, such as search engine optimization and email newsletter subscription.\n\nThe `HomePage` function returns a JSX element that contains the imported components and the Privacy Policy content. The content is structured using HTML tags and CSS classes to define the layout and styling of the page. The Privacy Policy content is divided into sections that explain how the organization collects, uses, and protects personal information. The content also includes information about user rights and choices, as well as contact information for the organization.\n\nThis code can be used as a template for other pages on the Zoo Labs Foundation website. By importing and using the `Layout`, `Seo`, `Navbar`, `Newsletter`, and `Footer` components, other pages can be structured and styled consistently with the homepage. The Privacy Policy content can also be modified to create other legal documents, such as Terms of Service or a CCPA Privacy Notice for California Residents.\n\nHere is an example of how this code can be used to create a Terms of Service page:\n\n```\nimport * as React from 'react';\n\nimport Layout from '@/components/layout/Layout';\nimport Seo from '@/components/Seo';\nimport Navbar from '@/components/Navbar';\nimport Newsletter from '@/components/Newsletter';\nimport Footer from '@/components/Footer';","metadata":{"source":".autodoc/docs/markdown/foundation/src/pages/terms/index.md"}}],["1348",{"pageContent":"export default function TermsOfServicePage() {\n return (\n \n
\n Terms of Service
\n\n This is the Terms of Service page for Zoo Labs Foundation. By using our website or services, you agree to the terms of this agreement. We may update this agreement from time to time, so please review it periodically to stay informed about any changes.
\n 1. Acceptance of Terms
\nBy using our website or services, you agree to the terms of this agreement. If you do not agree to these terms, you should not use our website or services.
\n2. Use of Website and Services
\nYou may use our website and services only for lawful purposes and in accordance with these terms. You agree not to use our website or services:
\n(a) In any way that violates any applicable federal, state, local, or international law or regulation.
\n(b) To engage in any conduct that restricts or inhibits anyone's use or enjoyment of the website or services, or which, as determined by us, may harm Zoo Labs Foundation or users of the website or services or expose them to liability.
\n(c) To impersonate or attempt to impersonate Zoo Labs Foundation, a Zoo Labs Foundation employee, another user, or any other person or entity.
\n(d) To engage in any other conduct that restricts or inhibits anyone's use or enjoyment of the website or services, or which, as determined by us, may harm Zoo Labs Foundation or users of the website or services or expose them to liability.
\n3. Intellectual Property
\nThe website and its entire contents, features, and functionality (including but not limited to all information, software, text, displays, images, video, and audio, and the design, selection, and arrangement thereof), are owned by Zoo Labs Foundation, its licensors, or other providers of such material and are protected by United States and international copyright, trademark, patent, trade secret, and other intellectual property or proprietary rights laws.
\n4. Disclaimer of Warranties
\nYOUR USE OF THE WEBSITE, ITS CONTENT, AND ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE IS AT YOUR OWN RISK. THE WEBSITE, ITS CONTENT, AND ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE ARE PROVIDED ON AN \"AS IS\" AND \"AS AVAILABLE\" BASIS, WITHOUT ANY WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED. NEITHER ZOO LABS FOUNDATION NOR ANY PERSON ASSOCIATED WITH ZOO LABS FOUNDATION MAKES ANY WARRANTY OR REPRESENTATION WITH RESPECT TO THE COMPLETENESS, SECURITY, RELIABILITY, QUALITY, ACCURACY, OR AVAILABILITY OF THE WEBSITE. WITHOUT LIMITING THE FOREGOING, NEITHER ZOO LABS FOUNDATION NOR ANYONE ASSOCIATED WITH ZOO LABS FOUNDATION REPRESENTS OR WARRANTS THAT THE WEBSITE, ITS CONTENT, OR ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE WILL BE ACCURATE, RELIABLE, ERROR-FREE, OR UNINTERRUPTED, THAT DEFECTS WILL BE CORRECTED, THAT OUR SITE OR THE SERVER THAT MAKES IT AVAILABLE ARE FREE OF VIRUSES OR OTHER HARMFUL COMPONENTS, OR THAT THE WEBSITE OR ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE WILL OTHERWISE MEET YOUR NEEDS OR EXPECTATIONS.
\n5. Limitation of Liability
\nIN NO EVENT WILL ZOO LABS FOUNDATION, ITS AFFILIATES, OR THEIR LICENSORS, SERVICE PROVIDERS, EMPLOYEES, AGENTS, OFFICERS, OR DIRECTORS BE LIABLE FOR DAMAGES OF ANY KIND, UNDER ANY LEGAL THEORY, ARISING OUT OF OR IN CONNECTION WITH YOUR USE, OR INABILITY TO USE, THE WEBSITE, ANY WEBSITES LINKED TO IT, ANY CONTENT ON THE WEBSITE OR SUCH OTHER WEBSITES, INCLUDING ANY DIRECT, INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, INCLUDING BUT NOT LIMITED TO, PERSONAL INJURY, PAIN AND SUFFERING, EMOTIONAL DISTRESS, LOSS OF REVENUE, LOSS OF PROFITS, LOSS OF BUSINESS OR ANTICIPATED SAVINGS, LOSS OF USE, LOSS OF GOODWILL, LOSS OF DATA, AND WHETHER CAUSED BY TORT (INCLUDING NEGLIGENCE), BREACH OF CONTRACT, OR OTHERWISE, EVEN IF FORESEEABLE.
\n6. Indemnification
\nYou agree to defend, indemnify, and hold harmless Zoo Labs Foundation, its affiliates, licensors, and service providers, and its and their respective officers, directors, employees, contractors, agents, licensors, suppliers, successors, and assigns from and against any claims, liabilities, damages, judgments, awards, losses, costs, expenses, or fees (including reasonable attorneys' fees) arising out of or relating to your violation of these terms or your use of the website or services, including, but not limited to, any use of the website's content, services, and products other than as expressly authorized in these terms or your use of any information obtained from the website.
\n7. Governing Law and Jurisdiction
\nAll matters relating to the website and these terms and any dispute or claim arising therefrom or related thereto (in each case, including non-contractual disputes or claims), shall be governed by and construed in accordance with the internal laws of the State of California without giving effect to any choice or conflict of law provision or rule (whether of the State of California or any other jurisdiction). Any legal suit, action, or proceeding arising out of, or related to, these terms or the website shall be instituted exclusively in the federal courts of the United States or the courts of the State of California in each case located in the City and County of San Francisco although we retain the right to bring any suit, action, or proceeding against you for breach of these terms in your country of residence or any other relevant country. You waive any and all objections to the exercise of jurisdiction over you by such courts and to venue in such courts.
\n8. Changes to These Terms
\nWe may revise and update these terms from time to time in our sole discretion. All changes are effective immediately when we post them, and apply to all access to and use of the website thereafter. Your continued use of the website following the posting of revised terms means that you accept and agree to the changes. You are expected to check this page from time to time so you are aware of any changes, as they are binding on you.
\n9. Contact Us
\nIf you have any questions, concerns, or requests regarding these terms or our privacy practices, please contact us at:\nZoo Labs Foundation
\n\nhello@zoo.ngo
\n415-373-2496
\n\nWe will make every effort to respond to your inquiries and address any concerns as quickly as possible.
\n\n
Welcome to my web page!
\nThis is some sample text.
\n \n\n```\n\nIn this example, the font file is preloaded using the `link` element with the `rel` attribute set to \"preload\". This tells the browser to fetch the font file as soon as possible, but not to block the rendering of the page. The `as` attribute is set to \"font\" to indicate that this is a font file, and the `type` attribute is set to \"font/woff2\" to specify the file type. The `crossorigin` attribute is included to allow the font file to be loaded from a different domain if necessary.\n\nOverall, this code is a small but important part of a larger project that aims to optimize the performance of a web page by reducing the number of requests made to the server. By specifying a cache control directive for the font file, the browser can store it locally and avoid requesting it from the server on subsequent page loads, resulting in faster page load times and a better user experience.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a JSON object with a single header that specifies the cache control settings for a font file.\n\n2. Where is this code used in the project?\n It is unclear where this code is used in the project without additional context.\n\n3. Are there any other headers or files that have cache control settings defined?\n It is unclear if there are any other headers or files with cache control settings defined without additional context or inspection of other files in the project.","metadata":{"source":".autodoc/docs/markdown/foundation/vercel.md"}}],["1354",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/gulpfile.js)\n\nThis code is a Gulp task that compiles Less files into CSS, applies PostCSS plugins, and minifies the resulting CSS using the csso plugin. The compiled CSS is then saved to the `public` directory. \n\nThe task starts by requiring the necessary dependencies: `gulp`, `gulp-less`, `gulp-postcss`, `gulp-debug`, `gulp-csso`, `autoprefixer`, and `less-plugin-npm-import`. \n\nThe `gulp.task` function defines a new task called `less`. This task takes all Less files in the `src/themes` directory that end with `-theme.less` and compiles them into CSS. The `debug` function is used to log the names of the Less files being processed. \n\nThe `gulpless` function is used to compile the Less files into CSS. The `javascriptEnabled` option is set to `true` to enable JavaScript evaluation in Less files. The `less-plugin-npm-import` plugin is used to allow importing of Less files from installed npm packages using the `~` prefix. \n\nThe resulting CSS is then piped through the `postcss` function, which applies the `autoprefixer` plugin to add vendor prefixes to CSS rules. \n\nFinally, the `csso` function is used to minify the CSS. The `debug` option is set to `true` to log the size reduction achieved by the minification. \n\nThe resulting CSS is saved to the `public` directory using the `gulp.dest` function. \n\nThis task can be used as part of a larger build process for a web application that uses Less for styling. It allows developers to write Less code and have it automatically compiled and minified into CSS that is ready for production use. \n\nExample usage:\n\n```\n// gulpfile.js\n\nconst gulp = require('gulp');\nconst lessTask = require('./zoo/less-task');\n\ngulp.task('build', gulp.series(lessTask));\n```\n\nThis code defines a `build` task that runs the `less` task defined in the `less-task.js` file located in the `zoo` directory. When the `build` task is run, all Less files in the `src/themes` directory are compiled and minified into CSS and saved to the `public` directory.\n## Questions: \n 1. What is the purpose of this code?\n This code is a Gulp task that compiles Less files into CSS, applies PostCSS plugins, and minifies the resulting CSS before outputting it to a `public` directory.\n\n2. What are the dependencies required for this code to run?\n This code requires several dependencies to run, including `gulp`, `gulp-less`, `gulp-postcss`, `gulp-debug`, `gulp-csso`, `autoprefixer`, and `less-plugin-npm-import`.\n\n3. What is the input and output of this code?\n The input of this code is any Less files located in the `src/themes` directory that match the pattern `*-theme.less`. The output of this code is minified CSS files that are output to the `public` directory.","metadata":{"source":".autodoc/docs/markdown/lab/gulpfile.md"}}],["1355",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/public/index.html)\n\nThis code is an HTML template file for a web application called \"Lab\". The file contains metadata and links to various resources that are used by the web application. The purpose of this file is to provide a basic structure for the web application and to ensure that all necessary resources are included.\n\nThe file starts with a DOCTYPE declaration that specifies the version of HTML being used. The next section contains the head element, which includes various meta tags that provide information about the web application, such as the character set, viewport settings, and theme color. The head element also includes links to the favicon and apple-touch-icon, which are small images that are used to represent the web application in the browser and on mobile devices.\n\nThe next section of the file includes a link to the manifest.json file, which provides metadata about the web application that is used when it is installed on a user's device. The manifest.json file includes information such as the name of the web application, its icons, and its start URL.\n\nThe body element of the file contains a div element with an id of \"root\". This is where the content of the web application will be rendered. The file also includes a noscript element that displays a message if JavaScript is not enabled in the user's browser.\n\nFinally, the file includes a comment that provides instructions for starting the development server and building the web application for production.\n\nOverall, this file is an essential part of the web application and provides a basic structure and necessary resources for the application to function properly. Developers can use this file as a starting point for building their web application and customize it as needed. For example, they can add additional meta tags, links to external resources, and modify the content of the body element to create a unique user interface.\n## Questions: \n 1. What is the purpose of this HTML file?\n \n This HTML file serves as a template for a web app created using scaffold-eth, with metadata for mobile devices and desktops, and a title of \"Lab\".\n\n2. What is the significance of the %PUBLIC_URL% placeholder in the code?\n \n The %PUBLIC_URL% placeholder is used to reference files inside the `public` folder during the build, and will be replaced with the URL of the `public` folder. This allows for correct referencing of files with client-side routing and a non-root public URL.\n\n3. What are the recommended commands for development and production of this web app?\n \n The recommended commands for development are `npm start` or `yarn start`, and for production are `npm run build` or `yarn build`.","metadata":{"source":".autodoc/docs/markdown/lab/public/index.md"}}],["1356",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/public/manifest.json)\n\nThis code is a JSON object that defines the configuration for a web application. Specifically, it sets the metadata for the application's icons, name, start URL, display mode, and theme and background colors. \n\nThe `short_name` and `name` properties define the name of the application, with the former being a shorter version that may be used in places where space is limited. The `icons` property is an array of objects that define the icons for the application, with each object specifying the source file, size, and type. This allows the application to have different icons for different devices and contexts. \n\nThe `start_url` property specifies the URL that the application should load when it is launched. In this case, it is set to \".\" which means the application will load the index.html file in the root directory. \n\nThe `display` property specifies the display mode for the application, with \"standalone\" meaning that the application should be launched in its own window without any browser UI. This is useful for creating web applications that look and feel like native applications. \n\nThe `theme_color` and `background_color` properties define the colors for the application's theme and background, respectively. These colors can be used to customize the appearance of the application and provide a consistent look and feel across different devices and platforms. \n\nOverall, this code is an important part of the configuration for a web application and helps to ensure that the application looks and behaves consistently across different devices and contexts. Here is an example of how this code might be used in an HTML file:\n\n```html\n\n\n \n \n \nWelcome to My App
\nThis is a web application that uses the latest web technologies.
\n \n\n```\n\nIn this example, the `link` element specifies the location of the `manifest.json` file that contains the configuration for the application. This allows the browser to load the correct icons and other metadata for the application.\n## Questions: \n 1. What is the purpose of this code?\n This code is a JSON file that defines the metadata for a web application, including its name, icons, start URL, and display settings.\n\n2. What is the significance of the different icon sizes and types?\n The different icon sizes and types allow the web application to be displayed properly on different devices and platforms, such as desktops, mobile devices, and browsers.\n\n3. What is the difference between \"display\" and \"background_color\"?\n \"Display\" refers to how the web application should be displayed to the user, such as in a standalone window or as part of a browser tab. \"Background_color\" refers to the color of the background of the web application.","metadata":{"source":".autodoc/docs/markdown/lab/public/manifest.md"}}],["1357",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/public/robots.txt)\n\nThis code is a standard robots.txt file that is used to communicate with web crawlers and search engines about which pages or sections of a website should be crawled and indexed. The file starts with a comment that provides a link to the official documentation for the robots.txt protocol.\n\nThe first line of the file specifies the user-agent that the following rules apply to. In this case, the wildcard symbol (*) is used to indicate that the rules apply to all user-agents. \n\nThe following lines contain the rules for the web crawlers and search engines. Each rule consists of a directive and a value. The most common directives are \"Disallow\" and \"Allow\". The \"Disallow\" directive tells the web crawler not to crawl a specific page or section of the website, while the \"Allow\" directive tells the web crawler that it is allowed to crawl a specific page or section of the website.\n\nIn this specific file, there are no rules specified, which means that all pages and sections of the website are allowed to be crawled by any web crawler or search engine.\n\nThis file is an important part of any website as it helps to ensure that search engines are able to crawl and index the website correctly. Without a robots.txt file, search engines may crawl and index pages that should not be visible to the public, such as admin pages or pages with sensitive information.\n\nAn example of how this file can be used in the larger project is to specify rules for specific user-agents. For example, if there is a web crawler that is causing issues with the website, the robots.txt file can be updated to disallow that specific user-agent from crawling the website. This can help to improve the performance and security of the website.\n## Questions: \n 1. What is the purpose of this code and how does it relate to the overall functionality of the zoo project?\n - This code is the contents of a `robots.txt` file, which is used to instruct web crawlers on which pages of a website they are allowed to access. It is important for the SEO and security of the website, but does not directly relate to the functionality of the zoo project.\n \n2. Why is the `User-agent: *` line included and what does it mean?\n - The `User-agent: *` line specifies that the following rules apply to all web crawlers. This means that any crawler that accesses the website will be subject to the rules outlined in the `robots.txt` file.\n \n3. Are there any other rules or directives that could be included in this `robots.txt` file?\n - Yes, there are several other directives that can be included in a `robots.txt` file, such as `Disallow` to block specific pages or directories, `Allow` to override a `Disallow` directive, and `Sitemap` to specify the location of the website's sitemap. However, it is up to the website owner to determine which directives are necessary for their specific website.","metadata":{"source":".autodoc/docs/markdown/lab/public/robots.md"}}],["1358",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/scripts/create_contracts.js)\n\nThis code checks if a file called \"hardhat_contracts.json\" exists in the \"./src/contracts/\" directory. If the file does not exist, the code creates an empty JSON object and writes it to the file. \n\nThis code is likely used in a larger project to ensure that a specific file exists and is properly formatted before other parts of the project attempt to read from or write to it. The file \"hardhat_contracts.json\" may contain important information or configurations for the project, and this code ensures that it is present and ready to be used. \n\nHere is an example of how this code may be used in a larger project:\n\n```javascript\nconst fs = require(\"fs\");\n\nfunction readContracts() {\n let contracts = {};\n\n if (fs.existsSync(\"./src/contracts/hardhat_contracts.json\")) {\n try {\n contracts = JSON.parse(fs.readFileSync(\"./src/contracts/hardhat_contracts.json\"));\n } catch (error) {\n console.log(error);\n }\n } else {\n console.log(\"src/contracts/hardhat_contracts.json not found.\");\n }\n\n return contracts;\n}\n\nfunction writeContracts(contracts) {\n try {\n fs.writeFileSync(\"./src/contracts/hardhat_contracts.json\", JSON.stringify(contracts));\n console.log(\"src/contracts/hardhat_contracts.json updated.\");\n } catch (error) {\n console.log(error);\n }\n}\n\nlet contracts = readContracts();\n\n// Do something with contracts...\n\nwriteContracts(contracts);\n```\n\nIn this example, the `readContracts` function first checks if the \"hardhat_contracts.json\" file exists and is properly formatted. If it is, the function reads the contents of the file and returns it as a JSON object. If the file does not exist or is not properly formatted, the function returns an empty object.\n\nThe `writeContracts` function takes a JSON object as an argument and writes it to the \"hardhat_contracts.json\" file. \n\nThe `contracts` variable is initialized by calling `readContracts`, and then some operation is performed on it. Finally, the updated `contracts` object is written back to the \"hardhat_contracts.json\" file by calling `writeContracts`. \n\nOverall, this code ensures that the \"hardhat_contracts.json\" file exists and is properly formatted, allowing other parts of the project to safely read from and write to it.\n## Questions: \n 1. What is the purpose of this code?\n This code checks if a file called \"hardhat_contracts.json\" exists in the \"./src/contracts/\" directory, and if it doesn't, it creates an empty JSON file with that name.\n\n2. What happens if there is an error while writing the file?\n If there is an error while writing the file, the error message will be logged to the console.\n\n3. What is the expected output of this code?\n If the file doesn't exist and is successfully created, the message \"src/contracts/hardhat_contracts.json created.\" will be logged to the console. If the file already exists, nothing will happen. If there is an error while writing the file, the error message will be logged to the console.","metadata":{"source":".autodoc/docs/markdown/lab/scripts/create_contracts.md"}}],["1359",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/scripts/ipfs.js)\n\nThis code is a script that deploys a web application to the InterPlanetary File System (IPFS) and publishes it to the IPNS (InterPlanetary Name System). IPFS is a distributed file system that allows users to store and access files in a decentralized manner. IPNS is a naming system built on top of IPFS that allows users to create human-readable names for IPFS content.\n\nThe script uses the ipfs-http-client library to interact with the IPFS network. It also uses the chalk and readline libraries for console output formatting. The script defines the IPFS gateway and IPNS gateway URLs, as well as the options for adding files to IPFS.\n\nThe `pushDirectoryToIPFS` function takes a path to a directory and recursively adds its contents to IPFS using the `ipfs.add` method. The function returns the response from IPFS, which includes the content identifier (CID) of the added content.\n\nThe `publishHashToIPNS` function takes an IPFS hash (CID) and publishes it to IPNS using the `ipfs.name.publish` method. The function returns the response from IPFS, which includes the IPNS name.\n\nThe `nodeMayAllowPublish` function checks if the IPFS node allows publishing IPNS names. It does this by comparing the node's host URL to a blacklist of known nodes that do not allow IPNS publishing.\n\nThe `deploy` function deploys the web application to IPFS and publishes it to IPNS. It first adds the contents of the `./build` directory to IPFS using `pushDirectoryToIPFS`. If the add operation fails, the function returns false. Otherwise, it publishes the IPFS hash to IPNS using `publishHashToIPNS` if the IPFS node allows it. Finally, the function outputs the IPFS and IPNS URLs for accessing the deployed application.\n\nTo use this script, the user needs to have an IPFS node running. They can then run the script to deploy their web application to IPFS and publish it to IPNS. The script can be integrated into a larger project as part of a continuous deployment pipeline to automatically deploy new versions of the application to IPFS and IPNS.\n## Questions: \n 1. What is the purpose of this code?\n \n This code is used to deploy an application to IPFS (InterPlanetary File System) and publish it to IPNS (InterPlanetary Name System) for easy access.\n\n2. What are the dependencies of this code?\n \n This code depends on the `ipfs-http-client`, `chalk`, and `readline` packages.\n\n3. What is the difference between IPFS and IPNS?\n \n IPFS is a distributed file system that allows users to store and access files in a decentralized manner, while IPNS is a naming system that allows users to assign human-readable names to IPFS content. IPNS names can be updated to point to new content, while IPFS content is immutable.","metadata":{"source":".autodoc/docs/markdown/lab/scripts/ipfs.md"}}],["1360",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/scripts/s3.js)\n\nThis code is responsible for creating an AWS S3 bucket and uploading a directory to it. The code first imports the necessary dependencies, including the `s3-folder-upload` package and the `fs` module. It then sets the name of the directory to be uploaded to the `build` directory and the name of the S3 bucket to be created to `testbucket.xyz`. \n\nThe code then checks if a bucket name has been set and exits the process if it has not. It also reads the AWS credentials from a file called `aws.json` and sets the bucket name in the credentials object. \n\nThe code then creates an S3 service object and uses it to create a new bucket with the specified name. It also sets the bucket's website configuration to use `index.html` as the index document and `index.html` as the error document. \n\nOnce the bucket is created, the code uploads the contents of the `build` directory to the bucket using the `s3FolderUpload` function from the `s3-folder-upload` package. \n\nThis code can be used as part of a larger project to automate the deployment of a static website to an S3 bucket. By running this code, developers can create a new bucket and upload the contents of the `build` directory to it with a single command. \n\nExample usage:\n\n```\n// Import the code from the file\nconst deployToS3 = require('./path/to/s3.js');\n\n// Call the function to create the bucket and upload the directory\ndeployToS3();\n```\n## Questions: \n 1. What is the purpose of this code?\n \n This code is used to create an S3 bucket and upload a directory to it.\n\n2. What is the significance of the `aws.json` file?\n \n The `aws.json` file contains the AWS credentials required to access the S3 bucket. It is read by the code to authenticate the user.\n\n3. What are the options available for the `s3FolderUpload` method?\n \n The `s3FolderUpload` method takes an optional `options` parameter that can be used to configure the upload process. The available options are `useFoldersForFileTypes` and `useIAMRoleCredentials`.","metadata":{"source":".autodoc/docs/markdown/lab/scripts/s3.md"}}],["1361",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/scripts/watch.js)\n\nThe code above is a Node.js script that watches for changes in a specific directory and runs a command to compile and generate new files whenever a change is detected. The purpose of this script is to automate the process of compiling and generating files, which can be time-consuming and error-prone if done manually.\n\nThe script uses two Node.js modules: `node-watch` and `child_process`. `node-watch` is used to watch for changes in the `./src/themes` directory, while `child_process` is used to execute the command to compile and generate files.\n\nThe `run` function is responsible for executing the command to compile and generate files. It uses the `exec` method from the `child_process` module to run the command `npx gulp less`. This command is used to compile `.less` files into `.css` files using the Gulp task runner. The function also logs the output of the command to the console.\n\nThe `watch` function is used to watch for changes in the `./src/themes` directory. Whenever a change is detected, the function logs the name of the file that was changed to the console and calls the `run` function to compile and generate new files.\n\nFinally, the script calls the `run` function once at the beginning to compile and generate files for the first time.\n\nThis script can be used in a larger project to automate the process of compiling and generating files whenever changes are made to the source files. For example, in a web development project, this script can be used to compile `.less` files into `.css` files whenever changes are made to the `.less` files. This can save time and reduce errors by automating a repetitive and error-prone task.\n## Questions: \n 1. What does this code do?\n This code sets up a watch on the `./src/themes` directory and runs a Gulp task to compile LESS files whenever a change is detected in that directory.\n\n2. What dependencies does this code have?\n This code requires the `node-watch` and `child_process` modules to be installed.\n\n3. What command should be run to start this code?\n This code can be started by running the file with Node.js (`node filename.js`) or by incorporating it into a larger Node.js project.","metadata":{"source":".autodoc/docs/markdown/lab/scripts/watch.md"}}],["1362",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/App.css)\n\nThe code provided is a CSS file that defines the styling for the `.App` class. The purpose of this code is to center the text within any HTML element that has the `.App` class applied to it. This code can be used in conjunction with HTML and JavaScript to create a user interface for a web application. \n\nFor example, if we have an HTML file with the following code:\n\n```\n\n
\n```\n\nThe CSS code provided will center the text within the `div` element that has the `.App` class applied to it. This will result in the text \"Welcome to the Zoo!\" and \"Explore our collection of animals.\" being centered horizontally within the `div` element.\n\nThis code can be further customized by adding additional CSS rules to the `.App` class or by creating new classes and applying them to different HTML elements. For example, we could add a background color to the `.App` class to give the `div` element a colored background:\n\n```\n.App {\n text-align: center;\n background-color: #f2f2f2;\n}\n```\n\nOverall, this code is a small but important part of a larger project that involves creating a user interface for a web application. By defining the styling for different HTML elements, we can create a visually appealing and user-friendly interface for users to interact with.\n## Questions: \n 1. What is the purpose of this code?\n \n This code sets the text alignment to center for the `.App` class.\n\n2. Where is this code being used in the project?\n \n It is not clear where this code is being used in the project. It could be used in a CSS file or in a JavaScript file that manipulates the CSS.\n\n3. Are there any other CSS properties being applied to `.App`?\n \n It is not clear from this code snippet if there are any other CSS properties being applied to `.App`. Additional code would need to be examined to determine this.","metadata":{"source":".autodoc/docs/markdown/lab/src/App.md"}}],["1363",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Account.jsx)\n\nThe `Account` component is a React component that displays an Ethereum account's address, balance, and wallet. It also allows users to log in to existing accounts and log out. \n\nThe component takes in several props, including `address`, `userSigner`, `localProvider`, `mainnetProvider`, `price`, `minimized`, `web3Modal`, `loadWeb3Modal`, `logoutOfWeb3Modal`, and `blockExplorer`. \n\nThe `address` prop is the Ethereum address to display the balance for. The `userSigner` prop is the signer for the user's wallet. The `localProvider` prop is the provider for the local network. The `mainnetProvider` prop is the provider for the main Ethereum network. The `price` prop is the price of ether to convert the balance to dollars. The `minimized` prop is a boolean that determines whether the component should be minimized or not. The `web3Modal`, `loadWeb3Modal`, and `logoutOfWeb3Modal` props are used to log in and log out of existing accounts. The `blockExplorer` prop is the URL for the block explorer to use. \n\nThe component uses the `useThemeSwitcher` hook to get the current theme. It then displays the address, balance, and wallet if the component is not minimized. If the component is minimized, it displays nothing. \n\nThe component also displays buttons to log in and log out of existing accounts if the `web3Modal` prop is provided. If the `web3Modal` has a cached provider, it displays a \"logout\" button. If the `web3Modal` does not have a cached provider, it displays a \"connect\" button. \n\nOverall, the `Account` component is a useful component for displaying Ethereum account information and allowing users to log in and log out of existing accounts. It can be used in a larger project to display account information and provide account management functionality. \n\nExample usage:\n\n```\nWelcome to the Zoo!
\nExplore our collection of animals.
\n\n
\n );\n}\n\nexport default UserAvatar;\n```\n\nIn this example, the `UserAvatar` component renders a blockie image and a user name for a given Ethereum address. The `Blockie` component is used to generate the blockie image, with the `address` prop passed in from the `UserAvatar` props and additional props for size and scale. The resulting component can be used throughout the project to visually identify users by their Ethereum addresses.\n## Questions: \n 1. What is the purpose of the \"react-blockies\" library?\n - The \"react-blockies\" library is used to provide a blockie image for an address.\n\n2. What happens if the \"props.address\" is not provided or is not a string?\n - If \"props.address\" is not provided or is not a string, the function will return an empty span element.\n\n3. What is the purpose of the spread operator in the return statement?\n - The spread operator is used to pass all the remaining props to the \"Blockies\" component.","metadata":{"source":".autodoc/docs/markdown/lab/src/components/Blockie.md"}}],["1368",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/BytesStringInput.jsx)\n\nThe `BytesStringInput` component is a React component that displays an input field with options to convert between a string and a bytes32 value. It is imported from the `antd` library and uses the `useState` and `useEffect` hooks from React. It also uses the `utils` and `constants` objects from the `ethers` library.\n\nThe component takes in several props, including `value`, `placeholder`, `autoFocus`, and `onChange`. The `value` prop specifies the initial string value, while the `placeholder` prop specifies the placeholder text for the input field. The `autoFocus` prop specifies whether the input field should be focused automatically when the component is mounted. The `onChange` prop is a callback function that is called whenever the input value changes.\n\nThe component has two modes: \"STRING\" and \"BYTES32\". The current mode is stored in the `mode` state variable, which is initialized to \"STRING\". The current value is stored in the `value` state variable, which is initialized to `constants.HashZero`. The displayed value is stored in the `display` state variable, which is initially undefined.\n\nThe component renders an `Input` component from the `antd` library, with the `placeholder`, `autoFocus`, `value`, and `onChange` props set to the corresponding state variables. It also renders an `addonAfter` prop, which is a button that toggles between the \"STRING\" and \"BYTES32\" modes. The `addonAfter` prop is set to the result of calling the `option` function with the appropriate title (\"STRING 🔀\" or \"BYTES32 🔀\").\n\nThe `option` function returns a `div` element that displays the given title and toggles the mode when clicked. If the mode is \"STRING\", it converts the current value to bytes32 if necessary and sets the `display` state variable to the result. If the mode is \"BYTES32\", it converts the current value to a string if necessary and sets the `display` state variable to the result.\n\nThe `useEffect` hook is used to update the `display` state variable when the `currentValue` changes. If the `currentValue` is falsy, it sets the `display` state variable to an empty string.\n\nThe `onChange` callback function is called whenever the input value changes. If the mode is \"STRING\", it formats the input value as a bytes32 string using the `utils.formatBytes32String` function and sets the `value` and `display` state variables to the result. If the mode is \"BYTES32\", it sets the `value` and `display` state variables to the input value.\n\nOverall, the `BytesStringInput` component provides a convenient way to convert between string and bytes32 values in a React application. It can be used in various parts of the larger project where such conversions are needed. For example, it could be used in a form where the user needs to enter a bytes32 value, or in a table where bytes32 values need to be displayed as strings.\n## Questions: \n 1. What is the purpose of this code?\n \n This code displays an input field that allows the user to convert between a string and a bytes32 value.\n\n2. What are the features of this code?\n \n The code allows the user to specify an initial string value, provides a placeholder for the input, and allows the input change to be controlled by the onChange function.\n\n3. What is the significance of the constants.HashZero value?\n \n The constants.HashZero value is used as the default value for the bytes32 value if no other value is provided.","metadata":{"source":".autodoc/docs/markdown/lab/src/components/BytesStringInput.md"}}],["1369",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Contract/DisplayVariable.jsx)\n\nThe `DisplayVariable` component is a React component that displays the value of a smart contract function and provides a way to refresh the value. It takes in several props, including `contractFunction`, which is a function that returns the value of a smart contract function, `functionInfo`, which contains information about the smart contract function, `refreshRequired`, which is a boolean that indicates whether the component needs to be refreshed, and `triggerRefresh`, which is a function that triggers a refresh of the component.\n\nThe component uses the `useState` hook to store the value of the smart contract function, and the `useCallback` hook to define a function that refreshes the value of the smart contract function. The `useEffect` hook is used to call the refresh function when the component mounts, when the `refreshRequired` prop changes, or when the `contractFunction` prop changes.\n\nThe component renders a row with three columns. The first column displays the name of the smart contract function, the second column displays the value of the smart contract function, and the third column displays a refresh button. The `tryToDisplay` function is used to format the value of the smart contract function for display.\n\nThis component can be used in a larger project that interacts with a smart contract. It provides a simple way to display the value of a smart contract function and refresh it when necessary. Here is an example of how this component could be used:\n\n```\nimport DisplayVariable from \"./DisplayVariable\";\n\nconst MyComponent = ({ myContract }) => {\n const [refreshRequired, setRefreshRequired] = useState(false);\n\n const refresh = () => {\n setRefreshRequired(true);\n };\n\n return (\n \n
\n );\n};\n```\n\nIn this example, `MyComponent` displays the value of a smart contract function called `getMyValue` and provides a refresh button. The `refresh` function updates the `refreshRequired` state, which triggers a refresh of the `DisplayVariable` component.\n## Questions: \n 1. What is the purpose of the `tryToDisplay` function imported from `./utils`?\n - The `tryToDisplay` function is used to format the display of the `variable` state value in the returned JSX.\n2. What is the purpose of the `refreshRequired` and `triggerRefresh` props passed to the component?\n - The `refreshRequired` prop is used to trigger a refresh of the displayed variable when it changes, and the `triggerRefresh` prop is a function that sets the `refreshRequired` state value to `true`.\n3. What is the purpose of the `Divider` component from `antd` used in the returned JSX?\n - The `Divider` component is used to visually separate the displayed variable from other components on the page.","metadata":{"source":".autodoc/docs/markdown/lab/src/components/Contract/DisplayVariable.md"}}],["1370",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Contract/FunctionForm.jsx)\n\nThe `FunctionForm` component is a React component that renders a form for interacting with a smart contract function. It takes in several props, including `contractFunction`, which is the function to be called, `functionInfo`, which contains information about the function, `provider`, which is the Ethereum provider to use, `gasPrice`, which is the gas price to use for the transaction, and `triggerRefresh`, which is a function to trigger a refresh of the component.\n\nThe component uses the Ant Design library to render the form elements, including `Input`, `Button`, `Col`, `Row`, and `Divider`. It also uses the `react-blockies` library to render a blockie for an Ethereum address.\n\nThe form is dynamically generated based on the inputs of the function. For each input, an `Input` element is rendered with a suffix that provides additional functionality based on the type of the input. For example, if the input is of type `bytes32`, a button is rendered that allows the user to convert the input to a bytes32 string. If the input is of type `uint256`, a button is rendered that allows the user to convert the input to wei.\n\nIf the function is payable, an additional `Input` element is rendered for the transaction value.\n\nWhen the user clicks the button to call the function, the component constructs the arguments for the function based on the values in the form inputs, and then calls the function using the `contractFunction` and `tx` functions. If the function is a read-only function, the result is displayed in the form. If the function is a transaction, the transaction is sent and the user is prompted to confirm the transaction in their wallet.\n\nOverall, the `FunctionForm` component provides a convenient way for users to interact with smart contract functions in a user-friendly way. It abstracts away many of the details of interacting with the Ethereum network and provides a simple interface for users to input values and call functions.\n## Questions: \n 1. What is the purpose of the `Transactor` function and how is it used in this code?\n- The `Transactor` function is used to create a transaction object that can be used to send transactions to the Ethereum network. It takes in the `provider` and `gasPrice` as arguments and returns a function that can be used to send transactions.\n2. What is the purpose of the `tryToDisplay` function and where is it used in this code?\n- The `tryToDisplay` function is used to convert the return value of a contract function into a human-readable format. It is used in the `onClick` event of the button to display the return value of the contract function.\n3. What is the purpose of the `inputs` array and how is it populated?\n- The `inputs` array is used to store the input fields for the contract function. It is populated by mapping over the `functionInfo.inputs` array and creating an input field for each input. The input fields are then pushed into the `inputs` array.","metadata":{"source":".autodoc/docs/markdown/lab/src/components/Contract/FunctionForm.md"}}],["1371",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Contract/index.jsx)\n\nThe `Contract` component is a React component that displays information about a smart contract. It takes in several props, including `customContract`, `account`, `gasPrice`, `signer`, `provider`, `name`, `show`, `price`, `blockExplorer`, and `chainId`. \n\nThe component first uses the `useContractLoader` hook to load all contracts available on the specified `provider` and `chainId`. If a `customContract` is provided, it uses that instead. It then checks if the contract is deployed at the specified address using the `useContractExistsAtAddress` hook.\n\nThe component then filters the contract's functions to only display those that are of type \"function\" and are not excluded by the `show` prop. If a function is queryable (i.e. has no inputs), it displays the return value using the `DisplayVariable` component. If a function has inputs, it displays a form using the `FunctionForm` component to allow users to provide these inputs.\n\nFinally, the component renders a `Card` from the `antd` library that displays the contract's name, address, and account information. If the contract is deployed, it displays the contract functions. Otherwise, it displays a loading message that instructs the user to run `yarn run chain` and `yarn run deploy` to deploy the contract.\n\nThis component can be used to display information about any smart contract in a React application. For example, it could be used in a decentralized application to display information about a user's deployed smart contracts or to allow users to interact with a specific smart contract. \n\nExample usage:\n\n```\n\n {\n setAmount(value);\n }}\n />\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `useState` hooks in this code?\n- The `useState` hooks are used to manage the state of `mode`, `display`, and `value` variables in the component.\n\n2. How does the code handle conversion between USD and ETH?\n- The code provides an option to convert between USD and ETH by clicking on the displayed currency symbol. When the currency is changed, the `display` state is updated with the converted value if it exists.\n\n3. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to update the `display` state when the `currentValue` changes. If `currentValue` is undefined, the `display` state is set to an empty string.","metadata":{"source":".autodoc/docs/markdown/lab/src/components/EtherInput.md"}}],["1374",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Faucet.jsx)\n\nThe `Faucet` component is a React component that displays a local faucet to send ETH to a given address. It also provides a wallet to convert between USD and ETH. The component imports several dependencies, including `@ant-design/icons`, `antd`, `eth-hooks`, `react`, `react-blockies`, and `../helpers`. \n\nThe component takes in several props, including `price`, `localProvider`, `ensProvider`, and `placeholder`. The `price` prop is used to provide the price of ether and convert between USD and ETH in a wallet. The `localProvider` prop is used to send ETH to a given address. The `ensProvider` prop is used to replace the address with an ENS name (e.g. \"0xa870\" => \"user.eth\") or to enter an ENS name directly instead of an address. The `placeholder` prop is used to provide a placeholder value for the input.\n\nThe component uses the `useState` hook to manage the `address` and `faucetAddress` state variables. It uses the `useEffect` hook to get the faucet address from the local provider. It then uses the `useCallback` hook to update the address when a new value is entered. \n\nThe component also uses the `Transactor` helper function from `../helpers` to send ETH to the given address. It renders an `Input` component with a `prefix` of a `Blockies` component that displays a blocky representation of the address. It also renders a `Tooltip` component with a `Button` component that sends ETH to the given address and a `Wallet` component that displays the wallet. \n\nOverall, the `Faucet` component provides a simple way to send ETH to a given address and manage a wallet. It is designed to be used as a reusable component in a larger project. \n\nExample usage:\n\n```\nCurrent amount: {amount} ETH
\nCurrent value: ${amount * price}
\n\n
\n );\n}\n\nexport default HomePage;\n```\n\nIn this example, the `Header` component is imported and used at the top of the `HomePage` component to display the consistent header for the page. The `HomePage` component also includes a heading and paragraph to provide content specific to the page. \n\nOverall, the `Header` component provides a reusable and consistent header for pages within the `zoo` project, enhancing the user experience and branding of the project.\n## Questions: \n 1. What is the purpose of the `PageHeader` component from the `antd` library?\n- The `PageHeader` component is used to display a header on a page.\n\n2. Why is the `Header` function exported as the default export?\n- The `Header` function is exported as the default export to allow other files to import and use it as needed.\n\n3. Why is there an anchor tag wrapping the `PageHeader` component?\n- The anchor tag is used to create a link to the `https://github.com/zoo-labs/savage` URL, which will open in a new tab when clicked.","metadata":{"source":".autodoc/docs/markdown/lab/src/components/Header.md"}}],["1377",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Provider.jsx)\n\nThe `Provider` component in this file is responsible for rendering a button that displays information about an Ethereum provider. The component takes in a `provider` prop, which is an object that represents an Ethereum provider. The component uses the `eth-hooks` library to get the current block number and to poll the provider for network and signer information.\n\nWhen the component is first rendered, it sets the initial state for `showMore`, `status`, `network`, `signer`, and `address`. It then uses the `usePoller` hook to poll the provider every 1377 milliseconds for network and signer information. If the provider has a `getNetwork` function, the component calls it to get the current network information. If the network has a `chainId` greater than 0, the component sets the `status` state to \"success\". Otherwise, it sets the `status` state to \"warning\". If the provider has a `getSigner` function, the component calls it to get the current signer information. It then sets the `signer` state to the new signer and the `address` state to the new signer's address.\n\nIf the `provider` prop is undefined or does not have a `getNetwork` function, or if the `network` state or `network.chainId` is undefined, the component returns a button that displays the `props.name` and a `Badge` component with the `status` state. If the `showMore` state is true, the component also displays the `network.chainId` and `network.name`.\n\nIf the `signer` state is defined and the `address` state is truthy, the component also displays the `address` using the `Address` component.\n\nOverall, this component is useful for displaying information about an Ethereum provider and can be used in a larger project to help users understand the current state of the provider. For example, it could be used in a dApp to display information about the user's connected wallet and network. Here is an example usage of the `Provider` component:\n\n```jsx\nimport { ethers } from \"ethers\";\nimport Provider from \"./Provider\";\n\nfunction App() {\n const [provider, setProvider] = useState();\n\n useEffect(() => {\n const newProvider = new ethers.providers.Web3Provider(window.ethereum);\n setProvider(newProvider);\n }, []);\n\n return (\n Welcome to the Zoo!
\nExplore our collection of animals and exhibits.
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `Provider` component?\n- The `Provider` component is used to display information about a blockchain provider, including its network and signer address.\n\n2. What external libraries or packages are being used in this code?\n- The code is importing `Badge`, `Button`, `useBlockNumber`, and `usePoller` from the `antd` and `eth-hooks` libraries.\n\n3. What is the significance of the `1377` argument passed to the `usePoller` hook?\n- The `1377` argument is the interval in milliseconds at which the `usePoller` hook will execute the provided callback function. In this case, it will execute the callback function every 1377 milliseconds (or approximately every 1.4 seconds).","metadata":{"source":".autodoc/docs/markdown/lab/src/components/Provider.md"}}],["1378",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Ramp.jsx)\n\nThe `Ramp` component is a React component that displays the current price of Ethereum (ETH) and provides options to buy ETH through various services or get testnet ETH. The component uses the `RampInstantSDK` to open Ramp directly in the application. \n\nTo use the `Ramp` component, you can import it and include it in your React application like this:\n\n```\nMy dApp
\n {provider && (\n\n
\n );\n}\n```\n## Questions: \n 1. What library is being used for the switch component?\n - The `Switch` component is being imported from the `antd` library.\n \n2. What is the purpose of the `useEffect` hook?\n - The `useEffect` hook is used to update the `localStorage` value for the current theme whenever it changes.\n\n3. Why is there a commented out section of code?\n - The commented out code is used to avoid a flicker when the theme is changed, but it is not currently being used in the code.","metadata":{"source":".autodoc/docs/markdown/lab/src/components/ThemeSwitch.md"}}],["1380",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Timeline.jsx)\n\nThe code in this file is a React component that displays a timeline for the usage of the scaffold-eth tool. The timeline consists of several items, each represented by a dot and a description. The purpose of this component is to provide a visual guide for users of the scaffold-eth tool, showing them the steps they need to take to get started with the tool and build something on Ethereum.\n\nThe component uses the Ant Design library to create a Timeline component, which is styled to display the items on the right side of the timeline. Each item is represented by a Timeline.Item component, which contains a dot and a Text component that displays the description of the item. The dot is represented by an icon from the Ant Design library, and the Text component contains the description of the item, which may include links to external resources.\n\nThe component takes several props, which are used to conditionally render some of the items in the timeline. For example, the props `chainIsUp`, `hasOwner`, `isNotSmoort`, `hasEther`, `contractHasEther`, and `amOwnerOfContract` are used to conditionally delete some of the items in the timeline, depending on whether certain conditions are met. This allows the component to provide a customized timeline for each user, based on their specific needs and progress.\n\nOverall, this component is a useful tool for users of the scaffold-eth tool, providing them with a clear and concise guide to the steps they need to take to get started with the tool and build something on Ethereum. Here is an example of how this component might be used in a larger project:\n\n```\nimport React from \"react\";\nimport TimelineDisplay from \"./TimelineDisplay\";\n\nfunction App() {\n return (\n Welcome to the Zoo!
\n\n
\n );\n}\n\nexport default App;\n``` \n\nIn this example, the TimelineDisplay component is rendered inside an App component, which is the main component of the larger project. The TimelineDisplay component is passed several props, which are used to customize the timeline based on the user's progress. The component is displayed on the page, providing the user with a clear and concise guide to the steps they need to take to get started with the scaffold-eth tool and build something on Ethereum.\n## Questions: \n 1. What is the purpose of this code?\n- This code displays a timeline for scaffold-eth usage.\n\n2. What external libraries or dependencies does this code use?\n- This code uses the following external libraries: \"@ant-design/icons\", \"antd\", \"react\", and \"react-blockies\".\n\n3. What is the significance of the different colored dots in the timeline?\n- The different colored dots in the timeline represent the status of certain tasks, with green indicating completion and blue indicating that the task still needs to be done.","metadata":{"source":".autodoc/docs/markdown/lab/src/components/Timeline.md"}}],["1381",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/TokenBalance.jsx)\n\nThe `TokenBalance` function in the `zoo` project is a React component that displays the balance of a specified token. The component takes in several props, including the name and address of the token contract, as well as an optional balance and dollar multiplier. \n\nThe function first uses the `useTokenBalance` hook from the `eth-hooks` library to retrieve the current balance of the token. It then converts the balance to a float and formats it to two decimal places. If a balance prop is provided, it uses that instead of the retrieved balance. \n\nIf a dollar multiplier prop is provided and the component is in dollar mode (which is the default), it multiplies the balance by the dollar multiplier and formats it to two decimal places with a dollar sign. Otherwise, it simply displays the balance with four decimal places. \n\nThe component returns a span element that displays the token balance along with an optional image prop. The span element is also clickable, toggling between dollar mode and regular mode when clicked. \n\nThis component can be used in the larger project to display the balance of a specific token in a user's wallet or in a trading interface. It provides a simple and customizable way to display token balances with the option to toggle between different display modes. \n\nExample usage:\n\n```\nWelcome to My Ethereum App
\n\n
\n );\n}\n```\n\nIn the example above, the `useBalance` hook is used to retrieve the balance of an Ethereum address and display it in a React component. The `provider` and `address` props are passed to the hook to retrieve the balance. The balance is then displayed in the component using the `balance` variable returned by the hook.\n## Questions: \n 1. What does this code do?\n \n This code is a custom React hook called `useBalance` that takes in a provider and an address and returns the balance in ETH corresponding to the given address. It also has the ability to change the provider to access balances on different chains and can update the balance on every new block if no pollTime is passed.\n\n2. What is the purpose of the `useCallback` hook in this code?\n \n The `useCallback` hook is used to memoize the `pollBalance` function so that it only gets recreated when the `provider` or `address` values change. This helps to optimize performance by preventing unnecessary re-renders.\n\n3. What is the purpose of the `usePoller` hook in this code?\n \n The `usePoller` hook is used to poll the balance at a specified interval (`pollTime`) and update the balance state accordingly. It only runs if a `pollTime` value greater than 0 is passed in and if both the `provider` and `address` values are truthy.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/Balance.md"}}],["1389",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/BurnerSigner.js)\n\nThe code is a custom React hook called `useBurnerSigner` that generates and manages a private key for a wallet. It uses the `useState` and `useEffect` hooks from the React library to manage state and side effects respectively. The `ethers` library is used to create and manage the wallet.\n\nThe hook takes a `provider` parameter, which is an Ethereum provider that is used to connect to the blockchain. The hook returns a `signer` object that is used to sign transactions on the blockchain.\n\nThe hook first checks if there is a stored private key in the browser's local storage. If there is no stored key, a new key is generated using the `ethers` library and stored in the local storage. If there is a stored key, it is retrieved from the local storage.\n\nThe hook then creates a new wallet using the stored private key and connects it to the provided `provider`. The resulting `signer` object is set as the state of the hook and returned.\n\nThis hook can be used in a larger project that requires a private key to sign transactions on the Ethereum blockchain. It abstracts away the complexity of managing a private key and provides a simple interface to access the `signer` object. Here is an example of how the hook can be used in a React component:\n\n```\nimport useBurnerSigner from './useBurnerSigner';\n\nfunction MyComponent({ provider }) {\n const signer = useBurnerSigner(provider);\n\n async function handleTransaction() {\n const tx = await signer.sendTransaction({\n to: '0x123...',\n value: ethers.utils.parseEther('1.0')\n });\n console.log(tx.hash);\n }\n\n return (\n \n );\n}\n```\n\nIn this example, the `useBurnerSigner` hook is used to get a `signer` object that is used to send a transaction to an Ethereum address. The `handleTransaction` function uses the `signer` object to send a transaction and logs the transaction hash to the console.\n## Questions: \n 1. What is the purpose of this code and how is it used in the zoo project?\n- This code exports a custom hook called `useBurnerSigner` that returns a signer object. It is likely used to authenticate transactions on the Ethereum blockchain in the zoo project.\n\n2. What external libraries or dependencies does this code rely on?\n- This code relies on the `react` and `ethers` libraries. \n\n3. What is the significance of the `metaPrivateKey` key and how is it used?\n- The `metaPrivateKey` key is used to store a private key in local storage. If the key is not found, a new key is generated and stored. The private key is used to create a new wallet object, which is then connected to the provider to create a signer object.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/BurnerSigner.md"}}],["1390",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/ContractExistsAtAddress.js)\n\n## Code Explanation: `useContractExistsAtAddress`\n\nThe `useContractExistsAtAddress` function is a custom React hook that checks whether a smart contract exists on the blockchain. It takes two parameters: `provider` and `contractAddress`. `provider` is an object that represents the Ethereum provider (e.g. `localProvider`, `mainnetProvider`, etc.) and `contractAddress` is the address of the smart contract that we want to check.\n\nThe function uses the `useState` hook to create a state variable called `contractIsDeployed` and initializes it to `false`. This variable will be used to store the result of the contract existence check.\n\nThe function also uses the `useEffect` hook to perform the contract existence check. The `useEffect` hook is called whenever the `provider` or `contractAddress` parameters change. Inside the hook, the function first checks if the `contractAddress` is a valid Ethereum address using the `isAddress` function from the `ethers` library. If the address is invalid, the function returns `false`.\n\nIf the address is valid, the function uses the `getCode` method of the `provider` object to retrieve the bytecode stored at the `contractAddress`. If the bytecode is not equal to `0x0`, then a contract exists at that address and the `contractIsDeployed` state variable is set to `true`.\n\nFinally, the function returns the `contractIsDeployed` state variable.\n\n## How to Use\n\nTo use the `useContractExistsAtAddress` hook, you can import it from the `zoo` module and call it in your React component. Here's an example:\n\n```javascript\nimport useContractExistsAtAddress from 'zoo';\n\nfunction MyComponent({ provider, contractAddress }) {\n const contractIsDeployed = useContractExistsAtAddress(provider, contractAddress);\n\n // Use the contractIsDeployed variable to conditionally render content\n return (\n Address: {address}
\nBalance: {balance}
\n\n {contractIsDeployed ?
\n );\n}\n```\n\nIn this example, we pass in the `provider` and `contractAddress` variables as props to the `MyComponent` function. We then call the `useContractExistsAtAddress` hook with these variables to get the `contractIsDeployed` result. We can then use this result to conditionally render content based on whether the contract exists or not.\n## Questions: \n 1. What is the purpose of the `ethers` and `react` imports?\n- The `ethers` import is used to access the `getCode` function to check if a contract exists at a given address, while the `react` import is used to define a custom React hook.\n \n2. How does the `useContractExistsAtAddress` function determine if a contract is deployed?\n- The function checks the bytecode stored at the provided contract address using the `getCode` function from the `provider` object. If the bytecode is not equal to \"0x0\", then a contract is deployed at that address.\n \n3. Can this function be used to check for contract existence on different blockchain networks?\n- Yes, the function can be used to check for contract existence on different blockchain networks by changing the `provider` object passed as an argument to the function. For example, passing a `mainnetProvider` object would check for contract existence on the Ethereum mainnet.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/ContractExistsAtAddress.md"}}],["1391",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/ContractLoader.js)\n\nThe `useContractLoader` function is responsible for loading local contracts and providing options to read values from contracts or write transactions into them. This function is designed to be used in a React application and utilizes the `useEffect` and `useState` hooks from the React library. \n\nThe function takes two parameters: `providerOrSigner` and `config`. `providerOrSigner` is an object that represents the Ethereum provider or signer that will be used to interact with the contracts. `config` is an optional object that can be used to configure the function's behavior. \n\nThe function first checks to see if `providerOrSigner` has a signer or not. If it does, it uses the signer's provider. If not, it uses the providerOrSigner object as both the provider and signer. It then gets the network ID from the provider and uses it to determine which contracts to load. \n\nThe function looks for two files: `contracts.json` and `external_contracts.js`. `contracts.json` contains a list of contracts that were deployed using Hardhat, while `external_contracts.js` contains a list of contracts that were deployed externally. The function combines the contracts from both files and creates a new object that maps contract names to contract instances. \n\nIf `config.customAddresses` is defined, the function uses the custom addresses specified in the configuration object instead of the addresses specified in the contract files. \n\nThe function returns the contracts object, which can be used to interact with the loaded contracts. \n\nHere is an example of how to use this function:\n\n```\nimport { useContractLoader } from 'zoo';\n\nfunction MyComponent() {\n const contracts = useContractLoader(providerOrSigner);\n\n // read a value from a contract\n const purpose = useContractReader(contracts, 'MyContract', 'purpose');\n\n // write a transaction to a contract\n const tx = useTransactor(contracts);\n tx(contracts.MyContract.setPurpose(newPurpose));\n\n // ...\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n \n This code loads local contracts and provides options to read values from contracts or write transactions into them.\n\n2. How can I use this code?\n \n You can use this code by importing the `useContractLoader` function and passing in a provider or signer as the first argument. You can also pass in a configuration object as the second argument to customize the behavior of the function.\n\n3. What are some of the features of this code?\n \n This code provides options to read values from contracts using a local provider and write transactions into contracts using a user provider. It also includes examples of how to use the `ContractReader.js` and `Transactor.js` hooks to interact with contracts. Additionally, the configuration object can be used to hardcode the chainId, hardhat network name, custom contract addresses, and external contracts.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/ContractLoader.md"}}],["1392",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/ContractReader.js)\n\n## Code Explanation\n\nThe `useContractReader` function is a custom React hook that enables the user to read values from smart contracts and keep track of them in the local React states. The function takes in several parameters, including the `contracts` object, which contains the loaded contracts, the `contractName`, which specifies the name of the contract, the `functionName`, which specifies the name of the variable in the contract, and the `args` array, which contains the arguments required by the function.\n\nThe function also takes in a `pollTime` parameter, which specifies the time interval for updating the value. If no `pollTime` is specified, the function will update on every new block. The `formatter` parameter is an optional function that can be used to format the value returned by the contract function. The `onChange` parameter is a callback function that is called whenever the value changes.\n\nThe function uses the `useState` hook to create a state variable `value` that holds the current value of the contract variable. It also creates a state variable `tried` that is used to keep track of whether the function has been called at least once.\n\nThe function uses the `useEffect` hook to call the `onChange` function whenever the `value` changes. It also uses the `useOnBlock` and `usePoller` hooks to update the `value` at regular intervals. The `useOnBlock` hook is used to update the `value` whenever a new block is mined, while the `usePoller` hook is used to update the `value` at regular intervals specified by the `pollTime` parameter.\n\nIf the `tried` variable is false and the `contracts` object is not null, the function calls the `updateValue` function to update the `value` variable.\n\n## Example Usage\n\n```javascript\nimport useContractReader from \"./useContractReader\";\n\nconst MyComponent = ({ readContracts }) => {\n const purpose = useContractReader(readContracts, \"MyContract\", \"purpose\");\n return Contract is deployed!
:Contract is not deployed.
}\n{purpose}
;\n};\n```\n\nIn the above example, the `useContractReader` hook is used to read the value of the `purpose` variable from the `MyContract` contract. The `readContracts` object is passed as a parameter to the hook, which contains the loaded contracts. The `purpose` variable is then displayed in the component.\n## Questions: \n 1. What is the purpose of this code?\n \n This code enables reading values from contracts and keeping track of them in local React states.\n\n2. How can a developer use this code?\n \n A developer can use this code by calling the `useContractReader` function and passing in the necessary parameters such as `readContracts`, `contractName`, `functionName`, `args`, `pollTime`, `formatter`, and `onChange`.\n\n3. What are the features of this code?\n \n The features of this code include providing `readContracts` by loading contracts, specifying the name of the contract and the variable in the contract to keep track of, passing an `args` array if the function requires, passing `pollTime` to specify the time interval for updates, and using a `formatter` to format the value returned by the contract function. Additionally, the `onChange` function can be used to trigger an action when the value changes.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/ContractReader.md"}}],["1393",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/Debounce.js)\n\nThe `useDebounce` function is a custom React hook that allows for the debouncing of a value. Debouncing is a technique used to limit the number of times a function is called by delaying its execution until a certain amount of time has passed since the last time it was called. This is useful in scenarios where a function is called frequently, such as in response to user input, but the function's execution is resource-intensive and should be limited to prevent performance issues.\n\nThe `useDebounce` function takes two parameters: `value` and `delay`. `value` is the value that needs to be debounced, and `delay` is the amount of time in milliseconds that needs to pass before the debounced value is updated. The function returns the debounced value.\n\nThe function uses the `useState` and `useEffect` hooks from React. `useState` is used to create a state variable called `debouncedValue`, which is initialized with the `value` parameter. `useEffect` is used to set up a timer that updates the `debouncedValue` state variable after the specified `delay` has passed since the last update to the `value` parameter. The `useEffect` hook also returns a cleanup function that clears the timer when the component unmounts or when the `value` parameter changes.\n\nThis custom hook can be used in a variety of scenarios where debouncing is needed, such as in search bars or auto-complete fields. Here is an example of how to use the `useDebounce` hook in a search bar component:\n\n```\nimport React, { useState } from \"react\";\nimport useDebounce from \"./useDebounce\";\n\nfunction SearchBar() {\n const [searchTerm, setSearchTerm] = useState(\"\");\n const debouncedSearchTerm = useDebounce(searchTerm, 500);\n\n function handleSearch(event) {\n setSearchTerm(event.target.value);\n }\n\n // Perform search using debounced search term\n // ...\n\n return (\n \n );\n}\n```\n\nIn this example, the `searchTerm` state variable is updated on every change to the search bar input. However, the actual search is performed using the `debouncedSearchTerm` variable, which is updated only after 500 milliseconds have passed since the last update to `searchTerm`. This prevents the search function from being called too frequently and improves performance.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom React hook called `useDebounce` that returns a debounced value of the input `value` after a specified `delay`.\n\n2. What are the parameters of the `useDebounce` function?\n The `useDebounce` function takes two parameters: `value` (the input value to be debounced) and `delay` (the time in milliseconds to wait before returning the debounced value).\n\n3. How does the `useDebounce` hook work?\n The `useDebounce` hook uses the `useState` and `useEffect` hooks from React to maintain the current `debouncedValue` state and update it after the specified `delay`. It returns the `debouncedValue` after each update.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/Debounce.md"}}],["1394",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/EventListener.js)\n\n## Code Explanation: useEventListener\n\nThe `useEventListener` function is a custom React hook that enables the user to keep track of events. It is designed to be used in conjunction with the `readContracts` function and the `ContractLoader.js` file. \n\n### Features\n\nThe `useEventListener` function has several features that make it useful for tracking events:\n\n- Provide `readContracts` by loading contracts (see more on `ContractLoader.js`)\n- Specify the name of the contract, in this case it is \"YourContract\"\n- Specify the name of the event in the contract, in this case we keep track of \"SetPurpose\" event\n- Specify the provider\n\n### Usage\n\nTo use the `useEventListener` function, you need to pass in the following parameters:\n\n- `contracts`: an object containing the contracts you want to track events for\n- `contractName`: the name of the contract you want to track events for\n- `eventName`: the name of the event you want to track\n- `provider`: the provider you want to use to track events\n- `startBlock`: the block number from which you want to start tracking events\n- `args`: optional arguments to pass to the event listener\n\nHere is an example of how to use the `useEventListener` function:\n\n```javascript\nconst setPurposeEvents = useEventListener(readContracts, \"YourContract\", \"SetPurpose\", localProvider, 1);\n```\n\nThis will track the \"SetPurpose\" event for the \"YourContract\" contract using the `localProvider` provider, starting from block number 1.\n\n### Implementation\n\nThe `useEventListener` function uses the `useState` and `useEffect` hooks to keep track of updates to the event listener. \n\nWhen the component mounts, the function checks if the `provider` and `startBlock` parameters are defined. If they are, it resets the events block to the specified start block. \n\nNext, the function checks if the `contracts` object and the `contractName` parameter are defined. If they are, it adds an event listener to the specified contract and event name. When the event is triggered, the function extracts the block number and event arguments and adds them to the `updates` state using the `setUpdates` function.\n\nFinally, the function returns the `updates` state, which contains an array of all the updates to the event listener.\n\nOverall, the `useEventListener` function is a useful tool for tracking events in a React application. It is flexible and can be used with a variety of providers and contracts.\n## Questions: \n 1. What is the purpose of this code?\n \n This code enables the user to keep track of events and provides a hook called `useEventListener` to do so.\n\n2. How do I use this code in my project?\n \n To use this code, you can import the `useEventListener` hook and pass in the required parameters such as `readContracts`, `contractName`, `eventName`, `provider`, and `startBlock`.\n\n3. What are the features of this code?\n \n This code provides the ability to load contracts, specify the name of the contract and event, and specify the provider. It also allows the user to reset the events block and remove listeners.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/EventListener.md"}}],["1395",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/ExchangePrice.js)\n\nThe code is a custom React hook that fetches the current price of a token on the Uniswap decentralized exchange. It uses the Uniswap SDK to interact with the exchange and the `eth-hooks` library to poll for the price at a specified interval. \n\nThe hook takes three arguments: `targetNetwork`, `mainnetProvider`, and `pollTime`. `targetNetwork` is an object that contains the current price of the token, or `null` if the price is not available. `mainnetProvider` is a web3 provider that is used to interact with the Ethereum network. `pollTime` is an optional argument that specifies the interval at which the price should be polled. If it is not provided, the default value of 9777 milliseconds is used.\n\nThe hook returns the current price of the token as a floating-point number. If the price is not available, it returns 0.\n\nThe `pollPrice` function is called by the `usePoller` hook at the specified interval. It first checks if `mainnetProvider` is defined, and if not, it returns 0. If `targetNetwork.price` is defined, it sets the price to that value. Otherwise, it creates a new `Token` object for the token with the specified address and decimal places. It then fetches the pair data for the token and WETH using the `Fetcher` object from the Uniswap SDK. It creates a new `Route` object using the pair data and the WETH token, and sets the price to the mid price of the route.\n\nThis hook can be used in a larger project to display the current price of a token on the Uniswap exchange. It can be used in conjunction with other hooks and components to build a custom dashboard or trading interface. For example, it could be used to display the current price of a token in a chart or table, or to trigger a trade when the price reaches a certain threshold. \n\nExample usage:\n\n```\nimport useExchangePrice from './useExchangePrice';\n\nfunction MyComponent() {\n const price = useExchangePrice({ price: 1.23 }, mainnetProvider, 5000);\n\n return (\n \n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code is a custom hook called `useExchangePrice` that fetches the current price of a token on Uniswap and returns it.\n\n2. What dependencies are required for this code to work?\n- This code requires the \"@uniswap/sdk\" and \"eth-hooks\" packages to be imported, as well as the \"react\" package for the useState hook.\n\n3. What parameters does the `useExchangePrice` function take?\n- The `useExchangePrice` function takes three parameters: `targetNetwork` (an object containing the current network and price of the token), `mainnetProvider` (a provider for the Ethereum mainnet), and `pollTime` (an optional parameter for the polling interval in milliseconds).","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/ExchangePrice.md"}}],["1396",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/GasPrice.js)\n\nThe code is a custom React hook called `useGasPrice` that fetches the current gas price for a specified Ethereum network and speed. Gas price is the amount of Ether required to execute a transaction on the Ethereum network. The hook uses the `axios` library to make an HTTP GET request to the Eth Gas Station API to retrieve the current gas prices. \n\nThe `useGasPrice` hook takes two arguments: `targetNetwork` and `speed`. `targetNetwork` is an object that contains information about the Ethereum network, including the current gas price. If `targetNetwork` has a `gasPrice` property, the hook sets the gas price to that value. If not, the hook makes an HTTP GET request to the Eth Gas Station API to retrieve the current gas prices. \n\nThe `speed` argument is an optional parameter that specifies the speed at which the transaction should be executed. If `speed` is not provided, the hook defaults to \"fast\". The hook then multiplies the gas price by 100000000 to convert it to wei, the smallest unit of Ether. \n\nThe `loadGasPrice` function is an asynchronous function that is called by the `usePoller` hook every 39999 milliseconds (approximately 40 seconds). `loadGasPrice` checks if the `targetNetwork` object has a `gasPrice` property. If it does, the hook sets the gas price to that value. If not, the hook makes an HTTP GET request to the Eth Gas Station API to retrieve the current gas prices. If the device is online, the hook retrieves the gas prices and sets the new gas price if it is different from the current gas price. If there is an error, the hook logs the error to the console. \n\nThe `usePoller` hook is a custom hook that takes two arguments: a function to be called and a delay in milliseconds. The `usePoller` hook calls the specified function every `delay` milliseconds. In this case, the `loadGasPrice` function is called every 39999 milliseconds to retrieve the current gas prices. \n\nThe `useGasPrice` hook returns the current gas price, which can be used in other parts of the project to estimate the cost of executing a transaction on the Ethereum network. \n\nExample usage:\n\n```\nimport useGasPrice from \"./useGasPrice\";\n\nfunction MyComponent() {\n const gasPrice = useGasPrice({ gasPrice: 20000000000 }, \"fast\");\n // gasPrice is the current gas price in wei\n // use gasPrice to estimate the cost of executing a transaction on the Ethereum network\n return (\n Current price: {price}
\n\n
\n );\n}\n```\n## Questions: \n 1. What does this code do?\n- This code exports a custom React hook called `useGasPrice` that fetches the current gas price for a specified Ethereum network and speed using the EthGasStation API.\n\n2. What parameters does the `useGasPrice` hook take?\n- The `useGasPrice` hook takes two parameters: `targetNetwork` (an object representing the target Ethereum network) and `speed` (a string representing the desired speed of the gas price).\n\n3. What is the purpose of the `usePoller` hook in this code?\n- The `usePoller` hook is used to repeatedly call the `loadGasPrice` function every 39999 milliseconds (or approximately 40 seconds) to update the gas price in real-time.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/GasPrice.md"}}],["1397",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/LocalStorage.js)\n\nThe code defines a custom React hook called `useLocalStorage` that allows for storing and retrieving data from the browser's local storage. The hook takes three arguments: `key`, `initialValue`, and `ttl`. \n\nThe `key` argument is a string that serves as the identifier for the data being stored. The `initialValue` argument is the default value that will be returned if no data is found in local storage for the given key. The `ttl` argument is an optional time-to-live value that specifies the number of milliseconds that the data should be considered valid for. If the data is retrieved from local storage and its `expiry` time has passed, the hook will return the `initialValue` and remove the expired data from local storage.\n\nThe hook uses the `useState` hook from React to manage the state of the stored value. The initial state is set using a function that attempts to retrieve the data from local storage using the provided `key`. If the data is found, it is parsed from JSON and returned. If the parsed data is an object with `expiry` and `value` properties, the hook checks if the data has expired based on the current time and the `ttl` value. If the data has expired, the hook removes it from local storage and returns the `initialValue`. Otherwise, the `value` property is returned.\n\nThe hook returns an array with two values: the current stored value and a function to update the stored value. The update function takes a new value and saves it to local storage using the provided `key`. If the `ttl` argument is provided, the function creates an object with the `value` and `expiry` properties and saves it to local storage. Otherwise, it saves the value directly.\n\nThis hook can be used in a larger React project to store and retrieve data from local storage. For example, it could be used to store user preferences or settings that persist across sessions. Here is an example usage of the hook:\n\n```\nimport useLocalStorage from './useLocalStorage';\n\nfunction App() {\n const [count, setCount] = useLocalStorage('count', 0, 60000);\n\n function handleClick() {\n setCount(count + 1);\n }\n\n return (\n Current gas price: {gasPrice} wei
\n\n
\n );\n}\n```\n\nIn this example, the `count` value is stored in local storage with the key `'count'`. The initial value is `0` and the `ttl` is set to `60000` milliseconds (1 minute). The `setCount` function updates the stored value and persists it to local storage. The `handleClick` function increments the `count` value when the button is clicked.\n## Questions: \n 1. What does this code do?\n- This code exports a custom hook called `useLocalStorage` that allows for storing and retrieving data from local storage in a React component.\n\n2. What is the purpose of the `ttl` parameter?\n- The `ttl` parameter stands for \"time to live\" and is an optional parameter that specifies the number of milliseconds that the stored value should be considered valid. If the stored value has expired, it will be deleted from local storage and the initial value will be returned.\n\n3. What happens if an error occurs while trying to retrieve or store data in local storage?\n- If an error occurs while trying to retrieve or store data in local storage, the hook will log the error to the console and return the initial value.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/LocalStorage.md"}}],["1398",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/LookupAddress.js)\n\nThe code in this file is a React hook that allows a user to get the Ethereum Name Service (ENS) name from a given address and provider. The code imports the `utils` module from the `ethers` library and the `useEffect` and `useState` hooks from the `react` library. \n\nThe `lookupAddress` function takes in a provider and an address as arguments. It first checks if the address is valid using the `isAddress` method from the `utils` module. If the address is valid, it looks up the ENS name associated with the address using the `lookupAddress` method from the provider. It then resolves the ENS name to an address using the `resolveName` method from the provider. If the resolved address matches the original address, it returns the ENS name. Otherwise, it returns the original address. If the address is not valid, it returns 0.\n\nThe `useLookupAddress` function takes in a provider and an address as arguments. It uses the `useState` hook to set the initial state of the ENS name to the address. It then uses the `useEffect` hook to check if the ENS name is already cached in `localStorage`. If it is, it sets the ENS name to the cached value. If it is not, it calls the `lookupAddress` function to get the ENS name and sets the state to the returned value. It also caches the ENS name in `localStorage` with a timestamp of 6 hours. \n\nTo use this hook, a user can import it into their React component and call it with the provider and address as arguments. For example:\n\n```\nimport useLookupAddress from './path/to/useLookupAddress';\n\nconst MyComponent = ({ provider, address }) => {\n const ensName = useLookupAddress(provider, address);\n\n return (\n Count: {count}
\n \n\n
\n );\n};\n```\n\nThis hook provides a convenient way for users to get the ENS name associated with an Ethereum address, which can be useful in various Ethereum applications.\n## Questions: \n 1. What is the purpose of the `lookupAddress` function?\n \n The `lookupAddress` function takes a provider and an address as input and returns the corresponding ENS name for the address, if available. It also ensures that the reported ENS name resolves to the given address.\n\n2. What is the purpose of the `useLookupAddress` function?\n \n The `useLookupAddress` function is a custom React hook that takes a provider and an address as input and returns the corresponding ENS name for the address, if available. It also caches the ENS name in local storage to avoid unnecessary lookups.\n\n3. What is the purpose of the commented out `useLocalStorage` line?\n \n The `useLocalStorage` line is a custom hook that is not used in the code. It is commented out because there were synchronization issues with it, and the developer decided to write directly to local storage instead.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/LookupAddress.md"}}],["1399",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/Nonce.js)\n\nThe code above is a custom React hook called `useNonce` that is used to retrieve the nonce of a given Ethereum address. The nonce is a unique number that is used to prevent replay attacks on transactions. \n\nThe hook takes in two parameters: `mainnetProvider` and `address`. `mainnetProvider` is an instance of a web3 provider that is connected to the Ethereum mainnet, while `address` is the Ethereum address for which the nonce is being retrieved. \n\nThe hook uses the `useState` hook from React to create a state variable called `nonce` and initialize it to 0. The `useState` hook returns an array with two elements: the current state value and a function to update the state value. In this case, `nonce` is the current state value and `setNonce` is the function to update it. \n\nThe `Nonce` function is defined inside the `useNonce` hook and is called immediately after it is defined. The `Nonce` function is an async function that retrieves the nonce for the given address using the `getTransactionCount` method of the `mainnetProvider`. The `getTransactionCount` method returns the number of transactions sent from the given address. \n\nIf the `address` parameter is truthy (i.e., not null or undefined), the `getNonce` function is called to retrieve the nonce and update the `nonce` state variable using the `setNonce` function. \n\nFinally, the `useNonce` hook returns the `nonce` state variable, which can be used in other parts of the application to sign transactions with the correct nonce. \n\nHere is an example of how the `useNonce` hook can be used in a React component:\n\n```\nimport useNonce from './useNonce';\n\nfunction MyComponent({ mainnetProvider, address }) {\n const nonce = useNonce(mainnetProvider, address);\n\n // Use the nonce to sign a transaction\n const signedTx = signTransaction({ nonce, ...otherTxData });\n\n return (\n Address: {address}
\nENS Name: {ensName}
\n\n
\n );\n}\n```\n\nOverall, the `useNonce` hook is a useful utility function for any Ethereum application that needs to sign transactions with the correct nonce.\n## Questions: \n 1. What is the purpose of this code and how is it used in the zoo project?\n This code defines a custom hook called `useNonce` that retrieves the transaction count for a given address on the Ethereum mainnet using a provided provider. It is likely used in the zoo project to interact with the Ethereum blockchain.\n\n2. What is the significance of the `useState` hook being used in this code?\n The `useState` hook is used to define a state variable called `nonce` and a function called `setNonce` that can be used to update the value of `nonce`. This allows the `useNonce` hook to store and update the nonce value over time.\n\n3. Why is the `getNonce` function defined as an async function and what does it do?\n The `getNonce` function is defined as an async function because it needs to wait for the `mainnetProvider.getTransactionCount` function to return a value before it can update the `nonce` state variable using `setNonce`. It retrieves the transaction count for the provided address on the Ethereum mainnet.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/Nonce.md"}}],["1400",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/OnBlock.js)\n\nThe code is a custom React hook called `useOnBlock` that is designed to help call a function regularly in time intervals. The hook takes in three parameters: `provider`, `fn`, and `args`. \n\nThe `provider` parameter is an object that is used to listen for events. The `fn` parameter is the function that will be called at regular intervals. The `args` parameter is an optional array of arguments that will be passed to the function when it is called.\n\nThe hook uses the `useRef` and `useEffect` hooks from React to keep track of the latest function and to turn on the listener if both the function and provider are present. The `useRef` hook is used to store the latest function in a mutable reference that persists across renders. The `useEffect` hook is used to update the reference to the latest function whenever it changes.\n\nWhen the function and provider are present, the hook sets up a listener for the \"block\" event on the provider object. The listener function is called whenever a new block is added to the blockchain. If the `DEBUG` flag is set to true, the function logs the block number, the function being called, the arguments being passed, and the provider's listeners. \n\nThe listener function then checks if there are any arguments to be passed to the function. If there are, it calls the saved function with the arguments. If there are no arguments, it simply calls the saved function.\n\nThis hook can be used in a larger project to listen for events on a blockchain and call a function at regular intervals. For example, it could be used to update the UI with the latest block number or to fetch new data from a blockchain API. \n\nHere is an example of how the `useOnBlock` hook could be used in a React component:\n\n```\nimport { useState } from \"react\";\nimport useOnBlock from \"./useOnBlock\";\n\nfunction MyComponent({ provider }) {\n const [blockNumber, setBlockNumber] = useState(0);\n\n useOnBlock(provider, () => {\n setBlockNumber(blockNumber + 1);\n });\n\n return (\n Nonce: {nonce}
\nSigned transaction: {signedTx}
\n\n
\n );\n}\n```\n\nIn this example, the `MyComponent` component takes in a `provider` object as a prop. The component uses the `useState` hook to keep track of the current block number. The `useOnBlock` hook is used to listen for new blocks on the `provider` object and update the block number in the component's state. The updated block number is then displayed in the component's UI.\n## Questions: \n 1. What is the purpose of this code?\n This code is a custom React hook called `useOnBlock` that sets up a listener for Ethereum block events and calls a provided function at regular intervals.\n\n2. What is the significance of the `DEBUG` constant?\n The `DEBUG` constant is used to toggle console logging of block events, the provided function, and the provider's listeners. It is set to `false` by default.\n\n3. What happens if either the `fn` or `provider` arguments are not provided?\n If either the `fn` or `provider` arguments are not provided, the listener will not be turned on and the hook will not do anything.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/OnBlock.md"}}],["1401",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/Poller.js)\n\nThe code above is a custom React hook called `usePoller` that allows a function to be called regularly at specified time intervals. This hook takes in three parameters: `fn`, `delay`, and `extraWatch`. \n\nThe `fn` parameter is the function that will be called at each interval. The `delay` parameter is the time interval in milliseconds between each call of the function. The `extraWatch` parameter is an optional parameter that can be used to trigger the function to run again if it changes.\n\nThe hook uses the `useEffect` and `useRef` hooks from React. The `useRef` hook is used to store the latest version of the `fn` parameter. The `useEffect` hook is used to update the stored `fn` parameter whenever it changes. \n\nThe hook then sets up an interval using the `setInterval` function. The `setInterval` function takes in the `tick` function and the `delay` parameter. The `tick` function simply calls the stored `fn` parameter. The `useEffect` hook also returns a cleanup function that clears the interval using the `clearInterval` function.\n\nFinally, the hook runs the `fn` function at the start using another `useEffect` hook. This hook is triggered whenever the `extraWatch` parameter changes.\n\nThis hook can be used in a larger project to regularly call a function, such as updating data from an API or refreshing a component. Here is an example of how to use this hook:\n\n```\nimport React, { useState } from \"react\";\nimport usePoller from \"./usePoller\";\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n usePoller(() => {\n setCount(count + 1);\n }, 1000);\n\n return (\n Current block number: {blockNumber}
\n\n
\n );\n}\n\nexport default App;\n```\n\nIn this example, the `usePoller` hook is used to update the `count` state variable every second. The `setCount` function is called inside the `usePoller` hook to update the state. The updated `count` value is then displayed in the component.\n## Questions: \n 1. What does this code do?\n This code exports a custom React hook called `usePoller` that takes in a function, a delay time, and an extra watch value as arguments. It sets up an interval to call the function regularly at the specified delay time, and also runs the function at the start and whenever the extra watch value changes.\n\n2. What is the purpose of the `useRef` hook in this code?\n The `useRef` hook is used to create a mutable reference to the latest version of the function passed in as an argument to `usePoller`. This reference is then used in the interval setup to ensure that the latest version of the function is always called.\n\n3. Why is there an `eslint-disable-next-line` comment in this code?\n The `eslint-disable-next-line` comment is used to disable the eslint rule that requires a `return` statement in the second `useEffect` hook. This is because the `return` statement is conditionally executed based on the value of `delay`, and eslint cannot determine this at compile time.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/Poller.md"}}],["1402",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/ResolveName.js)\n\nThe code in this file provides a custom React hook called `useResolveName` that can be used to get the address corresponding to a given ENS name using a specified Ethereum provider. The hook takes two parameters: `provider`, which is the Ethereum provider to use for resolving the ENS name, and `ensName`, which is the ENS name to resolve.\n\nThe hook uses the `useState` and `useEffect` hooks from the React library to manage state and side effects. Specifically, it initializes the `address` state to the Ethereum constant `AddressZero`, which represents the null address, and then uses the `useEffect` hook to asynchronously resolve the ENS name and update the `address` state when the `provider` or `ensName` parameters change.\n\nThe hook returns the resolved `address` state, which can be used in other parts of the application to interact with the Ethereum network using the resolved address.\n\nThis code is useful in the larger project because it provides a simple and reusable way to resolve ENS names to Ethereum addresses using a specified provider. For example, it could be used in a decentralized application to look up the address of a user's ENS name and then interact with their Ethereum account on the network. Here is an example usage of the hook:\n\n```\nimport { ethers } from \"ethers\";\nimport useResolveName from \"./useResolveName\";\n\nconst MyComponent = () => {\n const mainnetProvider = new ethers.providers.InfuraProvider(\"mainnet\");\n const addressFromENS = useResolveName(mainnetProvider, \"austingriffith.eth\");\n\n // Use the resolved address in the component\n return Count: {count}
\nResolved address: {addressFromENS}
;\n};\n```\n## Questions: \n 1. What is the purpose of the `ethers` library being imported?\n- The `ethers` library is being used to access the `constants` object which contains the `AddressZero` constant.\n\n2. How does the `useResolveName` function work?\n- The `useResolveName` function takes in a provider and an ENS name as arguments, and returns the corresponding address for the given ENS name using the `resolveName` method of the provider.\n\n3. What is the expected output of using the `useResolveName` function?\n- The expected output of using the `useResolveName` function is the address corresponding to the given ENS name.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/ResolveName.md"}}],["1403",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/TokenList.js)\n\n# `useTokenList` function\n\nThe `useTokenList` function is a custom React hook that retrieves a token list from a specified URI and returns an array of tokens. A token list is a JSON file that contains information about tokens, such as their name, symbol, and contract address. The function takes two optional parameters: `tokenListUri` and `chainId`.\n\n## How to use\n\nTo use the `useTokenList` function, import it into a React component and call it. By default, it returns the Uniswap token list. You can also pass a custom token list URI as the first parameter to retrieve a different token list. If you pass a `chainId` as the second parameter, the function will filter the token list to only include tokens that belong to that chain.\n\n```javascript\nimport useTokenList from './useTokenList';\n\nconst MyComponent = () => {\n const tokenList = useTokenList(); // returns Uniswap tokens\n const customTokenList = useTokenList('https://mycustomtokenlist.com', 1); // returns tokens for chainId 1\n // ...\n};\n```\n\n## Features\n\n- Retrieves a token list from a specified URI\n- Returns an array of tokens\n- Optional `chainId` parameter to filter tokens by chainId\n\n## Implementation\n\nThe `useTokenList` function uses the `useState` and `useEffect` hooks from React. It initializes a state variable `tokenList` as an empty array and sets the default token list URI to the Uniswap token list. When the component mounts or the `tokenListUri` parameter changes, the function calls an asynchronous `getTokenList` function that fetches the token list from the specified URI. If the `chainId` parameter is passed, the function filters the token list to only include tokens that belong to that chain. Finally, the function sets the `tokenList` state variable to an array of tokens extracted from the token list JSON.\n## Questions: \n 1. What is the purpose of this code?\n \n This code defines a custom React hook called `useTokenList` that fetches a tokenlist and returns an array of tokens from it. The tokenlist URI and chainId can be optionally specified as parameters.\n\n2. What is the format of the tokenlist that this code fetches?\n\n The code expects the tokenlist to be in JSON format, with an array of objects containing information about each token. The relevant information for this code is the `tokens` property of the JSON object.\n\n3. What happens if the user is offline when this code is executed?\n\n If the user is offline, the code will not attempt to fetch the tokenlist and will not update the state of the `tokenList` variable.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/TokenList.md"}}],["1404",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/UserSigner.js)\n\nThe `useUserSigner` function is a custom React hook that returns a signer object for a user. A signer is an object that can sign Ethereum transactions and messages. The function takes two arguments: `injectedProvider` and `localProvider`. The `injectedProvider` is a provider object that is injected into the browser by a wallet like Metamask. The `localProvider` is a provider object that is created by the application itself, using a library like ethers.js.\n\nThe function first initializes a state variable `signer` using the `useState` hook. It also calls another custom hook `useBurnerSigner` with the `localProvider` argument. The `useBurnerSigner` hook returns a burner signer object that can be used for testing purposes.\n\nThe function then uses the `useMemo` hook to memoize the `signer` state variable. If `injectedProvider` is truthy, it gets the signer object from the provider and sets it as the `signer` state. If `localProvider` is falsy, it sets the `signer` state to `undefined`. If neither `injectedProvider` nor `localProvider` is truthy, it sets the `signer` state to the burner signer object returned by `useBurnerSigner`.\n\nThe function returns the `signer` state variable. This hook can be used in a React component to get the signer object for the user. For example:\n\n```\nimport { useWeb3React } from \"@web3-react/core\";\nimport useUserSigner from \"./useUserSigner\";\n\nfunction MyComponent() {\n const { library } = useWeb3React();\n const signer = useUserSigner(library.getSigner(), library);\n\n // Use the signer object to sign transactions or messages\n}\n```\n\nIn this example, the `useWeb3React` hook is used to get the `library` object, which is a provider object injected by the Web3 React library. The `library.getSigner()` method returns the signer object for the current user. The `library` object is also passed as the `localProvider` argument to `useUserSigner`. The `signer` object returned by `useUserSigner` can then be used to sign transactions or messages.\n## Questions: \n 1. What is the purpose of the `useMemo` hook in this code?\n - The `useMemo` hook is used to memoize the function that sets the signer based on the provider, so that it only runs when the dependencies (`injectedProvider`, `localProvider`, and `burnerSigner`) change.\n2. What is the `useBurnerSigner` function and how is it used in this code?\n - The `useBurnerSigner` function is imported from another file and is used to get a burner signer from the local provider. It is used in the `useUserSigner` function to set the signer to the burner signer if no injected provider is available.\n3. What are the possible values that can be returned by the `useUserSigner` function?\n - The `useUserSigner` function returns the signer, which can be either an injected signer (if `injectedProvider` is available), a burner signer (if no `injectedProvider` is available and `localProvider` is available), or `undefined` (if no `injectedProvider` or `localProvider` is available).","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/UserSigner.md"}}],["1405",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/index.js)\n\nThis code exports a series of custom React hooks from various files within the `zoo` project. These hooks are designed to provide functionality for interacting with Ethereum smart contracts and other blockchain-related tasks.\n\nFor example, the `useContractLoader` hook can be used to load a smart contract from its address on the blockchain, while the `useContractReader` hook can be used to read data from a smart contract. The `useGasPrice` hook provides the current gas price for transactions on the Ethereum network, and the `useResolveName` hook can be used to resolve an Ethereum address to its corresponding ENS name.\n\nThese hooks can be imported and used in other parts of the `zoo` project to simplify the process of interacting with the blockchain. For example, a component that needs to read data from a smart contract can use the `useContractReader` hook to do so without having to write custom code to interact with the contract.\n\nHere is an example of how the `useGasPrice` hook could be used in a React component:\n\n```\nimport { useGasPrice } from 'zoo';\n\nfunction GasPriceDisplay() {\n const gasPrice = useGasPrice();\n\n return (\n \n Current gas price: {gasPrice} wei\n
\n );\n}\n```\n\nOverall, this code provides a set of reusable hooks that can be used throughout the `zoo` project to simplify interactions with the Ethereum blockchain.\n## Questions: \n 1. What is the purpose of this code file?\n- This code file exports various custom hooks from different files within the `zoo` project.\n\n2. What are some examples of the custom hooks being exported?\n- Some examples of the custom hooks being exported include `useBalance`, `useContractLoader`, `useLocalStorage`, and `useUserSigner`.\n\n3. How can a developer use these custom hooks in their own code?\n- A developer can import the desired custom hook from this file and use it in their own code by calling the hook function and passing in any necessary parameters.","metadata":{"source":".autodoc/docs/markdown/lab/src/hooks/index.md"}}],["1406",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/index.jsx)\n\nThis code sets up the environment for a React application that interacts with a GraphQL subgraph. It imports necessary dependencies from external libraries such as Apollo Client and React CSS Theme Switcher. \n\nThe `themes` object contains two properties, `dark` and `light`, which are URLs to CSS files for the respective themes. These themes can be switched using the `ThemeSwitcherProvider` component from the React CSS Theme Switcher library. The `prevTheme` variable retrieves the previously selected theme from local storage, or defaults to \"light\" if no theme has been selected before.\n\nThe `subgraphUri` variable is the URL to the GraphQL subgraph that the application will interact with. This URL is specific to the project and may need to be changed depending on the subgraph being used.\n\nThe `client` variable creates a new instance of the Apollo Client with the `subgraphUri` and an `InMemoryCache`. This client will be used to make GraphQL queries to the subgraph.\n\nFinally, the `ReactDOM.render()` method renders the `App` component wrapped in the `ApolloProvider` and `ThemeSwitcherProvider` components. The `ApolloProvider` component provides the `client` instance to the `App` component, allowing it to make GraphQL queries. The `ThemeSwitcherProvider` component provides the theme switching functionality to the `App` component.\n\nOverall, this code sets up the environment for a React application that interacts with a GraphQL subgraph and provides theme switching functionality. It can be used as a starting point for building a frontend for a dApp that uses a subgraph to query data from the blockchain. \n\nExample usage:\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport { ApolloClient, ApolloProvider, InMemoryCache } from \"@apollo/client\";\nimport { ThemeSwitcherProvider } from \"react-css-theme-switcher\";\nimport \"./index.css\";\n\nconst themes = {\n dark: `${process.env.PUBLIC_URL}/dark-theme.css`,\n light: `${process.env.PUBLIC_URL}/light-theme.css`,\n};\n\nconst prevTheme = window.localStorage.getItem(\"theme\");\n\nconst subgraphUri = \"http://localhost:8000/subgraphs/name/scaffold-eth/your-contract\";\n\nconst client = new ApolloClient({\n uri: subgraphUri,\n cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n \n
\n```\n## Questions: \n 1. What is the purpose of the imported LESS files?\n - The imported LESS files are used to style the components of the `antd` library, which is likely being used in the `zoo` project.\n\n2. Why are there shared variables commented out?\n - The shared variables are likely commented out because they have been extracted to their own file for easier management and organization.\n\n3. What is the purpose of the `.highlight` class?\n - The `.highlight` class is used to apply a specific background color to elements that need to be highlighted in the UI.","metadata":{"source":".autodoc/docs/markdown/lab/src/themes/light-theme.md"}}],["1410",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/views/ExampleUI.jsx)\n\nThe code is a React component that provides a user interface for interacting with a smart contract. The component receives several props, including the contract's address, provider, and read and write contracts. The UI displays the current purpose of the contract and allows the user to set a new purpose by entering text into an input field and clicking a button. When the button is clicked, the component calls the setPurpose function on the write contract with the new purpose as an argument. The component also displays the user's address, balance, and contract address, as well as several example buttons that demonstrate how to send value and call functions on the contract. \n\nThe UI also includes a section for displaying events emitted by the contract. This section is commented out by default, but can be uncommented by adding an emit statement to the setPurpose function in the contract. Finally, the UI includes several example components from the ant.design library, such as buttons, sliders, and date pickers. \n\nThis component can be used as a starting point for building a more complex UI for a smart contract. Developers can modify the component to display additional contract data, add new functions for interacting with the contract, or replace the example components with custom components. \n\nExample usage:\n\n```jsx\nimport ExampleUI from \"./ExampleUI\";\n\nfunction App() {\n const [purpose, setPurpose] = useState(\"\");\n const [setPurposeEvents, setSetPurposeEvents] = useState([]);\n const [address, setAddress] = useState(\"\");\n const [mainnetProvider, setMainnetProvider] = useState(\"\");\n const [localProvider, setLocalProvider] = useState(\"\");\n const [yourLocalBalance, setYourLocalBalance] = useState(\"\");\n const [price, setPrice] = useState(\"\");\n const [tx, setTx] = useState(\"\");\n const [readContracts, setReadContracts] = useState(\"\");\n const [writeContracts, setWriteContracts] = useState(\"\");\n\n // set values for props\n\n return (\n This text is highlighted
\n\n
\n );\n}\n```\n## Questions: \n 1. What is the purpose of the `useTokenList` hook and where does it get its data from?\n- The `useTokenList` hook returns an array of tokens and gets its data from the tokenlist located at `https://raw.githubusercontent.com/SetProtocol/uniswap-tokenlist/main/set.tokenlist.json`.\n2. What is the purpose of the `AddressInput` component and what props does it take?\n- The `AddressInput` component is a web3 specific component used for inputting addresses and takes a prop called `ensProvider` which is used for resolving ENS names.\n3. What is the purpose of the `usePrice` hook and what value does it return?\n- The `usePrice` hook is used to load the current price and returns the value of `price`.","metadata":{"source":".autodoc/docs/markdown/lab/src/views/Hints.md"}}],["1412",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/views/Subgraph.jsx)\n\nThe `Subgraph` component is a React component that renders a UI for interacting with a subgraph. A subgraph is a tool provided by The Graph that allows developers to index and query data from a blockchain. The component imports several dependencies, including `@apollo/client`, `antd`, and `graphiql`, and defines a function called `graphQLFetcher` that fetches data from the subgraph using the `fetch` API. \n\nThe component then defines a GraphQL query called `EXAMPLE_GRAPHQL` that retrieves data from the subgraph, including the `id`, `purpose`, `createdAt`, and `sender` fields. The query is then passed to the `gql` function from `@apollo/client` to create a GraphQL document called `EXAMPLE_GQL`. The `useQuery` hook from `@apollo/client` is then used to execute the query and retrieve the data. The `loading` and `data` variables are destructured from the result of the `useQuery` hook.\n\nThe component also defines a table called `purposeColumns` that specifies the columns to be displayed in the UI. The table includes columns for the `purpose`, `sender`, and `createdAt` fields. The `render` function for the `sender` column uses the `Address` component from `../components` to display the `id` field of the `sender` object.\n\nThe component defines a state variable called `newPurpose` using the `useState` hook. The `newPurpose` variable is initialized to the string \"loading...\". The component also defines a `deployWarning` variable that displays a warning message if the subgraph has not been deployed.\n\nThe component renders a UI that includes several sections of text that provide instructions for deploying and using a subgraph. The UI also includes an input field and a button that allow the user to set the `purpose` field of a contract. The `tx` function is passed to the component as a prop and is used to call the `setPurpose` function on the contract. \n\nThe UI also includes a table that displays the data retrieved from the subgraph, as well as a GraphiQL editor that allows the user to execute GraphQL queries against the subgraph. If the `data` variable is null, the UI displays either a loading message or the `deployWarning` message.\n\nOverall, the `Subgraph` component provides a simple UI for interacting with a subgraph and retrieving data from a blockchain. The component can be used as part of a larger project that requires indexing and querying blockchain data.\n## Questions: \n 1. What is the purpose of the `Subgraph` component?\n- The `Subgraph` component is used to display data from a GraphQL subgraph and provides functionality to set a new purpose value.\n2. What external libraries are being used in this code?\n- The code is using several external libraries including `@apollo/client`, `antd`, `graphiql`, and `isomorphic-fetch`.\n3. What is the purpose of the `highlight` object?\n- The `highlight` object is used to style a highlighted section of text in the component's rendered output. However, it is currently commented out and not being used.","metadata":{"source":".autodoc/docs/markdown/lab/src/views/Subgraph.md"}}],["1413",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/views/index.js)\n\nThis code exports three modules from the `zoo` project: `ExampleUI`, `Hints`, and `Subgraph`. \n\n`ExampleUI` is likely a user interface component that provides an example of how to use a particular feature or functionality within the larger `zoo` project. It may contain buttons, input fields, or other interactive elements that allow the user to interact with the feature in question. \n\n`Hints` is likely a module that provides hints or suggestions to the user on how to use the `zoo` project. This could be in the form of tooltips, pop-ups, or other types of notifications that appear when the user hovers over or clicks on certain elements within the project. \n\n`Subgraph` is likely a module that provides a subgraph of the larger `zoo` project. This could be a smaller, more focused view of a particular feature or functionality within the project, allowing the user to more easily understand and interact with that feature. \n\nOverall, this code is important for the `zoo` project because it allows other parts of the project to easily import and use these three modules. For example, if another component within the project needs to display an example of how to use a particular feature, it can simply import `ExampleUI` and use it within its own code. \n\nExample usage:\n\n```\nimport { ExampleUI, Hints, Subgraph } from 'zoo';\n\n// Use ExampleUI component\nChild components go here
\n \n \n
\n )\n}\n```\n\nIn this example, the `MyVideoPlayer` component renders a video element and the `MediaPlayButton` component. The `mediaRef` prop of the `MediaPlayButton` component is set to the `videoRef` object, which is a reference to the video element. This allows the `MediaPlayButton` component to control the play/pause behavior of the video element.\n## Questions: \n 1. What does this code do?\n- This code exports a React component called `MediaPlayButton` that renders a button with a play/pause icon. When clicked, it plays or pauses an audio or video element passed as a prop.\n\n2. What external libraries does this code use?\n- This code uses two external libraries: `@fortawesome/react-fontawesome` and `@fortawesome/free-solid-svg-icons`. These libraries provide the FontAwesomeIcon component and the faPlay/faPause icons used in the button.\n\n3. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to set up event listeners on the media element passed as a prop. When the media starts playing, it sets the `playing` state to true, and when it pauses, it sets the `playing` state to false. The hook also cleans up the event listeners when the component unmounts.","metadata":{"source":".autodoc/docs/markdown/ui/src/components/TokenMedia/MediaPlayButton.md"}}],["1440",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/components/TokenMedia/TokenFallback.tsx)\n\nThe `TokenFallback` component is a React functional component that renders a fallback UI for when content is not available for a given token. It takes in several props, including `style`, `className`, `token`, `chainId`, and `onRefreshClicked`. \n\nThe component first uses the `useReservoirClient` hook to get the current client instance, and then uses the `chainId` prop to determine which chain to use. If `chainId` is not provided, it defaults to the current chain. \n\nThe component then renders a `Flex` container with `justify`, `align`, and `direction` props set to center the child elements. The `gap` and `aspectRatio` CSS properties are also set on the container. \n\nInside the container, the component conditionally renders an `img` element if the `token` prop has a `collection` object with an `image` property. The image is displayed with a width and height of 64 pixels, and a border radius of 8 pixels. \n\nNext, a `Text` component is rendered with the text \"No Content Available\". The `style` prop is set to \"body2\", and the `textAlign` CSS property is set to center the text. \n\nFinally, a `Button` component is rendered with the text \"Refresh\". When clicked, the `onRefreshClicked` prop is called, and a POST request is made to the Reservoir API to refresh the token. The request includes the `token` ID in the request body, and the `Content-Type` header is set to \"application/json\". \n\nThis component can be used in the larger project as a fallback UI for when content is not available for a given token. It provides a way for users to refresh the token content if it becomes stale. \n\nExample usage:\n\n```\nimport TokenFallback from './TokenFallback'\n\nfunction MyComponent() {\n return (\n \n console.log('Refresh clicked')}\n />\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `TokenFallback` component?\n- The `TokenFallback` component is a fallback UI for when there is no content available for a token.\n\n2. What is the `useReservoirClient` hook and where is it defined?\n- The `useReservoirClient` hook is defined in the `../../hooks` module and is used to retrieve the Reservoir client instance.\n\n3. What is the `paths` object imported from `@reservoir0x/reservoir-sdk` used for?\n- The `paths` object is used to define the types for the request and response parameters for the `/tokens/refresh/v1` endpoint.","metadata":{"source":".autodoc/docs/markdown/ui/src/components/TokenMedia/TokenFallback.md"}}],["1441",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/components/TokenMedia/index.tsx)\n\nThe `TokenMedia` component is a React functional component that renders different types of media based on the type of token passed to it. The component takes in a `token` object, which is an object that contains information about the token, such as its media type, image, and collection. The component also takes in a `preview` boolean, which determines whether the media should be displayed as a preview or not. \n\nThe `TokenMedia` component uses the `useTokens` and `useModelViewer` hooks to retrieve data about the token and to render the 3D model viewer, respectively. The component also uses the `ThemeContext` context to retrieve the theme of the application and set the border radius of the media element. \n\nThe `TokenMedia` component renders different types of media based on the `mediaType` of the token. If the `mediaType` is an image, the component renders an `img` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is a video, the component renders a `video` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is an audio file, the component renders an `audio` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is a 3D model, the component renders a `model-viewer` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is an HTML file, the component renders an `iframe` element with the `src` attribute set to the `media` property of the token. \n\nIf the `mediaType` is not recognized or if there is an error loading the media, the component renders a fallback element. The fallback element can be customized by passing a `fallback` function to the component. \n\nThe `TokenMedia` component also provides options to customize the style and behavior of the media elements. These options include `style`, `className`, `modelViewerOptions`, `videoOptions`, `audioOptions`, `iframeOptions`, `onError`, and `onRefreshToken`. \n\nOverall, the `TokenMedia` component is a versatile component that can render different types of media based on the type of token passed to it. It provides options to customize the style and behavior of the media elements and can be used in a larger project to display media associated with tokens. \n\nExample usage:\n\n```jsx\nimport TokenMedia from './TokenMedia'\n\nconst token = {\n media: 'https://example.com/video.mp4',\n image: 'https://example.com/image.png',\n collection: 'example-collection',\n tokenId: 'example-token',\n}\n\nfunction App() {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `extractMediaType` function?\n- The `extractMediaType` function takes a token object and returns the media type of the token (e.g. mp4, mp3, png, etc.) based on the file extension of the media URL.\n\n2. What are the different types of media that this component can render?\n- The component can render images (png, jpeg, jpg, gif), videos (mp4), audio (mp3, wav), 3D models (gltf, glb), HTML, SVG, and other media types.\n\n3. What is the purpose of the `fallback` prop?\n- The `fallback` prop is a function that takes the media type of the token as an argument and returns a fallback element to render if there is an error loading the media. If no fallback function is provided, a default `TokenFallback` component is rendered.","metadata":{"source":".autodoc/docs/markdown/ui/src/components/TokenMedia/index.md"}}],["1442",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/components/cart/CartCheckoutModal.tsx)\n\nThe `CartCheckoutModal` component is a React component that renders a modal for the checkout process of a shopping cart. It receives several props that contain information about the items in the cart, the total price, the currency, the chain, and the transaction status. \n\nThe component uses several other components and libraries to render the modal, including `DialogPrimitive`, `framer-motion`, `@stitches/react`, and `@fortawesome/react-fontawesome`. It also uses several custom components from the project, such as `TokenCheckout`, `SigninStep`, and `ApprovalCollapsible`.\n\nThe modal has several states depending on the transaction status. If the status is `Approving`, the modal shows a list of items to be approved, and the user is prompted to sign in to their wallet. If the status is `Finalizing`, the modal shows a message indicating that the transaction is being finalized on the blockchain. If the status is `Complete`, the modal shows a message indicating whether the transaction was successful or not, and provides a link to view the transaction on the blockchain.\n\nThe component also uses several hooks to retrieve data and manage state, such as `useContext`, `useState`, `useEffect`, and custom hooks like `useCoinConversion`. \n\nOverall, the `CartCheckoutModal` component is an important part of the shopping cart feature of the project, providing a user-friendly interface for the checkout process and integrating with various blockchain-related libraries and services. \n\nExample usage:\n\n```jsx\n\n
\n )}\n Total price: {totalPrice}
\n- \n {items.map(item => (\n
- {item.name} \n ))}\n
\n View cart} />\n
\n )\n}\n```\n\nIn this example, three `CartToast` components are rendered with different `kind` and `message` props. The third toast also includes a link to the cart page. \n\nOverall, the `CartToast` component is a simple and flexible way to display feedback messages to the user in a consistent and customizable way.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `CartToast` that displays a message with an optional link and an icon based on the type of message (success, error, or warning).\n\n2. What external dependencies does this code rely on?\n- This code relies on the `react`, `@fortawesome/react-fontawesome`, and `@fortawesome/free-solid-svg-icons` packages.\n\n3. What are the available props for the `CartToast` component?\n- The available props for the `CartToast` component are `kind` (string, optional), `message` (string, required), and `link` (ReactNode, optional). The `kind` prop can be one of three values: `'success'`, `'error'`, or `'warning'`. If `kind` is not provided, it defaults to `'success'`.","metadata":{"source":".autodoc/docs/markdown/ui/src/components/cart/CartToast.md"}}],["1446",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/constants/wrappedContractNames.ts)\n\nThe code above defines a constant variable called `wrappedContractNames` which is a Record object that maps numbers to strings. The purpose of this code is to provide a mapping between the network IDs of various Ethereum-based blockchains and the names of the wrapped tokens used on those networks. \n\nThe keys of the `wrappedContractNames` object are the network IDs, and the values are the names of the wrapped tokens used on those networks. For example, the network ID 1 is associated with the wrapped Ether token (WETH), while the network ID 137 is associated with the wrapped Matic token (WMATIC). \n\nThis code is likely used in other parts of the larger project to facilitate the use of wrapped tokens across different Ethereum-based blockchains. For example, if a user wants to interact with a smart contract on the Polygon network (network ID 137), they would need to use WMATIC instead of WETH. By referencing the `wrappedContractNames` object, the project can easily determine which wrapped token to use for a given network ID. \n\nHere is an example of how this code might be used in another part of the project:\n\n```\nimport wrappedContractNames from 'zoo'\n\nconst networkId = 137\nconst wrappedTokenName = wrappedContractNames[networkId]\n\n// Use wrappedTokenName to interact with smart contracts on the Polygon network\n``` \n\nIn this example, the `wrappedContractNames` object is imported from the `zoo` module. The code then retrieves the name of the wrapped token associated with the Polygon network (network ID 137) by accessing the `wrappedContractNames` object with the network ID as the key. The resulting `wrappedTokenName` variable can then be used to interact with smart contracts on the Polygon network.\n## Questions: \n 1. **What is the purpose of this code?**\\\nA smart developer might ask what this code is used for and how it fits into the overall functionality of the `zoo` project. Based on the code, it appears to be defining a mapping of contract names to contract numbers for various tokens.\n\n2. **What is the significance of the numbers used as keys in the `wrappedContractNames` object?**\\\nA smart developer might ask why specific numbers were chosen as keys in the `wrappedContractNames` object. Based on the code, it seems that each number corresponds to a specific blockchain or network.\n\n3. **What is the reason for exporting `wrappedContractNames` as the default export?**\\\nA smart developer might ask why `wrappedContractNames` is being exported as the default export of the `zoo` module. Based on the code, it seems that this mapping of contract names to contract numbers is a fundamental piece of data that may be used throughout the `zoo` project.","metadata":{"source":".autodoc/docs/markdown/ui/src/constants/wrappedContractNames.md"}}],["1447",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/constants/wrappedContracts.ts)\n\nThis code defines a constant variable called `wrappedContracts` which is a Record object that maps numbers to Ethereum contract addresses. The numbers represent different Ethereum networks, with 1 being the main Ethereum network, 5 being the Goerli test network, 10 being the Optimism network, 137 being the Polygon network, and 42161 being the Arbitrum network. The corresponding contract addresses are for wrapped versions of various tokens, which are tokens that have been \"wrapped\" to be compatible with a different network or protocol.\n\nThis code is likely used in the larger project to provide a centralized location for storing the contract addresses of wrapped tokens on different networks. Other parts of the project can import this file and use the `wrappedContracts` object to interact with the wrapped tokens on the appropriate network. For example, if a user wants to trade a wrapped token on the Polygon network, the code can reference the contract address stored in `wrappedContracts[137]` to interact with that token.\n\nHere is an example of how this code could be used in a larger project:\n\n```\nimport wrappedContracts from './zoo/wrappedContracts'\n\nconst polygonWrappedTokenAddress = wrappedContracts[137]\n// Use the polygonWrappedTokenAddress to interact with the wrapped token on the Polygon network\n```\n## Questions: \n 1. What is the purpose of this code?\n - This code defines a constant object `wrappedContracts` that maps network IDs to contract addresses.\n\n2. What is the data type of `wrappedContracts` and what does it represent?\n - `wrappedContracts` is a `Record` type with keys of type `number` and values of type `string`. It represents a mapping of network IDs to contract addresses.\n\n3. Where is this code being used/imported?\n - It is being exported as a default export from the `zoo` module, so it can be imported and used in other parts of the project that depend on it.","metadata":{"source":".autodoc/docs/markdown/ui/src/constants/wrappedContracts.md"}}],["1448",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/index.ts)\n\nThis code exports a variety of custom React hooks from the `zoo` project. React hooks are a way to reuse stateful logic across components in a React application. \n\nThe exported hooks can be divided into two categories: public and internal. Public hooks are intended to be used by other developers who are consuming the `zoo` project, while internal hooks are used within the `zoo` project itself.\n\nThe public hooks include `useCollections`, `useTokens`, `useListings`, and others. These hooks likely provide functionality related to interacting with collections, tokens, and listings within the `zoo` project. For example, `useCollections` may provide a way to fetch and manage collections of tokens within the project.\n\nThe internal hooks include `useCopyToClipboard`, `useMediaQuery`, `useTimeSince`, and others. These hooks are likely used within the `zoo` project to provide common functionality across components. For example, `useCopyToClipboard` may provide a way to copy text to the clipboard, which could be used in multiple components within the project.\n\nOverall, this code provides a way for developers to reuse common stateful logic across components within the `zoo` project. By exporting these hooks, other developers can easily consume and integrate them into their own components. For example, a developer working on a new feature within the `zoo` project may use the `useCollections` hook to fetch and manage collections of tokens within their component.\n## Questions: \n 1. What is the purpose of this file?\n- This file exports various custom hooks from the `zoo` project, both for internal and external use.\n\n2. What are some examples of functionality provided by the exported hooks?\n- The exported hooks include functionality such as accessing collections, tokens, listings, and bids, as well as media queries, time formatting, and pre-approval checks.\n\n3. Are there any dependencies or requirements for using these hooks?\n- It is unclear from this code whether there are any dependencies or requirements for using these hooks, as the implementation of each hook is contained in its respective file.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/index.md"}}],["1449",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useAttributes.ts)\n\nThe code is a React hook that fetches data from a Reservoir API endpoint and returns the response along with some additional metadata. The hook takes in three optional parameters: `collection`, `chainId`, and `swrOptions`. \n\nThe `collection` parameter is a string that specifies the name of the collection to fetch data from. If `collection` is not provided, the `path` variable will be set to `null`. \n\nThe `chainId` parameter is an integer that specifies the ID of the chain to fetch data from. If `chainId` is not provided, the `chain` variable will be set to the current chain of the Reservoir client. \n\nThe `swrOptions` parameter is an object that contains options for the `useSWR` hook, which is used to fetch the data. \n\nThe hook first gets the Reservoir client using the `useReservoirClient` hook. It then constructs the API endpoint URL using the `collection` and `chain` variables. If `collection` is not provided, the `pathname` variable will be set to `null`. \n\nThe `path` variable is then constructed using the `pathname` variable and the `URL` constructor. If `collection` is not provided, `path` will be set to `null`. \n\nThe `useSWR` hook is then called with the `path` variable, along with the Reservoir API key and version. The `revalidateOnMount` option is set to `true` by default, and any additional options passed in through `swrOptions` are merged with the default options. \n\nThe hook then returns an object containing the response data, the `attributes` array from the response data, the `mutate` function for updating the data, any errors that occurred during the fetch, and a boolean indicating whether the hook is currently fetching data. \n\nThis hook can be used in a larger project to fetch data from a Reservoir API endpoint and use that data to render components or update state. For example, the `attributes` array returned by the hook could be mapped over to render a list of attributes for a given collection. \n\nExample usage:\n\n```\nimport useReservoirAttributes from './useReservoirAttributes'\n\nfunction MyComponent() {\n const { data, error, isValidating } = useReservoirAttributes('myCollection', 1)\n\n if (error) {\n return Error: {error.message}
\n }\n\n if (!data) {\n return Loading...
\n }\n\n return (\n - \n {data.map((attribute) => (\n
- {attribute.name} \n ))}\n
\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `Cart` and `CartContext` imports?\n- The `Cart` and `CartContext` imports are likely part of a larger context system for managing a shopping cart in an e-commerce application.\n\n2. What is the `useSyncExternalStore` hook doing?\n- The `useSyncExternalStore` hook is likely syncing the local state of the `cart` object with an external data source, such as a server or database.\n\n3. What is the purpose of the `selector` argument in the `useCart` function?\n- The `selector` argument is likely a function that selects specific data from the `Cart` object, allowing the returned object to only expose the necessary data and methods for the component using the hook.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useCart.md"}}],["1452",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useChainCurrency.ts)\n\nThe code is a utility function that is used to retrieve the native currency of a given blockchain network. The function takes an optional parameter `chainId` which is the unique identifier of the blockchain network. If the `chainId` is not provided, the function retrieves the current chain from the `reservoir-sdk` library. \n\nThe function then searches for the chain with the given `chainId` in the list of chains provided by the `useNetwork()` hook from the `wagmi` library. If the chain is not found, the function returns the native currency of the first chain in the list. \n\nIf the chain is found, the function checks if the chain is an Ethereum chain by checking if the chain id is in the list of Ethereum chain ids. If the chain is an Ethereum chain or if the chain does not have a native currency, the function returns the default Ethereum currency object with the name 'Ethereum', symbol 'ETH', and 18 decimals. If the chain is not an Ethereum chain and has a native currency, the function returns the native currency object of the chain.\n\nThis function can be used in a larger project to retrieve the native currency of a given blockchain network. For example, if a user wants to display the native currency of a selected blockchain network in a user interface, this function can be used to retrieve the currency information and display it to the user. \n\nExample usage:\n\n```\nimport getChainCurrency from 'zoo'\n\nconst chainId = 1 // Example chain id\nconst currency = getChainCurrency(chainId)\n\nconsole.log(currency) // { name: 'Ethereum', symbol: 'ETH', decimals: 18, address: '0x0000000000000000000000000000000000000000', chainId: 1 }\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a function `getChainCurrency` that returns the native currency of a specified or current chain, and a default function that calls `getChainCurrency` with the current network's chains.\n\n2. What external libraries or dependencies does this code use?\n- This code imports `@reservoir0x/reservoir-sdk`, `ethers`, and `wagmi`.\n\n3. What is the expected input and output of the `getChainCurrency` function?\n- The `getChainCurrency` function expects an array of `Chain` objects and an optional `chainId` number as input, and returns an object with properties `name`, `symbol`, `decimals`, `address`, and `chainId`. If the specified chain is not found or does not have a native currency, it returns the default Ethereum currency object.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useChainCurrency.md"}}],["1453",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useCoinConversion.ts)\n\nThis code is a function that retrieves the current price of a cryptocurrency from the CoinGecko API. It uses the React library and the SWR library to handle data fetching and caching. The function takes in three optional parameters: `vs_currency`, `symbols`, and `id`. \n\nThe `vs_currency` parameter specifies the currency in which the price should be returned (e.g. USD, EUR). The `symbols` parameter specifies the cryptocurrency symbol(s) for which the price should be returned (e.g. BTC, ETH). If multiple symbols are provided, they should be separated by commas. The `id` parameter specifies the cryptocurrency ID(s) for which the price should be returned. If `id` is not provided, it will be derived from the `symbols` parameter using a mapping provided in the `coinIds` property of the `coinGecko` object in the `ProviderOptionsContext`.\n\nThe function first retrieves the `coinGecko` object from the `ProviderOptionsContext` using the `useContext` hook. It then creates a base URL for the API request using the `createBaseUrl` function. If a proxy is specified in the `coinGecko` object, it will be used in the URL. Otherwise, if an API key is specified, it will be included in the URL. If neither a proxy nor an API key is specified, the default CoinGecko API URL will be used.\n\nIf multiple symbols are provided, the `id` parameter is derived by mapping each symbol to its corresponding ID in the `coinIds` property of the `coinGecko` object and joining them with commas. If only one symbol is provided, the `id` parameter is derived from the `coinIds` property of the `coinGecko` object.\n\nThe function then uses the `useSWR` hook to fetch the data from the API. If `vs_currency` is provided, the API request URL will include the `vs_currency`, `symbols`, and `id` parameters. Otherwise, the URL will be `null`. The `refreshInterval` option is set to 5 minutes to refresh the data periodically.\n\nFinally, if the data is successfully retrieved and contains a `current_price` property, the function returns the `current_price`. Otherwise, it returns `null`.\n\nThis function can be used in a larger project to display the current price of a cryptocurrency in a user interface. For example, it could be used in a dashboard that displays real-time cryptocurrency prices. Here is an example usage of the function:\n\n```\nimport useCurrentPrice from './useCurrentPrice'\n\nfunction CryptoPrice({ symbol }) {\n const price = useCurrentPrice('USD', symbol)\n return Shopping Cart
\n- \n {data.items.map((item) => (\n
- \n {item.name} - {item.price}\n \n \n ))}\n
Total: {data.total}
\n \n{symbol}: {price}
\n}\n\nfunction CryptoDashboard() {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n This code is a function that retrieves current prices for cryptocurrencies using the CoinGecko API and returns the price of the first coin in the response data.\n\n2. What parameters does the function take?\n The function takes three optional parameters: `vs_currency` (a string representing the currency to convert the price to), `symbols` (a string or comma-separated list of cryptocurrency symbols), and `id` (a string representing the cryptocurrency ID).\n\n3. What is the role of the `useSWR` hook in this code?\n The `useSWR` hook is used to fetch data from the CoinGecko API and cache the response. It takes a URL as its first argument and an options object as its third argument, which includes a `refreshInterval` property that determines how often the data should be refreshed.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useCoinConversion.md"}}],["1454",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useCollectionActivity.ts)\n\nThis code exports a function that retrieves collection activity data from a Reservoir API endpoint. The function takes in three optional parameters: `options`, `swrOptions`, and `chainId`. \n\n`options` is an object that contains query parameters for the API request. If `options` is not provided or does not contain any of the required parameters (`collection`, `collectionsSetId`, or `community`), the function returns null. Otherwise, the function constructs a URL for the API request using the `baseApiUrl` property of the Reservoir client and the provided query parameters. \n\n`swrOptions` is an object that contains configuration options for the SWR library, which is used to handle caching and revalidation of the API response. By default, the function revalidates the API response on mount and does not revalidate the first page. \n\n`chainId` is an optional parameter that specifies the ID of the Reservoir chain to use for the API request. If `chainId` is provided, the function searches for the corresponding chain in the Reservoir client's `chains` array. Otherwise, the function uses the current chain of the Reservoir client. \n\nThe function then calls the `useInfiniteApi` hook from the `./` module, passing in a callback function that constructs the API request URL and returns an array containing the URL, Reservoir API key, and client version. The `useInfiniteApi` hook handles fetching and caching the API response, and returns an object containing the response data and metadata. \n\nFinally, the function extracts the `activities` array from the response data and returns an object containing the `activities` array and the response metadata. \n\nThis function can be used to retrieve collection activity data from a Reservoir API endpoint in a React application. For example, the function could be called in a `useEffect` hook to fetch and display the collection activity data when a component mounts. \n\nExample usage:\n\n```\nimport useCollectionActivity from './useCollectionActivity'\n\nfunction CollectionActivity() {\n const { data, error } = useCollectionActivity({ collection: 'myCollection' })\n\n if (error) {\n return Error: {error.message}
\n }\n\n return (\n - \n {data.map(activity => (\n
- {activity.title} \n ))}\n
Error: {error.message}
\n if (!data) return Loading...
\n\n return (\n \n {data.map(collection => (\n
\n )\n}\n```\n## Questions: \n 1. What does this code do?\n- This code exports a function that retrieves collections data from a Reservoir API endpoint using SWR and returns it in a paginated format.\n\n2. What are the parameters of the exported function and what do they do?\n- The function takes in three optional parameters: `options`, `swrOptions`, and `chainId`. `options` is an object that contains query parameters for the API request. `swrOptions` is an object that contains options for the SWR hook. `chainId` is an optional parameter that specifies the ID of the chain to use for the API request.\n \n3. What is the purpose of the `useInfiniteApi` and `useReservoirClient` hooks?\n- The `useInfiniteApi` hook is used to fetch data from the Reservoir API endpoint in a paginated format. The `useReservoirClient` hook is used to retrieve the Reservoir client instance, which is used to get the base API URL and API key for the API request.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useCollections.md"}}],["1456",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useCopyToClipboard.ts)\n\nThe code above defines a custom React hook called `useCopyToClipboard`. This hook is designed to allow users to copy text to their clipboard and provides a visual cue to indicate that the copy was successful. \n\nThe hook takes an optional parameter called `successTime` which is set to 1000 milliseconds (1 second) by default. This parameter determines how long the visual cue indicating a successful copy will be displayed. \n\nThe hook uses the `useState` hook from React to create a state variable called `copied` which is initially set to `false`. The `copy` function is defined within the hook and takes an optional parameter called `content` which is the text to be copied to the clipboard. \n\nThe `copy` function uses the `navigator.clipboard.writeText` method to write the `content` to the clipboard. If the `copied` state variable is `false`, the `setCopied` function is called to update the state variable to `true`. A `setTimeout` function is then used to set the `copied` state variable back to `false` after the `successTime` has elapsed. \n\nThe `useCopyToClipboard` hook returns an object with two properties: `copy` and `copied`. The `copy` property is a reference to the `copy` function defined within the hook. The `copied` property is a boolean value that indicates whether or not the text has been successfully copied to the clipboard. \n\nThis hook can be used in a larger project to provide users with an easy way to copy text to their clipboard. For example, it could be used in a form where users need to copy a generated password or a shareable link. \n\nHere is an example of how the `useCopyToClipboard` hook could be used in a React component:\n\n```\nimport React from 'react'\nimport useCopyToClipboard from './useCopyToClipboard'\n\nconst MyComponent = () => {\n const { copy, copied } = useCopyToClipboard()\n\n const handleCopy = () => {\n copy('Text to be copied to clipboard')\n }\n\n return (\n {collection.name}
\n ))}\n \n \n \n {copied &&
\n )\n}\n\nexport default MyComponent\n``` \n\nIn this example, the `useCopyToClipboard` hook is called and the `copy` function is passed the text to be copied to the clipboard. The `copied` state variable is used to conditionally render a message indicating that the text has been successfully copied to the clipboard.\n## Questions: \n 1. What does this code do?\n This code exports a custom hook called `useCopyToClipboard` that allows users to copy content to their clipboard and sets a `copied` state to true for a specified amount of time.\n\n2. What is the purpose of the `successTime` parameter?\n The `successTime` parameter is an optional parameter that specifies the amount of time in milliseconds that the `copied` state should remain true after content has been successfully copied to the clipboard.\n\n3. What is the purpose of the `useState` hook?\n The `useState` hook is used to create a state variable called `copied` that is initially set to `false`. This state variable is used to determine whether or not content has been successfully copied to the clipboard and to set the `copied` property of the returned object.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useCopyToClipboard.md"}}],["1457",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useDynamicTokens.ts)\n\nThe code is a function that returns a modified version of the `useTokens` hook from the `./` module. The `useTokens` hook is used to fetch token data from a remote API and return it to the calling component. The modified version of the hook adds dynamic pricing information to the token data based on the contents of the user's shopping cart.\n\nThe function takes three optional parameters: `options`, `swrOptions`, and `chainId`. `options` is an object that can be used to configure the behavior of the `useTokens` hook. `swrOptions` is an object that can be used to configure the behavior of the `swr` library, which is used by the `useTokens` hook to cache the token data. `chainId` is an optional parameter that specifies the ID of the blockchain network to use when fetching token data.\n\nThe function first calls the original `useTokens` hook to fetch the token data. It then uses the `useCart` hook to fetch the user's shopping cart data. The shopping cart data is used to modify the token data in two ways: first, it adds an `isInCart` property to each token object that indicates whether the token is already in the user's cart; second, it modifies the `floorAsk` price of each token object to reflect the user's position in any dynamic pricing pools that the token is a part of.\n\nThe modified token data is returned to the calling component along with the original `useTokens` hook's return values and the `useCart` hook's cart actions. The calling component can use this data to display token information to the user and allow them to add or remove tokens from their cart.\n\nHere is an example of how the modified `useTokens` hook might be used in a larger project:\n\n```jsx\nimport useDynamicTokens from './zoo'\n\nfunction TokenList() {\n const { data: tokens, addToCart } = useDynamicTokens()\n\n return (\n Text copied to clipboard!
}\n- \n {tokens.map((token) => (\n
- \n
{token.name}
\n{token.description}
\nPrice: {token.market.floorAsk.price.amount}
\n {token.isInCart ? (\n \n ) : (\n \n )}\n \n ))}\n
\n
\n )\n}\n\nexport default MyComponent\n```\n\nIn the example above, `MyComponent` takes an `initialCount` prop that is used as the default value for the state. `useFallbackState` is used to create the state value, and `setCount` is used to update the state when the button is clicked. \n\nOverall, `useFallbackState` is a simple but useful hook that can help ensure that a component always has a valid state value to work with.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom React hook called `useFallbackState` that can be used to set and manage state in a component.\n\n2. What is the `useStateType` type used for?\n The `useStateType` type is used to define the type of the state that is managed by the `useFallbackState` hook. It is a tuple that contains the current state value and a function to update the state.\n\n3. How does the `useFallbackState` hook work?\n The `useFallbackState` hook takes in a default value and an optional `useStateType` tuple. If the `useStateType` tuple is provided, it is returned as is. Otherwise, the hook initializes a new state using the default value and returns it. This allows components to use a fallback state if a custom state is not provided.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useFallbackState.md"}}],["1459",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useInfiniteApi.ts)\n\nThis code exports a custom hook that uses the `useSWRInfinite` hook from the `swr` library to fetch data in a paginated manner. The hook takes in three arguments: `getKey`, `options`, and `limit`. \n\n`getKey` is a function that takes in two arguments: `pageIndex` and `previousPageData`. It returns an array of parameters that will be used to fetch the data for the current page. `pageIndex` is the index of the current page, starting from 0. `previousPageData` is an array of the data from the previous page. \n\n`options` is an object that contains configuration options for the `useSWRInfinite` hook. \n\n`limit` is an optional argument that specifies the maximum number of items to fetch per page. \n\nThe hook returns an object that contains the same properties as the `useSWRInfinite` hook, as well as additional properties: `hasNextPage`, `isFetchingInitialData`, `isFetchingPage`, `resetCache`, and `fetchNextPage`. \n\n`hasNextPage` is a boolean that indicates whether there are more pages to fetch. It is determined by checking if the current page has the maximum number of items specified by `limit`, or if the current page has a continuation token. \n\n`isFetchingInitialData` is a boolean that indicates whether the initial data is being fetched. \n\n`isFetchingPage` is a boolean that indicates whether the current page is being fetched. \n\n`resetCache` is a function that resets the cache and clears the list of fetched keys. \n\n`fetchNextPage` is a function that fetches the next page of data. It can only be called if `hasNextPage` is true and `isFetchingPage` is false. \n\nThis hook can be used in a larger project to fetch data in a paginated manner and display it to the user. For example, it can be used to fetch a list of items from an API and display them in a table with pagination. \n\nExample usage:\n\n```\nimport usePaginatedData from './usePaginatedData'\n\nfunction MyComponent() {\n const { data, error, hasNextPage, isFetchingInitialData, isFetchingPage, fetchNextPage, resetCache } = usePaginatedData(\n (pageIndex, previousPageData) => {\n // return an array of parameters to fetch the data for the current page\n },\n {\n // configuration options for the useSWRInfinite hook\n },\n 10 // fetch 10 items per page\n )\n\n if (error) return Count: {count}
\n \nError
\n if (!data) return Loading...
\n\n return (\n \n {data.map(item => (\n // render each item\n ))}\n {hasNextPage && (\n \n )}\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `useSWRInfinite` hook and how is it used in this code?\n- The `useSWRInfinite` hook is used to fetch data in a paginated manner. It takes a function that returns the data for a given page index and previous page data, and returns an object with properties like `data`, `error`, `size`, `setSize`, etc.\n\n2. What is the significance of the `limit` parameter in the function signature?\n- The `limit` parameter is an optional parameter that specifies the maximum number of items to be returned per page. It is used to determine whether there are more pages to fetch based on the length of the collections array in the last page of data.\n\n3. What is the purpose of the `resetCache` function and how is it used?\n- The `resetCache` function is used to reset the cache of the `useSWRInfinite` hook and clear the list of keys that have been fetched so far. It is called when the user wants to start fetching data from the beginning, and it returns a promise that resolves when the cache has been reset.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useInfiniteApi.md"}}],["1460",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useListingPreapprovalCheck.ts)\n\nThe code is a React hook that lists a token on multiple marketplaces. It takes in an array of `Marketplace` objects, a `tokenId` string, and a `collectionId` string as arguments. The `Marketplace` object has an `orderbook` property and an `orderKind` property. The `tokenId` and `collectionId` are used to create a token string. \n\nThe hook uses the `useEffect` hook to listen for changes in the `client`, `signer`, `tokenId`, `collectionId`, and `marketplaces` variables. If all of these variables are defined and the `marketplaces` array is not empty, the hook creates an array of `Listings` objects using the `marketplaces` array. Each `Listing` object has a `token` property that is set to the token string created from the `tokenId` and `collectionId` arguments, a `weiPrice` property that is set to a fixed value of 100000000000000000, an `orderbook` property that is set to the `orderbook` property of the corresponding `Marketplace` object, and an `orderKind` property that is set to the `orderKind` property of the corresponding `Marketplace` object.\n\nThe hook then calls the `listToken` method of the `client.actions` object with the `listings` array, `signer`, and `precheck` set to `true`. The `listToken` method returns a promise that resolves to an array of `Execute` objects. The hook then searches for the first `Execute` object that has a `kind` property set to `'transaction'` and an `items` property that is not empty. If such an object is found, the hook sets the `unapprovedMarketplaces` state to an array of `Marketplace` objects that have not been approved for listing on the corresponding marketplaces. The hook then sets the `isFetching` state to `false`. If no such object is found, the hook checks if the `unapprovedMarketplaces` state is not empty and sets it to an empty array if it is not. The hook then sets the `isFetching` state to `false`.\n\nIf any of the `client`, `signer`, `tokenId`, `collectionId`, or `marketplaces` variables change and the `unapprovedMarketplaces` state is not empty, the hook sets the `unapprovedMarketplaces` state to an empty array.\n\nThe hook returns an object with a `data` property set to the `unapprovedMarketplaces` state and an `isFetching` property set to the `isFetching` state.\n\nThis hook can be used in a larger project to list a token on multiple marketplaces and keep track of the marketplaces that have not been approved for listing. The `unapprovedMarketplaces` state can be used to display a list of marketplaces that need approval, and the `isFetching` state can be used to display a loading spinner while the token is being listed. \n\nExample usage:\n\n```\nimport useListToken from './useListToken'\nimport { marketplaces } from './marketplaces'\n\nfunction MyComponent({ tokenId, collectionId }) {\n const { data: unapprovedMarketplaces, isFetching } = useListToken(marketplaces, tokenId, collectionId)\n\n return (\n \n {isFetching &&
\n )\n}\n```\n## Questions: \n 1. What does this code do?\nThe code exports a function that takes in an array of marketplaces, a tokenId, and a collectionId as arguments. It then uses these arguments to create listings and list a token on the marketplaces. The function returns an object with the unapproved marketplaces and a boolean indicating whether the function is currently fetching data.\n\n2. What external dependencies does this code rely on?\nThe code relies on several external dependencies, including React, a custom hook called useReservoirClient, a custom type called Marketplace, a custom type called Listings, a custom hook called useSigner, and a library called @reservoir0x/reservoir-sdk.\n\n3. What is the purpose of the useEffect hook in this code?\nThe useEffect hook is used to trigger the listing of a token on the marketplaces when certain dependencies change. These dependencies include the signer, the client, the tokenId, the collectionId, and the marketplaces array. When these dependencies change, the useEffect hook creates listings for the token on each marketplace and then lists the token on the marketplaces. The hook also sets the unapprovedMarketplaces state based on the response from the listing API.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useListingPreapprovalCheck.md"}}],["1461",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useListings.ts)\n\nThis code exports a function that retrieves a list of asks (sell orders) from a Reservoir API endpoint. The function takes in three parameters: `options`, `swrOptions`, and `enabled`, as well as an optional `chainId`. \n\n`options` is an object that contains query parameters to be sent with the API request. `swrOptions` is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. `enabled` is a boolean that determines whether the API request should be made or not. `chainId` is an optional parameter that specifies which blockchain network to make the API request on.\n\nThe function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines which blockchain network to make the API request on based on the `chainId` parameter. If `chainId` is not specified, it defaults to the current chain of the Reservoir client.\n\nThe function then uses the `useInfiniteApi` hook to make the API request. This hook takes in a function that generates the API request URL and returns an array containing the URL, API key, and client version. The function also handles pagination by passing in a `pageIndex` parameter and `previousPageData` object. If pagination is not enabled or there is no more data to fetch, the function returns null.\n\nThe API response is then flattened and the `orders` property of each page is extracted into a single array of listings. This array is returned along with the SWR response object.\n\nThis function can be used to retrieve a list of asks from the Reservoir API and display them in a UI component. The `options` parameter can be used to filter the results based on various criteria, such as token ID or price. The `swrOptions` parameter can be used to customize the caching and revalidation behavior of the response. The `enabled` parameter can be used to conditionally fetch data based on user input or other factors. The `chainId` parameter can be used to fetch data from a specific blockchain network.\n## Questions: \n 1. What is the purpose of the `useReservoirClient` function and how is it used in this code?\n- A smart developer might ask what the `useReservoirClient` function does and how it is used in this code. \n- `useReservoirClient` is a custom hook that returns a client object with methods for interacting with a Reservoir API. It is used to retrieve the current chain and base API URL for the client.\n\n2. What is the `useInfiniteApi` function and how is it used in this code?\n- A smart developer might ask what the `useInfiniteApi` function does and how it is used in this code. \n- `useInfiniteApi` is a custom hook that fetches data from an API endpoint using SWR (React's data fetching library). It is used to fetch data for the `Asks` type and `AsksQuery` type.\n\n3. What is the purpose of the `listings` variable and how is it generated?\n- A smart developer might ask what the `listings` variable is used for and how it is generated. \n- `listings` is an array of orders retrieved from the API endpoint. It is generated by flattening the `orders` array from each page of data returned by the `useInfiniteApi` hook. If there is no data, it defaults to an empty array.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useListings.md"}}],["1462",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useMarketplaces.ts)\n\nThe code is a React hook that fetches and processes data about marketplaces that support a given collection. The hook takes in four optional parameters: `collectionId`, `listingEnabledOnly`, `royaltyBps`, and `chainId`. It returns a tuple containing an array of `Marketplace` objects and a function to update that array.\n\nThe `Marketplace` type is defined as an intersection of the first element of the `marketplaces` array in the response schema and an object with three additional properties: `isSelected`, `price`, and `truePrice`. The `isSelected` property is a boolean that indicates whether the marketplace is currently selected. The `price` and `truePrice` properties are numbers or strings that represent the price of the item in the marketplace and the true price after fees, respectively. The `fee` property is an object with two properties: `bps` and `percent`, which represent the fee in basis points and percentage, respectively.\n\nThe hook uses the `useReservoirClient` hook from another file to get a client object that contains information about the Reservoir API. It then uses the `useSWR` hook to fetch data about the supported marketplaces for the given collection. If `collectionId` is not provided, the hook returns an empty array.\n\nOnce the data is fetched, the hook processes it by filtering out marketplaces that do not have listing enabled or have an orderbook of 'x2y2' (an internal Reservoir orderbook). It then updates the `Marketplace` objects in the array by setting their `price`, `truePrice`, and `isSelected` properties, and calculating their fees based on the orderbook and `royaltyBps` parameters. If the orderbook is 'reservoir', the hook also sets the `name`, `domain`, and `imageUrl` properties based on local data obtained from the `getLocalMarketplaceData` function.\n\nFinally, the hook returns the updated `marketplaces` array and a function to update it. This hook can be used in a larger project to display a list of marketplaces that support a given collection and allow the user to select a marketplace to purchase the item. The `listingEnabledOnly` parameter can be used to filter out marketplaces that do not have listing enabled, and the `royaltyBps` parameter can be used to calculate the fees for marketplaces that use the OpenSea orderbook. The `chainId` parameter can be used to specify the chain to use for fetching the data.\n## Questions: \n 1. What is the purpose of the `useSWR` hook and how is it used in this code?\n- The `useSWR` hook is used for data fetching and caching. It takes a key and a fetcher function as arguments, and returns the data and a revalidation function. In this code, it is used to fetch data from a supported marketplaces API endpoint for a given collection.\n\n2. What is the significance of the `Marketplace` type and how is it used in this code?\n- The `Marketplace` type is a custom type that extends a schema from the `@reservoir0x/reservoir-sdk` library. It adds additional properties such as `isSelected`, `price`, `truePrice`, and `fee`. It is used to define the shape of the data returned from the API endpoint and to manipulate and update the data in the `useEffect` hook.\n\n3. What is the purpose of the `getLocalMarketplaceData` function and how is it used in this code?\n- The `getLocalMarketplaceData` function is a custom function that retrieves data from a local JSON file. It is used to update the `name`, `domain`, `fee`, and `imageUrl` properties of a `Marketplace` object if the `orderbook` property is equal to `'reservoir'`. This allows for customization of the marketplace data based on the local environment.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useMarketplaces.md"}}],["1463",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useMediaQuery.ts)\n\nThe code defines a custom React hook called `useMediaQuery` that allows developers to check if a given CSS media query matches the current viewport. The hook takes a single argument, `query`, which is a string representing the media query to be evaluated.\n\nThe hook uses the `useState` and `useEffect` hooks from React to manage state and side effects. The `useState` hook initializes a boolean value `matches` to `false`. The `useEffect` hook is used to subscribe to changes in the media query and update the `matches` state accordingly.\n\nInside the `useEffect` hook, the `window.matchMedia` method is used to create a new `MediaQueryList` object that represents the given `query`. The `matches` property of the `MediaQueryList` object is then compared to the current value of `matches` state. If they are different, the `setMatches` function is called to update the state.\n\nA listener function is also defined that updates the `matches` state whenever the `change` event is fired on the `MediaQueryList` object. This listener is added to the `MediaQueryList` object using the `addEventListener` method. Finally, the `useEffect` hook returns a cleanup function that removes the listener using the `removeEventListener` method.\n\nThe `useMediaQuery` hook is intended to be used in other React components to conditionally render content based on the result of the media query. For example, a component could use the hook to determine if the viewport is wide enough to display a sidebar, and only render the sidebar if the media query matches.\n\nHere is an example usage of the `useMediaQuery` hook:\n\n```\nimport useMediaQuery from './useMediaQuery'\n\nconst MyComponent = () => {\n const isWide = useMediaQuery('(min-width: 768px)')\n\n return (\n \n
\n )}\n Unapproved Marketplaces:
\n- \n {unapprovedMarketplaces.map((marketplace) => (\n
- {marketplace.name} \n ))}\n
\n {isWide ?
\n )\n}\n```\n\nIn this example, the `MyComponent` component uses the `useMediaQuery` hook to check if the viewport width is at least 768 pixels. If it is, the `Sidebar` component is rendered, otherwise it is not. The `Content` component is always rendered.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom React hook called `useMediaQuery` that returns a boolean value indicating whether a given media query matches the current viewport.\n\n2. How does this code handle changes to the media query?\n The code sets up a listener for changes to the media query using `addEventListener` and updates the `matches` state using `setMatches` whenever the query matches change.\n\n3. What dependencies does this code have?\n This code imports `useEffect` and `useState` from the `react` library, indicating that it is intended to be used within a React application.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useMediaQuery.md"}}],["1464",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useModelViewer.ts)\n\nThis code defines a custom React hook called `useModelViewer` that enables the use of the Google Model Viewer library in a React application. The hook takes a boolean `enabled` parameter that determines whether or not to enable the Model Viewer functionality. \n\nThe `useEffect` hook is used to manage the lifecycle of the Model Viewer library. When the `enabled` parameter is true and the `modelViewerInjected` flag is false, the `importScript` function is called to dynamically load the Model Viewer library from the specified URL. The `importScript` function creates a new `script` element and appends it to the `body` of the HTML document. \n\nThe `importScript` function checks for the existence of the `document` object before creating the `script` element to avoid errors in non-browser environments. The `script` element is set to load asynchronously and its `type` attribute is set to `'module'` to indicate that it is an ES6 module. \n\nOnce the Model Viewer library is loaded, the `modelViewerInjected` flag is set to true to prevent unnecessary re-loading of the library. The `useEffect` hook is dependent on the `enabled` parameter, so any changes to this parameter will trigger the hook to re-run and potentially load or unload the Model Viewer library. \n\nThis hook can be used in a larger React project to enable the display of 3D models using the Google Model Viewer library. For example, a product catalog website could use this hook to display interactive 3D models of products to customers. \n\nExample usage:\n\n```\nimport React, { useState } from 'react'\nimport useModelViewer from './useModelViewer'\n\nconst ProductDetail = ({ product }) => {\n const [modelViewerEnabled, setModelViewerEnabled] = useState(false)\n useModelViewer(modelViewerEnabled)\n\n return (\n \n
\n )\n}\n```\n\nIn this example, the `useModelViewer` hook is used to enable or disable the Model Viewer library based on the state of the `modelViewerEnabled` variable. When the user clicks the button, the `modelViewerEnabled` state is toggled and the Model Viewer library is either loaded or unloaded. If the library is enabled, a `model-viewer` element is rendered with the URL of the 3D model and alt text.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom React hook called `useModelViewer` that conditionally injects a script for the Google Model Viewer library into the document if the hook is enabled.\n\n2. What is the significance of the `modelViewerInjected` variable?\n The `modelViewerInjected` variable is used to ensure that the script for the Google Model Viewer library is only injected once, even if the `useModelViewer` hook is called multiple times.\n\n3. What is the `importScript` function doing?\n The `importScript` function creates a new `script` element with the specified `src` URL and appends it to the `body` of the document. The `type` attribute is set to `'module'` to indicate that the script is a JavaScript module.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useModelViewer.md"}}],["1465",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useMutationObservable.ts)\n\nThe code above defines a custom React hook called `useMutationObservable`. This hook is used to observe changes to a specified DOM element and execute a callback function when a change occurs. \n\nThe hook takes three arguments: `callback`, `el`, and `options`. The `callback` argument is a function that will be executed when a mutation occurs. The `el` argument is an optional parameter that specifies the DOM element to observe. The `options` argument is also optional and is used to configure the `MutationObserver` instance that will be created.\n\nThe hook uses the `useState` and `useEffect` hooks from React. The `useState` hook is used to store the `MutationObserver` instance, while the `useEffect` hook is used to create and manage the `MutationObserver` instance.\n\nWhen the hook is called, it first checks if the `observer` state variable is already set. If it is, the existing observer is disconnected. This is done to ensure that only one observer is active at a time.\n\nNext, the hook checks if the `el` argument is defined and if the `MutationObserver` API is available in the current environment. If either of these conditions is not met, the hook returns early and does not create an observer.\n\nIf the `el` argument is defined and the `MutationObserver` API is available, a new `MutationObserver` instance is created with the specified `callback` function and `options`. The observer is then attached to the specified `el` element using the `observe` method. Finally, the observer instance is stored in the `observer` state variable using the `setObserver` function.\n\nThe `useEffect` hook also returns a cleanup function that is used to disconnect the observer when the component using the hook is unmounted.\n\nThis hook can be used in a larger project to monitor changes to specific DOM elements and trigger actions based on those changes. For example, it could be used to detect changes to a form input and update the state of a parent component accordingly. Here is an example usage of the hook:\n\n```\nimport useMutationObservable from './useMutationObservable'\n\nconst MyComponent = () => {\n const [value, setValue] = useState('')\n\n const handleMutation = () => {\n // Update state based on mutation\n }\n\n const inputRef = useRef(null)\n\n useMutationObservable(handleMutation, inputRef.current, { attributes: true })\n\n return (\n setValue(e.target.value)} ref={inputRef} />\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom React hook called `useMutationObservable` which sets up a `MutationObserver` to watch for changes to a specified DOM element and calls a callback function when changes occur.\n\n2. What arguments does the `useMutationObservable` function take?\n The `useMutationObservable` function takes three optional arguments: a `MutationCallback` function to be called when changes occur, an optional `HTMLElement` to observe for changes, and optional `MutationObserverInit` options to configure the observer.\n\n3. What does the `useEffect` hook do in this code?\n The `useEffect` hook sets up and tears down the `MutationObserver` based on changes to the `el`, `callback`, and `options` inputs. It also returns a cleanup function to disconnect the observer when the component unmounts.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useMutationObservable.md"}}],["1466",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useOnChainRoyalties.ts)\n\nThe code is a React hook that retrieves royalty information for a given NFT (non-fungible token) from the Manifold smart contract. The hook takes in several props, including the contract address, token ID, value, and chain ID. \n\nThe code first imports necessary dependencies, including the `wagmi` library for interacting with Ethereum, `ethers` for working with Ethereum data types, and a custom hook called `useChainCurrency` for retrieving the currency used on the specified blockchain. \n\nThe `MANIFOLD_ABI` constant defines the ABI (application binary interface) for the Manifold smart contract, which includes a single function called `getRoyaltyView`. This function takes in the token address, token ID, and value, and returns two arrays: one containing the addresses of the royalty recipients, and another containing the corresponding amounts of royalties to be paid to each recipient. \n\nThe hook then determines the correct Manifold contract address based on the specified chain ID, and retrieves the currency used on the blockchain using the `useChainCurrency` hook. If a value is not provided, the default value of 1 is used. \n\nFinally, the hook calls the `useContractRead` hook from the `wagmi` library, passing in the necessary arguments to retrieve the royalty information from the Manifold contract. The `enabled` prop is used to determine whether the hook should be executed, based on whether all required props are present. The `cacheTime` prop specifies how long the result should be cached before being refreshed. \n\nThis hook can be used in a larger project to display royalty information for a given NFT, such as the percentage of royalties that will be paid to each recipient. An example usage of this hook might look like:\n\n```\nimport useRoyaltyInfo from './useRoyaltyInfo'\n\nfunction NFTDetails({ contract, tokenId }) {\n const royaltyInfo = useRoyaltyInfo({ contract, tokenId, enabled: true })\n\n return (\n {product.name}
\n \n {modelViewerEnabled && (\n\n
\n )\n}\n```\n\nThis component would display the royalty information for the specified NFT, including the addresses of the royalty recipients and the corresponding percentages of royalties to be paid to each recipient.\n## Questions: \n 1. What is the purpose of this code?\n- This code is a React hook that reads data from a smart contract on the Ethereum blockchain. Specifically, it retrieves royalty information for a given NFT (non-fungible token) and returns the recipients and amounts of the royalties.\n\n2. What external dependencies does this code have?\n- This code imports several modules from the 'wagmi' and 'ethers' libraries, as well as a custom hook called 'useChainCurrency' from a local file. It also relies on the Ethereum blockchain to retrieve data from a smart contract.\n\n3. What are the possible values for the 'chainId' parameter?\n- The 'chainId' parameter is an integer that specifies which Ethereum network to interact with. The possible values are 1 (mainnet), 5 (goerli testnet), and 137 (Polygon/Matic network).","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useOnChainRoyalties.md"}}],["1467",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useOwnerListings.ts)\n\nThe code in this file is a function that exports a hook for retrieving listings from a decentralized exchange. The function takes in three optional parameters: a query object, SWR configuration options, and a chain ID. \n\nThe function first imports the `useListings` hook from another file in the same directory and the `useAccount` hook from the `wagmi` library. It also imports the `paths` object from the `@reservoir0x/reservoir-sdk` library and the `SWRConfiguration` type from the `swr` library. \n\nThe function then defines a `queryOptions` object with a `maker` property set to the user's address retrieved from the `useAccount` hook. If a `query` parameter is passed in, the function merges it with the `queryOptions` object using the spread operator. \n\nFinally, the function returns the result of calling the `useListings` hook with the `queryOptions`, `swrOptions`, and a boolean indicating whether the user's address is defined. The `chainId` parameter is also passed to the `useListings` hook. \n\nThis hook can be used in a larger project to retrieve listings from a decentralized exchange and display them to the user. Here is an example of how the hook can be used:\n\n```\nimport useExchangeListings from './useExchangeListings'\n\nfunction ExchangeListings() {\n const { data, error } = useExchangeListings()\n\n if (error) return Royalty Information
\n {royaltyInfo.loading &&Loading...
}\n {royaltyInfo.error &&Error: {royaltyInfo.error.message}
}\n {royaltyInfo.data && (\n- \n {royaltyInfo.data.recipients.map((recipient, i) => (\n
- \n {recipient}: {royaltyInfo.data.amounts[i]}%\n \n ))}\n
Error: {error.message}
\n if (!data) return Loading...
\n\n return (\n - \n {data.map(listing => (\n
- {listing.name} \n ))}\n
\n
\n )\n}\n\nexport default Post\n```\n\nIn this example, the `TimeSince` component is used to display the time elapsed since the post was made. The `timestamp` prop is passed to the component to calculate the relative time.\n## Questions: \n 1. What does this code do?\n This code exports a function that takes in a timestamp and returns a string representing the time since that timestamp in relative time (e.g. \"2 hours ago\").\n\n2. What libraries are being used in this code?\n This code imports two libraries: `react` and `dayjs`. It also imports a specific plugin from `dayjs` called `relativeTime`.\n\n3. What is the purpose of the `useEffect` hook in this code?\n The `useEffect` hook is used to update the `timeSince` state variable whenever the `timestamp` prop changes. If `timestamp` is not provided, `timeSince` is set to an empty string.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useTimeSince.md"}}],["1470",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useTokenActivity.ts)\n\nThis code exports a function that retrieves activity data for a given token from a Reservoir API endpoint. The function takes in a token string, an optional query object, SWRInfiniteConfiguration options, and an optional chainId number. \n\nThe function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines the chain to use based on the provided chainId or the current chain of the client. \n\nThe function then uses the `useInfiniteApi` hook from the `./` module to fetch the activity data. This hook takes in a function that generates the URL and parameters for the API request based on the current page index and previous page data. The function also sets the API key and version from the client. The `useInfiniteApi` hook returns an object with the response data and methods for fetching additional pages of data.\n\nThe function then flattens the activity data from the response into a single array and returns an object that includes the response object and the flattened activity data.\n\nThis function can be used to retrieve activity data for a specific token in a Reservoir API. The optional query object can be used to filter the results. The SWRInfiniteConfiguration options can be used to configure the caching behavior of the `useInfiniteApi` hook. The chainId parameter can be used to specify a specific chain to use for the API request. \n\nExample usage:\n\n```\nimport useTokenActivity from './useTokenActivity'\n\nfunction MyComponent() {\n const { data, error, size, setSize } = useTokenActivity('myToken')\n\n if (error) return Posted {
This is a post
\nError: {error.message}
\n if (!data) return Loading...
\n\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `useInfiniteApi` hook being used in this code?\n- The `useInfiniteApi` hook is being used to fetch data from an API endpoint in a paginated manner, allowing for infinite scrolling.\n\n2. What is the significance of the `TokenActivityQuery` and `TokenActivityResponse` types?\n- The `TokenActivityQuery` and `TokenActivityResponse` types are used to define the structure of the query parameters and response data for the `/tokens/{token}/activity/v4` endpoint.\n\n3. What is the purpose of the `setParams` function being used in this code?\n- The `setParams` function is being used to set the query parameters for the API endpoint URL based on the `TokenActivityQuery` object, which is then used to fetch the data.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useTokenActivity.md"}}],["1471",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useTokenOpensea.ts)\n\nThe code is a TypeScript module that exports a function that fetches data from the OpenSea API using the useSWR library. The function takes in three parameters: `contract`, `tokenId`, and `swrOptions`. `contract` is a string that represents the contract address of the token, `tokenId` is a number or string that represents the ID of the token, and `swrOptions` is an optional object that contains configuration options for the useSWR hook.\n\nThe function constructs a URL using the `contract` and `tokenId` parameters and passes it to the useSWR hook as a key. The useSWR hook fetches the data from the OpenSea API using the provided URL and returns an object that contains the response data, a `mutate` function to update the data, an `error` object if there was an error fetching the data, and a boolean `isValidating` flag that indicates whether the hook is currently fetching data.\n\nThe response data is of type `OpenSeaTokenResponse`, which is an object that contains information about the token, including whether it supports the Wyvern protocol and information about the payment tokens associated with the token's collection.\n\nThis function can be used in the larger project to fetch data about tokens from the OpenSea API. For example, if the project has a feature that displays information about a specific token, this function can be used to fetch the data for that token and display it to the user. Here is an example of how the function can be used:\n\n```\nimport useOpenSeaToken from './path/to/openSeaToken'\n\nfunction TokenDetails({ contract, tokenId }) {\n const { response, error, isValidating } = useOpenSeaToken(contract, tokenId)\n\n if (error) {\n return - \n {data.map((activity) => (\n
- {activity.description} \n ))}\n
Error fetching token data
\n }\n\n if (isValidating) {\n return Loading token data...
\n }\n\n return (\n \n
\n )\n}\n```\n\nThis example component uses the `useOpenSeaToken` function to fetch data about a token with the specified `contract` and `tokenId`. It displays the name and description of the token's collection, as well as a list of the payment tokens associated with the collection. If there is an error fetching the data, it displays an error message, and if the data is still being fetched, it displays a loading message.\n## Questions: \n 1. What is the purpose of this code?\n This code is a function that fetches data from the OpenSea API for a given contract and token ID using the `useSWR` hook.\n\n2. What is the expected input for this function?\n The function takes in two optional parameters: `contract` (a string representing the contract address) and `tokenId` (a number or string representing the token ID). It also takes in an optional `swrOptions` object for configuring the `useSWR` hook.\n\n3. What is the expected output of this function?\n The function returns an object with four properties: `response` (the data fetched from the API), `mutate` (a function for updating the data), `error` (an error object if there was an error fetching the data), and `isValidating` (a boolean indicating whether the data is currently being fetched).","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useTokenOpensea.md"}}],["1472",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useTokenOpenseaBanned.ts)\n\nThis code is a React hook that checks whether a given token is banned on the OpenSea marketplace. The hook takes in two optional parameters: `contract`, which is a string representing the contract address of the token, and `tokenId`, which is a number or string representing the ID of the token. \n\nThe hook uses the `useState` and `useEffect` hooks from React to manage state and perform side effects. Specifically, it initializes a boolean state variable `isBanned` to `false`, and then uses the `useEffect` hook to perform an API call to the `isOpenSeaBanned` function from the `@reservoir0x/reservoir-sdk` library. This function takes in an array of token IDs and returns a Promise that resolves to an object mapping each token ID to a boolean value indicating whether it is banned on OpenSea. \n\nIf `contract` and `tokenId` are both provided, the hook constructs a token string in the format `contract:tokenId` and passes it to `isOpenSeaBanned`. It then updates the `isBanned` state variable based on the result of the API call. If there is an error with the API call, the hook logs the error to the console and sets `isBanned` to `false`. If `contract` and `tokenId` are not both provided, the hook simply sets `isBanned` to `false`.\n\nThe hook returns the `isBanned` state variable, which can be used in the larger project to conditionally render components or perform other logic based on whether a token is banned on OpenSea. For example, a developer could use this hook to prevent users from attempting to buy or sell banned tokens on their marketplace. \n\nExample usage:\n\n```\nimport useOpenSeaBanned from './useOpenSeaBanned'\n\nfunction MyComponent({ contract, tokenId }) {\n const isBanned = useOpenSeaBanned(contract, tokenId)\n\n if (isBanned) {\n return {response.collection.name}
\n{response.collection.description}
\n- \n {response.collection.payment_tokens.map((token) => (\n
- \n {token.name} ({token.symbol})\n \n ))}\n
This token is banned on OpenSea.
\n } else {\n returnThis token is not banned on OpenSea.
\n }\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n This code is a React hook that checks if a given token on a given contract is banned on OpenSea.\n\n2. What is the '@reservoir0x/reservoir-sdk' package used for?\n The '@reservoir0x/reservoir-sdk' package is used to check if a given token is banned on OpenSea.\n\n3. What happens if either the contract or tokenId parameters are not provided?\n If either the contract or tokenId parameters are not provided, the hook will return false for isBanned.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useTokenOpenseaBanned.md"}}],["1473",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useTokens.ts)\n\nThis code exports a function that retrieves token details from a Reservoir API endpoint. The function takes in three optional parameters: `options`, `swrOptions`, and `chainId`. \n\n`options` is an object that contains query parameters to be sent with the API request. If `options` is not provided or is falsey, the function returns null. \n\n`swrOptions` is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. The default options are set to revalidate on mount and not on the first page. \n\n`chainId` is an optional parameter that specifies the ID of the chain to use for the API request. If `chainId` is provided, the function searches for the chain with the matching ID in the client's list of chains. If `chainId` is not provided, the function uses the current chain from the client. \n\nThe function then calls `useInfiniteApi` from the `./` module, passing in a callback function and the `swrOptions` object. The callback function takes in two parameters: `pageIndex` and `previousPageData`. `pageIndex` is the index of the current page being fetched, and `previousPageData` is the data from the previous page. \n\nThe callback function constructs the API endpoint URL using the `chain` object and the `/tokens/v6` endpoint path. It then sets the query parameters using the `options` object and the `setParams` function from the `@reservoir0x/reservoir-sdk` module. If `normalizeRoyalties` is not specified in the query parameters and the client has a `normalizeRoyalties` property, the function sets `normalizeRoyalties` to the client's value. \n\nIf `previousPageData` is truthy and has a `continuation` property, the function sets the `continuation` query parameter to the value of `previousPageData.continuation`. This allows the function to fetch subsequent pages of data. If `previousPageData` is falsy and `pageIndex` is greater than 0, the function returns null. \n\nThe callback function then returns an array containing the constructed URL, the chain's API key, and the client's version. This array is used by `useInfiniteApi` to make the API request. \n\nThe function then extracts the `tokens` array from the API response data and returns an object containing the `response` object from `useInfiniteApi` and the `tokens` array. \n\nThis function can be used to fetch token details from the Reservoir API and handle pagination of the response data using the SWR library. An example usage of this function might look like:\n\n```\nimport useTokens from './useTokens'\n\nfunction TokenList() {\n const { data, error, size, setSize } = useTokens({ limit: 10 })\n\n if (error) returnError fetching tokens
\n if (!data) return Loading...
\n\n return (\n \n {data.map((token) => (\n
\n )\n}\n```\n## Questions: \n 1. What does this code do?\n- This code exports a function that retrieves token details from a Reservoir API endpoint using SWR for infinite scrolling.\n\n2. What are the input parameters for the exported function?\n- The exported function takes in three optional parameters: `options` for query parameters, `swrOptions` for SWR configuration, and `chainId` for the chain ID to use.\n\n3. What is the purpose of the `response` variable?\n- The `response` variable is used to fetch data from the Reservoir API endpoint using the `useInfiniteApi` hook from the `./` module. It also handles pagination and sets query parameters for the API request.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useTokens.md"}}],["1474",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useUserCollections.ts)\n\nThis code exports a function that retrieves collections belonging to a specified user from a Reservoir API endpoint. The function takes in four optional parameters: `user`, `options`, `swrOptions`, and `chainId`. \n\nThe `user` parameter is a string that specifies the user whose collections are to be retrieved. The `options` parameter is an object that contains query parameters to be included in the API request. The `swrOptions` parameter is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. The `chainId` parameter is an optional number that specifies the ID of the Reservoir chain to use for the API request.\n\nThe function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines the Reservoir chain to use for the API request based on the `chainId` parameter or the current chain of the client. \n\nThe function then uses the `useInfiniteApi` hook to make the API request. This hook takes in a function that generates the URL and query parameters for the API request based on the current page index and previous page data. The function also checks if a `user` parameter has been provided and returns `null` if it has not. \n\nThe API request URL is generated using the `URL` constructor and the `baseApiUrl` property of the Reservoir chain. The query parameters are generated using the `offset` and `limit` properties of the `options` parameter or default values if they are not provided. The `setParams` function from the `@reservoir0x/reservoir-sdk` library is used to set the query parameters on the URL. \n\nThe `useInfiniteApi` hook returns an object that contains the API response data and metadata. The `collections` property of the response data is flattened into a single array using the `flatMap` method. The function then returns an object that includes the flattened `collections` array and the other properties of the API response metadata.\n\nThis function can be used to retrieve collections belonging to a specified user from a Reservoir API endpoint. It can be called with the `user` parameter to retrieve the collections for a specific user, or without the `user` parameter to return `null`. The `options` parameter can be used to specify query parameters for the API request, such as the `limit` parameter to control the number of collections returned per page. The `swrOptions` parameter can be used to configure the caching and revalidation behavior of the API response. The `chainId` parameter can be used to specify the Reservoir chain to use for the API request if it is different from the current chain of the client.\n## Questions: \n 1. What is the purpose of the `useInfiniteApi` hook being used in this code?\n- The `useInfiniteApi` hook is being used to fetch data from an API endpoint in a paginated manner, allowing for infinite scrolling.\n\n2. What is the significance of the `UserCollections` and `UserCollectionsQuery` types?\n- The `UserCollections` type represents the schema of the response data that is expected from the API endpoint being called, while the `UserCollectionsQuery` type represents the query parameters that can be passed to the API endpoint.\n\n3. What is the purpose of the `chainId` parameter and how is it used in the code?\n- The `chainId` parameter is an optional parameter that specifies the ID of a blockchain network. It is used to construct the base URL for the API endpoint being called, and is also used to retrieve the API key for the specified network from the `client` object.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useUserCollections.md"}}],["1475",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useUserTokens.ts)\n\nThis code exports a default function that retrieves a list of tokens for a given user from a Reservoir API endpoint. The function takes in four parameters: `user`, `options`, `swrOptions`, and `chainId`. \n\nThe `user` parameter is a string that represents the user whose tokens are being retrieved. The `options` parameter is an optional object that contains query parameters to be included in the API request. The `swrOptions` parameter is an optional object that contains configuration options for the SWR library, which is used to cache and manage the API response. The `chainId` parameter is an optional number that represents the ID of the blockchain network to use for the API request.\n\nThe function first retrieves the Reservoir client object using the `useReservoirClient` hook. It then determines the blockchain network to use based on the `chainId` parameter or the current network of the client object. \n\nThe function then uses the `useInfiniteApi` hook from the `./` module to make the API request. This hook takes in a callback function that is called each time a new page of data is requested. The callback function constructs the API endpoint URL using the `user` parameter and the `chain` object, and sets the query parameters using the `options` object. If there is previous page data available, the callback function adds the `continuation` parameter to the query to retrieve the next page of data. The callback function also sets the `normalizeRoyalties` parameter in the query if it is not already set and the client object has a `normalizeRoyalties` property.\n\nThe `useInfiniteApi` hook returns an object that contains the API response data, including an array of token objects. The function extracts this array from the response and returns it along with the other properties of the response object.\n\nThis function can be used in the larger project to retrieve a list of tokens for a given user from the Reservoir API. The function can be called with the `user` parameter and optionally with the `options`, `swrOptions`, and `chainId` parameters to customize the API request and response caching behavior. The returned token array can then be used to display the user's tokens in the application.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n \n This code exports a function that retrieves user tokens from a Reservoir API endpoint. It uses the Reservoir SDK and SWR library to handle API requests and pagination.\n\n2. What parameters does the exported function take and what are their types?\n \n The exported function takes four parameters: `user` (string or undefined), `options` (UserTokenQuery or false), `swrOptions` (SWRInfiniteConfiguration), and `chainId` (number or undefined). \n\n3. What is the structure of the response data returned by the exported function?\n \n The response data returned by the exported function is an object that includes the data returned by the Reservoir API endpoint. The `data` property of the response object is an array of user tokens, and the other properties of the response object are metadata related to the API request and pagination.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useUserTokens.md"}}],["1476",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useUserTopBids.ts)\n\nThis code exports a function that retrieves a user's top bids from a Reservoir API endpoint. The function takes in four optional parameters: `user`, `options`, `swrOptions`, and `chainId`. \n\nThe `user` parameter is a string that specifies the user whose top bids are being retrieved. The `options` parameter is an object that contains additional query parameters to be included in the API request. The `swrOptions` parameter is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. The `chainId` parameter is an optional number that specifies the ID of the blockchain network to use for the API request.\n\nThe function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines the chain to use for the API request based on the `chainId` parameter or the current chain of the client. \n\nThe function then uses the `useInfiniteApi` hook to make the API request. This hook takes in a function that generates the URL and query parameters for the API request based on the current page index and previous page data. The function also handles setting the `normalizeRoyalties` query parameter based on the client's settings. The `useInfiniteApi` hook returns an object that contains the API response data and metadata.\n\nFinally, the function extracts the `topBids` data from the API response and returns it along with the metadata from the `useInfiniteApi` hook.\n\nThis function can be used in the larger project to retrieve a user's top bids from the Reservoir API and display them in the user interface. The function can be called with the desired user ID and any additional query parameters, and the resulting data can be displayed using the metadata returned by the `useInfiniteApi` hook. For example:\n\n```\nimport useTopBids from './useTopBids'\n\nfunction TopBids({ user }) {\n const { data, size, setSize } = useTopBids(user)\n\n return (\n {token.name}
\n ))}\n \n \n {data.map((bid) => (\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a function that retrieves a user's top bids from a Reservoir API endpoint and returns them in a paginated format using SWR.\n\n2. What are the input parameters for the exported function?\n- The function takes in four optional parameters: `user` (string), `options` (object), `swrOptions` (object), and `chainId` (number).\n\n3. What is the expected output of the exported function?\n- The function returns an object that includes the paginated data retrieved from the Reservoir API endpoint, as well as additional metadata provided by the SWR library. The data is flattened into an array of bids.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useUserTopBids.md"}}],["1477",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useUsersActivity.ts)\n\nThis code exports a function that retrieves user activity data from a Reservoir API endpoint. The function takes in optional parameters for filtering the data and pagination options, as well as a Reservoir client object and a chain ID. \n\nThe function first retrieves the Reservoir client object using the `useReservoirClient` hook. It then determines the chain to use for the API request based on the provided chain ID or the current chain of the client. \n\nThe function then uses the `useInfiniteApi` hook to make the API request and handle pagination. It constructs the API endpoint URL and query parameters based on the provided options and pagination data. It then returns an array containing the URL, API key, and client version to be used in the API request. \n\nFinally, the function maps over the API response data to extract the activity data and returns it along with the pagination data from the `useInfiniteApi` hook. \n\nThis function can be used in the larger project to retrieve user activity data from the Reservoir API and display it in the UI. For example, it could be used to display a user's recent activity on their profile page or to show a feed of recent activity across the platform. \n\nExample usage:\n\n```\nimport useUserActivity from './useUserActivity'\n\nfunction UserProfile({ userId }) {\n const { data: activities, isLoading, isError } = useUserActivity(userId)\n\n if (isLoading) {\n return {bid.amount}
\n ))}\n \n Loading...
\n }\n\n if (isError) {\n return Error loading user activity.
\n }\n\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of the `useInfiniteApi` hook being imported from the `./` module?\n- The smart developer might wonder what the `useInfiniteApi` hook does and how it is implemented within the `zoo` project.\n\n2. What is the expected format of the response data from the API endpoint `/users/activity/v5`?\n- The smart developer might want to know what the `UsersActivityResponse` type represents and how it is used within the `useInfiniteApi` hook.\n\n3. What is the purpose of the `chainId` parameter and how is it used within the function?\n- The smart developer might be curious about the `chainId` parameter and how it is used to determine the `chain` variable, which is then used to construct the API endpoint URL.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useUsersActivity.md"}}],["1478",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useWrappedBalance.ts)\n\nThis code is a function that retrieves the balance of a specific token on the current blockchain network. The function imports a list of wrapped contract addresses from a separate file and uses the `useBalance` function from the `wagmi` library to retrieve the balance of the specified token. \n\nTo use this function, the user must provide parameters to the `useBalance` function, which are passed to the function as an argument to this function. The function then calls the `useZooClient` function to retrieve the current blockchain network and uses it to determine the contract address of the specified token. If the current network is not in the list of wrapped contract addresses, the function defaults to the mainnet contract address. \n\nThe function then calls the `useBalance` function with the specified parameters and the determined contract address. The function returns an object containing the balance of the specified token and the contract address used to retrieve the balance. \n\nHere is an example of how this function can be used:\n\n```\nimport useTokenBalance from './useTokenBalance'\n\nconst params = {\n account: '0x1234567890abcdef',\n decimals: 18,\n}\n\nconst tokenBalance = useTokenBalance(params)\n\nconsole.log(tokenBalance.balance) // prints the balance of the specified token\nconsole.log(tokenBalance.contractAddress) // prints the contract address used to retrieve the balance\n```\n\nOverall, this function is a useful tool for retrieving the balance of a specific token on the current blockchain network. It can be used in conjunction with other functions in the `zoo` project to provide users with information about their token holdings.\n## Questions: \n 1. What is the purpose of the `wrappedContracts` constant imported from `../constants/wrappedContracts`?\n- `wrappedContracts` is likely a mapping of chain IDs to contract addresses for wrapped tokens, used to determine the contract address based on the current chain.\n\n2. What is the `useBalance` function being imported from `wagmi`, and what are the possible parameters that can be passed to it?\n- `useBalance` is likely a function provided by the `wagmi` library for retrieving the balance of a given token. The possible parameters that can be passed to it are not clear from this code snippet.\n\n3. What is the expected return value of this function?\n- This function is expected to return an object with two properties: `balance`, which is the balance of the specified token, and `contractAddress`, which is the contract address of the specified token on the current chain.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useWrappedBalance.md"}}],["1479",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useZooClient.ts)\n\nThe code above is a React functional component that exports a function that returns the context object of the `ZooClientProvider`. The `ZooClientProvider` is a higher-order component that provides the context for the `ZooClient` component and its children. \n\nThe `useContext` hook is used to access the context object provided by the `ZooClientProvider`. The `useContext` hook takes the `ZooClientContext` object as an argument and returns the current context value for that context. \n\nThis code can be used in the larger project to provide access to the `ZooClient` context object in any component that needs it. For example, if a component needs to access the `ZooClient` context object to retrieve data or perform an action, it can simply import this function and call it to get the context object. \n\nHere is an example of how this code can be used in a component:\n\n```\nimport React from 'react'\nimport getZooClientContext from './getZooClientContext'\n\nfunction MyComponent() {\n const zooClientContext = getZooClientContext()\n\n // Use the zooClientContext object to retrieve data or perform an action\n\n return (\n // JSX for the component\n )\n}\n\nexport default MyComponent\n```\n\nIn this example, the `getZooClientContext` function is imported and called to get the `zooClientContext` object. The `zooClientContext` object can then be used in the component to retrieve data or perform an action. \n\nOverall, this code provides a simple and reusable way to access the `ZooClient` context object in any component that needs it.\n## Questions: \n 1. What is `ZooClientContext` and where is it defined?\n- `ZooClientContext` is likely a context object defined in `ZooClientProvider` located in the parent directory. \n\n2. What is the purpose of this code?\n- This code exports a function that returns the value of `ZooClientContext` using the `useContext` hook from React. \n\n3. How is this code intended to be used in the project?\n- This code is likely used to provide access to the `ZooClientContext` throughout the project by importing and calling the exported function.","metadata":{"source":".autodoc/docs/markdown/ui/src/hooks/useZooClient.md"}}],["1480",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/img/EthIconGlyph.tsx)\n\nThis code exports a React component that renders an SVG image. The SVG image consists of two polygons, one on top of the other, forming a shape that resembles a house. The polygons are defined using the `path` element, which takes a `d` attribute that specifies the shape of the polygon using a series of commands. The `fill` attribute is set to black, which fills the shape with black color.\n\nThe component takes no props and returns the SVG image. It sets the width to \"auto\" and the height to \"100%\", which means the image will scale to fit its container. The `viewBox` attribute defines the position and size of the viewport, which is the visible area of the SVG image. In this case, the viewport starts at x=5, y=0 and has a width of 15 and a height of 24.\n\nThis component can be used in a larger project as a decorative element, such as a logo or an icon. It can be imported and rendered like any other React component. For example:\n\n```\nimport React from 'react';\nimport HouseIcon from './HouseIcon';\n\nconst MyComponent = () => {\n return (\n User Activity
\n- \n {activities.map((activity) => (\n
- {activity.description} \n ))}\n
\n
\n );\n};\n```\n\nThis code imports the `HouseIcon` component from the file where it is defined and renders it inside a `div` element. The resulting output will be a heading followed by the SVG image of the house.\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a React component that renders an SVG image.\n\n2. What does the viewBox attribute do?\n- The viewBox attribute defines the position and dimensions of the SVG image's viewport.\n\n3. Can the color of the SVG image be changed?\n- Yes, the fill attribute can be changed to any valid CSS color value to change the color of the SVG image.","metadata":{"source":".autodoc/docs/markdown/ui/src/img/EthIconGlyph.md"}}],["1481",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/img/EthIconGray.tsx)\n\nThis code exports a React component that renders an SVG image. The image consists of six paths that form a shape resembling a hexagon with two of its sides cut off. The hexagon is divided into three sections, each with a different color. The top section is colored dark gray (#343434), the bottom section is colored light gray (#8C8C8C), and the middle section is divided into four smaller sections, two of which are colored black (#141414) and two of which are colored dark brown (#393939 and #3C3C3B). \n\nThe SVG has a viewBox of \"5 0 15 24\", meaning that the image is 15 units wide and 24 units tall, and its top-left corner is located at (5,0) in the SVG coordinate system. The SVG also has a clipPath that defines a rectangular area with the same dimensions as the SVG and fills it with white. This clipPath is applied to the group of paths that form the hexagon, effectively masking them so that they only appear within the rectangular area defined by the clipPath.\n\nThis component can be used in a larger project as a decorative element or icon. It can be imported and rendered like any other React component, for example:\n\n```\nimport HexagonIcon from './path/to/HexagonIcon'\n\nfunction MyComponent() {\n return (\n Welcome to my house
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports an SVG component that renders a specific image.\n\n2. What is the significance of the viewBox attribute in the SVG element?\n- The viewBox attribute defines the position and dimensions of the SVG viewport.\n\n3. What is the purpose of the clipPath element and its child rect element?\n- The clipPath element defines a clipping path that restricts the visible area of the SVG image, and the rect element inside it specifies the dimensions of the clipping path.","metadata":{"source":".autodoc/docs/markdown/ui/src/img/EthIconGray.md"}}],["1482",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/img/EthIconPurple.tsx)\n\nThis code exports a React component that renders an SVG image of a flag. The flag is composed of five paths, each with a different fill color. The dimensions of the SVG are set to \"auto\" for the width and \"100%\" for the height, which means the SVG will scale to fit its container element. The viewBox attribute defines the position and dimensions of the SVG's viewport, which is set to (5, 0, 15, 24). \n\nThe first path element fills the top left corner of the flag with a light blue color (#8A92B2). The second path element fills the top right and bottom left corners of the flag with a darker blue color (#62688F). The third path element fills the center of the flag with a dark blue color (#454A75). The fourth path element fills the bottom left corner of the flag with the same light blue color as the first path element. The fifth path element fills the bottom right corner of the flag with the same darker blue color as the second path element.\n\nThis component can be used in a larger project as a decorative element or icon. It can be imported and rendered in any React component that needs to display a flag. For example:\n\n```\nimport React from 'react';\nimport Flag from './Flag';\n\nconst CountryInfo = ({ country }) => {\n return (\n Welcome to my app!
\nHere's a cool hexagon icon:
\n\n
\n );\n};\n\nexport default CountryInfo;\n```\n\nIn this example, the `CountryInfo` component displays information about a country and renders the `Flag` component as a decorative element. The `Flag` component can be customized with CSS styles or additional props to change its appearance or behavior.\n## Questions: \n 1. What is the purpose of this code?\n \n This code exports a React component that renders an SVG image of a shape resembling a flag.\n\n2. What are the dimensions of the SVG image?\n \n The SVG image has a variable width and a height of 100%. The viewBox attribute specifies the dimensions of the visible area as 5 units from the left, 0 units from the top, 15 units wide, and 24 units tall.\n\n3. What do the different path elements represent?\n \n The different path elements represent different parts of the flag shape, with different fill colors. The first path element represents the top left corner of the flag, the second path element represents the bottom left and top right corners of the flag, the third path element represents the center of the flag, and the last two path elements represent the bottom right corner of the flag.","metadata":{"source":".autodoc/docs/markdown/ui/src/img/EthIconPurple.md"}}],["1483",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/img/WEthIcon.tsx)\n\nThis code exports a React component that renders an SVG image of a stylized arrow. The arrow is composed of six path elements, each with a different fill color. The arrow is oriented vertically and has a triangular shape with a wider base at the bottom. The SVG element has a dynamic width and a fixed height of 100% of its container. The viewBox attribute defines the coordinate system used to draw the paths, and the xmlns attribute specifies the XML namespace for SVG elements.\n\nThis component can be used in a larger project as a visual element to indicate direction or movement. It can be styled and positioned using CSS to fit the design of the application. Here is an example of how to use this component in a React application:\n\n```\nimport React from 'react';\nimport Arrow from './Arrow';\n\nconst App = () => (\n {country.name}
\nCapital: {country.capital}
\nPopulation: {country.population}
\n\n
\n);\n\nexport default App;\n```\n\nIn this example, the Arrow component is imported and rendered inside a div element. The resulting output will be the arrow image displayed below the heading.\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a React component that renders an SVG image of a stylized arrow.\n\n2. What are the dimensions of the SVG image?\n- The SVG image has a variable width and a fixed height of 100%, and a viewBox of \"0 0 15 24\".\n\n3. What do the different path elements represent?\n- The different path elements represent different parts of the arrow image, each with a different fill color.","metadata":{"source":".autodoc/docs/markdown/ui/src/img/WEthIcon.md"}}],["1484",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/img/WethApproval.tsx)\n\nThis code exports a React component that renders an SVG image of a polygonal shape resembling a bird. The SVG image has a width and height of 56 units and a viewbox of 0 0 56 56. The image is composed of several paths and a rectangle, each with a different fill color.\n\nThe rectangle has a width and height of 56 units and rounded corners with a radius of 8 units. It is filled with a light gray color with an opacity of 0.2, giving it a translucent appearance.\n\nThe paths are used to create the shape of the bird. The first path starts at the top of the bird's head and goes down to the left wing. It is filled with a dark pink color. The second path starts at the left wing and goes down to the tail. It is filled with a darker shade of pink. The third path starts at the tail and goes up to the right wing. It is filled with the same dark pink color as the second path. The fourth path starts at the right wing and goes up to the top of the bird's head, completing the shape. It is filled with a dark red color.\n\nThis component can be used in a larger project as a decorative element or icon. It can be imported and rendered in any React component that needs to display an image of a bird. For example, it can be used in a nature-themed website or app, or in a game that involves birds. Here is an example of how to use this component in a React component:\n\n```\nimport BirdIcon from './path/to/bird-icon'\n\nfunction MyComponent() {\n return (\n Welcome to my app
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports an SVG component that renders a specific design of a zoo-related icon.\n\n2. What dependencies are required for this code to work?\n- This code requires React and SVGProps from the 'react' library.\n\n3. Can the size and colors of the icon be customized?\n- Yes, the size of the icon can be customized by changing the width and height values in the SVG element. The colors of the icon can also be customized by changing the fill values of the different path and rect elements.","metadata":{"source":".autodoc/docs/markdown/ui/src/img/WethApproval.md"}}],["1485",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/index.ts)\n\nThis code exports various modules, hooks, themes, and components that are part of the larger project called \"zoo\". \n\nThe \"Providers\" section exports two providers: \"ReservoirKitProvider\" and \"ReservoirClientProvider\". These providers are likely used to provide data and functionality to other parts of the project. \n\nThe \"Hooks\" section exports a variety of hooks that can be used throughout the project. These hooks include \"useCollections\", \"useTokens\", \"useBids\", and many others. Hooks are a way to reuse stateful logic across components in React, so these hooks likely provide some common functionality that is used throughout the project. \n\nThe \"Themes\" section exports two themes: \"lightTheme\" and \"darkTheme\". These themes likely define the color scheme and styling for various components in the project. \n\nThe \"Components\" section exports a variety of components that can be used throughout the project. These components include modals for buying, bidding, and listing items, as well as components for displaying token media and managing a user's cart. \n\nOverall, this code exports a variety of modules, hooks, themes, and components that are likely used throughout the larger \"zoo\" project. Developers working on the project can import and use these exports as needed to build out the functionality and user interface of the project. \n\nExample usage:\n\n```\nimport { useCollections } from 'zoo';\n\nfunction MyComponent() {\n const { collections, loading, error } = useCollections();\n\n if (loading) {\n return Welcome to the Bird Game!
\nCan you spot the bird in this image?
\nLoading collections...
;\n }\n\n if (error) {\n return Error loading collections: {error.message}
;\n }\n\n return (\n \n {collections.map(collection => (\n
\n );\n}\n```\n\nIn this example, the \"useCollections\" hook is imported from the \"zoo\" project and used to fetch and display a user's collections. The hook returns an object with the collections, loading state, and any errors that occurred during the fetch. The collections are then mapped over and displayed in the component.\n## Questions: \n 1. What is the purpose of the `types/parcel.d.ts` file being referenced at the top of the code?\n - The `types/parcel.d.ts` file is being referenced to provide type definitions for the code in this file.\n2. What is the `ReservoirKitProvider` and `ReservoirClientProvider` being exported for?\n - The `ReservoirKitProvider` and `ReservoirClientProvider` are being exported as providers for the `ReservoirKit` library.\n3. What is the purpose of the various modal components being exported?\n - The various modal components being exported are used for different actions related to buying, bidding, and listing tokens in the `ReservoirKit` library.","metadata":{"source":".autodoc/docs/markdown/ui/src/index.md"}}],["1486",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/lib/defaultExpirationOptions.ts)\n\nThis code defines an array of `ExpirationOption` objects and exports it as the default export of the module. Each `ExpirationOption` object represents a different expiration time option that can be selected by a user in the larger project. \n\nEach `ExpirationOption` object has four properties: `text`, `value`, `relativeTime`, and `relativeTimeUnit`. The `text` property is a string that represents the display text for the option. The `value` property is a string that represents the value of the option. The `relativeTime` property is a number that represents the relative time for the option. The `relativeTimeUnit` property is a string that represents the unit of time for the option.\n\nFor example, the first `ExpirationOption` object represents an option for a 1 hour expiration time. The `text` property is \"1 Hour\", the `value` property is \"hour\", the `relativeTime` property is 1, and the `relativeTimeUnit` property is \"h\". \n\nThis code can be used in the larger project to provide users with a list of expiration time options to choose from. The `expirationOptions` array can be imported into other modules and used to populate a dropdown menu or other UI element. For example, the following code could be used to create a dropdown menu of expiration time options:\n\n```\nimport expirationOptions from './path/to/expirationOptions'\n\nconst dropdown = document.createElement('select')\n\nexpirationOptions.forEach(option => {\n const optionElement = document.createElement('option')\n optionElement.value = option.value\n optionElement.text = option.text\n dropdown.appendChild(optionElement)\n})\n\ndocument.body.appendChild(dropdown)\n```\n\nThis code creates a `select` element and populates it with `option` elements for each `ExpirationOption` object in the `expirationOptions` array. The `value` and `text` properties of each `option` element are set to the corresponding properties of the `ExpirationOption` object. The resulting dropdown menu can be appended to the `body` of the document or another element in the UI.\n## Questions: \n 1. What is the purpose of the `ExpirationOption` type?\n- The `ExpirationOption` type is likely used to define the structure of objects that represent different expiration options.\n\n2. What is the significance of the `relativeTime` and `relativeTimeUnit` properties?\n- The `relativeTime` property represents the amount of time for the expiration option, while the `relativeTimeUnit` property represents the unit of time (e.g. hours, days, weeks, months).\n\n3. How is this module intended to be used in the `zoo` project?\n- It is unclear from this code alone how this module is intended to be used in the `zoo` project, but it likely provides a list of expiration options that can be used in some part of the project's functionality.","metadata":{"source":".autodoc/docs/markdown/ui/src/lib/defaultExpirationOptions.md"}}],["1487",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/lib/getLocalMarketplaceData.ts)\n\nThe code is a JavaScript module that exports a function. The function retrieves metadata from the current web page and returns an object containing the page title and icon. The metadata is retrieved using the Reservoir SDK, which is imported from the '@reservoir0x/reservoir-sdk' module.\n\nThe function first calls the `getClient()` function from the Reservoir SDK to get a client object. It then looks for a meta tag with the property 'reservoir:title' and retrieves its content attribute. If the title is not found, it checks if the client object exists and has a 'source' property. If so, it uses the 'source' property as the title. If the title is still not found, it uses the hostname of the current location as the title.\n\nNext, the function looks for a meta tag with the property 'reservoir:icon' and retrieves its content attribute. If the icon is not found, it looks for a link tag with a rel attribute containing the word 'icon' and retrieves its href attribute.\n\nFinally, the function returns an object containing the title and icon. This function can be used in a larger project to retrieve metadata from web pages and display it in a user interface. For example, a web browser extension could use this function to display the title and icon of the current web page in a popup window. \n\nExample usage:\n\n```\nimport getPageMetadata from './getPageMetadata'\n\nconst metadata = getPageMetadata()\n\nconsole.log(metadata.title) // prints the title of the current web page\nconsole.log(metadata.icon) // prints the icon of the current web page\n```\n## Questions: \n 1. What is the purpose of the `getClient` function from `@reservoir0x/reservoir-sdk` being imported?\n- The `getClient` function is used to get a client object from the Reservoir SDK.\n\n2. What is the purpose of the code that sets the `title` variable?\n- The code sets the `title` variable to the value of the `reservoir:title` meta tag content attribute, or the `client.source` property, or the hostname of the current location.\n\n3. What is the purpose of the code that sets the `icon` variable?\n- The code sets the `icon` variable to the value of the `reservoir:icon` meta tag content attribute, or the `href` attribute of the `link` tag with a `rel` attribute containing the word \"icon\".","metadata":{"source":".autodoc/docs/markdown/ui/src/lib/getLocalMarketplaceData.md"}}],["1488",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/lib/numbers.ts)\n\nThe `zoo` project contains a module that provides functions for formatting Ethereum (ETH) values into human-readable formats. The module exports three functions: `formatBN`, `formatNumber`, and `toFixed`.\n\nThe `formatBN` function takes an ETH amount, a maximum number of decimal digits, and an optional number of decimals as arguments. It returns the ETH value as a string or `-` if the amount is `null` or `undefined`. The function first checks if the amount is `null` or `undefined` and returns `-` if it is. It then converts the amount to a number and formats it using the `Intl.NumberFormat` API. The function uses the `utils.formatUnits` function from the `ethers` library to convert the amount to a number if it is not already a number. The function also checks if the browser is Safari and applies a workaround for a bug in the `Intl.NumberFormat` API that affects the fraction part of the formatted value. The function returns the formatted value as a string.\n\nThe `formatNumber` function takes an ETH amount and a maximum number of decimal digits as arguments. It returns the ETH value as a string or `-` if the amount is `null` or `undefined`. The function uses the `Intl.NumberFormat` API to format the amount with the specified number of decimal digits. The function returns the formatted value as a string.\n\nThe `toFixed` function takes a number and a number of decimal digits as arguments. It returns the number as a string with the specified number of decimal digits. The function uses a regular expression to match the number of decimal digits and returns the matched value or the original number if no match is found.\n\nThese functions can be used in the `zoo` project or in other projects that require formatting of ETH values. For example, the `formatBN` function can be used to format ETH values in a user interface that displays ETH balances or transaction amounts. The `formatNumber` function can be used to format ETH values in a chart or graph that displays historical ETH prices. The `toFixed` function can be used to format ETH values in a smart contract that requires a fixed number of decimal digits.\n## Questions: \n 1. What is the purpose of the `formatBN` function?\n- The `formatBN` function is used to convert ETH values to human-readable formats with a specified number of decimal digits.\n\n2. Why is there a check for Safari browser in the code?\n- There is a check for Safari browser in the code because Safari has a few bugs with the fraction part of `formatToParts`, sometimes rounding when unnecessary and when the amount is in the thousands not properly representing the value in compact display. \n\n3. What is the purpose of the `truncateFractionAndFormat` function?\n- The `truncateFractionAndFormat` function is used to truncate the fraction part of a number to a specified number of digits and format the number as a string. It is used in the `formatBN` function to format the parts of the number returned by `formatToParts`.","metadata":{"source":".autodoc/docs/markdown/ui/src/lib/numbers.md"}}],["1489",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/lib/optimizeImage.ts)\n\nThe `optimizeImage` function in the `zoo` project takes in two parameters: `imageHref` and `width`. The `imageHref` parameter is a string that represents the URL of an image. The `width` parameter is a number that represents the desired width of the image.\n\nThe purpose of this function is to optimize the image by resizing it to the desired width. The function first checks if the `imageHref` parameter is defined. If it is not defined, the function returns an empty string. If it is defined, the function creates a new `URL` object from the `imageHref` parameter.\n\nThe function then checks if the host of the URL is `lh3.googleusercontent.com`. If it is, the function checks if the `imageHref` parameter includes either `=s` or `=w`. If it does, the function splits the `imageHref` parameter at the `=` character and replaces the value after the `=` with the desired width. If it does not include `=s` or `=w`, the function simply appends `=w` followed by the desired width to the `imageHref` parameter.\n\nIf the host of the URL is not `lh3.googleusercontent.com`, the function simply returns the `imageHref` parameter.\n\nThis function can be used in the larger `zoo` project to optimize images by resizing them to the desired width. For example, if there is a gallery of images in the project and the images are too large, this function can be used to resize them to a more appropriate size. \n\nExample usage:\n\n```\nimport optimizeImage from './optimizeImage'\n\nconst imageHref = 'https://example.com/image.jpg'\nconst width = 500\n\nconst optimizedImage = optimizeImage(imageHref, width)\n\nconsole.log(optimizedImage) // 'https://example.com/image.jpg=w500'\n```\n## Questions: \n 1. What is the purpose of this function?\n This function takes in an image URL and a width value, and returns a new URL with the specified width parameter added to the query string.\n\n2. What type of input does this function expect for the imageHref parameter?\n This function expects a string or undefined value for the imageHref parameter.\n\n3. What is the significance of the URL host being 'lh3.googleusercontent.com'?\n If the URL host is 'lh3.googleusercontent.com', the function will check if the imageHref already includes a width or size parameter in the query string. If it does, the function will replace it with the new width value. If it does not, the function will add the width parameter to the query string.","metadata":{"source":".autodoc/docs/markdown/ui/src/lib/optimizeImage.md"}}],["1490",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/lib/swr.ts)\n\nThe code in this file is responsible for defining default headers and a default fetcher function for use in the larger project. It also defines default options for the SWRConfig component from the 'swr' library. \n\nThe `defaultHeaders` function takes two optional parameters, `apiKey` and `clientVersion`, and returns an object containing default headers for use in HTTP requests. The function sets the `x-rkui-version` header to the version number from the project's package.json file. If an `apiKey` parameter is provided, the function sets the `x-api-key` header to the value of the parameter. If a `clientVersion` parameter is provided, the function sets the `x-rkc-version` header to the value of the parameter. \n\nThe `defaultFetcher` function takes a single parameter, `params`, which can be either a string or an array of strings. If `params` is an array, the function extracts the first three elements and assigns them to `resource`, `apiKey`, and `clientVersion`, respectively. If `params` is a string, the function assigns it to `resource`. The function then calls `defaultHeaders` with `apiKey` and `clientVersion` as arguments to get the default headers for the request. The function then uses `fetch` to make the HTTP request with the specified `resource` and `headers`. If the response has a `deprecation` header set to `true`, the function logs a warning to the console. The function then returns the response body as a JSON object. If an error occurs during the request, the function throws the error. \n\nThe `swrDefaultOptions` object defines default options for the `SWRConfig` component from the 'swr' library. The object sets the `fetcher` option to the `defaultFetcher` function defined in this file, and sets `revalidateOnFocus` to `false`. \n\nThis code can be used in the larger project to provide default headers and a default fetcher function for HTTP requests. The `defaultHeaders` function can be used to set default headers for all requests, or modified to set headers for specific types of requests. The `defaultFetcher` function can be used to make HTTP requests with the default headers, or modified to handle specific types of requests. The `swrDefaultOptions` object can be passed as a prop to the `SWRConfig` component to set default options for data fetching with the 'swr' library. \n\nExample usage:\n\n```\nimport { defaultHeaders, defaultFetcher, swrDefaultOptions } from 'path/to/zoo'\n\n// Set default headers for all requests\nconst headers = defaultHeaders('my-api-key', '1.0.0')\n\n// Make a GET request with default headers\nconst response = await defaultFetcher('https://example.com/api/data', headers)\n\n// Pass default options to SWRConfig component\n{collection.name}
\n ))}\n This is the content of my modal.
\n \n \n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `Modal` that renders a dialog box with a title, content, and optional back button and loading spinner.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several modules from external libraries, including `react`, `@radix-ui/react-dialog`, and `@fortawesome/react-fontawesome`.\n\n3. What props can be passed to the `Modal` component?\n- The `Modal` component accepts several props, including `title`, `children`, `size`, `onBack`, `loading`, and various props related to the behavior of the dialog box, such as `open` and `onOpenChange`.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/Modal.md"}}],["1493",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/Progress.tsx)\n\nThe `Progress` component in the `zoo` project is a React functional component that renders a progress indicator with a title, an icon, and a link to a block explorer. The component takes three props: `title`, `txHash`, and `blockExplorerBaseUrl`. \n\nThe `title` prop is a string that represents the title of the progress indicator. The `txHash` prop is an optional string that represents the transaction hash of the progress indicator. If `txHash` is provided, the component renders a cube icon; otherwise, it renders a wallet icon. The `blockExplorerBaseUrl` prop is an optional string that represents the base URL of the block explorer. \n\nThe component uses the `useNetwork` hook from the `wagmi` library to get the active chain. It then renders a `Flex` component with a column direction and some styles for alignment and spacing. The `Flex` component contains a `Text` component that renders the `title` prop, a `Box` component that renders the icon based on the `txHash` prop, and an `Anchor` component that renders the link to the block explorer. \n\nThe `Box` component uses the `FontAwesomeIcon` component from the `@fortawesome/react-fontawesome` library to render the cube or wallet icon. The `Anchor` component uses the `activeChain` variable to get the name of the default block explorer for the active chain. If `txHash` is not provided, the `Anchor` component is hidden using the `visibility` CSS property.\n\nThis component can be used in the larger `zoo` project to show the progress of a transaction or an operation. For example, it can be used in a dashboard to show the progress of a deposit or a withdrawal. The `title` prop can be used to describe the operation, the `txHash` prop can be used to show the transaction hash, and the `blockExplorerBaseUrl` prop can be used to link to the block explorer. \n\nHere is an example of how to use the `Progress` component in a React component:\n\n```\nimport Progress from './Progress'\n\nconst MyComponent = () => {\n const txHash = '0x1234567890abcdef'\n const blockExplorerBaseUrl = 'https://etherscan.io/'\n\n return (\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a React component called `Progress` that displays a title, an icon (either a cube or a wallet), and a link to a block explorer website.\n\n2. What are the required props for the `Progress` component?\n- The required prop is `title`, which is a string. The optional props are `txHash`, which is a string, and `blockExplorerBaseUrl`, which is a string.\n\n3. What external libraries or dependencies does this code use?\n- This code imports several components from a custom library called `primitives`, as well as two icons from `@fortawesome/free-solid-svg-icons` and `@fortawesome/react-fontawesome`. It also imports a hook called `useNetwork` from `wagmi`.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/Progress.md"}}],["1494",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/ProgressBar.tsx)\n\nThe code defines a React functional component called `ProgressBar` that renders a progress bar with a number of segments equal to the `max` prop. The `value` prop determines how many segments are filled with a gradient color, while the remaining segments are unfilled. The component uses the `Flex` primitive from a `primitives` module to create a horizontal layout for the progress bar segments.\n\nThe `ProgressBar` component takes in two props: `value` and `max`. `value` is a number that represents the progress of the bar, while `max` is the total number of segments in the bar. The component also accepts any additional props that can be passed to the `Flex` primitive.\n\nThe component uses the `Array` constructor to create an array of length `max`, and then maps over it to create `max` number of `Flex` components. Each `Flex` component represents a segment of the progress bar. The `key` prop is set to the index of the segment in the array.\n\nThe `css` prop is used to style each `Flex` component. The `height` is set to 4 pixels, and the `borderRadius` is set to a large value to create a rounded rectangle shape. The `flex` property is set to 1 to allow the segments to fill the available space. The `background` property is set to a linear gradient that transitions from a `$neutralBorderHover` color to an `$accentSolid` color. The `backgroundSize` is set to 200% to allow the gradient to fill the entire segment. The `backgroundPosition` is set to `left` for segments that are filled, and `right` for segments that are unfilled. The `transition` property is set to `all 0.5s ease` to create a smooth animation when the progress changes.\n\nThe `ProgressBar` component can be used in a larger project to display progress for various tasks, such as file uploads, form submissions, or loading data. It can be customized by passing additional props to the `Flex` component, such as `justifyContent` or `alignItems`, to change the layout of the progress bar. Here is an example of how the `ProgressBar` component can be used:\n\n```\nimport ProgressBar from './ProgressBar'\n\nfunction UploadForm() {\n const [progress, setProgress] = useState(0)\n\n function handleUpload() {\n // code to upload file\n // update progress as file is uploaded\n setProgress(progress + 1)\n }\n\n return (\n \n )\n}\n```\n## Questions: \n 1. What does this code do?\n This code exports a React component called `ProgressBar` that renders a progress bar with a number of segments equal to the `max` prop and a number of filled segments equal to the `value` prop.\n\n2. What are the required props for this component?\n The required props for this component are `value`, which is a number representing the number of filled segments, and `max`, which is a number representing the total number of segments.\n\n3. What is the purpose of the `Flex` component being imported?\n The `Flex` component is being imported from a file located at `../primitives` and is used to create a flexbox container for the progress bar segments.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/ProgressBar.md"}}],["1495",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/QuantitySelector.tsx)\n\nThe `QuantitySelector` component is a reusable React component that provides a user interface for selecting a quantity within a given range. It takes in several props, including `max`, `min`, `quantity`, and `setQuantity`, which are used to determine the range of valid quantities and to update the selected quantity. \n\nThe component is composed of three main elements: two buttons for incrementing and decrementing the quantity, and an input field for displaying and editing the current quantity. The buttons are styled using the `QuantityButton` component, which is a styled version of the `Button` component from the `../primitives` directory. The input field is styled using the `QuantityInput` component, which is a styled version of the `input` HTML element.\n\nThe `QuantitySelector` component uses the `PseudoInput` component to group the buttons and input field together and apply additional styling. The `PseudoInput` component is a custom component that wraps the `div` HTML element and applies some additional styles to make it look like an input field.\n\nWhen the user clicks on the increment or decrement buttons, the `setQuantity` function is called with the new quantity value. The `onChange` and `onBlur` event handlers on the input field are used to update the quantity when the user types in a new value or leaves the input field. If the user enters an invalid value, such as a value outside of the valid range or a non-numeric value, the quantity is not updated.\n\nOverall, the `QuantitySelector` component provides a simple and reusable way to allow users to select a quantity within a given range. It can be used in a variety of contexts, such as in an e-commerce application for selecting the quantity of a product to purchase. \n\nExample usage:\n\n```\nimport QuantitySelector from './QuantitySelector'\n\nfunction ProductPage() {\n const [quantity, setQuantity] = useState(1)\n\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a React component called `QuantitySelector` that renders a quantity selector UI element with buttons to increment and decrement the quantity and an input field to display and edit the quantity.\n\n2. What are the required props for the `QuantitySelector` component?\n- The `QuantitySelector` component requires four props: `max` (number), `min` (number), `quantity` (number), and `setQuantity` (function that takes a number as argument and returns void). It also accepts an optional `css` prop for custom styling.\n\n3. What external libraries or components are used in this code?\n- This code imports several components and libraries: `React` and `CSSProperties` from the `react` package, `Button` from a custom `../primitives` module, `PseudoInput` from another custom `../primitives/PseudoInput` module, `styled` from a custom `../../stitches.config` module, and `FontAwesomeIcon`, `faMinus`, and `faPlus` from the `@fortawesome/react-fontawesome` and `@fortawesome/free-solid-svg-icons` packages.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/QuantitySelector.md"}}],["1496",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/SigninStep.tsx)\n\nThe code above defines a React functional component called `SigninStep` that renders a sign-in step for the Blur application. The component imports the `FontAwesomeIcon` and `Flex` components from external libraries and the `Text` component from an internal library called `primitives`. It also imports the `faPenNib` icon from the `@fortawesome/free-solid-svg-icons` library and the `CSS` type from the `@stitches/react` library.\n\nThe `SigninStep` component takes a single prop called `css` of type `CSS`, which is used to style the component. The component renders a `Flex` container with a column direction, centered content, and a neutral text color. The container includes two `Text` components that display the sign-in message and a description of the approval process. Finally, the component renders a `FontAwesomeIcon` component that displays the `faPenNib` icon.\n\nThis component can be used in the larger project as a step in the sign-in process for the Blur application. It provides a simple and visually appealing interface for users to sign in and complete the approval process. The `css` prop allows for customization of the component's styling to fit the overall design of the application.\n\nExample usage:\n\n```jsx\nimport SigninStep from './SigninStep'\n\nfunction SigninPage() {\n return (\n Product Name
\nPrice: $10.00
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this component?\n - This component is a sign-in step for the Blur application, which displays a title, subtitle, and an icon.\n\n2. What libraries and dependencies are being used in this code?\n - This code is using the `@fortawesome/react-fontawesome`, `@fortawesome/free-solid-svg-icons`, `@stitches/react`, and `react` libraries.\n\n3. What are the props that can be passed to this component?\n - The only prop that can be passed to this component is `css`, which is of type `CSS`.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/SigninStep.md"}}],["1497",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/Stat.tsx)\n\nThe code defines a React component called `Stat` that renders a statistic with a label and a value. The component takes several props, including `label` (a string or React element), `value` (a string, number, or null), `symbol` (an optional string), `asNative` (a boolean indicating whether the value is a native cryptocurrency), `asWrapped` (a boolean indicating whether the value is a wrapped cryptocurrency), and `address` (an optional string representing the cryptocurrency address). \n\nThe component renders a `Flex` container with a light gray background, rounded corners, and padding. The container has two child elements: a `Flex` container for the label and a value element. The label is rendered as a child of the `Flex` container with some spacing. The value element is conditionally rendered based on the `asNative` and `asWrapped` props. If `asNative` is true and `asWrapped` is false, the `FormatCryptoCurrency` component is used to format the value as a native cryptocurrency. If `asWrapped` is true and `asNative` is false, the `FormatWrappedCurrency` component is used to format the value as a wrapped cryptocurrency. If neither `asNative` nor `asWrapped` is true, the value is rendered as a `Text` element with a default style and an optional ellipsis if the value is too long.\n\nThe `Stat` component also has a static `toString` method that returns a CSS class name that can be used to style the component. \n\nThis component can be used in a larger project to display various statistics related to cryptocurrencies. The `asNative` and `asWrapped` props allow the component to handle different types of cryptocurrencies, while the `symbol` and `address` props provide additional context for the value. The `Stat` component can be used multiple times in a single page or application to display different statistics. For example, it could be used to display the total value of a user's cryptocurrency holdings, the price of a specific cryptocurrency, or the amount of a cryptocurrency that has been staked. \n\nExample usage:\n\n```\n\n {tokens.map((token) => (\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React functional component called `TokenLineItem` that renders a token with its details and an optional error message if it is not tradable on OpenSea.\n\n2. What are the required props for this component?\n- The only required prop for this component is `price`, which is a number representing the price of the token.\n\n3. What are some optional props that can be passed to this component?\n- Some optional props that can be passed to this component include `tokenDetails`, `collection`, `usdConversion`, `isSuspicious`, `isUnavailable`, `warning`, `currency`, `expires`, `sourceImg`, `css`, `showRoyalties`, and `quantity`. These props are used to customize the appearance and behavior of the token and its details.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/TokenLineItem.md"}}],["1500",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/TokenPrimitive.tsx)\n\nThe `TokenPrimitive` component is a React functional component that renders a token item or collection. It receives a set of props that define the item or collection to be rendered, such as `img`, `name`, `collection`, `currencyContract`, `currencyDecimals`, `currencySymbol`, `source`, `price`, `usdPrice`, `expires`, `warning`, `isOffer`, `isUnavailable`, `priceSubtitle`, `royaltiesBps`, and `quantity`. \n\nThe component uses the `styled` function from the `stitches.config` module to create a styled `img` component. It then renders a set of `Box`, `Flex`, `Text`, `Grid`, `FormatCurrency`, and `FormatCryptoCurrency` components from the `primitives` module, which are used to structure and format the content of the token item or collection. Additionally, the component renders an `InfoTooltip` component from the `primitives` module, which displays a tooltip with information about the creator royalties.\n\nThe `TokenPrimitive` component renders the token item or collection by first rendering a `Flex` component that displays the item or collection name and price subtitle. It then renders another `Flex` component that displays the item or collection image, name, collection, quantity, and expiration date. The component also renders a `Grid` component that displays the item or collection source, price, USD price, and warning. \n\nThe `TokenPrimitive` component is used in the larger project to display token items and collections in various parts of the application, such as in search results, user profiles, and marketplaces. For example, the component can be used to display a user's token collection in their profile page, or to display search results for a specific token item. \n\nExample usage:\n\n```jsx\nimport TokenPrimitive from './TokenPrimitive'\n\nconst token = {\n img: 'https://example.com/token.jpg',\n name: 'Token Name',\n collection: 'Token Collection',\n currencyContract: '0x1234567890abcdef',\n currencyDecimals: 18,\n currencySymbol: 'ETH',\n source: 'https://example.com/source.png',\n price: 1.23,\n usdPrice: 100.00,\n expires: '2022-01-01',\n warning: 'This token is not for sale',\n isOffer: false,\n isUnavailable: false,\n priceSubtitle: 'Token Price',\n royaltiesBps: 100,\n quantity: 10,\n}\n\nconst App = () => {\n return (\n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code file?\n- This code file defines a React functional component called `TokenPrimitive` that renders a token with various properties such as name, image, price, and source.\n\n2. What external dependencies does this code file use?\n- This code file imports several components and utilities from other files in the project, including `styled` from `stitches.config`, `Box`, `Flex`, `Text`, `Grid`, `FormatCurrency`, `FormatCryptoCurrency`, and `InfoTooltip` from `../primitives`.\n\n3. What props can be passed to the `TokenPrimitive` component?\n- The `TokenPrimitive` component accepts several optional props, including `img`, `name`, `collection`, `currencyContract`, `currencyDecimals`, `currencySymbol`, `source`, `price`, `usdPrice`, `expires`, `warning`, `isOffer`, `isUnavailable`, `priceSubtitle`, `royaltiesBps`, and `quantity`.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/TokenPrimitive.md"}}],["1501",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/TransactionProgress.tsx)\n\nThe `TransactionProgress` component is a React functional component that displays a progress bar for a transaction. It takes in two props: `fromImg`, which is a string representing the image source of the sender, and `toImgs`, which is an array of strings representing the image sources of the recipients. The component is built using the `Flex` and `Box` primitives from the `../primitives` module, which are used to create a flexible layout for the progress bar.\n\nThe `Img` component is a styled component that renders an image with a fixed width and height, a border radius of 4, and object-fit set to cover. It is used to display the sender and recipient images in the progress bar. The `ProgressDot` component is another styled component that renders a small circle with a border radius of 50%, a width and height of 5, and a background color. It is used to display the progress dots in the progress bar.\n\nThe `loadingStart`, `loadingMiddle`, and `loadingEnd` keyframes are CSS animations that define the animation for the progress dots. They use the `$neutralSolid` and `$accentText` colors from the `stitches.config` module to create a pulsing effect on the dots.\n\nThe `TransactionProgress` component renders a `Flex` container with the `fromImg` image on the left, the progress dots in the middle, and the `toImgs` images on the right. The progress dots are rendered using the `ProgressDot` component with the `loadingStart`, `loadingMiddle`, and `loadingEnd` animations applied to them. The `toImgs` images are rendered using the `Img` component in a loop.\n\nThis component can be used in a larger project to display the progress of a transaction, such as a payment or transfer of funds. It provides a visual representation of the transaction progress and can be customized with different images and colors to match the project's branding. Here is an example of how the `TransactionProgress` component can be used:\n\n```\n\n
\n )\n}\n```\n\nIn this example, the `TokenStatsHeader` component is used in the `App` component to render the header section for a token or collection. The `token` and `collection` objects are passed as props to the `TokenStatsHeader` component.\n## Questions: \n 1. What are the dependencies of this file?\n- This file imports `useTokens` and `useCollections` from a file located two directories up, and `React`, `FC`, and `styled` from other packages.\n\n2. What is the purpose of the `TokenStatsHeader` component?\n- The `TokenStatsHeader` component takes in a `token` and a `collection` as props and returns a styled box containing information about either the token or the collection.\n\n3. What is the purpose of the `optimizeImage` function?\n- The `optimizeImage` function takes in an image URL and a size and returns a new URL with the size appended to it, which is used to display the image in the `Img` component.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/bid/TokenStatsHeader.md"}}],["1511",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/bid/TokenStatsItem.tsx)\n\nThe `TokenStatsItem` component is a React functional component that renders a single item in a list of tokens. It takes two props: `token` and `collection`. The `token` prop is an optional object that contains information about the token being displayed, while the `collection` prop is a required object that contains information about the collection that the token belongs to.\n\nThe component uses the `optimizeImage` function from the `lib/optimizeImage` module to optimize the image that is displayed for the token. If the `token` prop is defined and contains an `image` property, that image is used. Otherwise, the `image` property of the `collection` prop is used. The `optimizeImage` function resizes the image to a maximum width of 600 pixels.\n\nThe component renders a `Box` component from the `primitives` module, which contains a `Text` component that displays the word \"Item\" as a subtitle. Below that, an `Img` component is rendered, which displays the optimized image for the token. If the image is not available, the `Img` component is hidden. The `Img` component is styled to have a width of 100% on small screens, and a fixed height and width of 150 pixels on larger screens.\n\nBelow the image, a `Text` component is rendered that displays the name of the token. If the `token` prop is defined and contains a `name` property, that name is used. Otherwise, the `tokenId` property of the `token` prop is used. The `Text` component is styled to have a font size of \"h6\" and to be ellipsified if it overflows its container.\n\nFinally, a `Box` component is rendered that contains a `Text` component that displays the name of the collection that the token belongs to. The `Text` component is styled to have a font size of \"subtitle2\" and to be ellipsified if it overflows its container.\n\nThis component is likely used in a larger project that displays a list of tokens and their associated information. The `TokenStatsItem` component is responsible for rendering a single item in that list, and is likely used in a loop to render multiple items. The component is designed to be responsive, with the image and text sizes adjusting based on the screen size.\n## Questions: \n 1. What are the dependencies of this file?\n- This file imports `useTokens` and `useCollections` from a file located two levels up in the directory, as well as `Box` and `Text` from a file located one level up in the directory. It also imports `React` and `FC` from the `react` library, and `styled` from a file located in the `stitches.config` directory.\n\n2. What is the purpose of the `optimizeImage` function?\n- The `optimizeImage` function takes an image URL and a size parameter, and returns a new URL that points to an optimized version of the image with the specified size. This is used to ensure that images are not too large and do not slow down the rendering of the page.\n\n3. What is the expected shape of the `Props` object?\n- The `Props` object is expected to have two properties: `token`, which is an optional object that has a `token` property that is also optional, and `collection`, which is a required object. The `token` object is expected to have a `name` and `tokenId` property, and the `collection` object is expected to have a `name` property.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/bid/TokenStatsItem.md"}}],["1512",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/bid/TransactionBidDetails.tsx)\n\nThe `TransactionBidDetails` component is a React functional component that renders a section of a user interface for displaying details about a bid on a token. It takes in three props: `token`, `collection`, and `bidData`. \n\nThe `token` prop is an object that contains information about the token being bid on. The `collection` prop is an object that contains information about the collection that the token belongs to. The `bidData` prop is an object that contains information about the bid, including the offer price, the currency used for the bid, and the expiration time of the bid.\n\nThe component uses several other components and hooks from the project to render the UI. The `TokenStatsHeader` component is used to display information about the token and collection at the top of the section. The `SelectedAttribute` component is used to display information about the attribute of the token being bid on. The `FormatWrappedCurrency` component is used to format the offer price of the bid.\n\nThe `useState` hook is used to manage the state of the `value` variable, which is used to store the formatted offer price of the bid. The `useTimeSince` hook is used to calculate the time since the bid expiration time.\n\nThe component renders a `Flex` container that contains the `TokenStatsHeader` component and a `Box` container. The `Box` container contains the `SelectedAttribute` component and a `Flex` container that displays the offer price and expiration time of the bid. The `Flex` container uses the `FormatWrappedCurrency` component to display the offer price and the `useTimeSince` hook to display the expiration time.\n\nThis component can be used in a larger project to display details about a bid on a token. It can be used in conjunction with other components and hooks from the project to create a complete user interface for buying and selling tokens. For example, it could be used in a bidding interface that allows users to bid on tokens in a collection.\n## Questions: \n 1. What are the required props for the `TransactionBidDetails` component?\n- The required props for the `TransactionBidDetails` component are `collection` of type `NonNullable\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `CurrencySelector` that renders a dropdown menu for selecting a cryptocurrency.\n\n2. What are the required props for this component?\n- The required props are `currencies`, an array of `Currency` objects, and `currency` and `setCurrency`, which represent the currently selected currency and a function for updating it, respectively.\n\n3. What external dependencies does this code rely on?\n- This code relies on the `@stitches/react` library for CSS styling and the `../../primitives` and `../../types/Currency` modules for other components and types, respectively.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/list/CurrencySelector.md"}}],["1521",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/list/ListingStat.tsx)\n\nThis code defines a React component called `ListingStat` that renders a single listing in a marketplace. The component takes in several props, including the listing object, the URL of an image for the marketplace, and a currency object. \n\nThe component renders a `Flex` container with a column direction, which contains two child elements: a `Flex` container with a row direction, and a `Text` element. The row container contains two child elements: a `FormatCryptoCurrency` component, which formats the price of the listing in the specified currency, and an `Img` element, which displays the marketplace image. The `Text` element displays the expiration time of the listing, or \"No Expiration\" if there is no expiration time.\n\nThe `styled` function from the `stitches.config` module is used to create a styled `Img` element with a fixed width and height. The `useTimeSince` hook from the `hooks` module is used to calculate the time since the listing's expiration time, if it exists.\n\nThe `ListingStat` component is exported as the default export of the module. The `toString` method is also defined on the component, which returns a CSS class name that can be used to style the component.\n\nThis component can be used in a larger project to display individual listings in a marketplace, with the price, expiration time, and marketplace image. It can be used in conjunction with other components to build a larger marketplace UI. For example, it could be used in a list view of all marketplace listings, or in a modal that displays more detailed information about a single listing. \n\nHere is an example of how the `ListingStat` component could be used in a larger React application:\n\n```\nimport React from 'react';\nimport ListingStat from './ListingStat';\n\nfunction Marketplace() {\n const listings = [\n {\n id: 1,\n weiPrice: 1000000000000000000,\n expirationTime: Date.now() + 86400000,\n },\n {\n id: 2,\n weiPrice: 500000000000000000,\n expirationTime: null,\n },\n ];\n\n return (\n Selected currency: {selectedCurrency.symbol}
\n\n {listings.map((listing) => (\n
\n );\n}\n```\n\nThis example defines a `Marketplace` component that renders a list of `ListingStat` components, passing in sample data for the listings, marketplace image, and currency. The `key` prop is used to ensure that each `ListingStat` component has a unique identifier.\n## Questions: \n 1. What is the purpose of this code and what does it do?\n This code defines a React component called `ListingStat` that renders a listing with a price and expiration time, along with an image. It uses various imported components and hooks to achieve this.\n\n2. What props does the `ListingStat` component expect and what are their types?\n The `ListingStat` component expects three props: `listing` of type `Listings[0]`, `marketImg` of type `string`, and `currency` of type `Currency`. `Listings` and `Currency` are imported types from other files.\n\n3. What is the significance of the `ListingStat.toString` method?\n The `ListingStat.toString` method returns a CSS class name that can be used to style the component. This is useful for styling components with CSS-in-JS libraries like `styled-components` or `stitches`.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/list/ListingStat.md"}}],["1522",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/list/MarketplacePriceInput.tsx)\n\nThe `MarketplacePriceInput` component is a React component that renders an input field for a marketplace listing price. It takes in several props, including the marketplace object, the collection object, the currency object, an array of currencies, and several callback functions. \n\nThe component calculates the profit of the listing based on the marketplace fee, the collection royalties, the true price of the listing, and the quantity of the listing. It then renders the input field, the currency selector, and the profit and USD price of the listing. \n\nThe component also conditionally renders the marketplace image, the currency icon and symbol, and the currency selector based on the `nativeOnly` and `currencies` props. If `nativeOnly` is true and there is more than one currency in the `currencies` array, the component renders the `CurrencySelector` component. Otherwise, it renders the currency icon and symbol. \n\nThis component can be used in a larger project that involves creating a marketplace for buying and selling items. It can be used to allow users to input the listing price for their items and to calculate the profit and USD price of the listing. The component can also be customized to fit the design and functionality of the larger project. \n\nExample usage:\n\n```\nimport MarketplacePriceInput from './MarketplacePriceInput'\n\nconst MyComponent = () => {\n const marketplace = { /* marketplace object */ }\n const collection = { /* collection object */ }\n const currency = { /* currency object */ }\n const currencies = [ /* array of currencies */ ]\n\n const handleCurrencyChange = (currency) => {\n // handle currency change\n }\n\n const handlePriceChange = (e) => {\n // handle price change\n }\n\n const handlePriceBlur = (e) => {\n // handle price blur\n }\n\n return (\n \n {marketplaces.map((marketplace) => (\n handleSelection(marketplace)}\n />\n ))}\n
\n )\n}\n\nexport default MarketplaceList\n```\n\nIn this example, the `MarketplaceList` component renders a list of marketplaces using the `MarketplaceToggle` component. The `marketplaces` array contains information about each marketplace, including its name, image URL, and fee percentage. The `selectedMarketplaces` state variable is an array that keeps track of which marketplaces are currently selected.\n\nThe `handleSelection` function is called when the user clicks on a toggle switch. If the selected marketplace is already in the `selectedMarketplaces` array, it is removed. Otherwise, it is added to the array.\n\nOverall, the `MarketplaceToggle` component is a reusable component that can be used to render a toggle switch for a marketplace in a larger project. It is flexible and can be customized to fit the specific needs of the project.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a React component called `MarketplaceToggle` that renders a toggle switch for a marketplace with its name, image, and fee percentage.\n\n2. What are the props expected by the `MarketplaceToggle` component?\n The `MarketplaceToggle` component expects two props: `marketplace`, which is an object containing information about the marketplace being toggled, and `onSelection`, which is a function that gets called when the toggle switch is clicked.\n\n3. What are the dependencies of this code?\n This code depends on the `React` library and several components from a custom `primitives` library, as well as a custom `useMarketplaces` hook that provides information about marketplaces.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/list/MarketplaceToggle.md"}}],["1524",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/list/Token.tsx)\n\nThe `Token` component is a React functional component that renders a single NFT (non-fungible token) item. It receives two optional props: `token` and `collection`. The `token` prop is an object that contains information about the NFT, such as its name, image, and collection. The `collection` prop is an object that contains information about the collection that the NFT belongs to, such as its name and image.\n\nThe component first uses the `optimizeImage` function from the `lib` directory to optimize the image of the NFT. This function takes an image URL and a maximum width as arguments and returns a new URL that points to an optimized version of the image. The optimized image is then used as the source of an `Img` component, which is a styled `img` HTML element.\n\nThe `Token` component then renders a `Box` component that contains the `Img` component, the name of the NFT, and the name of the collection that the NFT belongs to. The `Box` component is styled to have a fixed width of 120 pixels and a margin of 4 pixels on the right side. On screens with a width of 600 pixels or more (using the `@bp1` media query), the `Box` component has a width of 100% and no margin.\n\nThe name of the NFT is rendered as an `h6` HTML element with ellipsis overflow and a flex property of 1, which allows it to take up the remaining horizontal space in the `Box` component. If the `token` prop is not provided or does not contain a name, the component renders the NFT's `tokenId` instead.\n\nThe name of the collection is rendered as a `Text` component with a `subtitle2` style and ellipsis overflow. If the `token` prop is not provided or does not contain a collection name, the component does not render anything.\n\nThis component can be used in a larger project that displays a collection of NFTs, such as a marketplace or a gallery. It can be used to render a grid of NFT items, each with its own name and image. The `Token` component can be customized by passing different `token` and `collection` props, or by modifying its styles using the `styled` function from the `stitches.config` file. For example, the `Img` component can be styled to have a different border radius or object fit.\n## Questions: \n 1. What are the dependencies of this file?\n- The file imports `useTokens` and `useCollections` from a file located two directories up, and `React`, `FC`, and `styled` from other packages.\n\n2. What is the purpose of the `optimizeImage` function?\n- The `optimizeImage` function takes an image URL and a size and returns a new URL that points to an optimized version of the image with the specified size.\n\n3. What is the purpose of the `Token` component?\n- The `Token` component takes a `token` and a `collection` as props and renders an image, a name, and a collection name for the token. It also uses the `optimizeImage` function to optimize the image URL.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/list/Token.md"}}],["1525",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/list/TokenListingDetails.tsx)\n\nThe `TokenListingDetails` component is a React functional component that renders a token and its associated listing data. It takes in several props, including a `token` object, a `collection` object, an array of `listingData`, and a `currency` object. \n\nThe `Token` component is imported from a file called `Token` and is used to render the token. The `ListingStat` component is imported from a file called `ListingStat` and is used to render the listing data. \n\nThe component is wrapped in a `Flex` component from a file called `Flex` and a `Box` component from a file called `Box`. These components are used to create a flexible layout that adjusts based on the screen size. \n\nThe `TokenListingDetails` component maps over the `listingData` array and renders a `ListingStat` component for each item in the array. The `ListingStat` component takes in several props, including a `listing` object, a `marketImg` string, and a `currency` object. \n\nThe `TokenListingDetails` component is exported as the default export of the file. This allows other files to import and use the component in their own React components. \n\nThis component is likely used in a larger project that involves displaying tokens and their associated listing data. It could be used in a marketplace application where users can buy and sell tokens. \n\nExample usage:\n\n```\nimport TokenListingDetails from './TokenListingDetails'\n\nfunction App() {\n const token = { /* token object */ }\n const collection = { /* collection object */ }\n const listingData = [ /* array of listing data objects */ ]\n const currency = { /* currency object */ }\n\n return (\n \n
\n )\n}\n```\n\nIn this example, `MyComponent` renders an `ItemToggle` component and either an `ItemList` or a `CurrencyConverter` component, depending on the value of `isItemsToggled`. The `currency` prop is passed down from the `useChainCurrency` hook. The `isItemsToggled` and `setIsItemsToggled` props are used to manage the state of the toggle group.\n## Questions: \n 1. What is the purpose of the `ItemToggle` component?\n- The `ItemToggle` component is a toggle group that allows the user to switch between displaying items or currency.\n\n2. What is the significance of the `useChainCurrency` hook?\n- The `useChainCurrency` hook is used to retrieve the currency data for the current chain.\n\n3. What is the expected behavior when the user clicks on one of the toggle buttons?\n- When the user clicks on one of the toggle buttons, the `isItemsToggled` state is updated to reflect the user's selection. If the user selects \"items\", `isItemsToggled` is set to `true`, otherwise it is set to `false`.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/sweep/ItemToggle.md"}}],["1528",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/sweep/SweepItem.tsx)\n\nThe code defines a React functional component called `SweepItem`. This component takes in four props: `name`, `image`, `amount`, and `currency`. The `name` prop is a string that represents the name of the item being swept. The `image` prop is a string that represents the URL of the image of the item being swept. The `amount` prop is a number that represents the amount of the item being swept. The `currency` prop is an object that is returned from the `useChainCurrency` hook.\n\nThe purpose of this component is to display a single item that is being swept. The item is displayed as a small card with the item's image, name, and amount. The card is wrapped in a tooltip that displays the item's name when the user hovers over the card.\n\nThe component uses several other components from the `primitives` module, including `Flex`, `FormatCryptoCurrency`, `Img`, and `Text`. The `Flex` component is used to create a container for the card that allows for flexible layout. The `Img` component is used to display the item's image. The `Text` component is used to display the item's name in the tooltip. The `FormatCryptoCurrency` component is used to format the item's amount as a cryptocurrency value.\n\nThe `SweepItem` component is likely used in a larger project that involves sweeping multiple items. It could be used in a wallet application that allows users to sweep multiple types of cryptocurrencies into their wallet. The component could be reused for each type of cryptocurrency being swept, with the `name`, `image`, `amount`, and `currency` props being passed in for each type.\n## Questions: \n 1. What is the purpose of the `useChainCurrency` hook and how is it used in this code?\n- The `useChainCurrency` hook is used to retrieve information about a specific cryptocurrency chain, and it is passed as a prop to the `SweepItem` component.\n2. What is the expected format of the `image` prop and how is it used in this code?\n- The `image` prop is expected to be a string representing the URL of an image, and it is used as the `src` attribute of an `Img` component.\n3. What is the purpose of the `Tooltip` component and how is it configured in this code?\n- The `Tooltip` component is used to display a tooltip when the user hovers over the `Flex` component. It is configured to display the `name` prop as the content of the tooltip, and to position the tooltip above the `Flex` component with a small offset.","metadata":{"source":".autodoc/docs/markdown/ui/src/modal/sweep/SweepItem.md"}}],["1529",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Anchor.tsx)\n\nThis code exports a styled anchor component that can be used in a React project. The component is defined using the `styled` function from the `stitches.config` module, which allows for the creation of custom styles for HTML elements. The resulting `StyledAnchor` component has several variants that can be used to customize its appearance, including color and font weight.\n\nThe `StyledAnchor` component is defined with default styles that include a transparent background, a pointer cursor, and a font size of 16 pixels. The font family is set to `$body`, which is a variable defined in the `stitches.config` module. The color and text decoration are set to `inherit`, which means they will inherit the styles of the parent element.\n\nThe `StyledAnchor` component also has a `$$focusColor` variable that is defined as `$colors$neutralTextContrast`. This variable is used to set the color of the component when it is in focus. When the component is in focus, it will have a border radius of 4 pixels and a box shadow that is 2 pixels wide and the color of `$$focusColor`.\n\nThe `StyledAnchor` component has three color variants: `primary`, `gray`, and `error`. The `primary` variant has a color of `$accentText` and changes to `$accentSolidHover` when hovered over. The `gray` variant has a color of `$neutralText` and changes to `$accentText` when hovered over. The `error` variant has a color of `$errorAccent`.\n\nThe `StyledAnchor` component also has two weight variants: `heavy` and `medium`. The `heavy` variant has a font weight of 700, while the `medium` variant has a font weight of 500.\n\nFinally, the `StyledAnchor` component is exported using the `forwardRef` function from React. This allows the component to forward a ref to its child component, which can be useful for accessing the DOM node of the child component. The `StyledAnchor` component takes in a `children` prop and any other props that are passed to it, and renders an anchor element with the `StyledAnchor` styles applied to it.\n\nOverall, this code provides a customizable anchor component that can be used in a React project. The component has several variants that can be used to customize its appearance, and it can forward a ref to its child component if needed. Here is an example of how the `StyledAnchor` component could be used in a React project:\n\n```\nimport React from 'react'\nimport StyledAnchor from './StyledAnchor'\n\nfunction MyComponent() {\n return (\n \n Click me! \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a styled anchor component using React and Stitches CSS-in-JS library.\n\n2. What are the available variants for the styled anchor component?\n- The available variants are `color` and `weight`. `color` has three options: `primary`, `gray`, and `error`. `weight` has two options: `heavy` and `medium`.\n\n3. What is the purpose of the `forwardRef` function in this code?\n- The `forwardRef` function is used to forward the `ref` attribute from the parent component to the `StyledAnchor` component, allowing the parent component to access the `ref` of the `StyledAnchor`.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/Anchor.md"}}],["1530",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Box.tsx)\n\nThis code is a styled component that creates a div element with specific CSS properties. The purpose of this code is to provide a reusable styled component that can be used throughout the larger project. \n\nThe `import` statement at the beginning of the code imports the `styled` function from the `stitches.config` file located in a parent directory. This function is used to create a styled component by passing in the HTML element to be styled (in this case, a div) and an object containing CSS properties and their values. \n\nThe CSS properties included in this object are `boxSizing`, `borderStyle`, and `borderWidth`. The `boxSizing` property sets the sizing behavior of the element's box model, while `borderStyle` and `borderWidth` set the style and width of the element's border. \n\nBy exporting this styled component as the default export of this file, it can be easily imported and used in other files within the project. For example, if a component needs a div element with the same styling as defined in this file, it can simply import this component and use it like so:\n\n```\nimport StyledDiv from './path/to/this/file'\n\nfunction MyComponent() {\n return (\n Collapsible content goes here
\n\n
\n )\n}\n```\n\nIn this example, the `DatePicker` component is used to render a date picker. The `value` prop is set to the `date` state variable, and the `onChange` prop is set to a function that updates the `date` state variable when the user selects a new date.\n## Questions: \n 1. What is the purpose of this code?\n - This code exports a custom input component that wraps around the `Flatpickr` component from the `react-flatpickr` library, and maps the `onChange`, `value`, `defaultValue`, and `options` props from `Flatpickr` to the custom input component.\n\n2. What dependencies are required for this code to work?\n - This code requires the `react`, `react-dom`, and `react-flatpickr` libraries to be installed.\n\n3. What is the expected format for the `options` prop?\n - The `options` prop is an object that can contain any of the options supported by the `Flatpickr` component, with the addition of a `dateFormat` option that is set to `'m/d/Y h:i K'` by default.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/DateInput.md"}}],["1535",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Dialog.tsx)\n\nThe code is a React component that provides a customizable dialog box that can be used in a larger project. The dialog box is composed of two main components: the `Overlay` and the `Content`. The `Overlay` is a full-screen, semi-transparent background that appears behind the `Content` when the dialog box is open. The `Content` is the actual dialog box that appears on top of the `Overlay`. \n\nThe `Dialog` component is the main component that wraps the `Overlay` and `Content` components. It takes in several props, including `trigger`, `portalProps`, `onOpenChange`, `open`, and `size`. The `trigger` prop is the element that triggers the opening of the dialog box. The `portalProps` prop is an object that contains props that are passed to the `DialogPrimitive.DialogPortal` component. The `onOpenChange` prop is a callback function that is called when the dialog box is opened or closed. The `open` prop is a boolean that determines whether the dialog box is open or closed. The `size` prop is an enum that determines the size of the dialog box. \n\nThe `AnimatedOverlay` and `AnimatedContent` components are higher-order components that wrap the `Overlay` and `Content` components, respectively. They add animation to the opening and closing of the dialog box. The `StyledAnimatedContent` component is a styled version of the `AnimatedContent` component. \n\nThe `useMediaQuery` hook is used to determine whether the screen size is less than or equal to 520px. If the screen size is less than or equal to 520px, the dialog box is displayed differently than if the screen size is greater than 520px. \n\nOverall, this code provides a customizable dialog box that can be used in a larger project. It is flexible and can be used in a variety of contexts. Below is an example of how the `Dialog` component can be used:\n\n```\nimport { Dialog } from './Dialog'\n\nfunction App() {\n const [open, setOpen] = useState(false)\n\n return (\n \n \n Open Dialog}\n onOpenChange={(open) => setOpen(open)}\n open={open}\n size={ModalSize.MD}\n >\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a Dialog component that can be used to create modal dialogs in a React application.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including Stitches for styling, Radix UI for dialog components, React for building the UI, and Framer Motion for animations.\n\n3. What props can be passed to the Dialog component?\n- The Dialog component accepts several props, including trigger (the element that triggers the dialog), portalProps (props to pass to the dialog portal), onOpenChange (a callback function that is called when the dialog is opened or closed), open (a boolean indicating whether the dialog is open or closed), and size (an enum indicating the size of the dialog).","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/Dialog.md"}}],["1536",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/ErrorWell.tsx)\n\nThe code above defines a React component called `ErrorWell` that renders an error message with an icon. The component takes two props: `message` and `css`. The `message` prop is an optional string that represents the error message to be displayed. If no message is provided, a default message will be displayed. The `css` prop is an object that contains CSS styles to be applied to the component.\n\nThe component is composed of two child components: `Flex` and `Text`. The `Flex` component is a custom component that renders a flexible container with a set of predefined styles. The `Text` component is another custom component that renders text with a set of predefined styles.\n\nThe `ErrorWell` component renders a `Flex` component with the following styles:\n\n- `color: '$errorAccent'`: sets the text color to a predefined error accent color.\n- `p: '$4'`: sets the padding to a predefined value.\n- `gap: '$2'`: sets the gap between child elements to a predefined value.\n- `background: '$wellBackground'`: sets the background color to a predefined well background color.\n- `...css`: applies any additional styles passed in through the `css` prop.\n\nThe `Flex` component has one child element, a `FontAwesomeIcon` component from the `@fortawesome/react-fontawesome` library. This component renders an icon of a circle with an exclamation point inside. The icon is imported from the `@fortawesome/free-solid-svg-icons` library.\n\nThe `Flex` component also has a second child element, a `Text` component. This component renders the error message passed in through the `message` prop, or a default message if no message is provided. The text is styled using the `style` prop with a value of \"body3\" and the `color` prop with a value of \"errorLight\".\n\nThis component can be used in the larger project to display error messages to users in a consistent and visually appealing way. Developers can pass in custom styles through the `css` prop to customize the appearance of the error message. Here is an example of how the component can be used:\n\n```\nDialog Title
\nDialog content goes here.
\n \n\n
\n )\n}\n\nexport default Header\n```\n\nIn this example, the `EthLogo` component is used to display the Ethereum logo next to the application name in the header of the page.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a React component called `EthLogo` that displays one of three different Ethereum icons based on the current theme.\n\n2. What is the `ThemeContext` and where does it come from?\n The `ThemeContext` is imported from a file called `ReservoirKitProvider` located in the parent directory. It is used to access the current theme of the application.\n\n3. What is the `ReservoirKitThemeContext` and how is it used?\n The `ReservoirKitThemeContext` is imported from a file called `stitches.config` located in the parent directory. It is used to define the type of the `ethIcon` property in the theme object, which is then used to determine which Ethereum icon to display in the `EthLogo` component.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/EthLogo.md"}}],["1538",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Flex.tsx)\n\nThis code defines a set of CSS properties for a flexible container element using the Stitches library. The `flexCss` object contains properties for `display`, `boxSizing`, `borderStyle`, and `borderWidth`, as well as several variants for `align`, `justify`, `direction`, and `wrap`. These variants allow for different alignment, justification, direction, and wrapping options for the flexible container element.\n\nThe `styled` function from the Stitches library is used to create two styled components: a default `div` element and an `AnimatedFlex` component that uses the `motion` library from Framer Motion. Both components use the `flexCss` object to define their CSS properties.\n\nThis code can be used in the larger project to create flexible container elements with different alignment, justification, direction, and wrapping options. For example, the `AnimatedFlex` component can be used to create animated flexible container elements with the same set of options. Here is an example of how the `AnimatedFlex` component can be used:\n\n```\nimport { AnimatedFlex } from 'zoo'\n\nconst MyComponent = () => {\n return (\n My Ethereum App
\n\n
\n )\n}\n```\n\nThis will display the formatted cryptocurrency amount along with the corresponding icon for Ethereum (ETH).\n## Questions: \n 1. What is the purpose of the `FormatCryptoCurrency` component?\n- The `FormatCryptoCurrency` component is used to format and display cryptocurrency amounts along with their corresponding icons and symbols.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies, including `FormatCrypto`, `React`, `ethers` from the `constants` module, `CryptoCurrencyIcon`, `useNetwork` from the `wagmi` module, `Tooltip`, and `Anchor`.\n\n3. What is the significance of the `blockExplorerBaseUrl` variable?\n- The `blockExplorerBaseUrl` variable is used to determine the base URL for the block explorer associated with the active blockchain network. If no block explorer is associated with the network, the default URL is set to `https://etherscan.io`.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/FormatCryptoCurrency.md"}}],["1541",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/FormatCurrency.tsx)\n\nThe `FormatCurrency` component is a React functional component that formats a given amount of money into a currency format. It takes in a `Props` object that contains the `amount` to be formatted, the `currency` to format the amount in, and the `maximumFractionDigits` to be displayed. \n\nThe `FormatCurrency` component uses the `useState` and `useEffect` hooks to manage the state of the formatted value. The `useState` hook initializes the `formattedValue` state to an empty string. The `useEffect` hook is used to update the `formattedValue` state whenever the `amount` or `maximumFractionDigits` props change. \n\nThe `useEffect` hook first checks if the `amount` prop is truthy. If it is, it calculates the lowest possible value based on the `maximumFractionDigits` prop and checks if the `amount` is less than that value. If the `amount` is less than the lowest possible value, the `formattedValue` state is set to `<` concatenated with the formatted lowest possible value. Otherwise, the `amount` is formatted using the `Intl.NumberFormat` constructor and the `formattedValue` state is set to the formatted amount. If the `amount` prop is falsy, the `formattedValue` state is set to an empty string.\n\nFinally, the `FormatCurrency` component returns a `Text` component with the `formattedValue` state as its child. The `Text` component also receives any additional props passed to the `FormatCurrency` component and sets its `style` and `color` props to default values if they are not provided.\n\nThis component can be used in a larger project to format currency values in a consistent and localized way. For example, it can be used to format prices in an e-commerce website or financial application. Here is an example usage of the `FormatCurrency` component:\n\n```\nItem 1
\n Item 2
\n Item 3
\n Item 1
\n Item 2
\n Item 3
\n Item 1
\n Item 2
\n Item 3
\n \n ![\"Example](\"https://example.com/image.jpg\")
\n
\n )\n}\n```\n\nIn the example above, the `Img` component is used to display an image with the `src` attribute set to `\"https://example.com/image.jpg\"` and the `alt` attribute set to `\"Example Image\"`. If the image fails to load, the `Img` component will display a placeholder icon instead.\n## Questions: \n 1. What does this code do?\n This code exports a React component called `Img` that renders an image. If the image fails to load, it displays a fallback icon instead.\n\n2. What dependencies does this code have?\n This code imports several dependencies, including `@fortawesome/free-solid-svg-icons`, `@fortawesome/react-fontawesome`, `@stitches/react`, and `react`. It also uses the `useState` and `useEffect` hooks from `react`.\n\n3. What is the purpose of the `useEffect` hook in this code?\n The `useEffect` hook is used to reset the `imageBroken` state to `false` whenever the `src` prop changes. This ensures that the fallback icon is only displayed when the image fails to load, not when the `src` prop is updated.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/Img.md"}}],["1545",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/InfoTooltip.tsx)\n\nThe code above is a React component that renders an information tooltip with an icon. The tooltip is displayed when the user hovers over the icon. The component takes in four props: `side`, `content`, `width`, and `kind`. \n\nThe `side` prop determines the position of the tooltip relative to the icon. It can be set to `top`, `bottom`, `left`, or `right`. The `content` prop is the text that will be displayed in the tooltip. The `width` prop determines the width of the tooltip. The `kind` prop is optional and can be set to either `'info'` or `'error'`. If it is set to `'error'`, the tooltip will be styled with an error accent color.\n\nThe component uses the `Popover` and `Box` components from an external library, as well as the `FontAwesomeIcon` component from the `@fortawesome/react-fontawesome` library. The `Popover` component is responsible for displaying the tooltip when the user hovers over the icon. The `Box` component is used to wrap the icon and apply styles to it. The `FontAwesomeIcon` component renders the icon itself, which is an information circle by default.\n\nThis component can be used in a larger project to provide users with additional information or context about certain elements on the page. For example, it could be used to provide definitions for technical terms or to explain the purpose of certain buttons or links. Here is an example of how the component could be used:\n\n```\nimport InfoTooltip from './InfoTooltip'\n\nconst MyComponent = () => {\n return (\n \n \n \n
\n )\n}\n```\n\nIn this example, an `InfoTooltip` component is added to a button to provide users with information about what the button does. The tooltip will be displayed on the right side of the button when the user hovers over the icon. The text in the tooltip will read \"Click this button to save your changes.\" and the width of the tooltip will be 200 pixels.\n## Questions: \n 1. What is the purpose of this code?\n- This code defines a React component called `InfoTooltip` that renders a popover with an icon and text content.\n\n2. What are the required and optional props for this component?\n- The required props are `side`, `content`, and `width`, while the optional prop is `kind` which can be either `'info'` or `'error'`.\n\n3. What other components or libraries are being imported and used in this code?\n- This code imports and uses the `FontAwesomeIcon` component from the `@fortawesome/react-fontawesome` library, as well as the `faInfoCircle` icon from the `@fortawesome/free-solid-svg-icons` library. It also imports the `Box`, `Popover`, and `Text` components from an unknown module or library represented by `'.'`.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/InfoTooltip.md"}}],["1546",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Input.tsx)\n\nThe `Input` component in this file is a custom input field that can be used in a React application. It is built using the `styled` function from the `stitches.config` file, which allows for the creation of custom styles for HTML elements. \n\nThe `StyledInput` component is created using the `styled` function and is passed an `'input'` string as its first argument. This creates a new component that is an input field with custom styles. The styles include resetting all default styles with `all: 'unset'`, setting the width to `100%`, adding padding, setting the border radius, font family, font size, and text color. The background color is set to `$inputBackground`, which is a variable defined in the `stitches.config` file. The `$$focusColor` variable is also defined in the `stitches.config` file and is used to set the color of the input field when it is in focus. \n\nThe `StyledInput` component also includes styles for the placeholder text and focus state. Additionally, there are styles for removing the up and down arrows on number inputs in webkit browsers and for displaying number inputs as text fields in Firefox. \n\nThe `Input` component is then created using the `forwardRef` function from React. This allows the `ref` to be passed to the `StyledInput` component. The `Input` component also accepts several props, including `icon`, `containerCss`, and `iconCss`. The `icon` prop is used to add an icon to the input field, the `containerCss` prop is used to add custom styles to the container of the input field, and the `iconCss` prop is used to add custom styles to the icon. \n\nThe `Input` component is a wrapper around the `StyledInput` component and includes the ability to add an icon to the input field. The `icon` prop is passed to a `Box` component that is absolutely positioned within the container of the input field. The `StyledInput` component is then rendered within a `Flex` component, which allows for the icon and input field to be displayed side by side. \n\nOverall, this file provides a reusable `Input` component that can be used throughout a React application. It includes custom styles for the input field and the ability to add an icon to the input field.\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a custom input component that can be used in a React application. It includes styling for the input and an optional icon.\n\n2. What external libraries or dependencies does this code use?\n- This code uses the `stitches.config` and `@stitches/react` libraries for styling, as well as the `react` library for building the component.\n\n3. What props can be passed to the `Input` component?\n- The `Input` component accepts props for the input element, as well as additional props for an optional icon and custom styling for the container and icon. These props are passed as an object with the `icon`, `containerCss`, and `iconCss` properties.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/Input.md"}}],["1547",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Loader.tsx)\n\nThis code defines a React component called `Loader` that displays a spinning icon to indicate that content is loading. The component imports several dependencies, including the `faSpinner` icon from the `@fortawesome/free-solid-svg-icons` library, the `styled` function from a `stitches.config` file, and the `motion` and `FontAwesomeIcon` components from the `framer-motion` and `@fortawesome/react-fontawesome` libraries, respectively.\n\nThe `Loader` component is defined as a function that takes in props of type `ComponentPropsWithoutRef\n {isLoading ? (\n
\n )\n}\n\nexport default App\n```\n\nIn this example, the `Loader` component is conditionally rendered based on the value of the `isLoading` state variable. When `isLoading` is `true`, the `Loader` component is displayed, and when `isLoading` is `false`, the fetched data is rendered instead. This provides a visual cue to the user that content is being loaded and prevents them from interacting with the page until the data is ready.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a Loader component that displays a spinning icon while content is loading.\n\n2. What libraries or frameworks are being used in this code?\n This code imports several libraries including '@fortawesome/free-solid-svg-icons', 'react', '@fortawesome/react-fontawesome', 'framer-motion', and a custom library called 'stitches.config'.\n\n3. What styling is applied to the Loader component?\n The Loader component is styled using the 'stitches.config' library to center the icon horizontally and vertically and set the color to '$neutralText'.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/Loader.md"}}],["1548",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Popover.tsx)\n\nThe code defines a custom React component called `RKPopover` that wraps the `Popover` component from the `@radix-ui/react-popover` library. The `RKPopover` component takes in several props, including `content`, `side`, and `width`, which are used to customize the appearance and behavior of the popover.\n\nThe `RKPopover` component renders a `Popover.Root` component that contains a `Popover.Trigger` and a `Popover.Content`. The `Popover.Trigger` component is a wrapper around the `children` prop, which is passed in as a child of the `RKPopover` component. The `Popover.Content` component contains an `Arrow` component and a `Box` component that wraps the `content` prop.\n\nThe `Arrow` component is a custom styled component that renders a small arrow that points to the `Popover.Trigger` component. The `Box` component is another custom styled component that wraps the `content` prop and applies some styles to it, including padding, a maximum width, and a background color.\n\nThe `RKPopover` component is designed to be used as a customizable popover that can be triggered by clicking on a button or other element. The `content` prop can be used to pass in any React node, such as text, images, or other components, that will be displayed inside the popover. The `side` prop can be used to specify which side of the trigger element the popover should appear on, and the `width` prop can be used to specify the width of the popover.\n\nHere is an example of how the `RKPopover` component might be used in a larger project:\n\n```\nimport React from 'react'\nimport RKPopover from './components/RKPopover'\n\nconst MyComponent = () => {\n return (\n \n {/* Render data here */}\n
\n )}\n \n Hello, world!
} side=\"right\" width=\"200px\">\n \n \n \n )\n}\n```\n\nIn this example, the `RKPopover` component is used to create a popover that appears to the right of a button when it is clicked. The `content` prop is set to a simple `div` element that contains the text \"Hello, world!\", and the `width` prop is set to 200 pixels.\n## Questions: \n 1. What is the purpose of this code and how is it used in the zoo project?\n This code defines a custom popover component called `RKPopover` that is used to display content in a popover. It is likely used throughout the zoo project wherever a popover is needed.\n\n2. What is the significance of the `styled` function and how is it used in this code?\n The `styled` function is used to create custom styled components for the `Arrow` and `Content` components of the popover. It allows for easy customization of the appearance of these components using CSS-in-JS syntax.\n\n3. What are the available props for the `RKPopover` component and how are they used?\n The available props for the `RKPopover` component include `content`, `side`, and `width`, which are used to specify the content to display in the popover, the side of the trigger element to display the popover on, and the width of the popover, respectively. These props are passed down to the `Popover` components as well as the custom `Box` component used to display the content.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/Popover.md"}}],["1549",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/PseudoInput.tsx)\n\nThe code above is a styled component that creates a PseudoInput element. The purpose of this component is to provide a consistent and customizable input element that can be used throughout the larger project. \n\nThe component is created using the styled function from the Stitches library, which allows for easy creation of custom styles for HTML elements. The first argument passed to the styled function is the HTML element to be styled, in this case a div. The second argument is an object containing the CSS properties and values to be applied to the element.\n\nThe CSS properties applied to the PseudoInput element include resetting all default styles with \"all: unset\", setting the width to \"auto\", adding padding and a border radius, setting the font family, size, and weight, and defining the text and background colors. These styles can be easily customized by modifying the values in the object passed to the styled function.\n\nThe PseudoInput component is then exported as the default export of the module, allowing it to be imported and used in other parts of the project. For example, if a form component needs an input element, it can import the PseudoInput component and use it like so:\n\n```\nimport PseudoInput from './path/to/PseudoInput'\n\nfunction Form() {\n return (\n \n )\n}\n```\n\nOverall, the PseudoInput component provides a reusable and customizable input element that can be used throughout the larger project, helping to maintain consistency and reduce code duplication.\n## Questions: \n 1. What is the purpose of the `styled` function and where is it imported from?\n - The `styled` function is used to create a styled component and it is imported from the `stitches.config` file located in the parent directory.\n2. What is the significance of the `all: 'unset'` property in the style object?\n - The `all: 'unset'` property resets all CSS properties to their initial values, which ensures that no unwanted styles are inherited by the component.\n3. What is the `$space` variable used for in the `borderRadius` property?\n - The `$space` variable is likely a value defined in the `stitches.config` file and is used to set the border radius to a specific value based on the design system's spacing scale.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/PseudoInput.md"}}],["1550",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/ScrollArea.tsx)\n\nThe code defines a custom scrollable area component called `RKScrollArea` using the `@radix-ui/react-scroll-area` package and the `stitches.config` file. The component has a fixed height of 322 pixels, a border radius of `$space$2`, and a box shadow of `0 2px 10px $inputBackground`. It also has a transparent background color and inherits the border radius of its parent element. \n\nThe `RKScrollArea` component has four child components: `ScrollAreaViewport`, `ScrollAreaScrollbar`, `ScrollAreaThumb`, and `ScrollAreaCorner`. The `ScrollAreaViewport` component is the container for the scrollable content. The `ScrollAreaScrollbar` component is the container for the scroll bar and has two orientations: vertical and horizontal. The `ScrollAreaThumb` component is the draggable handle of the scrollbar. The `ScrollAreaCorner` component is the corner where the vertical and horizontal scrollbars meet.\n\nThe `RKScrollArea` component takes in any children components and passes them to the `ScrollAreaViewport` component. The `ScrollAreaScrollbar` component has two `orientation` props: `vertical` and `horizontal`. The `ScrollAreaThumb` component is a child of the `ScrollAreaScrollbar` component and is responsible for the draggable handle of the scrollbar. The `ScrollAreaCorner` component is a child of the `ScrollArea` component and is responsible for the corner where the vertical and horizontal scrollbars meet.\n\nThe `RKScrollArea` component can be used in any part of the project where a custom scrollable area is needed. For example, it can be used in a long list of items where the user needs to scroll through the list. The component can be styled using the `stitches.config` file to match the design of the project. \n\nExample usage:\n\n```\nimport RKScrollArea from './path/to/RKScrollArea'\n\nconst longList = ['item1', 'item2', 'item3', ...]\n\nconst MyComponent = () => {\n return (\n {item}
\n ))}\n \n
\n )\n}\n```\n\nIn this example, the Slider component is used to render a slider that updates the value in state when the user drags the thumb. The current value is displayed in a paragraph element.\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom slider component using React and the Radix UI Slider library.\n\n2. What are the styled components used in this code and what are their styles?\n The code defines four styled components: `SliderRoot`, `SliderTrack`, `SliderRange`, and `SliderThumb`. `SliderRoot` sets the overall style of the slider, `SliderTrack` sets the style of the track that the thumb slides on, `SliderRange` sets the style of the range between the start and end points of the thumb, and `SliderThumb` sets the style of the thumb itself.\n\n3. What props can be passed to the `Slider` component?\n The `Slider` component accepts all props that can be passed to the `SliderRoot` component, which is defined as `ComponentPropsWithoutRefValue: {value}
\n\n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n This code defines a custom switch component using React and the Radix UI library.\n\n2. What are the styles applied to the switch component?\n The switch component has a width of 46, a height of 24, a rounded border, and a background color that changes when checked. The thumb of the switch has a width and height of 20, a rounded border, and a background color that also changes when checked. The switch has a focus style that adds a box shadow and a border color.\n\n3. What are the dependencies of this code?\n This code depends on React, the Stitches CSS-in-JS library, and the Radix UI library.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/Switch.md"}}],["1554",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Text.tsx)\n\nThis code exports a styled `span` component using the `styled` function from the `stitches.config` module. The purpose of this code is to provide a flexible and customizable way to style text elements in the larger project. \n\nThe component has default styles for `color`, `fontFamily`, `letterSpacing`, and `margin`. It also has two variants: `color` and `style`. \n\nThe `color` variant allows the user to specify the color of the text using a set of predefined options. These options include `base`, `subtle`, `error`, `errorLight`, `accent`, `success`, and `button`. The `style` variant allows the user to specify the style of the text using a set of predefined options. These options include `h2`, `h3`, `h4`, `h5`, `h6`, `subtitle1`, `subtitle2`, `body1`, `body2`, `body3`, and `tiny`. \n\nThe `italic` and `ellipsify` variants allow the user to add additional styles to the text. The `italic` variant takes a boolean value and adds italic styling to the text if `true`. The `ellipsify` variant takes a boolean value and adds ellipsis styling to the text if `true`. \n\nThe `compoundVariants` property allows the user to combine multiple variants together. In this case, it combines the `tiny` style with the `base` color. \n\nThe `defaultVariants` property sets the default values for the `style` and `color` variants. In this case, the default style is `body1` and the default color is `base`. \n\nOverall, this code provides a flexible and customizable way to style text elements in the larger project. Here is an example of how this component can be used to style a `h1` element with the `accent` color and `h2` style:\n\n```\nimport Text from './Text'\n\n\n \n \n \n
\n )\n}\n```\n## Questions: \n 1. What is the purpose of this code?\n- This code exports a custom Tooltip component that uses the `@radix-ui/react-tooltip` and `@radix-ui/react-popover` libraries to display tooltips and popovers. It also uses the `@react-hookz/web` library to determine if the device is a small screen.\n\n2. What are the props that can be passed to the Tooltip component?\n- The Tooltip component accepts the following props: `children`, `content`, `open`, `defaultOpen`, `onOpenChange`, and `delayDuration`. It also accepts any additional props that can be passed to the `Popover.Content` or `TooltipPrimitive.Content` components.\n\n3. What is the difference between the Tooltip and Popover components?\n- The Tooltip component is used for small devices and displays a tooltip when the user hovers over the trigger element. The Popover component is used for larger devices and displays a popover when the user clicks on the trigger element.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/Tooltip.md"}}],["1557",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/index.ts)\n\nThis code exports a series of components from the `zoo` project. These components are used to create a user interface for the larger project. \n\nEach export statement is followed by the name of the component and the file path where it can be found. The components include `Anchor`, `Box`, `Button`, `Flex`, `EthLogo`, `FormatWrappedCurrency`, `FormatCurrency`, `FormatCryptoCurrency`, `Input`, `Text`, `Grid`, `Loader`, `Switch`, `Select`, `Slider`, `Popover`, `ToggleGroup`, `ToggleGroupButton`, `DateInput`, `ErrorWell`, `CryptoCurrencyIcon`, `Tooltip`, and `Img`. \n\nThese components can be imported into other files within the `zoo` project or in other projects that use the `zoo` library. For example, if a developer wants to use the `Button` component in a file, they can import it like this:\n\n```\nimport { Button } from 'zoo';\n```\n\nThen they can use the `Button` component in their code like this:\n\n```\n\n```\n\nOverall, this code serves as a way to organize and export the various components used in the `zoo` project. By exporting them in this way, other developers can easily use these components in their own code without having to manually copy and paste the code for each component.\n## Questions: \n 1. What is the purpose of this code?\n This code exports various components from different files located in the `zoo` project.\n\n2. What are some examples of the components being exported?\n Some examples of the components being exported include `Anchor`, `Box`, `Button`, `Flex`, `Input`, `Text`, `Grid`, `Loader`, `Switch`, `Select`, `Slider`, `Popover`, `ToggleGroup`, `DateInput`, `ErrorWell`, `CryptoCurrencyIcon`, `Tooltip`, and `Img`.\n\n3. Are there any dependencies required for these components to work?\n It is unclear from this code whether there are any dependencies required for these components to work. Additional information or documentation may be needed to determine this.","metadata":{"source":".autodoc/docs/markdown/ui/src/primitives/index.md"}}],["1558",{"pageContent":"[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/themes/ReservoirKitTheme.ts)\n\nThe code defines interfaces and types for the ReservoirKitTheme and ReservoirKitOverrides objects, as well as a ReservoirKitThemeColors object. The ReservoirKitTheme object contains properties for radii, fonts, colors, and assets. The radii property is an object with a single property, borderRadius, which is a string. The fonts property is an object with properties for body, button, and headline, which are all strings. The colors property is an object of type ReservoirKitThemeColors, which contains a variety of color properties for different parts of the UI. The assets property is an object with a single property, ethIcon, which is a string that can be one of three values: 'glyph', 'gray', or 'purple'.\n\nThe ReservoirKitOverrides type is an object that can contain any of the properties of the ReservoirKitTheme object, allowing for customization of the theme. The ReservoirKitSharedTheme type is a subset of the ReservoirKitTheme type, containing only the fonts and radii properties. The sharedThemeConfig function takes an optional overrides parameter of type ReservoirKitOverrides and returns a ReservoirKitSharedTheme object. The function sets the borderRadius property of the radii object to the value of the borderRadius property of the overrides object, or '4px' if it is not defined. The body, button, and headline properties of the fonts object are set to the values of the font, buttonFont, and headlineFont properties of the overrides object, respectively, or 'sans-serif' if they are not defined.\n\nThis code is part of the larger ReservoirKit project and provides a way to define and customize the theme of the UI. The ReservoirKitTheme object can be used to define the default theme, while the ReservoirKitOverrides object can be used to customize the theme for specific use cases. The sharedThemeConfig function provides a way to generate a ReservoirKitSharedTheme object from an overrides object, which can be used to apply the customized theme to components. For example, the following code could be used to create a customized button component:\n\n```\nimport { sharedThemeConfig } from 'zoo';\n\nconst overrides = {\n borderRadius: '8px',\n font: 'Roboto',\n buttonFont: 'Roboto',\n buttonTextColor: '#FFFFFF',\n buttonTextHoverColor: '#CCCCCC',\n primaryColor: '#FF0000',\n primaryHoverColor: '#CC0000',\n wellBackground: '#FFFFFF',\n textColor: '#000000',\n headerBackground: '#FFFFFF',\n contentBackground: '#FFFFFF',\n footerBackground: '#FFFFFF',\n overlayBackground: '#000000',\n popoverBackground: '#FFFFFF',\n borderColor: '#000000',\n ethIcon: 'purple',\n};\n\nconst sharedTheme = sharedThemeConfig(overrides);\n\nconst Button = () => {\n return (\n My App
\n \n
\n );\n}\n\nexport default App;\n```",
- "questions": "1. What is the purpose of the `ConnectButton` component from the `@rainbow-me/rainbowkit` library?\n- The `ConnectButton` component is used to render a custom connect button for a wallet.\n\n2. What is the purpose of the `ConnectWalletButton` component?\n- The `ConnectWalletButton` component is a functional component that renders a custom connect wallet button using the `ConnectButton` component.\n\n3. What happens when the `ConnectWalletButton` is clicked?\n- When the `ConnectWalletButton` is clicked, it opens a connect modal if the `mounted`, `account`, and `chain` variables are truthy. If any of these variables are falsy, the button does not do anything.",
- "checksum": "b300116a93d641ad609d5109b2c398b9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/app/components/ErrorTrackingProvider.json b/.autodoc/docs/json/app/components/ErrorTrackingProvider.json
deleted file mode 100644
index 49d098222..000000000
--- a/.autodoc/docs/json/app/components/ErrorTrackingProvider.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ErrorTrackingProvider.tsx",
- "filePath": "app/components/ErrorTrackingProvider.tsx",
- "url": "zoo-labs/zoo/blob/master/app/components/ErrorTrackingProvider.tsx",
- "summary": "This code is a module that provides error tracking functionality for a React-based project. It imports the Sentry library, which is a popular tool for tracking and reporting errors in web applications. The module defines a React functional component called ErrorTrackingProvider, which takes a single prop called children that represents the child components that will be rendered by this component.\n\nThe ErrorTrackingProvider component uses the useAccount hook from the 'wagmi' library to get the current user's address. It then uses the useEffect hook to set up a side effect that will run whenever the address changes. If the SENTRY_DSN environment variable is defined, the component will use the Sentry.setUser method to set the current user's address as the user ID in Sentry. If there is no address, it will set the user to null.\n\nThe purpose of this module is to provide a way to track errors that occur in the application and associate them with specific users. By setting the user ID in Sentry, developers can easily see which errors are affecting which users and take appropriate action to fix them. This module can be used as a wrapper around other components in the application to ensure that error tracking is always enabled.\n\nExample usage:\n\n```\nimport ErrorTrackingProvider from './ErrorTrackingProvider'\n\nfunction App() {\n return (\n Welcome to my app
\nMy app content
\n Welcome to My Web App
\nThis is a sample web app that uses the zoo manifest file.
\n \n\n```\n\nIn this example, the web app includes a link to the \"manifest.json\" file, which contains the code we discussed earlier. This allows the web app to use the specified icons and colors, and to be displayed as a standalone app.", - "questions": "1. What is the purpose of this code?\n This code is a JSON object that defines various properties of icons and colors for a web app.\n\n2. Where is this code used in the project?\n It is not clear from this code snippet where it is used in the project. It could be part of a configuration file or a script that generates HTML code.\n\n3. Are there any dependencies or requirements for this code to work properly?\n It is not clear from this code snippet if there are any dependencies or requirements for this code to work properly. It is possible that other parts of the project rely on this code to be present and correctly formatted.", - "checksum": "0a7ce2e82b0357ebf2602e9d6fad7789" -} \ No newline at end of file diff --git a/.autodoc/docs/json/app/sentry.client.config.json b/.autodoc/docs/json/app/sentry.client.config.json deleted file mode 100644 index 9461cbf12..000000000 --- a/.autodoc/docs/json/app/sentry.client.config.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "sentry.client.config.ts", - "filePath": "app/sentry.client.config.ts", - "url": "zoo-labs/zoo/blob/master/app/sentry.client.config.ts", - "summary": "This file is responsible for configuring the initialization of Sentry on the client side of the zoo project. Sentry is a tool that helps developers monitor and fix errors in their applications. \n\nThe code imports the necessary modules from the `@sentry/nextjs` and `@sentry/integrations` packages. It then calls the `Sentry.init()` method to initialize Sentry with the provided configuration options. \n\nThe `dsn` option specifies the Data Source Name (DSN) for Sentry, which is a unique identifier for the project. This value is retrieved from the `NEXT_PUBLIC_SENTRY_DSN` environment variable. \n\nThe `tracesSampleRate` option determines the percentage of transactions that will be sent to Sentry for performance monitoring. In this case, it is set to 1, meaning that all transactions will be sent. \n\nThe `debug` option controls whether or not debug information will be printed to the console during setup. It is set to false in this case. \n\nThe `replaysOnErrorSampleRate` option determines the percentage of errors that will be recorded for session replay. It is set to 1.0, meaning that all errors will be recorded. \n\nThe `replaysSessionSampleRate` option determines the percentage of sessions that will be recorded for session replay. It is set to 0.1, meaning that only 10% of sessions will be recorded. \n\nThe `integrations` option is an array of integrations that will be used with Sentry. In this case, two integrations are included: `Replay` and `CaptureConsoleIntegration`. The `Replay` integration enables session replay, which allows developers to see a video of a user's session leading up to an error. The `CaptureConsoleIntegration` integration captures console messages of a specified level (in this case, only `error` messages are captured) and sends them to Sentry for monitoring. \n\nOverall, this file sets up Sentry with the necessary configuration options and integrations to monitor errors and performance in the zoo project. Developers can use Sentry to identify and fix issues in their application, improving the overall user experience. \n\nExample usage:\n\n```javascript\nimport * as Sentry from '@sentry/nextjs'\n\n// Initialize Sentry with custom configuration options\nSentry.init({\n dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,\n tracesSampleRate: 1,\n debug: false,\n replaysOnErrorSampleRate: 1.0,\n replaysSessionSampleRate: 0.1,\n integrations: [\n new Sentry.Replay({\n maskAllText: true,\n blockAllMedia: true,\n }),\n new Sentry.CaptureConsoleIntegration({\n levels: ['error'],\n }),\n ],\n})\n\n// Log an error to the console\nconsole.error('An error occurred')\n\n// Sentry will capture the error and send it for monitoring\n```", - "questions": "1. What is Sentry and how does it work with Next.js?\n- Sentry is a tool for error tracking and monitoring. This code initializes Sentry on the client side of a Next.js application, allowing it to capture and report errors that occur in the user's browser.\n\n2. What is the purpose of the `tracesSampleRate` option?\n- The `tracesSampleRate` option determines the percentage of requests that will be traced by Sentry. In this code, it is set to 1, meaning that all requests will be traced. This value should be adjusted in production to avoid excessive data usage.\n\n3. What is the `CaptureConsoleIntegration` and what does it do?\n- The `CaptureConsoleIntegration` is an integration provided by Sentry that captures console messages (such as `console.error()`) and sends them to Sentry for error tracking. In this code, it is configured to only capture `error` messages.", - "checksum": "b2633cb0de46e45b91b7beb68538572c" -} \ No newline at end of file diff --git a/.autodoc/docs/json/app/sentry.edge.config.json b/.autodoc/docs/json/app/sentry.edge.config.json deleted file mode 100644 index ff549a27e..000000000 --- a/.autodoc/docs/json/app/sentry.edge.config.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "sentry.edge.config.ts", - "filePath": "app/sentry.edge.config.ts", - "url": "zoo-labs/zoo/blob/master/app/sentry.edge.config.ts", - "summary": "This code initializes Sentry for edge features in the zoo project. Sentry is a tool that helps developers monitor and fix errors in their applications. The configuration added in this file will be used whenever one of the edge features is loaded. This configuration is also required when running the project locally.\n\nThe code imports the Sentry library using the '@sentry/nextjs' package. It then calls the 'init' method on the Sentry object and passes in an object with configuration options. \n\nThe 'dsn' option is set to the value of the 'NEXT_PUBLIC_SENTRY_DSN' environment variable. This is the Data Source Name (DSN) for the Sentry project, which is used to identify and send error reports to the correct project.\n\nThe 'tracesSampleRate' option is set to 1, which means that all transactions will be sent to Sentry. This option can be adjusted in production to reduce the amount of data sent to Sentry.\n\nThe 'debug' option is set to false, which means that no additional information will be printed to the console during setup.\n\nOverall, this code ensures that Sentry is properly configured for edge features in the zoo project, allowing developers to monitor and fix errors in their application. \n\nExample usage:\n\n```\nimport * as Sentry from '@sentry/nextjs'\n\nSentry.init({\n dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,\n tracesSampleRate: 1,\n debug: false,\n})\n\n// Example code that could potentially throw an error\ntry {\n // some code here\n} catch (error) {\n Sentry.captureException(error)\n}\n```", - "questions": "1. What is Sentry and why is it being used in this project?\n - Sentry is a tool used for error tracking and monitoring. It is being initialized in this project for edge features such as middleware and edge routes.\n \n2. What is the purpose of the `tracesSampleRate` option and why is it set to 1?\n - The `tracesSampleRate` option determines the percentage of requests that will be traced by Sentry. It is set to 1 in this code, meaning that all requests will be traced.\n\n3. What is the purpose of the `debug` option and why is it set to false?\n - The `debug` option is used to print useful information to the console while setting up Sentry. It is set to false in this code, meaning that this information will not be printed.", - "checksum": "a0e15264066dc64d043c937560b11de2" -} \ No newline at end of file diff --git a/.autodoc/docs/json/app/sentry.server.config.json b/.autodoc/docs/json/app/sentry.server.config.json deleted file mode 100644 index 30ce5585d..000000000 --- a/.autodoc/docs/json/app/sentry.server.config.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "sentry.server.config.ts", - "filePath": "app/sentry.server.config.ts", - "url": "zoo-labs/zoo/blob/master/app/sentry.server.config.ts", - "summary": "This file is responsible for configuring the initialization of Sentry on the server. Sentry is a tool that helps developers monitor and fix errors in their applications. The code imports the Sentry library from the '@sentry/nextjs' package and initializes it with a configuration object. \n\nThe configuration object contains three properties: \n1. dsn: This property is set to the value of the environment variable NEXT_PUBLIC_SENTRY_DSN. This is the Data Source Name (DSN) that Sentry uses to identify the project and send error reports to the correct location. \n2. tracesSampleRate: This property is set to 1, which means that all requests will be traced by Sentry. In production, this value should be adjusted to a lower value to reduce the amount of data sent to Sentry and improve performance. Alternatively, the tracesSampler property can be used to provide greater control over which requests are traced. \n3. debug: This property is set to false, which means that Sentry will not print any useful information to the console during setup. This can be set to true during development to help with debugging.\n\nThis code is an important part of the larger project because it enables developers to monitor and fix errors in the application. By configuring Sentry on the server, developers can receive real-time notifications of errors and quickly identify and fix issues. \n\nHere is an example of how this code might be used in a larger project: \n\n```\n// server.js\n\nimport express from 'express'\nimport * as Sentry from '@sentry/nextjs'\nimport { createServer } from 'http'\n\nconst app = express()\n\n// Initialize Sentry\nSentry.init({\n dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,\n tracesSampleRate: 0.5,\n debug: true,\n})\n\n// Add Sentry middleware to the express app\napp.use(Sentry.Handlers.requestHandler())\n\n// Define routes\napp.get('/', (req, res) => {\n res.send('Hello World!')\n})\n\n// Add Sentry error handling middleware to the express app\napp.use(Sentry.Handlers.errorHandler())\n\n// Create server and listen on port 3000\nconst server = createServer(app)\nserver.listen(3000, () => {\n console.log('Server listening on port 3000')\n})\n```\n\nIn this example, the code initializes Sentry with a DSN from an environment variable and sets the tracesSampleRate to 0.5. It then adds Sentry middleware to the express app to handle requests and errors. Finally, it creates a server and listens on port 3000. \n\nOverall, this code is an essential part of any project that uses Sentry for error monitoring and provides developers with a powerful tool for identifying and fixing issues in their applications.", - "questions": "1. What is Sentry and why is it being used in this project?\n - Sentry is a tool for error tracking and monitoring. It is being used in this project to handle errors that occur on the server and provide useful information for debugging.\n\n2. What is the purpose of the `tracesSampleRate` option and why is it set to 1?\n - The `tracesSampleRate` option determines the percentage of requests that will be traced by Sentry. A value of 1 means that all requests will be traced. This may be adjusted in production to reduce the amount of data collected.\n\n3. What is the significance of the `debug` option and why is it set to false?\n - The `debug` option controls whether or not Sentry will print useful information to the console during setup. It is set to false in this code to prevent cluttering the console with unnecessary information.", - "checksum": "ccf808d00ecd0ea1167b2069fdf55efb" -} \ No newline at end of file diff --git a/.autodoc/docs/json/app/stitches.config.json b/.autodoc/docs/json/app/stitches.config.json deleted file mode 100644 index 1979a5e2f..000000000 --- a/.autodoc/docs/json/app/stitches.config.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "stitches.config.ts", - "filePath": "app/stitches.config.ts", - "url": "zoo-labs/zoo/blob/master/app/stitches.config.ts", - "summary": "This code is responsible for creating and configuring the theme for the `zoo` project. It uses the `@stitches/react` library to create a theme object that contains various properties such as colors, fonts, sizes, and media queries. The `createStitches` function is used to create the theme object and also returns several utility functions that can be used to create styles for components.\n\nThe `colors` property of the theme object is defined using the `@radix-ui/colors` library, which provides a set of predefined color scales. These color scales are then combined and aliased to create the final color palette for the project. The `createTheme` function is used to create a dark theme that is a variation of the main theme.\n\nThe `utils` property of the theme object contains various utility functions that can be used to create styles for components. These functions include margin, padding, width, height, and grid-related functions. The `media` property contains various media queries that can be used to create responsive styles for components.\n\nThe `globalCss` function is used to apply a global CSS reset to the project. The `Inter` font from Google Fonts is also imported and used as the default font for the project.\n\nOverall, this code provides a centralized way to manage the theme for the `zoo` project. It allows for easy customization of the color palette and provides utility functions that can be used to create consistent styles for components. Here is an example of how the `styled` function can be used to create a styled component using the theme:\n\n```\nimport { styled } from 'zoo'\n\nconst Button = styled('button', {\n backgroundColor: '$primary1',\n color: '$whiteA11',\n padding: '$2',\n borderRadius: '$radii',\n '&:hover': {\n backgroundColor: '$primary2',\n },\n})\n```", - "questions": "1. What is the purpose of the `createStitches` function and what does it return?\n- The `createStitches` function is used to create a styling system for the project using the `@stitches/react` library. It returns an object with several properties including `createTheme`, `keyframes`, `styled`, `globalCss`, and `getCssText`.\n\n2. What is the purpose of the `utils` object within the `createStitches` function?\n- The `utils` object contains utility functions that can be used to generate CSS properties for margin, padding, dimensions, and grid. These functions can be used within the `styled` function to create custom styles.\n\n3. What is the purpose of the `darkTheme` object and how is it different from the default theme?\n- The `darkTheme` object is an alternative theme that can be used for dark mode. It contains different color values for the same color aliases used in the default theme, as well as some additional color values for accent and panel styling.", - "checksum": "62913d4ca4d7adb72e17af427520510c" -} \ No newline at end of file diff --git a/.autodoc/docs/json/app/tsconfig.json b/.autodoc/docs/json/app/tsconfig.json deleted file mode 100644 index cdfd01d6f..000000000 --- a/.autodoc/docs/json/app/tsconfig.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "tsconfig.json", - "filePath": "app/tsconfig.json", - "url": "zoo-labs/zoo/blob/master/app/tsconfig.json", - "summary": "This code is a configuration file for the TypeScript compiler. It specifies the compiler options and the files to be included or excluded from the compilation process. \n\nThe \"compilerOptions\" object contains various settings for the compiler, such as the target version of ECMAScript to compile to, the libraries to include, whether to allow JavaScript files to be compiled, and whether to enforce strict type checking. \n\nThe \"include\" and \"exclude\" arrays specify the files to be included or excluded from the compilation process. In this case, the \"include\" array includes all TypeScript and TypeScript React files in the project, while the \"exclude\" array excludes the \"node_modules\" directory. \n\nThis configuration file is an important part of the TypeScript project, as it ensures that the TypeScript code is compiled correctly and efficiently. It can be used in conjunction with other tools and frameworks to build and deploy TypeScript applications. \n\nFor example, in a Node.js project, this configuration file can be used with the \"tsc\" command to compile TypeScript files into JavaScript files that can be executed by Node.js. \n\n```\n// Example usage of the TypeScript compiler with this configuration file\ntsc\n```\n\nOverall, this code is a crucial part of the TypeScript project and ensures that the TypeScript code is compiled correctly and efficiently.", - "questions": "1. What is the purpose of this code file?\n - This code file is a configuration file for TypeScript compiler options for the project called zoo.\n\n2. What version of ECMAScript is being targeted?\n - The code is targeting ECMAScript 5.\n\n3. What files are being included and excluded in the compilation process?\n - The code includes all TypeScript and TypeScript React files with the extensions `.ts` and `.tsx`, as well as a file called `next-env.d.ts`. It excludes the `node_modules` directory.", - "checksum": "33ba263e3e822f2a605ba34d84c0ee22" -} \ No newline at end of file diff --git a/.autodoc/docs/json/app/types/ExpirationOption.json b/.autodoc/docs/json/app/types/ExpirationOption.json deleted file mode 100644 index a53e05b9a..000000000 --- a/.autodoc/docs/json/app/types/ExpirationOption.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "ExpirationOption.ts", - "filePath": "app/types/ExpirationOption.ts", - "url": "zoo-labs/zoo/blob/master/app/types/ExpirationOption.ts", - "summary": "This code defines a TypeScript type called `ExpirationOption`. This type is used to represent an option for an expiration date in the larger project. \n\nThe `ExpirationOption` type has four properties: `text`, `value`, `relativeTime`, and `relativeTimeUnit`. The `text` property is a string that represents the text that will be displayed for the expiration option. The `value` property is a string that represents the value that will be sent to the server when the expiration option is selected. The `relativeTime` property is a number or null that represents the relative time for the expiration option. The `relativeTimeUnit` property is a `ManipulateType` or null that represents the unit of time for the relative time.\n\nThis type can be used in the larger project to represent expiration options for various features such as subscriptions, memberships, or trial periods. For example, if the project has a subscription feature, the `ExpirationOption` type can be used to represent the different subscription plans available to the user. Each subscription plan can have its own `text`, `value`, `relativeTime`, and `relativeTimeUnit` properties.\n\nHere is an example of how the `ExpirationOption` type can be used in the larger project:\n\n```\nconst subscriptionOptions: ExpirationOption[] = [\n {\n text: 'Monthly Subscription',\n value: 'monthly',\n relativeTime: 1,\n relativeTimeUnit: 'month'\n },\n {\n text: 'Annual Subscription',\n value: 'annual',\n relativeTime: 1,\n relativeTimeUnit: 'year'\n },\n {\n text: 'Lifetime Subscription',\n value: 'lifetime',\n relativeTime: null,\n relativeTimeUnit: null\n }\n]\n```\n\nIn this example, an array of `ExpirationOption` objects is defined to represent the different subscription options available to the user. The first two options have a relative time of 1 month or 1 year, while the third option represents a lifetime subscription with no expiration.", - "questions": "1. What is the purpose of the `ExpirationOption` type?\n - The `ExpirationOption` type is used to represent an option for an expiration date, including its text, value, relative time, and relative time unit.\n\n2. What is the `ManipulateType` import used for?\n - The `ManipulateType` import is used to define the type of the `relativeTimeUnit` property in the `ExpirationOption` type.\n\n3. What library is the `ManipulateType` import from?\n - The `ManipulateType` import is from the `dayjs` library, which is likely used for working with dates and times in the project.", - "checksum": "27d1bcf5f73fe2072a520118e3043375" -} \ No newline at end of file diff --git a/.autodoc/docs/json/app/types/reservoir.d.json b/.autodoc/docs/json/app/types/reservoir.d.json deleted file mode 100644 index ad1f30295..000000000 --- a/.autodoc/docs/json/app/types/reservoir.d.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "reservoir.d.ts", - "filePath": "app/types/reservoir.d.ts", - "url": "zoo-labs/zoo/blob/master/app/types/reservoir.d.ts", - "summary": "The code defines a type called `ArrayItemTypes` which takes in a generic type `T` that extends an array of any type. The type `infer` is used to extract the type of the array elements and assign it to the type variable `U`. The conditional type `T extends (infer U)[] ? U : never` checks if `T` is an array and if so, returns the type `U` (i.e., the type of the array elements). If `T` is not an array, it returns `never`. \n\nThis type can be useful in a larger project where there is a need to extract the type of elements from an array. For example, consider a function that takes in an array of numbers and returns the sum of the elements. Instead of explicitly defining the type of the array elements as `number`, the `ArrayItemTypes` type can be used to extract the type of the elements dynamically. \n\n```typescript\nfunction sumArray\n \n \n \n \n \n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `addParam` function?\n - The `addParam` function adds a parameter with a given name and value to the URL string, and handles cases where multiple parameters with the same name and different values already exist in the URL.\n\n2. What is the purpose of the `removeParam` function?\n - The `removeParam` function removes a parameter with a given name and value from the URL string, and handles cases where multiple parameters with the same name and different values exist in the URL.\n\n3. What is the purpose of the `clearAllAttributes` function?\n - The `clearAllAttributes` function deletes all parameters with names that start with \"attributes[\" and end with \"]\" from the URL string.",
- "checksum": "aec094de2a8b76f03a42f5975b10df00"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/app/utils/till.json b/.autodoc/docs/json/app/utils/till.json
deleted file mode 100644
index ce95d7236..000000000
--- a/.autodoc/docs/json/app/utils/till.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "till.ts",
- "filePath": "app/utils/till.ts",
- "url": "zoo-labs/zoo/blob/master/app/utils/till.ts",
- "summary": "This code is a utility module for working with dates and times in the larger zoo project. It imports the dayjs library, which is a lightweight alternative to Moment.js for parsing, validating, manipulating, and formatting dates and times in JavaScript. The module extends dayjs with the relativeTime plugin, which allows for the calculation of human-readable relative time strings like \"2 hours ago\" or \"in 5 minutes\".\n\nThe module exports two constants and one function. The first constant, DATE_REGEX, is a regular expression that matches a date and time string in the format \"YYYY-MM-DD HH:MM:SS\". This can be used to extract date and time information from raw strings in other parts of the project.\n\nThe second constant is not exported, but is used internally by the timeTill function. It is a string template that formats the output of the fromNow method of dayjs to only include the relative time value (e.g. \"2 hours\").\n\nThe timeTill function takes a single argument, a string representing a date and time in the format \"YYYY-MM-DD HH:MM:SS\". It uses dayjs to parse the string into a date object, and then calculates the relative time between that date and the current time using the fromNow method. The function returns a human-readable string indicating the time remaining until the target time, in the format \"X hours\" or \"Y minutes\", etc.\n\nHere is an example of how this module might be used in the larger zoo project:\n\n```javascript\nimport { timeTill, DATE_REGEX } from 'zoo/date-utils'\n\nconst rawString = 'The event starts at 2022-01-01 12:00:00'\nconst match = rawString.match(DATE_REGEX)\nconst targetTime = match ? match[0] : undefined\n\nif (targetTime) {\n const timeRemaining = timeTill(targetTime)\n console.log(`The event starts in ${timeRemaining}.`)\n} else {\n console.log('Could not find a valid date and time in the string.')\n}\n```\n\nIn this example, we use the DATE_REGEX constant to extract a date and time string from a raw string. We then pass that string to the timeTill function to calculate the relative time until the target time. Finally, we log a message to the console indicating how much time is left until the event starts.",
- "questions": "1. What is the purpose of the `dayjs` library and how is it being used in this code?\n - The `dayjs` library is being used to manipulate and format dates and times. It is being imported and extended with the `relativeTime` plugin, which allows for the calculation of relative time differences. \n2. What is the expected format of the `timeString` parameter in the `timeTill` function?\n - The `timeString` parameter is expected to be in the format \"YYYY-MM-DD HH:MM:SS\". \n3. What is the output format of the `timeTill` function?\n - The `timeTill` function returns a human-readable string indicating the time remaining until the target time, using the `fromNow` method of the `dayjs` library. The output format is a string with a number and a unit of time (e.g. \"2 hours\", \"5 minutes\", etc.).",
- "checksum": "d91cb71f5cd2099c7064dd281c3d4e30"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/app/utils/titleCase.json b/.autodoc/docs/json/app/utils/titleCase.json
deleted file mode 100644
index 637b01468..000000000
--- a/.autodoc/docs/json/app/utils/titleCase.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "titleCase.ts",
- "filePath": "app/utils/titleCase.ts",
- "url": "zoo-labs/zoo/blob/master/app/utils/titleCase.ts",
- "summary": "The `titleCase` function in the `zoo` project is designed to convert a given word to title case format. Title case is a writing style where the first letter of each word is capitalized, except for certain small words like \"and\", \"the\", and \"of\". This function takes a single parameter, `word`, which is the word to be converted to title case. \n\nThe function uses a regular expression to match all words in the input string and then applies a callback function to each match. The callback function takes the matched word and returns a modified version of it in title case format. The modified version is created by capitalizing the first letter of the word using the `toUpperCase()` method and then converting the rest of the word to lowercase using the `toLowerCase()` method. \n\nThis function can be used in a variety of ways within the larger `zoo` project. For example, it could be used to format animal names or exhibit titles in a consistent and professional manner. It could also be used to format user input in forms or search queries to ensure that the input is correctly formatted and matches the expected format. \n\nHere is an example of how to use the `titleCase` function:\n\n```typescript\nimport titleCase from './titleCase';\n\nconst animalName = 'giraffe';\nconst formattedName = titleCase(animalName);\nconsole.log(formattedName); // Output: \"Giraffe\"\n```\n\nIn this example, the `titleCase` function is imported from the `titleCase.ts` file and used to format the `animalName` variable. The resulting `formattedName` variable is then logged to the console, which outputs \"Giraffe\".",
- "questions": "1. What does the `titleCase` function do?\n - The `titleCase` function takes a string input and converts it to title case format, where the first letter of each word is capitalized and the rest are in lowercase.\n2. What is the input parameter for the `titleCase` function?\n - The input parameter for the `titleCase` function is a string called `word`.\n3. What regular expression is used in the `replace` method of the `titleCase` function?\n - The regular expression used in the `replace` method of the `titleCase` function is `/\\w\\S*/g`, which matches any word character followed by zero or more non-space characters.",
- "checksum": "cda07c039c69a36f2b63a6336e35f754"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/app/utils/truncate.json b/.autodoc/docs/json/app/utils/truncate.json
deleted file mode 100644
index 3e2115b69..000000000
--- a/.autodoc/docs/json/app/utils/truncate.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "truncate.ts",
- "filePath": "app/utils/truncate.ts",
- "url": "zoo-labs/zoo/blob/master/app/utils/truncate.ts",
- "summary": "The code above provides two functions that are used to truncate Ethereum addresses and ENS names. The purpose of these functions is to ensure that the addresses and names do not overflow when displayed on a user interface. \n\nThe `truncateAddress` function takes an Ethereum address as its first argument and an optional `shrinkIndicator` as its second argument. The function then returns a truncated version of the address with the middle characters removed. The `slice` method is used to remove the middle characters of the address. The first four characters of the address are concatenated with the `shrinkIndicator` (if provided) and the last four characters of the address. If no `shrinkIndicator` is provided, an ellipsis (`…`) is used as the default indicator. \n\nThe `truncateEns` function takes an ENS name as its first argument and an optional `shrinkIndicator` as its second argument. The function returns a truncated version of the ENS name if and only if the name is longer than 24 characters. The `slice` method is used to remove the middle characters of the name. The first 20 characters of the name are concatenated with the `shrinkIndicator` (if provided) and the last three characters of the name. If no `shrinkIndicator` is provided, an ellipsis (`…`) is used as the default indicator. If the name is shorter than or equal to 24 characters, the function returns the original name without any truncation. \n\nThese functions can be used in a larger project to ensure that Ethereum addresses and ENS names are displayed in a user-friendly way. For example, a web3 application that displays Ethereum addresses and ENS names could use these functions to ensure that the addresses and names fit within a certain space on the user interface. \n\nExample usage of `truncateAddress`:\n```\nconst address = '0x1234567890123456789012345678901234567890'\nconst truncatedAddress = truncateAddress(address)\nconsole.log(truncatedAddress) // '0x12...7890'\n```\n\nExample usage of `truncateEns`:\n```\nconst ensName = 'myverylongensname.eth'\nconst truncatedEnsName = truncateEns(ensName)\nconsole.log(truncatedEnsName) // 'myvery...eth'\n```",
- "questions": "1. What is the purpose of the `truncateAddress` function?\n \n The `truncateAddress` function takes an Ethereum address and a visual indicator and returns a shortened version of the address with the middle characters removed, to prevent overflow.\n\n2. What is the purpose of the `truncateEns` function?\n \n The `truncateEns` function takes an ENS name and a visual indicator and returns a shortened version of the name with the middle characters removed, but only if the name is longer than 24 characters and would otherwise overflow.\n\n3. What is the purpose of the `shrinkInidicator` parameter?\n \n The `shrinkInidicator` parameter is a visual indicator that is used to show that the address or name has been truncated. If it is not provided, the default indicator of '…' is used.",
- "checksum": "18887cd4602c669ea1449c0fd77f8c10"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/app/utils/wrappedContracts.json b/.autodoc/docs/json/app/utils/wrappedContracts.json
deleted file mode 100644
index a0f420b1d..000000000
--- a/.autodoc/docs/json/app/utils/wrappedContracts.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "wrappedContracts.ts",
- "filePath": "app/utils/wrappedContracts.ts",
- "url": "zoo-labs/zoo/blob/master/app/utils/wrappedContracts.ts",
- "summary": "This code defines a constant variable called `wrappedContracts` which is a Record object that maps numbers to Ethereum contract addresses. The keys of the Record object are numbers that represent the Ethereum network ID, and the values are the corresponding contract addresses for that network. \n\nThis code is likely used in a larger project that interacts with Ethereum smart contracts. The purpose of this code is to provide a convenient way to access the contract addresses for different Ethereum networks. By using this Record object, developers can easily retrieve the contract address for a specific network ID without having to hardcode the address in their code. \n\nFor example, if a developer wants to interact with a contract on the Ethereum mainnet, they can use the `wrappedContracts` object to retrieve the contract address like this:\n\n```\nimport wrappedContracts from 'zoo'\n\nconst mainnetAddress = wrappedContracts[1]\n```\n\nThis will set the `mainnetAddress` variable to the contract address for the Ethereum mainnet. Similarly, if the developer wants to interact with a contract on the Polygon network, they can retrieve the contract address like this:\n\n```\nconst polygonAddress = wrappedContracts[137]\n```\n\nOverall, this code provides a simple and flexible way to manage contract addresses for different Ethereum networks in a larger project.",
- "questions": "1. What is the purpose of this code?\n - This code defines a constant object `wrappedContracts` that maps network IDs to contract addresses.\n\n2. What is the data type of `wrappedContracts`?\n - The data type of `wrappedContracts` is `RecordWelcome to my website
\n\tCheck out our latest products!
\n\t\n\t- \n\t\t
- Product 1 \n\t\t
- Product 2 \n\t\t
- Product 3 \n\t
Endangered Animals
\n- \n
- \n
Sumatran Elephant
\n\n Scientific Name: Elephas Maximus Sumatranus
\nSumatran elephants feed on a variety of plants and deposit seeds wherever they go, contributing to a healthy forest ecosystem. They also share their lush forest habitat with other endangered species.
\n \n \n
` tag. The \"image\" property is used to display a picture of the animal using an `![]()
` tag. The \"head\" property is used to display the scientific name of the animal in a `
` tag. The \"desc\" property is used to display a brief description of the animal in another `
` tag. By using the data from the JSON object, the webpage can provide valuable information about endangered animals to users.", - "questions": "1. What is the purpose of this code?\n- This code defines a list of animals in a zoo, along with their images and descriptions.\n\n2. What information is included in the animal descriptions?\n- The animal descriptions include the scientific name of the species, as well as information about their habitat, diet, and conservation status.\n\n3. Are there any other types of data that could be included for each animal?\n- Depending on the needs of the project, additional data such as the animal's lifespan, behavior, or physical characteristics could be included for each animal.", - "checksum": "7b13de114d26de8f615b01ae9cebcdfa" -} \ No newline at end of file diff --git a/.autodoc/docs/json/core/src/animation/index.json b/.autodoc/docs/json/core/src/animation/index.json deleted file mode 100644 index 84af70a94..000000000 --- a/.autodoc/docs/json/core/src/animation/index.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "index.tsx", - "filePath": "core/src/animation/index.tsx", - "url": "zoo-labs/zoo/blob/master/core/src/animation/index.tsx", - "summary": "This code is a collection of functions that use the GreenSock Animation Platform (GSAP) library to create various fade-in animations triggered by scrolling. The `import` statements at the beginning of the file bring in the necessary modules from the GSAP library, including the `ScrollTrigger` plugin. The `registerPlugin` method is then called to register the `ScrollTrigger` plugin with GSAP.\n\nThe `fadeInOnScroll` function takes an HTML element as a parameter and returns a GSAP animation that fades in the element when it enters the viewport during scrolling. The `duration` parameter sets the length of the animation, and the `y` parameter determines the distance the element moves vertically as it fades in. The `scrollTrigger` object specifies the trigger element, the point at which the animation should start (`start: \"top 90%\"`), and the toggle actions that should occur when the element enters and leaves the viewport.\n\nThe `fadeInFromRight` and `fadeInFromLeft` functions are similar to `fadeInOnScroll`, but they animate the element sliding in from the right or left side of the screen, respectively. The `x` parameter determines the distance the element moves horizontally as it fades in.\n\nThe `fadeInFromRightFast` and `fadeInFromLeftFast` functions are similar to their non-\"Fast\" counterparts, but they have shorter animation durations and use a different easing function (`Power4.easeInOut`) for a snappier animation.\n\nThe `fadeInOnScrollAndStagger` function is similar to `fadeInOnScroll`, but it also applies a stagger effect to the animation, causing the elements to fade in one after another with a slight delay. The `trigger` parameter specifies the element that triggers the animation, and the `end` parameter specifies the point at which the animation should end.\n\nThese functions can be used in a larger project to add visual interest and interactivity to a webpage. For example, they could be used to animate the appearance of images or text as the user scrolls down the page. Here is an example of how the `fadeInOnScroll` function could be used to fade in an HTML element with the ID \"myElement\" when it enters the viewport during scrolling:\n\n```\nimport { fadeInOnScroll } from \"zoo\";\n\nconst myElement = document.querySelector(\"#myElement\");\nfadeInOnScroll(myElement);\n```", - "questions": "1. What is the purpose of the `gsap` and `ScrollTrigger` imports?\n- The `gsap` and `ScrollTrigger` imports are used for animation and scroll-triggered animation respectively.\n\n2. What do the `fadeInFromRight`, `fadeInFromRightFast`, `fadeInFromLeft`, and `fadeInFromLeftFast` functions do?\n- These functions animate an element's opacity and position (either from the left or right) when it enters the viewport during scrolling.\n\n3. What is the purpose of the `stagger` property in the `fadeInOnScrollAndStagger` function?\n- The `stagger` property is used to apply a staggered animation effect to multiple elements, with a specified delay between each element's animation.", - "checksum": "021c556c41a5a4153328312e4e01bf74" -} \ No newline at end of file diff --git a/.autodoc/docs/json/core/src/animation/loading-circle.json b/.autodoc/docs/json/core/src/animation/loading-circle.json deleted file mode 100644 index c7f150bdd..000000000 --- a/.autodoc/docs/json/core/src/animation/loading-circle.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "loading-circle.json", - "filePath": "core/src/animation/loading-circle.json", - "url": "zoo-labs/zoo/blob/master/core/src/animation/loading-circle.json", - "summary": "The code is a JSON file that defines an animation project called \"347-loader-18\". The project has a single composition called \"Watermark\" that contains two layers. The first layer is an empty layer called \"comp_0\" that has no content. The second layer is a shape layer called \"Shape Layer 9\" that contains an animated ellipse with a stroke and fill. \n\nThe stroke and fill colors of the ellipse are controlled by two color effects called \"Primary\" and \"Secondary\" respectively. These effects are linked to color controls that can be adjusted to change the colors of the ellipse. The stroke width of the ellipse is controlled by a slider effect called \"Stroke\". The size of the ellipse is fixed at 57x57 pixels, but its position and scale can be adjusted using the \"Axis\" and \"Scale\" effects respectively. \n\nThe purpose of this code is to define an animated loading icon that can be used in a larger project. The loading icon can be customized by adjusting the color, stroke width, position, and scale of the ellipse. The code can be imported into an animation software like Adobe After Effects to create the actual animation. \n\nHere is an example of how the color of the ellipse can be changed using the \"Primary\" effect:\n\n```\nvar primaryColor = [1, 0, 0]; // set primary color to red\nvar primaryEffect = thisComp.layer('Color & Stroke Change').effect('Primary')('Color');\nprimaryEffect.setValue(primaryColor);\n```\n\nThis code sets the primary color of the ellipse to red by getting a reference to the \"Primary\" effect and calling its `setValue()` method with an array of RGB values.", - "questions": "1. What is the purpose of this code?\n- This code appears to be defining the properties and animations for a shape layer in an Adobe After Effects project.\n\n2. What effects or controls are being applied to the shape layer?\n- The shape layer has a \"Color & Stroke Change\" effect applied to it, which includes controls for primary and secondary colors, stroke width, and scale.\n\n3. What is the significance of the \"NULL 2\" and \"NULL\" layers?\n- These layers appear to be null objects used to control the position, scale, and rotation of the shape layer. \"NULL 2\" is used to control the position and scale, while \"NULL\" is used to control the rotation.", - "checksum": "5a20ce95c492cf90aebdaf1bd881c537" -} \ No newline at end of file diff --git a/.autodoc/docs/json/core/src/bootstrap.json b/.autodoc/docs/json/core/src/bootstrap.json deleted file mode 100644 index 024e57bf8..000000000 --- a/.autodoc/docs/json/core/src/bootstrap.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "bootstrap.ts", - "filePath": "core/src/bootstrap.ts", - "url": "zoo-labs/zoo/blob/master/core/src/bootstrap.ts", - "summary": "This code file contains a set of functions and extensions to existing classes that are used in the larger zoo project. \n\nThe first section of the code imports various dependencies, including `BigNumber` and `Fraction` from the `@ethersproject/bignumber` package, as well as `React` and `Zero` from other packages. It also imports a function called `parseUnits` from `@ethersproject/units`. \n\nThe next section of the code checks if the code is running in a browser environment and in development mode. If so, it imports and runs a package called `why-did-you-render`, which is used for debugging and optimizing React components. \n\nThe remaining code defines several extensions to the `BigNumber` and `String` classes. \n\nThe `mulDiv` function extends the `BigNumber` class and takes two arguments, `multiplier` and `divisor`, both of which are `BigNumberish` types. It returns a new `BigNumber` that is the result of multiplying the original `BigNumber` by the `multiplier` and dividing by the `divisor`. If the `divisor` is zero or negative, it returns `Zero`. \n\nThe `toFraction` function also extends the `BigNumber` class and takes an optional argument `decimals`, which defaults to 18. It returns a new `Fraction` object that represents the `BigNumber` as a fraction with the specified number of decimal places. \n\nThe `toFixed` function extends the `BigNumber` class and takes two optional arguments, `decimals` and `maxFractions`, both of which default to 18 and 8, respectively. It returns a string representation of the `BigNumber` with the specified number of decimal places and maximum number of fractions. \n\nThe `toBigNumber` function extends the `String` class and takes an argument `decimals`. It attempts to parse the string as a `BigNumber` with the specified number of decimal places using the `parseUnits` function. If parsing fails, it returns `BigNumber.from(0)`.\n\nThese extensions to the `BigNumber` and `String` classes provide additional functionality that is used throughout the zoo project. For example, the `mulDiv` function is used to calculate the price of tokens in various trading pairs, while the `toFraction` and `toFixed` functions are used to format token amounts and prices for display. The `toBigNumber` function is used to convert user input from strings to `BigNumber` objects.", - "questions": "1. What is the purpose of the `Fraction` entity and how is it used in this code?\n - The `Fraction` entity is imported from `./entities/Fraction` and is used to convert a `BigNumber` to a fraction with a specified number of decimals.\n2. What is the significance of the `mulDiv` function added to the `BigNumber` prototype?\n - The `mulDiv` function multiplies a `BigNumber` by a multiplier and divides it by a divisor, returning the result as a `BigNumber`. If the divisor is zero or negative, it returns `Zero`.\n3. Why is the `whyDidYouRender` library being used in this code, and what options are being passed to it?\n - The `whyDidYouRender` library is being used to track unnecessary re-renders in development mode. The options being passed to it include tracking all pure components, tracking hooks, logging owner reasons, and collapsing groups.", - "checksum": "e44cde837bcad5d2e85ea53ad4aa9b00" -} \ No newline at end of file diff --git a/.autodoc/docs/json/core/src/components/AccountDetails/Copy.json b/.autodoc/docs/json/core/src/components/AccountDetails/Copy.json deleted file mode 100644 index 7da2d4763..000000000 --- a/.autodoc/docs/json/core/src/components/AccountDetails/Copy.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "Copy.tsx", - "filePath": "core/src/components/AccountDetails/Copy.tsx", - "url": "zoo-labs/zoo/blob/master/core/src/components/AccountDetails/Copy.tsx", - "summary": "The `CopyHelper` component is a reusable React component that provides a UI for copying text to the clipboard. It is designed to be used in other parts of the `zoo` project where copying text is required. \n\nThe component imports two icons from the `@heroicons/react/outline` package: `CheckCircleIcon` and `ClipboardCopyIcon`. It also imports the `useCopyClipboard` hook from a custom `useCopyClipboard` module, the `classNames` function from a custom `functions` module, and the `Typography` component from a custom `Typography` module. Additionally, it imports the `useLingui` hook and `t` function from the `@lingui/react` and `@lingui/macro` packages respectively.\n\nThe `CopyHelper` component takes three props: `className`, `toCopy`, and `children`. `className` is an optional string that can be used to add additional CSS classes to the component. `toCopy` is a required string that represents the text to be copied to the clipboard. `children` is an optional prop that can be used to pass in additional React components to be rendered alongside the copy icon.\n\nThe component uses the `useCopyClipboard` hook to manage the state of whether or not the text has been copied to the clipboard. It also uses the `useLingui` hook to provide internationalization support for the \"Copied\" text that is displayed when the text is successfully copied.\n\nThe component renders a `div` element with a `classNames` function that combines the default classes with any additional classes passed in via the `className` prop. The `onClick` event is set to call the `setCopied` function with the `toCopy` prop as an argument when the component is clicked.\n\nIf the text has been successfully copied, the component renders a `div` element with the \"Copied\" text and a `CheckCircleIcon`. If the text has not been copied, the component renders a `div` element with any additional components passed in via the `children` prop and a `ClipboardCopyIcon`.\n\nOverall, the `CopyHelper` component provides a simple and reusable UI for copying text to the clipboard, with support for internationalization and customization via the `className` and `children` props. An example usage of this component would be in a form where a user needs to copy a generated code or URL to the clipboard.", - "questions": "1. What does this code do?\n - This code exports a React component called `CopyHelper` that provides a UI for copying text to the clipboard and displaying a success message upon successful copy.\n\n2. What dependencies does this code rely on?\n - This code relies on several external dependencies, including `@heroicons/react/outline`, `react`, `useCopyClipboard`, `../../functions`, `../Typography`, `@lingui/react`, and `@lingui/macro`.\n\n3. What props does the `CopyHelper` component accept?\n - The `CopyHelper` component accepts three props: `className` (optional), `toCopy` (required), and `children` (optional). The `toCopy` prop specifies the text to be copied to the clipboard, and the `children` prop is used to render any additional content alongside the copy icon.", - "checksum": "953b534a454250ff1f907499611adad6" -} \ No newline at end of file diff --git a/.autodoc/docs/json/core/src/components/AccountDetails/Transaction.json b/.autodoc/docs/json/core/src/components/AccountDetails/Transaction.json deleted file mode 100644 index bb104a68c..000000000 --- a/.autodoc/docs/json/core/src/components/AccountDetails/Transaction.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "Transaction.tsx", - "filePath": "core/src/components/AccountDetails/Transaction.tsx", - "url": "zoo-labs/zoo/blob/master/core/src/components/AccountDetails/Transaction.tsx", - "summary": "The `Transaction` component is a React functional component that displays information about a transaction on the Ethereum blockchain. It imports several dependencies from various packages, including `@zoolabs/zdk`, `@heroicons/react/outline`, and `@lingui/react`. \n\nThe component takes a single prop, `hash`, which is the hash of the transaction to display. It then uses several hooks to retrieve information about the transaction from the Redux store, including `useActiveWeb3React` and `useAllTransactions`. \n\nThe component then renders a div that displays the transaction summary and status. The summary is either the transaction hash or a user-defined summary if one exists. The status is displayed as an icon, with different icons representing pending, successful, cancelled, or failed transactions. \n\nIf the transaction was submitted using the Archer network, additional information is displayed, including the nonce and tip amount. If the transaction is pending, the component also displays a countdown timer indicating how long until the transaction expires. If the transaction has expired, the component displays an \"Expired\" message. \n\nFinally, if the transaction is pending, the component allows the user to cancel the transaction by clicking a \"Cancel\" button. This sends a request to the Archer network to cancel the transaction, and updates the transaction status in the Redux store. \n\nThis component is likely used in other parts of the project to display information about transactions, such as in a transaction history or on a confirmation page after submitting a transaction.", - "questions": "1. What is the purpose of the `Transaction` component?\n- The `Transaction` component is used to display information about a transaction, including its status, summary, and deadline.\n\n2. What is the `calculateSecondsUntilDeadline` function used for?\n- The `calculateSecondsUntilDeadline` function is used to calculate the number of seconds until a transaction's deadline, which is used to determine whether the transaction has expired.\n\n3. What is the `cancelPending` function used for?\n- The `cancelPending` function is used to cancel a pending transaction by sending a request to the Archer Relay API with the transaction's raw data and authorization headers. If the cancellation is successful, the transaction is marked as cancelled in the application state.", - "checksum": "29f122a65361e82e621569001f722ba0" -} \ No newline at end of file diff --git a/.autodoc/docs/json/core/src/components/AccountDetails/index.json b/.autodoc/docs/json/core/src/components/AccountDetails/index.json deleted file mode 100644 index 3d8971f58..000000000 --- a/.autodoc/docs/json/core/src/components/AccountDetails/index.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "index.tsx", - "filePath": "core/src/components/AccountDetails/index.tsx", - "url": "zoo-labs/zoo/blob/master/core/src/components/AccountDetails/index.tsx", - "summary": "The code is a React component that renders the account details of a user's wallet. It imports various dependencies such as React, Image, and Button from different modules. It also imports some functions and constants from other files such as `getExplorerLink` and `SUPPORTED_WALLETS`. \n\nThe component takes in several props such as `toggleWalletModal`, `pendingTransactions`, `confirmedTransactions`, `ENSName`, and `openOptions`. It then uses these props to render the account details of the user's wallet. \n\nThe component first uses the `useActiveWeb3React` hook to get the current chain ID, account, and connector of the user's wallet. It then uses the `useSelector` hook to get the user's ZOO balance from the Redux store. \n\nThe component then defines several functions such as `formatConnectorName` and `getStatusIcon` that are used to format and display the user's wallet connector and status icon. \n\nThe component then renders the user's account details such as their wallet address, balance, and recent transactions. It also provides buttons to disconnect the wallet, change the wallet, view the wallet on an explorer, and copy the wallet address. \n\nThe component also defines a `WalletIcon` component that renders the icon of the user's wallet connector. It also defines a `renderTransactions` function that renders the user's recent transactions. \n\nOverall, this component is an important part of the larger project as it provides users with a way to view and manage their wallet details and transactions. It can be used in various parts of the project such as the wallet modal and the dashboard. \n\nExample usage:\n\n```jsx\nimport AccountDetails from \"./components/AccountDetails\";\n\nfunction App() {\n return (\n
\n console.log(\"Toggle wallet modal\")}\n pendingTransactions={[\"0x123abc\", \"0x456def\"]}\n confirmedTransactions={[\"0x789ghi\"]}\n ENSName=\"mywallet.eth\"\n openOptions={() => console.log(\"Open wallet options\")}\n />\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `AccountDetails` component?\n- The `AccountDetails` component is responsible for rendering the account details of the user, including their wallet balance, recent transactions, and wallet connector information.\n\n2. What libraries and hooks are being used in this file?\n- This file is using several libraries and hooks, including React, Next.js, Lingui, and Feather icons. It is also using custom hooks such as `useActiveWeb3React` and `useDispatch`, as well as Redux for state management.\n\n3. What is the purpose of the `WalletIcon` component?\n- The `WalletIcon` component is a reusable component that renders an image of a wallet icon along with any children components passed to it. It is used in the `getStatusIcon` function to display the appropriate wallet icon based on the user's wallet connector.",
- "checksum": "ad85208e0ce9b07e0c609b095888256d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/AddressInputPanel/index.json b/.autodoc/docs/json/core/src/components/AddressInputPanel/index.json
deleted file mode 100644
index 1d422966a..000000000
--- a/.autodoc/docs/json/core/src/components/AddressInputPanel/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/AddressInputPanel/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/AddressInputPanel/index.tsx",
- "summary": "The `AddressInputPanel` component is a React functional component that renders an input field for an Ethereum address. It takes in three props: `id`, `value`, and `onChange`. The `id` prop is an optional string that is used to set the ID of the component's root element. The `value` prop is a string that represents the current value of the input field. The `onChange` prop is a callback function that is called whenever the value of the input field changes.\n\nThe component uses the `useLingui` hook from the `@lingui/react` package to provide internationalization support. It also uses the `useENS` hook from a custom `useENS` hook to resolve Ethereum addresses to their corresponding ENS names.\n\nThe component renders a div element with a class of `flex flex-row bg-dark-800 rounded items-center h-[68px]`. This div contains two child elements: a div element with a class of `flex justify-between w-full px-5 sm:w-2/5` and a div element with a class of `flex w-full h-full border-2 rounded-r sm:w-3/5 border-dark-800`. The first child element contains two span elements: one with a class of `text-[18px] text-primary` that displays the text \"Send to:\", and one with a class of `text-sm underline cursor-pointer text-blue` that displays the text \"Remove\" and calls the `onChange` callback with a value of `null` when clicked. The second child element contains an `Input.Address` component that renders an input field for an Ethereum address.\n\nThe component also sets the `error` variable to `true` if the `value` prop is not an empty string and the `loading` and `address` variables returned by the `useENS` hook are both `false`. If `error` is `true`, the component adds a red border to the root div element.\n\nThis component can be used in a larger project that requires an input field for Ethereum addresses. It provides internationalization support and ENS resolution, and allows for customization through the `id`, `value`, and `onChange` props. Here is an example of how this component can be used:\n\n```\nimport AddressInputPanel from './AddressInputPanel'\n\nfunction MyComponent() {\n const [address, setAddress] = useState('')\n\n const handleAddressChange = useCallback((value) => {\n setAddress(value)\n }, [])\n\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `AddressInputPanel` that renders an input field for an Ethereum address and uses the ENS (Ethereum Name Service) to resolve the address from a human-readable name.\n\n2. What are the dependencies of this code?\n- This code imports several modules from external packages, including `React`, `@lingui/macro`, `@lingui/react`, and a custom `Input` component. It also uses a custom `useENS` hook defined elsewhere in the project.\n\n3. What props does the `AddressInputPanel` component accept?\n- The `AddressInputPanel` component accepts three props: `id` (an optional string), `value` (a string representing the current value of the input field), and `onChange` (a callback function that is called whenever the input value changes).",
- "checksum": "2d9dab5c9cc800156a4fb3aadf2a4b3c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Alert/index.json b/.autodoc/docs/json/core/src/components/Alert/index.json
deleted file mode 100644
index 0374434ad..000000000
--- a/.autodoc/docs/json/core/src/components/Alert/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Alert/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Alert/index.tsx",
- "summary": "The code defines an Alert component that can be used to display messages to users. The component takes in several props, including a title, message, type, showIcon, dismissable, show, and setShow. The title and message props are used to display the content of the alert, while the type prop determines the color and icon used to display the alert. The showIcon prop determines whether or not to display the icon associated with the alert type. The dismissable prop determines whether or not the user can dismiss the alert. The show and setShow props are used to control the visibility of the alert.\n\nThe component uses the useState hook to manage the visibility of the alert. The defaultShow state is used to determine whether or not to show the alert by default. The setShow prop is used to update the show state when the user dismisses the alert.\n\nThe component renders a div with the appropriate color and icon based on the type prop. The title and message props are displayed within the div. If the dismissable prop is true, a button is displayed that allows the user to dismiss the alert. The button updates the show state when clicked.\n\nThis component can be used throughout the larger project to display alerts to users. For example, it could be used to display error messages when a user enters invalid input or to display information messages when a user successfully completes an action. Here is an example of how the component could be used:\n\n```\n\n {animals.map(animal => (\n
\n );\n};\n```\n\nIn this example, an array of animal objects is defined with a `name` and `description` property. The `Zoo` component maps over this array and renders an `AnimalInfo` component for each animal, passing in the `name` and `description` as props. This results in a list of animals with their names, descriptions, and a link to learn more.",
- "questions": "1. What is the purpose of the AnimalInfo component?\n The AnimalInfo component is designed to display information about an animal, including a title, content, and a \"Learn more\" link.\n\n2. What styling classes are applied to the AnimalInfo component?\n The AnimalInfo component has several styling classes applied to it, including \"px-2\", \"py-6\", \"lg:px-6\", \"lg:basis-1/3\", \"lg:bg-black100\", and \"lg:rounded-3xl\". These classes control the padding, background color, and layout of the component.\n\n3. What is the purpose of the \"rel\" attribute on the \"Learn more\" link?\n The \"rel\" attribute on the \"Learn more\" link is set to \"noreferrer\", which tells the browser not to send the referrer information when the link is clicked. This can help protect the user's privacy.",
- "checksum": "28d037104d7e5ffbbebcc9264b760a6c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/AnimalFamily/index.json b/.autodoc/docs/json/core/src/components/AnimalFamily/index.json
deleted file mode 100644
index a26327baf..000000000
--- a/.autodoc/docs/json/core/src/components/AnimalFamily/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/AnimalFamily/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/AnimalFamily/index.tsx",
- "summary": "The code above defines a React component called `AnimalFamily`. This component takes in four props: `image`, `name`, `title`, and `content`. It then returns a JSX element that renders an animal family card with an image, name, and a button to buy an NFT. \n\nThe `Image` component is imported from the `next/image` library and is used to display the animal image. The `Link` component is imported from the `next/link` library and is used to wrap the \"Buy NFT\" button, which links to the `/nft` page. \n\nThe `AnimalInfo` component is imported from the `pages/animal-info` file, which is not shown in this code snippet. It is likely that this component contains additional information about the animal family that is displayed when the user clicks on the animal card. \n\nThis component is likely used in a larger project that involves displaying information about different animal families. It can be used by passing in different props for each animal family, such as the image URL, name, and any additional information. \n\nHere is an example of how this component can be used in another file:\n\n```\nimport AnimalFamily from \"zoo/AnimalFamily\";\n\nconst animalFamilies = [\n {\n image: \"lion.jpg\",\n name: \"Lion Family\",\n title: \"The King of the Jungle\",\n content: \"The lion family is known for its strength and courage.\",\n },\n {\n image: \"elephant.jpg\",\n name: \"Elephant Family\",\n title: \"The Gentle Giants\",\n content: \"The elephant family is known for its intelligence and empathy.\",\n },\n];\n\nconst Zoo = () => {\n return (\n \n {animalFamilies.map((family) => (\n
\n );\n};\n\nexport default Zoo;\n```\n\nIn this example, the `Zoo` component renders multiple `AnimalFamily` components by mapping over an array of animal families. Each `AnimalFamily` component is passed in the relevant props for that animal family. This allows for easy and dynamic rendering of different animal families in the larger project.",
- "questions": "1. What is the purpose of the `AnimalFamily` component?\n- The `AnimalFamily` component is used to display information about an animal, including an image, name, and a link to buy an NFT.\n\n2. What libraries or frameworks are being used in this code?\n- The code is using the `next/image` and `next/link` libraries, as well as a custom `AnimalInfo` component located in the `pages` directory.\n\n3. What is the expected output of this code?\n- The expected output of this code is a styled component that displays an animal image, name, and a link to buy an NFT. The `AnimalInfo` component is also included in the output, but its purpose is not clear from this code snippet alone.",
- "checksum": "be52c8a732aacf4058f86b1c1c694db3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/AnimalInfo/index.json b/.autodoc/docs/json/core/src/components/AnimalInfo/index.json
deleted file mode 100644
index b9fe1f51a..000000000
--- a/.autodoc/docs/json/core/src/components/AnimalInfo/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/AnimalInfo/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/AnimalInfo/index.tsx",
- "summary": "The code defines a React component called `AnimalFamilyInfo` that displays information about an animal family. The component takes in four props: `name` (a string representing the name of the animal family), `image` (a string representing the filename of the image to display), `descriptionHead` (a string representing the heading of the description), and `description` (a string representing the description of the animal family).\n\nThe component returns a div that contains three child divs. The first child div contains an image of the animal family, which is displayed using the `next/image` component. The second child div contains the name of the animal family, which is displayed as a heading. The third child div contains the description of the animal family, which is displayed as a paragraph of text. The description also includes a link to learn more about the animal family.\n\nThe component uses CSS classes to style the different elements of the component. The image is displayed with a black background and rounded corners, while the name and description are displayed with a white background. The description also has a green link to learn more about the animal family.\n\nThis component can be used in a larger project that displays information about different animal families. The component can be reused for each animal family, with the `name`, `image`, `descriptionHead`, and `description` props being passed in as needed. For example, the component could be used in a zoo website to display information about different animal families, such as lions, tigers, and bears. \n\nExample usage:\n\n```\n\n
\n );\n}\n\nexport default App;\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n - This code is a React component that sets up a Babylon.js scene and renders it on a canvas element. It takes in various props to customize the scene and render loop.\n\n2. What dependencies does this code have?\n - This code imports several modules from the Babylon.js library, including Engine, Scene, SceneLoader, FreeCamera, Vector3, and Color4. It also imports React and useRef from the React library.\n\n3. What props can be passed to this component and what do they do?\n - This component accepts several props, including antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady, and clearColor. These props can be used to customize the Babylon.js scene and render loop, such as setting the antialiasing level, engine options, and scene options, as well as defining callbacks for when the scene is ready and when each frame is rendered. The clearColor prop sets the background color of the scene.",
- "checksum": "05d7e1fefb2a3f627fdbe64a995c433e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Babylon/index.json b/.autodoc/docs/json/core/src/components/Babylon/index.json
deleted file mode 100644
index abbb7c733..000000000
--- a/.autodoc/docs/json/core/src/components/Babylon/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Babylon/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Babylon/index.tsx",
- "summary": "The `BabylonAnim` component is a React component that renders a 3D animal model using the Babylon.js library. The component takes several props that allow customization of the animal model and camera position. The component also has an optional AR mode that can be enabled by setting the `isArAble` prop to `true`.\n\nThe `onSceneReady` function is called when the Babylon.js scene is ready. It creates an `ArcRotateCamera` and attaches it to the canvas. It then loads the 3D animal model using the `SceneLoader.ImportMeshAsync` method and sets its position and rotation. It also creates lights and an environment for the scene.\n\nThe `onRender` function is called on every frame render and can be used to update the scene. In this case, it calculates the time since the last frame render.\n\nThe component returns a `SceneComponent` that renders the Babylon.js scene and a button for AR mode if enabled. The `SceneComponent` takes the `onSceneReady` and `onRender` functions as props.\n\nThis component can be used in a larger project that requires 3D models to be rendered using Babylon.js. The component can be customized by passing different props to change the animal model, camera position, and enable AR mode. The `onSceneReady` and `onRender` functions can also be modified to add additional functionality to the scene. \n\nExample usage:\n\n```\nimport BabylonAnim from \"./BabylonAnim\";\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `BabylonAnim` component?\n- The `BabylonAnim` component is responsible for rendering a 3D animal model using Babylon.js library and allows for AR functionality.\n\n2. What is the significance of the `useRef` hook being used to create the `animalModel` variable?\n- The `useRef` hook is used to create a reference to the animal model that is loaded asynchronously using `SceneLoader.ImportMeshAsync()`, which allows for manipulation of the model's properties.\n\n3. What is the purpose of the `onRender` function?\n- The `onRender` function is called on every frame render and is used to calculate the time elapsed since the last frame using `scene.getEngine().getDeltaTime()`. However, it is currently not being used for any other purpose.",
- "checksum": "3395f7fe6be40d2f6e6a76afe2e5255d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Back/index.json b/.autodoc/docs/json/core/src/components/Back/index.json
deleted file mode 100644
index d6fbab71f..000000000
--- a/.autodoc/docs/json/core/src/components/Back/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Back/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Back/index.tsx",
- "summary": "This code defines a React component called `Back` that renders a link to go back to the previous page in the browser history. The component uses the `useLingui` hook from the `@lingui/react` library to enable internationalization (i18n) of the text displayed in the link. The `t` function from the `@lingui/macro` library is used to mark the text for translation. The `useRouter` hook from the `next/router` library is used to access the router object and its `back` method, which navigates to the previous page in the browser history.\n\nThe `Back` component is intended to be used in a larger project that uses React and Next.js for server-side rendering. It can be included in any page or component that needs to provide a way for the user to go back to the previous page. The component can be customized by changing the text displayed in the link, as well as the styles applied to the link.\n\nHere is an example of how the `Back` component can be used in a Next.js page:\n\n```\nimport Back from '../components/Back'\n\nconst MyPage = () => {\n return (\n \n
\n )\n}\n\nexport default MyPage\n```\n\nIn this example, the `Back` component is included at the end of the page content to provide a way for the user to go back to the previous page. When the user clicks on the link, the `router.back` method is called, which navigates to the previous page in the browser history. The text displayed in the link is translated based on the user's language preference, as determined by the `useLingui` hook.",
- "questions": "1. What is the purpose of the `useLingui` hook and the `@lingui/macro` package?\n- The `useLingui` hook and `@lingui/macro` package are used for internationalization (i18n) and localization (l10n) of the application's text content.\n\n2. What is the purpose of the `useRouter` hook from the `next/router` package?\n- The `useRouter` hook is used to access the Next.js router object, which allows for programmatic navigation between pages in the application.\n\n3. What is the purpose of the `Back` component and how is it used?\n- The `Back` component is a reusable component that renders a link with a back arrow icon and localized text for \"Go Back\". It is used to provide a consistent UI element for navigating back to the previous page in the application.",
- "checksum": "4a0eb8eae0a5b0459f5328f7265e6c8f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Badge/index.json b/.autodoc/docs/json/core/src/components/Badge/index.json
deleted file mode 100644
index 1e0a32c54..000000000
--- a/.autodoc/docs/json/core/src/components/Badge/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Badge/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Badge/index.tsx",
- "summary": "This code defines a React component called `Badge` that can be used to display a badge with different colors and sizes. The component takes in three optional props: `color`, `size`, and `children`. The `color` prop can be set to one of four possible values: \"default\", \"blue\", \"pink\", or \"gradient\". The `size` prop can be set to one of three possible values: \"default\", \"medium\", or \"large\". The `children` prop is used to pass in the content that should be displayed inside the badge.\n\nThe `COLOR` object defines the styles for each of the four possible badge colors. The `SIZE` object defines the font size for each of the three possible badge sizes. The `Badge` function takes in the `color`, `size`, and `className` props, and uses them to dynamically apply the appropriate styles to the badge. The `className` prop is used to allow for additional custom styles to be applied to the badge.\n\nThis component can be used in a larger project to display badges with different colors and sizes. For example, it could be used to display badges indicating the status of an item (e.g. \"new\", \"popular\", \"on sale\", etc.). Here is an example of how the `Badge` component could be used:\n\n```\nimport Badge from \"./Badge\";\n\nfunction App() {\n return (\n My Page
\nThis is my page content.
\n\n New \n Popular \n On Sale \n
\n );\n}\n```\n\nThis would display three badges with different colors, sizes, and content.",
- "questions": "1. What are the possible values for `BadgeColor` and `BadgeSize`?\n- `BadgeColor` can be one of \"default\", \"blue\", \"pink\", or \"gradient\". `BadgeSize` can be one of \"default\", \"medium\", or \"large\".\n\n2. What is the purpose of the `COLOR` and `SIZE` constants?\n- `COLOR` and `SIZE` are objects that define the CSS classes for different badge colors and sizes respectively. These classes are used in the `Badge` component to style the badge.\n\n3. What is the purpose of the `Badge` component and what props does it accept?\n- The `Badge` component is a reusable component that renders a badge with a specified color and size. It accepts `color`, `size`, `children`, and `className` props.",
- "checksum": "89b27268dc60813f2ac6d137198e8457"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Banner/index.json b/.autodoc/docs/json/core/src/components/Banner/index.json
deleted file mode 100644
index b19a9947c..000000000
--- a/.autodoc/docs/json/core/src/components/Banner/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Banner/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Banner/index.tsx",
- "summary": "The `Banner` component is a React functional component that displays a banner at the top of the screen. The banner can be of two types: \"default\" or \"network_migration\". The default banner displays a link to a BSC Scan page, while the network_migration banner displays a link to migrate the network to get new tokens. \n\nThe component imports several other components and hooks from the project, including `XIcon` from `@heroicons/react/outline`, `Copy` from `components/AccountDetails/Copy`, `Typography` from `components/Typography`, `useNetworkMigrationModalToggle` from `state/application/hooks`, and `NetworkMigrationModal` from `modals/NetworkMigrationModal`.\n\nThe component uses the `useState` hook to manage the state of the `showBanner` variable, which determines whether the banner is displayed or not. The `toggleNetworkMigrationModal` function is used to toggle the state of the network migration modal.\n\nThe component returns a fragment that conditionally renders the banner based on the value of `showBanner` and the `type` prop. If `showBanner` is true and `type` is \"network_migration\", the component renders a banner with a link to migrate the network. If `showBanner` is true and `type` is \"default\", the component renders a banner with a link to a BSC Scan page. If `showBanner` is false, the component does not render anything.\n\nThe banner is styled using Tailwind CSS classes, and includes an X icon that can be clicked to dismiss the banner. The `NetworkMigrationModal` component is also rendered at the bottom of the banner.\n\nThis component can be used in the larger project to display important information or calls to action at the top of the screen. The `type` prop can be used to customize the content of the banner based on the context in which it is used. The `showBanner` state can be controlled by other components or hooks to show or hide the banner based on certain conditions.",
- "questions": "1. What is the purpose of the `Banner` component?\n- The `Banner` component is used to display a banner with different content based on the `type` prop passed to it.\n\n2. What is the `useNetworkMigrationModalToggle` hook used for?\n- The `useNetworkMigrationModalToggle` hook is used to toggle the visibility of the `NetworkMigrationModal` component.\n\n3. What is the purpose of the `Copy` component?\n- The `Copy` component is used to copy a URL to the clipboard when clicked, and it also renders a child component with the URL as a link.",
- "checksum": "22983aaaacfc2f1e9c086b056ea9e9f0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Blocklist/index.json b/.autodoc/docs/json/core/src/components/Blocklist/index.json
deleted file mode 100644
index 353a0cfe2..000000000
--- a/.autodoc/docs/json/core/src/components/Blocklist/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Blocklist/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Blocklist/index.tsx",
- "summary": "The code above is a React component called `Blocklist` that checks if a user's Ethereum address is blocked. The purpose of this component is to prevent users with blocked addresses from accessing certain parts of the application. \n\nThe component imports `React` and `useMemo` from the `react` library, as well as `BLOCKED_ADDRESSES` and `useActiveWeb3React` from other files in the project. \n\nThe `Blocklist` component takes in a `children` prop, which is a `ReactNode` type. This prop is used to render the children components of the `Blocklist` component. \n\nThe `useActiveWeb3React` hook is used to get the user's Ethereum address from the active Web3 React context. The `useMemo` hook is used to memoize the result of the `Boolean` function that checks if the user's address is in the `BLOCKED_ADDRESSES` array. \n\nIf the user's address is in the `BLOCKED_ADDRESSES` array, the `blocked` variable will be `true`, and the component will return a `` element with the text \"Blocked address\". Otherwise, the component will return the `children` components.\n\nThis component can be used in the larger project to prevent users with blocked addresses from accessing certain parts of the application. For example, it can be used to prevent users with known fraudulent addresses from interacting with the application's smart contracts. \n\nHere is an example of how the `Blocklist` component can be used in another component:\n\n```\nimport React from 'react'\nimport Blocklist from './Blocklist'\n\nexport default function MyComponent() {\n return (\n \n \n )\n}\n```",
- "questions": "1. What is the purpose of the `BLOCKED_ADDRESSES` constant?\n- `BLOCKED_ADDRESSES` is a constant that likely contains a list of addresses that are not allowed to access certain parts of the application.\n\n2. What is the `useMemo` hook used for in this code?\n- The `useMemo` hook is used to memoize the result of a function that determines whether the current user's account is in the `BLOCKED_ADDRESSES` list. This can improve performance by avoiding unnecessary re-renders.\n\n3. What does the `Blocklist` component do if the user's account is blocked?\n- If the user's account is in the `BLOCKED_ADDRESSES` list, the `Blocklist` component will render a simple message saying \"Blocked address\". Otherwise, it will render its children.",
- "checksum": "4b8ac93b68687791295d08f39fe4e258"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/BlogCards/index.json b/.autodoc/docs/json/core/src/components/BlogCards/index.json
deleted file mode 100644
index d38855f87..000000000
--- a/.autodoc/docs/json/core/src/components/BlogCards/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/BlogCards/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/BlogCards/index.tsx",
- "summary": "The code above is a React component that renders a section containing a list of blog articles and a link to the Zoo Medium page. The component takes in an object called `data` as a prop, which is an array of objects representing each blog article. \n\nThe `section` element has a class name of `pb-16 px-6 lg:max-w-7xl lg:mx-auto`, which sets the padding and maximum width of the section for different screen sizes. The `div` element inside the section has a class name of `flex flex-col items-center mb-16 lg:grid lg:grid-cols-3 lg:place-items-stretch lg:gap-12`, which sets the layout of the blog articles for different screen sizes. \n\nThe `data` array is mapped over using the `map` method, which returns an `Article` component for each object in the array. The `Article` component is imported from the `components/blog/articles` file. The `key` prop is set to the `name` property of each article object to ensure that each component has a unique identifier. \n\nThe `div` element after the `map` method is used to render a link to the Zoo Medium page. The link has a class name of `border border-green text-green text-sm md:text-base font-semibold px-8 py-3 md:px-6 lg:px-16 rounded-full hover:cursor-pointer`, which sets the styling of the link. The `href` attribute is set to the Zoo Medium page URL, and the `target` attribute is set to `_blank` to open the link in a new tab. The `rel` attribute is set to `noreferrer` to prevent security risks. \n\nFinally, the `BlogCards` component is exported as the default export of the file. This component can be used in other parts of the Zoo project to render a list of blog articles and a link to the Zoo Medium page. \n\nExample usage:\n\n```\nimport BlogCards from \"components/blog/cards\";\n\nconst BlogPage = () => {\n const articles = [\n { name: \"Article 1\", content: \"...\" },\n { name: \"Article 2\", content: \"...\" },\n { name: \"Article 3\", content: \"...\" },\n ];\n\n return (\n ,\n name: \"Cool NFT\",\n address: \"0x1234567890abcdef\",\n price: \"1.23\",\n days: \"5\",\n yields: \"10%\",\n currency: \"ETH\",\n};\n\nconst NftCardPage = () => {\n return (\n \n \n \n )\n}\n```\n\nIn this example, the `MyComponent` component imports the `Carousel` and `Slide` components and uses them to create a carousel of three slides, each with an image and a caption. The `Carousel` component takes care of the layout and behavior of the carousel, while the `Slide` component defines the content of each slide.",
- "questions": "1. What is the purpose of the `Swiper` library and how is it being used in this code?\n - The `Swiper` library is being used to create a carousel component with pagination and navigation. It is imported and configured with various options such as `slidesPerView`, `spaceBetween`, and `loop`.\n2. What is the purpose of the `Carousel` component and how is it being used?\n - The `Carousel` component is a wrapper around the `Swiper` component that accepts `children` as props. It is being used to render a carousel with the specified options and the child components passed to it.\n3. Why are the `Pagination` and `Navigation` modules being imported separately and passed as props to the `Swiper` component?\n - The `Pagination` and `Navigation` modules are being imported separately and passed as props to the `Swiper` component to enable pagination and navigation functionality. This allows for more modular and customizable usage of the `Swiper` library.",
- "checksum": "9713a0fea3adf2bf955948627fac308c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/CartSideNav/index.json b/.autodoc/docs/json/core/src/components/CartSideNav/index.json
deleted file mode 100644
index 7683492f2..000000000
--- a/.autodoc/docs/json/core/src/components/CartSideNav/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/CartSideNav/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/CartSideNav/index.tsx",
- "summary": "The `CartSideNav` component is a React component that renders a shopping cart side navigation bar. It imports the `useState` hook from the `react` library and the `useAppSelector` hook from a custom `state/hooks` module. It also imports the `CartItem` type from a custom `types/cart` module.\n\nThe component renders a shopping cart icon with the number of items in the cart. When the icon is clicked, a dropdown menu appears with a list of items in the cart. Each item in the list displays an image, name, size, color, and quantity. The user can edit the quantity of an item by clicking the edit button and entering a new quantity in the input field that appears. The user can also delete an item from the cart by clicking the delete button.\n\nThe `CartSideNav` component uses the `useAppSelector` hook to retrieve the `CartItems` array from the Redux store. The `useState` hook is used to manage the state of the `toggleCart`, `quantity`, and `showInput` variables. The `toggleCart` variable is used to toggle the visibility of the dropdown menu. The `quantity` variable is used to store the new quantity entered by the user. The `showInput` variable is used to toggle the visibility of the quantity input field.\n\nThe component returns a JSX fragment that conditionally renders the shopping cart icon and the dropdown menu. The icon and the number of items in the cart are only displayed if there is at least one item in the cart. The dropdown menu is only displayed if the `toggleCart` variable is true.\n\nThe dropdown menu is implemented using a `ul` element with a list of `div` elements that display the details of each item in the cart. The `map` method is used to iterate over the `CartItems` array and render a `div` element for each item. The `key` attribute is set to the `index` of each item to improve performance.\n\nOverall, the `CartSideNav` component provides a user-friendly way to view and manage the items in the shopping cart. It can be easily integrated into a larger e-commerce application to improve the user experience.",
- "questions": "1. What is the purpose of the `useAppSelector` hook and how is it used in this code?\n - The `useAppSelector` hook is used to extract data from the Redux store and is passed a callback function that takes the store state as an argument. In this code, it is used to extract an array of `CartItem` objects from the store state.\n2. What is the purpose of the `toggleCart` state variable and how is it used in this code?\n - The `toggleCart` state variable is used to toggle the visibility of the cart side navigation when the cart icon is clicked. It is initialized to `false` and toggled using the `setToggleCart` function when the cart icon is clicked.\n3. What is the purpose of the `showInput` state variable and how is it used in this code?\n - The `showInput` state variable is used to toggle the visibility of the quantity input field when the edit button is clicked. It is initialized to `false` and toggled using the `setShowInput` function when the edit button is clicked.",
- "checksum": "0d192269d1e9c2a834cbbce1f0c3e107"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Checkbox/index.json b/.autodoc/docs/json/core/src/components/Checkbox/index.json
deleted file mode 100644
index a916c117d..000000000
--- a/.autodoc/docs/json/core/src/components/Checkbox/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Checkbox/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Checkbox/index.tsx",
- "summary": "This code defines a React component called `Checkbox` that renders an HTML checkbox input element. The component takes in a `color` prop, which is a string that can be one of three values: \"pink\", \"blue\", or \"indigo\". The `set` prop is a function that is called whenever the checkbox is checked or unchecked, and it takes in a boolean value that represents the new checked state of the checkbox.\n\nThe `COLOR` object is used to map each color string to a CSS class that is applied to the checkbox element when it is checked. These classes define the background color and focus ring color of the checkbox.\n\nThe `Checkbox` component renders an `input` element with the `type` attribute set to \"checkbox\". It also sets an `onChange` event handler that calls the `set` function with the new checked state of the checkbox. The `className` prop is used to add additional CSS classes to the checkbox element, and it defaults to an empty string if not provided.\n\nThis component can be used in other parts of the project to render a checkbox input element with a specific color and behavior. For example, it could be used in a form to allow the user to select one or more options. Here is an example usage of the `Checkbox` component:\n\n```jsx\nimport Checkbox from \"./Checkbox\";\n\nfunction MyForm() {\n const [isChecked, setIsChecked] = useState(false);\n\n return (\n \n );\n}\n```\n\nIn this example, the `Checkbox` component is used to render a pink checkbox with the label \"Option 1\". The `setIsChecked` function is called whenever the checkbox is checked or unchecked, and it updates the `isChecked` state variable accordingly.",
- "questions": "1. What is the purpose of the `QuestionHelper` and `Settings` imports?\n - It is unclear from this code snippet what the `QuestionHelper` and `Settings` modules are used for. Further investigation into the codebase may be necessary to determine their purpose.\n\n2. What is the significance of the `Color` type and `COLOR` object?\n - The `Color` type is a union of three string literals, and the `COLOR` object maps each of these strings to a CSS class string. It is likely that this code is used to generate checkboxes with different colors based on the `color` prop passed to the `Checkbox` component.\n\n3. What is the purpose of the `set` function in the `CheckboxProps` interface?\n - The `set` function is a callback that is called when the checkbox is checked or unchecked. It is likely that this function is used to update the state of the parent component that renders the `Checkbox`.",
- "checksum": "4a54d78661a7f9c2846bac5361f35480"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/CloseIcon/index.json b/.autodoc/docs/json/core/src/components/CloseIcon/index.json
deleted file mode 100644
index fa981c08c..000000000
--- a/.autodoc/docs/json/core/src/components/CloseIcon/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/CloseIcon/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/CloseIcon/index.tsx",
- "summary": "The code above defines a React component called `CloseIcon`. This component renders an `X` icon from the `react-feather` library and applies a `cursor-pointer` class to it. The `props` parameter allows for additional props to be passed in and spread onto the `X` element.\n\nThis component can be used in a larger project as a reusable icon for closing or dismissing a modal, dialog, or other UI element. For example, in a modal component, the `CloseIcon` component can be used as the close button to dismiss the modal when clicked.\n\nHere is an example of how the `CloseIcon` component can be used in a modal component:\n\n```\nimport React from 'react'\nimport CloseIcon from './CloseIcon'\n\nconst Modal = ({ isOpen, onClose, children }) => {\n return (\n \n \n);\n```",
- "questions": "1. What is the purpose of the `Column` and `ColumnCenter` components?\n- The `Column` component is a flex container that vertically centers its children, while the `ColumnCenter` component is a variant of `Column` that horizontally centers its children as well.\n2. What are the possible values for the `gap` and `justify` props in the `AutoColumn` component?\n- The `gap` prop can be set to `\"sm\"`, `\"md\"`, `\"lg\"`, or a custom string value, while the `justify` prop can be set to `\"stretch\"`, `\"center\"`, `\"start\"`, `\"end\"`, `\"flex-start\"`, `\"flex-end\"`, or `\"space-between\"`.\n3. What is the purpose of the `classNames` function imported from \"../../functions\"?\n- The `classNames` function is likely a utility function that concatenates multiple class names together with a space separator, allowing for more flexible and dynamic class name generation in the components. However, without seeing the implementation of the `classNames` function, it is difficult to say for certain.",
- "checksum": "58e3140d204d6c66f7fb37840cfcbfd5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/ComingSoon/index.json b/.autodoc/docs/json/core/src/components/ComingSoon/index.json
deleted file mode 100644
index 1d5d8e6b4..000000000
--- a/.autodoc/docs/json/core/src/components/ComingSoon/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/ComingSoon/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/ComingSoon/index.tsx",
- "summary": "This code defines a React component called `ComingSoon` that displays a \"Coming Soon\" message and a link to the home page of the website. The component imports the `React` and `useEffect` modules from the `react` package, as well as the `Link` component from the `next/link` package. It also imports an `fadeInOnScroll` function from an `animation` module.\n\nThe `ComingSoon` component renders a div that contains another div with a `flex` layout. The inner div contains a heading that says \"Coming Soon\" and a link to the home page. The `comingSoonRef` variable is a reference to the inner div, which is used to apply an animation effect when the component is scrolled into view. The `useEffect` hook is used to call the `fadeInOnScroll` function with the `comingSoonRef` reference as an argument when the component is mounted.\n\nThis component can be used in a larger project to display a \"Coming Soon\" message on a page that is not yet ready for public access. The animation effect adds a visual cue to draw attention to the message. The `Link` component can be customized to link to any page on the website, not just the home page. Here is an example of how the `ComingSoon` component can be used in a React application:\n\n```\nimport React from \"react\";\nimport ComingSoon from \"./ComingSoon\";\n\nconst MyPage = () => {\n return (\n \n \n );\n}\n```\n\nIn the example above, a `Container` component is imported and used to create a container with a maximum width of \"lg\" and an additional CSS class of \"my-container\". The `h1` element is rendered within the container.",
- "questions": "1. What is the purpose of the `classNames` function imported from \"../../functions\"?\n- A smart developer might ask what the `classNames` function does and how it is used in this code. The `classNames` function is likely used to concatenate multiple class names together and return a single string that can be used as a value for the `className` prop.\n\n2. What is the significance of the `MAX_WIDTH` object?\n- A smart developer might ask why the `MAX_WIDTH` object is defined and how it is used in this code. The `MAX_WIDTH` object maps different string values to CSS class names that set the maximum width of the container. This object is used to dynamically set the `className` prop of the `div` element based on the `maxWidth` prop passed to the `Container` component.\n\n3. What is the purpose of the `Container` component?\n- A smart developer might ask what the `Container` component does and how it is used in this code. The `Container` component is a reusable component that renders a `div` element with a maximum width based on the `maxWidth` prop passed to it. It also accepts a `className` prop and any additional props that can be spread onto the `div` element.",
- "checksum": "308f07892f0764d4c712f765c31f4350"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/CurrencyInputPanel/FiatValue.json b/.autodoc/docs/json/core/src/components/CurrencyInputPanel/FiatValue.json
deleted file mode 100644
index 82fc145c6..000000000
--- a/.autodoc/docs/json/core/src/components/CurrencyInputPanel/FiatValue.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "FiatValue.tsx",
- "filePath": "core/src/components/CurrencyInputPanel/FiatValue.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/CurrencyInputPanel/FiatValue.tsx",
- "summary": "The code above is a React component that renders a fiat value and a price impact. It imports `Currency`, `CurrencyAmount`, and `Percent` from the `@zoolabs/zdk` library, as well as `React` and `useMemo` from the `react` library, and `t` and `warningSeverity` from other files in the project. \n\nThe `FiatValue` component takes two props: `fiatValue` and `priceImpact`. `fiatValue` is a `CurrencyAmount` object that represents a fiat value, or null/undefined if there is no fiat value. `priceImpact` is a `Percent` object that represents the price impact, or undefined if there is no price impact. \n\nThe component first uses `useMemo` to compute a `priceImpactClassName` based on the `priceImpact` prop. If `priceImpact` is undefined, `priceImpactClassName` is also undefined. If `priceImpact` is less than 0, `priceImpactClassName` is \"text-green\". Otherwise, `priceImpactClassName` is computed based on the `severity` of the `priceImpact`, which is determined using the `warningSeverity` function imported from another file. If `severity` is less than 1, `priceImpactClassName` is \"text-secondary\". If `severity` is less than 3, `priceImpactClassName` is \"text-yellow\". Otherwise, `priceImpactClassName` is \"text-red\". \n\nThe component then returns a div that contains the fiat value and price impact. If `fiatValue` is not null/undefined, the fiat value is rendered as a string with a dollar sign and commas for thousands separators. If `priceImpact` is not undefined, the price impact is rendered as a string with a percent sign and a class name based on `priceImpactClassName`. \n\nThis component can be used in a larger project that involves displaying fiat values and price impacts. It can be imported into other React components and used like any other React component. For example, it could be used in a trading interface to display the fiat value and price impact of a trade. \n\nExample usage:\n\n```\nimport { FiatValue } from \"./FiatValue\";\n\nfunction TradeSummary({ fiatValue, priceImpact }) {\n return (\n console.log(\"Panel clicked!\")}\n onCurrencySelect={(currency) => console.log(`Selected currency: ${currency.symbol}`)}\n currency={{ symbol: \"ETH\" }}\n disableCurrencySelect={false}\n otherCurrency={{ symbol: \"USDC\" }}\n id=\"currency-select-panel\"\n showCommonBases={true}\n/>\n```",
- "questions": "1. What is the purpose of this code and where is it used in the project?\n- This code is a React component called `CurrencySelectPanel` that renders a panel for selecting a currency. It is likely used in a part of the project where currency selection is required.\n\n2. What dependencies does this code have and what are they used for?\n- This code has several dependencies including `@heroicons/react`, `@zoolabs/zdk`, and `@lingui/macro`. These dependencies are used for icons, currency-related functionality, and internationalization respectively.\n\n3. What props does the `CurrencySelectPanel` component accept and what are their types?\n- The `CurrencySelectPanel` component accepts several props including `onClick`, `onCurrencySelect`, `currency`, `disableCurrencySelect`, `otherCurrency`, `id`, and `showCommonBases`. Their types are defined in the `CurrencySelectPanelProps` interface and include optional functions, booleans, and currency objects.",
- "checksum": "adc6126d978c96c0d32f8d05db25620c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/CurrencySwitch/index.json b/.autodoc/docs/json/core/src/components/CurrencySwitch/index.json
deleted file mode 100644
index 8f13db4ee..000000000
--- a/.autodoc/docs/json/core/src/components/CurrencySwitch/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/CurrencySwitch/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/CurrencySwitch/index.tsx",
- "summary": "The code above is a React component that exports a switch button that toggles between two currencies, ZOO and BNB. The switch button is styled using Material UI's `styled` function and is composed of three main parts: the switch base, the switch thumb, and the switch track. \n\nThe switch base is the underlying structure of the switch button and is styled to have a width of 80 pixels, a height of 40 pixels, and no padding. The switch thumb is the circular button that moves along the switch track when the switch is toggled. The switch thumb is styled to have a width and height of 32 pixels, a background image of the Zoo logo, and a white background color. The switch track is the bar that the switch thumb moves along when the switch is toggled. The switch track is styled to have a border radius of 20 pixels and a dark background color.\n\nThe `CurrencySwitch` component takes two props: `checked` and `checkFunc`. `checked` is a boolean that determines whether the switch is toggled or not, and `checkFunc` is a function that is called when the switch is toggled. The `CurrencySwitch` component renders a `FormGroup` component that contains a `Stack` component with three child components: two `h6` elements that display the currency names and the `UiSwitch` component that is the styled switch button. \n\nThis component can be used in a larger project that requires a switch button to toggle between two options. For example, in a cryptocurrency trading app, this switch button can be used to toggle between two currencies that the user wants to trade. \n\nExample usage:\n\n```\nimport CurrencySwitch from './CurrencySwitch'\n\nfunction TradingPage() {\n const [isZooSelected, setIsZooSelected] = useState(true)\n\n const handleCurrencyToggle = () => {\n setIsZooSelected(!isZooSelected)\n }\n\n return (\n \n \n \n```",
- "questions": "1. What external libraries or frameworks are being used in this code?\n- The code is importing the `Button` and `Tooltip` components from the `@mui/material` library, and is also using the `React` library.\n\n2. What is the purpose of the `CustomTooltip` component?\n- The `CustomTooltip` component is a custom wrapper around the `Tooltip` component from the `@mui/material` library, which adds some custom styling and behavior to the tooltip.\n\n3. What props can be passed to the `CustomTooltip` component?\n- The `CustomTooltip` component accepts three props: `title` (a string that specifies the tooltip text), `children` (any valid React node that will be wrapped by the tooltip), and `center` (an optional boolean that determines whether the tooltip should be centered above the wrapped content).",
- "checksum": "022466df4a8e8a020f43e4e4fdf3cd9f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Dots/index.json b/.autodoc/docs/json/core/src/components/Dots/index.json
deleted file mode 100644
index 63b1d6968..000000000
--- a/.autodoc/docs/json/core/src/components/Dots/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Dots/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Dots/index.tsx",
- "summary": "The code above defines a React component called `Dots` that renders a span element with a CSS class that adds an animated ellipsis to the end of the text content. The component takes two props: `children` and `className`. The `children` prop is optional and defaults to an empty span element. The `className` prop is also optional and is used to add additional CSS classes to the span element.\n\nThe `Dots` component uses the `classNames` function from a file located in the `functions` directory to concatenate the CSS classes passed in the `className` prop with the default CSS classes. The resulting CSS classes are applied to the span element using the `className` attribute.\n\nThe CSS classes applied to the span element include `after:inline-block`, which sets the display property to inline-block, `dots`, which sets the font size and color of the text, `after:animate-ellipsis`, which adds an animation that displays three dots in sequence, and `after:w-4` and `after:text-left`, which set the width and text alignment of the ellipsis animation.\n\nThis component can be used in the larger project to display a loading indicator or to indicate that content is being loaded asynchronously. For example, the `Dots` component could be used in a button component to indicate that a form is being submitted or in a table component to indicate that data is being fetched from a server.\n\nHere is an example of how the `Dots` component can be used in a React component:\n\n```\nimport Dots from \"./components/Dots\";\n\nfunction LoadingIndicator() {\n return (\n \n```\n\nThis would render two logos, one for USD and one for BTC, with a size of 24 pixels and a margin of 4 pixels on the top and bottom. The logos would be separated by a margin of 2 pixels.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `DoubleCurrencyLogo` that renders two currency logos side by side.\n\n2. What are the required inputs for this component?\n- The required inputs for this component are two currency objects (`currency0` and `currency1`) and an optional `size` value.\n\n3. What is the `classNames` function used for?\n- The `classNames` function is used to concatenate multiple class names together for the `div` element that wraps the two currency logos.",
- "checksum": "81a2ef4d923f03289b647a6201916f2e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Empty/index.json b/.autodoc/docs/json/core/src/components/Empty/index.json
deleted file mode 100644
index 3085da76e..000000000
--- a/.autodoc/docs/json/core/src/components/Empty/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Empty/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Empty/index.tsx",
- "summary": "The code above is a React component called `Empty` that renders an empty container with optional children and a customizable className. This component is part of the larger `zoo` project and can be used to display empty states in various parts of the application.\n\nThe `Empty` component is a functional component that takes in two props: `children` and `className`. The `children` prop is optional and can be used to pass in any child elements that should be rendered inside the empty container. The `className` prop is also optional and can be used to add any additional CSS classes to the container.\n\nThe `Empty` component uses the `classNames` function from the `styling` module to generate a dynamic className for the container. The `classNames` function takes in any number of arguments, which can be strings or objects, and returns a concatenated string of all the valid class names. In this case, the `classNames` function is used to combine the following classes: \"flex\", \"flex-col\", \"justify-center\", \"items-center\", \"py-4\", \"px-3\", \"rounded\", and \"min-h-empty\". These classes are all part of the Tailwind CSS framework and are used to style the empty container.\n\nOnce the className is generated, it is passed to the `div` element as a prop. The `div` element is the main container for the `Empty` component and is rendered with the generated className and any child elements passed in through the `children` prop.\n\nOverall, the `Empty` component is a simple and reusable component that can be used to display empty states in various parts of the `zoo` application. Here is an example of how the `Empty` component can be used:\n\n```\nimport Empty from \"./components/Empty\";\n\nconst MyComponent = () => {\n const data = [];\n\n return (\n \" in the component declaration?\n \"FC\" stands for \"Function Component\" and is a shorthand way of declaring a component that takes props and returns JSX. \"React.HTMLAttributes\" is a type definition for the props that this component can accept, specifically HTML attributes that can be applied to a div element.\n\n3. What is the purpose of the \"classNames\" function imported from \"../../functions/styling\"?\n The \"classNames\" function is likely a utility function for generating CSS class names based on the arguments passed to it. This can make it easier to apply dynamic or conditional styling to components.",
- "checksum": "947ac61589042e39f4fd2a8666098771"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/EndangeredSpecies/index.json b/.autodoc/docs/json/core/src/components/EndangeredSpecies/index.json
deleted file mode 100644
index fb4249d7e..000000000
--- a/.autodoc/docs/json/core/src/components/EndangeredSpecies/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/EndangeredSpecies/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/EndangeredSpecies/index.tsx",
- "summary": "The code is a React component that renders a UI for a feature called \"Endangered Species\" in the larger project. The UI consists of a series of cards that describe different actions that can be taken with animal NFTs. The component imports several hooks and functions from other parts of the project to handle interactions with the blockchain and state management.\n\nThe component uses the `useActiveWeb3React` hook to get the user's account, library, and chain ID from the active Web3 context. It also uses the `useBuyZoo` hook to get a function that can be called to buy the project's native token, $ZOO. The `useState` hook is used to manage several boolean flags that control the display of different UI elements.\n\nThe UI is structured as a series of cards that describe different actions that can be taken with animal NFTs. Each card contains an icon, a title, and a description. The first card describes the overall purpose of the feature and how it relates to non-profit organizations. The remaining cards describe actions that can be taken with animal NFTs, such as hatching, feeding, growing, and breeding. The UI also includes a call-to-action button that triggers the `handleFunds` function when clicked.\n\nThe `handleFunds` function is imported from a utility file and takes the user's chain ID and a `buyZoo` function as arguments. It uses the `faucet` hook to get some test tokens and then calls the `buyZoo` function to buy $ZOO tokens with those test tokens. Finally, it dispatches an action to update the user's $ZOO balance.\n\nOverall, this code provides a UI for the \"Endangered Species\" feature and handles interactions with the blockchain and state management. It can be used as a standalone component or integrated into a larger project. Here is an example of how this component might be used in a larger project:\n\n```jsx\nimport React from \"react\";\nimport EndangeredSpecies from \"zoo/EndangeredSpecies\";\n\nconst HomePage = () => {\n return (\n \n \n \n )\n}\n\nexport default Header\n```\n\nIn this example, the `ThemeSwitcher` component is included in the `Header` component, allowing the user to toggle between light and dark themes from the header of the website.",
- "questions": "1. What library is being used for theming and icon rendering?\n- The code is using `next-themes` library for theming and `@fortawesome/react-fontawesome` and `@fortawesome/free-solid-svg-icons` for icon rendering.\n\n2. What is the purpose of the `ThemeSwitcher` component?\n- The `ThemeSwitcher` component is responsible for rendering a button that toggles between light and dark themes when clicked.\n\n3. How is the button's text color determined based on the current theme?\n- The button's text color is determined by checking if the current theme is `'dark'`. If it is, the text color is set to white, otherwise it is set to black.",
- "checksum": "fa6caabc1c4642fee2933ff616da78fa"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Header/drop.json b/.autodoc/docs/json/core/src/components/Header/drop.json
deleted file mode 100644
index b346a1d48..000000000
--- a/.autodoc/docs/json/core/src/components/Header/drop.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "drop.tsx",
- "filePath": "core/src/components/Header/drop.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Header/drop.tsx",
- "summary": "This code defines a React component called `DropTopBar` that renders a navigation bar for the Zoo project website. The navigation bar includes a logo, links to various pages on the website, a dropdown menu for additional links, a button to open a cart side panel, and a button to connect a wallet. The component imports various dependencies, including `@zoolabs/zdk`, `next/router`, `@headlessui/react`, and `@heroicons/react/outline`. \n\nThe `DropTopBar` component takes an object `props` as input, which can include boolean values for `banner`, `isModal`, and `transparent`. These values determine the appearance of the navigation bar. \n\nThe component uses various hooks to access data from the Redux store and the Web3 provider. For example, it uses the `useActiveWeb3React` hook to get the user's account, chain ID, library, and connector. It also uses the `useETHBalances` hook to get the user's ETH balance, and the `useZoobalance` hook to get the user's ZOO balance. \n\nThe component renders a `Popover` component from `@headlessui/react`, which provides a dropdown menu for additional links. The dropdown menu includes links to the marketplace, chart, community, and learn pages. \n\nThe component also renders a `Web3Status` component, which displays the user's wallet connection status and allows the user to connect or disconnect their wallet. When the user is connected to a wallet, the component displays a `NetworkPopup` component, which shows the user's ETH and ZOO balances and allows the user to switch networks. \n\nFinally, the component renders a `CartSideNav` component, which displays the user's cart items in a side panel. \n\nThis component is used as the header for various pages on the Zoo project website, providing a consistent navigation experience across the site. For example, it is used on the homepage, marketplace, and community pages.",
- "questions": "1. What is the purpose of the `DropTopBar` component?\n- The `DropTopBar` component is a header navigation bar that includes links to various pages, a logo, a wallet connection status, and a shopping cart.\n\n2. What libraries and hooks are being imported and used in this file?\n- The file imports and uses several libraries and hooks, including `@zoolabs/zdk`, `React`, `next/router`, `@headlessui/react`, `@lingui/macro`, `useActiveWeb3React`, `useETHBalances`, `useLingui`, `useZoobalance`, `useAppSelector`, `CartSideNav`, `NetworkModal`, and `NetworkPopup`.\n\n3. What is the purpose of the `More`, `Community`, and `Learn` components?\n- The `More` component is a dropdown menu that includes additional links to various pages. The `Community` and `Learn` components are buttons that link to specific pages related to the project.",
- "checksum": "199b44ad71b4bc5a50f9c8cc811e25bc"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Icons/close-icon.json b/.autodoc/docs/json/core/src/components/Icons/close-icon.json
deleted file mode 100644
index 0f87d9eb7..000000000
--- a/.autodoc/docs/json/core/src/components/Icons/close-icon.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "close-icon.tsx",
- "filePath": "core/src/components/Icons/close-icon.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Icons/close-icon.tsx",
- "summary": "This code defines a React component called `CloseIcon`. The component returns an SVG element that displays a white X inside a circle. The X is created using a `path` element with a specific set of coordinates that form the shape of the X. The `fill` attribute of the `path` element is set to white, which fills the X with white color.\n\nThis component can be used in a larger project as an icon for a close button or to indicate that an action will close or cancel something. The component can be imported into another React component and used like any other React component. For example, if we have a `Modal` component that needs a close button, we can import the `CloseIcon` component and use it like this:\n\n```\nimport React from \"react\";\nimport CloseIcon from \"./CloseIcon\";\n\nconst Modal = () => {\n return (\n \n \n \n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component that renders a modal using the Headless UI library.\n\n2. What props does the `HeadlessUIModal` component accept?\n- The `HeadlessUIModal` component accepts three props: `isOpen` (a boolean indicating whether the modal should be open), `onDismiss` (a function to be called when the modal is dismissed), and `children` (optional React nodes to be rendered inside the modal).\n\n3. What is the purpose of the `Transition` and `Dialog` components from the Headless UI library?\n- The `Transition` component is used to animate the modal when it enters and exits the screen, while the `Dialog` component provides the basic structure and behavior of the modal (such as closing when the user clicks outside of it).",
- "checksum": "5a1c0b1bcada8a9a35d5ffb60d354ae1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Modal/index.json b/.autodoc/docs/json/core/src/components/Modal/index.json
deleted file mode 100644
index e9f958c97..000000000
--- a/.autodoc/docs/json/core/src/components/Modal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Modal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Modal/index.tsx",
- "summary": "The `Modal` component in this file is used to create a modal dialog box that can be used in a larger project. The component takes in several props that can be used to customize the modal's appearance and behavior. \n\nThe `isOpen` prop is used to determine whether the modal is currently open or closed. The `onDismiss` prop is a callback function that is called when the user clicks outside the modal or presses the escape key. \n\nThe `minHeight` and `maxHeight` props are used to set the minimum and maximum height of the modal, respectively. The `padding` prop is used to set the amount of padding around the content of the modal. The `maxWidth` prop is used to set the maximum width of the modal. \n\nThe `isMax` prop is used to determine whether the modal should take up the entire screen. The `isFullWidth` prop is used to determine whether the modal should take up the full width of the screen. The `backgroundColor` prop is used to set the background color of the modal. \n\nThe `scrollable` prop is used to determine whether the modal should be scrollable if its content exceeds its maximum height. The `transitionProps` prop is an object that can be used to pass additional props to the `Transition` component that is used to animate the modal.\n\nThe `Modal` component renders a `Transition` component that is used to animate the modal when it is opened or closed. The `Dialog` component is used to create the actual modal dialog box. \n\nThe content of the modal is rendered inside a `div` element with the class `flex flex-col w-full h-full p-6 overflow-y-auto rounded bg-dark-900`. The `minHeight` and `maxHeight` props are used to set the minimum and maximum height of this `div` element. \n\nOverall, this `Modal` component provides a flexible and customizable way to create modal dialog boxes in a larger project. Here is an example of how the `Modal` component can be used:\n\n```\nimport Modal from './Modal';\n\nfunction App() {\n const [isOpen, setIsOpen] = useState(false);\n\n const handleOpenModal = () => {\n setIsOpen(true);\n };\n\n const handleCloseModal = () => {\n setIsOpen(false);\n };\n\n return (\n \n About\n \n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a custom NavLink component that wraps around the Next.js Link component and adds an active class to the link when it matches the current URL.\n\n2. What are the required dependencies for this code to work?\n- This code requires the following dependencies to be imported: Link and LinkProps from 'next/link', React and Children from 'react', and useRouter from 'next/router'.\n\n3. How does the isActive variable determine if a link is active?\n- The isActive variable is determined by checking if the current URL matches the href or as props of the NavLink component. If the exact prop is true, it checks for an exact match, otherwise it checks if the current URL starts with the href or as props.",
- "checksum": "2529a874d09c45073431775a3f59a6f1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/NewNFTCard/index.json b/.autodoc/docs/json/core/src/components/NewNFTCard/index.json
deleted file mode 100644
index f8b8018c9..000000000
--- a/.autodoc/docs/json/core/src/components/NewNFTCard/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/NewNFTCard/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/NewNFTCard/index.tsx",
- "summary": "The code is a React component that renders a card displaying information about a specific NFT (non-fungible token) item. The component takes in two props: `nftItem`, which is an object containing information about the NFT, and `onClick`, which is a function that is called when the user clicks on the \"View Item\" button.\n\nThe component first imports several modules, including `dynamic` from the `next/dynamic` package, `getAge` from a `functions` module, `Image` from the `next/image` package, `React`, and `moment`. It then defines an interface for the `IndexProps` object that is passed to the component.\n\nThe `NewNFTCard` component renders a div that contains several elements. The first element is a div that displays the NFT's initials in a circle, with the background color of the circle determined by the first letter of the NFT's attributes. The second element is a video or 3D model of the NFT, depending on the value of the `kind` property of the `nftItem` object. If `kind` is 0 or 2, a video is displayed, otherwise a 3D model is displayed using the `ModelViewer` component. The third element displays the age of the NFT and the time since it was created. The fourth element displays the name of the NFT, its ID, and whether it is an \"Origin\" NFT. The fifth element is a div that displays the ZOO logo and some text. The final element is a div that displays a \"View Item\" button, which calls the `onClick` function when clicked.\n\nThis component can be used in a larger project that involves displaying information about NFTs. It can be used to display a single NFT item, and can be reused multiple times to display multiple NFT items. Here is an example of how the component can be used:\n\n```\nimport NewNFTCard from \"./NewNFTCard\";\n\nconst nftItem = {\n id: 1,\n name: \"My NFT\",\n kind: 0,\n token_uri: \"https://example.com/nft.mp4\",\n glb_animation_url: \"https://example.com/nft.glb\",\n usdz_animation_url: \"https://example.com/nft.usdz\",\n timestamp: 1631234567,\n stage: 1,\n attributes: [\n {\n trait_type: \"Type\",\n value: [\"Egg\"],\n },\n ],\n};\n\nfunction handleClick() {\n console.log(\"View item clicked\");\n}\n\nfunction App() {\n return (\n Popover content
} show={showPopover}>\n \n\n```",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code defines a `Popover` component that can be used to display content in a pop-up window. It uses the `usePopper` hook from the `react-popper` library to position the pop-up relative to a reference element, and also includes an arrow element that can be positioned using the same hook.\n\n2. What are the required and optional props for the `Popover` component?\n- The `Popover` component requires `content`, `show`, and `children` props. The `content` prop should be a React node that will be displayed in the pop-up, the `show` prop is a boolean that determines whether the pop-up is visible, and the `children` prop is the reference element that the pop-up will be positioned relative to. The `placement` prop is optional and determines the initial placement of the pop-up relative to the reference element.\n\n3. What libraries and hooks are used in this code?\n- This code uses the `react`, `@popperjs/core`, `react-popper`, and `@headlessui/react` libraries. It also uses the `useState` and `useCallback` hooks from React, as well as a custom `useInterval` hook that is not defined in this file.",
- "checksum": "8a12867ae1adee99e6056504b53fe598"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Popups/PopupItem.json b/.autodoc/docs/json/core/src/components/Popups/PopupItem.json
deleted file mode 100644
index d2cd60015..000000000
--- a/.autodoc/docs/json/core/src/components/Popups/PopupItem.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "PopupItem.tsx",
- "filePath": "core/src/components/Popups/PopupItem.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Popups/PopupItem.tsx",
- "summary": "The `PopupItem` component is a React component that renders a popup notification. It takes in three props: `removeAfterMs`, `content`, and `popKey`. \n\nThe `removeAfterMs` prop is a number that represents the duration in milliseconds after which the popup should be removed. If it is `null`, the popup will not be removed automatically. \n\nThe `content` prop is an object that contains the content of the popup. If the `content` object has a property called `txn`, the component will render a `TransactionPopup` component with the `hash`, `success`, and `summary` properties of the `txn` object. \n\nThe `popKey` prop is a string that represents the unique key of the popup. \n\nThe component uses the `useRemovePopup` hook to get a function that removes the popup from the state. It then uses the `useCallback` hook to memoize the `removeThisPopup` function, which removes the popup with the `popKey` key. \n\nThe component also uses the `useEffect` hook to set a timeout that removes the popup after `removeAfterMs` milliseconds. If `removeAfterMs` is `null`, the effect will not be triggered. \n\nThe component renders a div with a class of `mb-4` that contains a div with a class of `relative w-full overflow-hidden rounded bg-dark-700`. Inside this div, there is another div with a class of `flex flex-row p-4` that contains the `popupContent` and a div with a class of `cursor-pointer hover:text-white` that contains an `XIcon` component. The `XIcon` component is used to close the popup when clicked. \n\nIf `removeAfterMs` is not `null`, the component also renders an `AnimatedFader` component that fades out the popup after `removeAfterMs` milliseconds. \n\nOverall, the `PopupItem` component is a reusable component that can be used to render popup notifications with different content and durations. Here is an example of how it can be used:\n\n```\nThis content is only visible to users with non-blocked addresses
\n \n
\n );\n};\n```",
- "questions": "1. What is the purpose of the `Article` component being imported?\n- The `Article` component is being imported from a module called `components/blog/articles`, but without further context it is unclear what this component does or how it is used in this code.\n\n2. What is the expected shape of the `data` prop being passed to `BlogCards`?\n- The `data` prop is being destructured from the `props` object and passed to the `map` function, but it is unclear what type of data this prop is expected to contain or what properties each object in the array should have.\n\n3. What is the purpose of the link in the second `div` element?\n- The link in the second `div` element points to a Medium page, but it is unclear what relevance this has to the `BlogCards` component or the `data` being passed to it.",
- "checksum": "c1d2065e5f9c70a721bd666acc66da3e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Button/index.json b/.autodoc/docs/json/core/src/components/Button/index.json
deleted file mode 100644
index 40aa2bfd5..000000000
--- a/.autodoc/docs/json/core/src/components/Button/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Button/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Button/index.tsx",
- "summary": "The `Button` component is a reusable React component that renders a button element with customizable styles. It takes in several props, including `color`, `size`, and `variant`, which determine the appearance of the button. The `color` prop specifies the color scheme of the button, with options including blue, pink, gradient, gray, default, red, green, and indigo. The `size` prop determines the size of the button, with options including xs, sm, lg, default, and none. The `variant` prop determines the type of button, with options including outlined, filled, empty, and link.\n\nThe `Button` component also includes two additional components, `ButtonConfirmed` and `ButtonError`, which are variations of the `Button` component. `ButtonConfirmed` is used to render a button that is confirmed, with a green outline and a checkmark icon. `ButtonError` is used to render a button that indicates an error, with a red color scheme.\n\nThe `Button` component uses the `classNames` function from the `functions` module to dynamically generate class names based on the props passed to the component. These class names are used to apply the appropriate styles to the button element.\n\nOverall, the `Button` component is a flexible and customizable component that can be used throughout the project to render buttons with consistent styles. Here is an example of how the `Button` component can be used:\n\n```\nimport Button from \"./Button\";\n\nfunction MyComponent() {\n return (\n Blog
\n\n \n
\n );\n}\n```",
- "questions": "1. What are the different types of button variants available in this code?\n- There are four types of button variants available: outlined, filled, empty, and link.\n\n2. What are the different types of button colors available in this code?\n- There are eight types of button colors available: blue, pink, gradient, gray, default, red, green, and indigo.\n\n3. What is the purpose of the `ButtonConfirmed` and `ButtonError` functions?\n- `ButtonConfirmed` and `ButtonError` are functions that return a `Button` component with specific props and styles based on whether the `confirmed` or `error` boolean props are true or false. They are used to render buttons with specific styles for confirmation or error messages.",
- "checksum": "1d85abe7189686172c9dff7c392a6286"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/BuyEggSection/index.json b/.autodoc/docs/json/core/src/components/BuyEggSection/index.json
deleted file mode 100644
index 0aca87702..000000000
--- a/.autodoc/docs/json/core/src/components/BuyEggSection/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/BuyEggSection/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/BuyEggSection/index.tsx",
- "summary": "The `BuyEggSection` component is a React functional component that renders a section of the Zoo project's user interface. The section displays a list of available eggs for purchase, which are used to mint NFT animals. The component imports several dependencies, including icons from the Heroicons library, a custom loader component, and a Next.js `Link` component. \n\nThe component uses several hooks to manage state and data fetching. The `useGif` hook is used to access the global state of the project's GIF mode. The `useSelector` hook is used to access the `availableEggs` property of the Redux store, which contains an array of egg objects. The `useGetAvailableEggs` hook is used to fetch the available eggs from the project's backend API. Finally, the `useZooKeeper` hook is used to access the current user's zookeeper object.\n\nThe component renders a header and a paragraph of text that provide information about the available eggs. If the `isLoadingEggs` state variable is true, the component renders a custom loader component. Otherwise, the component renders a grid of egg objects, each of which contains an animation of the egg and a button that links to the egg's marketplace page. \n\nThe egg objects are rendered using the `availableEggs` array, which is mapped over to create a new array of egg components. Each egg component contains a `div` element that displays the egg's animation, which is rendered using a `video` element. The egg component also contains a button that links to the egg's marketplace page. \n\nOverall, the `BuyEggSection` component provides a user-friendly interface for purchasing eggs and minting NFT animals in the Zoo project. The component is designed to be reusable and can be easily integrated into other parts of the project's user interface.",
- "questions": "1. What is the purpose of the `useGif` hook and how is it used in this code?\n - The `useGif` hook is imported from a context called `GifContext` and is used to access the `gifMode` property from the context's state.\n2. What is the significance of the `isLoadingEggs` state variable and how is it used?\n - `isLoadingEggs` is a boolean state variable that is used to conditionally render a loading spinner while the `getAvailableEggs` function is fetching data.\n3. What is the purpose of the `CustomLoader` component and when is it rendered?\n - The `CustomLoader` component is a loading spinner that is rendered when `isLoadingEggs` is true, indicating that the `getAvailableEggs` function is fetching data.",
- "checksum": "07c5b8355ae63a9b379b3904dc55222b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/BuyNftCard/index.json b/.autodoc/docs/json/core/src/components/BuyNftCard/index.json
deleted file mode 100644
index 38f222408..000000000
--- a/.autodoc/docs/json/core/src/components/BuyNftCard/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/BuyNftCard/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/BuyNftCard/index.tsx",
- "summary": "The code defines a React component called `BuyNftCard` that renders a card displaying information about a non-fungible token (NFT) for sale. The component takes in several props, including an image, name, address, price, days, yields, and currency. \n\nThe `image` prop is a React node that represents the image of the NFT. The `name` prop is a string that represents the name of the NFT. The `address` prop is a string that represents the address of the NFT. The `price` prop is a string that represents the price of the NFT. The `days` prop is a string that represents the number of days left for the NFT sale. The `yields` prop is a string that represents the yield of the NFT. The `currency` prop is a string that represents the currency used for the price of the NFT. \n\nThe component renders a div that contains the NFT image and information about the NFT. The NFT image is displayed using the `image` prop. The NFT information is displayed using the `name`, `address`, `price`, `days`, `yields`, and `currency` props. The NFT name is displayed using the `name` prop. The NFT address is displayed using the `address` prop. The NFT price and currency are displayed using the `price` and `currency` props. The NFT days left is displayed using the `days` prop. The NFT yield is displayed using the `yields` prop. \n\nThe component is exported as the default export of the module, which means it can be imported and used in other parts of the project. For example, if there is a page that displays a list of NFTs for sale, the `BuyNftCard` component can be used to render each NFT card. \n\nExample usage:\n\n```\nimport BuyNftCard from \"./BuyNftCard\";\n\nconst nft = {\n image: ,\n name: \"Cool NFT\",\n address: \"0x1234567890abcdef\",\n price: \"1.23\",\n days: \"5\",\n yields: \"10%\",\n currency: \"ETH\",\n};\n\nconst NftCardPage = () => {\n return (\n \n
\n );\n};\n```",
- "questions": "1. What is the purpose of this component?\n- This component is a card component for buying NFTs (non-fungible tokens).\n\n2. What props does this component accept?\n- This component accepts the following props: `image`, `name`, `address`, `days`, `price`, `yields`, and `currency`.\n\n3. What is the default value for the `currency` prop?\n- The default value for the `currency` prop is `\"ZOO\"`.",
- "checksum": "94ec6d433b363612451151662f88ad84"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Card/index.json b/.autodoc/docs/json/core/src/components/Card/index.json
deleted file mode 100644
index b40ac975d..000000000
--- a/.autodoc/docs/json/core/src/components/Card/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Card/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Card/index.tsx",
- "summary": "The code above is a React component that exports a Card component. The Card component is a reusable component that can be used to display content in a card format. The component takes in several props, including header, footer, backgroundImage, title, description, children, and className. \n\nThe Card component is composed of a Header component and a div that contains the content of the card. The Header component is optional and can be used to display a header at the top of the card. The div that contains the content of the card is styled with a background image, a title, and a description. The background image is optional and can be set using the backgroundImage prop. The title and description are also optional and can be set using the title and description props, respectively. \n\nThe Card component can be used in a larger project to display content in a card format. For example, it can be used to display a list of products, a list of blog posts, or a list of events. The Card component can be customized by passing in different props to change the background image, title, and description. \n\nThe Header component is a simple component that takes in a className and children prop. The className prop is used to add additional styling to the header, while the children prop is used to render the content of the header. The Header component can be used in other components to display a header. \n\nBelow is an example of how the Card component can be used:\n\n```\nimport Card from \"./Card\";\n\nfunction ProductCard({ product }) {\n return (\n \n
\n \n );\n}\n```\n\nIn the example above, the Card component is used to display a product card. The product card displays the product image as the background image, the product name as the title, and the product description as the description. The content of the card is a div that displays the product price and an \"Add to Cart\" button.",
- "questions": "1. What is the purpose of the `Header` function and how is it used within the `Card` component?\n \n The `Header` function is a separate component that takes in a `className` and `children` prop and returns a div element with the `className` and `children` passed in. It is used within the `Card` component to render the header of the card if it is provided as a prop.\n\n2. What props can be passed into the `Card` component and what is their purpose?\n \n The `Card` component can receive several props including `header`, `footer`, `backgroundImage`, `title`, `description`, `children`, and `className`. These props are used to customize the content and styling of the card component.\n\n3. What is the purpose of the `classNames` function imported from \"../../functions/styling\" and how is it used within the `Header` component?\n \n The `classNames` function is used to concatenate multiple class names together into a single string. It is used within the `Header` component to combine the `className` prop passed into the component with the default class names for the header div element.",
- "checksum": "16db87a6219bd5b54fc8de0fa7fec8b5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Carousel/index.json b/.autodoc/docs/json/core/src/components/Carousel/index.json
deleted file mode 100644
index 7bbbca8e5..000000000
--- a/.autodoc/docs/json/core/src/components/Carousel/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Carousel/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Carousel/index.tsx",
- "summary": "The code above defines a React component called `Carousel` that uses the Swiper library to create a carousel of slides. The `Swiper` component is imported from the `swiper/react` module, along with the `SwiperSlide`, `Pagination`, and `Navigation` components. The `swiper/css`, `swiper/css/pagination`, and `swiper/css/navigation` modules are also imported to provide the necessary CSS styles for the carousel.\n\nThe `Carousel` component takes a single prop called `children`, which is expected to be an array of `SwiperSlide` components. These components represent the individual slides in the carousel and can contain any valid React content.\n\nThe `Swiper` component is configured with several props that control its behavior. The `slidesPerView` prop determines how many slides are visible at once, while the `spaceBetween` prop sets the distance between each slide. The `slidesPerGroup` prop specifies how many slides should be scrolled at once, and the `loop` prop enables infinite looping of the slides. The `pagination` prop enables pagination for the carousel and accepts an object with various options, such as `clickable` to allow clicking on the pagination bullets. The `navigation` prop enables navigation arrows for the carousel. Finally, the `modules` prop is used to specify which Swiper modules should be loaded, in this case `Pagination` and `Navigation`.\n\nThe `Carousel` component returns a div that wraps the `Swiper` component and sets some styling using Tailwind CSS classes. The `Swiper` component is passed the `children` prop, which should be an array of `SwiperSlide` components.\n\nThis code can be used in a larger project to create a carousel of images, videos, or any other content that can be displayed in a slide format. The `Carousel` component can be imported and used in any React component that needs a carousel. For example:\n\n```\nimport Carousel from './Carousel'\nimport Slide from './Slide'\n\nconst MyComponent = () => {\n return (\n \n {product.price}\n
\n \n \n
\n )\n}\n\nexport default Modal\n```\n\nIn this example, the `CloseIcon` component is used as the close button for the modal. When the `CloseIcon` is clicked, the `onClose` function is called to close the modal. The `children` prop is used to render the content of the modal.\n\nOverall, the `CloseIcon` component is a simple and reusable component that can be used in various UI elements to provide a consistent and recognizable way to close or dismiss them.",
- "questions": "1. What is the purpose of this code?\n - This code defines a React component called `CloseIcon` that renders an `X` icon from the `react-feather` library and applies a `cursor-pointer` class to it.\n\n2. What other props can be passed to the `CloseIcon` component?\n - Any additional props passed to the `CloseIcon` component will be spread onto the `X` element, so any valid props for the `X` element from the `react-feather` library can be used.\n\n3. Is the `react-feather` library a required dependency for this code to work?\n - Yes, the `react-feather` library is imported and used in this code, so it must be installed and available in the project for this component to render properly.",
- "checksum": "4276a496a170bf8039e4a2c7aac2ea37"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Column/index.json b/.autodoc/docs/json/core/src/components/Column/index.json
deleted file mode 100644
index 6fc1af3af..000000000
--- a/.autodoc/docs/json/core/src/components/Column/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Column/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Column/index.tsx",
- "summary": "This code defines a set of React components for creating flexible and responsive column layouts. The components are designed to be used within a larger project, such as a web application or website, to help structure content and layout elements on a page.\n\nThe `Column` component is a basic building block for creating a column layout. It takes in any number of child elements and renders them vertically stacked within a container. The `ColumnCenter` component is a variation of `Column` that centers its child elements horizontally within the container. Both components accept additional CSS classes and HTML attributes as props.\n\nThe `AutoColumn` component is a more advanced version of `Column` that uses CSS grid to create a flexible and responsive layout. It allows for more fine-grained control over the spacing and alignment of child elements, and includes props for specifying the size of the gaps between columns and the horizontal alignment of elements within each column.\n\nOverall, these components provide a useful set of tools for creating flexible and responsive column layouts within a React application. They can be used in a variety of contexts, such as displaying lists of items, organizing form fields, or laying out content on a page. Here is an example of how the `Column` component might be used to create a simple layout:\n\n```\nimport React from \"react\";\nimport { Column } from \"./components/layout\";\n\nconst MyComponent = () => (\n \n
\n My Heading
\nSome text goes here.
\n \n\n
\n );\n};\n\nexport default MyPage;\n```\n\nIn this example, the `ComingSoon` component is used to display a message on the `MyPage` component. When the `MyPage` component is rendered, it will display the \"Coming Soon\" message below the heading.",
- "questions": "1. What is the purpose of the `fadeInOnScroll` function imported from \"animation\"?\n- The `fadeInOnScroll` function is used to animate the `comingSoonRef` element when it is scrolled into view.\n\n2. What is the significance of the `comingSoonRef` variable being assigned to `React.useRef()`?\n- The `comingSoonRef` variable is used to reference the `div` element that contains the \"Coming Soon\" text and the link to the home page. It is assigned to `React.useRef()` so that it can be passed to the `fadeInOnScroll` function to trigger the animation.\n\n3. What is the purpose of the `Link` component imported from \"next/link\"?\n- The `Link` component is used to create a link to the home page of the website. When clicked, it will navigate the user to the home page without causing a full page refresh.",
- "checksum": "2e280088337909b1d9148a216e4fc111"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Container/index.json b/.autodoc/docs/json/core/src/components/Container/index.json
deleted file mode 100644
index 3b3d142fa..000000000
--- a/.autodoc/docs/json/core/src/components/Container/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Container/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Container/index.tsx",
- "summary": "The code above is a React component that exports a container with a maximum width. The component is part of a larger project called \"zoo\". \n\nThe `MAX_WIDTH` object contains CSS classes that define the maximum width of the container. The keys of the object represent the different sizes of the container, and the values are the corresponding CSS classes. The sizes range from \"full\" to \"xs\", with \"2xl\" being the default size.\n\nThe `Container` component takes three props: `children`, `maxWidth`, and `className`. The `children` prop is used to render any child components within the container. The `maxWidth` prop is used to set the maximum width of the container. If no `maxWidth` prop is provided, the default value of \"2xl\" is used. The `className` prop is used to add any additional CSS classes to the container.\n\nThe `classNames` function is imported from a file located in the `functions` directory. This function is used to concatenate the CSS classes passed in as props with the CSS classes defined in the `MAX_WIDTH` object.\n\nThe `Container` component returns a `div` element with the concatenated CSS classes and any additional props passed in using the spread operator. The `children` prop is rendered within the `div` element.\n\nThis component can be used throughout the larger \"zoo\" project to create containers with a maximum width. Developers can customize the maximum width of the container by passing in a `maxWidth` prop, or they can use the default value of \"2xl\". They can also add any additional CSS classes to the container using the `className` prop. \n\nExample usage:\n\n```\nimport Container from \"./path/to/Container\";\n\nfunction App() {\n return (\n Welcome to My Page
\nHello, world!
\n\n
\n );\n}\n```",
- "questions": "1. What external libraries or dependencies are being used in this code?\n- The code is importing from \"@zoolabs/zdk\", \"@lingui/macro\", and \"../../functions/prices\".\n\n2. What is the purpose of the `FiatValue` function and what are its input parameters?\n- The `FiatValue` function takes in two parameters: `fiatValue` which is a nullable `CurrencyAmount` object, and `priceImpact` which is an optional `Percent` object. The purpose of the function is to return a JSX element that displays the `fiatValue` and `priceImpact` in a specific format.\n\n3. What is the purpose of the `priceImpactClassName` variable and how is it determined?\n- The `priceImpactClassName` variable is determined using a `useMemo` hook and is used to determine the CSS class name for the `priceImpact` element. The class name is determined based on the value of `priceImpact` and the `warningSeverity` function from the `../../functions/prices` module.",
- "checksum": "656978bccb1d9523dab6cb51833cdb05"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/CurrencyInputPanel/index.json b/.autodoc/docs/json/core/src/components/CurrencyInputPanel/index.json
deleted file mode 100644
index 866da3d01..000000000
--- a/.autodoc/docs/json/core/src/components/CurrencyInputPanel/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/CurrencyInputPanel/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/CurrencyInputPanel/index.tsx",
- "summary": "The `CurrencyInputPanel` component is a reusable UI component that provides an input field for users to enter a token amount and select a token from a dropdown menu. It is used in the larger project to allow users to input token amounts for various actions, such as swapping tokens or providing liquidity.\n\nThe component imports several dependencies, including `React`, `@zoolabs/zdk`, and various other UI components and hooks. It also defines an interface `CurrencyInputPanelProps` that specifies the props that can be passed to the component.\n\nThe component renders a container `div` with a dark background and rounded corners. Within this container, there are two main sections: a token selection section and an input section.\n\nThe token selection section displays a token logo, token symbol, and dropdown arrow. If a `Pair` prop is passed to the component, it displays a double token logo instead. If a `Currency` prop is passed, it displays the corresponding token logo. If neither prop is passed, it displays an animation of a hand selecting a coin. The token symbol is displayed next to the logo, and if the user clicks on the section, a dropdown menu appears allowing the user to select a different token. If the `disableCurrencySelect` prop is set to `true`, the dropdown arrow is not displayed and the user cannot select a different token.\n\nThe input section displays an input field for the user to enter a token amount, as well as a \"Max\" button that sets the input field to the user's maximum token balance. If a `Currency` prop is passed, it displays the user's token balance next to the input field. If a `fiatValue` prop is passed, it displays the fiat value of the user's token balance. If the `hideInput` prop is set to `true`, the input section is not displayed.\n\nThe component also includes a `CurrencySearchModal` that is displayed when the user clicks on the token selection section. This modal allows the user to search for and select a different token.\n\nOverall, the `CurrencyInputPanel` component provides a flexible and reusable UI component for token input and selection. It can be used in various contexts throughout the larger project to allow users to interact with different tokens.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `CurrencyInputPanel` that renders a UI panel for selecting and inputting a currency amount.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several modules from external libraries, including `@zoolabs/zdk`, `react`, `@heroicons/react/outline`, `lottie-react`, and `@lingui/react`.\n\n3. What props can be passed to the `CurrencyInputPanel` component?\n- The `CurrencyInputPanel` component accepts several optional props, including `value`, `onUserInput`, `onMax`, `showMaxButton`, `label`, `onCurrencySelect`, `currency`, `disableCurrencySelect`, `hideBalance`, `pair`, `hideInput`, `otherCurrency`, `fiatValue`, `priceImpact`, `id`, `showCommonBases`, `renderBalance`, `locked`, and `customBalanceText`.",
- "checksum": "f5cfb6c260ca7aa9779a1c06212b4992"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/CurrencyLogo/index.json b/.autodoc/docs/json/core/src/components/CurrencyLogo/index.json
deleted file mode 100644
index 864dede10..000000000
--- a/.autodoc/docs/json/core/src/components/CurrencyLogo/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/CurrencyLogo/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/CurrencyLogo/index.tsx",
- "summary": "This code defines a React component called `CurrencyLogo` that renders a logo for a given cryptocurrency. The logo is fetched from various sources, including the SushiSwap token icon repository and the TrustWallet asset repository. The component takes a `currency` prop, which is an object that represents the cryptocurrency to display. The `currency` object must have a `symbol` property that represents the currency's ticker symbol, and may also have a `chainId` property that represents the ID of the blockchain on which the currency is issued. If the `currency` object is not provided or is invalid, the component will render a default \"unknown\" logo.\n\nThe `CurrencyLogo` component first calls the `useHttpLocations` hook to fetch the logo URI for the given currency. If the currency is a wrapped token, the component will use the `logoURI` property of the `WrappedTokenInfo` object, or the `logoURI` property of the `tokenInfo` object if the former is not defined. The `useHttpLocations` hook returns an array of possible logo URLs based on the URI, which are then used to fetch the logo image.\n\nIf the currency is a native token (e.g. ETH or BNB), the component will use a pre-defined logo URL based on the currency's `chainId`. If the currency is a token other than a wrapped token, the component will call the `getCurrencyLogoUrls` function to generate an array of possible logo URLs based on the currency's `symbol` and `chainId`. The `getCurrencyLogoUrls` function first generates a URL based on the currency's symbol, then generates two additional URLs based on the currency's `chainId` and address. These URLs are then returned as an array.\n\nThe `CurrencyLogo` component then generates an array of logo URLs by concatenating the URI locations returned by `useHttpLocations` with the default logo URLs generated by `getCurrencyLogoUrls`. If the currency is a native token, the component will also include the pre-defined logo URL for the currency's `chainId`. If the currency is invalid or not provided, the component will include the \"unknown\" logo URL.\n\nFinally, the `CurrencyLogo` component renders a `Logo` component with the generated logo URLs, as well as the `width`, `height`, `alt`, `className`, and other props passed to it. The `Logo` component is defined in a separate file and is not included in this code snippet.\n\nThis component can be used in various parts of the larger project to display logos for different cryptocurrencies. For example, it could be used in a wallet interface to display the logos of the user's assets, or in a trading interface to display the logos of the tokens being traded. Here is an example usage of the `CurrencyLogo` component:\n\n```jsx\nimport { Currency } from \"@zoolabs/zdk\";\nimport CurrencyLogo from \"./CurrencyLogo\";\n\nfunction MyComponent() {\n const currency: Currency = { symbol: \"ETH\", chainId: 1 };\n return Trade Summary
\n\n
\n )\n}\n```\n\nIn the example above, the `TradingPage` component renders the `CurrencySwitch` component and a paragraph that displays the currently selected currency. The `TradingPage` component also has a state variable `isZooSelected` that determines whether the ZOO currency is selected or not. The `handleCurrencyToggle` function is called when the switch button is toggled and updates the `isZooSelected` state variable.",
- "questions": "1. What is the purpose of this code?\n This code exports a React component called `CurrencySwitch` that renders a switch with two labels, \"ZOO\" and \"BNB\", and an image of a zoo logo.\n\n2. What is the significance of the `styled` function from `@mui/material/styles`?\n The `styled` function is used to create a custom styled component based on the `Switch` component from `@mui/material/Switch`. The custom component is called `UiSwitch` and has specific styles applied to it.\n\n3. What are the props accepted by the `CurrencySwitch` component?\n The `CurrencySwitch` component accepts two props: `checked`, a boolean value that determines whether the switch is checked or not, and `checkFunc`, a function that is called when the switch is toggled.",
- "checksum": "66b27b9536da4e545a07f4c8f9ee9a1a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/CustomLoader/index.json b/.autodoc/docs/json/core/src/components/CustomLoader/index.json
deleted file mode 100644
index 055b4cb80..000000000
--- a/.autodoc/docs/json/core/src/components/CustomLoader/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/CustomLoader/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/CustomLoader/index.tsx",
- "summary": "This code defines two React components, `CirclularLoader` and `CustomLoader`, which can be used to display a circular loading animation on a web page. \n\nThe `CirclularLoader` component returns a div containing an SVG element that draws a circle with two paths. The first path is filled with a light gray color and represents the outer circle, while the second path is filled with a dark gray color and represents the spinning animation. The `animate-spin` class applied to the SVG element causes the second path to rotate around the center of the circle, creating the loading animation. \n\nThe `CustomLoader` component returns a div that centers the `CirclularLoader` component using the `flex` and `justify-center` classes from Tailwind CSS. This component can be used as a wrapper around other content that needs to be loaded asynchronously, providing a visual cue to the user that the content is being loaded. \n\nTo use these components in a React project, they can be imported from the `zoo` module and rendered in the desired location within the component tree. For example, to display the `CustomLoader` component while fetching data from an API, the following code could be used:\n\n```\nimport React, { useState, useEffect } from \"react\";\nimport CustomLoader from \"zoo\";\n\nconst MyComponent = () => {\n const [data, setData] = useState(null);\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n fetch(\"https://api.example.com/data\")\n .then((response) => response.json())\n .then((data) => {\n setData(data);\n setIsLoading(false);\n });\n }, []);\n\n return (\n Trading Page
\n{isZooSelected ? 'ZOO' : 'BNB'} selected
\n\n {isLoading ? (\n
\n );\n};\n```\n\nIn this example, the `useState` hook is used to manage the state of the `data` and `isLoading` variables. The `useEffect` hook is used to fetch data from an API when the component mounts, and sets the `data` and `isLoading` states accordingly. The `CustomLoader` component is rendered while the data is being fetched, and the fetched data is rendered when it becomes available.",
- "questions": "1. What is the purpose of this code?\n- This code exports a custom loader component that displays a circular spinner animation.\n\n2. What is the significance of the two paths in the SVG element?\n- The first path is filled with gray color and represents the outer circle of the spinner, while the second path is filled with a darker gray color and represents the rotating part of the spinner.\n\n3. Why is the viewBox attribute set to \"3 3 18 18\" in the SVG element?\n- The viewBox attribute defines the position and dimensions of the SVG viewport. In this case, it is set to \"3 3 18 18\" to center the spinner within the viewport and to ensure that it is visible.",
- "checksum": "df89c65ea6adb0162ad63bbe98d271e1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/CustomTooltip/index.json b/.autodoc/docs/json/core/src/components/CustomTooltip/index.json
deleted file mode 100644
index ea7b845bb..000000000
--- a/.autodoc/docs/json/core/src/components/CustomTooltip/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/CustomTooltip/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/CustomTooltip/index.tsx",
- "summary": "This code defines a React component called `CustomTooltip` that wraps the `Tooltip` component from the Material-UI library. The purpose of this component is to provide a customizable tooltip that can be used throughout the larger project. \n\nThe `CustomTooltip` component takes in three props: `title`, `children`, and `center`. The `title` prop is a string that represents the text that will be displayed in the tooltip. The `children` prop is any valid React component that will be wrapped by the tooltip. The `center` prop is an optional boolean that determines whether the tooltip should be centered above the wrapped component or aligned to the left of it.\n\nThe `CustomTooltip` component returns a `Tooltip` component with customized styles and placement based on the props passed in. The `PopperProps` prop is used to customize the styles of the tooltip. In this case, the tooltip has a black background, white text, and a box shadow. The `title` prop is set to the `title` prop passed in to the `CustomTooltip` component. The `placement` prop is set to either \"top\" or \"top-start\" based on the `center` prop passed in.\n\nAn example of how this component could be used in the larger project is to provide additional information or context when hovering over certain elements. For example, if there is a button that performs a specific action, a tooltip could be added to explain what that action does. The `CustomTooltip` component allows for customization of the tooltip's appearance and placement, making it a versatile tool for providing additional information throughout the project. \n\nExample usage:\n\n```\n{/* Render data here */}
\n )}\n \n
\n );\n}\n```\n\nIn the example above, the `LoadingIndicator` component renders a div element with the `Dots` component and a span element with the text \"Loading...\". The `Dots` component adds an animated ellipsis to the end of the text content, indicating that content is being loaded.",
- "questions": "1. What is the purpose of the `classNames` function being imported from \"../../functions\"?\n- The `classNames` function is likely used to concatenate and conditionally apply CSS classes to the `span` element in the `Dots` component.\n\n2. What is the purpose of the `style jsx` block?\n- The `style jsx` block is used to define a CSS style that will be scoped to the `Dots` component.\n\n3. What is the purpose of the `after` pseudo-element being used in the `className` prop?\n- The `after` pseudo-element is being used to add a period after the `span` element, which is styled to look like animated ellipsis.",
- "checksum": "de671ca1b317d093d40fbc263a3d0814"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/DoubleGlowShadow/index.json b/.autodoc/docs/json/core/src/components/DoubleGlowShadow/index.json
deleted file mode 100644
index e258824a8..000000000
--- a/.autodoc/docs/json/core/src/components/DoubleGlowShadow/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/DoubleGlowShadow/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/DoubleGlowShadow/index.tsx",
- "summary": "The `DoubleGlowShadow` component is a React functional component that conditionally renders a double glow shadow effect around its children. The component imports the `isMobile` function from the `react-device-detect` library and the `FC` type from the `react` library. It also imports the `classNames` function from a `functions` module located in a parent directory.\n\nThe `DoubleGlowShadow` component takes in two props: `className` and `children`. The `className` prop is optional and is used to add additional CSS classes to the component. The `children` prop is also optional and represents the children components that will be wrapped by the `DoubleGlowShadow` component.\n\nThe component first checks if the `isMobile` function returns `true`. If it does, the component returns a div with a class of `shadow-swap` that wraps the `children` prop. This div does not have any shadow effects.\n\nIf the `isMobile` function returns `false`, the component returns a div that has three child divs. The first and second child divs are positioned absolutely and have a background color of blue and pink respectively. They are positioned on opposite sides of the parent div and have a width of 3/5 of the parent div's width. They also have a rounded border and a z-index of 0. These two divs create the double glow effect.\n\nThe third child div is positioned relatively and has a CSS filter of `drop-shadow`. This creates a shadow effect around the `children` prop. The `children` prop is wrapped by this div.\n\nThe `DoubleGlowShadow` component can be used in a larger project to add a double glow shadow effect around components. It can be used to highlight important components or to add a visual effect to a page. Here is an example of how the component can be used:\n\n```\nimport DoubleGlowShadow from \"./components/DoubleGlowShadow\";\n\nfunction App() {\n return (\n \n \n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `react-device-detect` library being imported?\n- The `react-device-detect` library is being used to check if the user is on a mobile device or not.\n\n2. What is the purpose of the `DoubleGlowShadow` component?\n- The `DoubleGlowShadow` component is used to add a double glow shadow effect to its child components. If the user is on a mobile device, it will display a different shadow effect.\n\n3. What is the purpose of the `classNames` function being imported from \"../../functions\"?\n- The `classNames` function is being used to concatenate multiple class names together for the `className` prop of the `div` element being returned by the `DoubleGlowShadow` component.",
- "checksum": "36c0fd23e9a0db19a4d792924c044ccf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/DoubleLogo/index.json b/.autodoc/docs/json/core/src/components/DoubleLogo/index.json
deleted file mode 100644
index f352deede..000000000
--- a/.autodoc/docs/json/core/src/components/DoubleLogo/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/DoubleLogo/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/DoubleLogo/index.tsx",
- "summary": "The code above defines a React component called `DoubleCurrencyLogo`. This component is responsible for rendering two currency logos side by side. It takes in several props, including `currency0` and `currency1`, which are both of type `Currency`. These props represent the two currencies that the component will display logos for. The `size` prop determines the size of the logos, and the `className` and `logoClassName` props are used to apply custom CSS classes to the component and the logos themselves, respectively.\n\nThe component returns a `div` element that contains two `CurrencyLogo` components. These components are imported from the `CurrencyLogo` file located in the `../CurrencyLogo` directory. The `CurrencyLogo` component takes in several props, including `className`, `currency`, and `size`. The `className` prop is used to apply custom CSS classes to the logo, while the `currency` prop is used to determine which currency the logo should represent. The `size` prop determines the size of the logo.\n\nThe `DoubleCurrencyLogo` component uses the `classNames` function from the `functions` file located in the `../../functions` directory to apply custom CSS classes to the `div` element that contains the logos. This function takes in any number of arguments, which can be either strings or objects. If an argument is a string, it will be added to the class list as-is. If an argument is an object, its keys will be used as class names if their corresponding values are truthy.\n\nThis component can be used in the larger project to display two currency logos side by side, which may be useful in various contexts such as a trading platform or a wallet application. Here is an example of how this component might be used:\n\n```\nHello World
\n\n {data.length === 0 ? (\n No data available \n ) : (\n // Render data\n )}\n
\n );\n};\n```",
- "questions": "1. What is the purpose of this component?\n This component is called \"Empty\" and it renders a div with some default styling and any children passed to it. It is likely used to display an empty state for a component or page.\n\n2. What is the significance of the \"FC\" and \"React.HTMLAttributes\n
\n );\n};\n\nexport default HomePage;\n```",
- "questions": "1. What is the purpose of this component and what does it render?\n- This component is called `EndangeredSpecies` and it renders a section of a web page that displays information about a game involving NFT animals. It also includes a button to buy $ZOO currency.\n\n2. What libraries and hooks are being imported and used in this code?\n- This code imports and uses React, useState, Image, useDispatch, useSelector, useBuyZoo, useActiveWeb3React, useFaucet, getZooBalance, and handleFunds.\n\n3. What is the purpose of the `handleFunds` function and how is it used in this code?\n- The `handleFunds` function is imported from a utility file called `handleFunds` and it is used as a callback function for the `onClick` event of the \"Buy $ZOO\" button. It takes in the `chainId` and `buyZoo` variables as arguments and executes a transaction to buy $ZOO currency.",
- "checksum": "004489fedd5c65962bde3e45b379d969"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/ExpertModePanel/index.json b/.autodoc/docs/json/core/src/components/ExpertModePanel/index.json
deleted file mode 100644
index 84afda6de..000000000
--- a/.autodoc/docs/json/core/src/components/ExpertModePanel/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/ExpertModePanel/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/ExpertModePanel/index.tsx",
- "summary": "The code defines a React component called `ExpertModePanel` that renders a panel with a title and a close button. The component takes three props: `active`, a boolean that determines whether the panel is visible or not; `onClose`, a function that is called when the close button is clicked; and `children`, which is used to render the content of the panel.\n\nThe component uses the `useLingui` hook from the `@lingui/react` library to provide internationalization support. The `i18n` object returned by the hook is used to translate the text \"Expert Mode\" using the `t` macro from the `@lingui/macro` library.\n\nIf the `active` prop is `false`, the component simply renders its children. Otherwise, it renders a div with two nested divs: one for the title and close button, and one for the content. The title div has a fixed height and a dark background color, and contains the translated text and a close button that calls the `onClose` function when clicked. The content div has a border and a darker background color, and contains the `children` passed to the component.\n\nThis component can be used in a larger project to provide a customizable panel that can be shown or hidden based on a boolean value. The `ExpertModePanel` component can be imported and used in other React components like this:\n\n```jsx\nimport ExpertModePanel from './ExpertModePanel';\n\nfunction MyComponent() {\n const [expertMode, setExpertMode] = useState(false);\n\n return (\n Welcome to the Zoo!
\n\n \n setExpertMode(false)}>\n \n
\n );\n}\n```\n\nIn this example, the `MyComponent` function defines a state variable `expertMode` that determines whether the `ExpertModePanel` is visible or not. When the \"Show expert mode\" button is clicked, the `expertMode` state is set to `true`, which causes the `ExpertModePanel` to be rendered with its content. When the close button is clicked, the `expertMode` state is set to `false`, which hides the panel.",
- "questions": "1. What is the purpose of the `ExpertModePanel` component?\n \n The `ExpertModePanel` component is a React component that renders a panel for expert mode with a title, close button, and content.\n\n2. What is the role of the `useLingui` hook in this code?\n \n The `useLingui` hook is used to access the i18n object, which provides internationalization support for the component. It is used to translate the text content of the component.\n\n3. What is the significance of the `FC` type in the component definition?\n \n The `FC` type is a shorthand for the `FunctionComponent` type, which is a type of React component that takes props as input and returns JSX as output. It is used to define the type of the `ExpertModePanel` component.",
- "checksum": "b96d93710e17fdc1b2b22fd408467f26"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/ExternalLink/index.json b/.autodoc/docs/json/core/src/components/ExternalLink/index.json
deleted file mode 100644
index 6c099a32f..000000000
--- a/.autodoc/docs/json/core/src/components/ExternalLink/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/ExternalLink/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/ExternalLink/index.tsx",
- "summary": "The `ExternalLink` component in this file is a reusable React component that renders an anchor tag (``) with some additional functionality. It takes in several props, including `href` (the URL to link to), `target` (the target window or frame to open the link in), `rel` (the relationship between the current document and the linked document), `color` (the color scheme to use for the link), `startIcon` and `endIcon` (optional icons to display before or after the link text), and any other props that can be passed to an anchor tag.\n\nWhen the link is clicked, the `handleClick` function is called. If the link is set to open in a new tab (`target=\"_blank\"`) or if the user is holding down the Ctrl or Command key, the link is opened normally and an outbound link event is tracked using the `ReactGA` library. If the link is set to open in the same tab (`target=\"_self\"`) and the user is not holding down any modifier keys, the default behavior of the anchor tag is prevented, an outbound link event is tracked using `ReactGA`, and the page is redirected to the linked URL.\n\nThe `COLOR` object defines two color schemes for the link: `default` and `blue`. These color schemes are used to set the text color and opacity of the link based on whether it is being hovered over or focused on.\n\nThis component can be used throughout the larger project to create links that track outbound link events using `ReactGA`. It provides a consistent and customizable way to render external links with additional functionality. Here's an example of how it could be used:\n\n```jsx\nimport ExternalLink from \"./path/to/ExternalLink\";\n\nfunction MyComponent() {\n return (\n This is the content of the expert mode panel.
\n\n \n Click me!\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports a React component called `ExternalLink` that renders an anchor element with some additional functionality for tracking outbound link clicks using ReactGA.\n\n2. What dependencies does this code have?\n- This code imports `React`, `ReactGA`, and `classNames` from external packages.\n\n3. What props can be passed to the `ExternalLink` component?\n- The `ExternalLink` component accepts several props, including `target`, `href`, `children`, `rel`, `className`, `color`, `startIcon`, and `endIcon`.",
- "checksum": "c1951e63c91f4bdad1eadbce93252efe"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/ExternalLinkIcon/index.json b/.autodoc/docs/json/core/src/components/ExternalLinkIcon/index.json
deleted file mode 100644
index 118f52bad..000000000
--- a/.autodoc/docs/json/core/src/components/ExternalLinkIcon/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/ExternalLinkIcon/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/ExternalLinkIcon/index.tsx",
- "summary": "The code above is a React component that renders an external link icon with some additional functionality. The component takes in several props, including the `target` attribute, `href` attribute, and `rel` attribute. The `target` attribute specifies where to open the linked document, while the `href` attribute specifies the URL of the linked document. The `rel` attribute specifies the relationship between the current document and the linked document.\n\nThe component also uses the `ReactGA` library to track outbound link clicks. When the link is clicked, the `handleClick` function is called. If the link is set to open in a new tab (`target=\"_blank\"`) or if the user is holding down the `ctrl` or `meta` key, the link is opened in a new tab and a GA event is tracked. If the link is not set to open in a new tab, the default behavior is prevented, a GA event is tracked, and the user is redirected to the linked document.\n\nThe component returns an anchor tag with the appropriate attributes and event handlers. The `ExternalLink` component from the `react-feather` library is also rendered within the anchor tag to display the external link icon.\n\nThis component can be used throughout the larger project to render external links with consistent styling and tracking functionality. For example, it could be used in a navigation menu to link to external resources or in a list of related links at the bottom of a page. Here is an example usage of the component:\n\n```\n\n Total:
\n );\n}\n```\n\nIn this example, the `FormattedCurrencyAmount` component is used to format the `currencyAmount` object with 2 significant digits for display in a shopping cart total.",
- "questions": "1. What is the purpose of the `@zoolabs/zdk` import?\n- The `@zoolabs/zdk` import is used to import the `Currency`, `CurrencyAmount`, `Fraction`, and `JSBI` modules from the `zdk` library.\n\n2. What is the significance of the `CURRENCY_AMOUNT_MIN` constant?\n- The `CURRENCY_AMOUNT_MIN` constant represents the minimum amount of currency that can be displayed and is set to 1/1000000th of the currency unit.\n\n3. What does the `FormattedCurrencyAmount` function do?\n- The `FormattedCurrencyAmount` function takes in a `currencyAmount` object and an optional `significantDigits` parameter and returns a formatted string representation of the currency amount. If the amount is equal to 0, it returns \"0\". If the amount is greater than the `CURRENCY_AMOUNT_MIN`, it returns the amount formatted to the specified number of significant digits. Otherwise, it returns a string indicating that the amount is less than the minimum displayable amount.",
- "checksum": "a2b408d19a849cfc44fcd65a583f1301"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Gas/index.json b/.autodoc/docs/json/core/src/components/Gas/index.json
deleted file mode 100644
index 43239b702..000000000
--- a/.autodoc/docs/json/core/src/components/Gas/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Gas/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Gas/index.tsx",
- "summary": "This code is a React component that fetches gas price data from the Ethereum Gas Station API using the useSWR library. The component is named Gas and it is exported as the default export of the module. \n\nThe component uses the useLingui hook from the @lingui/react library to enable internationalization of the text displayed in the component. The i18n object returned by useLingui is destructured from the hook's return value.\n\nThe useSWR hook is used to fetch data from the Ethereum Gas Station API. The first argument to useSWR is the URL to fetch data from. The second argument is a function that fetches the data and returns it as a JSON object. The SWRResponse type is used to define the shape of the data returned by the API and the error object returned in case of an error.\n\nIf there is an error while fetching the data, the component returns a div element with the text \"failed to load\" translated to the current language using the i18n object. If the data is still being fetched, the component returns a div element with the text \"loading...\" translated to the current language using the i18n object. If the data has been fetched successfully, the component returns a div element with the average gas price divided by 10.\n\nThis component can be used in a larger project to display the current average gas price on the Ethereum network. The component can be imported and rendered in any React component that needs to display the gas price. For example, the component can be used in a dashboard that displays various metrics related to the Ethereum network. \n\nExample usage:\n\n```\nimport React from 'react';\nimport Gas from './Gas';\n\nfunction Dashboard() {\n return (\n \n
\n );\n}\n\nexport default Dashboard;\n```",
- "questions": "1. What is the purpose of the `useSWR` hook and how is it used in this code?\n - The `useSWR` hook is used to fetch data from an external API and cache the response. In this code, it is used to fetch gas price data from the `ethgasstation.info` API and return the average gas price divided by 10.\n \n2. What is the `useLingui` hook and how is it used in this code?\n - The `useLingui` hook is used for internationalization (i18n) and localization of text in the application. In this code, it is used to translate the text displayed in the `div` elements when the data is loading or fails to load.\n \n3. What is the purpose of the `Gas` component and how is it used in the `zoo` project?\n - The `Gas` component is responsible for fetching and displaying gas price data from an external API. It can be used in the `zoo` project to display gas prices for transactions or other relevant information.",
- "checksum": "0464863128b259095adddd8ad6ac52c6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/GradientDot/index.json b/.autodoc/docs/json/core/src/components/GradientDot/index.json
deleted file mode 100644
index d3e970df5..000000000
--- a/.autodoc/docs/json/core/src/components/GradientDot/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/GradientDot/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/GradientDot/index.tsx",
- "summary": "This code defines a set of functions and a React component that are used to generate color gradients based on a percentage value. The `gradientColor` function takes a percentage value as input and returns a color code that corresponds to a specific color gradient. The color gradients are defined using a set of if statements that check the percentage value against a range of values. If the percentage value falls within a specific range, the function returns a corresponding color code. If the percentage value is outside of the defined ranges, the function returns a default color code.\n\nThe `gradientColorAsc` function is similar to `gradientColor`, but it returns a color gradient that is reversed. The `GradientDot` component is a React component that takes a percentage value as input and renders a small dot with a background color that corresponds to the percentage value. The `desc` prop is used to determine whether the color gradient should be descending or ascending. If `desc` is true, the `gradientColor` function is used to generate the color gradient. If `desc` is false, the `gradientColorAsc` function is used instead.\n\nThis code can be used in a larger project to generate color gradients for various UI elements based on a percentage value. For example, it could be used to generate a color gradient for a progress bar or a chart that displays data as a percentage. The `GradientDot` component could be used to display a small dot next to a percentage value to indicate the progress of a task or process. Overall, this code provides a simple and flexible way to generate color gradients based on a percentage value.",
- "questions": "1. What is the purpose of the `gradientColor` and `gradientColorAsc` functions?\n - The `gradientColor` and `gradientColorAsc` functions return a color code based on the input percentage value. The color codes returned are used to create a gradient dot in the `GradientDot` component.\n\n2. What is the `GradientDot` component used for?\n - The `GradientDot` component is used to display a small dot with a color gradient based on the input percentage value. It takes in a `percent` prop and an optional `desc` prop to determine the color gradient direction.\n\n3. What is the expected input type for the `percent` prop in the `GradientDot` component?\n - The expected input type for the `percent` prop in the `GradientDot` component is `any`, but it is immediately converted to a float using `parseFloat` in the `gradientColor` and `gradientColorAsc` functions.",
- "checksum": "ed9692bdea77c490b2ded21d4c3df9fa"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Header/Community.json b/.autodoc/docs/json/core/src/components/Header/Community.json
deleted file mode 100644
index 0c28a37d5..000000000
--- a/.autodoc/docs/json/core/src/components/Header/Community.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Community.tsx",
- "filePath": "core/src/components/Header/Community.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Header/Community.tsx",
- "summary": "The code is a React component that renders a dropdown menu for the \"Learn\" section of a website called \"Zoo\". The dropdown menu is implemented using the `Menu` and `Transition` components from the `@headlessui/react` library. The menu is triggered by a button labeled \"Learn\" with a chevron icon next to it. When the button is clicked, the menu items are displayed in a dropdown list.\n\nThe menu items are implemented as links to different pages on the Zoo website or external resources. The links are implemented using the `Link` component from the `next/link` library or the `a` tag with a `href` attribute. The menu items include links to pages such as \"Our Animals\", \"Whitepaper\", \"About\", \"Reward Calculator\", \"FAQs\", and \"Zoo Foundation\". There is also a link to an external resource called \"Buy Guide\" and a link to an internal page called \"DAO\".\n\nThe menu items are styled using CSS classes from the Tailwind CSS library. The menu items have a black background with white text, and the active menu item has a darker background color. The menu items are also rounded and have a shadow effect.\n\nThis component can be used in the larger Zoo project to provide a consistent and easy-to-use navigation menu for the \"Learn\" section of the website. The component can be easily customized by adding or removing menu items or changing the styling. For example, if the Zoo website adds a new page to the \"Learn\" section, a new menu item can be added to the component by adding a new `Menu.Item` element with a `Link` or `a` tag. Similarly, if the Zoo website changes its color scheme, the CSS classes can be updated to reflect the new design. \n\nExample usage:\n\n```jsx\nimport Learn from \"./Learn\";\n\nfunction App() {\n return (\n Dashboard
\nCurrent gas price:
\n \n \n \n \n {/* rest of the page */}\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `Learn` component?\n- The `Learn` component is responsible for rendering a dropdown menu with links to various pages on the website.\n\n2. What is the purpose of the `Menu` and `Transition` components?\n- The `Menu` component is used to create a dropdown menu, while the `Transition` component is used to animate the opening and closing of the menu.\n\n3. What is the significance of the `z-999` class in the `Menu.Items` component?\n- The `z-999` class sets the z-index of the dropdown menu to 999, ensuring that it appears on top of other elements on the page.",
- "checksum": "2538277002202a94f09a4c1a85b15795"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Header/Learn.json b/.autodoc/docs/json/core/src/components/Header/Learn.json
deleted file mode 100644
index 616e867bd..000000000
--- a/.autodoc/docs/json/core/src/components/Header/Learn.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Learn.tsx",
- "filePath": "core/src/components/Header/Learn.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Header/Learn.tsx",
- "summary": "This code defines a React component called `Community` that renders a dropdown menu with links to various social media platforms. The menu is implemented using the `Menu` and `Transition` components from the `@headlessui/react` library. The dropdown menu is triggered by a button labeled \"Community\" with a chevron icon to indicate that it can be expanded. When the button is clicked, the menu expands to show a list of links to social media platforms such as Discord, Telegram, Instagram, Twitter, and Medium. The links are implemented using the `Menu.Item` component and are styled to change color when hovered over or clicked. \n\nThis component can be used in a larger project to provide users with easy access to the project's social media pages. It can be easily customized by adding or removing links to social media platforms as needed. For example, if the project has a Reddit page, a link to that page can be added to the menu by creating a new `Menu.Item` component and setting the `href` attribute to the URL of the Reddit page. \n\nHere is an example of how the `Community` component can be used in a larger project:\n\n```jsx\nimport Community from \"./Community\";\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `Menu` and `Transition` components from the \"@headlessui/react\" library?\n- The `Menu` component creates a dropdown menu, while the `Transition` component provides animation effects when the menu is opened or closed.\n\n2. What is the purpose of the `Link` component from the \"next/link\" library?\n- The `Link` component is used to create a hyperlink to another page within the Next.js application.\n\n3. What is the purpose of the `Community` function?\n- The `Community` function returns a dropdown menu with links to various social media platforms and communication channels related to the \"zoo\" project.",
- "checksum": "b5abc4f6a6ba1980e9829c5d88a03d78"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Header/MarketPlace.json b/.autodoc/docs/json/core/src/components/Header/MarketPlace.json
deleted file mode 100644
index effea36ac..000000000
--- a/.autodoc/docs/json/core/src/components/Header/MarketPlace.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "MarketPlace.tsx",
- "filePath": "core/src/components/Header/MarketPlace.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Header/MarketPlace.tsx",
- "summary": "This code defines a React component called `Marketplace` that renders a dropdown menu with links to different pages within the larger project. The dropdown menu is implemented using the `Menu` and `Transition` components from the `@headlessui/react` library. The `ChevronDownIcon` component from the `@heroicons/react` library is also used to display a downward-pointing arrow next to the menu label.\n\nWhen the user clicks on the menu label (\"Marketplace\"), the dropdown menu is displayed with three links: \"All NFTs\", \"Pools\", and \"Egg Drop\" (which is currently commented out). Each link is implemented as a `Menu.Item` component that wraps a `Link` component from the `next/link` library. The `active` prop passed to each `Menu.Item` component is used to determine whether the link is currently selected, and the corresponding CSS classes are applied to style the link accordingly.\n\nThe `Marketplace` component is designed to be used as a reusable UI element within the larger project, wherever a dropdown menu with links to different pages is needed. For example, it could be used in a navigation bar or sidebar component to allow users to quickly navigate to different sections of the project. Here is an example of how the `Marketplace` component could be used in a navigation bar:\n\n```jsx\nimport Marketplace from \"./Marketplace\";\n\nexport default function NavigationBar() {\n return (\n \n );\n}\n```\n\nIn this example, the `Marketplace` component is used to render a \"Marketplace\" dropdown menu in the navigation bar, along with a \"Sign In\" button. The `flex` and `items-center` classes are used to horizontally align the two elements. The `py-4` and `px-8` classes are used to add padding to the navigation bar. The `bg-black` and `text-white` classes are used to set the background and text colors, respectively.",
- "questions": "1. What is the purpose of the `Menu` and `Transition` components from the \"@headlessui/react\" library?\n- The `Menu` component creates a dropdown menu, while the `Transition` component provides animation effects when the menu is opened or closed.\n\n2. What is the significance of the `Fragment` component being used in the `Transition` component?\n- The `Fragment` component is used to group multiple child components without adding extra nodes to the DOM, which can improve performance.\n\n3. Why are there commented out lines of code for a \"Egg Drop\" menu item?\n- It is unclear why the \"Egg Drop\" menu item is commented out, but it may have been temporarily removed or is not yet implemented.",
- "checksum": "f40df96c0297b53d7cfcf626d43a3e8a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Header/ThemeSwitcher.json b/.autodoc/docs/json/core/src/components/Header/ThemeSwitcher.json
deleted file mode 100644
index deb95133c..000000000
--- a/.autodoc/docs/json/core/src/components/Header/ThemeSwitcher.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ThemeSwitcher.tsx",
- "filePath": "core/src/components/Header/ThemeSwitcher.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Header/ThemeSwitcher.tsx",
- "summary": "The `ThemeSwitcher` component is responsible for toggling between light and dark themes in the `zoo` project. It imports the `useTheme` hook from the `next-themes` library, which provides the current theme and a function to set the theme. It also imports two icons from the `@fortawesome/free-solid-svg-icons` library, which are used to represent the moon and sun for the dark and light themes respectively. \n\nThe component renders a `Button` component with a conditional class name and style based on the current theme. The class name is set to `text-white` if the theme is dark and `text-black` if the theme is light. The style sets the width and height of the button to 44 pixels and centers its content. \n\nWhen the button is clicked, the `onClick` function is called, which toggles the theme by calling the `setTheme` function with either `'light'` or `'dark'` as an argument. The icon displayed on the button also changes based on the current theme. If the theme is dark, the moon icon is displayed, and if the theme is light, the sun icon is displayed. \n\nThis component can be used in any part of the `zoo` project where a theme switcher is needed. For example, it could be included in a navigation bar or a settings page. Here is an example of how the `ThemeSwitcher` component could be used in a `Header` component:\n\n```\nimport ThemeSwitcher from './ThemeSwitcher'\n\nconst Header = () => {\n return (\n Welcome to the Zoo Project!
\nCheck out our social media pages for the latest updates.
\n\n
\n );\n};\n\nexport default Modal;\n```\n\nIn this example, the `CloseIcon` component is used inside a `button` element to create a close button for the modal. When the button is clicked, the modal can be closed. The `CloseIcon` component can be customized by passing props to it, such as `width` and `height`, to adjust its size. Overall, this code provides a simple and reusable component for displaying a close icon in a React project.",
- "questions": "1. What is the purpose of this code?\n- This code exports a React component called `CloseIcon` which renders an SVG icon of a close button.\n\n2. What props can be passed to the `CloseIcon` component?\n- The `CloseIcon` component accepts any props that can be passed to an SVG element, as indicated by the spread operator `{...props}`. However, the code does not specify any required or default props.\n\n3. What is the significance of the `fill` attribute in the `path` element?\n- The `fill` attribute sets the color to fill the interior of the SVG path. In this case, it is set to white (`#fff`).",
- "checksum": "e7f0b8655b6586aef83dd8ff230c623b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Icons/facebook-icon.json b/.autodoc/docs/json/core/src/components/Icons/facebook-icon.json
deleted file mode 100644
index 93d63ddcd..000000000
--- a/.autodoc/docs/json/core/src/components/Icons/facebook-icon.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "facebook-icon.tsx",
- "filePath": "core/src/components/Icons/facebook-icon.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Icons/facebook-icon.tsx",
- "summary": "This code defines a React component called `FacebookIcon` that renders an SVG icon of the Facebook logo. The component takes in several props, including `width`, `height`, `color`, and `className`, which can be used to customize the appearance of the icon. The `IconProps` type is imported from the `react-feather` library, which suggests that this component may be used in conjunction with other icons from that library.\n\nThe SVG icon itself consists of two `path` elements that define the shape of the logo. The first `path` element creates a circle with a radius of 6.667 units, which serves as the background of the logo. The second `path` element creates the actual \"f\" shape of the logo, which is centered within the circle.\n\nThis component can be used in a larger project to display the Facebook logo in various contexts, such as in a social media sharing widget or as part of a user's profile information. Here is an example of how the `FacebookIcon` component could be used in a React component:\n\n```\nimport React from \"react\";\nimport FacebookIcon from \"./FacebookIcon\";\n\nconst SocialMediaButton = ({ platform, url }) => {\n let icon;\n if (platform === \"facebook\") {\n icon = Modal Title
\nModal content goes here
\n \n\n
\n);\n\nexport default BuildingListItem;\n```\n\nIn this example, the `BuildingListItem` component displays information about a building, including its name and address. The `BuildingIcon` component is used to display an icon representing the building. The `color` prop is set to `#f00`, which will make the icon red. The `BuildingIcon` component is imported from the module that defines the icon.",
- "questions": "1. What is the purpose of this code?\n- This code exports a React component that renders an SVG icon.\n\n2. What library or package is being used in this code?\n- This code imports the `React` and `IconProps` modules from the `react` and `react-feather` packages, respectively.\n\n3. What does the SVG icon look like?\n- The SVG icon consists of two paths that form a shape resembling a zoo entrance gate. The first path creates the outline of the gate, while the second path creates the shape of an animal inside the gate.",
- "checksum": "5a193a756978709e88c4b6c5f024882c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Icons/menu-icon.json b/.autodoc/docs/json/core/src/components/Icons/menu-icon.json
deleted file mode 100644
index 65d8e1cce..000000000
--- a/.autodoc/docs/json/core/src/components/Icons/menu-icon.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "menu-icon.tsx",
- "filePath": "core/src/components/Icons/menu-icon.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Icons/menu-icon.tsx",
- "summary": "This code defines a React component called `MenuIcon`. The component returns an SVG element that displays three horizontal lines, which are commonly used to represent a menu icon. The SVG element has a width and height of 24 pixels and is filled with no color. The `path` element within the SVG element defines the shape of the icon using three horizontal lines, each starting at the left edge of the SVG and spanning its width. The `stroke` attribute sets the color of the lines to white, and the `strokeWidth` attribute sets their thickness to 2 pixels. The `strokeLinecap` and `strokeLinejoin` attributes set the style of the line endings and corners to be rounded.\n\nThis component can be used in a larger project as a reusable menu icon that can be easily added to any part of the UI. For example, it can be used as a button to toggle a navigation menu on and off. Here is an example of how the `MenuIcon` component can be used in a React component:\n\n```\nimport React from \"react\";\nimport MenuIcon from \"./MenuIcon\";\n\nconst Navigation = () => {\n const [isOpen, setIsOpen] = React.useState(false);\n\n const toggleMenu = () => {\n setIsOpen(!isOpen);\n };\n\n return (\n \n );\n};\n\nexport default Navigation;\n```\n\nIn this example, the `MenuIcon` component is used as the icon for a button that toggles a navigation menu on and off. The `isOpen` state variable is used to determine whether the menu is currently open or closed. When the button is clicked, the `toggleMenu` function is called, which toggles the value of `isOpen`. If `isOpen` is true, the menu is displayed as an unordered list of links. If `isOpen` is false, the menu is hidden.",
- "questions": "1. What does this code do?\n This code exports a React component called MenuIcon that renders an SVG icon with three horizontal lines.\n\n2. What is the purpose of the \"props\" parameter in the MenuIcon function?\n The \"props\" parameter is used to pass any additional props to the SVG element, such as className or onClick.\n\n3. Why is the stroke color set to \"#fff\" and the strokeWidth set to 2?\n The stroke color is set to white (#fff) and the strokeWidth is set to 2 to create a visible contrast against the background and make the icon more prominent.",
- "checksum": "a50cba9ef53026fb2fa28f85e503bc6e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Icons/twitter-icon.json b/.autodoc/docs/json/core/src/components/Icons/twitter-icon.json
deleted file mode 100644
index 7ea8f4da5..000000000
--- a/.autodoc/docs/json/core/src/components/Icons/twitter-icon.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "twitter-icon.tsx",
- "filePath": "core/src/components/Icons/twitter-icon.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Icons/twitter-icon.tsx",
- "summary": "The code defines a React component called `TwitterIcon` that renders an SVG icon of the Twitter logo. The component takes in several props, including `width`, `height`, `color`, and `className`, which are used to customize the appearance of the icon. The `IconProps` type is imported from the `react-feather` library, which suggests that this component may be used in conjunction with other icons from that library.\n\nThe SVG path data for the Twitter logo is defined within the `path` element of the SVG. The `fill` attribute of the `path` element is set to the `color` prop passed into the component, which allows the icon to be rendered in different colors.\n\nThis component can be used in a larger project to display a Twitter icon wherever it is needed. For example, it could be used in a social media sharing component to allow users to share content on Twitter. Here is an example of how the `TwitterIcon` component could be used in a React component:\n\n```\nimport React from \"react\";\nimport TwitterIcon from \"./TwitterIcon\";\n\nconst ShareOnTwitterButton = () => {\n return (\n \n );\n};\n```\n\nIn this example, the `TwitterIcon` component is used within a button element to create a \"Share on Twitter\" button. The `color` prop is set to the Twitter brand color (#1DA1F2) to match the Twitter logo.",
- "questions": "1. What library is being used to render the icon?\n- The `react-feather` library is being used to render the icon.\n\n2. What is the purpose of the `...rest` parameter in the `TwitterIcon` function?\n- The `...rest` parameter is used to capture any additional props that are passed to the component and pass them down to the underlying `svg` element.\n\n3. What is the significance of the values assigned to the `width`, `height`, and `color` props?\n- The `width` and `height` props determine the size of the icon, while the `color` prop determines the color of the icon. These values can be overridden when the component is used.",
- "checksum": "d115e551ebaa00041bbc24adefb386ed"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Image/index.json b/.autodoc/docs/json/core/src/components/Image/index.json
deleted file mode 100644
index 73d913f90..000000000
--- a/.autodoc/docs/json/core/src/components/Image/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Image/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Image/index.tsx",
- "summary": "This code exports a React component called `Image` that wraps the `NextImage` component from the `next/image` package. The `Image` component is used to display images in the application. It accepts several props, including `src`, `width`, `height`, `layout`, `loader`, and `style`. \n\nThe `Image` component uses a `useBlur` flag to determine whether to display a blurred placeholder image while the actual image is loading. If the `height` and `width` props are both greater than or equal to 40, the blurred placeholder image is displayed. Otherwise, an empty placeholder is used. \n\nThe `loader` prop is used to specify the image loader function. By default, the `cloudinaryLoader` function from the `cloudinary` module is used. However, the `loader` prop can be used to override this default and provide a custom image loader function. \n\nThe `cloudinaryLoader` function is not defined in this file, but it is imported from the `cloudinary` module. This function is used to generate a URL for the image using the Cloudinary image service. \n\nThe `normalize` function is used to remove the leading slash from the `src` prop, if it exists. This is necessary because the Cloudflare loader function expects the `src` prop to be a relative path without a leading slash. \n\nThe `cloudFlareLoader` function is used to generate a URL for the image using the Cloudflare image service. This function takes the `src`, `width`, and `quality` props as arguments and returns a URL that includes these parameters. \n\nThe `shimmer` function generates an SVG placeholder image with a shimmer effect. This function takes the `width` and `height` props as arguments and returns an SVG string. \n\nOverall, this code provides a flexible and customizable way to display images in the application. The `Image` component can be used with different image loaders and can display a blurred placeholder image while the actual image is loading.",
- "questions": "1. What is the purpose of the `cloudinaryLoader` function imported from `../../functions/cloudinary`?\n- This code does not provide information on the purpose of the `cloudinaryLoader` function. \n\n2. What is the purpose of the `normalize` function?\n- The `normalize` function is used to remove the leading slash from the `src` parameter if it exists.\n\n3. What is the purpose of the `shimmer` function?\n- The `shimmer` function returns an SVG string that is used as a placeholder image while the actual image is being loaded. The SVG string is animated to create a shimmer effect.",
- "checksum": "73022b531f69674214c7bd0a8a760c6e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Input/Address/index.json b/.autodoc/docs/json/core/src/components/Input/Address/index.json
deleted file mode 100644
index 9ed1682e6..000000000
--- a/.autodoc/docs/json/core/src/components/Input/Address/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Input/Address/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Input/Address/index.tsx",
- "summary": "The `AddressInput` component is a React functional component that renders an input field for a user to enter a wallet address or ENS name. It is part of a larger project called `zoo`. \n\nThe component takes in several props, including `value`, `onUserInput`, `placeholder`, `className`, `align`, and `fontSize`. The `value` prop is the current value of the input field, while `onUserInput` is a callback function that is called whenever the user types into the input field. The `placeholder` prop is the text that is displayed in the input field when it is empty. The `className` prop is a string of CSS classes that are applied to the input field. The `align` prop specifies whether the text in the input field should be aligned to the left or right. The `fontSize` prop specifies the font size of the text in the input field.\n\nThe component uses the `useENS` hook to resolve the ENS name entered by the user into an Ethereum address. The `enforcer` function is called whenever the user types into the input field. It checks that the input is a number between 0 and 100 and calls the `onUserInput` callback with the input if it passes the check.\n\nThe component renders an `input` element with various props and styles. The `value` prop is set to the `value` prop passed into the component. The `onChange` prop is set to the `enforcer` function. The `inputMode`, `title`, `autoComplete`, `autoCorrect`, `autoCapitalize`, and `spellCheck` props are set to various values to provide a good user experience. The `placeholder` prop is set to the `placeholder` prop passed into the component. The `pattern` prop is set to a regular expression that matches Ethereum addresses. The `className` prop is set to a combination of the `className` prop passed into the component and some additional classes based on the `align` prop. The `style` prop is set to an object with a `fontSize` property based on the `fontSize` prop.\n\nThe `AddressInput` component is exported as the default export of the module.",
- "questions": "1. What is the purpose of the `useENS` hook being imported from `../../../hooks/useENS`?\n- The `useENS` hook is used to retrieve the ENS name and address of the value passed to the `AddressInput` component.\n\n2. What is the purpose of the `enforcer` function?\n- The `enforcer` function is used to validate and enforce input restrictions on the `AddressInput` component. It checks if the input is a number less than or equal to 100 and passes it to the `onUserInput` function.\n\n3. What is the purpose of the `align` prop being passed to the `AddressInput` component?\n- The `align` prop is used to specify the alignment of the text in the input field, either \"right\" or \"left\".",
- "checksum": "7084ae2c43b5330297a89adb3c0a5017"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Input/Numeric/index.json b/.autodoc/docs/json/core/src/components/Input/Numeric/index.json
deleted file mode 100644
index 523d4c81b..000000000
--- a/.autodoc/docs/json/core/src/components/Input/Numeric/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Input/Numeric/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Input/Numeric/index.tsx",
- "summary": "This code exports a React component called `Input` that renders an HTML input element. The component is designed to be used for numerical input, and includes several options and restrictions to enforce this. \n\nThe `Input` component takes several props, including `value`, `onUserInput`, `placeholder`, and `className`. The `value` prop is the current value of the input, and `onUserInput` is a callback function that is called whenever the user types into the input. The `placeholder` prop is the text that is displayed in the input when it is empty, and `className` is a string of CSS classes that can be used to style the input.\n\nThe `Input` component enforces several restrictions on the input. It only allows numerical input, and replaces commas with periods to ensure that the input uses the correct decimal separator. It also sets several HTML attributes on the input, including `inputMode`, `title`, `autoComplete`, `autoCorrect`, `type`, `pattern`, `placeholder`, `min`, `minLength`, `maxLength`, and `spellCheck`. These attributes ensure that the input is properly formatted and validated.\n\nThe `Input` component also includes a regular expression called `inputRegex`, which is used to match escaped \".\" characters in the input. This regular expression is used to ensure that the input only contains valid numerical characters.\n\nOverall, the `Input` component is a useful tool for enforcing numerical input in a React application. It can be used in a variety of contexts, such as in a form for entering prices or quantities. Here is an example of how the `Input` component might be used in a larger React application:\n\n```\nimport React, { useState } from \"react\";\nimport Input from \"./Input\";\n\nfunction PriceForm() {\n const [price, setPrice] = useState(\"\");\n\n const handlePriceChange = (newPrice) => {\n setPrice(newPrice);\n };\n\n return (\n \n );\n}\n```",
- "questions": "1. What is the purpose of the `Input` component?\n \n The `Input` component is a memoized React component that renders an HTML input element with specific options and properties.\n\n2. What is the purpose of the `enforcer` function?\n \n The `enforcer` function checks if the user input is valid based on a regular expression and calls the `onUserInput` function if it is valid.\n\n3. What is the purpose of the `inputRegex` regular expression?\n \n The `inputRegex` regular expression matches a string that contains digits and escaped periods (i.e., \"\\\\.\") in a non-capturing group. It is used to validate user input in the `enforcer` function.",
- "checksum": "66225266e160d7f69e794f75d0b8e048"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Input/Percent/index.json b/.autodoc/docs/json/core/src/components/Input/Percent/index.json
deleted file mode 100644
index 4d7c31487..000000000
--- a/.autodoc/docs/json/core/src/components/Input/Percent/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Input/Percent/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Input/Percent/index.tsx",
- "summary": "The `Input` component in this file is a reusable React component that renders an HTML input element. It takes in several props, including `value`, `onUserInput`, `placeholder`, `className`, `align`, and `fontSize`. The `value` prop is the current value of the input, while `onUserInput` is a callback function that is called whenever the user types into the input. The `placeholder` prop is the text that is displayed in the input when it is empty, while `className` and `fontSize` are used to style the input.\n\nThe `Input` component enforces several constraints on the user's input. It only allows numeric input, and it limits the length of the input to 3 characters. Additionally, it replaces any commas in the input with periods, since the input is used in a financial context where periods are used as decimal separators. Finally, it only allows input values that are less than or equal to 100.\n\nThe `Input` component is memoized using React's `React.memo` function, which means that it will only re-render if its props have changed. This can help improve performance in cases where the component is used frequently and its props are not changing often.\n\nThe `Input` component is exported as both a named export (`Input`) and a default export. The named export is used to import the component into other files, while the default export is used to import the component into files that are not TypeScript-aware.\n\nHere is an example of how the `Input` component might be used in a larger project:\n\n```jsx\nimport React, { useState } from \"react\";\nimport Input from \"./path/to/Input\";\n\nfunction MyComponent() {\n const [value, setValue] = useState(\"\");\n\n const handleUserInput = (input) => {\n setValue(input);\n };\n\n return (\n {building.name}
\n{building.address}
\n\n
\n );\n}\n```\n\nIn this example, the `MyComponent` function renders an instance of the `Input` component. It passes in a `value` state variable and a `handleUserInput` callback function as props to the `Input` component. Whenever the user types into the input, the `handleUserInput` function is called with the new input value, and the `value` state variable is updated accordingly. The `placeholder`, `className`, `align`, and `fontSize` props are also passed in to customize the appearance of the input.",
- "questions": "1. What is the purpose of the `enforcer` function?\n- The `enforcer` function checks if the input value is valid and within a certain range, and if so, calls the `onUserInput` function with the input value.\n\n2. What is the significance of the `inputRegex` variable?\n- The `inputRegex` variable is a regular expression that matches any string that contains only digits (0-9) and escaped \".\" characters.\n\n3. What is the purpose of the `align` prop?\n- The `align` prop is used to specify the alignment of the text within the input field, and can be set to either \"right\" or \"left\".",
- "checksum": "52887b965e452295d46af841a449c743"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Input/index.json b/.autodoc/docs/json/core/src/components/Input/index.json
deleted file mode 100644
index ee00c3660..000000000
--- a/.autodoc/docs/json/core/src/components/Input/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Input/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Input/index.tsx",
- "summary": "The code above is a module that exports an object called `Input`. This object contains three properties: `Address`, `Numeric`, and `Percent`. Each of these properties is a reference to a module that is imported from a file located in the `zoo` project. \n\nThe `Address` module is likely used to represent a physical address, while the `Numeric` module is likely used to represent numerical values. The `Percent` module is likely used to represent percentages. \n\nBy exporting these modules as properties of the `Input` object, other modules within the `zoo` project can easily import and use them. For example, a module that needs to represent a physical address could import the `Address` module like this:\n\n```\nimport { Address } from 'zoo/Input'\n```\n\nThis code would import the `Address` module from the `Input` object exported by the `zoo` project. The module could then use the `Address` module to represent physical addresses.\n\nOverall, this code is a simple way to organize and export commonly used modules within the `zoo` project. By exporting them as properties of an object, other modules can easily import and use them without having to worry about the specific file paths or module names.",
- "questions": "1. What is the purpose of this code?\n This code exports an object called `Input` that contains three modules: `Address`, `Percent`, and `Numeric`.\n\n2. What are the dependencies of this code?\n This code depends on three other modules located in the same directory: `Address.js`, `Numeric.js`, and `Percent.js`.\n\n3. How can this code be used in other parts of the project?\n Other parts of the project can import the `Input` object from this module and use its properties (`Address`, `Percent`, and `Numeric`) as needed. For example: `import { Address } from './zoo/Input'`.",
- "checksum": "4adbc4f0f4f5474ac57b9602fedbddaf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/LanguageSwitch/index.json b/.autodoc/docs/json/core/src/components/LanguageSwitch/index.json
deleted file mode 100644
index ea0867951..000000000
--- a/.autodoc/docs/json/core/src/components/LanguageSwitch/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/LanguageSwitch/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/LanguageSwitch/index.tsx",
- "summary": "The `LangSwitcher` component is responsible for rendering a dropdown menu that allows users to switch between different languages on the website. The component is built using the `Menu` and `Transition` components from the `@headlessui/react` library, as well as several other third-party libraries such as `next/router` and `cookie-cutter`.\n\nWhen the component is rendered, it first retrieves the current locale, available locales, and current URL path using the `useRouter` hook from `next/router`. It then renders a button that displays the current language flag and a chevron icon to indicate that it is a dropdown menu. When the button is clicked, the `Menu` component is activated and displays a list of available languages.\n\nEach language in the list is rendered as a `Menu.Item` component, which contains a link to the current page with the `locale` query parameter set to the corresponding language code. When a language is selected, the `cookie-cutter` library is used to set a cookie with the selected language code, which is then used to set the `locale` query parameter on subsequent page loads.\n\nOverall, the `LangSwitcher` component provides a simple and intuitive way for users to switch between different languages on the website. It can be easily integrated into other components and pages using the `import` statement, as shown below:\n\n```\nimport LangSwitcher from './path/to/LangSwitcher'\n\nfunction MyComponent() {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code is a React component that renders a language switcher dropdown menu with flags and language names.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including `@headlessui/react`, `@heroicons/react/solid`, `next/link`, `next/image`, `classnames`, `next/router`, and `cookie-cutter`.\n\n3. What is the format of the `LANG_TO_COUNTRY` object?\n- The `LANG_TO_COUNTRY` object maps language codes to their corresponding country names in various languages. The keys are language codes (e.g. \"en\" for English), and the values are strings representing the country name in that language (e.g. \"English\" for the \"en\" key).",
- "checksum": "994187366b7904c6828b043d59cf4172"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/LineGraph/index.json b/.autodoc/docs/json/core/src/components/LineGraph/index.json
deleted file mode 100644
index 9d3cac1d7..000000000
--- a/.autodoc/docs/json/core/src/components/LineGraph/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/LineGraph/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/LineGraph/index.tsx",
- "summary": "The code is a React component that renders a line graph. The component takes in an array of data points, where each data point is an object with an x and y value. The component also takes in optional stroke and strokeWidth props that determine the color and thickness of the line. The component uses the `@visx/scale` library to create x and y scales based on the data points. The x scale maps the x values of the data points to the width of the graph, and the y scale maps the y values of the data points to the height of the graph. The component then renders an SVG element with a `LinePath` component from the `@visx/shape` library. The `LinePath` component takes in the data points and uses the x and y scales to draw a line connecting the points. If the stroke prop is an object with a `gradient` property, the component also renders a `LinearGradient` component from the `@visx/gradient` library to create a gradient stroke. The component uses the `react-virtualized-auto-sizer` library to automatically resize the graph to fit its container. \n\nThis component can be used in a larger project to display time-series data or any other data that can be represented as a line graph. The component is flexible and can be customized with different stroke colors and thicknesses. The component can also be used with a gradient stroke to create a more visually appealing graph. The component is responsive and will automatically resize to fit its container, making it easy to use in different parts of a larger application. \n\nExample usage:\n\n```\nimport LineGraph from './LineGraph'\n\nconst data = [\n { x: 0, y: 0 },\n { x: 1, y: 1 },\n { x: 2, y: 2 },\n { x: 3, y: 3 },\n { x: 4, y: 4 },\n]\n\nfunction App() {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a LineGraph component that renders a line graph using data passed in as props.\n\n2. What external libraries are being used in this code?\n- This code imports several external libraries including `react-virtualized-auto-sizer`, `react`, `@visx/scale`, `@visx/shape`, `lodash`, and `@visx/gradient`.\n\n3. What props does the LineGraph component accept?\n- The LineGraph component accepts a `data` prop which is an array of objects with `x` and `y` properties, a `stroke` prop which can be either an object with a `solid` property or an object with `gradient` property containing `from` and `to` properties, and a `strokeWidth` prop which is a number.",
- "checksum": "cf7b448222d06133d1c81958041ba5c1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/List/index.json b/.autodoc/docs/json/core/src/components/List/index.json
deleted file mode 100644
index f62a52c2a..000000000
--- a/.autodoc/docs/json/core/src/components/List/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/List/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/List/index.tsx",
- "summary": "The code above defines two React components, `Item` and `List`, which can be used to display a list of items in a visually appealing way. \n\nThe `Item` component takes in an object `item` and an optional string `className` as props. It returns a `li` element with the `item` object as its content. The `className` prop is used to add additional CSS classes to the `li` element, which can be used to customize the appearance of the item. \n\nThe `List` component takes in an array of objects `items` and an optional string `className` as props. It returns a `ul` element with each object in the `items` array rendered as an `Item` component. The `key` prop is set to the index of the item in the array to ensure that each item is uniquely identified. The `className` prop is used to add additional CSS classes to the `ul` element, which can be used to customize the appearance of the list. \n\nThe `List` component also has a static property `Item` which refers to the `Item` component. This allows the `Item` component to be accessed as a property of the `List` component, which can be useful for organizing related components. \n\nOverall, this code provides a simple and reusable way to display a list of items with customizable styling. It can be used in a variety of contexts within a larger project, such as displaying a list of products on an e-commerce site or a list of articles on a blog. \n\nExample usage:\n\n```\nimport List from './List';\n\nconst items = [\n { name: 'Item 1', price: 10 },\n { name: 'Item 2', price: 20 },\n { name: 'Item 3', price: 30 },\n];\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `classNames` function being imported from \"../../functions\"?\n- The `classNames` function is likely used to concatenate multiple class names together for the `className` prop of the `li` and `ul` elements.\n\n2. What is the expected shape of the `item` prop passed to the `Item` component?\n- The `item` prop can be of any type since its type is defined as `any` in the `ItemProps` interface.\n\n3. How can the `Item` component be used outside of the `List` component?\n- The `Item` component can be used outside of the `List` component by importing it separately and passing in the required `item` and optional `className` props.",
- "checksum": "d83b2e67fe1e1d3850c819fed53722f2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/ListLogo/index.json b/.autodoc/docs/json/core/src/components/ListLogo/index.json
deleted file mode 100644
index f5a028fcb..000000000
--- a/.autodoc/docs/json/core/src/components/ListLogo/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/ListLogo/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/ListLogo/index.tsx",
- "summary": "The code above is a React component that renders a logo image. It imports the `Logo` component from a file located at `../Logo` and the `useHttpLocations` hook from a file located at `../../hooks/useHttpLocations`. \n\nThe `ListLogo` component takes in four props: `logoURI`, `style`, `size`, and `alt`. `logoURI` is a required string that represents the URI of the logo image. `style` is an optional object that represents the CSS styles to apply to the logo image. `size` is an optional string that represents the width and height of the logo image, with a default value of `'24px'`. `alt` is an optional string that represents the alternative text for the logo image.\n\nThe `useHttpLocations` hook is called with `logoURI` as its argument, which returns an array of strings representing the possible locations of the logo image. These locations are then passed as the `srcs` prop to the `Logo` component, along with the other props.\n\nThe `Logo` component is responsible for rendering the actual logo image. It takes in the `alt`, `width`, `height`, `srcs`, and `style` props. The `alt` prop is used as the alternative text for the image. The `width` and `height` props are used to set the dimensions of the image. The `srcs` prop is an array of strings representing the possible locations of the image, which are tried in order until a valid image is found. The `style` prop is an object representing the CSS styles to apply to the image.\n\nOverall, this component can be used to easily render a logo image in a React application. It provides flexibility in terms of the size and style of the image, and handles the logic of finding the image at the correct location. An example usage of this component would be:\n\n```\nMy Shopping List
\n\n
\n );\n}\n```",
- "questions": "1. What does this code do?\n- This code exports a function called `Loader` that returns an SVG element representing a spinning circle with a customizable size and stroke color.\n\n2. What are the default values for `size` and `stroke`?\n- The default value for `size` is `'16px'` and the default value for `stroke` is `'#FFFFFF'`.\n\n3. What is the purpose of the `...rest` parameter?\n- The `...rest` parameter is used to pass any additional props to the SVG element, allowing for additional customization and styling beyond the `size` and `stroke` parameters.",
- "checksum": "e4d9046bec310112932b68b6fea862be"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Logo/bridgeLogo.json b/.autodoc/docs/json/core/src/components/Logo/bridgeLogo.json
deleted file mode 100644
index 816d79f55..000000000
--- a/.autodoc/docs/json/core/src/components/Logo/bridgeLogo.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "bridgeLogo.tsx",
- "filePath": "core/src/components/Logo/bridgeLogo.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Logo/bridgeLogo.tsx",
- "summary": "The code defines a React component called `Logo` that renders an image. The component takes in several props, including the `src` of the image, its `width` and `height`, an optional `alt` text, a `className`, and a `style` object. \n\nThe component first renders a `div` element with a `rounded` class and some styles for width, height, and centering the image. Inside this `div`, an `img` element is rendered with the `src` prop passed in, or a default image if `src` is falsy. The `onError` event is commented out, but it appears to handle cases where the `src` image fails to load. If this happens, the `src` is added to a `BAD_SRCS` object and the component is refreshed. \n\nThis component is likely used throughout the larger project to display logos or images. It provides a fallback image if the desired image fails to load, and also adds failed `src` values to a `BAD_SRCS` object for debugging purposes. \n\nExample usage:\n```\nimport Logo from \"./Logo\";\n\nfunction App() {\n return (\n Loading data...
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `BAD_SRCS` object?\n- The `BAD_SRCS` object is used to keep track of token addresses that have failed to load.\n\n2. What is the purpose of the `Logo` component?\n- The `Logo` component renders an image by sequentially trying a list of URIs, and then eventually a fallback triangle alert.\n\n3. What is the purpose of the `alt` prop in the `LogoProps` type?\n- The `alt` prop is used to provide alternative text for the image in case it cannot be displayed.",
- "checksum": "885a20b11b2095909d80a05161bce2c0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Logo/index.json b/.autodoc/docs/json/core/src/components/Logo/index.json
deleted file mode 100644
index 4315921a1..000000000
--- a/.autodoc/docs/json/core/src/components/Logo/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Logo/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Logo/index.tsx",
- "summary": "The `Logo` component in the `zoo` project is a React functional component that renders an image. It takes in a list of URIs as `srcs`, and sequentially tries each URI until it finds one that works. If none of the URIs work, it displays a fallback image of a triangle alert. \n\nThe `Logo` component is used to display logos of tokens in the larger project. It is designed to handle cases where the token logo URI is incorrect or unavailable. The component uses the `Image` component from the `../Image` file to display the image. The `Image` component takes in a `src` prop, which is the URI of the image to be displayed. If the URI is incorrect or unavailable, the `onError` callback is triggered. In the `Logo` component, the `onError` callback updates the `BAD_SRCS` object with the URI that failed, and triggers a state update to re-render the component with the next URI in the list.\n\nThe `Logo` component also takes in other props such as `width`, `height`, `style`, `alt`, and `className`. These props are passed down to the `Image` component to customize the image display. The `Logo` component also uses the `cloudinaryLoader` function from the `../../functions/cloudinary` file as the `loader` prop for the `Image` component. The `cloudinaryLoader` function is responsible for loading the image from the cloudinary CDN.\n\nHere is an example usage of the `Logo` component:\n\n```\nimport Logo from \"./Logo\";\n\nconst tokenLogoSrcs = [\n \"https://example.com/token-logo.png\",\n \"https://example.com/token-logo-2.png\",\n \"https://example.com/token-logo-3.png\",\n];\n\nconst MyComponent = () => {\n return (\n \n
\n );\n};\n```\n\nIn this example, the `Logo` component is used to display the logo of a token. The `srcs` prop is an array of URIs to try, and the `width` and `height` props set the size of the image. The `alt` prop is used to provide alternative text for the image.",
- "questions": "1. What is the purpose of the `Logo` component?\n- The `Logo` component renders an image by sequentially trying a list of URIs and eventually a fallback triangle alert.\n\n2. What is the `BAD_SRCS` object used for?\n- The `BAD_SRCS` object is used to keep track of URIs that have failed to load, so that they can be skipped in future attempts to load the image.\n\n3. What is the `cloudinaryLoader` function used for?\n- The `cloudinaryLoader` function is used as a loader for the `Image` component, which loads the image from a cloudinary URL.",
- "checksum": "bf0aecf30a37fa9e3c5591d9891c533d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Main/index.json b/.autodoc/docs/json/core/src/components/Main/index.json
deleted file mode 100644
index 4d05d4ce3..000000000
--- a/.autodoc/docs/json/core/src/components/Main/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Main/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Main/index.tsx",
- "summary": "This code defines a React component called `Main` that renders a main section of a web page. The component takes in several props, including `children`, which is a required prop that represents the content to be rendered inside the main section. The `isModal` prop is optional and is used to indicate whether the main section is being rendered as part of a modal dialog. The `innerClassName` prop is also optional and is used to specify additional CSS classes to be applied to the inner container of the main section. Finally, the `bgColor` prop is optional and is used to specify the background color of the main section, with a default value of \"#333\".\n\nThe `Main` component renders a `main` HTML element with several CSS classes that center the content vertically and horizontally within the main section. The `bgColor` prop is used to set the background color of the main section. The `style` prop is used to set the height of the main section to \"max-content\", which allows the height of the section to expand to fit its content.\n\nInside the `main` element, there is a `div` element that contains the `children` prop. The `innerClassName` prop is used to add any additional CSS classes to this `div` element. If the `isModal` prop is not set, the `div` element is also given a top margin of 12 pixels on small screens and 20 pixels on large screens.\n\nThis `Main` component can be used in a larger React application to render the main content of a web page or modal dialog. For example, it could be used in a layout component that wraps other components and provides a consistent layout for the entire application. Here is an example of how the `Main` component could be used:\n\n```\nimport Main from \"./Main\";\n\nfunction App() {\n return (\n \n ... \n \n \n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `Main` component?\n - The `Main` component is a functional component that renders a `main` element with flexible and responsive styles, and it accepts children, isModal, innerClassName, and bgColor props.\n\n2. What is the significance of the `bgColor` prop?\n - The `bgColor` prop is an optional prop that sets the background color of the `main` element, and it defaults to a dark gray color.\n\n3. What is the purpose of the `innerClassName` prop?\n - The `innerClassName` prop is an optional prop that sets the class name of the inner `div` element, which wraps the children of the `Main` component. It allows for additional styling or customization of the inner content.",
- "checksum": "1dfc69e552157c2eec3e3e20c746bdc6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Menu/index.json b/.autodoc/docs/json/core/src/components/Menu/index.json
deleted file mode 100644
index 4d52a1dba..000000000
--- a/.autodoc/docs/json/core/src/components/Menu/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Menu/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Menu/index.tsx",
- "summary": "The `Menu` component in this file is responsible for rendering a dropdown menu that displays a list of links to various resources related to the Sushi project. The menu is triggered by clicking on a button that displays an icon of three horizontal lines. When the button is clicked, a popover appears below it, displaying the list of links.\n\nThe `Menu` component imports several other components and functions from various libraries and files. These include the `Popover` and `Transition` components from the `@headlessui/react` library, the `ExternalLink` component from another file, and the `classNames` and `t` functions from the `styling` and `macro` files respectively.\n\nThe `items` function takes an `i18n` object as an argument and returns an array of objects, each representing a link in the menu. Each object has a `name`, `description`, and `href` property, which correspond to the name of the link, a short description of the resource it points to, and the URL of the resource.\n\nThe `Menu` component uses the `useLingui` hook to access the `i18n` object, which is then passed to the `items` function to generate the list of links. The resulting array of link objects is stored in the `solutions` variable.\n\nThe `Menu` component returns a `Popover` component, which wraps the button and popover content. The `Popover` component takes a function as a child, which receives an object with an `open` property that indicates whether the popover is currently open or closed. The function returns the button and popover content, which are conditionally rendered based on the value of `open`.\n\nThe button is rendered using the `Popover.Button` component and displays an icon of three horizontal lines. The `classNames` function is used to conditionally apply CSS classes to the button based on whether the popover is open or closed.\n\nThe popover content is rendered using the `Transition` and `Popover.Panel` components. The `Transition` component provides animation when the popover is opened or closed. The `Popover.Panel` component contains the actual content of the popover, which is a list of links generated by mapping over the `solutions` array and rendering an `ExternalLink` component for each link.\n\nThe `ExternalLink` component is responsible for rendering an anchor tag that opens the link in a new tab when clicked. It takes a `href` prop that specifies the URL of the link, and renders the `name` and `description` properties of the link object as the link text.\n\nOverall, the `Menu` component provides a reusable dropdown menu that can be used to display a list of links to various resources related to the Sushi project. It uses several other components and functions to achieve this, including the `Popover`, `Transition`, and `ExternalLink` components, as well as the `classNames` and `t` functions.",
- "questions": "1. What is the purpose of this code?\n- This code is a React component that renders a menu with links to various resources related to Sushi, including documentation, development resources, open source projects, tools, and a Discord community.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including \"@headlessui/react\" for the popover and transition components, \"next/image\" for rendering the menu icon, \"@lingui/core\" and \"@lingui/react\" for internationalization support, and a custom \"classNames\" function for styling.\n\n3. What is the structure of the data used to generate the menu items?\n- The menu items are generated from an array of objects, where each object represents a single menu item and includes properties for the item's name, description, and href (URL). The array is generated by calling the \"items\" function and passing in an \"i18n\" object from the \"@lingui/core\" library.",
- "checksum": "a5273dbc5bb33a3cd90dd927bd573a97"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Modal/HeadlessUIModal.json b/.autodoc/docs/json/core/src/components/Modal/HeadlessUIModal.json
deleted file mode 100644
index 782677e29..000000000
--- a/.autodoc/docs/json/core/src/components/Modal/HeadlessUIModal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "HeadlessUIModal.tsx",
- "filePath": "core/src/components/Modal/HeadlessUIModal.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Modal/HeadlessUIModal.tsx",
- "summary": "The `HeadlessUIModal` component is a reusable modal component that can be used in a React project. It is built using the `@headlessui/react` library, which provides a set of completely unstyled, fully accessible UI components that can be used to build custom UIs. \n\nThe `HeadlessUIModal` component takes in three props: `isOpen`, `onDismiss`, and `children`. The `isOpen` prop is a boolean that determines whether the modal is open or closed. The `onDismiss` prop is a function that is called when the modal is dismissed. The `children` prop is used to pass in the content that will be displayed inside the modal.\n\nThe component uses the `Transition.Root` component from `@headlessui/react` to handle the transition between the open and closed states of the modal. When the `isOpen` prop is `true`, the modal is displayed. When the `isOpen` prop is `false`, the modal is hidden.\n\nThe modal itself is built using the `Dialog` component from `@headlessui/react`. The `Dialog` component provides the basic structure for the modal, including the overlay and the content area. The `Dialog` component takes in several props, including `open`, which determines whether the modal is open or closed, and `onClose`, which is called when the modal is closed.\n\nThe content of the modal is passed in using the `children` prop. The content is wrapped in a `Transition.Child` component, which handles the transition of the content when the modal is opened or closed.\n\nThe `HeadlessUIModal` component is a flexible and reusable component that can be used to display any kind of content in a modal. It is fully accessible and provides a smooth transition between the open and closed states of the modal. \n\nExample usage:\n\n```\nimport HeadlessUIModal from './HeadlessUIModal';\n\nfunction MyComponent() {\n const [isOpen, setIsOpen] = useState(false);\n\n function handleOpenModal() {\n setIsOpen(true);\n }\n\n function handleCloseModal() {\n setIsOpen(false);\n }\n\n return (\n <>\n \n Welcome to my website!
\nThis is the main content of my website.
\nModal Title
\nModal content goes here.
\n\n \n \n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports a React component called `Modal` that renders a customizable modal dialog box.\n\n2. What are the required props for the `Modal` component?\n- The only required props are `isOpen` and `onDismiss`, which respectively determine whether the modal is visible and what happens when the modal is dismissed.\n\n3. What are some of the optional props that can be passed to the `Modal` component?\n- Some of the optional props include `minHeight`, `maxHeight`, `padding`, `maxWidth`, `isMax`, `isFullWidth`, `backgroundColor`, `scrollable`, and `transitionProps`, which allow for customization of the modal's appearance and behavior.",
- "checksum": "eab81186040e7948d40237140ea5f787"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/ModalHeader/BidModalHeader.json b/.autodoc/docs/json/core/src/components/ModalHeader/BidModalHeader.json
deleted file mode 100644
index df471a398..000000000
--- a/.autodoc/docs/json/core/src/components/ModalHeader/BidModalHeader.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BidModalHeader.tsx",
- "filePath": "core/src/components/ModalHeader/BidModalHeader.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/ModalHeader/BidModalHeader.tsx",
- "summary": "The code defines a React functional component called `BidModalHeader` that renders a header for a bidding modal. The component takes in three props: `className`, `onBack`, and `showAccount`. `className` is a string that specifies additional CSS classes to apply to the component. `onBack` is a function that is called when the user clicks on a chevron left icon, which is rendered as a circular button. `showAccount` is a boolean that determines whether to show a `Web3Status` component, which displays the user's connected wallet status.\n\nThe `useActiveWeb3React` hook is used to retrieve the user's connected wallet account. The `Web3Status` component is only rendered if `showAccount` is true, and it displays the user's wallet status using the `i18n` internationalization library and the `t` macro from the `@lingui/macro` package.\n\nThis component can be used in a larger project that involves bidding on items using a blockchain network. The `BidModalHeader` component can be included in a bidding modal that allows users to place bids on items. The component provides a back button and a wallet status indicator, which are useful for navigating the modal and displaying the user's wallet status. The `className` prop can be used to customize the component's appearance, and the `onBack` prop can be used to specify a custom function to handle the back button click event. Overall, this component provides a simple and reusable header for a bidding modal in a blockchain-based application.",
- "questions": "1. What is the purpose of the `BidModalHeader` component?\n - The `BidModalHeader` component is used to render the header section of a bidding modal.\n2. What is the role of the `Web3Status` component in this code?\n - The `Web3Status` component is used to display the status of the user's Web3 wallet connection.\n3. What is the significance of the `FC` type in the component declaration?\n - The `FC` type is a shorthand for `FunctionComponent` and indicates that the component is a function component that accepts props.",
- "checksum": "d10eeef7079b9a2b3c1f70b2990b8017"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/ModalHeader/index.json b/.autodoc/docs/json/core/src/components/ModalHeader/index.json
deleted file mode 100644
index 6ddcf0e0f..000000000
--- a/.autodoc/docs/json/core/src/components/ModalHeader/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/ModalHeader/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/ModalHeader/index.tsx",
- "summary": "The code above is a React component called `ModalHeader` that renders a header for a modal. The component takes in four optional props: `title`, `className`, `onClose`, and `onBack`. \n\nIf the `onBack` prop is provided, a `ChevronLeftIcon` is rendered on the left side of the header. When clicked, the `onBack` function is called. If the `title` prop is provided, a `Typography` component is rendered in the center of the header with the provided title. If the `onClose` prop is provided, an `XIcon` is rendered on the right side of the header. When clicked, the `onClose` function is called.\n\nThe `ModalHeader` component is useful for creating consistent and reusable headers for modals throughout a project. By passing in different `title`, `onClose`, and `onBack` functions, the header can be customized for different modals. \n\nHere is an example of how the `ModalHeader` component can be used:\n\n```\nimport ModalHeader from \"./ModalHeader\";\n\nfunction MyModal() {\n const handleBack = () => {\n // handle going back\n };\n\n const handleClose = () => {\n // handle closing modal\n };\n\n return (\n Modal Content
\nThis is the content of the modal.
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `ModalHeader` that renders a header for a modal with an optional title, back button, and close button.\n\n2. What external dependencies does this code rely on?\n- This code imports two icons from the `@heroicons/react/outline` package and a `Typography` component from a local file.\n\n3. What props can be passed to the `ModalHeader` component?\n- The `ModalHeader` component accepts four optional props: `title` (a string), `className` (a string), `onClose` (a function), and `onBack` (a function).",
- "checksum": "adcae3909dc1b7561bea1c43803e7dd0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/ModelViewer/index.json b/.autodoc/docs/json/core/src/components/ModelViewer/index.json
deleted file mode 100644
index cb7cb245b..000000000
--- a/.autodoc/docs/json/core/src/components/ModelViewer/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/ModelViewer/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/ModelViewer/index.tsx",
- "summary": "The `ModelViewer` component is a React component that renders a 3D model viewer using the `model-viewer` library from Google. The component takes several props, including the paths to the GLB and USDZ files for the 3D model, the zoom level, and a boolean flag for whether to use the USDZ file. The component also includes a list of animal models that can be used as the current 3D model.\n\nThe component renders a `div` element that contains the `model-viewer` element, which is created using a template string that includes the props passed to the component. The `model-viewer` element includes several attributes that control its behavior, such as `loading`, `reveal`, `camera-controls`, `auto-rotate`, `autoplay`, and `ar`. These attributes enable features such as automatic rotation, autoplay, and augmented reality (AR) support.\n\nThe `useEffect` hook is used to perform any necessary cleanup when the component is unmounted, but it does not currently have any functionality.\n\nThe `ModelViewer` component can be used in a larger project to display 3D models of animals or other objects. For example, it could be used in an educational app to teach children about different animals, or in an e-commerce app to allow customers to view products in 3D. The component could be customized by passing different props, such as different 3D models or zoom levels, to suit the needs of the specific use case.\n\nExample usage:\n\n```\nimport ModelViewer from \"./ModelViewer\";\n\nfunction App() {\n return (\n \n {/* modal content */}\n
\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n \n This code defines a React component called `ModelViewer` that renders a 3D model using the `model-viewer` library. The component takes in several props that allow customization of the model and its behavior.\n\n2. What are the default values for the props of this component?\n \n The default values for the props are as follows:\n - `glb`: \"/models/Tiger/TIGER_BABY.glb\"\n - `usdz`: \"/models/Tiger/TIGER_BABY.usdz\"\n - `zoom`: \"auto\"\n - `usdzFile`: false\n - `multiple`: false\n - `onClick`: () => {}\n - `className`: \"\"\n\n3. What is the purpose of the `useEffect` hook in this code?\n \n The `useEffect` hook is currently empty and serves no purpose. It is likely included as a placeholder for future code that may need to be executed when the component mounts or unmounts.",
- "checksum": "6e0e091942209fb274859a1225f701df"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Moonpaybtn/MoonpayBtn.json b/.autodoc/docs/json/core/src/components/Moonpaybtn/MoonpayBtn.json
deleted file mode 100644
index bba6387a5..000000000
--- a/.autodoc/docs/json/core/src/components/Moonpaybtn/MoonpayBtn.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "MoonpayBtn.tsx",
- "filePath": "core/src/components/Moonpaybtn/MoonpayBtn.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Moonpaybtn/MoonpayBtn.tsx",
- "summary": "This code defines a React component called `MoonPayBtn` that renders a button labeled \"Buy Crypto\". When the button is clicked, a dropdown menu appears that contains an embedded iframe from the MoonPay API. The iframe allows users to buy cryptocurrency using a MoonPay account.\n\nThe component uses the `useState` hook to manage the state of the dropdown menu. When the button is clicked, the `handleOnClick` function is called, which toggles the value of the `IsActive` state variable. This causes the dropdown menu to appear or disappear depending on its current state.\n\nThe `Transition` component from the `@headlessui/react` library is used to animate the appearance and disappearance of the dropdown menu. The `Menu` component from the same library is used to define the structure of the dropdown menu. The `Menu.Button` component defines the appearance of the button that triggers the dropdown menu, and the `Menu.Items` component defines the contents of the dropdown menu.\n\nThe `Menu.Item` component is used to wrap the MoonPay iframe. The `allow` attribute of the iframe specifies the permissions required for the iframe to function properly. The `src` attribute specifies the URL of the MoonPay API, along with an API key and a currency code.\n\nThis component can be used in a larger project that requires a way for users to buy cryptocurrency using a MoonPay account. The component can be imported and rendered wherever it is needed in the project. For example:\n\n```\nimport MoonPayBtn from \"./components/MoonPayBtn\";\n\nfunction App() {\n return (\n 3D Animal Viewer
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the MoonPayBtn component?\n- The MoonPayBtn component is used to render a button that allows users to buy cryptocurrency through MoonPay.\n\n2. What is the purpose of the handleOnClick function?\n- The handleOnClick function toggles the IsActive state when the button is clicked.\n\n3. What is the purpose of the commented out axios post request in the handleSubmit function?\n- The axios post request is commented out and not functional, so it is unclear what its purpose was intended to be.",
- "checksum": "29650933a77549b1c5297539c50ea0ee"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/NavLink/index.json b/.autodoc/docs/json/core/src/components/NavLink/index.json
deleted file mode 100644
index deda2dc59..000000000
--- a/.autodoc/docs/json/core/src/components/NavLink/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/NavLink/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/NavLink/index.tsx",
- "summary": "The code above is a React component that creates a navigation link that can be used in a web application. The component is called `NavLink` and it imports `Link` and `LinkProps` from the `next/link` module, as well as `React` and `Children` from the `react` module, and `useRouter` from the `next/router` module.\n\nThe `NavLink` component takes several props, including `children`, which is the content of the link, `exact`, which is a boolean that determines whether the link should match the current URL exactly or not, and `activeClassName`, which is a string that represents the class name to be applied to the link when it is active.\n\nThe `useRouter` hook is used to get information about the current route, including the current URL path, the route, the query parameters, and the base path. The `child` variable is used to get the child element of the `children` prop, which is the content of the link.\n\nThe `isActive` variable is used to determine whether the link is active or not. If `exact` is true, the link will only be active if the `as` prop or the `href.pathname` prop or the `href` prop matches the current URL exactly. If `exact` is false, the link will be active if the current URL starts with the `as` prop or the `href.pathname` prop or the `href` prop.\n\nThe `className` variable is used to determine the class name of the link. If the link is active, the `activeClassName` prop is added to the class name of the link. Otherwise, the class name of the link remains the same.\n\nFinally, the `NavLink` component returns a `Link` component from the `next/link` module, which wraps the child element of the `children` prop. The `className` prop of the child element is set to the `className` variable, which determines whether the link is active or not.\n\nThis component can be used in a larger project to create navigation links that are styled differently when they are active. For example, in a web application with a navigation bar, the `NavLink` component can be used to create links that are highlighted when the user is on the corresponding page. Here is an example of how the `NavLink` component can be used:\n\n```\nWelcome to My Crypto App
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `NewNFTCard` component?\n- The `NewNFTCard` component is used to display information about a specific NFT item, including its image or animation, name, age, and ID.\n\n2. What is the role of the `ModelViewer` component?\n- The `ModelViewer` component is used to display a 3D model of an NFT item, and it takes in two props (`glb` and `usdz`) that specify the URLs of the model's GLB and USDZ files.\n\n3. What is the significance of the `ssr: false` option in the `dynamic` import statement?\n- The `ssr: false` option indicates that the `ModelViewer` component should not be server-side rendered, and should instead be loaded on the client side only. This is because the `ModelViewer` component relies on the `window` object, which is not available during server-side rendering.",
- "checksum": "0a4023101e747cd586a1e0da9713eb1b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/NftCard/index.json b/.autodoc/docs/json/core/src/components/NftCard/index.json
deleted file mode 100644
index 24e34f774..000000000
--- a/.autodoc/docs/json/core/src/components/NftCard/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/NftCard/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/NftCard/index.tsx",
- "summary": "The `NftCard` component is a React component that renders a card displaying information about a non-fungible token (NFT). The component takes in several props, including an image, name, address, days left, highest bid, price, yields per day, and currency. \n\nThe component is designed to be used in a larger project that involves displaying NFTs to users. The `NftCard` component can be used to display information about a single NFT, and can be repeated multiple times to display information about multiple NFTs. \n\nThe component renders a card with a black background and a rounded border. The card contains an image of the NFT, as well as information about the NFT's name, price, address, days left, highest bid, and yields per day. The currency used for the price and yields can be specified using the `currency` prop, which defaults to \"ZOO\". \n\nThe `NftCard` component is designed to be flexible and customizable. The image prop can be any valid React node, allowing for the use of images, videos, or other media types. The component also uses Tailwind CSS classes to style the card, making it easy to customize the appearance of the card to match the design of the larger project. \n\nHere is an example of how the `NftCard` component could be used in a larger React project:\n\n```\nimport React from \"react\";\nimport NftCard from \"./NftCard\";\n\nconst NftList = ({ nfts }) => {\n return (\n \n {nfts.map((nft) => (\n
\n );\n};\n\nexport default NftList;\n```\n\nIn this example, the `NftList` component takes in an array of NFT objects and maps over them to render an `NftCard` component for each NFT. The `image` prop is passed as an `img` element with the `src` and `alt` attributes set to the corresponding values from the NFT object. The other props are passed directly from the NFT object.",
- "questions": "1. What are the required props for the NftCard component?\n- The required props for the NftCard component are \"image\", while \"name\", \"price\", \"address\", \"days\", \"highestBid\", \"yields\", and \"currency\" are optional.\n\n2. What is the default value for the \"currency\" prop?\n- The default value for the \"currency\" prop is \"ZOO\".\n\n3. What is the purpose of the NftCard component?\n- The NftCard component is a reusable component that displays information about a non-fungible token (NFT), including its image, name, price, address, days left, highest bid, and yields per day.",
- "checksum": "97be85457301d36b7a0f17ae7da2c6e7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Paper/index.json b/.autodoc/docs/json/core/src/components/Paper/index.json
deleted file mode 100644
index 1f4bf7133..000000000
--- a/.autodoc/docs/json/core/src/components/Paper/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Paper/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Paper/index.tsx",
- "summary": "The code above is a React component called `Paper` that returns a div element with rounded corners and any children passed to it. The component takes in three props: `children`, `className`, and `...rest`. \n\nThe `children` prop is used to pass any child elements to the `Paper` component. These child elements will be rendered inside the div element returned by the component. \n\nThe `className` prop is used to add any additional classes to the div element. This allows for custom styling of the `Paper` component. \n\nThe `...rest` prop is used to pass any additional props to the div element. This allows for flexibility in how the `Paper` component is used and styled. \n\nOverall, the purpose of this component is to provide a reusable and customizable paper-like element that can be used throughout the larger project. It can be used to wrap other components or elements to give them a consistent look and feel. \n\nHere is an example of how the `Paper` component can be used in a larger project:\n\n```\nimport React from \"react\";\nimport Paper from \"./Paper\";\n\nfunction App() {\n return (\n \n \n \n
\n );\n}\n\nexport default App;\n```\n\nIn this example, the `Paper` component is used to wrap a heading and paragraph element. The `className` prop is used to add a custom class to the `Paper` component, which can be used to style it in CSS.",
- "questions": "1. What is the purpose of the `Paper` component?\n The `Paper` component is a functional component that returns a JSX element with a `div` tag that has a `rounded` class and any additional classes passed in through the `className` prop. It also renders any children passed in as props.\n\n2. What is the significance of the `...rest` parameter in the `Paper` function?\n The `...rest` parameter is a spread operator that allows any additional props passed into the `Paper` component to be spread into the `div` tag as attributes. This allows for flexibility in passing in additional props without having to explicitly define them in the component.\n\n3. What is the purpose of the `JSX.Element` type in the function signature?\n The `JSX.Element` type is a type definition for the return value of a JSX expression. In this case, it ensures that the `Paper` component returns a valid JSX element.",
- "checksum": "610d1d09dbb26ab0024c727ff5d8dab6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/PercentInputPanel/index.json b/.autodoc/docs/json/core/src/components/PercentInputPanel/index.json
deleted file mode 100644
index 6960c30ef..000000000
--- a/.autodoc/docs/json/core/src/components/PercentInputPanel/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/PercentInputPanel/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/PercentInputPanel/index.tsx",
- "summary": "The code defines a React component called `PercentInputPanel` that renders a panel with an input field for a percentage value. The component takes three props: `value`, `onUserInput`, and `id`. \n\nThe `value` prop is a string that represents the current value of the input field. The `onUserInput` prop is a callback function that is called whenever the user types into the input field. The function is passed the new value of the input field as a string argument. The `id` prop is a string that is used as the `id` attribute of the outermost `div` element that is rendered by the component.\n\nThe component renders a `div` element with the `id` specified by the `id` prop. The `div` has a dark background color and is rounded. Inside the `div`, there are two child elements: a label and an input field. The label says \"Amount to Remove\" and is left-aligned. The input field is a custom component called `Input.Percent` that is imported from another file. The `Input.Percent` component takes several props, including `className`, `value`, `onUserInput`, and `align`. The `className` prop is set to \"token-amount-input\". The `value` prop is set to the `value` prop passed to the `PercentInputPanel` component. The `onUserInput` prop is set to a callback function that simply calls the `onUserInput` prop passed to the `PercentInputPanel` component with the new value of the input field. The `align` prop is set to \"right\". \n\nThe `PercentInputPanel` component is likely used in a larger project to allow users to input a percentage value. The `onUserInput` callback function is likely used to update the state of the parent component that renders the `PercentInputPanel` component. Here is an example of how the `PercentInputPanel` component might be used in a parent component:\n\n```\nimport React, { useState } from 'react'\nimport PercentInputPanel from './PercentInputPanel'\n\nexport default function MyComponent() {\n const [percentValue, setPercentValue] = useState('50')\n\n function handlePercentInput(newValue) {\n setPercentValue(newValue)\n }\n\n return (\n Hello World!
\nThis is some text inside the paper element.
\n\n
\n )\n}\n```\n\nIn this example, the `MyComponent` component renders a `PercentInputPanel` component with an initial value of \"50\". Whenever the user types into the input field, the `handlePercentInput` function is called with the new value of the input field. The `handlePercentInput` function updates the state of the `MyComponent` component with the new value. The current value of the input field is displayed below the `PercentInputPanel` component.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `PercentInputPanel` that renders an input field for a percentage value.\n\n2. What props does the `PercentInputPanel` component accept?\n- The `PercentInputPanel` component accepts three props: `value` (string), `onUserInput` (function that takes a string argument), and `id` (string).\n\n3. What other components are being used in this code?\n- This code imports a component called `Input` from a file located at `../Input`. Within the `PercentInputPanel` component, it uses a subcomponent of `Input` called `Input.Percent`.",
- "checksum": "a404d16d43472d48196028c23f44f08a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Polling/index.json b/.autodoc/docs/json/core/src/components/Polling/index.json
deleted file mode 100644
index fb3232564..000000000
--- a/.autodoc/docs/json/core/src/components/Polling/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Polling/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Polling/index.tsx",
- "summary": "This code defines a React component called `Polling` that displays the current block number of a specified Ethereum chain and a spinning animation. The block number is obtained using the `useBlockNumber` hook from the `application` state, which is provided by the `useActiveWeb3React` hook. The `chainId` is also obtained from `useActiveWeb3React`. \n\nThe component uses the `useState` hook to keep track of whether it is mounted or not. The `useEffect` hook is used to set a timer that updates the `isMounted` state variable every second. This is done to prevent a memory leak when the component is unmounted. The timer is cleared when the component is unmounted using the `clearTimeout` function.\n\nThe `ExternalLink` component is used to wrap the block number and spinning animation. The `href` attribute of the `ExternalLink` is set to a link to the block explorer for the specified chain and block number. If either the `chainId` or `blockNumber` is not available, the `href` attribute is set to an empty string. The `className` attribute of the `ExternalLink` is set to either `text-high-emphesis` or `text-low-emphesis` depending on the value of `isMounted`. \n\nThe block number is displayed using a `div` element, and the spinning animation is displayed using an SVG element. The `animate-spin` class is added to the SVG element when `isMounted` is `true`, causing the animation to spin. \n\nThis component can be used in a larger project to display the current block number of a specified Ethereum chain and provide a link to the block explorer for that block. It can be used in conjunction with other components to build a dashboard or monitoring tool for Ethereum applications. \n\nExample usage:\n\n```\nimport Polling from './Polling'\n\nfunction App() {\n return (\n You entered: {percentValue}%
\n\n
\n )\n}\n```",
- "questions": "1. What does this code do?\n- This code is a React component called `Polling` that renders a link with a block number and a spinning animation. The link points to a blockchain explorer and the block number is obtained from the `useBlockNumber` hook.\n\n2. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to set a timer that updates the `isMounted` state after 1 second. It also clears the timer and sets `isMounted` to false when the component unmounts. The `useEffect` hook is triggered whenever the `blockNumber` changes.\n\n3. What are the dependencies of this component?\n- This component depends on the `React` library, the `useEffect` and `useState` hooks from React, the `ExternalLink` component from a relative path, the `getExplorerLink` function from a `functions/explorer` module, and the `useActiveWeb3React` and `useBlockNumber` hooks from `hooks/useActiveWeb3React` and `state/application/hooks` modules, respectively.",
- "checksum": "2784decbfd2e5fad733bd4580623e8b2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Popover/index.json b/.autodoc/docs/json/core/src/components/Popover/index.json
deleted file mode 100644
index 44fe5eb45..000000000
--- a/.autodoc/docs/json/core/src/components/Popover/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Popover/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Popover/index.tsx",
- "summary": "The `Popover` component in this file is a reusable UI component that provides a popover functionality. It takes in three props: `content`, `show`, and `children`. The `content` prop is the content that will be displayed in the popover, the `show` prop is a boolean that determines whether or not the popover is visible, and the `children` prop is the element that will trigger the popover when clicked.\n\nThe component uses the `usePopper` hook from the `react-popper` library to position the popover relative to the trigger element. The `usePopper` hook takes in three arguments: the reference element (the trigger element), the popper element (the popover), and an options object that specifies the placement of the popover, the strategy for positioning, and any modifiers to apply. The `Popover` component sets the reference element, popper element, and arrow element using the `useState` hook.\n\nThe `Popover` component also uses the `useInterval` hook from a custom `useInterval` hook to update the position of the popover every 100ms when the `show` prop is true. The `updateCallback` function is a memoized callback that calls the `update` function returned by the `usePopper` hook.\n\nThe `Popover` component returns a `HeadlessuiPopover` component from the `@headlessui/react` library that provides the accessibility and keyboard navigation for the popover. The `HeadlessuiPopover` component has two child components: the reference element and the `HeadlessuiPopover.Panel` component. The reference element wraps the `children` prop and sets the `setReferenceElement` function as a ref. The `HeadlessuiPopover.Panel` component is the actual popover that is displayed when the trigger element is clicked. It sets the `setPopperElement` function as a ref and applies the styles and attributes returned by the `usePopper` hook. It also includes an arrow element that sets the `setArrowElement` function as a ref.\n\nOverall, this `Popover` component can be used in a larger project to provide a popover functionality for any element that needs it. It is reusable and customizable with the `content`, `show`, and `placement` props. Here is an example of how it can be used:\n\n```\n\n \n \n \n
\n );\n};\n\nexport default MyComponent;\n```",
- "questions": "1. What is the purpose of this code?\n This code defines a React component called `QuestionHelper` that renders a tooltip with a question mark icon. The tooltip can be triggered by clicking or hovering over the icon or its parent element.\n\n2. What are the props that can be passed to the `QuestionHelper` component?\n The `QuestionHelper` component accepts two optional props: `text` and `children`. `text` is the content of the tooltip, and `children` is the content that should be wrapped by the tooltip icon and trigger the tooltip.\n\n3. What is the purpose of the `useCallback` hook in this code?\n The `useCallback` hook is used to memoize the `open` and `close` functions that toggle the visibility of the tooltip. This can improve performance by preventing unnecessary re-renders of the component when these functions are passed as props to child components.",
- "checksum": "54ed565f7390297bc260902ef80549be"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/RenderAsync/index.json b/.autodoc/docs/json/core/src/components/RenderAsync/index.json
deleted file mode 100644
index 254c241b7..000000000
--- a/.autodoc/docs/json/core/src/components/RenderAsync/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/RenderAsync/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/RenderAsync/index.tsx",
- "summary": "The code defines a React component called `RenderAsync` that allows for rendering of asynchronous data. The component takes in three props: `children`, `promise`, and `loader`. \n\nThe `children` prop is a function that takes in the data returned by the `promise` and returns a React node. This is what will be rendered once the `promise` is resolved. \n\nThe `promise` prop is a Promise object that resolves to the data that will be rendered. \n\nThe `loader` prop is a React node that will be rendered while the `promise` is still resolving. This can be used to display a loading spinner or other indicator to the user that data is being fetched. \n\nThe component uses the `useState` and `useEffect` hooks from React to manage the state of the data returned by the `promise`. When the component mounts, it checks if the `promise` prop is an instance of a Promise object. If it is, it creates an async function that awaits the resolution of the `promise` and sets the data returned by the `promise` using the `setData` function from the `useState` hook. \n\nOnce the `data` state is set, the `children` function is called with the `data` as an argument and the result is returned as a React node. If the `data` state is not set yet, the `loader` prop is returned instead. \n\nThis component can be used in a larger project to handle rendering of data that is fetched asynchronously. For example, it can be used to fetch and render data from an API endpoint. Here is an example usage of the component:\n\n```\nimport RenderAsync from './RenderAsync'\n\nfunction MyComponent() {\n const [data, setData] = useState()\n\n const fetchData = async () => {\n const resp = await fetch('https://example.com/api/data')\n const json = await resp.json()\n setData(json)\n }\n\n return (\n My Component
\n\n
\n )}\n {data.title}
\n{data.description}
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `ScrollableGraph` component?\n - The `ScrollableGraph` component is used to render a graph with scrollable functionality based on the provided data.\n\n2. What is the `AutoSizer` component used for?\n - The `AutoSizer` component is used to automatically calculate the width and height of its child component based on the available space.\n\n3. What type of data does the `ScrollableGraph` component expect to receive?\n - The `ScrollableGraph` component expects to receive an object with optional properties such as `compact`, `margin`, `data`, `title`, `labels`, `note`, and `colors`. The `data` property is required.",
- "checksum": "407553fae39be92226c53985d5e6deb8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Search/index.json b/.autodoc/docs/json/core/src/components/Search/index.json
deleted file mode 100644
index 6385eef40..000000000
--- a/.autodoc/docs/json/core/src/components/Search/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Search/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Search/index.tsx",
- "summary": "The code above defines a React component called `Search` that renders a search input field with a search icon. The component takes in several props, including `term`, `search`, `className`, and `inputProps`. \n\nThe `term` prop is a string that represents the current search term entered by the user. The `search` prop is a function that is called whenever the user types in the search input field. The `className` prop is an optional string that represents the CSS class name(s) to apply to the component. The `inputProps` prop is an optional object that contains additional props to apply to the input field.\n\nThe component renders a `div` element with a `relative` position and a `rounded` class. The `className` prop is applied to this `div` element. Inside the `div`, there is an `input` element that has several CSS classes applied to it. The `input` element has an `onChange` event listener that calls the `search` function with the current value of the input field whenever the user types in the field. The `value` prop of the `input` element is set to the `term` prop, which represents the current search term entered by the user. The `placeholder` prop of the `input` element is set to a string that prompts the user to enter a search term.\n\nFinally, there is a `div` element with an `absolute` position that contains a search icon. The search icon is imported from the `react-feather` library and is rendered using the `Search` component. The `size` prop of the `SearchIcon` component is set to `16`.\n\nThis component can be used in a larger project to render a search input field with a search icon. The `term` and `search` props can be used to manage the state of the search input field and perform a search operation respectively. The `className` and `inputProps` props can be used to customize the appearance and behavior of the search input field. \n\nExample usage:\n\n```\n\n \n {/* main content of the app */}\n \n
\n )\n}\n\nexport default App\n```\n\nIn this example, the `App` component renders a `Sidebar` component with an array of three items. These items represent links to the home page, about page, and contact page of the application. The `Sidebar` component then renders these links in a sidebar on the left side of the screen. The `main` element contains the main content of the application, which will be displayed to the right of the sidebar.",
- "questions": "1. What is the purpose of this code?\n This code defines a React component called `Sidebar` that renders a list of links using the `NavLink` component.\n\n2. What props does the `Sidebar` component expect?\n The `Sidebar` component expects a single prop called `items`, which is an array of objects containing `href` and `text` properties for each link.\n\n3. What CSS classes are being used in this code?\n This code uses several CSS classes from a custom stylesheet, including `mt-4`, `space-y-4`, `font-bold`, `text-high-emphesis`, `bg-dark-800`, `border-transparent`, `rounded`, `hover:bg-dark-900`, and `ml-5`.",
- "checksum": "71c67fd68b64d6eed697b47f83b78be9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Slider/index.json b/.autodoc/docs/json/core/src/components/Slider/index.json
deleted file mode 100644
index a6c5f6aa6..000000000
--- a/.autodoc/docs/json/core/src/components/Slider/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/components/Slider/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Slider/index.ts",
- "summary": "This code defines two styled components, `PrettoSlider` and `MarketTypeSlider`, which are customized versions of the `Slider` component from the Material UI library. \n\nThe `PrettoSlider` component has a black track and thumb with a white value label that appears when the user interacts with the slider. The thumb has a border and a hover effect. The value label is positioned above the thumb and rotated at a 45-degree angle. This component could be used in a variety of contexts where a slider is needed, such as adjusting the volume of a media player or selecting a value from a range.\n\nThe `MarketTypeSlider` component has a gray track and a black thumb with a white value label. The thumb has a thicker border and a hover effect. The value label is positioned above the thumb and rotated at a 45-degree angle. This component could be used in a financial application where the user needs to select a market type or range.\n\nBoth components use the `styled` function from Material UI to apply CSS styles to the `Slider` component. The styles are defined using the `&` operator to target child elements of the `Slider` component. The `borderRadius` property is used to create a rounded edge on the value label. The `transform` property is used to position and rotate the value label. \n\nTo use these components in a React application, they can be imported from this file and used like any other React component. For example:\n\n```\nimport { PrettoSlider, MarketTypeSlider } from './SliderStyles';\n\nfunction MyComponent() {\n const [value, setValue] = useState(50);\n\n const handleSliderChange = (event, newValue) => {\n setValue(newValue);\n };\n\n return (\n \n
\n );\n}\n```\n\nIn this example, the `PrettoSlider` and `MarketTypeSlider` components are used to display two sliders that update the `value` state when the user interacts with them.",
- "questions": "1. What is the purpose of this code?\n - This code defines two custom styled sliders using the Material UI library.\n\n2. What are the differences between the `PrettoSlider` and `MarketTypeSlider` styles?\n - The `PrettoSlider` has a black track and a smaller thumb with a white border, while the `MarketTypeSlider` has a dark gray track with no border radius and a larger thumb with a thicker black border.\n\n3. Can these styles be customized further?\n - Yes, the styles can be further customized by modifying the properties defined in the `PrettoSlider` and `MarketTypeSlider` objects, or by creating additional styled sliders using the same approach.",
- "checksum": "1af3ea3f5e8ff7f78fa5e3e0f15c604d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/SplitPane/index.json b/.autodoc/docs/json/core/src/components/SplitPane/index.json
deleted file mode 100644
index 1c7ce7b8b..000000000
--- a/.autodoc/docs/json/core/src/components/SplitPane/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/SplitPane/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/SplitPane/index.tsx",
- "summary": "The code above is a React functional component that exports a SplitPane component. The SplitPane component takes in two props, left and right, which are both JSX elements. The purpose of this component is to split the screen into two sections, with the left prop taking up the left half of the screen and the right prop taking up the right half of the screen. \n\nThe SplitPane component uses the flexbox layout to achieve this split screen effect. The outermost div has a class of \"flex\" which sets the display property to flex. The \"flex-1\" class sets the flex-grow property to 1, which allows the div to grow to fill the available space. The \"items-center\" class centers the child elements vertically, and the \"flex-col md:flex-row\" classes set the flex-direction to column on small screens and row on medium screens. The \"justify-between\" class evenly distributes the child elements along the main axis, which is either the vertical or horizontal axis depending on the screen size.\n\nThe left and right props are each wrapped in a div with a class of \"w-full md:w-1/2\". This sets the width of each child element to 100% on small screens and 50% on medium screens, allowing them to take up half of the screen each.\n\nThis component can be used in a larger project to split the screen into two sections, such as a dashboard with a list of items on the left and a detailed view of the selected item on the right. Here is an example of how this component can be used:\n\n```\nimport React from 'react';\nimport SplitPane from './SplitPane';\n\nfunction Dashboard() {\n return (\n \n \n
\n );\n};\n```\n\nIn this example, the Svg component is used inside a div element with a width of 50px and a color of red. The spin prop is set to true, which applies the spinStyle CSS constant and animates the SVG element.",
- "questions": "1. What is the purpose of the `rotate` keyframe animation?\n - The `rotate` keyframe animation is used to rotate an element 360 degrees over a period of 2 seconds in a linear fashion.\n\n2. What is the purpose of the `spinStyle` CSS property?\n - The `spinStyle` CSS property is used to apply the `rotate` keyframe animation to an element in order to make it spin.\n\n3. What are the default props for the `Svg` component?\n - The default props for the `Svg` component include a `color` of \"text\", a `width` of \"20px\", an `xmlns` of \"http://www.w3.org/2000/svg\", and a `spin` of false.",
- "checksum": "f7ee4347373417e7e0a3ab4be7f3b9f6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Svg/index.json b/.autodoc/docs/json/core/src/components/Svg/index.json
deleted file mode 100644
index 7d2f6cf07..000000000
--- a/.autodoc/docs/json/core/src/components/Svg/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Svg/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Svg/index.tsx",
- "summary": "This code exports the `Svg` component from the `Svg` file and its associated `SvgProps` type from the `types` file. The `Svg` component is likely a reusable component that can be used throughout the larger project to render SVG graphics. \n\nBy exporting the `Svg` component, other files in the project can import and use it as needed. For example, if a component needs to render an SVG graphic, it can import the `Svg` component and pass in the necessary props. \n\nSimilarly, by exporting the `SvgProps` type, other files can import and use it to ensure that the correct props are passed to the `Svg` component. This helps to ensure that the component is used correctly and reduces the likelihood of errors. \n\nHere is an example of how this code might be used in a larger project:\n\n```\nimport React from \"react\";\nimport { Svg } from \"./zoo\";\n\nconst MyComponent = () => {\n return (\n \n \n
\n );\n};\n```\n\nIn this example, the `Svg` component is imported from the `zoo` module and used to render a blue circle with a radius of 50. The `width` and `height` props are also passed to the `Svg` component to specify the size of the SVG graphic. \n\nOverall, this code plays an important role in the larger project by providing a reusable `Svg` component and associated `SvgProps` type that can be used throughout the project to render SVG graphics.",
- "questions": "1. **What is the purpose of the `Svg` component?** \nA smart developer might want to know what functionality the `Svg` component provides and how it is used within the `zoo` project.\n\n2. **What is the `SvgProps` type used for?** \nA smart developer might want to know what props are expected to be passed to the `Svg` component and what their types are.\n\n3. **Are there any other components or types exported from this file?** \nA smart developer might want to know if there are any other important exports from this file that are not immediately visible in the code snippet provided.",
- "checksum": "fd775db633aa73587eb0ff2fafbe4e67"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Svg/types.json b/.autodoc/docs/json/core/src/components/Svg/types.json
deleted file mode 100644
index d40963c8b..000000000
--- a/.autodoc/docs/json/core/src/components/Svg/types.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "types.ts",
- "filePath": "core/src/components/Svg/types.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Svg/types.ts",
- "summary": "This code defines an interface called `SvgProps` that extends the `SVGAttributes` interface from the `react` library and the `SpaceProps` interface from the `styled-system` library. The `SVGAttributes` interface provides a set of attributes that can be used with SVG elements, while the `SpaceProps` interface provides a set of props for adding margin, padding, and other spacing-related styles to components.\n\nThe `SvgProps` interface also includes two additional properties: `theme` and `spin`. The `theme` property is an optional object of type `DefaultTheme` from the `styled-components` library, which allows for theming of SVG components. The `spin` property is a boolean that can be used to add a spinning animation to the SVG component.\n\nThis interface can be used as a type for props passed to SVG components in a React application. For example, if we have an SVG component called `MySvgComponent`, we can define its props as follows:\n\n```\nimport { SvgProps } from 'path/to/zoo'\n\ninterface MySvgComponentProps extends SvgProps {\n // additional props specific to MySvgComponent\n}\n\nconst MySvgComponent: React.FC\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `numberWithCommas` function imported from \"functions/format\"?\n- The `numberWithCommas` function is used to format a number with commas for readability.\n\n2. What is the significance of the `useMemo` hook that is commented out?\n- The `useMemo` hook is used to memoize the result of a function so that it is only recomputed when its dependencies change. In this case, it is likely used to compute a class name based on the `priceImpact` prop.\n\n3. What is the purpose of the `priceImpact` prop and how is it used in the component?\n- The `priceImpact` prop is used to display the percentage change in price impact. If it is provided, the component will display this value with a sign and a percentage symbol.",
- "checksum": "15e9d9b826f01e2165559c1528cfb00b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Swap/Header.json b/.autodoc/docs/json/core/src/components/Swap/Header.json
deleted file mode 100644
index 09688d38e..000000000
--- a/.autodoc/docs/json/core/src/components/Swap/Header.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Header.tsx",
- "filePath": "core/src/components/Swap/Header.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Swap/Header.tsx",
- "summary": "The `ExchangeHeader` component is a React functional component that renders a header for a token exchange feature. It receives several props, including `input` and `output`, which are objects representing the input and output tokens for the exchange, respectively. It also receives `allowedSlippage`, a value representing the maximum allowed slippage for the exchange, and `crossChain`, a boolean indicating whether the exchange is cross-chain or not. \n\nThe component renders a container with two sections: one on the left and one on the right. The left section contains a link to the swap page, which is only rendered if either `input` or `output` is not defined. If both `input` and `output` are defined, the left section displays either \"Cross-Chain\" or \"Instant Trade\" depending on the value of `crossChain`. The right section contains three icons: a refresh icon, a filter icon, and a settings icon. Clicking on the refresh icon calls the `fetchUserBalances` function, which retrieves the user's token balances. Clicking on the filter icon opens a modal that allows the user to adjust the slippage tolerance for the exchange. Clicking on the settings icon opens a settings modal that is not implemented in this code.\n\nThe `SlippageModal` component is a child component of `ExchangeHeader` that renders the modal for adjusting the slippage tolerance. It receives three props: `autoRefresh`, a boolean indicating whether auto-refresh is enabled or not, `autoRefreshHandler`, a function that toggles the value of `autoRefresh`, and `isSlipToleranceModal`, a boolean indicating whether the modal is open or not. The modal contains several input fields and switches that allow the user to adjust various settings related to the exchange.\n\nThis component can be used as a header for a token exchange feature in a larger project. It provides a simple and intuitive interface for users to initiate and customize token exchanges. The `ExchangeHeader` component can be easily integrated into other components and pages in the project, and the `SlippageModal` component can be reused in other parts of the project that require a modal for adjusting settings. \n\nExample usage:\n\n```jsx\nimport ExchangeHeader from \"components/ExchangeHeader\";\n\nfunction ExchangePage() {\n const inputToken = { address: \"0x123abc\", symbol: \"ETH\" };\n const outputToken = { address: \"0x456def\", symbol: \"USDT\" };\n const allowedSlippage = 0.5;\n const crossChain = true;\n\n return (\n {asset.name}
\nCurrent value:
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `ExchangeHeader` component?\n- The `ExchangeHeader` component is used to display the header section of a page related to exchanging tokens, and it takes in various props related to the exchange.\n\n2. What is the `SlippageModal` component used for?\n- The `SlippageModal` component is used to display a modal that allows the user to adjust the slippage tolerance and other settings related to the token exchange.\n\n3. What is the purpose of the `getQuery` function?\n- The `getQuery` function takes in two parameters, `input` and `output`, and returns an object that contains the addresses of the input and output currencies if they are provided. If only the input currency is provided, the output currency is set to \"ETH\". If neither input nor output currencies are provided, the function returns null.",
- "checksum": "046deb6dd754a44b25db97081086cab6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Swap/ListCard.json b/.autodoc/docs/json/core/src/components/Swap/ListCard.json
deleted file mode 100644
index 1831f2bb8..000000000
--- a/.autodoc/docs/json/core/src/components/Swap/ListCard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ListCard.tsx",
- "filePath": "core/src/components/Swap/ListCard.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Swap/ListCard.tsx",
- "summary": "The code defines a React component called `ListCard` that renders a card with some information. The component takes in several props, including `label`, `fee`, `amount`, `className`, and `background`. \n\nThe `label` prop is a string that represents the label of the card, the `fee` prop is a string that represents the estimated gas fee, and the `amount` prop is a string that represents the amount of something. The `className` prop is an optional string that can be used to add additional CSS classes to the component, and the `background` prop is an optional string that represents the background color of the card.\n\nThe component returns a `div` element that contains the information passed in through the props. The `amount` prop is displayed as a heading, and the `fee` prop is displayed as a smaller text with an \"Est. gas fee\" label. The `label` prop is displayed as a smaller text in a black box that is positioned above the card.\n\nThe component also includes an image of an information icon that is displayed next to the \"Est. gas fee\" text. The image is imported from the `next/image` module.\n\nThis component can be used in a larger project to display information in a card format. The `ListCard` component can be imported into other components and used to display information in a consistent and visually appealing way. For example, it could be used to display information about different animals in a zoo, such as their name, habitat, and diet. \n\nHere is an example of how the `ListCard` component could be used in another component:\n\n```\nimport ListCard from \"./ListCard\";\n\nconst AnimalCard = ({ name, habitat, diet }) => {\n return (\n {diet}
\n \n );\n};\n\nexport default AnimalCard;\n```\n\nIn this example, the `AnimalCard` component takes in `name`, `habitat`, and `diet` props, and passes them to the `ListCard` component. The `name` prop is used as the `label` prop, the `habitat` prop is used as the `amount` prop, and the `diet` prop is displayed as a paragraph inside the `ListCard` component. The `background` prop is set to a green color to represent the animal's natural habitat.", - "questions": "1. What is the purpose of the `ListCard` component?\n - The `ListCard` component is a reusable component that renders a card with a label, fee, and amount.\n\n2. What is the `Image` component being imported from and how is it being used?\n - The `Image` component is being imported from the `next/image` module and is being used to render an image of an info icon with a specific width and height.\n\n3. What is the purpose of the `background` prop in the `ListCardProps` interface?\n - The `background` prop is an optional string that allows the user to specify a custom background color for the card. If no value is provided, the default background color is used.", - "checksum": "3c1cbd2fd5c45354ccd2d2e169a13a86" -} \ No newline at end of file diff --git a/.autodoc/docs/json/core/src/components/Swap/TransactionDetail.json b/.autodoc/docs/json/core/src/components/Swap/TransactionDetail.json deleted file mode 100644 index 3c6a35fff..000000000 --- a/.autodoc/docs/json/core/src/components/Swap/TransactionDetail.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "TransactionDetail.tsx", - "filePath": "core/src/components/Swap/TransactionDetail.tsx", - "url": "zoo-labs/zoo/blob/master/core/src/components/Swap/TransactionDetail.tsx", - "summary": "The `TransactionDetail` component is responsible for rendering the details of a transaction in the Zoo project. It receives several props, including `evmToAddress`, `amount`, `token`, and `bridgeState`, which are used to display information about the transaction.\n\nThe component uses the `useState` hook to manage the state of whether or not to show the transaction details. It also uses two additional state variables, `isHashCopied` and `isSigCopied`, to keep track of whether the user has copied the transaction hash or signature.\n\nThe `useActiveWeb3React` hook is used to get access to the web3 library, which is used to calculate the gas price for the transaction.\n\nThe `copyTextToClipboard` function is used to copy text to the clipboard. It first checks if the `navigator.clipboard` API is available, and if not, falls back to using the `document.execCommand` method.\n\nThe component renders a div that contains the transaction details. When the user clicks on the div, the `show` state variable is toggled, and the details are either shown or hidden.\n\nIf the details are shown, the component renders several divs that display information about the transaction, including the protocol fee, transaction state, and bridge transaction signature and hash. The `shortenString` function from the `format` module is used to shorten the signature and hash strings for display purposes.\n\nEach of the signature and hash divs contains a copy button that, when clicked, copies the corresponding value to the clipboard and displays a \"Copied!\" message.\n\nOverall, the `TransactionDetail` component provides a user-friendly way to view the details of a transaction in the Zoo project and copy important information to the clipboard. It can be used in conjunction with other components in the project to provide a comprehensive user interface for interacting with the blockchain. \n\nExample usage:\n\n```jsx\nimport TransactionDetail from 'path/to/TransactionDetail';\n\nconst MyComponent = () => {\n const evmToAddress = '0x123...';\n const amount = 100;\n const token = { symbol: 'ZOO' };\n const bridgeState = { status: 'COMPLETED', signature: '0xabc...', hashedTxId: '0xdef...' };\n\n return (\n\n
\n );\n};\n```",
- "questions": "1. What is the purpose of the `TransactionDetail` component?\n- The `TransactionDetail` component is used to display details about a transaction, including the transaction state, protocol fee, and bridge transaction signature and hash.\n\n2. What is the `useActiveWeb3React` hook used for?\n- The `useActiveWeb3React` hook is used to get the active Web3 provider and library, which are used to retrieve the gas price for the transaction.\n\n3. What is the purpose of the `copyTextToClipboard` function?\n- The `copyTextToClipboard` function is used to copy text to the user's clipboard, and it uses the `navigator.clipboard` API if available, falling back to the `document.execCommand` method if not.",
- "checksum": "f15a112507894a5838b5d63eacb330ab"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Switch/index.json b/.autodoc/docs/json/core/src/components/Switch/index.json
deleted file mode 100644
index 69b83074c..000000000
--- a/.autodoc/docs/json/core/src/components/Switch/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Switch/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Switch/index.tsx",
- "summary": "This code exports a customized Switch component from the Material-UI library. The purpose of this component is to provide a toggle switch that can be used in a React application. The component is styled using the `styled` function from Material-UI, which allows for custom CSS to be applied to the component.\n\nThe `MuiSwitch` component is created by passing the `Switch` component from Material-UI to the `styled` function. The CSS styles are defined using a JavaScript object that is passed as an argument to the `styled` function. The styles define the width, height, padding, and other properties of the switch. The `&` symbol is used to refer to the current element, and the `.` symbol is used to refer to a child element.\n\nThe `active` style is applied when the switch is clicked. This style changes the width of the thumb and moves the switch to the right. The `checked` style is applied when the switch is in the \"on\" position. This style changes the color of the thumb and the background color of the track.\n\nThe `thumb` and `track` styles define the appearance of the thumb and track elements of the switch. The `thumb` style applies a box shadow and a transition effect to the thumb element. The `track` style applies a border radius, opacity, and background color to the track element.\n\nThis component can be used in a React application by importing it and rendering it in a component. For example:\n\n```\nimport React from \"react\";\nimport MuiSwitch from \"./MuiSwitch\";\n\nfunction MyComponent() {\n const [checked, setChecked] = React.useState(false);\n\n const handleChange = () => {\n setChecked(!checked);\n };\n\n return (\n \n
\n );\n}\n```\n\nIn this example, the `MuiSwitch` component is rendered inside a `div` element. The `checked` and `onChange` props are passed to the component to control its state. When the switch is toggled, the `handleChange` function is called to update the state.",
- "questions": "1. What is the purpose of this code?\n \n This code exports a styled Switch component from the Material UI library.\n\n2. What are the props that can be passed to this component?\n \n The component accepts all the props that can be passed to the Switch component from Material UI library.\n\n3. What is the significance of the \"&\" symbol used in the CSS selectors?\n \n The \"&\" symbol is used to refer to the parent selector in nested CSS selectors. In this code, it is used to refer to the MuiSwitch component itself.",
- "checksum": "54d059ea0378e7d7b363af5aabe27b40"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Table/TransactionRow.json b/.autodoc/docs/json/core/src/components/Table/TransactionRow.json
deleted file mode 100644
index bdf7a1f8a..000000000
--- a/.autodoc/docs/json/core/src/components/Table/TransactionRow.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TransactionRow.tsx",
- "filePath": "core/src/components/Table/TransactionRow.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Table/TransactionRow.tsx",
- "summary": "The code defines a React functional component called `TransactionRow` that renders a table row with transaction details. The component takes in five props: `from_address`, `to_address`, `value`, `block_timestamp`, and `transaction_hash`. \n\nThe `shortenAddress` function from the `functions` module is imported to shorten the `from_address` and `to_address` strings to a more readable format. The `abbreviateNumber` function from the `functions/abbreviateNumbers` module is imported to abbreviate the `value` number to a more readable format. The `moment` library is imported to format the `block_timestamp` as a human-readable date and time string.\n\nThe component returns a table row (`| From | \nTo | \nValue | \nDate | \nTransaction Hash | \n
|---|
| Name | \nHabitat | \n
|---|---|
| Lion | \nAfrica | \n
| Panda | \nAsia | \n
\n
\n );\n};\n```",
- "questions": "1. What is the purpose of the `Button` component being imported from \"components/Button\"?\n- The smart developer might ask why the `Button` component is being imported and what its role is in the `ToastAction` component. \n\n2. What is the `getExternalLinkProps` function and where is it defined?\n- The smart developer might ask what the `getExternalLinkProps` function does and where it is defined in the codebase.\n\n3. Why is the `Link` component from \"react-router-dom\" commented out?\n- The smart developer might ask why the `Link` component is commented out and if there is a reason for not using it in the `ToastAction` component.",
- "checksum": "eb00b0202c4d896711171d551edab4fc"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Toast/ToastContainer.json b/.autodoc/docs/json/core/src/components/Toast/ToastContainer.json
deleted file mode 100644
index 3ae7ff95e..000000000
--- a/.autodoc/docs/json/core/src/components/Toast/ToastContainer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ToastContainer.tsx",
- "filePath": "core/src/components/Toast/ToastContainer.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Toast/ToastContainer.tsx",
- "summary": "The code defines a React component called `ToastContainer` that renders a container for displaying toast notifications. Toast notifications are small messages that appear on the screen to provide feedback to the user about an action or event. The `ToastContainer` component uses the `TransitionGroup` component from the `react-transition-group` library to animate the appearance and disappearance of toast notifications.\n\nThe `ToastContainer` component takes in several props, including an array of `toasts` to display, a function `onRemove` to call when a toast is removed, a time-to-live `ttl` for each toast, and a `stackSpacing` value to determine the vertical spacing between stacked toasts. The component also uses a custom hook called `useMatchBreakpoints` to determine the screen size and adjust the positioning of the toasts accordingly.\n\nThe `StyledToastContainer` component is a styled component that defines the CSS styles for the toast container and the toast animations. The `enter` and `appear` classes set the initial opacity of the toast to 0.01, while the `exit` class sets the final opacity to 0.01. The `enter-active` and `appear-active` classes set the transition effect for the toast to fade in over 250ms with an ease-in effect, while the `exit-active` class sets the transition effect to fade out over 250ms with an ease-out effect.\n\nThe `ToastContainer` component maps over the `toasts` array and renders a `Toast` component for each toast. The `Toast` component takes in the `toast` object, the `onRemove` function, the `ttl` value, and a `style` object that sets the position and z-index of the toast. The `style` object uses the `isXs`, `isSm`, and `isMd` values from the `useMatchBreakpoints` hook to determine whether to position the toast from the top or bottom of the screen.\n\nOverall, this code provides a reusable and customizable component for displaying toast notifications in a React application. It can be used in conjunction with other components and libraries to create a comprehensive user interface for the application. Here is an example of how the `ToastContainer` component can be used:\n\n```\nimport React, { useState } from \"react\";\nimport ToastContainer from \"./ToastContainer\";\n\nconst App = () => {\n const [toasts, setToasts] = useState([]);\n\n const addToast = (message) => {\n const newToast = { id: Date.now(), message };\n setToasts((prevToasts) => [...prevToasts, newToast]);\n setTimeout(() => removeToast(newToast.id), 4000);\n };\n\n const removeToast = (id) => {\n setToasts((prevToasts) => prevToasts.filter((t) => t.id !== id));\n };\n\n return (\n A new version of the app is available!
\n\n \n
\n );\n};\n\nexport default App;\n```",
- "questions": "1. What is the purpose of the `useMatchBreakpoints` hook being imported?\n- The `useMatchBreakpoints` hook is likely used to determine the screen size and adjust the positioning of the toasts accordingly.\n\n2. What is the purpose of the `TransitionGroup` component being used?\n- The `TransitionGroup` component is likely used to animate the entrance and exit of the toasts.\n\n3. What is the purpose of the `stackSpacing` prop being passed to the `ToastContainer` component?\n- The `stackSpacing` prop is likely used to specify the amount of space between each toast when they are stacked on top of each other.",
- "checksum": "ba34fa6b847ad9849d7b07e0b7e4fd98"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Toast/index.json b/.autodoc/docs/json/core/src/components/Toast/index.json
deleted file mode 100644
index 9c0830db4..000000000
--- a/.autodoc/docs/json/core/src/components/Toast/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Toast/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Toast/index.tsx",
- "summary": "This code exports three items from the `zoo` project's `ToastContainer` module: the `ToastContainer` component, the `toastTypes` object, and several types related to toasts. \n\nThe `ToastContainer` component is a container for displaying toast notifications to users. Toast notifications are small, temporary messages that appear on the screen to provide feedback or information to the user. The `ToastContainer` component is customizable and can be styled to fit the design of the application. \n\nThe `toastTypes` object contains constants that define the different types of toast notifications that can be displayed. These types include success, error, warning, and info. Developers can use these constants to create their own custom toast notifications or to style the default notifications provided by the `ToastContainer` component. \n\nThe types exported by this module include `ToastContainerProps`, which defines the props that can be passed to the `ToastContainer` component, and `Toast`, which defines the shape of a single toast notification. Additionally, the `Types as ToastTypes` statement exports an alias for the `types` object as `ToastTypes`. This allows developers to import the `toastTypes` object using a more descriptive name. \n\nOverall, this code provides a convenient way for developers to use and customize toast notifications in their applications. Here is an example of how the `ToastContainer` component and `toastTypes` object could be used in a React application:\n\n```\nimport { ToastContainer, toastTypes } from 'zoo';\n\nfunction App() {\n const handleButtonClick = () => {\n // Display a success toast notification\n toastTypes.success('Button clicked!');\n };\n\n return (\n \n \n
\n );\n}\n```",
- "questions": "1. **What is the purpose of the `ToastContainer` and `Toast` components?** The `ToastContainer` component is likely responsible for rendering and managing toast notifications, while the `Toast` component represents an individual toast notification. \n2. **What is the `types` export and what does it contain?** The `types` export likely contains various type definitions related to toast notifications, such as the shape of a `Toast` object or the available types of toast notifications. \n3. **What is the significance of the `Types` export in the type definition?** The `Types` export is likely an alias for the `toastTypes` export, allowing developers to import the available toast types using a more descriptive name.",
- "checksum": "445520f9a1ee3ee2d1c86710a7f6cdaf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Toast/types.json b/.autodoc/docs/json/core/src/components/Toast/types.json
deleted file mode 100644
index 234208038..000000000
--- a/.autodoc/docs/json/core/src/components/Toast/types.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "types.ts",
- "filePath": "core/src/components/Toast/types.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Toast/types.ts",
- "summary": "This code defines a set of interfaces and types related to displaying toast notifications in a web application. Toast notifications are small messages that appear on the screen to provide feedback or alerts to the user. \n\nThe `types` object defines three different types of toast notifications: DANGER, WARNING, and INFO. These types are represented as strings that can be used to style the toast notification appropriately. \n\nThe `Types` type is a union type that represents all possible values of the `types` object. This type is used to ensure that the `type` property of the `Toast` interface is always one of the valid types defined in the `types` object. \n\nThe `ToastAction` interface defines the structure of an action that can be associated with a toast notification. This includes a `text` property that describes the action and a `url` property that specifies the URL to navigate to when the action is clicked. \n\nThe `Toast` interface defines the structure of a toast notification. Each toast has an `id` property that uniquely identifies it, a `type` property that specifies the type of the toast (using one of the values from the `types` object), a `title` property that provides a short description of the toast, an optional `description` property that provides additional information, and an optional `action` property that specifies an action associated with the toast. \n\nThe `ToastContainerProps` interface defines the properties that can be passed to a component that displays a collection of toast notifications. This includes an array of `toasts` to display, a `stackSpacing` property that specifies the spacing between stacked toasts, a `ttl` property that specifies the time-to-live (in milliseconds) for each toast, and an `onRemove` callback function that is called when a toast is dismissed. \n\nThe `ToastProps` interface defines the properties that can be passed to a component that displays a single toast notification. This includes the `toast` object to display, the `onRemove` callback function, the `ttl` property, and a `style` property that can be used to apply custom styles to the toast. \n\nOverall, this code provides a set of interfaces and types that can be used to define and display toast notifications in a web application. By using these interfaces and types, developers can ensure that their toast notifications are consistent and easy to manage. \n\nExample usage:\n\n```typescript\nimport { Toast, ToastContainerProps, ToastProps } from 'zoo';\n\nconst toasts: Toast[] = [\n {\n id: '1',\n type: 'warning',\n title: 'Warning!',\n description: 'Something went wrong.',\n action: {\n text: 'Retry',\n url: '/retry',\n },\n },\n {\n id: '2',\n type: 'info',\n title: 'Information',\n description: 'Your changes have been saved.',\n },\n];\n\nfunction handleRemove(id: string) {\n // Remove the toast with the specified ID\n}\n\nfunction renderToast(toast: Toast) {\n return (\n \n
\n )\n}\n```\n\nIn this example, the `App` component has a state variable called `isDarkMode` that determines whether the app is in dark mode or not. The `toggleDarkMode` function updates the `isDarkMode` state variable when the toggle switch is clicked. The `ListToggle` component is rendered with the `isActive` prop set to `isDarkMode`, the `bgColor` prop set to `#4A5568`, and the `toggle` prop set to `toggleDarkMode`. The `className` of the `div` element that wraps the app is set to `\"dark\"` if `isDarkMode` is true, which applies some dark mode styles to the app. The `p` element contains some text that will be styled differently in dark mode.",
- "questions": "1. What is the purpose of this code?\n - This code exports a React component called `ListToggle` that renders a toggle switch with customizable background color and text labels for on and off states.\n\n2. What are the required props for the `ListToggle` component?\n - The `ListToggle` component requires `isActive` (a boolean indicating whether the toggle is on or off) and `toggle` (a function to be called when the toggle is clicked) props. It also accepts optional `id` (a string for the HTML `id` attribute) and `bgColor` (a string for the background color of the toggle when it is on) props.\n\n3. What CSS classes are applied to the `ListToggle` component?\n - The `ListToggle` component applies different CSS classes based on the `isActive` prop. When `isActive` is true, it applies the classes `bg-dark-700` and `text-high-emphesis`, and when `isActive` is false, it applies the classes `bg-dark-800` and `text-primary`. It also applies the classes `rounded-full`, `flex`, `items-center`, `outline-none`, `cursor-pointer`, `border-none`, `py-1`, `px-3`, and `space-x-3` to both states.",
- "checksum": "b11fc3d8ca90f28f6d277b00b50307b2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Toggle/index.json b/.autodoc/docs/json/core/src/components/Toggle/index.json
deleted file mode 100644
index 434c5db83..000000000
--- a/.autodoc/docs/json/core/src/components/Toggle/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Toggle/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Toggle/index.tsx",
- "summary": "The code defines a React component called `Toggle` that renders a switch UI element using the `Switch` component from the `@headlessui/react` library. The `Toggle` component takes three props: `id`, `isActive`, and `toggle`. \n\nThe `isActive` prop is a boolean that determines whether the switch is on or off. The `toggle` prop is a function that is called when the switch is toggled. The `id` prop is optional and can be used to set the `id` attribute of the switch element.\n\nThe `Switch` component renders a checkbox input element that is visually styled as a switch. The `checked` prop of the `Switch` component is set to the `isActive` prop of the `Toggle` component, so the switch is initially rendered in the on or off position based on the value of `isActive`. The `onChange` prop of the `Switch` component is set to the `toggle` prop of the `Toggle` component, so when the switch is toggled, the `toggle` function is called.\n\nThe `classNames` function from the `../../functions` module is used to conditionally apply CSS classes to the switch element based on the value of `isActive`. If `isActive` is true, the switch is given a blue background color, otherwise it is given a dark gray background color.\n\nThe switch element consists of two nested `span` elements. The first `span` element is visually hidden and provides an accessible label for the switch. The second `span` element contains two nested `span` elements that represent the switch handle. The first nested `span` element is positioned to the left or right of the switch based on the value of `isActive`, and is given a dark gray background color. The second nested `span` element is positioned on top of the first nested `span` element and is given a white background color. When `isActive` is true, the second nested `span` element is visible and contains a checkmark icon, otherwise it is hidden and contains a cross icon.\n\nThis `Toggle` component can be used in any React application that needs to render a switch UI element. It provides a simple and customizable way to toggle a boolean value. An example usage of the `Toggle` component is shown below:\n\n```\nimport Toggle from './Toggle'\n\nfunction App() {\n const [isActive, setIsActive] = useState(false)\n\n const handleToggle = () => {\n setIsActive(!isActive)\n }\n\n return (\n This is some text that will be styled differently in dark mode.
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `Toggle` component?\n- The `Toggle` component is a switch component that takes in an `id`, `isActive` boolean value, and a `toggle` function as props and returns a switch element with two states.\n\n2. What is the `classNames` function used for?\n- The `classNames` function is used to conditionally concatenate class names based on the values of the `isActive` prop and other static class names.\n\n3. What is the purpose of the `Switch` component from the `@headlessui/react` library?\n- The `Switch` component is a customizable switch component that provides accessible keyboard navigation and screen reader support. It takes in `checked`, `onChange`, and `className` props and returns a switch element.",
- "checksum": "2f3034328067e61a9a523493bb6b664a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Tooltip/index.json b/.autodoc/docs/json/core/src/components/Tooltip/index.json
deleted file mode 100644
index c936c6dcc..000000000
--- a/.autodoc/docs/json/core/src/components/Tooltip/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Tooltip/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Tooltip/index.tsx",
- "summary": "The code in this file provides functionality for creating tooltips and mouseover tooltips in a React project. \n\nThe `Tooltip` component takes in a `text` prop, which is the content that will be displayed in the tooltip. It then renders a `Popover` component with the `content` prop set to a div containing the `text` prop. The `Popover` component is imported from another file and is responsible for rendering the tooltip itself. The `Tooltip` component also spreads any additional props passed to it onto the `Popover` component.\n\nThe `TooltipContent` component is similar to the `Tooltip` component, but instead of taking in a `text` prop, it takes in a `content` prop. This component is meant to be used when the content of the tooltip is more complex than just a string of text. It also renders a `Popover` component with the `content` prop set to the `content` prop passed to it.\n\nThe `MouseoverTooltip` component is a variation of the `Tooltip` component that only shows the tooltip when the user hovers over the component it is wrapping. It takes in any props that the `Tooltip` component takes in, except for the `show` prop. It then renders a `div` that wraps around the `children` prop passed to it. When the user hovers over this `div`, the `show` state is set to `true`, which causes the tooltip to be displayed.\n\nThe `MouseoverTooltipContent` component is similar to the `MouseoverTooltip` component, but instead of taking in a `text` prop or a `content` prop, it takes in both a `content` prop and a `children` prop. It renders a `div` that wraps around the `children` prop passed to it, and when the user hovers over this `div`, the `show` state is set to `true`, which causes the tooltip to be displayed. The `content` prop is passed to the `TooltipContent` component, which is responsible for rendering the tooltip itself.\n\nOverall, these components provide a simple and flexible way to add tooltips and mouseover tooltips to a React project. They can be used in a variety of ways, such as providing additional information about a UI element or displaying a preview of content. Here is an example of how the `Tooltip` component could be used:\n\n```\nimport { Tooltip } from 'zoo';\n\nfunction MyComponent() {\n return (\n \n \n Hover over me!\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `Popover` component and how is it used in this code?\n \n The `Popover` component is imported and used to render tooltip content in this code. It takes in a `content` prop which is a ReactNode and renders it in a popover.\n\n2. What is the difference between the `Tooltip` and `TooltipContent` components?\n \n The `Tooltip` component is used to render a tooltip with text content, while the `TooltipContent` component is used to render a tooltip with arbitrary content.\n\n3. What is the purpose of the `MouseoverTooltip` and `MouseoverTooltipContent` components?\n \n The `MouseoverTooltip` and `MouseoverTooltipContent` components are variations of the `Tooltip` and `TooltipContent` components respectively, with added functionality to show and hide the tooltip on mouseover events.",
- "checksum": "5bd4c127d6ee22a4a3cbef47be1cba1b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/TransactionSettings/index.json b/.autodoc/docs/json/core/src/components/TransactionSettings/index.json
deleted file mode 100644
index 18564009d..000000000
--- a/.autodoc/docs/json/core/src/components/TransactionSettings/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/TransactionSettings/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/TransactionSettings/index.tsx",
- "summary": "The `TransactionSettings` component is responsible for rendering and managing the user's transaction settings, specifically the slippage tolerance and transaction deadline. It imports several hooks from the `user` slice of the global state, including `useUserSlippageTolerance`, `useSetUserSlippageTolerance`, and `useUserTransactionTTL`. It also imports several utility functions and components from various packages.\n\nThe component takes in a `placeholderSlippage` prop, which is used to display a default slippage tolerance value in the input field. It then initializes several state variables using the `useState` hook, including `slippageInput`, `slippageError`, `deadlineInput`, and `deadlineError`. It also initializes a reference to the slippage input field using the `useRef` hook.\n\nThe `parseSlippageInput` function is responsible for parsing and validating the user's input for the slippage tolerance. It first sets the `slippageInput` state variable to the user's input and clears the `slippageError` state variable. If the input is empty, it sets the user's slippage tolerance to \"auto\". Otherwise, it attempts to parse the input as a number and convert it to a percentage. If the parsed value is not an integer between 0 and 5000, it sets the user's slippage tolerance to \"auto\" and sets the `slippageError` state variable to `SlippageError.InvalidInput`. Otherwise, it sets the user's slippage tolerance to the parsed value as a `Percent` object.\n\nThe `parseCustomDeadline` function is responsible for parsing and validating the user's input for the transaction deadline. It first sets the `deadlineInput` state variable to the user's input and clears the `deadlineError` state variable. If the input is empty, it sets the transaction deadline to the default value. Otherwise, it attempts to parse the input as a number and convert it to seconds. If the parsed value is not an integer between 60 and 10800 (3 hours), it sets the `deadlineError` state variable to `DeadlineError.InvalidInput`. Otherwise, it sets the transaction deadline to the parsed value.\n\nThe component then renders two input fields for the slippage tolerance and transaction deadline, respectively. The slippage tolerance input field includes a button to toggle between \"auto\" and custom values, as well as a `QuestionHelper` component to display additional information. The transaction deadline input field includes a label for \"minutes\" and a `QuestionHelper` component. If there are any errors with the user's input, the component displays an error message below the input field.\n\nOverall, the `TransactionSettings` component provides a user-friendly interface for managing transaction settings and ensures that the user's input is properly validated before being used in the application. It can be used in various contexts throughout the larger project, wherever transaction settings need to be managed.",
- "questions": "1. What is the purpose of the `TransactionSettings` component?\n- The `TransactionSettings` component is used to display and allow users to adjust their slippage tolerance and transaction deadline settings.\n\n2. What are the possible values for the `SlippageError` and `DeadlineError` enums?\n- The `SlippageError` enum has three possible values: `InvalidInput`, `RiskyLow`, and `RiskyHigh`. The `DeadlineError` enum has one possible value: `InvalidInput`.\n- These enums are used to track and display errors related to user input for slippage tolerance and transaction deadline settings.\n\n3. What is the purpose of the `useUserSlippageTolerance`, `useSetUserSlippageTolerance`, and `useUserTransactionTTL` hooks?\n- The `useUserSlippageTolerance` hook retrieves the current slippage tolerance setting for the user.\n- The `useSetUserSlippageTolerance` hook is used to update the user's slippage tolerance setting.\n- The `useUserTransactionTTL` hook retrieves the current transaction deadline setting for the user.",
- "checksum": "6445b79e8bd536683e381d2bab7ca1a6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Typography/index.json b/.autodoc/docs/json/core/src/components/Typography/index.json
deleted file mode 100644
index 034918ff9..000000000
--- a/.autodoc/docs/json/core/src/components/Typography/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Typography/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Typography/index.tsx",
- "summary": "This code defines a `Typography` component that can be used to render text with different styles and weights. The component takes in several props, including `variant`, `weight`, `component`, `className`, and `clickable`. \n\nThe `variant` prop determines the size of the text and can be set to one of several predefined values, including `hero`, `h1`, `h2`, `h3`, `lg`, `base`, `sm`, and `xs`. The `weight` prop determines the font weight and can be set to either `400` or `700`. The `component` prop determines the HTML element that the text should be rendered as and defaults to `div`. The `className` prop allows for additional CSS classes to be added to the component. The `clickable` prop determines whether the text should be clickable or not.\n\nThe `Typography` component uses the `classNames` function from the `functions` module to generate a list of CSS classes based on the props passed in. It then creates a new React element using the `React.createElement` function and passes in the generated CSS classes, `onClick` handler (if provided), and any other props passed in. Finally, it renders the `children` prop, which represents the text to be displayed.\n\nThis component can be used throughout the larger project to render text with consistent styles and weights. For example, it could be used to render headings, paragraphs, or buttons. Here is an example of how the `Typography` component could be used to render a heading:\n\n```\nHover over this text to see a tooltip!
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code is a React component that renders a network switcher UI element for a web3 application.\n\n2. What dependencies does this code have?\n- This code imports several dependencies including `next/image`, `react`, and custom hooks and components from other files in the project.\n\n3. What is the expected behavior when the user interacts with this UI element?\n- When the user clicks on the network switcher UI element, a modal component called `NetworkModal` is displayed, allowing the user to select a different network to connect to.",
- "checksum": "19acb8688ebc40537e9a5ab01e53ce44"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Web3ReactManager/GnosisManager.json b/.autodoc/docs/json/core/src/components/Web3ReactManager/GnosisManager.json
deleted file mode 100644
index f25d5f754..000000000
--- a/.autodoc/docs/json/core/src/components/Web3ReactManager/GnosisManager.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "GnosisManager.tsx",
- "filePath": "core/src/components/Web3ReactManager/GnosisManager.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Web3ReactManager/GnosisManager.tsx",
- "summary": "The code above is a React component called `GnosisManager` that utilizes the `@gnosis.pm/safe-apps-web3-react` library to connect to a Gnosis Safe multisig wallet. \n\nThe `useSafeAppConnection` hook is used to establish a connection to the Gnosis Safe multisig wallet through the `SafeAppConnector` object. The `SafeAppConnector` object is created using the `new` keyword and is imported from the `@gnosis.pm/safe-apps-web3-react` library. \n\nThe `useSafeAppConnection` hook takes in the `SafeAppConnector` object as an argument and returns a boolean value indicating whether or not the connection to the Gnosis Safe multisig wallet was successful. This value is stored in the `triedToConnectToSafe` variable. \n\nThe `GnosisManager` component returns `null`, indicating that it does not render any content to the user interface. Instead, it is used as a utility component to establish a connection to the Gnosis Safe multisig wallet. \n\nThis code can be used in a larger project that requires interaction with a Gnosis Safe multisig wallet. For example, if a project requires the ability to send and receive funds from a Gnosis Safe multisig wallet, this code can be used to establish a connection to the wallet and perform the necessary transactions. \n\nHere is an example of how this code can be used in a larger project:\n\n```\nimport React from 'react'\nimport GnosisManager from './GnosisManager'\n\nfunction App() {\n return (\n \n
\n )\n}\n\nexport default App\n```\n\nIn the example above, the `GnosisManager` component is imported and used within the `App` component. Other components can also be added to the `App` component to interact with the Gnosis Safe multisig wallet, such as a component to send funds or a component to view transaction history.",
- "questions": "1. What is the purpose of the `useEffect` and `useState` hooks imported from React?\n - The `useEffect` hook is likely used to handle side effects, such as updating state or making API calls, and the `useState` hook is likely used to manage component state.\n \n2. What is the `@gnosis.pm/safe-apps-web3-react` package used for?\n - The `@gnosis.pm/safe-apps-web3-react` package is likely used to connect to the Gnosis Safe multisig wallet using the Web3 API.\n \n3. What is the purpose of the `triedToConnectToSafe` variable returned by the `useSafeAppConnection` hook?\n - The `triedToConnectToSafe` variable is likely used to determine whether or not the component was able to successfully connect to the Gnosis Safe multisig wallet.",
- "checksum": "361214166e94913f8c6237e7c766e13a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Web3ReactManager/index.json b/.autodoc/docs/json/core/src/components/Web3ReactManager/index.json
deleted file mode 100644
index fb53872cb..000000000
--- a/.autodoc/docs/json/core/src/components/Web3ReactManager/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Web3ReactManager/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Web3ReactManager/index.tsx",
- "summary": "The `Web3ReactManager` component is responsible for managing the connection to the Ethereum network via the Web3 React library. It is used in the larger project to ensure that the user is connected to the Ethereum network before allowing them to interact with the application. \n\nThe component imports several dependencies, including React, `useEffect`, `useState`, `Loader`, `NetworkContextName`, `dynamic`, `t`, `useEagerConnect`, `useInactiveListener`, `useLingui`, and `useActiveWeb3React`. \n\nThe `GnosisManagerNoSSR` component is imported using the `dynamic` function from Next.js, which allows for server-side rendering of components. \n\nThe `Web3ReactManager` component takes in a single prop, `children`, which is a JSX element. \n\nThe component first initializes several variables using the `useActiveWeb3React` hook, which provides information about the current state of the user's connection to the Ethereum network. It then uses the `useEagerConnect` hook to try to connect to an injected provider, if it exists and has already granted access. \n\nIf the connection is not active and there is no error, the component logs a message to the console. \n\nThe `useInactiveListener` hook is used to listen for login events on the injected provider when there is no account connected. \n\nThe component then sets up a delayed loader state using `useState` and `useEffect`. \n\nIf the connection has not been eagerly tried, the component returns `null`. If the account context is not active and there is a network error, the component displays an error message. If neither context is active, the component displays a loader. \n\nFinally, the component returns the `GnosisManagerNoSSR` component and the `children` prop. \n\nOverall, the `Web3ReactManager` component is an important part of the larger project's infrastructure, ensuring that the user is connected to the Ethereum network before allowing them to interact with the application.",
- "questions": "1. What is the purpose of the `Web3ReactManager` component?\n- The `Web3ReactManager` component manages the connection to a web3 provider and displays appropriate UI based on the connection status.\n\n2. What is the significance of the `GnosisManagerNoSSR` component?\n- The `GnosisManagerNoSSR` component is dynamically imported and rendered without server-side rendering, which can improve performance by reducing the initial bundle size.\n\n3. What are the `useEagerConnect` and `useInactiveListener` hooks used for?\n- The `useEagerConnect` hook attempts to eagerly connect to an injected provider, while the `useInactiveListener` hook listens for login events on the provider when there is no account connected.",
- "checksum": "4d19ee4de65990d080c6fe23d566c22a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/Web3Status/index.json b/.autodoc/docs/json/core/src/components/Web3Status/index.json
deleted file mode 100644
index 1c5e91544..000000000
--- a/.autodoc/docs/json/core/src/components/Web3Status/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/Web3Status/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/Web3Status/index.tsx",
- "summary": "The `Web3Status` component is responsible for displaying the user's wallet status and allowing them to connect to a wallet. It imports several dependencies such as React, `useMemo`, `AbstractConnector`, `Image`, `Loader`, `styled-components`, `useLingui`, `useTheme`, `UserIcon`, and `HatchEggModal`. It also imports several functions and constants from other files in the project such as `SUPPORTED_WALLETS`, `injected`, `isTransactionRecent`, `useAllTransactions`, `TransactionDetails`, `NetworkContextName`, `shortenAddress`, `useENSName`, and `useWalletModalToggle`.\n\nThe `Web3Status` component is a wrapper for the `Web3StatusInner` component, which is responsible for rendering the user's wallet status. The `Web3StatusInner` component uses the `useActiveWeb3React` hook to get the user's account and connector. If the user is connected to a wallet, it displays their account address or ENS name, along with an icon representing their wallet type. If the user has pending transactions, it displays the number of pending transactions and a loading spinner. If the user is not connected to a wallet, it displays a button to connect to a wallet.\n\nThe `Web3Status` component also renders a `WalletModal` component, which displays the user's pending and confirmed transactions and allows them to cancel pending transactions. The `WalletModal` component is only rendered if the user is connected to a wallet.\n\nOverall, the `Web3Status` component is an important part of the project's user interface, as it allows users to connect to a wallet and view their transaction status. It is used in several places throughout the project, such as in the header and footer of the website.",
- "questions": "1. What is the purpose of this code file?\n- This code file contains a React component for displaying the user's web3 status and wallet information.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, Next.js, styled-components, @lingui/macro, and @heroicons/react.\n\n3. What functionality does the `StatusIcon` function provide?\n- The `StatusIcon` function takes a `Connector` object as a prop and returns an icon component based on the type of connector. It currently supports several different types of connectors, including MetaMask, WalletConnect, Coinbase Wallet, and more.",
- "checksum": "3cb4eaa5bf25c1e2dc990ad234f4361c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/ZooItem/index.json b/.autodoc/docs/json/core/src/components/ZooItem/index.json
deleted file mode 100644
index 618dcb6b7..000000000
--- a/.autodoc/docs/json/core/src/components/ZooItem/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/components/ZooItem/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/ZooItem/index.tsx",
- "summary": "The `ZooItem` component is a React component that renders a single item in the Zoo marketplace. It takes in four props: `src`, `infoTitle`, `infoDesc`, and `authenticityPrice`. \n\nThe component is divided into two main sections: the first section displays an image of the item, along with a \"Make Offer\" button, while the second section displays information about the item, including its title, description, and details such as the transaction hash, token ID, and token standard. The second section also includes a \"Proof of Authenticity\" section, which displays the price of the item's authenticity proof, a link to the transaction on Etherscan, and a link to view the item on IPS.\n\nThe component uses several third-party libraries, including Next.js, which provides server-side rendering and other features for React applications, and the `Image` component from Next.js, which optimizes images for performance. The component also uses the `Link` component from Next.js to create links to other pages in the application.\n\nThe component is designed to be reusable, allowing it to be used to display any item in the Zoo marketplace. For example, the component could be used to display a painting, a sculpture, or a rare collectible. The component's props allow it to be customized for each item, with the `src` prop specifying the image source, the `infoTitle` prop specifying the item's title, the `infoDesc` prop specifying the item's description, and the `authenticityPrice` prop specifying the price of the item's authenticity proof.\n\nHere is an example of how the `ZooItem` component could be used in a larger project:\n\n```\nimport ZooItem from './ZooItem';\n\nconst items = [\n {\n src: '/painting.jpg',\n infoTitle: 'Mona Lisa',\n infoDesc: 'A painting by Leonardo da Vinci',\n authenticityPrice: '0.1 ETH',\n },\n {\n src: '/sculpture.jpg',\n infoTitle: 'David',\n infoDesc: 'A sculpture by Michelangelo',\n authenticityPrice: '0.2 ETH',\n },\n];\n\nfunction Marketplace() {\n return (\n My Gnosis Safe Multisig Wallet
\n\n {items.map((item) => (\n
\n );\n}\n```\n\nIn this example, the `Marketplace` component renders a list of items using the `ZooItem` component. The `items` array contains two objects, each representing an item in the marketplace. The `ZooItem` component is used to render each item, with the `src`, `infoTitle`, `infoDesc`, and `authenticityPrice` props set to the corresponding values for each item.",
- "questions": "1. What is the purpose of the `ZooItem` component?\n- The `ZooItem` component is a Next.js page component that renders a single item in the zoo.\n\n2. What props does the `ZooItem` component expect?\n- The `ZooItem` component expects four props: `src` (a string representing the image source), `infoTitle` (a string representing the title of the item), `infoDesc` (a string representing the description of the item), and `authenticityPrice` (a string representing the price of the item).\n\n3. What is the purpose of the `Link` component from Next.js?\n- The `Link` component from Next.js is used to create client-side navigation between pages in a Next.js app. In this code, it is used to create a link to the Etherscan transaction and to the IPS view of the item.",
- "checksum": "66df19f9eac1e85f7e5a00dc2966a18f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/alertMessage.json b/.autodoc/docs/json/core/src/components/alertMessage.json
deleted file mode 100644
index fbb18561e..000000000
--- a/.autodoc/docs/json/core/src/components/alertMessage.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "alertMessage.ts",
- "filePath": "core/src/components/alertMessage.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/components/alertMessage.ts",
- "summary": "The code above is a function that exports a notification system using the `react-toastify` library. The purpose of this code is to provide a simple and customizable way to display notifications to the user. \n\nThe `notify` function takes two parameters: `message` and `type`. The `message` parameter is a string that represents the message to be displayed in the notification. The `type` parameter is also a string that represents the type of notification to be displayed. The `type` parameter can be one of three values: \"error\", \"success\", or any other value, which will display an \"info\" notification.\n\nThe function uses a switch statement to determine which type of notification to display based on the `type` parameter. If the `type` parameter is \"error\", the function will display an error notification using the `toast.error` method from the `react-toastify` library. If the `type` parameter is \"success\", the function will display a success notification using the `toast.success` method. If the `type` parameter is any other value, the function will display an info notification using the `toast.info` method.\n\nThis code can be used in the larger project to provide a consistent and user-friendly way to display notifications to the user. For example, if there is an error in the application, the `notify` function can be called with the \"error\" type and an appropriate error message to alert the user. Similarly, if a task is completed successfully, the `notify` function can be called with the \"success\" type and a success message to inform the user. \n\nHere is an example of how the `notify` function can be used in a React component:\n\n```\nimport { notify } from \"./notify\";\n\nconst MyComponent = () => {\n const handleClick = () => {\n // do some task\n notify(\"Task completed successfully!\", \"success\");\n };\n\n return (\n \n );\n};\n```\n\nIn the example above, the `notify` function is imported from the `notify` file and used to display a success notification when the button is clicked and the task is completed successfully.",
- "questions": "1. What is the purpose of the `react-toastify` library and how is it being used in this code?\n - The `react-toastify` library is being used to display toast notifications. It is imported and used to display different types of notifications based on the `type` parameter passed to the `notify` function.\n2. What are the possible values for the `type` parameter in the `notify` function?\n - The possible values for the `type` parameter are \"error\", \"success\", and any other value which will result in an \"info\" notification being displayed.\n3. Are there any other functions or components in this file that are not being exported?\n - No, there are no other functions or components in this file that are not being exported. The `notify` function is the only export from this file.",
- "checksum": "009d98db6db878b41642c4d864eb5015"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/blog/articles.json b/.autodoc/docs/json/core/src/components/blog/articles.json
deleted file mode 100644
index 707c95d2f..000000000
--- a/.autodoc/docs/json/core/src/components/blog/articles.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "articles.tsx",
- "filePath": "core/src/components/blog/articles.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/components/blog/articles.tsx",
- "summary": "The code defines a React functional component called `Article` that takes in an object `article` as a prop. The `article` object has properties such as `name`, `image`, `link`, `date`, `writtenBy`, and `isNew`. The component returns a JSX element that displays the article information in a styled format.\n\nThe JSX element is a `div` with a class name of `mb-8 lg:mb-8 bg-dark-blue flex flex-col w-full max-w-sm md:max-w-lg border border-opacity-30 rounded`. This element contains two child elements: an anchor tag and a `div` with a class name of `px-4 py-8`. The anchor tag has an `href` attribute that is set to the `link` property of the `article` object. The `div` with a class name of `px-4 py-8` contains the rest of the article information.\n\nThe `div` with a class name of `mb-4 rounded overflow-hidden border-b border-opacity-30 bg-dark` contains an `Image` component from the `next/image` library. The `src` attribute of the `Image` component is set to the `image` property of the `article` object. The `width` and `height` attributes are set to `100%` and the `layout` attribute is set to `responsive`. The `objectFit` attribute is set to `contain`.\n\nThe `div` with a class name of `flex justify-between items-center mb-4` contains two child elements: a `p` tag and a `div` tag. The `p` tag displays the text \"New\" if the `isNew` property of the `article` object is `true`. Otherwise, it displays nothing. The `div` tag contains two child elements: an `Image` component and a `p` tag. The `src` attribute of the `Image` component is set to `\"/img/logo.png\"`. The `width` and `height` attributes are set to `24`. The `alt` attribute is set to an empty string. The `p` tag displays the text \"Zoo Labs\".\n\nThe `div` with a class name of `px-4 py-8` contains a `h3` tag, a `p` tag, and another `p` tag. The `h3` tag displays the `name` property of the `article` object. The `p` tag displays the text \"Written by: \" followed by the `writtenBy` property of the `article` object. The other `p` tag displays the `date` property of the `article` object.\n\nThis component can be used to display articles in a blog or news section of a website. The `Article` component can be imported into another component and passed an `article` object as a prop. Here is an example of how the `Article` component can be used:\n\n```\nimport Article from \"./Article\";\n\nconst articles = [\n {\n name: \"New article\",\n image: \"/img/article.png\",\n link: \"https://example.com/article\",\n date: \"May 1, 2022\",\n writtenBy: \"John Doe\",\n isNew: true,\n },\n {\n name: \"Another article\",\n image: \"/img/another-article.png\",\n link: \"https://example.com/another-article\",\n date: \"April 1, 2022\",\n writtenBy: \"Jane Doe\",\n isNew: false,\n },\n];\n\nconst ArticleList = () => {\n return (\n \n {articles.map((article) => (\n \n ))}\n
\n );\n};\n\nexport default ArticleList;\n```\n\nIn this example, an array of `articles` is defined. The `ArticleList` component maps over the `articles` array and renders an `Article` component for each article. The `key` prop of each `Article` component is set to the `link` property of the article object.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `Article` that displays information about an article, including its name, image, link, date, author, and whether it is new.\n\n2. What external dependencies does this code rely on?\n- This code imports two external dependencies: `react` and `next/image`.\n\n3. What is the structure of the `Props` interface and how is it used in the component?\n- The `Props` interface defines an object with properties `name`, `image`, `link`, `date`, `writtenBy`, and `isNew`, all of which are of type `string` except for `isNew`, which is of type `boolean`. This interface is used to destructure the `article` prop passed to the `Article` component, allowing the component to access the values of these properties.",
- "checksum": "85fb71e17e3f6bc254b982b127e4a431"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/components/market/marketItem.json b/.autodoc/docs/json/core/src/components/market/marketItem.json
deleted file mode 100644
index 5230d88ba..000000000
--- a/.autodoc/docs/json/core/src/components/market/marketItem.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "marketitem.json",
- "filePath": "core/src/components/market/marketitem.json",
- "url": "zoo-labs/zoo/blob/master/core/src/components/market/marketitem.json",
- "summary": "This code defines a JSON object that contains information about different animals in a zoo. Each animal is represented as a separate object within the array, with properties such as an ID, name, image, and 3D model files in both USDZ and GLB formats. Additionally, each animal has a \"type\" property that specifies whether it is an \"egg\" or an \"animal\".\n\nThis code can be used in a larger project that involves creating a virtual zoo experience. The JSON object can be used to populate a user interface that displays information about each animal, including its name, image, and 3D model. The \"type\" property can be used to categorize the animals and display them in different sections of the UI. For example, the \"egg\" animals could be displayed in an incubation section, while the \"animal\" animals could be displayed in a habitat section.\n\nHere is an example of how this code could be used in a React component:\n\n```jsx\nimport React from \"react\";\nimport animals from \"./zoo\";\n\nfunction Zoo() {\n return (\n \n
\n );\n}\n```\n\nIn this example, the `animals` array is imported from the `zoo` file and used to display information about each animal in the UI. The `filter` method is used to separate the animals into two sections based on their \"type\" property, and the `map` method is used to render each animal's name, image, and 3D model using the `Welcome to the Zoo!
\n\n
\n Egg Animals
\n {animals.filter((animal) => animal.type === \"egg\").map((animal) => (\n\n \n
\n ))}\n {animal.name}
\n\n
\n Animal Animals
\n {animals.filter((animal) => animal.type === \"animal\").map((animal) => (\n\n \n
\n ))}\n {animal.name}
\n\n \n Click me!\n \n
\n );\n};\n\nexport default MyComponent;\n```\n\nIn this example, the `getExternalLinkProps` function is used to spread the `target` and `rel` properties onto the `a` element. This ensures that the link will open in a new tab and have the appropriate security measures applied.",
- "questions": "1. What does the `getExternalLinkProps` function do?\n - The `getExternalLinkProps` function returns an object with two properties, `target` and `rel`, which are used for external links.\n\n2. Why is the `target` property set to `_blank`?\n - The `target` property is set to `_blank` to open the link in a new tab or window, instead of replacing the current page.\n\n3. What is the purpose of the `rel` property and why is it set to `noreferrer noopener`?\n - The `rel` property is used to specify the relationship between the current document and the linked document. `noreferrer` is used to prevent the browser from sending the referrer header, and `noopener` is used to prevent the new page from being able to access the window object of the previous page. This helps to improve security and privacy.",
- "checksum": "027ee9031a8373fdf2e2333f3a384495"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/config/index.json b/.autodoc/docs/json/core/src/config/index.json
deleted file mode 100644
index c7b2bdd76..000000000
--- a/.autodoc/docs/json/core/src/config/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/config/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/config/index.ts",
- "summary": "The code above is a simple configuration file for the zoo project. It imports the `ChainId` enum from the `@zoolabs/zdk` library and defines a `config` object with an empty object as its value for the `MAINNET` chain ID. \n\nThe purpose of this file is to provide a central location for storing configuration options for the zoo project. By defining the `config` object, developers can easily access and modify configuration options for the `MAINNET` chain ID throughout the project. \n\nFor example, if the project needed to define a default gas price for transactions on the `MAINNET` chain, the `config` object could be updated to include a `gasPrice` property with the desired value. This value could then be accessed throughout the project by importing the `config` object and referencing the `gasPrice` property.\n\n```\nimport config from 'zoo/config'\n\nconst gasPrice = config[ChainId.MAINNET].gasPrice || 1000000000\n```\n\nIn the example above, the `config` object is imported and the `gasPrice` property is accessed for the `MAINNET` chain ID. If the `gasPrice` property is not defined in the `config` object, a default value of `1000000000` is used.\n\nOverall, this configuration file provides a simple and flexible way for developers to manage configuration options for the zoo project.",
- "questions": "1. What is the purpose of the `ChainId` import from `@zoolabs/zdk`?\n - The `ChainId` import is likely used to define different configurations for different blockchain networks.\n2. Why is the `config` object empty for the `MAINNET` chain ID?\n - It's possible that the `config` object is intended to be populated with specific configurations for each chain ID, but has not yet been implemented for the `MAINNET` chain ID.\n3. What is the intended use of the `config` object and how is it used in the rest of the `zoo` project?\n - Without further context, it's difficult to determine the intended use of the `config` object and how it is used in the rest of the `zoo` project.",
- "checksum": "1e2c6108cc2824634bcdd3a44a4421e3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/config/oracles/chainlink/index.json b/.autodoc/docs/json/core/src/config/oracles/chainlink/index.json
deleted file mode 100644
index 136c709b7..000000000
--- a/.autodoc/docs/json/core/src/config/oracles/chainlink/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/config/oracles/chainlink/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/index.ts",
- "summary": "This code defines a mapping of Chainlink price feed addresses for various blockchain networks. The purpose of this code is to provide a centralized location for accessing the addresses of Chainlink price feeds on different networks. \n\nThe code imports mappings for different networks from separate files and defines a type for the ChainlinkPriceFeedMap object. This object contains key-value pairs where the key is the address of the Chainlink price feed and the value is an object containing information about the price feed, such as the from and to tokens, decimals, and warning messages. \n\nThe code also defines a constant CHAINLINK_PRICE_FEED_MAP, which is an object that maps ChainId values to the corresponding ChainlinkPriceFeedMap for that network. ChainId is an enum defined in the @zoolabs/zdk library that represents the different blockchain networks. \n\nThis code can be used in the larger project to easily access the addresses of Chainlink price feeds on different networks. For example, if a function in the project needs to retrieve the address of a Chainlink price feed on the BSC network, it can simply access the BSC object in the CHAINLINK_PRICE_FEED_MAP constant. \n\nExample usage:\n\n```\nimport { ChainId } from '@zoolabs/zdk'\nimport { CHAINLINK_PRICE_FEED_MAP } from './path/to/zoo'\n\nconst bscPriceFeeds = CHAINLINK_PRICE_FEED_MAP[ChainId.BSC]\nconst ethUsdPriceFeed = bscPriceFeeds['0x8AC76a51cc950d9822D68b83fE1Ad97B32Cd580d']\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a mapping of Chainlink price feed addresses for various blockchain networks.\n\n2. What is the `ChainId` type from `@zoolabs/zdk` used for?\n- The `ChainId` type is used as a key in the `CHAINLINK_PRICE_FEED_MAP` object to associate each Chainlink price feed mapping with a specific blockchain network.\n\n3. What information is included in each Chainlink price feed mapping?\n- Each mapping includes the `from` and `to` currency symbols, the number of decimals for each currency, and optional warning and address fields.",
- "checksum": "4f6295266de27275c5f7da045afc271e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/arbitrum.json b/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/arbitrum.json
deleted file mode 100644
index 579230335..000000000
--- a/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/arbitrum.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "arbitrum.ts",
- "filePath": "core/src/config/oracles/chainlink/mappings/arbitrum.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/arbitrum.ts",
- "summary": "This code defines a constant object called `ARBITRUM_CHAINLINK_MAPPING` that maps various cryptocurrency pairs to their corresponding Chainlink oracle addresses and other relevant information. The purpose of this code is to provide a centralized location for storing this mapping information, which can be used throughout the larger project to retrieve price data from the Chainlink oracle network.\n\nEach key in the object represents a unique cryptocurrency pair, and the corresponding value is an object that contains the following properties:\n- `from`: the address of the token contract for the \"from\" currency in the pair\n- `to`: the address of the token contract for the \"to\" currency in the pair\n- `decimals`: the number of decimal places used by the price feed for this pair\n- `fromDecimals`: the number of decimal places used by the \"from\" currency token contract\n- `toDecimals`: the number of decimal places used by the \"to\" currency token contract\n\nFor example, the first key-value pair in the object maps the WETH/USD pair to the Chainlink oracle address `0x82aF49447D8a07e3bd95BD0d56f35241523fBab1`. The `from` property is set to the address of the WETH token contract, `0x639Fe6ab55C921f74e7fac1ee960C0B6293ba612`, and the `to` property is set to a special \"dummy\" address that represents USD. The `decimals` property is set to 8, indicating that the price feed uses 8 decimal places, and the `fromDecimals` property is set to 18, indicating that the WETH token contract uses 18 decimal places.\n\nThis code can be used throughout the larger project to retrieve price data from the Chainlink oracle network. For example, if the project needs to retrieve the current price of WETH in USD, it can use the `ARBITRUM_CHAINLINK_MAPPING` object to look up the Chainlink oracle address for the WETH/USD pair, and then use that address to query the Chainlink price feed for the current price. By centralizing this mapping information in a single location, the project can avoid hard-coding addresses and other information throughout the codebase, which can make it easier to maintain and update the project over time.",
- "questions": "1. What is the purpose of this code?\n - This code defines a mapping of various token pairs to their corresponding Chainlink oracle addresses and decimal values.\n\n2. What tokens are included in this mapping?\n - The mapping includes WETH, WBTC, LINK, USDC, USDT, and YFI.\n\n3. What is the significance of the `to` address being set to `0x0000000000000000000000000000000000000001` for each token pair?\n - This address is the Chainlink aggregator address, which is used to retrieve the price data for the specified token pair.",
- "checksum": "c8e70410db4b1886afe6c2f6b39cbbef"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/avalanche.json b/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/avalanche.json
deleted file mode 100644
index fb4c6d09a..000000000
--- a/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/avalanche.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "avalanche.ts",
- "filePath": "core/src/config/oracles/chainlink/mappings/avalanche.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/avalanche.ts",
- "summary": "The code defines a constant object called `AVALANCHE_CHAINLINK_MAPPING` that maps various cryptocurrency pairs to their corresponding Chainlink oracle contract addresses and other relevant information. The pairs include AAVE/USD, AVAX/USD, WBTC/USD, DAI/USD, ETH/USD, LINK/USD, USDC/USD, and USDT/USD. \n\nEach pair is represented as a key-value pair in the object, where the key is the oracle contract address and the value is an object containing the following properties:\n- `from`: the address of the token contract used as the \"from\" currency in the pair\n- `to`: the address of the token contract used as the \"to\" currency in the pair\n- `decimals`: the number of decimal places used by the oracle contract to represent the price of the pair\n- `fromDecimals`: the number of decimal places used by the \"from\" token contract\n- `toDecimals`: the number of decimal places used by the \"to\" token contract\n\nThis code is likely used in the larger project to facilitate the retrieval of price data for the specified cryptocurrency pairs from the Chainlink oracle network. For example, a function in the project may use this mapping to determine which oracle contract to query for the price of a particular pair, and then use the `decimals`, `fromDecimals`, and `toDecimals` properties to properly format the retrieved price data. \n\nAn example usage of this code in a larger project could be a function that takes a cryptocurrency pair as input and returns the current price of that pair. The function could use the `AVALANCHE_CHAINLINK_MAPPING` object to determine which oracle contract to query, and then use the `decimals`, `fromDecimals`, and `toDecimals` properties to format the retrieved price data before returning it.",
- "questions": "1. What is the purpose of this code?\n This code defines a mapping of various cryptocurrency pairs to their corresponding Chainlink oracle addresses on the Avalanche network.\n\n2. What is the format of each entry in the mapping?\n Each entry is a key-value pair where the key is the oracle address and the value is an object containing information about the cryptocurrency pair, including the source and destination tokens, their respective decimal places, and the oracle's decimal place.\n\n3. What is the significance of the `to` address being set to `0x0000000000000000000000000000000000000001`?\n This address is a placeholder value that indicates the destination token is the native token of the network (in this case, Avalanche's AVAX token).",
- "checksum": "19df239c10c2c599246f33a6ffe72a24"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/heco.json b/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/heco.json
deleted file mode 100644
index 681ace3de..000000000
--- a/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/heco.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "heco.ts",
- "filePath": "core/src/config/oracles/chainlink/mappings/heco.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/heco.ts",
- "summary": "The code defines a constant object called `HECO_CHAINLINK_MAPPING` that maps certain Ethereum addresses to specific token information. Each key in the object is an Ethereum address, and each value is an object that contains information about the token associated with that address. The information includes the Ethereum address of the contract that the token is from (`from`), the Ethereum address of the contract that the token is being converted to (`to`), the number of decimal places for the token (`decimals`), the number of decimal places for the `from` token (`fromDecimals`), and the number of decimal places for the `to` token (`toDecimals`).\n\nThis code is likely used in a larger project that involves converting tokens from one type to another. The `from` and `to` addresses indicate the contracts that are involved in the conversion, and the decimal information is necessary for correctly calculating the conversion rate. This mapping could be used in a variety of contexts, such as a decentralized exchange or a token swap platform.\n\nExample usage:\n\n```\nimport HECO_CHAINLINK_MAPPING from './path/to/HECO_CHAINLINK_MAPPING.js'\n\nconst tokenAddress = '0x8a054991B803F6a6958Ba9695Cc8D366C8a30a69'\nconst tokenInfo = HECO_CHAINLINK_MAPPING[tokenAddress]\nconsole.log(tokenInfo.decimals) // outputs 8\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a mapping of addresses to objects containing various properties such as `from`, `to`, `decimals`, `fromDecimals`, and `toDecimals`.\n\n2. What is the significance of the addresses used in this code?\n- The addresses are likely related to the HECO blockchain and Chainlink, but without more context it is unclear what specific purpose they serve.\n\n3. What is the expected output or usage of this code?\n- It is unclear from this code alone what the expected output or usage is, but it is likely that this mapping will be used in other parts of the `zoo` project.",
- "checksum": "6b784ef4b5d42c92aa6968191504e08a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/kovan.json b/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/kovan.json
deleted file mode 100644
index 622ad4b66..000000000
--- a/.autodoc/docs/json/core/src/config/oracles/chainlink/mappings/kovan.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "kovan.ts",
- "filePath": "core/src/config/oracles/chainlink/mappings/kovan.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/kovan.ts",
- "summary": "The code defines a constant object called `KOVAN_CHAINLINK_MAPPING` that maps various Ethereum contract addresses to their respective Chainlink oracle addresses. Chainlink is a decentralized oracle network that provides off-chain data to smart contracts on the blockchain. \n\nThe object contains key-value pairs where the keys are Ethereum contract addresses and the values are objects containing the following properties:\n- `from`: the address of the contract that is requesting data from the Chainlink oracle\n- `to`: the address of the Chainlink oracle contract that provides the requested data\n- `decimals`: the number of decimal places used by the contract's token\n- `fromDecimals`: the number of decimal places used by the contract's token when requesting data from the oracle\n- `toDecimals`: the number of decimal places used by the oracle when providing data to the contract\n\nThis mapping is useful for developers who are building smart contracts on the Ethereum blockchain and need to retrieve data from external sources using Chainlink. By using this mapping, developers can easily look up the Chainlink oracle address for a given contract and configure their smart contract to request data from the correct oracle with the correct decimal precision.\n\nFor example, if a developer is building a smart contract that needs to retrieve the price of ETH in USD from an external source using Chainlink, they can use the `KOVAN_CHAINLINK_MAPPING` object to find the correct oracle address and decimal precision to use in their contract. \n\n```\nimport KOVAN_CHAINLINK_MAPPING from 'zoo'\n\nconst ethUsdOracleAddress = KOVAN_CHAINLINK_MAPPING['0x22B58f1EbEDfCA50feF632bD73368b2FdA96D541'].to\nconst ethUsdDecimals = KOVAN_CHAINLINK_MAPPING['0x22B58f1EbEDfCA50feF632bD73368b2FdA96D541'].toDecimals\n\n// Use ethUsdOracleAddress and ethUsdDecimals in smart contract code to request ETH/USD price data from Chainlink\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a mapping of addresses to objects that contain information about token conversions on the Kovan Chainlink network.\n\n2. What is the significance of the 'from', 'to', 'decimals', 'fromDecimals', and 'toDecimals' properties in each object?\n- The 'from' and 'to' properties represent the addresses of the tokens being converted, while the 'decimals', 'fromDecimals', and 'toDecimals' properties represent the number of decimal places used by each token.\n\n3. How might this code be used in a larger project?\n- This code could be imported into other files in the project to provide a convenient way to access information about token conversions on the Kovan Chainlink network.",
- "checksum": "1ef1f808b987f104d413385f388a72e8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/config/rpc.json b/.autodoc/docs/json/core/src/config/rpc.json
deleted file mode 100644
index e6746b43f..000000000
--- a/.autodoc/docs/json/core/src/config/rpc.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "rpc.ts",
- "filePath": "core/src/config/rpc.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/config/rpc.ts",
- "summary": "This code defines an object called `rpc` that maps different Ethereum chain IDs to their corresponding RPC (Remote Procedure Call) endpoints. The purpose of this code is to provide a centralized location for storing and accessing these endpoints, which can be used by other parts of the project to interact with the Ethereum network.\n\nThe `rpc` object is defined using ES6 object literal syntax, with each chain ID as a key and its corresponding RPC endpoint as the value. The endpoints are URLs that point to Ethereum nodes that can process requests for that particular chain. For example, the `MAINNET` chain ID maps to the `https://speedy-nodes-nyc.moralis.io/758308e03c71d6246942fad2/eth/ropsten` endpoint, which is a Moralis node that runs on the Ethereum mainnet.\n\nBy exporting this `rpc` object, other parts of the project can import it and use it to interact with the Ethereum network. For example, a smart contract deployment script might use this object to specify which chain to deploy the contract on and which endpoint to use for that chain. Here's an example of how this object might be used:\n\n```\nimport rpc from 'zoo/rpc'\n\nconst chainId = 'MAINNET'\nconst endpoint = rpc[chainId]\n\n// Use the endpoint to interact with the Ethereum network\n```\n\nIn this example, the `rpc` object is imported from the `zoo/rpc` module. The `chainId` variable is set to `'MAINNET'`, which is one of the keys in the `rpc` object. The `endpoint` variable is then set to the value of `rpc[chainId]`, which is the URL for the Ethereum mainnet endpoint. This endpoint can then be used to interact with the Ethereum network, such as by sending transactions or querying contract data.\n\nOverall, this code provides a simple and flexible way to manage Ethereum RPC endpoints for different chains in a centralized location, which can be used by other parts of the project to interact with the Ethereum network.",
- "questions": "1. What is the purpose of this code?\n- This code exports an object containing RPC URLs for various blockchain networks based on their ChainId.\n\n2. What is the `ChainId` import coming from?\n- The `ChainId` import is coming from the `@zoolabs/zdk` library.\n\n3. Why are some of the RPC URLs commented out?\n- Some of the RPC URLs are commented out because they are for networks that are not currently being used or tested in the project.",
- "checksum": "ad02481723f5653b0ea3dd6e682473ec"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/config/token-lists.json b/.autodoc/docs/json/core/src/config/token-lists.json
deleted file mode 100644
index b057ffcf0..000000000
--- a/.autodoc/docs/json/core/src/config/token-lists.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "token-lists.ts",
- "filePath": "core/src/config/token-lists.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/config/token-lists.ts",
- "summary": "This code defines a set of URLs that point to token lists used in the larger project. These token lists are used to import and search for tokens across various decentralized exchanges. The `UNSUPPORTED_LIST_URLS` constant is an array of URLs that point to lists of tokens that are not supported by the project. The `DEFAULT_LIST_OF_LISTS` constant is an array of URLs that point to token lists that are searched across by default. The order of the URLs in this array determines the priority of the token import. The `DEFAULT_ACTIVE_LIST_URLS` constant is an array of URLs that point to token lists that are actively searched across. \n\nFor example, if a user wants to import a token into the project, the project will search across the token lists in `DEFAULT_ACTIVE_LIST_URLS` to see if the token is supported. If the token is not found, the project will search across the token lists in `DEFAULT_LIST_OF_LISTS` in order of priority until the token is found or all lists have been searched. If the token is still not found, the project will search across the token lists in `UNSUPPORTED_LIST_URLS` to see if the token is unsupported. \n\nThis code is important because it allows the project to import and search for tokens across multiple decentralized exchanges. By defining a set of token lists, the project can ensure that it is searching across all relevant exchanges and can prioritize the import of tokens based on the order of the lists. \n\nExample usage:\n\n```\nimport { DEFAULT_ACTIVE_LIST_URLS, DEFAULT_LIST_OF_LISTS } from 'zoo'\n\n// search for a token across the default active lists\nconst token = 'ETH'\nconst activeLists = DEFAULT_ACTIVE_LIST_URLS\nfor (const list of activeLists) {\n const tokens = await fetch(list).then((res) => res.json())\n if (tokens.includes(token)) {\n console.log(`${token} found in ${list}`)\n break\n }\n}\n\n// search for a token across the default lists of lists\nconst listsOfLists = DEFAULT_LIST_OF_LISTS\nfor (const list of listsOfLists) {\n const tokens = await fetch(list).then((res) => res.json())\n if (tokens.includes(token)) {\n console.log(`${token} found in ${list}`)\n break\n }\n}\n```",
- "questions": "1. What is the purpose of the `UNSUPPORTED_LIST_URLS` array?\n- The `UNSUPPORTED_LIST_URLS` array is used to mark unsupported tokens and contains a single URL to a list of unsupported tokens from the Blockchain Association.\n\n2. What is the difference between `DEFAULT_LIST_OF_LISTS` and `DEFAULT_ACTIVE_LIST_URLS`?\n- `DEFAULT_LIST_OF_LISTS` is an array of token list URLs that are searched across in order of priority, while `DEFAULT_ACTIVE_LIST_URLS` is an array of token list URLs that are considered 'active' and always searched across.\n\n3. What is the significance of the `OPTIMISM_LIST` constant?\n- The `OPTIMISM_LIST` constant is a URL to a token list that is included in the `DEFAULT_LIST_OF_LISTS` array and is searched across for token imports.",
- "checksum": "606e11599e8ccc9a3f55b20d5c7981c6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/config/types.json b/.autodoc/docs/json/core/src/config/types.json
deleted file mode 100644
index 9710c4151..000000000
--- a/.autodoc/docs/json/core/src/config/types.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "types.ts",
- "filePath": "core/src/config/types.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/config/types.ts",
- "summary": "The code above defines an interface called `Config` that specifies the properties of a connector configuration object. This object is used to configure a web3 connector that allows a user to interact with a blockchain network. The `Config` interface has five properties:\n\n1. `title`: a string that represents the name of the connector.\n2. `icon`: a React functional component that renders an SVG icon for the connector.\n3. `connectorId`: a string that represents the unique identifier of the connector.\n4. `connector`: an instance of the `AbstractConnector` class that represents the actual connector implementation.\n5. `color`: a string that represents the color associated with the connector.\n\nThe `AbstractConnector` class is imported from the `@web3-react/abstract-connector` package, which provides an abstract base class for implementing web3 connectors. The `FC` type is imported from the `react` package and is used to define the `icon` property of the `Config` interface.\n\nThe `SvgProps` type is imported from a file located in the `../components` directory and is used as a prop type for the `icon` property of the `Config` interface. The `ConnectorNames` type is imported from a file located in the `../constants/types` directory and is used as the type for the `connectorId` property of the `Config` interface.\n\nOverall, this code defines a configuration object that is used to configure a web3 connector for interacting with a blockchain network. The `Config` interface specifies the properties of this object, including the name, icon, unique identifier, implementation, and color of the connector. This configuration object is likely used in other parts of the `zoo` project to instantiate and configure web3 connectors for interacting with different blockchain networks. \n\nExample usage:\n\n```typescript\nimport { Config } from \"./config\";\n\nconst myConfig: Config = {\n title: \"My Connector\",\n icon: MyIconComponent,\n connectorId: \"my-connector\",\n connector: new MyConnector(),\n color: \"#123456\"\n};\n```",
- "questions": "1. What is the purpose of this code file within the `zoo` project?\n- This code file defines an interface called `Config` and imports various dependencies for the `zoo` project.\n\n2. What is the `AbstractConnector` and `ConnectorNames` being used for?\n- The `AbstractConnector` and `ConnectorNames` are being used as types for the `connector` and `connectorId` properties in the `Config` interface.\n\n3. What is the `icon` property in the `Config` interface?\n- The `icon` property is a React functional component that takes in `SvgProps` as its props and is used to display an icon associated with the connector in the `zoo` project.",
- "checksum": "4fdd4323466fa66f887a55866f27a7f3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/config/wallets.json b/.autodoc/docs/json/core/src/config/wallets.json
deleted file mode 100644
index 1ad6d3736..000000000
--- a/.autodoc/docs/json/core/src/config/wallets.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "wallets.ts",
- "filePath": "core/src/config/wallets.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/config/wallets.ts",
- "summary": "This code defines a set of connectors for various wallets that can be used to interact with the Zoo project. The code imports the `AbstractConnector` class from the `@web3-react/abstract-connector` library, which is used as a base class for the wallet connectors. It also imports the `ChainId` enum from the `@zoolabs/zdk` library, which is used to specify the chain ID for the RPC URLs.\n\nThe code defines several wallet connectors, including `injected`, `metaMask`, `walletConnect`, `coinbaseWallet`, and `Binance`. Each connector is defined as an instance of a connector class, such as `InjectedConnector` or a custom connector class. The `supportedChainIds` variable is defined as an array of chain IDs that are supported by the Zoo project.\n\nThe `SUPPORTED_WALLETS` object defines a set of wallet connectors that are supported by the Zoo project. Each wallet connector is defined as an object with properties such as `connector`, `name`, `iconName`, `description`, `href`, `color`, `primary`, `mobile`, and `mobileOnly`. The `connector` property is a reference to the connector instance for the wallet. The `name` property is the name of the wallet. The `iconName` property is the name of the icon file for the wallet. The `description` property is a brief description of the wallet. The `href` property is a URL for the wallet. The `color` property is a hex code for the color of the wallet. The `primary` property is a boolean that indicates whether the wallet is the primary wallet. The `mobile` property is a boolean that indicates whether the wallet is available on mobile devices. The `mobileOnly` property is a boolean that indicates whether the wallet is only available on mobile devices.\n\nThis code can be used in the larger Zoo project to provide users with a set of wallet connectors that they can use to interact with the project. For example, the `SUPPORTED_WALLETS` object can be used to display a list of supported wallets on a web page or in a mobile app. The `connector` property of each wallet object can be used to connect to the wallet and interact with the Zoo project. For example, the `metaMask` connector can be used to connect to the MetaMask wallet and interact with the Zoo project using the MetaMask browser extension. Similarly, the `walletConnect` connector can be used to connect to the WalletConnect app and interact with the Zoo project on a mobile device.",
- "questions": "1. What is the purpose of this code?\n- This code defines various web3 connectors for different wallets and networks.\n\n2. What is the difference between `metaMask` and `walletConnect` connectors?\n- `metaMask` is a connector for the MetaMask browser extension, while `walletConnect` is a connector for various mobile wallets such as Trust Wallet and Rainbow Wallet.\n\n3. Why are some parts of the code commented out?\n- It is possible that these parts of the code were previously used but are no longer needed, or they may be under development and not yet ready for use.",
- "checksum": "85e5159c9bdf142b1d82d572952afa5d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/connectors/coinbaseWallet.json b/.autodoc/docs/json/core/src/connectors/coinbaseWallet.json
deleted file mode 100644
index e91ca8237..000000000
--- a/.autodoc/docs/json/core/src/connectors/coinbaseWallet.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "coinbaseWallet.ts",
- "filePath": "core/src/connectors/coinbaseWallet.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/connectors/coinbaseWallet.ts",
- "summary": "This code imports the `CoinbaseWallet` class from the `@web3-react/coinbase-wallet` package and the `initializeConnector` function from the `@web3-react/core` package. It also imports the `URLS` object from the `config/chains` file.\n\nThe purpose of this code is to initialize a connector for the Coinbase Wallet, which is a cryptocurrency wallet that can be used to interact with the Ethereum blockchain. The `initializeConnector` function takes a generic type parameter of `CoinbaseWallet`, which is passed as an argument to the function. The function returns an array containing an instance of the `CoinbaseWallet` class and a set of hooks that can be used to interact with the wallet.\n\nThe `CoinbaseWallet` class takes two arguments: `actions` and an object containing the `url` and `appName` properties. The `actions` argument is an object that contains methods for interacting with the Ethereum blockchain, such as `getChainId` and `getAccount`. The `url` property is set to the first URL in the `URLS` array, which is an array of arrays containing URLs for different Ethereum networks. The `appName` property is set to `'web3-react'`.\n\nThis code can be used in the larger project to enable users to connect their Coinbase Wallet to the Ethereum blockchain and interact with smart contracts. For example, the `coinbaseWallet` instance can be passed to the `useWeb3React` hook from the `@web3-react/core` package to provide access to the user's Ethereum account and enable them to sign transactions. \n\nExample usage:\n\n```\nimport { useWeb3React } from '@web3-react/core'\nimport { coinbaseWallet } from 'zoo'\n\nfunction MyComponent() {\n const { account, library } = useWeb3React()\n \n async function signTransaction() {\n const signer = library.getSigner(account)\n const tx = await signer.sendTransaction({ to: '0x...', value: 100 })\n console.log(tx.hash)\n }\n \n return (\n \n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n This code initializes a connector for the Coinbase Wallet using the `@web3-react` library and sets the URL and app name for the wallet.\n\n2. What is the significance of the `URLS` variable from the `config/chains` module?\n The `URLS` variable likely contains an array of URLs for different blockchain networks, and this code is using the URL at index 1, position 0 for the Coinbase Wallet connection.\n\n3. What other connectors can be initialized using the `initializeConnector` function?\n The `initializeConnector` function can be used to initialize connectors for other wallets or blockchain providers, as long as they are compatible with the `@web3-react` library.",
- "checksum": "423d6763ab39f9bf2430c0b0585b366b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/connectors/eip1193.json b/.autodoc/docs/json/core/src/connectors/eip1193.json
deleted file mode 100644
index 0589fdef1..000000000
--- a/.autodoc/docs/json/core/src/connectors/eip1193.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "eip1193.ts",
- "filePath": "core/src/connectors/eip1193.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/connectors/eip1193.ts",
- "summary": "This code is a part of a larger project called \"zoo\" and it imports several packages from the ethers.js and web3-react libraries. The purpose of this code is to initialize a connector for the EIP-1193 standard, which is an interface for interacting with Ethereum smart contracts. \n\nThe code first creates an instance of the `Eip1193Bridge` class from the `@ethersproject/experimental` package and a `JsonRpcProvider` instance from the `@ethersproject/providers` package. It then creates a new class called `Eip1193BridgeWithoutAccounts` that extends the `Eip1193Bridge` class and overrides the `request` method. This method checks if the requested method is either \"eth_requestAccounts\" or \"eth_accounts\" and returns an empty array if it is. Otherwise, it calls the `request` method of the parent class.\n\nNext, the code creates an instance of the `Eip1193BridgeWithoutAccounts` class using the `JsonRpcProvider` instance and gets a signer from it. Finally, it calls the `initializeConnector` function from the `@web3-react/core` package to create a connector for the EIP-1193 standard. This function takes a callback function that creates a new instance of the `EIP1193` class from the `@web3-react/eip1193` package and passes it the `actions` and `eip1193Provider` parameters. It also takes an array of chain IDs, which in this case is `[1]` for the Ethereum mainnet.\n\nThe resulting connector is an array that contains two elements: the `eip1193` object and the `hooks` object. The `eip1193` object is an instance of the `EIP1193` class that can be used to interact with Ethereum smart contracts using the EIP-1193 standard. The `hooks` object contains several hooks that can be used to access the `eip1193` object and its properties in a React component.\n\nHere is an example of how this code might be used in a larger project:\n\n```javascript\nimport { useWeb3React } from \"@web3-react/core\";\n\nfunction MyComponent() {\n const { active, error, account, library } = useWeb3React();\n\n async function getBalance() {\n const balance = await library.getBalance(account);\n console.log(`Balance: ${balance.toString()}`);\n }\n\n return (\n \n {active ? (\n \n ) : (\n
\n );\n}\n```\n\nIn this example, the `useWeb3React` hook from the `@web3-react/core` package is used to access the `eip1193` object and its properties in a React component. The `getBalance` function uses the `library` property to call the `getBalance` method of the Ethereum provider and logs the result to the console. The `active` and `error` properties are used to conditionally render a button or an error message based on whether the user is connected to a wallet or not.",
- "questions": "1. What libraries are being imported in this code?\n- The code is importing `Eip1193Bridge` from `@ethersproject/experimental`, `JsonRpcProvider` from `@ethersproject/providers`, `initializeConnector` from `@web3-react/core`, and `EIP1193` from `@web3-react/eip1193`.\n\n2. What is the purpose of the `Eip1193BridgeWithoutAccounts` class?\n- The `Eip1193BridgeWithoutAccounts` class extends the `Eip1193Bridge` class and overrides the `request` method to return an empty array if the method is either \"eth_requestAccounts\" or \"eth_accounts\". This is likely done to prevent the user from accessing account information.\n\n3. What is the purpose of the `initializeConnector` function and what does it return?\n- The `initializeConnector` function takes a callback function that creates a new instance of `EIP1193` and an array of chain IDs. It returns an array with two elements: the `eip1193` object and a `hooks` object that contains various hooks for interacting with the `eip1193` object.",
- "checksum": "35cf625485342a244f14fdc99a8854d1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/connectors/empty.json b/.autodoc/docs/json/core/src/connectors/empty.json
deleted file mode 100644
index 894afae98..000000000
--- a/.autodoc/docs/json/core/src/connectors/empty.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "empty.ts",
- "filePath": "core/src/connectors/empty.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/connectors/empty.ts",
- "summary": "The code above is a module that initializes a connector for the Web3 React library. The purpose of this code is to provide a way to connect to a Web3 provider, which is necessary for interacting with the Ethereum blockchain. \n\nThe `initializeConnector` function is imported from the `@web3-react/core` library, which is a core component of the Web3 React library. This function takes a generic type parameter, which in this case is `Empty`. The `Empty` type is imported from the `@web3-react/empty` library, which is a package that provides an empty connector implementation. \n\nThe `empty` constant is then exported, which is an instance of the `Empty` connector. This connector is used when there is no Web3 provider available, which can happen if the user is not logged into a wallet or if the wallet does not support Web3. \n\nThe `hooks` constant is also exported, which is an object that contains various hooks that can be used to interact with the Web3 provider. These hooks include `useWeb3React`, which is a hook that provides access to the current Web3 provider and account, and `useEagerConnect`, which is a hook that attempts to connect to the Web3 provider as soon as possible. \n\nOverall, this module provides a way to initialize a connector for the Web3 React library, which is necessary for interacting with the Ethereum blockchain. The `empty` connector is used when there is no Web3 provider available, and the `hooks` object provides various hooks that can be used to interact with the Web3 provider. \n\nExample usage:\n\n```javascript\nimport { empty, hooks } from 'zoo'\n\n// Use the empty connector if there is no Web3 provider available\nconst connector = hooks.useWeb3React() || empty\n\n// Use the connector to interact with the Ethereum blockchain\nconst provider = connector.getProvider()\nconst signer = connector.getSigner()\n```",
- "questions": "1. What is the purpose of the `initializeConnector` function and how does it work?\n- The `initializeConnector` function is used to initialize a connector for the Web3 React library. It takes a generic type parameter and a callback function that returns an instance of the generic type.\n\n2. What is the `Empty` type and how is it used in this code?\n- The `Empty` type is a type definition from the `@web3-react/empty` package. It is used as the generic type parameter for the `initializeConnector` function to specify the type of connector being initialized.\n\n3. What is the significance of the `empty` and `hooks` variables being exported from this module?\n- The `empty` variable is the instance of the `Empty` type returned by the `initializeConnector` function. The `hooks` variable contains the Web3 React hooks that can be used to interact with the initialized connector. Exporting these variables allows other modules to use them in their own code.",
- "checksum": "4d674a7a23ce51327b369d5fdfd29765"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/connectors/index.json b/.autodoc/docs/json/core/src/connectors/index.json
deleted file mode 100644
index 6fec80124..000000000
--- a/.autodoc/docs/json/core/src/connectors/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/connectors/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/connectors/index.ts",
- "summary": "This code defines several Web3 connectors for different blockchain networks. These connectors allow users to interact with the blockchain using their wallets. The connectors are defined using different libraries such as `@binance-chain/bsc-connector`, `@web3-react/injected-connector`, `@web3-react/portis-connector`, `@web3-react/torus-connector`, `@web3-react/walletconnect-connector`, and `@web3-react/walletlink-connector`. \n\nThe RPC object contains the URLs for different blockchain networks. The supportedChainIds array contains the chain IDs for different blockchain networks. The connectors are defined for different blockchain networks such as Ethereum mainnet, Binance Smart Chain, Avalanche, and others. \n\nThe `injected` connector is used to connect to the user's wallet using the `@web3-react/injected-connector` library. The `walletconnect` connector is used to connect to the user's wallet using the WalletConnect protocol. The `fortmatic` connector is used to connect to the user's wallet using the Fortmatic library. The `portis` connector is used to connect to the user's wallet using the Portis library. The `walletlink` connector is used to connect to the user's wallet using the WalletLink library. The `torus` connector is used to connect to the user's wallet using the Torus library. The `binance` connector is used to connect to the user's wallet using the Binance Chain library.\n\nThese connectors can be used in the larger project to allow users to interact with the blockchain using their wallets. For example, the `injected` connector can be used to connect to the user's MetaMask wallet, while the `walletconnect` connector can be used to connect to the user's Trust Wallet. The `fortmatic` connector can be used to connect to the user's Fortmatic wallet, while the `portis` connector can be used to connect to the user's Portis wallet. The `walletlink` connector can be used to connect to the user's Coinbase Wallet, while the `torus` connector can be used to connect to the user's Torus wallet. The `binance` connector can be used to connect to the user's Binance Chain wallet. \n\nExample usage of the `injected` connector:\n\n```\nimport { useWeb3React } from '@web3-react/core';\nimport { injected } from './path/to/connectors';\n\nfunction App() {\n const { activate, active } = useWeb3React();\n\n const connectWallet = () => {\n activate(injected);\n };\n\n return (\n {error ? error.message : \"Connect your wallet\"}
\n )}\n \n {active ? (\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code imports various connectors for different blockchain networks and defines RPC URLs for each network.\n\n2. What is the significance of the `supportedChainIds` array?\n- The `supportedChainIds` array lists the chain IDs that are supported by the `InjectedConnector` and other connectors.\n\n3. Why are some connectors only available for the mainnet?\n- Some connectors, such as `WalletConnectConnector`, `FortmaticConnector`, `PortisConnector`, `WalletLinkConnector`, and `TorusConnector`, are only available for the mainnet because they are designed for use with Ethereum and not other blockchain networks.",
- "checksum": "26200804908d07ca4312f0f9968d088a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/connectors/metaMask.json b/.autodoc/docs/json/core/src/connectors/metaMask.json
deleted file mode 100644
index 40e7a69a2..000000000
--- a/.autodoc/docs/json/core/src/connectors/metaMask.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "metaMask.ts",
- "filePath": "core/src/connectors/metaMask.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/connectors/metaMask.ts",
- "summary": "The code above is importing two modules from the '@web3-react' library: 'initializeConnector' and 'MetaMask'. The purpose of this code is to initialize the MetaMask connector for the Web3 React library. \n\nThe 'initializeConnector' function is used to create a connector instance for a specific Web3 provider. In this case, it is being used to create a connector for the MetaMask provider. The 'MetaMask' module is a class that provides an implementation of the Web3 provider interface for the MetaMask browser extension. \n\nThe code is using the 'initializeConnector' function to create an instance of the 'MetaMask' class and passing in a callback function that will be used to handle any actions that need to be performed by the connector. The resulting instance is then exported as 'metaMask'. \n\nThe 'hooks' variable is also being exported, which is an object containing various hooks that can be used to interact with the MetaMask connector. These hooks include 'useEagerConnect', 'useInactiveListener', and 'useMetaMask'. \n\nThis code can be used in the larger project to provide a way for users to connect to the Ethereum network using the MetaMask browser extension. For example, if the project has a feature that requires interaction with a smart contract on the Ethereum network, the MetaMask connector can be used to provide the necessary connection. \n\nHere is an example of how this code could be used in a React component:\n\n```\nimport { useWeb3React } from '@web3-react/core';\nimport { metaMask } from './zoo';\n\nfunction MyComponent() {\n const { activate, deactivate, active } = useWeb3React();\n\n const connectToMetaMask = async () => {\n await activate(metaMask);\n }\n\n const disconnectFromMetaMask = async () => {\n await deactivate();\n }\n\n return (\n Wallet connected
\n ) : (\n \n )}\n\n {active ? (\n \n ) : (\n \n )}\n
\n );\n}\n```\n\nIn this example, the 'metaMask' instance created in the 'zoo' file is being passed to the 'activate' function from the 'useWeb3React' hook to connect to the MetaMask provider. The 'deactivate' function can be used to disconnect from the provider. The 'active' variable is used to determine whether the user is currently connected to the provider.",
- "questions": "1. What is the purpose of the `initializeConnector` function and how does it work?\n- The `initializeConnector` function is used to initialize a connector for the Web3 React library. It takes in a generic type parameter and a callback function that creates a new instance of the connector. In this case, the generic type is `MetaMask` and the callback function creates a new instance of the `MetaMask` connector with the provided `actions`.\n\n2. What is the `MetaMask` import and how does it relate to the `@web3-react/metamask` package?\n- The `MetaMask` import is a class that represents the MetaMask connector for the Web3 React library. It is imported from the `@web3-react/metamask` package, which provides the implementation for the MetaMask connector.\n\n3. What is the purpose of the `metaMask` and `hooks` variables and how are they used?\n- The `metaMask` variable is an instance of the `MetaMask` connector that has been initialized with the provided `actions`. The `hooks` variable is an object that contains various hooks for interacting with the `metaMask` connector, such as `useEagerConnect` and `useInactiveListener`. These variables can be used to integrate the MetaMask connector into a React application.",
- "checksum": "6b473d0535e4047e7317207a7a4b4465"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/connectors/network.json b/.autodoc/docs/json/core/src/connectors/network.json
deleted file mode 100644
index 7ac49a554..000000000
--- a/.autodoc/docs/json/core/src/connectors/network.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "network.ts",
- "filePath": "core/src/connectors/network.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/connectors/network.ts",
- "summary": "The code above is responsible for initializing a connector for the Web3 React library, specifically for the Network component. The purpose of this code is to provide a way for the application to connect to different Ethereum networks, such as the mainnet or testnets, and interact with smart contracts and other decentralized applications.\n\nThe code imports the necessary modules from the Web3 React library and the configuration file for the different network URLs. It then uses the `initializeConnector` function to create a new instance of the `Network` component, passing in an object with the necessary actions and the URLS configuration. The `Object.keys(URLS).map((chainId) => Number(chainId))` code maps over the keys of the URLS object and converts them to numbers, which are then passed as an array to the `initializeConnector` function.\n\nThe resulting `network` object and `hooks` array can then be used in the larger project to interact with the Ethereum networks. For example, the `network` object can be used to get the current network ID, check if the user is connected to the network, and switch between different networks. The `hooks` array provides access to various hooks that can be used to interact with the network, such as `useBlockNumber` to get the current block number or `useEthers` to get access to the Ethereum provider.\n\nHere is an example of how this code might be used in a larger project:\n\n```javascript\nimport { network, hooks } from 'zoo'\n\n// check if user is connected to the network\nif (network.active) {\n console.log(`Connected to network ${network.chainId}`)\n}\n\n// switch to a different network\nnetwork.switchTo('ropsten')\n\n// get the current block number\nconst blockNumber = hooks.useBlockNumber()\n\n// interact with a smart contract\nconst contract = new ethers.Contract(address, abi, provider)\nconst result = await contract.someFunction()\n``` \n\nOverall, this code provides an essential component for connecting to Ethereum networks and interacting with decentralized applications in the larger project.",
- "questions": "1. What is the purpose of the `initializeConnector` function and how does it work?\n- The `initializeConnector` function is used to initialize a connector for a specific network. It takes in a function that creates a new instance of the network class and an array of chain IDs to support.\n\n2. What is the `Network` class and what does it do?\n- The `Network` class is a class from the `@web3-react/network` library that provides a way to connect to a specific Ethereum network. It takes in a set of actions and a URL for the network.\n\n3. What is the `URLS` object and where is it defined?\n- The `URLS` object is a configuration object that contains URLs for different Ethereum networks. It is defined in a file located at `config/chains`.",
- "checksum": "a88650385138139b89298b105b5f0f8b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/connectors/url.json b/.autodoc/docs/json/core/src/connectors/url.json
deleted file mode 100644
index 1afec0d3d..000000000
--- a/.autodoc/docs/json/core/src/connectors/url.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "url.ts",
- "filePath": "core/src/connectors/url.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/connectors/url.ts",
- "summary": "The code above is a module that initializes a Web3 connector for the Zoo project. The Web3 connector is a library that allows the project to interact with the Ethereum blockchain. \n\nThe code imports two libraries: `@web3-react/core` and `@web3-react/url`. The `@web3-react/core` library provides the core functionality for the Web3 connector, while `@web3-react/url` provides a specific implementation of the connector that uses a URL to connect to the Ethereum network. \n\nThe code also imports a configuration file called `config/chains`, which contains a list of URLs for different Ethereum networks. \n\nThe `initializeConnector` function is called with two arguments: a generic type `Url` and a callback function that creates a new instance of the `Url` class. The `Url` class is provided by the `@web3-react/url` library and represents a Web3 connector that uses a URL to connect to the Ethereum network. \n\nThe callback function takes two arguments: `actions` and `URLS[1][0]`. The `actions` argument is an object that contains methods for interacting with the Ethereum network, such as sending transactions and querying balances. The `URLS[1][0]` argument is a URL string that specifies the Ethereum network to connect to. \n\nThe `initializeConnector` function returns an array with two elements: `url` and `hooks`. The `url` element is an instance of the `Url` class that was created by the callback function. The `hooks` element is an object that contains methods for interacting with the `Url` instance. \n\nThis module can be used in other parts of the Zoo project to interact with the Ethereum network. For example, the `url` instance can be passed to other Web3 libraries to send transactions or query balances. The `hooks` object can be used to access the methods provided by the `Url` class, such as `useEphemeralKey` and `useAccount`. \n\nHere is an example of how this module might be used in another part of the Zoo project:\n\n```\nimport { url } from 'zoo/web3'\n\nconst balance = await url.getBalance('0x1234567890123456789012345678901234567890')\nconsole.log(`Balance: ${balance}`)\n```\n\nIn this example, the `url` instance is imported from the `zoo/web3` module and used to query the balance of an Ethereum address. The `getBalance` method is provided by the `Url` class and returns the balance of the specified address. The balance is then logged to the console.",
- "questions": "1. What is the purpose of the `initializeConnector` function and how does it work?\n- The `initializeConnector` function is used to initialize a connector for a specific blockchain network. It takes in a generic type parameter and a callback function that creates a new instance of the connector. The resulting array contains the connector instance and a set of hooks for interacting with it.\n\n2. What is the `Url` class and where does it come from?\n- The `Url` class is a connector implementation for connecting to a blockchain network via a URL. It is imported from the `@web3-react/url` package.\n\n3. What is the `URLS` constant and how is it used in this code?\n- The `URLS` constant is a configuration object that contains URLs for various blockchain networks. It is imported from the `config/chains` module and used to provide the URL for the `Url` connector instance created in the callback function passed to `initializeConnector`. In this case, the URL for the second network in the `URLS` array is used.",
- "checksum": "f141f1ffb570953a2cf46b5432a0311d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/connectors/walletConnect.json b/.autodoc/docs/json/core/src/connectors/walletConnect.json
deleted file mode 100644
index 8accf253c..000000000
--- a/.autodoc/docs/json/core/src/connectors/walletConnect.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "walletConnect.ts",
- "filePath": "core/src/connectors/walletConnect.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/connectors/walletConnect.ts",
- "summary": "The code above is a module that initializes a connector for the WalletConnect wallet using the Web3 React library. The purpose of this code is to provide a way for users to connect their WalletConnect wallet to the zoo project and interact with the Ethereum blockchain.\n\nThe code imports the `initializeConnector` function from the `@web3-react/core` library and the `WalletConnect` class from the `@web3-react/walletconnect` library. It also imports the `URLS` object from the `config/chains` file.\n\nThe `initializeConnector` function takes two arguments: a function that creates a new instance of the `WalletConnect` class and an array of chain IDs. The function that creates a new instance of the `WalletConnect` class takes an `actions` object and an object with an `rpc` property set to the `URLS` object imported earlier. The `actions` object is used to interact with the Web3 React library and the `rpc` property is used to specify the Ethereum RPC endpoint to use.\n\nThe `Object.keys(URLS).map((chainId) => Number(chainId))` expression creates an array of chain IDs by converting the keys of the `URLS` object to numbers.\n\nThe `initializeConnector` function returns an array with two elements: the `WalletConnect` instance and an object with hooks that can be used to interact with the `WalletConnect` instance.\n\nThis code can be used in the larger zoo project to provide users with a way to connect their WalletConnect wallet to the project and interact with the Ethereum blockchain. For example, the `walletConnect` instance can be used to send transactions or read data from the blockchain. The hooks can be used to subscribe to events or get the current state of the `WalletConnect` instance.\n\nExample usage:\n\n```\nimport { walletConnect, hooks } from 'zoo'\n\n// Connect to the WalletConnect wallet\nwalletConnect.connect()\n\n// Subscribe to the \"accountsChanged\" event\nhooks.useWalletConnectAccounts((accounts) => {\n console.log('Accounts changed:', accounts)\n})\n\n// Send a transaction\nconst txHash = await walletConnect.sendTransaction({\n to: '0x123...',\n value: '1000000000000000000',\n})\nconsole.log('Transaction sent:', txHash)\n```",
- "questions": "1. What is the purpose of the `initializeConnector` function and how is it used in this code?\n - The `initializeConnector` function is used to create a new instance of the `WalletConnect` class and initialize it with the specified `rpc` URLS. It returns an array containing the `walletConnect` instance and `hooks` object for interacting with the `WalletConnect` instance.\n\n2. What is the `WalletConnect` class and what does it do?\n - The `WalletConnect` class is a class provided by the `@web3-react/walletconnect` package that allows for connecting to a wallet using the WalletConnect protocol. It provides methods for connecting, disconnecting, and interacting with the connected wallet.\n\n3. What is the `URLS` constant and how is it used in this code?\n - The `URLS` constant is an object containing URLs for different blockchain networks. It is used to specify the `rpc` URL when initializing the `WalletConnect` instance. The `Object.keys(URLS).map((chainId) => Number(chainId))` expression is used to extract the chain IDs from the `URLS` object and convert them to numbers, which are then passed to the `initializeConnector` function.",
- "checksum": "164f3429ec8a06f04889c6b6029603e9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/argent-wallet-detector.json b/.autodoc/docs/json/core/src/constants/abis/argent-wallet-detector.json
deleted file mode 100644
index 83aa8d085..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/argent-wallet-detector.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "argent-wallet-detector.ts",
- "filePath": "core/src/constants/abis/argent-wallet-detector.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/argent-wallet-detector.ts",
- "summary": "This code exports two constants related to the Argent Wallet Detector. The first constant, `ARGENT_WALLET_DETECTOR_ABI`, imports the ABI (Application Binary Interface) from a JSON file located in the same directory. The ABI is a standardized way of defining the interface for a smart contract on the Ethereum blockchain. In this case, the ABI is for the Argent Wallet Detector contract.\n\nThe second constant, `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS`, is a string that represents the Ethereum address of the Argent Wallet Detector contract on the Ethereum mainnet. This address is used to interact with the contract and call its functions.\n\nThis code is likely used in other parts of the larger project to interact with the Argent Wallet Detector contract. For example, if the project has a feature that requires detecting whether a given Ethereum address is an Argent wallet, it could use the `ARGENT_WALLET_DETECTOR_ABI` to call the `isWallet(address)` function on the contract at the `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS`. \n\nHere is an example of how this code could be used in a larger project:\n\n```\nimport { ARGENT_WALLET_DETECTOR_ABI, ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS } from './zoo/argent-wallet-detector'\n\nconst web3 = new Web3(provider)\n\nconst argentWalletDetectorContract = new web3.eth.Contract(ARGENT_WALLET_DETECTOR_ABI, ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS)\n\nconst isArgentWallet = async (address) => {\n const result = await argentWalletDetectorContract.methods.isWallet(address).call()\n return result\n}\n\nconst address = '0x123abc...'\nconst isWallet = await isArgentWallet(address)\nconsole.log(`Is ${address} an Argent wallet? ${isWallet}`)\n```\n\nIn this example, the code imports the `ARGENT_WALLET_DETECTOR_ABI` and `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS` constants from the `zoo/argent-wallet-detector` module. It then creates a new instance of the `web3.eth.Contract` class using the ABI and mainnet address. Finally, it defines an `isArgentWallet` function that calls the `isWallet` function on the contract and returns the result. The function is then called with a sample Ethereum address and the result is logged to the console.",
- "questions": "1. What is the purpose of the `ARGENT_WALLET_DETECTOR_ABI` import?\n - The `ARGENT_WALLET_DETECTOR_ABI` import is likely used to access the ABI (Application Binary Interface) for the Argent Wallet Detector contract, which defines how to interact with the contract's functions and data.\n\n2. What is the significance of the `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS` constant?\n - The `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS` constant likely represents the Ethereum mainnet address of the Argent Wallet Detector contract, which is used to interact with the contract on the Ethereum blockchain.\n\n3. How are the exported constants used in the `zoo` project?\n - It is unclear from this code snippet how the exported constants are used in the `zoo` project, but they may be used to interact with the Argent Wallet Detector contract in some way. Further context would be needed to determine their exact usage.",
- "checksum": "7b2be6e6b8cafd1db16702ec20236140"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/argent-wallet.json b/.autodoc/docs/json/core/src/constants/abis/argent-wallet.json
deleted file mode 100644
index bc2c25c15..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/argent-wallet.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "argent-wallet.json",
- "filePath": "core/src/constants/abis/argent-wallet.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/argent-wallet.json",
- "summary": "This code defines two functions, `wc_multiCall` and `isValidSignature`, which are likely part of a larger project involving smart contracts on the Ethereum blockchain. \n\nThe `wc_multiCall` function takes in an array of transaction tuples, each containing an address, a uint256 value, and a bytes data field. The function then executes all of these transactions in a single function call, returning an array of bytes containing the results of each transaction. This is a useful optimization for cases where multiple transactions need to be executed in a single block, as it reduces the number of individual function calls and can save on gas costs. \n\nHere is an example of how `wc_multiCall` might be used in a larger project:\n\n```\n// create an array of transaction tuples\nlet transactions = [\n {\n to: \"0x123abc...\",\n value: 100,\n data: \"0xabcdef...\"\n },\n {\n to: \"0x456def...\",\n value: 50,\n data: \"0x789ghi...\"\n }\n]\n\n// call wc_multiCall with the transactions array\nlet results = await contract.wc_multiCall(transactions);\n\n// process the results of each transaction\nfor (let i = 0; i < results.length; i++) {\n console.log(\"Transaction \" + i + \" result: \" + results[i]);\n}\n```\n\nThe `isValidSignature` function takes in a message hash and a signature, and returns a bytes4 value indicating whether the signature is valid for the given message. This is likely used for authentication purposes, to ensure that only authorized parties can execute certain functions within the smart contract. \n\nHere is an example of how `isValidSignature` might be used in a larger project:\n\n```\n// create a message hash and a signature\nlet messageHash = web3.utils.sha3(\"Hello, world!\");\nlet signature = \"0x123456...\";\n\n// call isValidSignature with the message hash and signature\nlet isValid = await contract.isValidSignature(messageHash, signature);\n\n// check the result of the signature validation\nif (isValid == \"0x1626ba7e\") {\n console.log(\"Signature is valid!\");\n} else {\n console.log(\"Signature is invalid.\");\n}\n```\n\nOverall, these functions provide useful functionality for interacting with smart contracts on the Ethereum blockchain, and can be used to optimize transaction execution and ensure secure authentication.",
- "questions": "1. What is the purpose of the `wc_multiCall` function?\n - The `wc_multiCall` function takes in an array of transactions and executes them in a batch, returning an array of the results.\n\n2. What is the purpose of the `isValidSignature` function?\n - The `isValidSignature` function takes in a message hash and a signature and returns a bytes4 value indicating whether the signature is valid for the given message.\n\n3. What is the expected input and output format for these functions?\n - Both functions take in specific input parameters and return specific output types as defined in the function definitions. The `wc_multiCall` function takes in an array of tuples containing an address, uint256 value, and bytes data, and returns an array of bytes arrays. The `isValidSignature` function takes in a bytes32 message hash and a bytes signature, and returns a bytes4 value.",
- "checksum": "615186d842e70286ef304a81c1909c16"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/bar.json b/.autodoc/docs/json/core/src/constants/abis/bar.json
deleted file mode 100644
index 068ebeda1..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/bar.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "bar.json",
- "filePath": "core/src/constants/abis/bar.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/bar.json",
- "summary": "The code provided is a Solidity smart contract that defines the interface for an ERC20 token. ERC20 is a standard interface for tokens on the Ethereum blockchain, and this contract defines the functions and events that are required to be implemented for a token to be considered ERC20 compliant.\n\nThe contract includes a constructor that takes an address of another ERC20 token called Sushi. The contract also includes functions for getting the name, symbol, and decimals of the token, as well as the total supply and the balance of a particular address. Additionally, there are functions for approving an address to spend a certain amount of tokens on behalf of the caller, transferring tokens from one address to another, and checking the amount of tokens that an address is allowed to spend on behalf of another address.\n\nThe contract also includes two functions called `enter` and `leave`. These functions are not part of the ERC20 standard, but are specific to the project that this contract is a part of. It is unclear what these functions do without additional context about the project.\n\nOverall, this contract provides the basic functionality required for an ERC20 token, and can be used as a starting point for creating a new token. Developers can inherit from this contract and implement their own logic for the `enter` and `leave` functions to create a custom token for their project. Here is an example of how this contract can be inherited:\n\n```\ncontract MyToken is ERC20Token {\n constructor(address _sushi) ERC20Token(_sushi) {\n // additional constructor logic for MyToken\n }\n\n // additional functions and logic for MyToken\n}\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code defines a contract for a token called \"sushi\" and includes functions for transferring tokens, checking balances, and managing allowances.\n\n2. What is the significance of the \"constructor\" function?\n- The constructor function is called when the contract is first deployed and initializes the contract with the address of the \"sushi\" token.\n\n3. What is the difference between the \"transfer\" and \"transferFrom\" functions?\n- The \"transfer\" function allows a user to transfer tokens from their own account to another user's account, while the \"transferFrom\" function allows a user to transfer tokens from another user's account if they have been granted permission to do so through the \"approve\" function.",
- "checksum": "413c3eb5b99e58d147a5b039710df537"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/chainlink-oracle.json b/.autodoc/docs/json/core/src/constants/abis/chainlink-oracle.json
deleted file mode 100644
index 2f513b0d4..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/chainlink-oracle.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "chainlink-oracle.json",
- "filePath": "core/src/constants/abis/chainlink-oracle.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/chainlink-oracle.json",
- "summary": "The code provided is a Solidity smart contract that defines a set of functions for interacting with a decentralized oracle. Oracles are used in blockchain systems to provide external data to smart contracts. This particular oracle is designed to provide exchange rate data for different currency pairs.\n\nThe contract defines six functions, each with a specific purpose. The `getDataParameter` function is a pure function that takes in three parameters: `multiply`, `divide`, and `decimals`. It returns a `bytes` array that can be used as input to the `get` and `peek` functions. The purpose of this function is to generate the input data required for the other functions to retrieve exchange rate data.\n\nThe `get` function takes in a `bytes` array as input and returns a boolean value and a uint256 value. The boolean value indicates whether the data was successfully retrieved, while the uint256 value represents the exchange rate data. This function is used to retrieve the latest exchange rate data for a given currency pair.\n\nThe `peek` function is similar to the `get` function, but it does not modify the state of the contract. It takes in a `bytes` array as input and returns a boolean value and a uint256 value. The boolean value indicates whether the data is available, while the uint256 value represents the exchange rate data. This function is used to check the availability of exchange rate data without actually retrieving it.\n\nThe `peekSpot` function is a view function that takes in a `bytes` array as input and returns a uint256 value representing the exchange rate data. This function is used to retrieve the latest exchange rate data for a given currency pair without modifying the state of the contract.\n\nFinally, the `name` and `symbol` functions are view functions that return the name and symbol of the oracle, respectively. These functions are used to retrieve metadata about the oracle.\n\nOverall, this contract provides a set of functions for retrieving exchange rate data from a decentralized oracle. These functions can be used by other smart contracts in the larger project to obtain external data for various purposes. For example, a smart contract that facilitates cross-border payments may use this oracle to obtain exchange rate data for different currency pairs.",
- "questions": "1. What is the purpose of this code?\n- This code defines a set of functions for interacting with a smart contract related to financial data.\n\n2. What are the inputs and outputs of the \"get\" function?\n- The \"get\" function takes in a byte array called \"data\" and returns a boolean value and a uint256 value.\n\n3. What is the difference between the \"peek\" and \"peekSpot\" functions?\n- The \"peek\" function returns a boolean value and a uint256 value based on the input byte array, while the \"peekSpot\" function only returns a uint256 value and does not have a boolean output.",
- "checksum": "a93bcaf9d05a6dd257c017550d62f926"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/clone-rewarder.json b/.autodoc/docs/json/core/src/constants/abis/clone-rewarder.json
deleted file mode 100644
index 0c13d3598..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/clone-rewarder.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "clone-rewarder.json",
- "filePath": "core/src/constants/abis/clone-rewarder.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/clone-rewarder.json",
- "summary": "The code provided is a Solidity smart contract that is part of the larger project called \"zoo\". The purpose of this contract is to manage rewards for users who provide liquidity to a MasterChef V2 contract. The contract emits events to log various actions such as initializing the contract, adding a new pool, setting a pool, updating a pool, and transferring ownership. \n\nThe contract has several functions that allow users to interact with it. The `init` function is used to initialize the contract with the MasterChef V2 contract address, reward token address, and master LP token address. The `setRewardPerSecond` function is used to set the reward rate per second. The `pendingToken` function is used to calculate the pending reward for a user for a specific pool. The `pendingTokens` function is used to calculate the pending rewards for a user across all pools. The `onSushiReward` function is called by the MasterChef V2 contract to distribute rewards to users who provide liquidity. \n\nThe contract also has several view functions that allow users to retrieve information about the contract state. The `poolInfo` function is used to retrieve information about a specific pool such as the accumulated reward per share and the last reward time. The `rewardPerSecond` function is used to retrieve the current reward rate per second. The `rewardRates` function is used to retrieve an array of reward rates for each pool. The `rewardToken` function is used to retrieve the reward token address. \n\nOverall, this contract plays an important role in managing rewards for users who provide liquidity to the MasterChef V2 contract. It allows users to calculate their pending rewards and provides functions for setting and retrieving reward rates and other contract state information. \n\nExample usage:\n\n```\n// Initialize the contract with the MasterChef V2 contract address, reward token address, and master LP token address\nawait zoo.init(masterChefV2Address, rewardTokenAddress, masterLPTokenAddress);\n\n// Set the reward rate per second\nawait zoo.setRewardPerSecond(100);\n\n// Retrieve the current reward rate per second\nconst rewardRate = await zoo.rewardPerSecond();\n\n// Calculate the pending reward for a user for a specific pool\nconst pendingReward = await zoo.pendingToken(poolId, userAddress);\n\n// Calculate the pending rewards for a user across all pools\nconst { rewardTokens, rewardAmounts } = await zoo.pendingTokens(poolId, userAddress);\n\n// Retrieve information about a specific pool\nconst { accToken1PerShare, lastRewardTime } = await zoo.poolInfo(poolId);\n\n// Retrieve the reward token address\nconst rewardTokenAddress = await zoo.rewardToken();\n```",
- "questions": "1. What is the purpose of this code and how does it relate to the overall zoo project?\n- This code is a smart contract for a reward system in the zoo project. It allows users to earn rewards by staking tokens in a pool.\n\n2. What are the inputs and outputs of the `onSushiReward` function?\n- The inputs of the `onSushiReward` function are the pool ID, user address, recipient address, token ID, and LP token amount. There are no outputs.\n\n3. What events are emitted by this contract and what information do they provide?\n- This contract emits several events including `LogInit`, `LogOnReward`, `LogPoolAddition`, `LogRewardPerSecond`, `LogSetPool`, `LogUpdatePool`, and `OwnershipTransferred`. These events provide information such as the reward token, owner address, reward per second, LP token address, user address, pool ID, amount staked, and more.",
- "checksum": "111e9d7091c8f2f383c23eb3b1af7f52"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/complex-rewarder.json b/.autodoc/docs/json/core/src/constants/abis/complex-rewarder.json
deleted file mode 100644
index a3ac852da..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/complex-rewarder.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "complex-rewarder.json",
- "filePath": "core/src/constants/abis/complex-rewarder.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/complex-rewarder.json",
- "summary": "This code defines a set of constructors, events, and functions for a smart contract that manages a pool of rewards for a decentralized finance (DeFi) project called \"zoo\". The contract is designed to distribute rewards to users who provide liquidity to the project's pools.\n\nThe constructor takes three inputs: the address of the reward token, the amount of reward tokens to be distributed per second, and the address of the project's MasterChef V2 contract. The contract emits an event called \"LogInit\" when it is initialized.\n\nThe contract also defines several events that are emitted during various operations. These events include \"LogOnReward\", which is emitted when a user receives a reward, \"LogPoolAddition\", which is emitted when a new pool is added to the contract, and \"LogUpdatePool\", which is emitted when a pool is updated.\n\nThe contract also defines several functions that can be called by users or other contracts. These functions include \"add\", which adds a new pool to the contract, \"massUpdatePools\", which updates all pools in the contract, and \"set\", which updates the allocation points for a specific pool.\n\nOne important function is \"onSushiReward\", which is called by the MasterChef V2 contract when a user earns a reward. This function updates the user's reward debt and emits a \"LogOnReward\" event.\n\nAnother important function is \"updatePool\", which updates the reward distribution for a specific pool. This function calculates the amount of rewards that have been earned since the last update and distributes them to the pool's users.\n\nOverall, this contract is an essential component of the zoo DeFi project, as it manages the distribution of rewards to users who provide liquidity to the project's pools. Developers working on the project can use this contract to add new pools, update reward allocations, and distribute rewards to users.",
- "questions": "1. What is the purpose of this code and what does it do?\n - This code defines a contract for a reward distribution system for a decentralized application. It includes functions for adding and updating reward pools, distributing rewards to users, and transferring ownership of the contract.\n2. What types of inputs and outputs are used in this code?\n - The inputs and outputs include various data types such as addresses, uint256 integers, and structs. The functions have different state mutability, with some being nonpayable and others being view-only.\n3. What events are emitted by this code and what information do they provide?\n - This code emits several events, including LogInit, LogOnReward, LogPoolAddition, LogRewardPerSecond, LogSetPool, LogUpdatePool, and OwnershipTransferred. These events provide information about the initialization of the contract, reward distribution to users, addition and modification of reward pools, and ownership transfers.",
- "checksum": "aafecd64a297fa90e0e365a6e464e34e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/compound-oracle.json b/.autodoc/docs/json/core/src/constants/abis/compound-oracle.json
deleted file mode 100644
index 40c76bad4..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/compound-oracle.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "compound-oracle.json",
- "filePath": "core/src/constants/abis/compound-oracle.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/compound-oracle.json",
- "summary": "This code defines three functions that are part of a smart contract. The smart contract is likely part of a larger project related to a decentralized finance (DeFi) application. \n\nThe first function, `get`, takes in a single parameter of type `bytes` and returns two values: a boolean and a uint256. The purpose of this function is not clear from the code alone, but it likely retrieves some data from the smart contract or blockchain. The function is marked as `nonpayable`, meaning it cannot receive any ether (the cryptocurrency used on the Ethereum blockchain) as part of its execution.\n\nThe second function, `getDataParameter`, takes in three parameters: two strings and a uint256. It returns a single value of type `bytes`. This function is marked as `pure`, meaning it does not read from or modify the state of the smart contract. Instead, it likely performs some computation on the input parameters and returns a byte array that can be used as input to another function in the smart contract.\n\nThe third function, `peek`, takes in a single parameter of type `bytes` and returns two values: a boolean and a uint256. This function is marked as `view`, meaning it does not modify the state of the smart contract. Instead, it likely reads some data from the smart contract or blockchain and returns it to the caller.\n\nOverall, these functions are likely part of a larger set of functions that make up a DeFi application. The `get` and `peek` functions likely retrieve data from the smart contract or blockchain, while the `getDataParameter` function likely performs some computation on input parameters to prepare them for use in other functions. These functions may be used by other parts of the DeFi application to perform various tasks, such as calculating interest rates or executing trades. \n\nExample usage of these functions would depend on the specific implementation of the DeFi application. However, a possible example usage of the `getDataParameter` function could be as follows:\n\n```\n// prepare input parameters\nstring memory collateralSymbol = \"ETH\";\nstring memory assetSymbol = \"DAI\";\nuint256 division = 100;\n\n// call getDataParameter function\nbytes memory data = getDataParameter(collateralSymbol, assetSymbol, division);\n\n// use returned data as input to another function\nbool success = someOtherFunction(data);\n```",
- "questions": "1. What is the purpose of this code and how is it used within the zoo project?\n Answer: This code defines three functions with inputs, outputs, and state mutability. It is likely used as part of the smart contract functionality within the zoo project.\n\n2. What is the difference between the state mutability of the `get` and `peek` functions?\n Answer: The `get` function is nonpayable, meaning it cannot receive Ether as part of its execution, while the `peek` function is view, meaning it does not modify the state of the contract.\n\n3. What is the purpose of the `getDataParameter` function and what are its inputs and outputs?\n Answer: The `getDataParameter` function takes in three inputs (two strings and a uint256) and returns a bytes output. Its purpose is not clear from this code alone, but it is likely used to generate data for another function or contract within the zoo project.",
- "checksum": "721773f4120f467ecd8df904f6388e63"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/cvx-rewarder.json b/.autodoc/docs/json/core/src/constants/abis/cvx-rewarder.json
deleted file mode 100644
index d4dab979c..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/cvx-rewarder.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "cvx-rewarder.json",
- "filePath": "core/src/constants/abis/cvx-rewarder.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/cvx-rewarder.json",
- "summary": "The code provided is a Solidity smart contract for a staking pool that allows users to stake a specific token and earn rewards in another token. The contract is part of a larger project called \"zoo\" and is designed to be used in a decentralized finance (DeFi) ecosystem.\n\nThe constructor function takes in several parameters, including the staking token, reward token, reward manager, and two different MasterChef contracts. The chefPid parameter is used to identify the specific pool in the MasterChef contract that this staking pool is associated with.\n\nThe contract emits several events, including RewardAdded, RewardPaid, Staked, and Withdrawn, which are used to track rewards and staking activity.\n\nThe contract includes several functions for interacting with the staking pool. The addExtraReward function allows the reward manager to add additional rewards to the pool. The balanceOf function returns the balance of the staking token for a specific user. The earned function returns the amount of rewards earned by a specific user. The getReward function allows a user to claim their rewards. The stake function allows a user to stake a specific amount of the staking token. The withdraw function allows a user to withdraw their staked tokens and claim their rewards.\n\nThe contract also includes functions for interacting with the associated MasterChef contracts. The onSushiReward function is called by the SushiSwap MasterChef contract when rewards are distributed, and it updates the user's balance in the staking pool. The pendingTokens function returns the pending rewards for a specific user in both the staking token and reward token.\n\nOverall, this contract provides a way for users to earn rewards by staking a specific token and is designed to be used in a larger DeFi ecosystem.",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code appears to be a smart contract for a staking and reward system, likely for a decentralized finance (DeFi) platform. It allows users to stake a certain token and receive rewards in another token, with the rewards being distributed based on a set rate and duration.\n\n2. What external contracts or systems does this code interact with?\n- This code interacts with several external contracts and systems, including the staking token, reward token, reward manager, SushiSwap MasterChef contract, and Convex Finance MasterChef contract. It also appears to have functions for adding and clearing extra rewards.\n\n3. What events and functions are available for developers to use in this code?\n- Developers can use several events and functions in this code, including events for when rewards are added or paid out, and functions for staking, withdrawing, and claiming rewards. There are also functions for getting information about the current rewards and reward rate, as well as interacting with the external contracts and systems mentioned above.",
- "checksum": "81b836b228f5d6b17cac645fc467288f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/eip-2612.json b/.autodoc/docs/json/core/src/constants/abis/eip-2612.json
deleted file mode 100644
index 0cc171a46..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/eip-2612.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "eip-2612.json",
- "filePath": "core/src/constants/abis/eip-2612.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/eip-2612.json",
- "summary": "This code defines two functions as part of a larger project called zoo. The first function, called \"nonces\", is a view function that takes in an address as an input and returns a uint256 value. This function is marked as constant, meaning it does not modify the state of the contract, and is therefore free to execute without requiring any gas fees. The purpose of this function is not clear from the code alone, but it likely serves as a way to retrieve a nonce value associated with a particular address.\n\nThe second function, called \"DOMAIN_SEPARATOR\", is also a view function that takes no inputs and returns a bytes32 value. Like the first function, it is marked as constant and does not modify the state of the contract. The purpose of this function is also not clear from the code alone, but it likely serves as a way to retrieve a domain separator value associated with the contract.\n\nOverall, these functions appear to be part of a larger smart contract that is used to manage some aspect of the zoo project. Without more context, it is difficult to say exactly how these functions fit into the larger picture. However, it is clear that they are designed to be read-only functions that do not modify the state of the contract, and can therefore be executed without requiring any gas fees. \n\nHere is an example of how the \"nonces\" function might be used in a larger project:\n\n```\n// Assume we have a web3 instance and a contract instance called \"zooContract\"\n\nconst ownerAddress = \"0x1234567890123456789012345678901234567890\";\n\nzooContract.methods.nonces(ownerAddress).call((err, result) => {\n if (err) {\n console.error(err);\n } else {\n console.log(`Nonce for ${ownerAddress}: ${result}`);\n }\n});\n```\n\nThis code would retrieve the nonce value associated with the given owner address by calling the \"nonces\" function on the zooContract instance. The result would be logged to the console.",
- "questions": "1. What is the purpose of this code and how is it used in the zoo project?\n This code defines two functions, `nonces` and `DOMAIN_SEPARATOR`, which are likely used for some kind of authentication or security feature within the zoo project.\n\n2. What is the expected input and output for the `nonces` function?\n The `nonces` function takes in a single input parameter, `owner`, which is of type `address`. It returns a single output parameter of type `uint256`.\n\n3. What is the purpose of the `DOMAIN_SEPARATOR` function and how is it used?\n The `DOMAIN_SEPARATOR` function likely generates a unique identifier for the zoo project, which can be used for various security and authentication purposes. It does not take any input parameters and returns a single output parameter of type `bytes32`.",
- "checksum": "bbd675ce1d9e50e6dcbb4be80d536300"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/ens-registrar.json b/.autodoc/docs/json/core/src/constants/abis/ens-registrar.json
deleted file mode 100644
index 6ff3f8b43..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/ens-registrar.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ens-registrar.json",
- "filePath": "core/src/constants/abis/ens-registrar.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/ens-registrar.json",
- "summary": "The code provided is a Solidity contract that interacts with the Ethereum Name Service (ENS). ENS is a decentralized domain name system built on the Ethereum blockchain that allows users to register human-readable domain names and associate them with Ethereum addresses, smart contracts, and other resources. \n\nThe contract contains several functions that allow users to manage ENS records, including setting and retrieving ownership, resolver, and time-to-live (TTL) information for a given ENS node. The contract also includes functions for setting and checking operator approval, which allows an operator to manage ENS records on behalf of the owner.\n\nOne important function in the contract is `setRecord`, which allows a user to set the owner, resolver, and TTL for a given ENS node. This function takes four arguments: the ENS node, the new owner address, the new resolver address, and the new TTL value. Once called, the function updates the ENS record for the specified node with the new information.\n\nAnother important function is `setSubnodeOwner`, which allows a user to set the owner of a subdomain of a given ENS node. This function takes three arguments: the ENS node, the subdomain label, and the new owner address. The function returns the new ENS node for the subdomain. \n\nOverall, this contract provides a set of tools for managing ENS records within a larger project. Developers can use this contract to build applications that interact with ENS, such as decentralized domain name registrars or decentralized content distribution networks.",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code is related to the Ethereum Name Service (ENS) and provides functions for managing ownership and resolution of domain names on the Ethereum blockchain.\n\n2. What events are emitted by this code and what information do they provide?\n- This code emits several events including ApprovalForAll, NewOwner, NewResolver, NewTTL, and Transfer. These events provide information about changes in ownership, resolution, and approval status for domain names on the Ethereum blockchain.\n\n3. What are some of the key functions provided by this code and what do they do?\n- This code provides functions for setting and getting ownership, resolution, and time-to-live (TTL) information for domain names on the Ethereum blockchain. It also provides a function for setting approval status for a given operator.",
- "checksum": "f9b44472d00577b632186ff29eed1832"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/erc20.json b/.autodoc/docs/json/core/src/constants/abis/erc20.json
deleted file mode 100644
index c469b18a4..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/erc20.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "erc20.json",
- "filePath": "core/src/constants/abis/erc20.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/erc20.json",
- "summary": "This code defines a set of functions and events for a smart contract that implements a standard token on the Ethereum blockchain. The token is identified by a name and a symbol, and has a fixed number of decimal places. The total supply of the token is also defined. \n\nThe functions defined in this code allow users to interact with the token. The `balanceOf` function returns the balance of a given address. The `transfer` function allows a user to transfer tokens to another address. The `approve` function allows a user to grant permission to another address to spend tokens on their behalf. The `allowance` function returns the amount of tokens that an approved address is allowed to spend. The `transferFrom` function allows an approved address to spend tokens on behalf of another address. \n\nThe events defined in this code allow users to track token transfers and approvals. The `Transfer` event is emitted whenever tokens are transferred from one address to another. The `Approval` event is emitted whenever an address is approved to spend tokens on behalf of another address. \n\nThis code can be used as a starting point for creating a custom token on the Ethereum blockchain. Developers can modify the code to define the specific parameters of their token, such as the name, symbol, and total supply. They can also add additional functions and events to customize the behavior of the token. \n\nHere is an example of how the `balanceOf` function can be used in a larger project:\n\n```\nconst tokenAddress = '0x123456789abcdef'; // replace with actual token address\nconst userAddress = '0x987654321fedcba'; // replace with actual user address\n\nconst tokenContract = new web3.eth.Contract(tokenAbi, tokenAddress);\n\ntokenContract.methods.balanceOf(userAddress).call((err, balance) => {\n if (err) {\n console.error(err);\n } else {\n console.log(`User has a balance of ${balance} tokens`);\n }\n});\n```\n\nThis code creates a new instance of the token contract using the ABI (Application Binary Interface) and address of the deployed contract. It then calls the `balanceOf` function with the user's address as an argument, and logs the user's token balance to the console.",
- "questions": "1. What is the purpose of this code and what does it do?\n This code defines a set of functions and events for a smart contract related to a token. It includes functions for transferring tokens, approving transfers, checking balances, and more.\n\n2. What is the significance of the \"payable\" and \"stateMutability\" properties in the function definitions?\n The \"payable\" property indicates whether the function can receive Ether as part of a transaction, while the \"stateMutability\" property indicates whether the function changes the state of the contract (e.g. by modifying storage variables) and whether it requires any gas to execute.\n\n3. What is the purpose of the \"Approval\" and \"Transfer\" events?\n The \"Approval\" event is emitted when a token holder approves a transfer of tokens to another address, while the \"Transfer\" event is emitted when tokens are transferred from one address to another. These events can be used to track the movement of tokens and trigger external actions based on those movements.",
- "checksum": "2634d50339b74d3e56297b26832d2976"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/erc20_bytes32.json b/.autodoc/docs/json/core/src/constants/abis/erc20_bytes32.json
deleted file mode 100644
index 9515559c8..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/erc20_bytes32.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "erc20_bytes32.json",
- "filePath": "core/src/constants/abis/erc20_bytes32.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/erc20_bytes32.json",
- "summary": "This code represents a smart contract on the Ethereum blockchain. The contract has two functions: `name` and `symbol`. These functions are marked as constant, meaning they do not modify the state of the contract and are free to execute. \n\nThe `name` function returns a bytes32 value representing the name of the contract. The `symbol` function returns a bytes32 value representing the symbol of the contract. \n\nThis code is likely part of a larger project that involves creating and managing tokens on the Ethereum blockchain. The `name` and `symbol` functions are commonly used in token contracts to provide basic information about the token. For example, a token contract for a fictional zoo might have a name of \"ZooToken\" and a symbol of \"ZOO\". \n\nTo interact with this contract, a user would need to use a tool such as Remix or Truffle to deploy the contract to the Ethereum network. Once deployed, the user could then call the `name` and `symbol` functions to retrieve the corresponding values. \n\nExample usage in Solidity code:\n\n```\ncontract MyToken {\n function name() public view returns (bytes32) {\n return \"ZooToken\";\n }\n\n function symbol() public view returns (bytes32) {\n return \"ZOO\";\n }\n}\n```",
- "questions": "1. What is the purpose of this code? \n- This code defines two functions `name` and `symbol` with their respective inputs and outputs. \n\n2. What is the data type of the inputs and outputs for the `name` and `symbol` functions? \n- Both functions have an input and output of type `bytes32`. \n\n3. What is the stateMutability of the `name` and `symbol` functions? \n- Both functions have a stateMutability of `view`, meaning they do not modify the state of the contract and can be called without sending a transaction.",
- "checksum": "baa0c6c88cf554c373e0d9e906953608"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/factory.json b/.autodoc/docs/json/core/src/constants/abis/factory.json
deleted file mode 100644
index 44416e3be..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/factory.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "factory.json",
- "filePath": "core/src/constants/abis/factory.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/factory.json",
- "summary": "The code provided is a Solidity smart contract that defines a set of functions and events for creating and managing pairs of tokens on a decentralized exchange. The contract is part of a larger project called \"zoo\" and is likely used in conjunction with other contracts to create a fully functional decentralized exchange.\n\nThe contract has a constructor function that takes an address parameter and sets it as the \"feeToSetter\" variable. This variable is used to determine who has the authority to set the fee charged for trading on the exchange. The contract also defines an event called \"PairCreated\" that is emitted whenever a new token pair is created on the exchange.\n\nThe contract has several functions for managing pairs of tokens on the exchange. The \"createPair\" function takes two token addresses as parameters and creates a new pair of tokens on the exchange. The \"getPair\" function takes two token addresses as parameters and returns the address of the corresponding token pair on the exchange. The \"allPairs\" function returns an array of all token pairs on the exchange, and the \"allPairsLength\" function returns the length of the array.\n\nThe contract also has functions for managing the fee charged for trading on the exchange. The \"feeTo\" function returns the address of the account that receives the trading fee, and the \"setFeeTo\" function sets the address of the account that receives the trading fee. The \"setFeeToSetter\" function sets the address of the account that has the authority to set the trading fee. Finally, the \"setMigrator\" function sets the address of a contract that can be used to migrate liquidity from other exchanges to this one.\n\nOverall, this contract provides the basic functionality for creating and managing pairs of tokens on a decentralized exchange. It can be used in conjunction with other contracts to create a fully functional decentralized exchange. Here is an example of how the \"createPair\" function might be used:\n\n```\n// create a new pair of tokens on the exchange\naddress tokenA = 0x1234567890123456789012345678901234567890;\naddress tokenB = 0x0987654321098765432109876543210987654321;\naddress pair = ZooExchange.createPair(tokenA, tokenB);\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a smart contract for creating and managing pairs of tokens on a decentralized exchange.\n\n2. What events can trigger the \"PairCreated\" event?\n- The \"PairCreated\" event is triggered when a new pair of tokens is created using the \"createPair\" function.\n\n3. What is the difference between the \"feeTo\" and \"feeToSetter\" functions?\n- The \"feeTo\" function returns the address that receives the trading fees, while the \"feeToSetter\" function returns the address that has permission to update the fee recipient address.",
- "checksum": "47ef3c4c5775f513d878ed39c08cdf71"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/faucet.json b/.autodoc/docs/json/core/src/constants/abis/faucet.json
deleted file mode 100644
index 436b3fe03..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/faucet.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "faucet.json",
- "filePath": "core/src/constants/abis/faucet.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/faucet.json",
- "summary": "The code provided is a single function called `drip`. It is written in Solidity, a programming language used for creating smart contracts on the Ethereum blockchain. \n\nThe function has no input parameters and no output values. It is marked as `nonpayable`, meaning it cannot receive any Ether (the cryptocurrency used on the Ethereum network) as part of its execution. \n\nWithout any context or additional information, it is difficult to determine the exact purpose of this function within the larger project. However, based on its name and the fact that it does not accept any input parameters, it is possible that this function is intended to perform a simple action or trigger an event. \n\nFor example, it could be used to simulate the sound of water dripping in an exhibit within the zoo project. The function could be called periodically to emit a sound or trigger a visual effect, creating a more immersive experience for users interacting with the project. \n\nHere is an example of how the `drip` function could be called within a larger Solidity contract:\n\n```\ncontract ZooExhibit {\n function simulateDrip() public {\n drip();\n }\n}\n```\n\nIn this example, the `simulateDrip` function is part of a larger contract representing an exhibit within the zoo project. When called, it simply invokes the `drip` function to simulate the sound of water dripping within the exhibit. \n\nOverall, while the `drip` function is relatively simple and does not provide much functionality on its own, it could be a useful component within a larger project like zoo. By providing a way to trigger simple actions or events, it can help create a more engaging and interactive experience for users.",
- "questions": "1. What is the purpose of the `drip` function?\n - The `drip` function does not have any inputs or outputs and is nonpayable, so it likely performs some internal state change or action within the contract.\n\n2. Is this the entire code for the `zoo` project or just a small portion?\n - It is unclear from this code snippet whether this is the entire code for the `zoo` project or just a small portion. More context is needed to determine the scope of the project.\n\n3. What programming language is this code written in?\n - It is not specified in the code snippet what programming language this code is written in. More information is needed to determine the language used.",
- "checksum": "5e17c57195942661c862f617b361e99a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/limit-order-helper.json b/.autodoc/docs/json/core/src/constants/abis/limit-order-helper.json
deleted file mode 100644
index 25461ae25..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/limit-order-helper.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "limit-order-helper.json",
- "filePath": "core/src/constants/abis/limit-order-helper.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/limit-order-helper.json",
- "summary": "The code provided is a Solidity smart contract that is part of the larger project called \"zoo\". The contract contains three functions, a constructor, a view function, and a payable function. \n\nThe constructor function takes in a single parameter, `_bentoBox`, which is of type `contract IBentoBox`. This function is non-payable, meaning it cannot receive any ether, and is only called once during the deployment of the contract. The purpose of this function is to initialize the `bentoBox` variable with the `_bentoBox` parameter. \n\nThe view function is named `bentoBox` and returns a single output of type `contract IBentoBox`. This function is used to retrieve the value of the `bentoBox` variable. The `view` modifier indicates that this function does not modify the state of the contract and is free to execute without any gas cost. \n\nThe third function is named `depositAndApprove` and is a payable function. It takes in six parameters, `user`, `masterContract`, `approved`, `v`, `r`, and `s`. The `user` parameter is of type `address` and represents the address of the user who is depositing funds. The `masterContract` parameter is also of type `address` and represents the address of the contract that will receive the funds. The `approved` parameter is of type `bool` and indicates whether the user has approved the transfer of funds. The `v`, `r`, and `s` parameters are used for signature verification. \n\nThe purpose of this function is to deposit funds into the `bentoBox` contract and approve the transfer of funds. The function first transfers the funds from the user's address to the `bentoBox` contract. It then calls the `approve` function on the `bentoBox` contract to approve the transfer of funds to the `masterContract`. Finally, it calls the `deposit` function on the `bentoBox` contract to deposit the funds into the `masterContract`. \n\nHere is an example of how this function can be used:\n\n```\n// Assume the contract has already been deployed and initialized with a valid IBentoBox contract address\nfunction depositFunds() public payable {\n address user = msg.sender;\n address masterContract = 0x1234567890123456789012345678901234567890;\n bool approved = true;\n uint8 v = 27;\n bytes32 r = 0x1234567890123456789012345678901234567890123456789012345678901234;\n bytes32 s = 0x5678901234567890123456789012345678901234567890123456789012345678;\n \n ZooContract zc = ZooContract(address);\n zc.depositAndApprove{value: msg.value}(user, masterContract, approved, v, r, s);\n}\n```\n\nIn this example, the `depositFunds` function is called by a user who wants to deposit funds into the `masterContract`. The function creates a new instance of the `ZooContract` contract and calls the `depositAndApprove` function with the necessary parameters. The `value` keyword is used to send the amount of ether sent with the transaction to the `depositAndApprove` function.",
- "questions": "1. What is the purpose of this code?\n- This code defines a smart contract with a constructor and two functions for interacting with a BentoBox contract.\n\n2. What is the IBentoBox contract and how is it used in this code?\n- The IBentoBox contract is an interface that defines the functions that can be called on a BentoBox contract. It is used as an input parameter in the constructor and an output parameter in the bentoBox function.\n\n3. What does the depositAndApprove function do and how is it used?\n- The depositAndApprove function takes in several parameters including a user address, a master contract address, and a boolean value for approval. It allows a user to deposit funds into the BentoBox contract and approve a master contract to use those funds. It requires a signature from the user to verify the transaction.",
- "checksum": "a74a9a77072b0128d3bbe2ff13772d9d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/maker.json b/.autodoc/docs/json/core/src/constants/abis/maker.json
deleted file mode 100644
index 3d2cd36c6..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/maker.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "maker.json",
- "filePath": "core/src/constants/abis/maker.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/maker.json",
- "summary": "This code defines a smart contract that is part of the larger zoo project. The contract is responsible for converting tokens between different bridges. The contract has a constructor that takes in four addresses: `_factory`, `_bar`, `_sushi`, and `_weth`. These addresses are used to initialize the contract's state variables.\n\nThe contract has several functions that can be used to interact with it. The `bridgeFor` function takes in a token address and returns the address of the bridge associated with that token. The `convert` function takes in two token addresses and converts them using the associated bridge. The `convertMultiple` function takes in arrays of token addresses and converts them using their associated bridges.\n\nThe contract also has functions for setting and transferring ownership. The `setBridge` function can be used to set the bridge associated with a particular token. The `transferOwnership` function can be used to transfer ownership of the contract to a new owner.\n\nThe contract emits several events, including `LogBridgeSet`, `LogConvert`, and `OwnershipTransferred`. These events can be used to track changes to the contract's state.\n\nOverall, this contract plays an important role in the larger zoo project by facilitating the conversion of tokens between different bridges. Developers working on the project can use this contract to ensure that tokens can be easily converted and transferred between different parts of the project. Here is an example of how the `convert` function might be used:\n\n```\n// Convert 1 ETH to 100 USDT\nzoo.convert(ethAddress, usdtAddress, {value: 1 ether, gas: 500000});\n```",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- Without additional context, it is unclear what the purpose of this code is and what problem it solves. It appears to be a smart contract with functions related to converting tokens and setting bridges, but more information is needed to fully understand its purpose.\n\n2. What is the significance of the different event types and what information do they provide?\n- The code includes three different event types: LogBridgeSet, LogConvert, and OwnershipTransferred. It is unclear what information each event provides and why they are important. Additional documentation or comments within the code would be helpful in understanding their significance.\n\n3. What are the expected inputs and outputs for the convert and convertMultiple functions?\n- The convert and convertMultiple functions are both nonpayable and do not have any outputs listed. It is unclear what the expected inputs are for these functions and what actions they perform. Additional documentation or comments within the code would be helpful in understanding their functionality.",
- "checksum": "1a43b9cd1ac778fc2b03cd5f537d6ec3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/masterchef.json b/.autodoc/docs/json/core/src/constants/abis/masterchef.json
deleted file mode 100644
index 87dd95569..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/masterchef.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "masterchef.json",
- "filePath": "core/src/constants/abis/masterchef.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/masterchef.json",
- "summary": "This code defines a smart contract for a decentralized application (dApp) called \"zoo\". The contract is written in Solidity, a programming language used for creating smart contracts on the Ethereum blockchain. \n\nThe contract contains several functions that allow users to interact with the dApp. These functions include adding and updating pools, depositing and withdrawing tokens, and migrating pools. \n\nThe constructor function initializes the contract with several parameters, including the SushiToken contract address, the developer address, the SUSHI token reward per block, the starting block number, and the bonus end block number. \n\nThe add function allows users to add a new pool to the dApp. A pool is a collection of liquidity provider (LP) tokens that users can deposit to earn rewards in SUSHI tokens. The function takes in the allocation point, which determines the percentage of the total SUSHI rewards that the pool will receive, the LP token contract address, and a boolean value that determines whether to update all pools before adding the new one. \n\nThe deposit function allows users to deposit LP tokens into a specific pool to earn SUSHI rewards. The function takes in the pool ID and the amount of LP tokens to deposit. \n\nThe withdraw function allows users to withdraw their deposited LP tokens from a specific pool. The function takes in the pool ID and the amount of LP tokens to withdraw. \n\nThe migrate function allows users to migrate their LP tokens from one pool to another. The function takes in the pool ID and the migrator contract address. \n\nOverall, this contract provides the functionality for users to participate in a decentralized exchange (DEX) by providing liquidity and earning rewards in SUSHI tokens. The contract can be used in conjunction with other contracts and interfaces to create a fully functional dApp. \n\nExample usage:\n\nTo add a new pool to the dApp:\n```\nzoo.add(100, lpTokenAddress, true);\n```\n\nTo deposit LP tokens into a pool:\n```\nzoo.deposit(poolID, lpTokenAmount);\n```\n\nTo withdraw LP tokens from a pool:\n```\nzoo.withdraw(poolID, lpTokenAmount);\n```\n\nTo migrate LP tokens from one pool to another:\n```\nzoo.migrate(poolID, migratorAddress);\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code is a smart contract for a project called zoo. It appears to be a staking contract for a token called SushiToken, allowing users to deposit and withdraw tokens to earn rewards.\n\n2. What is the significance of the \"BONUS_MULTIPLIER\" variable?\n- The \"BONUS_MULTIPLIER\" variable is a constant that determines the bonus multiplier for rewards during a certain period of time. It is likely used in conjunction with the start and end block variables to determine the reward rate for stakers.\n\n3. What is the purpose of the \"migrate\" function and what does it do?\n- The \"migrate\" function allows for the migration of staked tokens from one contract to another using a \"Migrator\" contract. This could be useful if the staking contract is being upgraded or replaced with a new contract.",
- "checksum": "b5393c88127c761f0261b0573f15b725"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/minichef-v2.json b/.autodoc/docs/json/core/src/constants/abis/minichef-v2.json
deleted file mode 100644
index 1efd2b5a3..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/minichef-v2.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "minichef-v2.json",
- "filePath": "core/src/constants/abis/minichef-v2.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/minichef-v2.json",
- "summary": "The code provided is a Solidity smart contract for a project called MiniChefV2, which appears to be a decentralized application (dApp) for yield farming on the Ethereum blockchain. Yield farming is a process where users can earn rewards by providing liquidity to a decentralized exchange (DEX) or liquidity pool (LP) on a blockchain network. \n\nThe MiniChefV2 contract has several functions that allow users to deposit, withdraw, and harvest rewards from various liquidity pools. The contract also has functions for adding and updating pools, setting reward allocations, and setting the rate at which rewards are distributed. \n\nThe contract has a constructor function that takes an input of a contract address for the SUSHI token, which is the native token of the SushiSwap DEX. The contract has several events that are emitted when certain actions are taken, such as depositing, withdrawing, or updating a pool. \n\nOne notable function is the `batch` function, which allows users to execute multiple function calls in a single transaction. This can be useful for optimizing gas costs and reducing the number of transactions needed to perform certain actions. \n\nOverall, the MiniChefV2 contract appears to be a key component of the larger project, providing the functionality for users to participate in yield farming on the SushiSwap DEX. Developers building on top of the MiniChefV2 contract can leverage its functions to create their own dApps or integrate it into existing projects. \n\nExample usage of the `deposit` function:\n```\nfunction deposit(uint256 pid, uint256 amount, address to) public {\n PoolInfo storage pool = poolInfo[pid];\n UserInfo storage user = userInfo[pid][msg.sender];\n updatePool(pid);\n if (user.amount > 0) {\n uint256 pending = user.amount.mul(pool.accSushiPerShare).div(1e12).sub(user.rewardDebt);\n if (pending > 0) {\n safeSushiTransfer(msg.sender, pending);\n }\n }\n if (amount > 0) {\n pool.lpToken.safeTransferFrom(address(msg.sender), address(this), amount);\n user.amount = user.amount.add(amount);\n }\n user.rewardDebt = user.amount.mul(pool.accSushiPerShare).div(1e12);\n emit Deposit(msg.sender, pid, amount, to);\n}\n```\nThe `deposit` function takes three inputs: `pid` is the ID of the pool to deposit into, `amount` is the amount of liquidity to deposit, and `to` is the address to send any rewards to. The function first updates the pool information, then calculates any pending rewards for the user and transfers them to their address. If the user is depositing liquidity, the function transfers the tokens to the contract and updates the user's amount. Finally, the user's reward debt is updated and an event is emitted.",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code is a smart contract for a project called zoo that allows users to deposit and withdraw tokens in exchange for rewards. It solves the problem of incentivizing users to provide liquidity to the platform.\n\n2. What are the different events that can be emitted by this contract and what do they represent?\n- There are several events that can be emitted by this contract, including Deposit, EmergencyWithdraw, Harvest, LogPoolAddition, LogSetPool, LogSushiPerSecond, LogUpdatePool, OwnershipTransferred, and Withdraw. These events represent different actions taken by users or the contract, such as depositing tokens, withdrawing tokens, or updating pool information.\n\n3. What are some of the functions available in this contract and what do they do?\n- Some of the functions available in this contract include add, deposit, emergencyWithdraw, harvest, set, and withdraw. These functions allow users to add liquidity to the platform, deposit and withdraw tokens, and update pool information. The emergencyWithdraw function can be used in case of an emergency, while the harvest function allows users to claim their rewards. The set function can be used to update pool information, such as the allocation points and rewarder.",
- "checksum": "d27ff3510968688e0539aac988997ba6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/multicall2.json b/.autodoc/docs/json/core/src/constants/abis/multicall2.json
deleted file mode 100644
index f41fe84af..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/multicall2.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "multicall2.json",
- "filePath": "core/src/constants/abis/multicall2.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/multicall2.json",
- "summary": "The code provided is a Solidity smart contract that contains a set of functions for interacting with the Ethereum blockchain. The contract is called Multicall2 and is designed to allow multiple function calls to be made in a single transaction, reducing gas costs and improving efficiency.\n\nThe main functions in the contract are `aggregate` and `blockAndAggregate`. Both functions take a list of function calls as input and return the results of those calls. The difference between the two functions is that `blockAndAggregate` also returns the block number and block hash of the current block.\n\nThe `aggregate` function returns the block number and an array of return data for each function call. The `blockAndAggregate` function returns the block number, block hash, and an array of return data for each function call.\n\nOther functions in the contract provide information about the current block, such as `getBlockNumber`, `getBlockHash`, `getCurrentBlockTimestamp`, and `getCurrentBlockGasLimit`. There is also a function called `getEthBalance` that returns the balance of an Ethereum address.\n\nThe `tryAggregate` and `tryBlockAndAggregate` functions are similar to `aggregate` and `blockAndAggregate`, but they return a boolean indicating whether all function calls were successful, along with the return data.\n\nOverall, the Multicall2 contract provides a convenient way to make multiple function calls in a single transaction, reducing gas costs and improving efficiency. It can be used in a variety of Ethereum applications, such as decentralized exchanges, where multiple function calls may need to be made in a single transaction.",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code provides a set of functions for querying various information about the Ethereum blockchain, such as block number, block hash, current timestamp, and ETH balance of an address. It also provides functions for aggregating multiple calls into a single call, which can be useful for reducing gas costs.\n\n2. What is the expected input and output format for the `aggregate` and `blockAndAggregate` functions?\n- Both functions take in an array of `Multicall2.Call` tuples, where each tuple contains an Ethereum address and a byte array representing the data to be called on that address. The `aggregate` function returns the block number and an array of return data for each call, while the `blockAndAggregate` function returns the block number, block hash, and an array of `Multicall2.Result` tuples, where each tuple contains a boolean indicating success and the return data for a single call.\n\n3. What is the difference between the `tryAggregate` and `tryBlockAndAggregate` functions compared to the regular `aggregate` and `blockAndAggregate` functions?\n- The `tryAggregate` and `tryBlockAndAggregate` functions have an additional boolean input parameter `requireSuccess`, which determines whether the function should revert if any of the calls fail. The regular functions will still return data for all calls, even if some of them fail.",
- "checksum": "51ee6688a79c6227964655b6febead8a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/pegged-oracle.json b/.autodoc/docs/json/core/src/constants/abis/pegged-oracle.json
deleted file mode 100644
index 1d130d323..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/pegged-oracle.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "pegged-oracle.json",
- "filePath": "core/src/constants/abis/pegged-oracle.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/pegged-oracle.json",
- "summary": "This code defines three functions that are part of a smart contract. The smart contract is likely part of a larger project related to a zoo, but the specifics of that project are not relevant to understanding this code.\n\nThe first function, `get`, takes a single input parameter of type `bytes` and returns two values: a boolean and a uint256. The function is marked as `nonpayable`, meaning it cannot receive payments. The purpose of this function is not clear from the code alone, as the input parameter is not described and the function body is not provided.\n\nThe second function, `getDataParameter`, takes a single input parameter of type `uint256` and returns a value of type `bytes`. The function is marked as `pure`, meaning it does not read or modify the state of the contract. The purpose of this function is also not clear from the code alone, as the input parameter is not described and the function body is not provided.\n\nThe third function, `peek`, takes a single input parameter of type `bytes` and returns two values: a boolean and a uint256. The function is marked as `view`, meaning it does not modify the state of the contract. The purpose of this function is not clear from the code alone, as the input parameter is not described and the function body is not provided.\n\nWithout additional context or documentation, it is difficult to determine how these functions may be used in the larger project. However, it is clear that they are intended to interact with the contract's state in some way, and that they are designed to be called from outside the contract (since they are marked as `nonpayable`, `pure`, and `view`). \n\nHere is an example of how the `get` function might be called from a JavaScript program using the web3.js library:\n\n```\nconst contract = new web3.eth.Contract(contractAbi, contractAddress);\n\nconst data = \"0x12345678\"; // replace with actual data\ncontract.methods.get(data).call((err, result) => {\n if (err) {\n console.error(err);\n } else {\n const success = result[0];\n const value = result[1];\n console.log(`Success: ${success}, Value: ${value}`);\n }\n});\n```\n\nThis code assumes that `contractAbi` is an array containing the ABI (Application Binary Interface) of the smart contract, and that `contractAddress` is a string containing the address of the deployed contract. The `get` function is called with the `data` parameter, and the result is logged to the console.",
- "questions": "1. What is the purpose of this code and how does it fit into the overall functionality of the zoo project?\n- This code defines three functions with inputs, outputs, and state mutability. It is likely part of a larger smart contract system that interacts with a blockchain.\n\n2. What do the inputs and outputs of each function represent?\n- The inputs and outputs are defined using the \"internalType\" and \"type\" fields. For example, the \"get\" function takes in a bytes parameter named \"data\" and returns a bool and uint256 value.\n\n3. What is the difference between the state mutability types \"nonpayable\", \"pure\", and \"view\"?\n- \"nonpayable\" means that the function does not modify the state of the contract and does not accept Ether. \"pure\" means that the function does not read or modify the state of the contract. \"view\" means that the function does not modify the state of the contract but can read from it.",
- "checksum": "35b8cc009caee8077e023be2382b20e2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/router-slim.json b/.autodoc/docs/json/core/src/constants/abis/router-slim.json
deleted file mode 100644
index 3332052fa..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/router-slim.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "router-slim.json",
- "filePath": "core/src/constants/abis/router-slim.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/router-slim.json",
- "summary": "This code defines two functions that can be used to swap tokens on a decentralized exchange. The first function, `swapExactETHForTokens`, allows the user to swap a specified amount of Ether for a specified amount of a different token. The function takes in four parameters: `amountOutMin`, which is the minimum amount of the token the user wants to receive; `path`, which is an array of addresses representing the path of tokens to trade, starting with Ether and ending with the desired token; `to`, which is the address that will receive the traded tokens; and `deadline`, which is the timestamp by which the transaction must be included in a block. The function is marked as `payable`, meaning that the user must send Ether along with the transaction in order to execute the swap.\n\nThe second function, `swapExactTokensForTokens`, allows the user to swap a specified amount of one token for a specified amount of another token. The function takes in five parameters: `amountIn`, which is the amount of the input token to trade; `amountOutMin`, which is the minimum amount of the output token the user wants to receive; `path`, which is an array of addresses representing the path of tokens to trade, starting with the input token and ending with the output token; `to`, which is the address that will receive the traded tokens; and `deadline`, which is the timestamp by which the transaction must be included in a block. The function is marked as `nonpayable`, meaning that the user does not need to send any Ether along with the transaction in order to execute the swap.\n\nThese functions are likely part of a larger project that involves interacting with a decentralized exchange, such as Uniswap or SushiSwap. They could be used by developers building applications that allow users to easily swap tokens without having to manually go through the exchange interface. For example, a decentralized finance (DeFi) application could use these functions to allow users to swap between different tokens within the app. Here is an example of how the `swapExactETHForTokens` function could be called:\n\n```\nconst { ethers } = require('ethers');\n\nconst provider = new ethers.providers.JsonRpcProvider();\nconst signer = provider.getSigner();\n\nconst contractAddress = '0x1234567890123456789012345678901234567890';\nconst contractABI = [\n {\n \"inputs\": [\n { \"internalType\": \"uint256\", \"name\": \"amountOutMin\", \"type\": \"uint256\" },\n { \"internalType\": \"address[]\", \"name\": \"path\", \"type\": \"address[]\" },\n { \"internalType\": \"address\", \"name\": \"to\", \"type\": \"address\" },\n { \"internalType\": \"uint256\", \"name\": \"deadline\", \"type\": \"uint256\" }\n ],\n \"name\": \"swapExactETHForTokens\",\n \"outputs\": [{ \"internalType\": \"uint256[]\", \"name\": \"amounts\", \"type\": \"uint256[]\" }],\n \"stateMutability\": \"payable\",\n \"type\": \"function\"\n }\n];\n\nconst contract = new ethers.Contract(contractAddress, contractABI, signer);\n\nconst amountOutMin = ethers.utils.parseUnits('100', 'ether');\nconst path = ['0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', '0x6b175474e89094c44da98b954eedeac495271d0f'];\nconst to = '0x1234567890123456789012345678901234567890';\nconst deadline = Math.floor(Date.now() / 1000) + 60 * 10; // 10 minutes from now\n\nconst tx = await contract.swapExactETHForTokens(amountOutMin, path, to, deadline, { value: ethers.utils.parseUnits('1', 'ether') });\nawait tx.wait();\n```\n\nThis code uses the `ethers` library to interact with the contract at `contractAddress` using the `contractABI`. It then calls the `swapExactETHForTokens` function with the specified parameters, including sending 1 Ether along with the transaction. The function returns an array of `amounts`, which represents the actual amounts of tokens received in the trade. The code waits for the transaction to be confirmed on the blockchain before continuing.",
- "questions": "1. What is the purpose of this code?\n - This code defines two functions for swapping tokens on a blockchain network.\n\n2. What are the inputs and outputs of the `swapExactETHForTokens` function?\n - The inputs are `amountOutMin` (minimum amount of output tokens), `path` (array of token addresses), `to` (recipient address), and `deadline` (timestamp). The output is an array of `amounts` of output tokens.\n\n3. What is the difference in `stateMutability` between the two functions?\n - The `swapExactETHForTokens` function is `payable`, meaning it can receive Ether along with its function call. The `swapExactTokensForTokens` function is `nonpayable`, meaning it cannot receive Ether.",
- "checksum": "b8feaf4d6494922d7d3b41764fad6d04"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/sushi.json b/.autodoc/docs/json/core/src/constants/abis/sushi.json
deleted file mode 100644
index d0b093228..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/sushi.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "sushi.json",
- "filePath": "core/src/constants/abis/sushi.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/sushi.json",
- "summary": "The code provided is a JSON representation of the ABI (Application Binary Interface) for a smart contract. The ABI is a specification that defines how to interact with a smart contract, including the functions and events it exposes, their inputs and outputs, and their types. \n\nThe smart contract represented by this ABI is likely a token contract, as it includes functions such as `balanceOf`, `transfer`, `approve`, `allowance`, and `totalSupply`. The contract also includes functions related to delegation of voting power, such as `delegate`, `getCurrentVotes`, and `getPriorVotes`. \n\nThe ABI also includes several events that can be emitted by the contract, such as `Transfer`, `Approval`, `DelegateChanged`, `DelegateVotesChanged`, and `OwnershipTransferred`. These events can be used to track changes to the state of the contract and trigger actions in other parts of the system.\n\nDevelopers can use this ABI to interact with the smart contract from their applications or other smart contracts. For example, a developer could use the `balanceOf` function to check the balance of a particular address, or the `transfer` function to send tokens from one address to another. The delegation functions could be used to allow token holders to delegate their voting power to other addresses.\n\nHere is an example of how a developer might use this ABI to interact with the contract using the web3.js library:\n\n```\nconst Web3 = require('web3');\nconst abi = [ ... ]; // insert the ABI provided in the question\nconst contractAddress = '0x123...'; // insert the address of the deployed contract\n\nconst web3 = new Web3('https://mainnet.infura.io/v3/your-project-id');\nconst contract = new web3.eth.Contract(abi, contractAddress);\n\n// Get the balance of an address\nconst balance = await contract.methods.balanceOf('0x456...').call();\nconsole.log(`Balance: ${balance}`);\n\n// Transfer tokens to another address\nconst tx = await contract.methods.transfer('0x789...', 100).send({ from: '0x456...' });\nconsole.log(`Transaction hash: ${tx.transactionHash}`);\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code defines a smart contract with various functions related to token management, including transferring tokens, checking balances, and delegating voting power.\n\n2. What is the significance of the different event types defined in this code?\n- The different event types defined in this code allow for tracking and logging of important actions within the smart contract, such as approvals, transfers, and changes in ownership or voting power.\n\n3. How does the delegation functionality work in this smart contract?\n- The delegation functionality allows token holders to delegate their voting power to another address, which can then be used to vote on proposals within the associated governance system. This is done through the `delegate` and `delegateBySig` functions, and is tracked through the `DelegateChanged` and `DelegateVotesChanged` events.",
- "checksum": "ea28a8539e4fd910479c121bff32bd5f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/swaave.json b/.autodoc/docs/json/core/src/constants/abis/swaave.json
deleted file mode 100644
index bfefccf4e..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/swaave.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "swaave.json",
- "filePath": "core/src/constants/abis/swaave.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/swaave.json",
- "summary": "The code provided is a Solidity smart contract that defines a set of functions related to saving and swapping tokens. The contract has a constructor function that takes no inputs and does not return anything. \n\nThe first function defined in the contract is called `saave`, which takes a single input parameter of type `uint256` and does not return anything. This function is used to save a certain amount of tokens to the contract. The second function, `saaveTo`, takes two input parameters: an address and a `uint256` amount, and saves the specified amount of tokens to the specified address. Both of these functions have a `stateMutability` of `nonpayable`, meaning they cannot receive any Ether along with the function call.\n\nThe next two functions, `swaave` and `swaaveTo`, are used to swap Ether for tokens. `swaave` is a payable function, meaning it can receive Ether along with the function call, and it does not take any input parameters. `swaaveTo` takes two input parameters: an address and a `uint256` amount, and swaps the specified amount of Ether for tokens and sends them to the specified address. Both of these functions have a `stateMutability` of `payable`.\n\nThe remaining four functions are used to withdraw tokens or Ether from the contract. `unSaave` and `unSaaveTo` are used to withdraw saved tokens, while `unSwaave` and `unSwaaveTo` are used to withdraw swapped Ether. All four of these functions take the same input parameters as their corresponding `saave` and `swaave` functions, respectively. All four of these functions have a `stateMutability` of `nonpayable`.\n\nFinally, the contract includes a fallback function with a `stateMutability` of `payable`. This function is executed when the contract receives Ether without a specific function call. \n\nOverall, this contract provides a basic set of functions for saving and swapping tokens and Ether. It can be used as a building block for more complex financial applications within the larger project. Here is an example of how the `saave` function could be called:\n\n```\ncontract MyContract {\n address public zooContractAddress = 0x1234567890123456789012345678901234567890;\n \n function saveTokens(uint256 amount) public {\n IZoo(zooContractAddress).saave(amount);\n }\n}\n\ninterface IZoo {\n function saave(uint256 amount) external;\n}\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n Answer: Without additional context, it is unclear what this code does or what its purpose is. It appears to define a set of functions related to saving and swapping tokens, but more information is needed to understand its full functionality.\n\n2. What is the expected input and output for each function?\n Answer: The code provides some information about the input and output for each function, such as the data types and names of the parameters and whether the function is payable or nonpayable. However, it does not provide information about the expected behavior or output of each function, which would be helpful for understanding how to use them.\n\n3. Are there any dependencies or external contracts required for this code to function properly?\n Answer: It is unclear from this code whether there are any dependencies or external contracts required for it to function properly. Additional context or documentation would be needed to determine if there are any other contracts or libraries that need to be deployed or imported for this code to work as intended.",
- "checksum": "da0b7ac517e69077d82756c9ff0ec52c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/timelock.json b/.autodoc/docs/json/core/src/constants/abis/timelock.json
deleted file mode 100644
index c71e66f48..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/timelock.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "timelock.json",
- "filePath": "core/src/constants/abis/timelock.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/timelock.json",
- "summary": "The code provided is a Solidity smart contract that defines a governance mechanism for a decentralized application. The contract is designed to allow for the execution of transactions on behalf of the application, with the ability to cancel or delay transactions if necessary. \n\nThe contract includes a constructor function that takes two arguments: an address for the contract's administrator and a delay time for transaction execution. The contract also includes several events that are emitted when certain actions are taken, such as canceling or executing a transaction. \n\nThe contract includes several functions that allow for the management of the governance mechanism. The `acceptAdmin` function allows the administrator to accept their role, while the `setPendingAdmin` function allows for the appointment of a new administrator. The `setDelay` function allows for the adjustment of the delay time for transaction execution. \n\nThe `queueTransaction` function allows for the queuing of a transaction, which can then be executed after the specified delay time has passed. The `executeTransaction` function allows for the execution of a transaction that has been queued, while the `cancelTransaction` function allows for the cancellation of a queued transaction. \n\nOverall, this contract provides a governance mechanism for a decentralized application that allows for the execution of transactions while providing the ability to cancel or delay transactions if necessary. This contract can be used as a building block for larger decentralized applications that require a governance mechanism. \n\nExample usage of this contract could include a decentralized exchange that uses this contract to manage the execution of trades. The contract could be used to ensure that trades are executed in a timely manner while also providing the ability to cancel or delay trades if necessary.",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code implements a contract that allows for delayed execution of transactions, with the ability to cancel or queue transactions. It solves the problem of needing to execute transactions at a specific time or after a certain delay.\n\n2. What are the different events defined in this code and when are they emitted?\n- There are four different events defined in this code: `CancelTransaction`, `ExecuteTransaction`, `NewAdmin`, and `NewDelay`. They are emitted when a transaction is cancelled, executed, the admin address is changed, and the delay time is changed, respectively.\n\n3. What are the different functions defined in this code and what do they do?\n- There are several functions defined in this code, including a constructor, getters for various constants, and functions for accepting a new admin, cancelling and executing transactions, setting the delay time, and setting a pending admin. The `receive` function is also defined to allow the contract to receive payments.",
- "checksum": "c78928aa2bd461e6babecbfbfda0621a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/uniswap-v2-factory.json b/.autodoc/docs/json/core/src/constants/abis/uniswap-v2-factory.json
deleted file mode 100644
index e105333f7..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/uniswap-v2-factory.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "uniswap-v2-factory.json",
- "filePath": "core/src/constants/abis/uniswap-v2-factory.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/uniswap-v2-factory.json",
- "summary": "The code provided is a Solidity smart contract that defines a set of functions and events for creating and managing pairs of tokens on a decentralized exchange. The contract is part of the larger project called \"zoo\" and is likely used in conjunction with other contracts to create a fully functional exchange.\n\nThe contract has a constructor function that takes an address parameter and sets it as the \"_feeToSetter\" variable. This variable is used to determine who has the ability to set the fee charged for trades on the exchange. The contract also defines an event called \"PairCreated\" that is emitted whenever a new token pair is created on the exchange.\n\nThe contract has several functions that allow for the creation and management of token pairs. The \"createPair\" function takes two token addresses as parameters and creates a new pair on the exchange. The function returns the address of the newly created pair. The \"getPair\" function takes two token addresses as parameters and returns the address of the corresponding pair on the exchange.\n\nThe contract also has functions for setting the fee charged for trades on the exchange. The \"setFeeTo\" function takes an address parameter and sets it as the \"_feeTo\" variable, which determines where the fees collected from trades are sent. The \"setFeeToSetter\" function takes an address parameter and sets it as the \"_feeToSetter\" variable, which determines who has the ability to set the fee charged for trades on the exchange.\n\nOverall, this contract provides the basic functionality for creating and managing token pairs on a decentralized exchange. It is likely used in conjunction with other contracts to create a fully functional exchange. Below is an example of how the \"createPair\" function could be used:\n\n```\n// Assume we have two token addresses: tokenA and tokenB\n// We want to create a new pair on the exchange\naddress newPair = zoo.createPair(tokenA, tokenB);\n```",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code defines a smart contract that creates and manages pairs of tokens on a decentralized exchange. It allows users to trade tokens without the need for a centralized exchange.\n\n2. What events can trigger the `PairCreated` event and what information does it provide?\n- The `PairCreated` event is triggered when a new token pair is created on the exchange. It provides the addresses of the two tokens being paired, the address of the new pair contract, and a uint256 value.\n\n3. What is the difference between the `feeTo` and `feeToSetter` functions?\n- The `feeTo` function returns the address that receives the trading fees collected by the exchange. The `feeToSetter` function returns the address that has permission to update the `feeTo` address.",
- "checksum": "1c539456f58884b2d97afba0358a4cd6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/uniswap-v2-router-02-no-eth.json b/.autodoc/docs/json/core/src/constants/abis/uniswap-v2-router-02-no-eth.json
deleted file mode 100644
index 452c1b670..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/uniswap-v2-router-02-no-eth.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "uniswap-v2-router-02-no-eth.json",
- "filePath": "core/src/constants/abis/uniswap-v2-router-02-no-eth.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/uniswap-v2-router-02-no-eth.json",
- "summary": "The code provided is a JSON representation of a smart contract's ABI (Application Binary Interface). ABI is a standard interface for smart contracts that defines how to interact with them. It specifies the methods and their inputs and outputs that can be called by external parties. \n\nThe smart contract in question is related to a decentralized exchange (DEX) and provides various functions for swapping and adding/removing liquidity from a liquidity pool. The functions include `swapExactTokensForTokens`, `swapExactTokensForTokensSupportingFeeOnTransferTokens`, `swapTokensForExactTokens`, `addLiquidity`, `removeLiquidity`, and `removeLiquidityWithPermit`. \n\nThe `swapExactTokensForTokens` function allows users to swap a specific amount of one token for another token. The `swapExactTokensForTokensSupportingFeeOnTransferTokens` function is similar but supports tokens that have a transfer fee. The `swapTokensForExactTokens` function allows users to specify the amount of the output token they want to receive and the maximum amount of the input token they are willing to spend. \n\nThe `addLiquidity` function allows users to add liquidity to a pool by depositing equal values of two tokens. The `removeLiquidity` function allows users to remove liquidity from a pool and receive back the deposited tokens. The `removeLiquidityWithPermit` function is similar but allows users to approve the transaction using a permit instead of a signature. \n\nOverall, this smart contract provides the necessary functions for users to interact with a liquidity pool on a DEX. Developers can use this contract as a building block to create their own DEX or integrate it into an existing project. For example, a developer could use this contract to create a DEX that supports swapping between specific tokens or to add liquidity to a pool for a specific token pair.",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code provides a set of functions for swapping and adding/removing liquidity between different tokens on a decentralized exchange. It allows users to trade tokens without the need for a centralized exchange.\n\n2. What is the expected input and output format for each function?\n- Each function has a specific set of input parameters and output values, which are defined in the code. The input parameters include addresses of tokens, amounts of tokens, and deadlines for transactions. The output values include amounts of tokens and liquidity.\n\n3. Are there any security measures in place to prevent unauthorized access or malicious attacks?\n- The code includes a function for removing liquidity with a permit, which requires a digital signature from the token owner. This helps to prevent unauthorized access to the tokens. However, it is unclear if there are any other security measures in place to prevent malicious attacks.",
- "checksum": "fedd3726c4a3ece79d93a787fb6cab61"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/weth.json b/.autodoc/docs/json/core/src/constants/abis/weth.json
deleted file mode 100644
index 1e80e479c..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/weth.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "weth.json",
- "filePath": "core/src/constants/abis/weth.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/weth.json",
- "summary": "The code provided is a JSON representation of the ABI (Application Binary Interface) for a smart contract. The ABI is a specification that defines how to interact with a smart contract, including the functions it exposes, their inputs and outputs, and the events it emits. \n\nThe smart contract appears to be a basic implementation of an ERC20 token, a standard interface for fungible tokens on the Ethereum blockchain. The functions defined in the ABI include `transfer`, `transferFrom`, `approve`, `balanceOf`, `allowance`, `totalSupply`, `name`, `symbol`, `decimals`, `deposit`, and `withdraw`. These functions are commonly used in ERC20 tokens to manage the transfer of tokens between addresses, check balances, and approve transfers on behalf of other addresses. \n\nThe smart contract also emits four events: `Approval`, `Transfer`, `Deposit`, and `Withdrawal`. These events are used to notify external applications of state changes within the smart contract. For example, the `Transfer` event is emitted whenever tokens are transferred between addresses, allowing external applications to track the movement of tokens. \n\nOverall, this code provides a blueprint for how to interact with the smart contract and use its functions to manage ERC20 tokens. Developers can use this ABI to build applications that interact with the smart contract, such as wallets, exchanges, and other token management tools. \n\nHere is an example of how to use the `transfer` function to send tokens from one address to another:\n\n```\nconst contract = new web3.eth.Contract(abi, contractAddress);\n\n// Transfer 100 tokens from sender to recipient\ncontract.methods.transfer(recipientAddress, 100).send({from: senderAddress})\n .then((receipt) => {\n console.log('Tokens transferred successfully');\n })\n .catch((error) => {\n console.error('Error transferring tokens:', error);\n });\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n - This code defines a set of functions and events for a smart contract that manages a token. It allows for transfers, approvals, and balance checks of the token.\n2. What is the significance of the \"payable\" and \"stateMutability\" properties in the function definitions?\n - The \"payable\" property indicates whether a function can receive Ether as part of a transaction, while the \"stateMutability\" property indicates whether a function changes the state of the contract or only reads from it.\n3. What is the purpose of the events defined in this code?\n - The events are used to notify external systems when certain actions occur within the contract, such as when a transfer or approval is made, or when Ether is deposited or withdrawn.",
- "checksum": "23a2ccb440f06b4a57db0c841250d94a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/abis/zenko.json b/.autodoc/docs/json/core/src/constants/abis/zenko.json
deleted file mode 100644
index 3fdbf59e8..000000000
--- a/.autodoc/docs/json/core/src/constants/abis/zenko.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "zenko.json",
- "filePath": "core/src/constants/abis/zenko.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/abis/zenko.json",
- "summary": "This code defines a set of functions that facilitate the conversion of various types of assets in and out of the BentoBox smart contract. The BentoBox is a smart contract that acts as a shared pool of assets for other smart contracts to use. The functions in this code allow for the conversion of assets to and from the BentoBox, as well as to and from other types of assets such as Compound cTokens and Kashi margin tokens.\n\nThe `exchangeRateStoredInternal` function takes a Compound cToken address as input and returns the current exchange rate between the cToken and its underlying asset. This function is used to calculate the underlying asset value of a given cToken balance.\n\nThe `fromBento` function takes an ERC20 token address and a share amount as input and returns the corresponding amount of the token. This function is used to convert BentoBox shares back into their underlying asset.\n\nThe `fromCtoken` function takes a Compound cToken address and a cToken amount as input and returns the corresponding amount of the underlying asset. This function is used to convert cTokens back into their underlying asset.\n\nThe `fromKashi` function takes a Kashi margin token address and a margin token amount as input and returns the corresponding share amount. This function is used to convert Kashi margin tokens back into their underlying asset.\n\nThe `toBento` function takes an ERC20 token address and an amount as input and returns the corresponding share amount. This function is used to convert an asset into BentoBox shares.\n\nThe `toCtoken` function takes a Compound cToken address and an underlying asset amount as input and returns the corresponding cToken amount. This function is used to convert an underlying asset into cTokens.\n\nThe `toKashi` function takes a Kashi margin token address and an underlying asset amount as input and returns the corresponding fraction of the margin token. This function is used to convert an underlying asset into Kashi margin tokens.\n\nOverall, these functions provide a convenient way for other smart contracts to interact with the BentoBox and other asset types in a standardized way. For example, a lending protocol could use these functions to convert assets into BentoBox shares and then use those shares to provide liquidity to other protocols.",
- "questions": "1. What is the purpose of this code file?\n- This code file contains functions related to exchanging tokens between different protocols such as Compound and Kashi.\n\n2. What are the input and output types for each function?\n- Each function has a different set of input and output types, which are specified in the \"inputs\" and \"outputs\" fields of each function object.\n\n3. Are there any other dependencies or requirements for using these functions?\n- It is unclear from this code file whether there are any other dependencies or requirements for using these functions, such as the need for specific versions of smart contracts or external libraries.",
- "checksum": "3c4e73b2a164b1821e2c445c555dc10d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/addresses.json b/.autodoc/docs/json/core/src/constants/addresses.json
deleted file mode 100644
index 580d421c0..000000000
--- a/.autodoc/docs/json/core/src/constants/addresses.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "addresses.ts",
- "filePath": "core/src/constants/addresses.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/addresses.ts",
- "summary": "This code defines a JavaScript object called `addresses` that contains six key-value pairs. Each key represents a specific cryptocurrency exchange and each value represents the address of a smart contract on that exchange's blockchain. The exchanges and their corresponding smart contract addresses are as follows:\n\n- LBTC_Eth: \"0x526903Ee6118de6737D11b37f82fC7f69B13685D\"\n- LBTC_Lux: \"0x8c07F93A76213c0BE738ded6110403b6d0ceE286\"\n- LETH_Eth: \"0xAA3AE951A7925F25aE8Ad65b052a76Bd8f052598\"\n- LETH_Lux: \"0x41e51eFcdA08fDFB84f4b1caa4b7f03c67FA431b\"\n- Teleport_Eth: \"0x60D9B4552b67792D4E65B4D3e27de0EfbCd219bA\"\n- Teleport_Lux: \"0x69baCe12fCf05CdbAd519b5B2fd5037383811A89\"\n\nThis code is likely used in the larger project to facilitate transactions between different cryptocurrencies on different exchanges. By storing the smart contract addresses in this object, the project can easily reference them when needed without having to hardcode them into the code. For example, if the project needs to execute a transaction on the LBTC_Eth exchange, it can simply reference `addresses.LBTC_Eth` instead of hardcoding the address into the code.\n\nHere is an example of how this code might be used in the larger project:\n\n```\nimport addresses from 'zoo';\n\nconst lbtcEthAddress = addresses.LBTC_Eth;\nconst teleportLuxAddress = addresses.Teleport_Lux;\n\n// Use the addresses to execute a transaction on the LBTC_Eth exchange\n// or the Teleport_Lux exchange\n```",
- "questions": "1. What is the purpose of this code?\n - This code exports an object containing addresses for various token pairs on different networks.\n\n2. What do the keys in the `addresses` object represent?\n - The keys represent the token pair and the network they are on, with the format `TOKEN1_TOKEN2: \"NETWORK\"`.\n\n3. Are these addresses static or dynamic?\n - It's unclear from this code alone whether these addresses are static or dynamically generated at runtime.",
- "checksum": "964bb8437e58a9c69e854ec2455bb98e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/chainIds.json b/.autodoc/docs/json/core/src/constants/chainIds.json
deleted file mode 100644
index 09eb43683..000000000
--- a/.autodoc/docs/json/core/src/constants/chainIds.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "chainIds.ts",
- "filePath": "core/src/constants/chainIds.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/chainIds.ts",
- "summary": "The code above defines an enum called `ChainId` which represents the different blockchain networks that the project can interact with. The purpose of this code is to provide a way for the project to easily switch between different networks without having to hardcode the network IDs throughout the codebase.\n\nThe `ChainId` enum contains several network IDs, including `MAINNET`, `RINKEBY`, `GÖRLI`, `BSC`, and `BSC_TESTNET`. These IDs correspond to the Ethereum mainnet, Rinkeby testnet, Göerli testnet, Binance Smart Chain mainnet, and Binance Smart Chain testnet, respectively.\n\nBy using this enum, the project can easily switch between different networks by simply changing the value of a single variable. For example, if the project needs to interact with the Rinkeby testnet, it can set the `chainId` variable to `ChainId.RINKEBY`. This makes the code more modular and easier to maintain.\n\nHere's an example of how this enum might be used in the larger project:\n\n```typescript\nimport { ChainId } from 'zoo';\n\nconst chainId = ChainId.RINKEBY;\n\n// Use the chainId variable throughout the project to interact with the Rinkeby testnet\n```\n\nOverall, the `ChainId` enum provides a simple and flexible way for the project to interact with different blockchain networks.",
- "questions": "1. What is the purpose of this code and how is it used in the zoo project?\n This code defines an enum called ChainId that lists the different chain IDs for various networks. It is likely used in the zoo project to specify which network to interact with when making transactions or retrieving data.\n\n2. Why are the HARDHAT chain IDs commented out?\n It is unclear from the code why the HARDHAT chain IDs are commented out. It is possible that they are not currently being used in the project or were added for testing purposes only.\n\n3. Are there any other chain IDs that could be added to this enum?\n Yes, there are many other chain IDs that could potentially be added to this enum depending on the needs of the project. For example, additional test networks or other public blockchains could be included.",
- "checksum": "4536f5ca1a20a3fd1df1572b1ac19e20"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/contracts.json b/.autodoc/docs/json/core/src/constants/contracts.json
deleted file mode 100644
index d8bd424d4..000000000
--- a/.autodoc/docs/json/core/src/constants/contracts.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "contracts.ts",
- "filePath": "core/src/constants/contracts.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/contracts.ts",
- "summary": "The code in this file is responsible for retrieving contract information from a JSON file and organizing it into a usable format. The JSON file is imported at the beginning of the file and contains contract information for various networks. \n\nThe first part of the code creates two arrays: `networkIds` and `networkNames`. `networkIds` is an array of the keys in the `contractsJSON` object, which correspond to the network IDs. `networkNames` is an array of all the contract names for all networks. \n\nThe next part of the code creates an object called `contractsByChainIdAndNetwork`. This object is organized by network ID and contains an object for each network that contains all the contracts for that network. Each contract is represented by an object that contains the contract's bytecode, ABI, and other information. \n\nThe final part of the code defines two functions: `getContractsByKey` and two exports: `addresses` and `abis`. `getContractsByKey` takes a string argument `key` and returns an object that contains all the contracts for all networks organized by contract name and the value of the specified `key`. The `addresses` export is the result of calling `getContractsByKey` with the argument `'address'`, and the `abis` export is the result of calling `getContractsByKey` with the argument `'abi'`. \n\nThis code is likely used in the larger project to retrieve contract information and use it in other parts of the codebase. For example, the `addresses` and `abis` exports could be used to interact with the contracts on the various networks.",
- "questions": "1. What is the purpose of the `contracts.json` file being imported at the beginning of the code?\n- The `contracts.json` file is being imported to provide data for the creation of `contractsByChainIdAndNetwork` object.\n\n2. What is the purpose of the `getContractsByKey` function?\n- The `getContractsByKey` function is used to extract specific data from the `contractsByChainIdAndNetwork` object and return it in a specific format.\n\n3. Why does the code include a comment that says \"By the way, this function is terrible. Change it at your own peril\"?\n- The comment is a warning to other developers that the `getContractsByKey` function is not well-written and should be refactored with caution.",
- "checksum": "ae79e3fcf4b67ad8fa3d7de7b974df26"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/index.json b/.autodoc/docs/json/core/src/constants/index.json
deleted file mode 100644
index 250e529c4..000000000
--- a/.autodoc/docs/json/core/src/constants/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/constants/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/index.ts",
- "summary": "This code exports various constants and variables that are used throughout the zoo project. \n\nThe `POOL_DENY` constant is an array of pool IDs that are not allowed to be used in the project. \n\nThe `AVERAGE_BLOCK_TIME_IN_SECS` constant is the average block time in seconds, which is used to avoid ongoing proposals past the displayed time. \n\nThe `MERKLE_ROOT` constant is the URL of the merkle root used for vesting. \n\nThe `NetworkContextName` constant is the name of the network context. \n\nThe `INITIAL_ALLOWED_SLIPPAGE` constant is the default allowed slippage in basis points. \n\nThe `DEFAULT_DEADLINE_FROM_NOW` constant is the default deadline from now, denominated in seconds. \n\nThe `BIG_INT_SECONDS_IN_WEEK` constant is the number of seconds in a week, represented as a big integer. \n\nThe `BIG_INT_ZERO` constant is a big integer with a value of zero. \n\nThe `ONE_BIPS` constant is one basis point, represented as a percent. \n\nThe `BIPS_BASE` constant is a big integer with a value of 10,000, which is the base for basis points. \n\nThe `ALLOWED_PRICE_IMPACT_LOW`, `ALLOWED_PRICE_IMPACT_MEDIUM`, and `ALLOWED_PRICE_IMPACT_HIGH` constants are used for warning states when the price impact exceeds a certain threshold. \n\nThe `PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN` constant is the minimum price impact without a fee that requires the user to confirm the transaction. \n\nThe `BLOCKED_PRICE_IMPACT_NON_EXPERT` constant is the maximum price impact for non-expert mode. \n\nThe `MIN_ETH` constant is the minimum amount of ETH that can be sent. \n\nThe `BETTER_TRADE_LESS_HOPS_THRESHOLD` constant is the threshold for better trades with less hops. \n\nThe `ZERO_PERCENT` and `ONE_HUNDRED_PERCENT` constants are used to represent zero and one hundred percent, respectively. \n\nThe `BLOCKED_ADDRESSES` constant is an array of blocked addresses. \n\nThe `ANALYTICS_URL` constant is an object that maps chain IDs to analytics URLs. \n\nThe `EIP_1559_ACTIVATION_BLOCK` constant is an object that maps chain IDs to EIP-1559 activation blocks. \n\nThese constants and variables are used throughout the zoo project to provide default values and other configuration options. For example, the `INITIAL_ALLOWED_SLIPPAGE` constant is used to set the default allowed slippage for trades, while the `BLOCKED_ADDRESSES` constant is used to block certain addresses from being used in the project.",
- "questions": "1. What is the purpose of the `POOL_DENY` array?\n- The `POOL_DENY` array contains a list of pool IDs that are denied for use in the project.\n\n2. What is the significance of the `MERKLE_ROOT` constant?\n- The `MERKLE_ROOT` constant contains the URL for the merkle root used for vesting in the project.\n\n3. What is the purpose of the `ANALYTICS_URL` object?\n- The `ANALYTICS_URL` object contains URLs for analytics pages for different chain IDs used in the project.",
- "checksum": "ead5c77c6fc49fa822d6b0ab269b332e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/ipfs.json b/.autodoc/docs/json/core/src/constants/ipfs.json
deleted file mode 100644
index bf21f0703..000000000
--- a/.autodoc/docs/json/core/src/constants/ipfs.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ipfs.ts",
- "filePath": "core/src/constants/ipfs.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/ipfs.ts",
- "summary": "This code is responsible for exporting a default object that maps different ChainIds to a specific JSON file containing IPFS upload information. The `ChainId` object is imported from the `@zoolabs/zdk` library, which is likely a library specific to the larger zoo project. \n\nThe purpose of this code is to provide a way for the zoo project to easily access IPFS upload information for different ChainIds. The `localhostUploads` variable is imported from a separate file located at `../ipfs/localhost.json`, which likely contains the actual IPFS upload information. \n\nThe exported object uses the `ChainId` object as keys and the `localhostUploads` variable as values. This means that when the zoo project needs to access IPFS upload information for a specific ChainId, it can simply import this object and access the corresponding value. \n\nFor example, if the zoo project needs to access IPFS upload information for the `MAINNET` ChainId, it can import this object and access the `localhostUploads` value for the `MAINNET` key like so:\n\n```\nimport ipfsUploads from './path/to/this/file'\n\nconst mainnetUploads = ipfsUploads[ChainId.MAINNET]\n```\n\nOverall, this code provides a simple and organized way for the zoo project to access IPFS upload information for different ChainIds.",
- "questions": "1. What is the purpose of the `ChainId` import from `@zoolabs/zdk`?\n - The `ChainId` import is likely used to specify different chains for the `localhostUploads` object based on the current chain ID.\n\n2. What is the `localhost.json` file and where is it located?\n - The `localhost.json` file is likely a configuration file containing information about the local IPFS node. Its location is relative to the current file's location in the `../ipfs/` directory.\n\n3. Why is the `localhostUploads` object assigned to multiple chain IDs?\n - The `localhostUploads` object is likely used for testing purposes and is assigned to multiple chain IDs to ensure compatibility across different chains during development and testing.",
- "checksum": "7f24b4377a0d46ab975b9484adc9cdc3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/moralis.json b/.autodoc/docs/json/core/src/constants/moralis.json
deleted file mode 100644
index 046563f41..000000000
--- a/.autodoc/docs/json/core/src/constants/moralis.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "moralis.ts",
- "filePath": "core/src/constants/moralis.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/moralis.ts",
- "summary": "The code defines a configuration object for the Moralis backend service, which is used in the larger zoo project. The configuration object contains two properties: `applicationID` and `serverURL`. The `applicationID` property is an object that maps different chain IDs to their respective application IDs. The `serverURL` property is an object that maps different chain IDs to their respective server URLs.\n\nThe `moralisConfig` function takes a `chainId` parameter and returns an object with the `applicationID` and `serverURL` properties for the specified chain ID. This function is used to retrieve the Moralis configuration for a specific chain ID, which is then used to connect to the Moralis backend service.\n\nFor example, if the `chainId` is `97`, the `moralisConfig` function will return an object with the `applicationID` and `serverURL` properties for the `97` chain ID. This object can then be used to connect to the Moralis backend service for the `97` chain.\n\nHere is an example usage of the `moralisConfig` function:\n\n```\nimport moralisConfig from 'zoo';\n\nconst chainId = 97;\nconst config = moralisConfig(chainId);\n\n// Use the config object to connect to the Moralis backend service\nMoralis.initialize(config.applicationID);\nMoralis.serverURL = config.serverURL;\n```\n\nOverall, this code provides a convenient way to manage the Moralis configuration for different chain IDs in the zoo project.",
- "questions": "1. What is the purpose of this code?\n - This code defines a configuration object with application IDs and server URLs for different chain IDs, and exports a function that returns the configuration for a given chain ID.\n\n2. What are the possible values for `chainId` parameter in the `moralisConfig` function?\n - The possible values for `chainId` parameter are 1337, 97, and 56, which correspond to different blockchain networks.\n\n3. Why are some lines of code commented out?\n - Some lines of code are commented out to indicate that they are not currently being used, but may be used in the future or in a different context.",
- "checksum": "ee67727000921dd0ab397bdea0f80e85"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/token-lists/sushiswap-v2-unsupported.tokenlist.json b/.autodoc/docs/json/core/src/constants/token-lists/sushiswap-v2-unsupported.tokenlist.json
deleted file mode 100644
index e7db9c258..000000000
--- a/.autodoc/docs/json/core/src/constants/token-lists/sushiswap-v2-unsupported.tokenlist.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "sushiswap-v2-unsupported.tokenlist.json",
- "filePath": "core/src/constants/token-lists/sushiswap-v2-unsupported.tokenlist.json",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/token-lists/sushiswap-v2-unsupported.tokenlist.json",
- "summary": "This code represents a JSON file that contains information about a list of unsupported tokens for the SushiSwap V2 platform. The purpose of this file is to provide a reference for developers and users to identify which tokens are not supported by the platform. \n\nThe file contains several key pieces of information. The \"name\" field provides a human-readable name for the list. The \"timestamp\" field indicates when the list was last updated. The \"version\" field specifies the version of the list using semantic versioning. The \"tags\" field can be used to add additional metadata to the list. The \"logoURI\" field provides a link to an image that can be used to represent the list. The \"keywords\" field contains an array of keywords that can be used to search for the list. Finally, the \"tokens\" field contains an array of objects that represent the unsupported tokens. \n\nEach token object contains several fields. The \"name\" field provides a human-readable name for the token. The \"address\" field contains the Ethereum address of the token contract. The \"symbol\" field contains the ticker symbol for the token. The \"decimals\" field specifies the number of decimal places used by the token. The \"chainId\" field specifies the Ethereum chain ID on which the token is deployed. Finally, the \"logoURI\" field provides a link to an image that can be used to represent the token.\n\nDevelopers and users can use this file to check whether a particular token is supported by the SushiSwap V2 platform. For example, a developer building a trading bot could use this file to filter out unsupported tokens when selecting which tokens to trade. Similarly, a user could use this file to check whether a particular token can be traded on the platform before attempting to make a trade. \n\nOverall, this file serves as an important reference for developers and users of the SushiSwap V2 platform, providing a comprehensive list of unsupported tokens and their associated metadata.",
- "questions": "1. What is the purpose of this code?\n This code defines a list of unsupported tokens for SushiSwap V2, including one token called \"Gold Tether\" with its address, symbol, and logo.\n\n2. What is the format of the logoURI?\n The logoURI is in IPFS format, indicating that the logo image is stored on the InterPlanetary File System.\n\n3. Are there any other tags besides the empty object?\n No, there are no other tags defined in this code.",
- "checksum": "6c2db401f5660f3b324c08ba64cc1bd1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/constants/types.json b/.autodoc/docs/json/core/src/constants/types.json
deleted file mode 100644
index 377a41d65..000000000
--- a/.autodoc/docs/json/core/src/constants/types.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "types.ts",
- "filePath": "core/src/constants/types.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/constants/types.ts",
- "summary": "This code defines two related data structures used in the larger zoo project. The first is an enum called `ConnectorNames` which lists the names of different types of connectors that can be used to interact with the zoo platform. These connectors include `Injected`, which refers to a browser extension like MetaMask, `WalletConnect`, which is a mobile wallet integration, and `BSC`, which is a reference to the Binance Smart Chain. \n\nThe second data structure is an object called `NETWORK_SYMBOL`. This object maps different `ChainId` values to their corresponding network symbols. `ChainId` is an enum defined in the `@zoolabs/zdk` library, which is imported at the top of the file. The `NETWORK_SYMBOL` object is defined using a TypeScript feature called an index signature, which allows for dynamic keys to be defined on an object. In this case, the keys are `ChainId` values and the values are strings representing the network symbols. \n\nThis code is likely used throughout the larger zoo project to provide a centralized way of referring to different types of connectors and network symbols. For example, other parts of the project may use the `ConnectorNames` enum to determine which type of connector to use for a given user. Similarly, the `NETWORK_SYMBOL` object may be used to display network information to users or to perform network-specific operations. \n\nHere is an example of how the `ConnectorNames` enum might be used in the larger project:\n\n```\nimport { ConnectorNames } from 'zoo';\n\nconst connector = getConnector(); // some function that returns a ConnectorNames value\nif (connector === ConnectorNames.Injected) {\n // use MetaMask or other injected connector\n} else if (connector === ConnectorNames.WalletConnect) {\n // use WalletConnect\n} else if (connector === ConnectorNames.BSC) {\n // use Binance Smart Chain\n} else {\n // handle other cases\n}\n```\n\nAnd here is an example of how the `NETWORK_SYMBOL` object might be used:\n\n```\nimport { ChainId, getNetwork } from '@zoolabs/zdk';\nimport { NETWORK_SYMBOL } from 'zoo';\n\nconst chainId = getNetwork().chainId; // get the current chain ID from the ZDK library\nconst networkSymbol = NETWORK_SYMBOL[chainId]; // look up the network symbol based on the chain ID\nconsole.log(`Current network symbol: ${networkSymbol}`);\n```",
- "questions": "1. What is the purpose of the `ConnectorNames` enum?\n - The `ConnectorNames` enum is used to define the different types of connectors that can be used to connect to the zoo project, including `Injected`, `WalletConnect`, and `BSC`.\n\n2. What is the `NETWORK_SYMBOL` constant used for?\n - The `NETWORK_SYMBOL` constant is used to map the `ChainId` enum values to their corresponding network symbols, such as `ETH` for the `MAINNET` and `RINKEBY` chains.\n\n3. Why are some of the `ChainId` values commented out in the `NETWORK_SYMBOL` constant?\n - Some of the `ChainId` values are commented out in the `NETWORK_SYMBOL` constant because they are not currently being used in the zoo project, but may be used in the future.",
- "checksum": "fa6c1f61b65ef9347d8e771e6901407d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/context/GifContext.json b/.autodoc/docs/json/core/src/context/GifContext.json
deleted file mode 100644
index 1fe432958..000000000
--- a/.autodoc/docs/json/core/src/context/GifContext.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "GifContext.tsx",
- "filePath": "core/src/context/GifContext.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/context/GifContext.tsx",
- "summary": "This code defines a React context and provider for managing a toggle between displaying GIFs and images. The `GifContext` is created using `React.createContext` and initialized with an `initialState` object. The `initialState` object is set to an empty object if the code is running on the server, and otherwise it is set to an object with a `gifMode` property that is either \"gif\" or \"image\", depending on whether the `localStorage` has a \"gifMode\" item. \n\nTwo actions are defined: `toggleGif` and `toggleImage`. Both actions set the \"gifMode\" item in `localStorage` to either \"gif\" or \"image\", respectively, and then dispatch an action object with a `type` property of either \"TOGGLE_GIFMODE\" or \"TOGGLE_IMAGEMODE\" and a `payload` property of either \"gif\" or \"image\". \n\nA reducer function is defined that takes a `state` object and an `action` object as arguments. The reducer function returns a new state object with the `gifMode` property set to the `payload` property of the action object, depending on the `type` property of the action object. \n\nFinally, a `GifProvider` component is defined that takes a `props` object as an argument. The `GifProvider` component uses `React.useReducer` to create a state object and a dispatch function based on the `reducer` function and `initialState`. The `GifProvider` component returns a `GifContext.Provider` component that wraps its children and provides the `state` object and `dispatch` function as values to the `GifContext`. \n\nThis code can be used in a larger project to manage a toggle between displaying GIFs and images. Other components in the project can use the `useGif` hook to access the `state` object and `dispatch` function from the `GifContext`. For example, a component that displays a list of images or GIFs could use the `state.gifMode` property to determine whether to display images or GIFs, and could use the `toggleGif` and `toggleImage` actions to update the `gifMode` property.",
- "questions": "1. What is the purpose of the `GifProvider` component?\n- The `GifProvider` component is used to provide a context for the `GifContext` and its state and dispatch values to be used by other components.\n\n2. What is the significance of the `localStorage` object in this code?\n- The `localStorage` object is used to store the `gifMode` value, which is retrieved and used as the initial state of the `GifContext` if the code is running in a browser environment.\n\n3. What is the difference between the `toggleGif` and `toggleImage` functions?\n- The `toggleGif` function sets the `gifMode` value in `localStorage` to \"gif\" and dispatches an action with a payload of \"gif\", while the `toggleImage` function sets the `gifMode` value in `localStorage` to \"image\" and dispatches an action with a payload of \"image\". These functions are used to toggle between two different modes for displaying images or gifs.",
- "checksum": "2ca8e84919b8374b8e3687ec9c55e957"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/data/events.json b/.autodoc/docs/json/core/src/data/events.json
deleted file mode 100644
index 98c847d0a..000000000
--- a/.autodoc/docs/json/core/src/data/events.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "events.json",
- "filePath": "core/src/data/events.json",
- "url": "zoo-labs/zoo/blob/master/core/src/data/events.json",
- "summary": "This code is a JSON file containing information about upcoming events related to the zoo project. The file contains an array of objects, with each object representing a single event. Each event object has several properties, including an ID, title, description, date, time, and location.\n\nThe purpose of this code is to provide a centralized location for storing and accessing information about upcoming events related to the zoo project. This information can be used by developers, project managers, and other stakeholders to plan and coordinate their work around these events.\n\nFor example, a developer working on a feature related to NFT Animals may want to know when the next Animal Party is scheduled so they can coordinate their work around that event. They can access this information from the JSON file and plan accordingly.\n\nSimilarly, a project manager may want to use this information to plan marketing campaigns around these events or to ensure that key stakeholders are available to attend important meetings or presentations.\n\nOverall, this code serves as a valuable resource for anyone involved in the zoo project, providing a centralized location for important event information that can be easily accessed and used to plan and coordinate work.",
- "questions": "1. What is the purpose of this code?\n This code contains information about two events related to the ZOO project, including their titles, descriptions, dates, times, and locations.\n\n2. What is the format of the data being used in this code?\n The data is in JSON format, with each event represented as an object containing key-value pairs for its various attributes.\n\n3. What other types of information might be included in the ZOO project?\n It is unclear from this code what other types of information or functionality might be included in the ZOO project beyond events and NFT creatures/eggs. Further exploration of the project's code and documentation would be necessary to determine this.",
- "checksum": "e93051587994f2144d6741b7e19e1266"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/data/market.json b/.autodoc/docs/json/core/src/data/market.json
deleted file mode 100644
index 81215ac38..000000000
--- a/.autodoc/docs/json/core/src/data/market.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "market.json",
- "filePath": "core/src/data/market.json",
- "url": "zoo-labs/zoo/blob/master/core/src/data/market.json",
- "summary": "This code defines a list of dictionaries, each representing an animal in a zoo. Each dictionary contains four key-value pairs: \"name\", \"image\", \"usdz\", and \"glb\". \n\nThe \"name\" key holds a string representing the name of the animal. The \"image\" key holds a string representing the file path to an image of the animal. The \"usdz\" key holds a string representing the file path to a USDZ 3D model of the animal, and the \"glb\" key holds a string representing the file path to a GLB 3D model of the animal.\n\nThis code is likely used in a larger project that involves displaying information about animals in a zoo, including images and 3D models. The list of dictionaries could be used to populate a database or to generate HTML pages dynamically. For example, the following Python code could be used to loop through the list and generate HTML code to display each animal's name, image, and 3D model:\n\n```\nfor animal in zoo:\n html = f\"{animal['name']}
\"\n html += f\"\"\n html += f\"
SLP Analytics
\nThis page displays analytics for the SushiSwap Liquidity Pair (SLP).
\nWelcome to the dashboard
\nThis is where you can view all your analytics data.
\n\n
\n );\n}\n\nexport default App;\n```\n\nIn this example, the `InfoCard` component is used twice to display different types of information. The first `InfoCard` displays the total sales amount, while the second `InfoCard` displays the number of new users.",
- "questions": "1. What is the purpose of the `formatNumber` function imported from the `functions` module?\n- The code does not use the `formatNumber` function, so a smart developer might wonder if it is necessary to import it or if it can be removed.\n\n2. What is the significance of the `InfoCardProps` interface?\n- The `InfoCardProps` interface defines the expected props for the `InfoCard` component, including the `text` and `number` props. A smart developer might wonder if there are any other props that can be passed to this component.\n\n3. What is the purpose of the `bg-dark-900` and `border-dark-700` CSS classes?\n- These CSS classes are used to style the `InfoCard` component, but a smart developer might wonder if they are part of a larger CSS framework or if they are custom classes defined within the project.",
- "checksum": "d3441a23f01497c4df64cfd82f9c4cc7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/analytics/ChartCard.json b/.autodoc/docs/json/core/src/features/analytics/ChartCard.json
deleted file mode 100644
index 49ce14944..000000000
--- a/.autodoc/docs/json/core/src/features/analytics/ChartCard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ChartCard.tsx",
- "filePath": "core/src/features/analytics/ChartCard.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/analytics/ChartCard.tsx",
- "summary": "The `ChartCard` component is responsible for rendering a card that displays a chart along with some related information. The component takes in several props, including `header`, `subheader`, `figure`, `change`, `chart`, `currentTimespan`, `timespans`, and `setTimespan`. \n\nThe `header` and `subheader` props are used to display some text information at the top of the card. The `figure` and `change` props are used to display a numerical value and its change over the past 24 hours, respectively. The `chart` prop is used to display a line graph, and the `currentTimespan`, `timespans`, and `setTimespan` props are used to allow the user to switch between different time spans for the chart.\n\nThe component is implemented using JSX and Tailwind CSS classes. The `classNames` function is imported from a `functions` module, and is used to conditionally apply different CSS classes based on the state of the component. The `formatNumber` function is also imported from the `functions` module, and is used to format the `figure` prop as a string with commas and an optional decimal point.\n\nThe `ColoredNumber` component is imported from a `ColoredNumber` module, and is used to display the `change` prop as a colored number with a percentage sign. The `LineGraph` component is imported from a `LineGraph` module, and is used to display the `chart` prop as a line graph with a gradient stroke.\n\nOverall, the `ChartCard` component provides a reusable way to display a chart with related information in a visually appealing and interactive way. It can be used in a larger project to display various types of data, such as financial data or user analytics. Here is an example of how the component might be used:\n\n```\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the result of the `type.getData` function, which is called with four arguments: `exchange`, `exchange1d`, `exchange2d`, and `dayData`. This means that the function will only be re-executed if one of these arguments changes.\n\n2. What is the significance of the `DashboardChartCardProps` interface?\n- The `DashboardChartCardProps` interface defines the props that can be passed to the `DashboardChartCard` component. In this case, it specifies that the `type` prop must be either `'liquidity'` or `'volume'`.\n\n3. What is the purpose of the `useActiveWeb3React` hook in this code?\n- The `useActiveWeb3React` hook is used to get the `chainId` value, which is then passed as an argument to several other hooks (`useBlock`, `useFactory`, and `useDayData`). This allows these hooks to retrieve data specific to the current blockchain network.",
- "checksum": "942decf72989cf80eabdeb0341c1dbf9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/analytics/Dashboard/DashboardTabs.json b/.autodoc/docs/json/core/src/features/analytics/Dashboard/DashboardTabs.json
deleted file mode 100644
index 5f115744a..000000000
--- a/.autodoc/docs/json/core/src/features/analytics/Dashboard/DashboardTabs.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "DashboardTabs.tsx",
- "filePath": "core/src/features/analytics/Dashboard/DashboardTabs.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/analytics/Dashboard/DashboardTabs.tsx",
- "summary": "This code is a React component that renders a set of tabs for a dashboard view. The component imports a `Tabs` component from a file located at `./../Tabs`. The `Tabs` component is likely a reusable component that renders a set of tabs based on an array of tab objects. \n\nThe `DashboardTabs` component defines an array of tab objects called `tabs`. Each tab object has a `name` property and a `type` property. The `name` property is a string that represents the name of the tab, and the `type` property is a string that represents the type of data that the tab displays. \n\nThe `DashboardTabs` component takes two props: `currentType` and `setType`. The `currentType` prop is a string that represents the currently selected tab type, and the `setType` prop is a function that updates the currently selected tab type. \n\nThe `DashboardTabs` component renders the `Tabs` component and passes in the `tabs` array, `currentType`, and `setType` props. This causes the `Tabs` component to render a set of tabs based on the `tabs` array, with the currently selected tab highlighted based on the `currentType` prop. When a user clicks on a tab, the `setType` function is called with the `type` property of the clicked tab object as an argument, which updates the `currentType` prop and causes the `Tabs` component to re-render with the newly selected tab highlighted.\n\nThis component can be used in a larger project to render a set of tabs for a dashboard view that allows users to switch between different types of data. For example, in a cryptocurrency trading platform, the `Top Farms` tab could display a list of the top liquidity pools, the `Top Pairs` tab could display a list of the top trading pairs, and the `Top Tokens` tab could display a list of the top tokens by market cap. The `DashboardTabs` component could be used to render these tabs and allow users to switch between them to view different types of data. \n\nExample usage:\n\n```\nimport DashboardTabs from './DashboardTabs'\n\nfunction Dashboard() {\n const [currentType, setCurrentType] = useState('pools')\n\n function setType(type) {\n setCurrentType(type)\n }\n\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `Tabs` import and where is it located?\n- The `Tabs` import is used in this file and is located in a file located at `./../Tabs`.\n2. What is the expected data structure of the `tabs` array?\n- The `tabs` array is expected to contain objects with a `name` property (string) and a `type` property (string).\n3. What is the expected input for the `DashboardTabs` function and what does it return?\n- The `DashboardTabs` function expects two props: `currentType` (string) and `setType` (function). It returns a JSX element that renders the `Tabs` component with the `tabs`, `currentType`, and `setType` props passed in.",
- "checksum": "b19279266b774d04ab46c86c1cf8e357"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/analytics/Farms/FarmList.json b/.autodoc/docs/json/core/src/features/analytics/Farms/FarmList.json
deleted file mode 100644
index fcfd2c034..000000000
--- a/.autodoc/docs/json/core/src/features/analytics/Farms/FarmList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "FarmList.tsx",
- "filePath": "core/src/features/analytics/Farms/FarmList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/analytics/Farms/FarmList.tsx",
- "summary": "The `FarmList` component is a React component that renders a table of farming pools. It takes an array of `pools` as a prop, where each pool is an object containing information about the pool's pair, rewards, liquidity, and APR. The component uses several other components and hooks to render the table, including `Table`, `DoubleCurrencyLogo`, `useCurrency`, `Image`, `ColoredNumber`, `formatNumber`, `formatNumberScale`, and `formatPercent`.\n\nThe `FarmListName` component is a subcomponent of `FarmList` that renders the name and logo of a pool's pair. It takes a `pair` prop, which is an object containing information about the pair's tokens, name, and type. It uses the `useCurrency` hook to get the currency objects for the pair's tokens, and the `DoubleCurrencyLogo` component to render the pair's logo.\n\nThe `Rewards` component is another subcomponent of `FarmList` that renders the rewards for a pool. It takes a `rewards` prop, which is an array of objects containing information about each reward's icon, token, and reward per day. It uses the `Image` component to render each reward's icon, and the `formatNumber` function to format each reward's reward per day.\n\nThe `FarmList` component uses the `useMemo` hook to memoize the `defaultSortBy` and `columns` variables. `defaultSortBy` is an object that specifies the default sorting for the table, and `columns` is an array of objects that specify the columns of the table. Each column object has a `Header` property that specifies the column header, an `accessor` property that specifies the data accessor for the column, a `Cell` property that specifies the cell renderer for the column, and an `align` property that specifies the alignment of the column. The `apr` column also has a `sortType` property that specifies a custom sorting function based on the annual APR.\n\nFinally, the `FarmList` component renders the `Table` component with the `columns` and `data` props, and the `defaultSortBy` prop if specified. If `pools` is falsy, the component renders nothing.\n\nThis component can be used to display a list of farming pools with their APR, liquidity, and rewards. It can be customized by changing the `columns` array to add or remove columns, or by changing the `Cell` property of each column to customize the rendering of each cell. It can also be styled using CSS classes or inline styles. Here is an example usage of the `FarmList` component:\n\n```jsx\nimport FarmList from './FarmList'\n\nconst pools = [\n {\n pair: {\n token0: {\n id: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',\n },\n token1: {\n id: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',\n },\n name: 'UNI-ETH',\n type: 'Sushi Farm',\n },\n rewards: [\n {\n icon: '/tokens/uni.png',\n token: 'UNI',\n rewardPerDay: 1000,\n },\n {\n icon: '/tokens/sushi.png',\n token: 'SUSHI',\n rewardPerDay: 500,\n },\n ],\n liquidity: 1000000,\n apr: {\n annual: 1000,\n monthly: 100,\n daily: 10,\n },\n },\n // more pools...\n]\n\nfunction App() {\n return \n
\n )\n}\n```\n\nIn this example, the Tabs component is passed an array of three tabs with different names and types. The currentType state variable is initialized to 'tab1', so the first tab is selected by default. The content for each tab is conditionally rendered based on the currentType variable. When the user clicks on a different tab, the setType function is called with the new type, causing the component to re-render with the new tab selected and the corresponding content displayed.",
- "questions": "1. What is the purpose of the `Tabs` component?\n- The `Tabs` component is used to render a set of tabs based on the `tabs` prop and handle tab selection based on the `currentType` and `setType` props.\n\n2. What is the `classNames` function and where is it imported from?\n- The `classNames` function is imported from a file located at `../../functions` and is used to conditionally concatenate CSS class names based on the provided arguments.\n\n3. What is the expected shape of the `tabs` prop?\n- The `tabs` prop is expected to be an array of objects, where each object represents a tab and has a `name` and `type` property.",
- "checksum": "8bf86b8c1e47f271d48a9e7bf39debcf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/CurrencyCard.json b/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/CurrencyCard.json
deleted file mode 100644
index e41755682..000000000
--- a/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/CurrencyCard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CurrencyCard.tsx",
- "filePath": "core/src/features/analytics/Tokens/Token/CurrencyCard.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/CurrencyCard.tsx",
- "summary": "The code above defines a React component called `CurrencyCard`. This component is responsible for rendering a card that displays information about a cryptocurrency token. The component takes two props: `token` and `symbol`. The `token` prop is a string that represents the token's unique identifier, while the `symbol` prop is a string that represents the token's symbol.\n\nThe component imports two things: `CurrencyLogo` and `useCurrency`. `CurrencyLogo` is a custom component that renders an SVG logo for a given cryptocurrency. `useCurrency` is a custom hook that takes a token's unique identifier and returns an object that contains information about the token, such as its name, symbol, and logo URL.\n\nThe `CurrencyCard` component renders a div element with a dark background color and rounded corners. Inside this div, there is another div element that contains two child elements: a `CurrencyLogo` component and a div element that displays the token's symbol. The `CurrencyLogo` component is passed the `currency` object returned by the `useCurrency` hook, as well as a `size` prop that determines the size of the logo.\n\nThis component can be used in a larger project that displays information about cryptocurrency tokens. For example, it could be used in a dashboard that displays the user's portfolio of tokens. The `CurrencyCard` component could be used to render a card for each token in the user's portfolio, displaying the token's logo and symbol. \n\nHere is an example of how the `CurrencyCard` component could be used in a larger project:\n\n```\nimport CurrencyCard from './components/CurrencyCard'\n\nfunction Portfolio() {\n const tokens = ['eth', 'btc', 'uni']\n\n return (\n Tab 1 content
}\n {currentType === 'tab2' && Tab 2 content
}\n {currentType === 'tab3' && Tab 3 content
}\n \n {tokens.map((token) => (\n
\n )\n}\n```\n\nIn this example, the `Portfolio` component renders a list of `CurrencyCard` components, one for each token in the `tokens` array. The `key` prop is set to the token's unique identifier, and the `symbol` prop is set to the token's symbol in uppercase letters.",
- "questions": "1. What is the purpose of the `CurrencyCard` component?\n- The `CurrencyCard` component is used to display a token's symbol and logo.\n\n2. What is the `useCurrency` hook and where is it defined?\n- The `useCurrency` hook is used to retrieve a currency object based on a given token. It is defined in the `Tokens` module located in the `hooks` directory.\n\n3. What styling classes are applied to the `CurrencyCard` component?\n- The `CurrencyCard` component has a `p-3` padding, a `rounded` border, and a `bg-dark-900` background color. It also uses flexbox to horizontally align the logo and symbol, and has a hidden `text-lg` element for the symbol on small screens.",
- "checksum": "28b8eca52b69eb4587a195416ab9d250"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/TokenChartCard.json b/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/TokenChartCard.json
deleted file mode 100644
index 82c27b71c..000000000
--- a/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/TokenChartCard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TokenChartCard.tsx",
- "filePath": "core/src/features/analytics/Tokens/Token/TokenChartCard.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/TokenChartCard.tsx",
- "summary": "The `TokenChartCard` component is used to display a chart card that shows either the liquidity or volume of a specific token. The component takes in three props: `type`, `name`, and `token`. The `type` prop specifies whether the chart should display liquidity or volume data. The `name` prop is a string that represents the name of the token. The `token` prop is a string that represents the token's address.\n\nThe `TokenChartCard` component uses several hooks from the `graph` and `hooks` services to fetch data needed to display the chart. The `useActiveWeb3React` hook is used to get the current chain ID. The `useBlock` hook is used to get the block number for the current day, as well as the block numbers for the previous two days. The `useTokens` hook is used to get information about the token, such as its liquidity and volume. The `useNativePrice` hook is used to get the native price of the token. The `useDayData` hook is used to get daily data for the token.\n\nThe `types` object is used to define the header and data for each chart type. The `getData` function is used to calculate the figure, change, and chart data for the chart. The `figure` represents the current value of the liquidity or volume. The `change` represents the percentage change in liquidity or volume over the past day or two days. The `chart` represents an array of data points that can be used to display a chart.\n\nThe `useState` hook is used to keep track of the current timespan for the chart. The `chartTimespans` array is used to define the available timespans for the chart.\n\nThe `data` variable is calculated using the `useMemo` hook. The `data` variable is an object that contains the figure, change, and chart data for the chart. The `ChartCard` component is used to display the chart card with the data.\n\nOverall, the `TokenChartCard` component is a reusable component that can be used to display a chart of the liquidity or volume of a specific token. The component uses several hooks to fetch data needed to display the chart, and the `types` object is used to define the header and data for each chart type. The `useState` hook is used to keep track of the current timespan for the chart, and the `ChartCard` component is used to display the chart card with the data.",
- "questions": "1. What does this code do?\n- This code exports a React component called `TokenChartCard` that renders a chart card based on the `type`, `name`, and `token` props passed to it. The chart displays either liquidity or volume data for the specified token over a specified time period.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies imported from other files in the project, including `useBlock`, `useDayData`, `useNativePrice`, `useTokens`, and `useActiveWeb3React`. These dependencies are used to fetch data from external APIs and the blockchain.\n\n3. What is the purpose of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the result of calling the `type.getData` function with the current values of several variables. This helps to optimize performance by avoiding unnecessary re-renders of the component when these variables change.",
- "checksum": "314eb1c485020900fa5bb026afd4b4e9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/TopFarmsList.json b/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/TopFarmsList.json
deleted file mode 100644
index 20aec7206..000000000
--- a/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/TopFarmsList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TopFarmsList.tsx",
- "filePath": "core/src/features/analytics/Tokens/Token/TopFarmsList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/TopFarmsList.tsx",
- "summary": "This code defines a React component called `TopFarmsList` that renders a table of top farms. The component takes a single prop called `farms`, which is an array of objects representing each farm. Each farm object has three properties: `pair`, `roi`, and `rewards`. The `pair` property is an object with two properties, `token0` and `token1`, each of which has an `id` and a `symbol`. The `roi` property is a number representing the return on investment for the farm, and the `rewards` property is an array of objects, each of which has an `icon` property that is a JSX element.\n\nThe `TopFarmsList` component uses the `useMemo` hook to define a `columns` array that is used to render the table. The `columns` array has three objects, each of which represents a column in the table. The first column is called \"Token Pair\" and displays the farm's pair of tokens as a `FarmListname` component. The `FarmListname` component takes a single prop called `pair`, which is an object with two properties, `token0` and `token1`, each of which has an `id` and a `symbol`. The `FarmListname` component uses the `useCurrency` hook to get the currency object for each token and renders a `DoubleCurrencyLogo` component with the two currencies and their symbols. The second column is called \"ROI (1Y)\" and displays the farm's return on investment as a percentage using the `formatPercent` function. The third column is called \"Rewards\" and displays the farm's rewards as a list of icons.\n\nFinally, the `TopFarmsList` component renders a `Table` component with the `columns` array and the `farms` prop as the data. The `Table` component is conditionally rendered using the `&&` operator to only render if `farms` is truthy. The `Table` component also has a `defaultSortBy` prop that sorts the table by the \"ROI (1Y)\" column in descending order.\n\nThis code is used to display a table of top farms in a larger project, likely a decentralized finance (DeFi) application. The `TopFarmsList` component could be used in a dashboard or analytics page to show users which farms are performing the best. The `FarmListname` component could also be reused in other parts of the application to display a pair of tokens with their symbols and logos.",
- "questions": "1. What is the purpose of the `TopFarmsList` component?\n- The `TopFarmsList` component is used to render a table of top farms, including their token pair, ROI, and rewards.\n\n2. What is the `FarmListName` component used for?\n- The `FarmListName` component is used to render the name of a farm's token pair, including the logos of the two currencies and their symbols.\n\n3. What libraries and hooks are being used in this code?\n- The code is importing `useMemo` from the `react` library, and is also using the `Table` component from a custom component file. Additionally, it is using the `useCurrency` hook and the `formatPercent` function from custom hook and function files, respectively.",
- "checksum": "5e167b45990503367dc6f3211d13ecf6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/TransactionList.json b/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/TransactionList.json
deleted file mode 100644
index e754ce980..000000000
--- a/.autodoc/docs/json/core/src/features/analytics/Tokens/Token/TransactionList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TransactionList.tsx",
- "filePath": "core/src/features/analytics/Tokens/Token/TransactionList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/TransactionList.tsx",
- "summary": "The code is a React component that renders a table of transaction data. The component takes in an array of transaction objects as a prop, and each transaction object contains information about the transaction, such as the symbols being swapped, the incoming and outgoing amounts, the address, and the time. \n\nThe component uses the `useTable`, `usePagination`, and `useSortBy` hooks from the `react-table` library to create a paginated and sortable table. The `columns` variable is an array of objects that define the columns of the table. Each object has a `Header` property that specifies the column header, an `accessor` property that specifies the data field to display in the column, and a `Cell` property that specifies how to render the data in the cell. The `align` property specifies the alignment of the column content.\n\nThe `Table` function is a helper function that takes in the `columns` and `data` props and returns the table markup. The `getTableProps`, `getTableBodyProps`, `headerGroups`, `prepareRow`, `rows`, `page`, `nextPage`, `previousPage`, `canPreviousPage`, `canNextPage`, `setPageSize`, `pageIndex`, and `pageSize` variables are all provided by the `useTable` hook and are used to render the table.\n\nThe `TransactionList` function is the main component that renders the table using the `Table` function and the `columns` and `transactions` props. The `transactions` prop is an array of transaction objects that are passed to the `data` prop of the `useTable` hook. If there are no transactions, an empty array is passed instead.\n\nThe `Cell` properties of the `Type`, `Value`, `Address`, and `Time` columns use helper functions from the `functions` module to format the data. The `formatNumber` function formats the number with commas and rounds it to two decimal places. The `shortenAddress` function shortens the Ethereum address to the first and last four characters. The `formatDateAgo` function formats the date as a relative time string (e.g. \"2 hours ago\").\n\nOverall, this component provides a reusable and customizable table for displaying transaction data in a paginated and sortable format. It can be used in various parts of the larger project that require transaction data to be displayed in a table format.",
- "questions": "1. What is the purpose of the `TransactionList` component?\n- The `TransactionList` component is used to display a table of transaction data, including the type of transaction, its value, incoming and outgoing amounts, address, and time.\n\n2. What libraries are being used in this code?\n- The code is using several libraries, including `react`, `react-table`, and `@heroicons/react/outline`.\n\n3. What is the purpose of the `Table` function?\n- The `Table` function is a helper function used by the `TransactionList` component to render the table of transaction data. It uses the `useTable`, `useSortBy`, and `usePagination` hooks from the `react-table` library to handle sorting and pagination of the data.",
- "checksum": "941b77a98d00baff020b46815ad080e2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/analytics/Tokens/TokenList.json b/.autodoc/docs/json/core/src/features/analytics/Tokens/TokenList.json
deleted file mode 100644
index 170474c9a..000000000
--- a/.autodoc/docs/json/core/src/features/analytics/Tokens/TokenList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TokenList.tsx",
- "filePath": "core/src/features/analytics/Tokens/TokenList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/TokenList.tsx",
- "summary": "The `TokenList` module is a React component that renders a table of token data. It takes in an array of `Token` objects, which contain information about a token's address, symbol, liquidity, volume, price, and price change over the past day and week. The component also accepts an optional array of `TokenListColumnType` values, which determine which columns are displayed in the table. \n\nThe `TokenList` component uses the `Table` component from `../../../components/Table` to render the table. The `Table` component takes in an array of `Column` objects, which define the columns of the table. The `TokenListColumns` object defines the columns that can be displayed in the table, including the token name, price, liquidity, price change, volume change, and a line graph of the token's price over the past week. \n\nThe `TokenListName` component is used to render the token name column. It takes in a `token` object and uses the `useCurrency` hook from `../../../hooks/Tokens` to get the currency associated with the token's address. It then renders the currency logo and token symbol in a `div` element. \n\nThe `TokenListColumns` object defines the other columns of the table. The `price`, `liquidity`, `priceChange`, and `volumeChange` columns use the `formatNumber` and `formatPercent` functions from `../../../functions` to format the data. The `lastWeekGraph` column renders a line graph of the token's price over the past week using the `LineGraph` component from `../../../components/LineGraph`. \n\nOverall, the `TokenList` component provides a flexible and customizable way to display token data in a table format. It can be used in the larger project to display token data in various contexts, such as on a dashboard or analytics page. \n\nExample usage:\n\n```\nimport TokenList from './TokenList'\n\nconst tokens = [\n {\n token: {\n address: '0x123abc',\n symbol: 'ABC',\n },\n liquidity: 1000,\n volume1d: 500,\n volume1w: 3000,\n price: 1.23,\n change1d: 0.05,\n change1w: -0.1,\n },\n // more token objects...\n]\n\nconst enabledColumns = ['name', 'price', 'liquidity', 'priceChange', 'volumeChange', 'lastWeekGraph']\n\nfunction MyComponent() {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `TokenList` component?\n- The `TokenList` component is used to display a table of token data, including columns for name, price, liquidity, price change, volume change, and a line graph of the token's performance over the last week.\n\n2. What is the `Token` interface used for?\n- The `Token` interface defines the shape of an object that contains data about a token, including its address, symbol, liquidity, volume, price, and price change over the last day and week.\n\n3. What is the `TokenListColumns` object used for?\n- The `TokenListColumns` object is a mapping of column names to their respective configurations, including the column header, data accessor, cell renderer, and sorting behavior. It is used to define the columns that should be displayed in the `TokenList` table.",
- "checksum": "f7491c127cf36404fbef72c2ee4ef569"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/BalancePanel.json b/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/BalancePanel.json
deleted file mode 100644
index 847e68c3a..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/BalancePanel.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BalancePanel.tsx",
- "filePath": "core/src/features/exchange-v1/limit-order/BalancePanel.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/BalancePanel.tsx",
- "summary": "The `BalancePanel` component is a React functional component that displays the user's wallet and BentoBox balances for a specific currency. It is part of the larger `zoo` project and is used in the limit order feature of the application.\n\nThe component imports several hooks and functions from other files in the project. These include `useDerivedLimitOrderInfo` and `useLimitOrderActionHandlers` from the `limit-order/hooks` file, `maxAmountSpend` from the `functions` file, and `setFromBentoBalance` from the `limit-order/actions` file. It also imports various components from the `components` folder and external libraries such as `react-redux` and `@lingui/react`.\n\nThe component renders a `div` element with two child `div` elements, each displaying the balance for a specific currency. The first child `div` displays the balance in BentoBox, while the second child `div` displays the balance in the user's wallet. Each child `div` contains two `Typography` components, one displaying the label (\"In Bento:\" or \"In Wallet:\") and the other displaying the balance amount and currency symbol. The balance amount is obtained from the `walletBalances` and `bentoboxBalances` objects, which are derived from the `useDerivedLimitOrderInfo` hook. The currency symbol is obtained from the `currencies` object, which is also derived from the same hook.\n\nThe `handleMaxInput` function is defined using the `useCallback` hook and is called when the user clicks on the balance amount in either child `div`. The function takes a boolean argument `bento` that determines whether the balance amount is from BentoBox or the user's wallet. If `bento` is true, the function sets the input field value to the exact BentoBox balance amount and dispatches an action to set the `fromBentoBalance` flag to true. If `bento` is false, the function sets the input field value to the maximum spendable amount from the user's wallet (obtained using the `maxAmountSpend` function) and dispatches an action to set the `fromBentoBalance` flag to false.\n\nOverall, the `BalancePanel` component provides a simple and intuitive way for users to view and select their balance amounts for a specific currency when making a limit order.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React functional component called `BalancePanel` that displays the user's wallet and Bento balances for a specific currency, and allows the user to input the maximum amount they want to spend.\n\n2. What other components or modules does this code depend on?\n- This code imports several modules from other files in the `limit-order`, `swap`, and `components` directories, as well as from external libraries such as `react-redux` and `@lingui/react`.\n\n3. What is the significance of the `useCallback` hook in this code?\n- The `useCallback` hook is used to memoize the `handleMaxInput` function, which is passed as a prop to child components. This can improve performance by preventing unnecessary re-renders of child components when the function reference changes.",
- "checksum": "042b7b2847969db87b038be633d9a72e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/ConfirmLimitOrderModal.json b/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/ConfirmLimitOrderModal.json
deleted file mode 100644
index f3d850c42..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/ConfirmLimitOrderModal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ConfirmLimitOrderModal.tsx",
- "filePath": "core/src/features/exchange-v1/limit-order/ConfirmLimitOrderModal.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/ConfirmLimitOrderModal.tsx",
- "summary": "The `ConfirmLimitOrderModal` component is a React functional component that renders a modal for confirming a limit order. The modal is composed of two parts: the top content and the bottom content. The top content displays the details of the limit order, including the amount of input currency to be paid, the exchange rate, and the amount of output currency to be received. The bottom content displays additional details of the limit order, including the minimum amount of output currency to be received, the order expiration time, and the recipient address. The bottom content also includes a button to confirm the limit order.\n\nThe `ConfirmLimitOrderModal` component imports several functions and hooks from other files in the project. The `formatNumber` and `shortenAddress` functions are used to format numbers and addresses, respectively. The `useActiveWeb3React` and `useUSDCPrice` hooks are used to retrieve the active Web3 provider and the current USDC price, respectively. The `useDerivedLimitOrderInfo` and `useLimitOrderState` hooks are used to retrieve the derived limit order information and the limit order state, respectively.\n\nThe `ConfirmLimitOrderModal` component also imports several components from other files in the project. The `Button` component is used to render the confirm button. The `ConfirmationModalContent` component is used to render the modal content. The `CurrencyLogo` component is used to render the logos of the input and output currencies. The `Modal` component is used to render the modal.\n\nThe `ConfirmLimitOrderModal` component exports itself as the default export of the file, which can be imported and used in other files in the project.\n\nExample usage:\n\n```jsx\nimport ConfirmLimitOrderModal from \"./ConfirmLimitOrderModal\";\n\nfunction MyComponent() {\n const [open, setOpen] = useState(false);\n\n const handleOpen = () => {\n setOpen(true);\n };\n\n const handleClose = () => {\n setOpen(false);\n };\n\n const handleConfirm = () => {\n // Handle limit order confirmation\n };\n\n return (\n <>\n \n \n USD}\n />\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code and where is it used in the project?\n- This code defines a React component called `CurrencyInput` that renders a custom input field with a numeric value and optional max button and error message. It is likely used in a form or input section of the project.\n\n2. What external dependencies does this code rely on?\n- This code imports several external dependencies including `React`, `Button`, `Input`, `classNames`, `t`, and `useLingui`. These dependencies are likely defined in other files or packages within the project.\n\n3. What are the required and optional props for the `CurrencyInput` component?\n- The `CurrencyInput` component requires an `id`, `showMaxButton` boolean, `onUserInput` function, and `value` string prop. It also accepts an optional `error` string and `endAdornment` ReactNode prop, as well as an optional `onMax` function prop if `showMaxButton` is true.",
- "checksum": "80ecb26faffbcb159e703cc24186312b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/CurrencyInputPanel.json b/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/CurrencyInputPanel.json
deleted file mode 100644
index 042aab4d5..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/CurrencyInputPanel.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CurrencyInputPanel.tsx",
- "filePath": "core/src/features/exchange-v1/limit-order/CurrencyInputPanel.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/CurrencyInputPanel.tsx",
- "summary": "The code defines a React component called `CurrencyInputPanel` that renders a panel for inputting currency values. The component takes in several props, including an `id` string, an optional `error` string, a `className` string, and several React nodes for adornments and input components. \n\nThe component renders a div with the given `id`, and conditionally renders the `topAdornment`, `bottomAdornment`, and `error` props if they are provided. The main content of the panel is a flex container with two child divs: one for the `selectComponent` prop and one for the `inputComponent` prop. The `selectComponent` is rendered in a div that takes up the full width of the container, while the `inputComponent` is rendered in a div that takes up 2/5 of the width on larger screens. \n\nThe `classNames` function is used to conditionally apply CSS classes to the container and child divs based on the `className` and `inputComponent` props. The `ExclamationIcon` component from the `@heroicons/react/solid` library is used to render an error icon next to the `error` message if it is provided. \n\nThis component could be used in a larger project to provide a consistent UI for inputting currency values. Developers could pass in different `selectComponent` and `inputComponent` props to customize the appearance and functionality of the panel. The `error` prop could be used to display validation errors to the user. Here is an example of how the component could be used:\n\n```\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code and where is it used in the project?\n- This code defines a React component called `CurrencySelect` that renders a button for selecting a currency, and includes a modal for searching and selecting a currency. It is likely used in various parts of the project where currency selection is needed.\n\n2. What props does the `CurrencySelect` component accept and what are their types?\n- The `CurrencySelect` component accepts several props including `currency`, `otherCurrency`, `showCommonBases`, `onSelect`, `disabled`, `label`, `currencyList`, `includeNativeCurrency`, and `allowManageTokenList`. Their types are defined in the `CurrencySelectProps` interface.\n\n3. What external libraries and components are used in this code?\n- This code imports several external libraries and components including `React`, `ChevronDownIcon` from `@heroicons/react/solid`, `Currency` from `@zoolabs/zdk`, `CurrencyLogo` from `../../../components/CurrencyLogo`, `CurrencySearchModal` from `../../../modals/SearchModal/CurrencySearchModal`, `Lottie` from `lottie-react`, and `classNames` and `t` from `@lingui/macro`. It also includes an animation data file called `select-coin.json`.",
- "checksum": "e48442f83bb8ba9def16cdfeabcda84d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/LimitOrderButton.json b/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/LimitOrderButton.json
deleted file mode 100644
index a1ce71d3d..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/LimitOrderButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LimitOrderButton.tsx",
- "filePath": "core/src/features/exchange-v1/limit-order/LimitOrderButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/LimitOrderButton.tsx",
- "summary": "The `LimitOrderButton` component is a React functional component that renders a button for creating a limit order. The component imports various hooks and components from different files in the project. \n\nThe component takes in a `currency` prop, which is an instance of the `Currency` class from the `@zoolabs/zdk` library. The `color` prop is used to set the color of the button. \n\nThe component uses the `useActiveWeb3React` hook to get the current user's account, chain ID, library, and connector. It also uses the `useLimitOrderState` and `useDerivedLimitOrderInfo` hooks to get the current limit order state and derived limit order information, respectively. \n\nThe component uses the `useLimitOrderApproveCallback` hook to get the current approval state of the limit order and to handle the approval process. It also uses the `useApproveCallback` hook to handle token approvals. \n\nThe component renders different buttons based on the current state of the limit order and token approvals. If the user is not connected to a wallet, the component renders a button to connect the wallet. If there is an input error, the component renders a disabled button with the error message. If the token needs to be approved, the component renders a button to approve the token. If the limit order needs to be approved, the component renders a button to approve the limit order. If the token has been approved and the user needs to deposit the token into BentoBox, the component renders a button to deposit the token. If the user has already deposited the token into BentoBox, the component renders a button to create the limit order. \n\nThe `handler` function is called when the user clicks the button to create the limit order. It creates a new `LimitOrder` instance from the `@zoolabs/zdk` library and signs the order with the user's provider. If the order is successfully sent, a popup is added to the UI to indicate that the limit order has been created. \n\nOverall, the `LimitOrderButton` component provides a user-friendly interface for creating limit orders and handles the approval and deposit processes for the user. It can be used in a larger project that involves limit orders and token swaps. \n\nExample usage:\n\n```jsx\nimport LimitOrderButton from \"./LimitOrderButton\";\n\nfunction MyComponent() {\n const currency = new Currency(\"ETH\");\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `LimitOrderButton` component?\n- The `LimitOrderButton` component is used to handle the creation of a limit order and the necessary approvals and deposits.\n\n2. What external libraries and hooks are being used in this code?\n- The code is using external libraries and hooks such as `@zoolabs/zdk`, `@lingui/macro`, `react-redux`, and `useActiveWeb3React`.\n\n3. What is the role of the `useLimitOrderApproveCallback` hook?\n- The `useLimitOrderApproveCallback` hook is used to handle the approval of a limit order and returns the approval state, fallback method, permit status, and functions to approve and execute the order.",
- "checksum": "c180bbca97a7d78c11c92fa4fa29b08f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/LimitPriceInputPanel.json b/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/LimitPriceInputPanel.json
deleted file mode 100644
index 8e3ec5144..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/LimitPriceInputPanel.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LimitPriceInputPanel.tsx",
- "filePath": "core/src/features/exchange-v1/limit-order/LimitPriceInputPanel.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/LimitPriceInputPanel.tsx",
- "summary": "The `LimitPriceInputPanel` component is a React functional component that renders a panel for inputting a limit price for a limit order. The component imports several functions and hooks from other files in the project, including `setLimitPrice` action creator, `useLimitOrderState` and `useDerivedLimitOrderInfo` hooks, and `Input` component. \n\nThe component takes a single prop `onBlur` which is a callback function that is called when the input field loses focus. The component renders a container `div` with two child `div`s. The first child `div` contains a label and a button that sets the input value to the current market price. The second child `div` contains an input field and a label that displays the exchange rate between the input and output currencies. \n\nThe component uses the `useLimitOrderState` hook to get the current limit price value from the Redux store and the `useDerivedLimitOrderInfo` hook to get the current exchange rate and currency symbols for the input and output currencies. The component also uses the `useDispatch` hook to get the dispatch function from the Redux store and the `useLingui` hook to get the internationalization function from the Lingui library. \n\nThe `handleInput` function is a callback function that is called when the input field value changes. It dispatches the `setLimitPrice` action with the new value and calls the `onBlur` callback function with the same value. The `disabled` variable is a boolean that is true if either the input or output currency is not set.\n\nThe `Input.Numeric` component is a custom input field component that only allows numeric input. It takes several props including `disabled`, `className`, `placeholder`, `id`, `value`, `onUserInput`, and `onBlur`. The `value` prop is set to the current limit price value from the Redux store. The `onUserInput` prop is set to the `handleInput` function. The `onBlur` prop is set to a callback function that calls the `onBlur` prop passed to the component.\n\nThis component can be used in a larger project that involves trading cryptocurrencies. It provides a user interface for inputting a limit price for a limit order and displays the current exchange rate between the input and output currencies. The component can be customized by passing different props to the `Input.Numeric` component or by modifying the CSS classes of the container `div`.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `LimitPriceInputPanel` that renders an input panel for setting a limit price for a trading order.\n\n2. What external dependencies does this code have?\n- This code imports several modules from external packages, including `react`, `react-redux`, and `@lingui/react`.\n\n3. What props does the `LimitPriceInputPanel` component expect?\n- The `LimitPriceInputPanel` component expects a single prop called `onBlur`, which is a function that takes a string value as its argument and has no return value.",
- "checksum": "4e142e31d8da7d44a7649b47ba211ee9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/MyOrders.json b/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/MyOrders.json
deleted file mode 100644
index 33d690e6a..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/MyOrders.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "MyOrders.tsx",
- "filePath": "core/src/features/exchange-v1/limit-order/MyOrders.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/MyOrders.tsx",
- "summary": "This code defines a React functional component called `MyOrders` that renders a link to the user's open orders page. The component imports several dependencies, including `React`, `Badge`, `ClipboardListIcon`, `NavLink`, `t`, `useLimitOrders`, and `useLingui`. \n\nThe `MyOrders` component uses the `useLingui` hook to access the `i18n` object, which provides internationalization support for the component. The `useLimitOrders` hook is used to retrieve the user's pending limit orders. \n\nThe component returns a `NavLink` component that wraps an anchor tag. The anchor tag contains two divs: one with the text \"My Orders\" and a `Badge` component that displays the total number of pending orders, and another with a `ClipboardListIcon` component that is only displayed on smaller screens. \n\nThis component can be used in a larger project to provide users with a quick link to their open orders page. The `Badge` component can be used to display the number of pending orders, which can help users keep track of their orders. The `useLimitOrders` hook can be used to retrieve the user's pending orders from the backend. The `useLingui` hook can be used to provide internationalization support for the component. \n\nExample usage:\n\n```\nimport MyOrders from './MyOrders'\n\nfunction App() {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What does this code do?\n- This code exports a React functional component called `MyOrders` that renders a link to a page for viewing a user's open orders, along with a badge indicating the number of pending orders.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including React, @heroicons/react, @lingui/macro, and @lingui/react. It also imports two custom components, Badge and NavLink, from the project's components directory.\n\n3. What is the purpose of the useLimitOrders hook?\n- The useLimitOrders hook is used to retrieve information about a user's pending limit orders, which is then displayed in the badge next to the \"My Orders\" link.",
- "checksum": "7e8087b30a973d20349fb2ab25c22ce7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/OrderExpirationDropdown.json b/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/OrderExpirationDropdown.json
deleted file mode 100644
index 6dfc3f0c8..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/OrderExpirationDropdown.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "OrderExpirationDropdown.tsx",
- "filePath": "core/src/features/exchange-v1/limit-order/OrderExpirationDropdown.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/OrderExpirationDropdown.tsx",
- "summary": "The `OrderExpirationDropdown` component is a React functional component that renders a dropdown menu for selecting the expiration time of a limit order. The component imports several dependencies, including `NeonSelect` and `NeonSelectItem` from a custom `Select` component, `useDispatch` and `useLimitOrderState` hooks from the `limit-order` state, and `useLingui` from the `@lingui/react` library for internationalization.\n\nThe component defines a `handler` function that dispatches a `setOrderExpiration` action to update the `orderExpiration` state with the selected expiration time. The `items` object maps each expiration time option to a corresponding label for display in the dropdown menu.\n\nThe component returns a JSX element that renders a `div` container with a label and a question helper icon, followed by a `NeonSelect` component that renders the dropdown menu. The `NeonSelect` component receives the `orderExpiration.label` value as its `value` prop, which is the label of the currently selected expiration time. The `NeonSelect` component also maps each item in the `items` object to a `NeonSelectItem` component, passing the expiration time as the `value` prop and the corresponding label as the child element. The `handler` function is called when an item is clicked, passing the expiration time as the second argument.\n\nThis component can be used in a larger project that involves limit orders, allowing users to select the expiration time for their orders. The component is reusable and can be easily integrated into other components or pages that require a similar functionality. For example, the component can be used in a trading page where users can place limit orders, or in a settings page where users can configure their order preferences.",
- "questions": "1. What is the purpose of this code?\n - This code defines a React component called `OrderExpirationDropdown` that renders a dropdown menu for selecting the expiration time of an order.\n2. What is the role of the `useLimitOrderState` hook?\n - The `useLimitOrderState` hook is used to retrieve the current order expiration value from the Redux store.\n3. What is the purpose of the `QuestionHelper` component?\n - The `QuestionHelper` component renders a tooltip with explanatory text when hovered over, and is used here to provide additional information about the meaning of \"order expiration\".",
- "checksum": "e551fef3cc3b5bf801550a0e0a01096f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/PayFromToggle.json b/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/PayFromToggle.json
deleted file mode 100644
index daa602845..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/PayFromToggle.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "PayFromToggle.tsx",
- "filePath": "core/src/features/exchange-v1/limit-order/PayFromToggle.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/PayFromToggle.tsx",
- "summary": "The `PayFromToggle` component is a React functional component that renders a toggle switch with two options: \"BentoBox\" and \"Wallet\". The purpose of this component is to allow the user to select the source of funds for a limit order transaction. \n\nThe component imports several dependencies, including `React`, `useState`, `Switch` from the `@headlessui/react` library, `Typography`, `useDispatch`, and `useLingui`. It also imports `setFromBentoBalance` and `useLimitOrderState` from the `limit-order` module in the project's state.\n\nThe component uses the `useLingui` hook to access the project's internationalization (i18n) functionality. It also uses the `useLimitOrderState` hook to access the current state of the limit order module, specifically the `fromBentoBalance` property. The `useDispatch` hook is used to dispatch the `setFromBentoBalance` action when the toggle switch is changed.\n\nThe `PayFromToggle` component returns a JSX element that renders the toggle switch. The switch has two labels, one for \"BentoBox\" and one for \"Wallet\", and a round toggle button that can be moved between the two labels. The current selection is determined by the `fromBentoBalance` property in the limit order state. When the toggle switch is changed, the `handleChange` function is called, which dispatches the `setFromBentoBalance` action with the opposite value of the current `fromBentoBalance` property.\n\nThis component can be used in the larger project wherever a user needs to select the source of funds for a limit order transaction. For example, it could be used in a form that allows the user to enter the details of a limit order, including the source of funds. The `PayFromToggle` component provides a simple and intuitive way for the user to select the desired source of funds. \n\nExample usage:\n\n```\nimport PayFromToggle from './PayFromToggle'\n\nfunction LimitOrderForm() {\n return (\n \n )\n}\n```",
- "questions": "1. What does this code do?\n- This code exports a React functional component called `PayFromToggle` that renders a toggle switch with two options: \"BentoBox\" and \"Wallet\". When the toggle is switched, it dispatches an action to update the state of `fromBentoBalance`.\n\n2. What dependencies does this code have?\n- This code imports several dependencies from external packages, including `React`, `@headlessui/react`, `@lingui/macro`, `react-redux`, and a custom `Typography` component and some state-related modules from a `../../../` path.\n\n3. What is the purpose of the `useLingui` hook?\n- The `useLingui` hook is used to access the `i18n` object provided by the Lingui library, which allows for internationalization and localization of the text displayed in the component. The `i18n._(t`Pay from:`)` syntax is used to translate the text \"Pay from:\" to the appropriate language based on the user's locale.",
- "checksum": "011e87cbc28347593f162e8c08081a7c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/PriceRatio.json b/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/PriceRatio.json
deleted file mode 100644
index a2f99037e..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/limit-order/PriceRatio.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "PriceRatio.tsx",
- "filePath": "core/src/features/exchange-v1/limit-order/PriceRatio.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/PriceRatio.tsx",
- "summary": "The `PriceRatio` component is a React functional component that displays the exchange rate between two currencies. It is part of the larger `zoo` project and imports the `Currency` and `Price` classes from the `@zoolabs/zdk` library, as well as the `useState` and `FC` (Functional Component) hooks from the `react` library, and two custom hooks `useDerivedLimitOrderInfo` and `useLimitOrderState` from the `../../../state/limit-order/hooks` module.\n\nThe component renders a div containing two sub-divs. The first sub-div displays the exchange rate between the two currencies, which is calculated using the `Price` class. The exchange rate is displayed in the format \"1 [input currency symbol] = [exchange rate] [output currency symbol]\". The exchange rate is calculated based on the `parsedAmounts` and `currentPrice` values obtained from the `useDerivedLimitOrderInfo` hook. If both `parsedAmounts[Field.INPUT]` and `parsedAmounts[Field.OUTPUT]` are defined, the exchange rate is calculated using these values. Otherwise, the `currentPrice` value is used. The `inverted` state variable is used to toggle the input and output currencies in the exchange rate display.\n\nThe second sub-div contains a clickable icon that toggles the `inverted` state variable when clicked. This causes the input and output currencies to be swapped in the exchange rate display.\n\nThis component can be used in the larger `zoo` project to display the exchange rate between two currencies in a user interface. It can be imported and rendered in any other React component that requires this functionality. For example:\n\n```\nimport PriceRatio from './components/PriceRatio';\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `useDerivedLimitOrderInfo` and `useLimitOrderState` hooks imported from `../../../state/limit-order/hooks`?\n- These hooks are likely used to retrieve and manage state related to limit orders in the application.\n\n2. What is the significance of the `PriceRatio` component and where is it used in the application?\n- The `PriceRatio` component appears to be responsible for displaying the exchange rate between two currencies, and it may be used in various parts of the application where currency exchange is relevant.\n\n3. What is the purpose of the `inverted` state variable and how is it used in the component?\n- The `inverted` state variable is used to determine whether the exchange rate should be displayed in the original or inverted format, and it is toggled by clicking on a button in the component. This may be useful for users who prefer to see the exchange rate in a different format.",
- "checksum": "169bb55fb6e56538727f50a4bb271e05"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetails.json b/.autodoc/docs/json/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetails.json
deleted file mode 100644
index 90de68db7..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetails.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AdvancedLiquidityDetails.tsx",
- "filePath": "core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetails.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetails.tsx",
- "summary": "The code in this file defines two React components: `TradeSummary` and `AdvancedLiquidityDetails`. These components are part of a larger project called \"zoo\" and are used to display information related to a user's liquidity pool tokens and fees.\n\nThe `TradeSummary` component renders a summary of the user's pool tokens, pool share, liquidity provider fee, and network fee. This information is displayed using the `RowBetween` and `RowFixed` components from the `../../../components/Row` module and the `AutoColumn` component from the `../../../components/Column` module. The `RowBetween` component is used to display two items side-by-side with equal spacing between them, while the `RowFixed` component is used to display a single item without any spacing. The `AutoColumn` component is used to stack the rows vertically.\n\nThe `AdvancedLiquidityDetails` component simply renders the `TradeSummary` component within an `AutoColumn` component with a gap of 0 pixels. This component is exported along with an interface called `AdvancedLiquidityDetailsProps` that has a single optional property called `show`.\n\nOverall, these components are used to display important information related to a user's liquidity pool tokens and fees in a clear and concise manner. They can be easily integrated into other parts of the \"zoo\" project to provide users with a better understanding of their liquidity pool activity. Here is an example of how the `AdvancedLiquidityDetails` component might be used:\n\n```\nimport AdvancedLiquidityDetails from 'zoo/components/AdvancedLiquidityDetails'\n\nfunction MyPage() {\n return (\n Exchange Rates
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `TradeSummary` function?\n- The `TradeSummary` function returns a JSX component that displays information about the user's pool tokens, pool share, liquidity provider fee, and network fee.\n\n2. What is the `AdvancedLiquidityDetails` function used for?\n- The `AdvancedLiquidityDetails` function returns a JSX component that includes the `TradeSummary` component and is wrapped in an `AutoColumn` component with a gap of \"0px\". It also includes an optional `show` prop.\n\n3. What are the `RowBetween` and `RowFixed` components used for?\n- The `RowBetween` and `RowFixed` components are imported from the `Row` module and are used to create rows of content with flexible and fixed widths, respectively. They are used in the `TradeSummary` function to display the different pieces of information.",
- "checksum": "3144d8ec865e6aff936d8b3562d6fbba"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetailsDropdown.json b/.autodoc/docs/json/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetailsDropdown.json
deleted file mode 100644
index db47dfc30..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetailsDropdown.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AdvancedLiquidityDetailsDropdown.tsx",
- "filePath": "core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetailsDropdown.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetailsDropdown.tsx",
- "summary": "This code defines a React component called `AdvancedSwapDetailsDropdown` that renders a styled dropdown menu containing advanced liquidity details for a swap. The component imports another React component called `AdvancedLiquidityDetails` from a file located at `./AdvancedLiquidityDetails`. \n\nThe `AdvancedDetailsFooter` styled component defines the appearance of the dropdown menu. It has a dark background color and rounded borders at the bottom. The `show` prop determines whether the dropdown menu is visible or hidden. When `show` is true, the dropdown menu is translated to a position where it is visible. When `show` is false, the dropdown menu is translated to a position where it is hidden. \n\nThe `AdvancedSwapDetailsDropdown` component takes a `show` prop and passes any other props it receives to the `AdvancedLiquidityDetails` component. The `show` prop determines whether the dropdown menu is visible or hidden. If `show` is true, the `AdvancedDetailsFooter` component is rendered with `show` set to true and the `AdvancedLiquidityDetails` component is rendered inside it. If `show` is false, only the `AdvancedDetailsFooter` component is rendered with `show` set to false. \n\nThis component can be used in a larger project that involves swapping tokens on a decentralized exchange. When a user wants to see advanced liquidity details for a swap, they can click on a button or link that triggers the `AdvancedSwapDetailsDropdown` component to appear. The `show` prop can be toggled by the button or link to show or hide the dropdown menu. \n\nExample usage:\n\n```\nimport AdvancedSwapDetailsDropdown from './AdvancedSwapDetailsDropdown'\n\nfunction SwapPage() {\n const [showAdvancedDetails, setShowAdvancedDetails] = useState(false)\n\n function handleToggleAdvancedDetails() {\n setShowAdvancedDetails(!showAdvancedDetails)\n }\n\n return (\n My Liquidity Pool Details
\n\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `AdvancedLiquidityDetails` component and where is it imported from?\n - The `AdvancedLiquidityDetails` component is imported from a file located at `./AdvancedLiquidityDetails`. Its purpose is not clear from this code snippet alone.\n2. What is the purpose of the `AdvancedDetailsFooter` styled component and how is it being used?\n - The `AdvancedDetailsFooter` styled component is a container with specific styling properties. It is being used to wrap the `AdvancedLiquidityDetails` component and is conditionally rendered based on the `show` prop passed to the `AdvancedSwapDetailsDropdown` component.\n3. What is the purpose of the `AdvancedSwapDetailsDropdown` component and what props does it accept?\n - The `AdvancedSwapDetailsDropdown` component is a functional component that conditionally renders the `AdvancedDetailsFooter` and `AdvancedLiquidityDetails` components based on the `show` prop passed to it. It accepts the same props as the `AdvancedLiquidityDetails` component, which are defined in the `AdvancedLiquidityDetailsProps` interface.",
- "checksum": "7b35160a409f412bf6f30d02f2892e49"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/liquidity/ConfirmAddModalBottom.json b/.autodoc/docs/json/core/src/features/exchange-v1/liquidity/ConfirmAddModalBottom.json
deleted file mode 100644
index ea1c7c4cf..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/liquidity/ConfirmAddModalBottom.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ConfirmAddModalBottom.tsx",
- "filePath": "core/src/features/exchange-v1/liquidity/ConfirmAddModalBottom.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/liquidity/ConfirmAddModalBottom.tsx",
- "summary": "The `ConfirmAddModalBottom` function is a React component that renders a modal dialog box for confirming the addition of liquidity to a pool in a decentralized exchange. The component takes several props, including `noLiquidity`, `price`, `currencies`, `parsedAmounts`, `poolTokenPercentage`, and `onAdd`. \n\nThe `noLiquidity` prop is a boolean that indicates whether the pool being added to has any existing liquidity. The `price` prop is a `Fraction` object that represents the exchange rate between the two currencies being added to the pool. The `currencies` prop is an object that maps `Field` values to `Currency` objects, where `Field` is an enum representing the two currencies being added to the pool. The `parsedAmounts` prop is an object that maps `Field` values to `CurrencyAmount` objects, representing the amounts of each currency being added to the pool. The `poolTokenPercentage` prop is a `Percent` object representing the share of the pool being added to. Finally, the `onAdd` prop is a callback function that is called when the user confirms the addition of liquidity.\n\nThe component renders a dialog box with information about the exchange rate, the amounts of each currency being added, and the share of the pool being added to. It also renders a button that allows the user to confirm the addition of liquidity. The text of the button changes depending on whether the pool being added to has existing liquidity or not.\n\nThe component uses the `useLingui` hook from the `@lingui/react` package to provide internationalization support. It also uses the `Button` component from the `../../../components/Button` module.\n\nExample usage:\n\n```jsx\nimport { ConfirmAddModalBottom } from \"@zoolabs/zdk-react\";\nimport { Currency, CurrencyAmount, Fraction, Percent } from \"@zoolabs/zdk\";\n\nfunction MyComponent() {\n const currencies = {\n [Field.CURRENCY_A]: new Currency(\"ETH\", 18, \"Ethereum\"),\n [Field.CURRENCY_B]: new Currency(\"USDC\", 6, \"USD Coin\"),\n };\n const parsedAmounts = {\n [Field.CURRENCY_A]: CurrencyAmount.fromRawAmount(currencies[Field.CURRENCY_A], \"1\"),\n [Field.CURRENCY_B]: CurrencyAmount.fromRawAmount(currencies[Field.CURRENCY_B], \"1000000\"),\n };\n const price = new Fraction(1, 2000);\n const poolTokenPercentage = new Percent(50);\n const onAdd = () => {\n // handle addition of liquidity\n };\n return (\n \n
\n );\n}\n``` \n\nOverall, this code provides a way for different parts of the `zoo` project to access and use components related to liquidity details and pricing.",
- "questions": "1. **What is the purpose of this code file?**\\\nA smart developer might wonder what the overall purpose of this code file is and how it fits into the larger project. Based on the code, it appears to be exporting various components related to liquidity details and removal from the `zoo` project.\n\n2. **What do the exported components do?**\\\nA developer might want to know more about the specific functionality of each exported component. Based on their names, `AdvancedLiquidityDetails`, `AdvancedLiquidityDetailsDropdown`, `LiquidityHeader`, `LiquidityPrice`, and `RemoveLiquidityReceiveDetails`, it seems that they are related to displaying and managing liquidity information.\n\n3. **Are there any dependencies or requirements for using these components?**\\\nA developer might want to know if there are any dependencies or requirements for using these exported components. Without more information, it is unclear if these components require any specific libraries or configurations to work properly.",
- "checksum": "56ced5732b77916e4b147934a233468a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/open-order/CompletedOrders.json b/.autodoc/docs/json/core/src/features/exchange-v1/open-order/CompletedOrders.json
deleted file mode 100644
index 850766cf5..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/open-order/CompletedOrders.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CompletedOrders.tsx",
- "filePath": "core/src/features/exchange-v1/open-order/CompletedOrders.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/open-order/CompletedOrders.tsx",
- "summary": "This code defines a React functional component called `CompletedOrders` that displays a list of completed orders. The component imports several dependencies, including `React`, `Badge`, `CurrencyLogo`, `Lottie`, `OrderStatus`, `Pagination`, `loadingCircle`, `t`, `useLimitOrders`, and `useLingui`. \n\nThe `CompletedOrders` component uses the `useLimitOrders` hook to retrieve a list of completed orders. If there are completed orders, the component displays a header with the total number of completed orders, a table of completed orders, and a pagination component. If there are no completed orders, the component displays a message indicating that there are no orders.\n\nThe table of completed orders displays the following columns: \n\n- Receive: The token that the user received in the trade.\n- Pay: The token that the user paid in the trade.\n- Rate: The exchange rate between the two tokens.\n- Filled: The status of the order (filled, cancelled, or expired).\n\nEach row in the table represents a completed order and displays the following information:\n\n- The amount of the token that the user received.\n- The symbol of the token that the user received.\n- The amount of the token that the user paid.\n- The symbol of the token that the user paid.\n- The exchange rate between the two tokens.\n- The status of the order.\n\nThe background color of each row depends on the status of the order. If the order is filled, the background color is green. If the order is cancelled, the background color is gray. If the order is expired, the background color is red.\n\nThe `Pagination` component allows the user to navigate between pages of completed orders.\n\nThis component can be used in a larger project that involves trading tokens. It provides a way for users to view their order history and track the status of their completed orders. The component can be customized to fit the design of the larger project. For example, the colors of the rows can be changed to match the color scheme of the project.",
- "questions": "1. What is the purpose of this code?\n- This code is a React component that displays a list of completed orders with pagination and some additional information.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, Lottie, and @lingui/macro.\n\n3. What data is being displayed in the completed orders list?\n- The completed orders list displays information about each completed order, including the amount of tokens received and paid, the exchange rate, and the order status (filled, cancelled, or expired).",
- "checksum": "2e3d45b36f2923fc700743b1f8b18167"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/open-order/OpenOrders.json b/.autodoc/docs/json/core/src/features/exchange-v1/open-order/OpenOrders.json
deleted file mode 100644
index f0468f3fe..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/open-order/OpenOrders.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "OpenOrders.tsx",
- "filePath": "core/src/features/exchange-v1/open-order/OpenOrders.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/open-order/OpenOrders.tsx",
- "summary": "The `OpenOrders` component is a React functional component that displays a list of open limit orders. It imports several components from the `zoo` project, including `Badge`, `Button`, `CurrencyLogo`, `Pagination`, and `TransactionConfirmationModal`. It also imports several hooks from the `zoo` project, including `useLimitOrderContract`, `useLimitOrders`, `useLingui`, and `useTransactionAdder`. Finally, it imports the `LimitOrder` class from the `@zoolabs/zdk` package and the `Lottie` component from the `lottie-react` package.\n\nThe component first initializes several variables using the imported hooks, including `i18n`, `pending`, `limitOrderContract`, `addTransaction`, and `hash`. `i18n` is used for internationalization, `pending` is used to track the status of the limit orders, `limitOrderContract` is used to interact with the limit order contract, `addTransaction` is used to add a transaction to the transaction list, and `hash` is used to store the hash of the transaction.\n\nThe component then defines a `cancelOrder` function that cancels a limit order and adds a transaction to the transaction list. The function takes a `limitOrder` object and a `summary` string as arguments, calls the `cancelOrder` method of the `limitOrderContract` object, adds the resulting transaction to the transaction list using the `addTransaction` function, and updates the `hash` state variable with the hash of the transaction. Finally, the function waits for the transaction to complete and updates the limit orders using the `mutate` function.\n\nThe component then returns a JSX element that displays the list of open limit orders. If there are no open limit orders, it displays a message encouraging the user to place an order. If there are open limit orders, it displays a table with information about each order, including the input and output tokens, the exchange rate, and the percentage of the order that has been filled. It also provides a button to cancel each order. The component uses the `Pagination` component to allow the user to navigate between pages of orders.\n\nOverall, the `OpenOrders` component provides a user-friendly interface for managing open limit orders in the `zoo` project. It uses several components and hooks from the project to provide a seamless user experience.",
- "questions": "1. What is the purpose of the `OpenOrders` component?\n- The `OpenOrders` component displays a list of open limit orders and allows the user to cancel them.\n\n2. What external libraries or components are being used in this file?\n- The file imports several components from external libraries, including `Badge` and `Button` from a custom component library, `Lottie` for animations, and `TransactionConfirmationModal` from a modal library.\n\n3. What hooks are being used in this file and what are they used for?\n- The file uses several custom hooks, including `useLimitOrderContract` for interacting with a limit order contract, `useLimitOrders` for fetching and managing open limit orders, `useLingui` for internationalization, and `useTransactionAdder` for adding transactions to the transaction history.",
- "checksum": "83eed927c400fcb02066f2ecc9f20d1e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/open-order/Pagination.json b/.autodoc/docs/json/core/src/features/exchange-v1/open-order/Pagination.json
deleted file mode 100644
index 799f12cd7..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/open-order/Pagination.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Pagination.tsx",
- "filePath": "core/src/features/exchange-v1/open-order/Pagination.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/open-order/Pagination.tsx",
- "summary": "The `Pagination` component is a reusable React component that generates a pagination control for a list of items. It takes in four props: `currentPage`, `onChange`, `totalPages`, and `pageNeighbours`. \n\nThe `currentPage` prop is the current page number, `onChange` is a callback function that is called when a page is clicked, `totalPages` is the total number of pages, and `pageNeighbours` is the number of pages to show on either side of the current page.\n\nThe component generates a list of page numbers based on the `totalPages` and `pageNeighbours` props. It then renders a list of buttons, with the current page highlighted, and \"Previous\" and \"Next\" buttons on either end of the list. If there are more pages than can be displayed, the component will add ellipses to indicate that there are more pages available.\n\nThe `range` function is a helper function that generates an array of numbers between two given numbers. It takes in three arguments: `from`, `to`, and `step`. It returns an array of numbers between `from` and `to`, incremented by `step`.\n\nThe `Pagination` component uses the `range` function to generate the list of page numbers. It then uses the `reduce` method to generate an array of buttons for each page number. The buttons are wrapped in an array, with the \"Previous\" and \"Next\" buttons in their own arrays. The `reduce` method returns an array of three arrays: one for the \"Previous\" buttons, one for the page buttons, and one for the \"Next\" buttons.\n\nThe `classNames` function is a utility function that generates a string of class names based on the arguments passed to it. It is used to generate the class names for the buttons.\n\nThe `Pagination` component returns a `nav` element containing the list of buttons. If there is only one page, the component returns an empty fragment.\n\nExample usage:\n\n```jsx\n\n
\n );\n}\n```\n\nIn this example, the `TradeConfirmation` component receives a `trade` object that includes a `priceImpact` property of type `Percent`. The `FormattedPriceImpact` component is used to display the formatted price impact percentage with the appropriate text color based on the severity level.",
- "questions": "1. What is the purpose of the `Percent` import from `@zoolabs/zdk`?\n - The `Percent` import is likely used to handle percentage calculations in the code.\n2. What is the significance of the `ONE_BIPS` constant imported from `../../../constants`?\n - It is unclear from this code snippet what the `ONE_BIPS` constant is used for. Further investigation into the `constants` file may be necessary to determine its purpose.\n3. How is the `warningSeverity` function from `../../../functions/prices` used in this code?\n - The `warningSeverity` function is used to determine which CSS class to apply to the `div` element's `className` attribute based on the severity of the `priceImpact` value.",
- "checksum": "b5072655b54fb6138686c260e25947d6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/swap/MinerTip.json b/.autodoc/docs/json/core/src/features/exchange-v1/swap/MinerTip.json
deleted file mode 100644
index ea4f4a84b..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/swap/MinerTip.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "MinerTip.tsx",
- "filePath": "core/src/features/exchange-v1/swap/MinerTip.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/MinerTip.tsx",
- "summary": "The code is a React component that renders a slider for selecting a miner tip amount. The component imports several hooks from the `@zoolabs/zdk` and `../../../state/user/hooks` libraries. It also imports a `useArcherMinerTips` hook from `../../../hooks/useArcherMinerTips`. \n\nThe `getMarkLabel` function returns a string label for each mark on the slider based on its index and the length of the marks array. The `getMarkSlippage` function returns a number representing the slippage tolerance for each mark on the slider based on its index. The `getMarksFromTips` function takes a record of miner tips and returns an object with keys representing the index of each mark on the slider and values representing the label, price, slippage, style, and class name for each mark. \n\nThe `MinerTip` component uses several hooks to manage state. It uses `useToggleSettingsMenu` to toggle a settings menu, `useUserArcherTipManualOverride` to get the user's manual tip override setting, `useUserArcherETHTip` to get the user's ETH tip amount, `useUserArcherGasPrice` to set the user's gas price, and `useArcherMinerTips` to get the miner tips data. \n\nThe component uses `React.useState` to manage the state of the slider value. It uses `React.useMemo` to memoize the `getMarksFromTips` function and the `marks` object. It uses `React.useCallback` to memoize the `handleChange` function. It uses `React.useEffect` to set the initial value of the slider and the user's gas price based on the middle mark of the `marks` object. \n\nThe component renders a `Typography` component with the text \"Miner Tip\" and the user's ETH tip amount. If the user has not set a manual tip override and there are no miner tips data, the component returns `null`. Otherwise, it renders a `StyledSlider` component with the `marks`, `max`, `onChange`, `value`, and `step` props. \n\nThis component can be used in a larger project to allow users to select a miner tip amount based on the current miner tips data. The component provides a user-friendly interface for selecting a miner tip amount and handles the logic of setting the user's gas price based on the selected tip amount.",
- "questions": "1. What is the purpose of this code?\n- This code is a React component that renders a slider for selecting a miner tip amount based on gas prices and slippage tolerance.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several functions and components from external libraries such as \"@zoolabs/zdk\", \"react\", and \"styled-components\". It also imports several custom hooks from the project's state and hooks directories.\n\n3. What is the significance of the `useEffect` hook in this code?\n- The `useEffect` hook is used to set the initial value of the slider and the gas price based on the middle value of the marks object. It also updates the slider value and gas price whenever the marks object or user tip manual override changes.",
- "checksum": "c561366a95e126357a858f580c50e552"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/swap/SwapModalFooter.json b/.autodoc/docs/json/core/src/features/exchange-v1/swap/SwapModalFooter.json
deleted file mode 100644
index e9237b664..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/swap/SwapModalFooter.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SwapModalFooter.tsx",
- "filePath": "core/src/features/exchange-v1/swap/SwapModalFooter.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/SwapModalFooter.tsx",
- "summary": "This code exports a React component called `SwapModalFooter` that renders the footer section of a swap modal. The component takes in four props: `trade`, `onConfirm`, `swapErrorMessage`, and `disabledConfirm`. \n\nThe `trade` prop is an object of type `V2Trade` that represents the trade being made. The `onConfirm` prop is a function that is called when the user confirms the swap. The `swapErrorMessage` prop is a ReactNode that represents an error message to be displayed if the swap fails. The `disabledConfirm` prop is a boolean that determines whether the confirm button is disabled.\n\nThe component renders a `div` element with a dark background color and some padding. Inside this `div`, there is a `ButtonError` component that represents the confirm button. When clicked, the `onConfirm` function is called. The button is disabled if the `disabledConfirm` prop is true. The text of the button is localized using the `i18n` object from the `useLingui` hook.\n\nIf the `swapErrorMessage` prop is not null, the component also renders a `SwapCallbackError` component that displays the error message.\n\nThe commented-out code inside the `div` element appears to be some additional UI elements that were not included in the final version of the component.\n\nThis component can be used in a larger project that involves swapping between different currencies. It provides a reusable footer section for the swap modal that includes a confirm button and the ability to display error messages. The `trade` prop allows the component to display information about the trade being made, such as the price and liquidity provider fee. The `disabledConfirm` prop allows the parent component to disable the confirm button if necessary, such as when the user has not entered all required information.",
- "questions": "1. What dependencies does this code use?\n- This code imports several dependencies including `@zoolabs/zdk`, `react`, `@lingui/macro`, and `@lingui/react`.\n\n2. What is the purpose of the `SwapModalFooter` function?\n- The `SwapModalFooter` function is responsible for rendering the footer of a swap modal, including a confirmation button and a potential error message.\n\n3. What props does the `SwapModalFooter` function expect?\n- The `SwapModalFooter` function expects four props: `trade`, which is a trade object; `onConfirm`, which is a function to be called when the confirmation button is clicked; `swapErrorMessage`, which is an optional error message to display; and `disabledConfirm`, which is a boolean indicating whether the confirmation button should be disabled.",
- "checksum": "272af212008f408bc5ea43bc8f8f9739"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/swap/SwapModalHeader.json b/.autodoc/docs/json/core/src/features/exchange-v1/swap/SwapModalHeader.json
deleted file mode 100644
index da653b24a..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/swap/SwapModalHeader.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SwapModalHeader.tsx",
- "filePath": "core/src/features/exchange-v1/swap/SwapModalHeader.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/SwapModalHeader.tsx",
- "summary": "This code defines a React component called `SwapModalHeader` that renders the header section of a swap modal. The component takes in several props, including the trade object, allowed slippage, recipient address, and other details related to the swap. \n\nThe component first imports several dependencies, including React, `react-feather`, and `@zoolabs/zdk`. It also imports several utility functions from `../../../functions` and other components from the project. \n\nInside the component, it uses the `useState` hook to manage the state of a boolean variable called `showInverted`. It also uses several other hooks, including `useLingui` and `useActiveWeb3React`, to access internationalization and web3-related functionality. \n\nThe component then calculates the fiat value of the input and output amounts using the `useUSDCValue` hook. It also calculates the severity of the price impact using the `warningSeverity` function from `../../../functions`. \n\nThe component renders several elements, including the input and output amounts, the trade price, and advanced swap details. It also conditionally renders an alert message if the price has been updated and the user needs to accept the changes. Finally, it displays a message indicating whether the input or output amount is estimated and the recipient address if applicable. \n\nThis component is likely used in a larger project related to swapping tokens on a decentralized exchange. It provides a user-friendly interface for displaying key details related to a swap, including the input and output amounts, price, and estimated transaction details.",
- "questions": "1. What is the purpose of the `SwapModalHeader` component?\n- The `SwapModalHeader` component is responsible for rendering the header section of a swap modal, including details about the input and output currencies, trade price, and advanced swap details.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies, including `react-feather`, `@zoolabs/zdk`, `@lingui/macro`, and `useActiveWeb3React`.\n\n3. What is the significance of the `showAcceptChanges` prop?\n- The `showAcceptChanges` prop determines whether or not to display a message indicating that the price of the trade has been updated and prompting the user to accept the changes.",
- "checksum": "7ddccf626b3e5756ad143b00aab0663b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/swap/SwapRoute.json b/.autodoc/docs/json/core/src/features/exchange-v1/swap/SwapRoute.json
deleted file mode 100644
index 5ce561f19..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/swap/SwapRoute.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SwapRoute.tsx",
- "filePath": "core/src/features/exchange-v1/swap/SwapRoute.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/SwapRoute.tsx",
- "summary": "This code defines a React component called `SwapRoute` that renders a visual representation of the route taken by a trade between two currencies. The component takes a single prop called `trade`, which is an object of type `Trade` that represents the trade being made. The `Trade` object is defined in the `@zoolabs/zdk` library, which is imported at the top of the file along with the `Currency` and `TradeType` types.\n\nThe `SwapRoute` component renders a series of currency symbols separated by chevron icons. The currency symbols are extracted from the `path` property of the `Trade` object's `route` property. The `path` property is an array of `Currency` objects that represent the sequence of currencies involved in the trade. The `unwrappedToken` function is used to extract the `Currency` object from a wrapped token object, which is necessary because some currencies may be wrapped in other tokens for use on different blockchains.\n\nThe component uses the `Fragment` component from React to group the currency symbols and chevron icons together. The `isLastItem` variable is used to determine whether or not to render a chevron icon after the current currency symbol. If the current currency symbol is the last one in the `path` array, no chevron icon is rendered.\n\nThe `SwapRoute` component is exported as the default export of the file, and its `displayName` property is set to `\"SwapRoute\"`. This allows the component to be easily identified in React developer tools. The component is likely used in a larger project that involves trading between different currencies, and provides a visual representation of the route taken by a trade. Here is an example of how the `SwapRoute` component might be used in a larger React component:\n\n```\nimport { Trade } from \"@zoolabs/zdk\";\nimport SwapRoute from \"./SwapRoute\";\n\nfunction TradeDetails({ trade }: { trade: Trade }) {\n return (\n Trade Confirmation
\nPrice Impact:
\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `SwapRoute` component?\n - The `SwapRoute` component takes in a `Trade` object and renders a series of currency symbols with chevron icons in between them to represent the path of the trade route.\n\n2. What is the `unwrappedToken` function and where is it defined?\n - The `unwrappedToken` function is imported from a file located at `../../../functions/currency/wrappedCurrency`. It takes in a token object and returns the underlying currency object.\n\n3. What is the significance of the `memo` and `displayName` properties on the `SwapRoute` component?\n - The `memo` property is used to memoize the component and improve performance by preventing unnecessary re-renders. The `displayName` property is used to give the component a display name for debugging purposes.",
- "checksum": "2808b4635a3670a062711fd8faa945a3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/swap/TradePrice.json b/.autodoc/docs/json/core/src/features/exchange-v1/swap/TradePrice.json
deleted file mode 100644
index f5765ea2d..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/swap/TradePrice.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TradePrice.tsx",
- "filePath": "core/src/features/exchange-v1/swap/TradePrice.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/TradePrice.tsx",
- "summary": "The `TradePrice` component is a React component that displays the exchange rate between two currencies. It takes in a `Price` object from the `@zoolabs/zdk` library, which represents the exchange rate between two currencies, and a boolean `showInverted` flag that determines whether to display the exchange rate in the base-to-quote or quote-to-base direction. The component also takes in a `setShowInverted` function that updates the `showInverted` flag, and an optional `className` string for custom styling.\n\nThe component first uses the `useLingui` hook from the `@lingui/react` library to access the current language and translation functions. It then formats the exchange rate using the `toSignificant` method of the `Price` object, which returns a string representation of the exchange rate with a specified number of significant digits. If `showInverted` is true, the exchange rate is displayed in the quote-to-base direction, and if it is false, the exchange rate is displayed in the base-to-quote direction. If an error occurs during formatting, the exchange rate is set to \"0\".\n\nThe component then generates two label strings based on the `showInverted` flag and the currencies in the `Price` object. The `flipPrice` function is a callback that toggles the `showInverted` flag when the component is clicked.\n\nFinally, the component returns a div element with the exchange rate and labels displayed, along with an icon that indicates that the exchange rate can be flipped by clicking on the component. The component also applies custom styling based on the `className` prop.\n\nThis component can be used in a larger project that involves currency exchange, such as a cryptocurrency trading platform. It provides a user-friendly way to display exchange rates and allows users to easily switch between base-to-quote and quote-to-base rates. Here is an example of how the component can be used in a React application:\n\n```\nimport { Currency, Price } from \"@zoolabs/zdk\";\nimport TradePrice from \"./TradePrice\";\n\nfunction App() {\n const price = new Price(new Currency(\"USD\"), new Currency(\"EUR\"), \"1.2345\");\n const [showInverted, setShowInverted] = useState(false);\n\n return (\n Trade Details
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `TradePrice` component?\n- The `TradePrice` component is used to display the exchange rate between two currencies in a specific format.\n\n2. What external libraries are being used in this code?\n- The code is importing `Currency` and `Price` from the `@zoolabs/zdk` library, as well as `Typography`, `classNames`, `t`, and `useLingui` from other external libraries.\n\n3. What happens if there is an error when formatting the price?\n- If there is an error when formatting the price, the `formattedPrice` variable is set to the string \"0\".",
- "checksum": "2d80582913c7ffefbde8a200bc96d736"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/swap/UnsupportedCurrencyFooter.json b/.autodoc/docs/json/core/src/features/exchange-v1/swap/UnsupportedCurrencyFooter.json
deleted file mode 100644
index 68116e1c9..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/swap/UnsupportedCurrencyFooter.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "UnsupportedCurrencyFooter.tsx",
- "filePath": "core/src/features/exchange-v1/swap/UnsupportedCurrencyFooter.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/UnsupportedCurrencyFooter.tsx",
- "summary": "This code defines a React component called `UnsupportedCurrencyFooter` that renders a footer section for a user interface. The footer displays a button that, when clicked, opens a modal dialog that lists any unsupported assets in the user's wallet. The modal dialog also provides additional information about why certain assets may not be available for trading.\n\nThe component imports several other components from the `../../../components` directory, including `RowBetween`, `AutoColumn`, `Button`, `CloseIcon`, `CurrencyLogo`, `ExternalLink`, and `Modal`. It also imports two classes from the `@zoolabs/zdk` library: `Currency` and `Token`. The `useActiveWeb3React` and `useUnsupportedTokens` hooks are also imported from the `../../../hooks` directory.\n\nThe `UnsupportedCurrencyFooter` component takes two props: `show` and `currencies`. The `show` prop is a boolean that determines whether the footer is visible or not. The `currencies` prop is an array of `Currency` or `undefined` objects that represent the assets in the user's wallet.\n\nThe component renders a `DetailsFooter` styled component that contains a `Modal` component. The `Modal` component is only visible when the `showDetails` state variable is `true`. The `showDetails` state variable is initially set to `false` using the `useState` hook.\n\nThe `tokens` variable is defined using the `currencies` prop and the `chainId` variable from the `useActiveWeb3React` hook. The `tokens` variable is an array of `Token` objects that represent the assets in the user's wallet.\n\nThe `unsupportedTokens` variable is defined using the `useUnsupportedTokens` hook. The `unsupportedTokens` variable is an object that maps the addresses of unsupported assets to their corresponding `Token` objects.\n\nThe `DetailsFooter` component contains a `Button` component that, when clicked, sets the `showDetails` state variable to `true`, which causes the `Modal` component to become visible. The `Modal` component contains a list of unsupported assets, along with their logos, symbols, and addresses. The `Modal` component also provides additional information about why certain assets may not be available for trading.\n\nOverall, this code provides a way for users to view any unsupported assets in their wallet and learn more about why certain assets may not be available for trading. This component can be used as part of a larger user interface for a decentralized exchange or other blockchain-based application.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `UnsupportedCurrencyFooter` that displays a button which, when clicked, opens a modal that lists any unsupported currencies in the user's wallet.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several components from the `../../../components` directory, as well as the `@zoolabs/zdk` library and the `styled-components` library.\n\n3. What is the significance of the `useUnsupportedTokens` hook?\n- The `useUnsupportedTokens` hook is used to retrieve a list of unsupported tokens from the `unsupportedTokens` object, which is then used to determine which currencies in the user's wallet are unsupported and should be displayed in the modal.",
- "checksum": "49ab88295fee48c271c1fb5a1668ab83"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/swap/confirmPriceImpactWithoutFee.json b/.autodoc/docs/json/core/src/features/exchange-v1/swap/confirmPriceImpactWithoutFee.json
deleted file mode 100644
index ff28237d8..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/swap/confirmPriceImpactWithoutFee.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "confirmPriceImpactWithoutFee.ts",
- "filePath": "core/src/features/exchange-v1/swap/confirmPriceImpactWithoutFee.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/confirmPriceImpactWithoutFee.ts",
- "summary": "The code in this file is responsible for confirming a user's intention to proceed with a trade based on the price impact of the trade. The code imports two constants, ALLOWED_PRICE_IMPACT_HIGH and PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN, from a file located in the project's constants directory. It also imports the Percent class from the '@zoolabs/zdk' package.\n\nThe confirmPriceImpactWithoutFee function takes in a priceImpactWithoutFee parameter, which is the price impact of the trade without the fee. The function then checks if the price impact is greater than or equal to PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN. If it is, the function prompts the user to confirm their intention to proceed with the trade by typing the word \"confirm\". If the user types \"confirm\", the function returns true, indicating that the trade can proceed. If the user does not type \"confirm\", the function returns false, indicating that the trade should not proceed.\n\nIf the price impact is less than PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN, the function checks if it is greater than or equal to ALLOWED_PRICE_IMPACT_HIGH. If it is, the function prompts the user to confirm their intention to proceed with the trade by displaying a confirmation dialog box. If the user clicks \"OK\", the function returns true, indicating that the trade can proceed. If the user clicks \"Cancel\", the function returns false, indicating that the trade should not proceed.\n\nIf the price impact is less than ALLOWED_PRICE_IMPACT_HIGH, the function returns true, indicating that the trade can proceed without any confirmation.\n\nThis function is likely used in the larger project to ensure that users are aware of the potential price impact of their trades and to prevent accidental or unintended trades with high price impacts. Here is an example of how this function might be used in the larger project:\n\n```\nimport confirmPriceImpactWithoutFee from './path/to/confirmPriceImpactWithoutFee'\n\nconst priceImpactWithoutFee = new Percent(0.05) // 5% price impact without fee\nconst shouldProceed = confirmPriceImpactWithoutFee(priceImpactWithoutFee)\n\nif (shouldProceed) {\n // proceed with trade\n} else {\n // do not proceed with trade\n}\n```",
- "questions": "1. What are the values of `ALLOWED_PRICE_IMPACT_HIGH` and `PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN`?\n - `ALLOWED_PRICE_IMPACT_HIGH` and `PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN` are constants imported from a file located at `../../../constants`.\n2. What is the purpose of the `Percent` class imported from `@zoolabs/zdk`?\n - The `Percent` class is likely used to represent percentage values in the code, possibly including the `priceImpactWithoutFee` parameter.\n3. What happens if the user does not confirm the price impact for the swap?\n - If the user does not confirm the price impact for the swap, the function will return `false`.",
- "checksum": "408154636aa6e3f50f24013a1b0c59ce"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/exchange-v1/swap/styleds.json b/.autodoc/docs/json/core/src/features/exchange-v1/swap/styleds.json
deleted file mode 100644
index 414d9cc53..000000000
--- a/.autodoc/docs/json/core/src/features/exchange-v1/swap/styleds.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "styleds.tsx",
- "filePath": "core/src/features/exchange-v1/swap/styleds.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/styleds.tsx",
- "summary": "This code file imports several libraries and exports a few styled components and a React function component. \n\nThe `React` and `ReactNode` libraries are imported from the `react` package. The `styled` and `css` libraries are imported from the `styled-components` package. The `AlertTriangle` icon is imported from the `react-feather` package. The `Slider` component is imported from the `rc-slider` package.\n\nThe `ArrowWrapper` styled component is exported. It takes a boolean `clickable` prop and applies padding to the component. If `clickable` is true, it also applies a hover effect that changes the cursor to a pointer and reduces the opacity of the component.\n\nThe `BottomGrouping` styled component is exported. It applies a margin to the top of the component.\n\nThe `SwapCallbackError` function component is exported. It takes an object with an error property that can be any valid React node. It returns a div that contains the `AlertTriangle` icon and the error message.\n\nThe `StyledSlider` styled component is exported. It applies custom styles to the `Slider` component imported from `rc-slider`. It sets the margin, width, and color of the slider. It also sets the color of the slider marks, rail, track, handle, and dot.\n\nThese styled components and function component can be used in other components of the `zoo` project to create a consistent look and feel. For example, the `ArrowWrapper` component can be used to wrap arrow icons that should be clickable. The `StyledSlider` component can be used to create sliders with a custom appearance. The `SwapCallbackError` component can be used to display error messages in a consistent format.",
- "questions": "1. What is the purpose of the `ArrowWrapper` component and how is it used?\n - The `ArrowWrapper` component is a styled div that can be made clickable based on the `clickable` prop. It is likely used to wrap an arrow icon or element that can be clicked to trigger an action.\n2. What is the `StyledSlider` component and what are its styled sub-components?\n - The `StyledSlider` component is a styled version of the `Slider` component from the `rc-slider` library. Its styled sub-components include the rail, track, handle, and dot of the slider, as well as the text labels for the marks.\n3. What is the purpose of the `SwapCallbackError` component and what does it render?\n - The `SwapCallbackError` component renders an error message with a red alert icon. It takes an `error` prop that can be any React node, likely a string or JSX element, to display as the error message.",
- "checksum": "bb702663c020755832367f3e98c6c122"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/inari/BalancePanel.json b/.autodoc/docs/json/core/src/features/inari/BalancePanel.json
deleted file mode 100644
index 2f21765c4..000000000
--- a/.autodoc/docs/json/core/src/features/inari/BalancePanel.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BalancePanel.tsx",
- "filePath": "core/src/features/inari/BalancePanel.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/inari/BalancePanel.tsx",
- "summary": "The `BalancePanel` component is a React functional component that renders a panel displaying the balance of a given token and allows the user to input a value for that token. It is part of the larger `zoo` project and is used to display and manage balances in various parts of the application.\n\nThe component takes several props, including a `label` and `symbol` for the token, a `value` representing the current input value, a `balance` representing the current balance of the token, and a `field` indicating whether the input is for the input or output token. The component also has an optional `showMax` prop that, when true, displays a \"Max\" button that sets the input value to the maximum balance.\n\nThe component uses several hooks from the `inari` state, including `useDerivedInariState`, `useInariState`, and `useSelectedInariStrategy`. These hooks provide access to various state variables and functions related to the Inari protocol, which is used to swap tokens.\n\nThe `BalancePanel` component renders a panel with the token logo, a numeric input field, and a \"Max\" button (if `showMax` is true). When the user inputs a value, the `dispatchValue` function is called, which updates the input and output values in the state using the `setValues` action. If the \"Max\" button is clicked, the `onMax` function is called, which sets the input value to the maximum balance.\n\nThe `BalancePanel` component is used throughout the `zoo` project to display and manage token balances. For example, it may be used in a swap interface to allow the user to input the amount of tokens they wish to swap. Overall, the `BalancePanel` component provides a simple and reusable way to display token balances and manage user input.",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code defines a React component called `BalancePanel` that displays information about a token balance and allows the user to input a value for swapping tokens.\n2. What external libraries or dependencies does this code use?\n- This code imports several modules from external libraries including `@zoolabs/zdk`, `react`, and `@lingui/react`.\n3. What props does the `BalancePanel` component accept and what is their purpose?\n- The `BalancePanel` component accepts several props including `label`, `token`, `value`, `symbol`, `balance`, `field`, and `showMax`. These props are used to display information about the token balance and to allow the user to input a value for swapping tokens.",
- "checksum": "78497d697ce6ac9f2d582d1d56c9e109"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/inari/Button.json b/.autodoc/docs/json/core/src/features/inari/Button.json
deleted file mode 100644
index e8d3d2a4d..000000000
--- a/.autodoc/docs/json/core/src/features/inari/Button.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Button.tsx",
- "filePath": "core/src/features/inari/Button.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/inari/Button.tsx",
- "summary": "The `InariButton` component is a reusable button component that is used in the Inari section of the larger project. The purpose of this component is to provide a button that can be used to execute a transaction on the Inari strategy. The component is imported from various other files in the project, including hooks, components, and state.\n\nThe component takes in various props, including `children` and `rest`. The `children` prop is used to render the text inside the button, while the `rest` prop is used to pass any additional props to the button component.\n\nThe component uses various hooks to get the necessary data for the button. These hooks include `useLingui`, `useActiveWeb3React`, `useDerivedInariState`, `useSelectedInariStrategy`, and `useBentoMasterApproveCallback`. These hooks are used to get the user's account, the input value for the transaction, the balances, and the approval state.\n\nThe component then checks various conditions to determine what should be rendered inside the button. If the user is not connected to a wallet, the button is disabled and displays the text \"Connect Wallet\". If the user has not entered an amount for the transaction, the button is disabled and displays the text \"Enter an amount\". If the user does not have enough balance for the transaction, the button is disabled and displays the text \"Insufficient Balance\".\n\nIf the user needs to approve the transaction, the component displays a progress bar with the steps required for approval. If the approval is pending, the button is disabled and displays a loading animation. If the approval has not been granted, the button is enabled and displays the text \"Approve Inari to spend [currency symbol]\". If the approval has been granted, the button is enabled and displays the text \"Execute\".\n\nOnce the user clicks the button, the `onExecute` function is called, which sets the `pending` state to true, executes the transaction, and sets the `pending` state to false. If the user needs to get a permit to send with the execute function, the `handleGetPermit` function is called.\n\nOverall, the `InariButton` component provides a reusable button that can be used to execute transactions on the Inari strategy. The component checks various conditions to ensure that the user has entered the correct information and has the necessary approvals before executing the transaction.",
- "questions": "1. What is the purpose of this code and where is it used in the project?\n- This code defines a React component called `InariButton` that is used to handle user interactions with a button related to the Inari strategy. It is used in various parts of the project where the Inari strategy is used.\n\n2. What external libraries or dependencies does this code rely on?\n- This code relies on several external libraries and dependencies, including `React`, `@zoolabs/zdk`, `@lingui/react`, and `ProgressSteps` and various custom hooks defined in other parts of the project.\n\n3. What are the different conditions under which the button can be disabled or display different text?\n- The button can be disabled or display different text under several conditions, including when the user is not connected to a wallet, when the user has not entered a valid amount, when the user has insufficient balance, and when the user needs to approve Inari to spend a certain currency. The button can also display a loading indicator when a transaction is pending.",
- "checksum": "5f872d3cfc6cc2323a7e8a00df07b57f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/inari/InariDescription.json b/.autodoc/docs/json/core/src/features/inari/InariDescription.json
deleted file mode 100644
index 48d1c0cc2..000000000
--- a/.autodoc/docs/json/core/src/features/inari/InariDescription.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "InariDescription.tsx",
- "filePath": "core/src/features/inari/InariDescription.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/inari/InariDescription.tsx",
- "summary": "This code defines a React functional component called `InariDescription` that renders a header section for a specific entity in the larger project. The component imports the `React` library and the `FC` (FunctionComponent) type from the `react` module, as well as the `Typography` component and a custom hook called `useDerivedInariState` from other files in the project.\n\nThe `InariDescription` component takes no props, but uses the `useDerivedInariState` hook to retrieve the `general` object from the `inari` state. This object contains information about the entity, such as its name and description.\n\nThe component then renders a `div` element with a CSS class of `grid` and a gap of 2 units between its child elements. Inside the `div`, it renders two `Typography` components. The first one displays the name of the entity in a large font size and with a high emphasis color, while the second one displays its description in a regular font size.\n\nThis component can be used in other parts of the project to display the header section of any entity that has a `general` object in its `inari` state. For example, if the project has a `zoo` entity, the `InariDescription` component can be used to display its name and description in the header section of the `zoo` page.\n\nHere's an example of how the `InariDescription` component can be used in a `zoo` page:\n\n```\nimport React from 'react'\nimport InariDescription from './InariDescription'\n\nconst ZooPage = () => {\n return (\n \n
\n )\n}\n\nexport default ZooPage\n```",
- "questions": "1. What is the purpose of the `InariHeaderProps` interface?\n - The `InariHeaderProps` interface is used to define the props that can be passed to the `InariDescription` component.\n\n2. What is the `useDerivedInariState` hook and where is it defined?\n - The `useDerivedInariState` hook is defined in the `../../state/inari/hooks` file and is used to access the derived state of the `inari` slice of the Redux store.\n\n3. What is the `Typography` component and where is it defined?\n - The `Typography` component is defined in the `../../components/Typography` file and is used to render text with different styles and variants.",
- "checksum": "4329d6fbe7b3f857ab2da74695721daf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/inari/OutputPanel.json b/.autodoc/docs/json/core/src/features/inari/OutputPanel.json
deleted file mode 100644
index a5e3c7777..000000000
--- a/.autodoc/docs/json/core/src/features/inari/OutputPanel.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "OutputPanel.tsx",
- "filePath": "core/src/features/inari/OutputPanel.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/inari/OutputPanel.tsx",
- "summary": "This code defines a React functional component called `OutputPanel` that renders a `CurrencyInputPanel` component with some custom props. The `CurrencyInputPanel` component is imported from a file located at `../exchange-v1/limit-order/CurrencyInputPanel`. The `OutputPanel` component takes in a single prop called `label` of type string. \n\nThe `CurrencyInputPanel` component is a custom input component that allows users to input a currency value. It consists of two main components: a select component and an input component. The select component is a `Typography` component that displays the currency symbol and label passed in as a prop. The input component is a `div` element with a custom class that styles it to look like an input field. \n\nThe `OutputPanel` component customizes the `CurrencyInputPanel` component by passing in the following props:\n- `id`: a string that sets the id of the `CurrencyInputPanel` component to \"token-output\"\n- `className`: a string that sets the class of the `CurrencyInputPanel` component to \"rounded p-0 px-5 border-2 border-dark-800 flex items-center\"\n- `selectComponent`: a JSX element that renders the `Typography` component with the `label` prop passed in as its child\n- `inputComponent`: a JSX element that renders a `div` element with a custom class that styles it to look like an input field\n\nThis component can be used in a larger project that requires a custom input component for currency values. It can be imported and used in any React component that needs to display an output currency value. For example, in a financial application that displays the total value of a user's portfolio, the `OutputPanel` component can be used to display the value in the user's preferred currency. \n\nExample usage:\n```\nimport React from 'react';\nimport OutputPanel from './OutputPanel';\n\nconst PortfolioValue = () => {\n const totalValue = 10000; // total value of user's portfolio\n const currency = 'USD'; // user's preferred currency\n\n return (\n \n
\n );\n};\n\nexport default PortfolioValue;\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n This code defines a React functional component called OutputPanel that renders a CurrencyInputPanel with a label and an input component.\n\n2. What are the props that can be passed to the OutputPanel component?\n The only prop that can be passed to the OutputPanel component is a string label.\n\n3. What other components are being imported and used in this code?\n This code imports two other components: CurrencyInputPanel and Typography, both from different files in the project.",
- "checksum": "ff56de202d41693ada5d40d01d4e9f02"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/inari/SideSwitch.json b/.autodoc/docs/json/core/src/features/inari/SideSwitch.json
deleted file mode 100644
index 64d72379b..000000000
--- a/.autodoc/docs/json/core/src/features/inari/SideSwitch.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SideSwitch.tsx",
- "filePath": "core/src/features/inari/SideSwitch.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/inari/SideSwitch.tsx",
- "summary": "The code defines a React functional component called SideSwitch that renders a toggle switch with two labels: \"Withdraw\" and \"Deposit\". The switch is implemented using the Switch component from the Headless UI library. The state of the switch is controlled by the zapIn variable obtained from the useInariState hook, which is part of the Inari state management system. The setZapIn function from the Inari actions is used to update the state of the switch when it is toggled. The labels are localized using the Lingui library, which provides internationalization support for React applications.\n\nThe SideSwitch component is likely used in a larger project that involves some kind of financial transaction system, where users can either withdraw or deposit funds. The switch allows the user to toggle between these two modes. The use of the Inari state management system suggests that the project is complex and requires a robust state management solution. The use of the Lingui library suggests that the project is intended for use in multiple languages and locales.\n\nHere is an example of how the SideSwitch component might be used in a parent component:\n\n```\nimport React from 'react'\nimport SideSwitch from './SideSwitch'\n\nconst TransactionForm = () => {\n return (\n Portfolio Value
\n\n
\n )\n}\n\nexport default TransactionForm\n```\n\nIn this example, the SideSwitch component is rendered as part of a larger transaction form. The form allows the user to enter transaction details, such as the amount to withdraw or deposit. The SideSwitch component allows the user to toggle between these two modes.",
- "questions": "1. What is the purpose of this code and where is it used in the project?\n - This code is a React component called `SideSwitch` that renders a switch with labels for \"Withdraw\" and \"Deposit\". It is likely used in a UI component related to financial transactions.\n2. What external libraries or dependencies does this code rely on?\n - This code relies on several external libraries including `@headlessui/react`, `@heroicons/react/outline`, `@lingui/macro`, `@lingui/react`, and custom hooks from `../../state/inari/hooks` and `../../state/hooks`.\n3. What state is being managed by this component and how is it updated?\n - The `zapIn` state is being managed by this component and is updated by dispatching the `setZapIn` action with the opposite boolean value of the current `zapIn` state when the switch is toggled. The `zapIn` state is obtained from the `useInariState` hook and the `setZapIn` action is dispatched using the `useAppDispatch` hook.",
- "checksum": "fd6b9a2478d882867589b896b71b37f6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/inari/StrategySelector.json b/.autodoc/docs/json/core/src/features/inari/StrategySelector.json
deleted file mode 100644
index b53be54b5..000000000
--- a/.autodoc/docs/json/core/src/features/inari/StrategySelector.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "StrategySelector.tsx",
- "filePath": "core/src/features/inari/StrategySelector.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/inari/StrategySelector.tsx",
- "summary": "The code above is a React component called `StrategySelector` that renders a list of strategies and allows the user to select one. The component is part of a larger project called `zoo` and imports several functions and hooks from other files in the project.\n\nThe `StrategySelector` component receives no props and uses three hooks: `useInariState`, `useInariStrategies`, and `useAppDispatch`. These hooks are used to retrieve the current strategy ID, a list of available strategies, and a dispatch function to update the state of the application.\n\nThe component renders a `div` element with a class of `flex flex-col gap-4 z-10 relative`. Inside this `div`, the component maps over the list of strategies and renders a `div` element for each one. Each `div` element has a `key` attribute set to the strategy's ID and an `onClick` event listener that dispatches an action to update the current strategy ID when the user clicks on it.\n\nThe `classNames` function is used to conditionally set the `className` attribute of each `div` element based on whether the strategy is currently selected or not. If the strategy is selected, the `className` attribute is set to `'border-gradient-r-blue-pink-dark-800'`, otherwise it is set to `'bg-dark-900'`. The `classNames` function also adds several other classes to each `div` element, including `'cursor-pointer'`, `'border'`, `'border-transparent'`, `'pl-5'`, `'py-2'`, `'rounded'`, `'whitespace-nowrap'`, `'w-full'`, `'font-bold'`, `'h-[48px]'`, `'flex'`, `'items-center'`, and `'text-sm'`. These classes are used to style the `div` elements to look like buttons.\n\nFinally, the `div` elements display the name of each strategy, which is retrieved from the `general.name` property of each strategy object.\n\nOverall, the `StrategySelector` component is a reusable UI component that allows the user to select a strategy from a list of available strategies. It is likely used in conjunction with other components and functions in the `zoo` project to provide a complete user interface for managing and analyzing data related to animal behavior. An example usage of this component might look like:\n\n```\nimport StrategySelector from './components/StrategySelector'\n\nfunction App() {\n return (\n Transaction Form
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this component and how is it used within the larger project?\n - This component appears to be a strategy selector that is used within the Inari feature of the project. It renders a list of strategies and allows the user to select one. It is likely used in conjunction with other components to provide a complete user interface for managing Inari strategies.\n2. What is the `useInariState` hook and what data does it provide?\n - The `useInariState` hook is imported from a file located at `../../state/inari/hooks` and appears to provide access to the current Inari state, including the selected strategy ID.\n3. What is the purpose of the `classNames` function and where is it defined?\n - The `classNames` function is imported from a file located at `../../functions` and appears to be used to conditionally apply CSS classes to the rendered `div` element based on the current strategy ID. It likely provides a convenient way to generate complex class names based on dynamic data.",
- "checksum": "ad17d2461bb0a35c2778273cd71a8acf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/inari/StrategyStepDisplay.json b/.autodoc/docs/json/core/src/features/inari/StrategyStepDisplay.json
deleted file mode 100644
index e8c39f724..000000000
--- a/.autodoc/docs/json/core/src/features/inari/StrategyStepDisplay.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "StrategyStepDisplay.tsx",
- "filePath": "core/src/features/inari/StrategyStepDisplay.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/inari/StrategyStepDisplay.tsx",
- "summary": "The `StrategyStepDisplay` component is a React functional component that displays a list of steps in a strategy. It receives no props and uses the `useDerivedInariState` hook to retrieve the `general` property from the Inari state. \n\nThe component renders a `div` element with a class of `flex items-center gap-3 text-high-emphesis`. Inside this `div`, the component maps over the `general.steps` array and creates a `Typography` component for each step. The `Typography` component receives a `weight` prop of `700` and a `variant` prop of `lg`, and displays the text of the step.\n\nAfter mapping over the `general.steps` array, the component uses the `reduce` method to concatenate the `Typography` components with an `ArrowRightIcon` component in between each one. The `reduce` method takes two arguments: a callback function and an initial value. The callback function takes two arguments: an accumulator and the current value. The initial value is `null`.\n\nThe callback function checks if the accumulator is `null`. If it is, it returns the current value. If it is not, it returns a `div` element containing the accumulator, an `ArrowRightIcon` component, and the current value. The `ArrowRightIcon` component has a `width` prop of `16` and a `height` prop of `16`. The `div` element has a class of `rounded-full p-1 bg-dark-800 border-[3px] border-dark-900 relative z-10`.\n\nThe resulting JSX is then rendered inside the `div` element with the `flex items-center gap-3 text-high-emphesis` class.\n\nThis component can be used in a larger project to display a list of steps in a strategy. For example, it could be used in a financial planning app to display the steps a user needs to take to achieve their financial goals. Here is an example of how the component could be used:\n\n```\nSelect a strategy:
\n| \n | \n \n | \n \n | \n
|---|---|---|
| {item.name} | \n{item.age} | \n{item.date} | \n
\n
\n )\n}\n\nexport default BorrowMarket\n```",
- "questions": "1. What is the purpose of the `MarketHeader` function and what are its expected inputs and outputs?\n- The `MarketHeader` function is a React component that returns a `Card.Header` element with a title, search input, and search icon. It takes in two props: `type` (default value of 'Borrow') and `lists`, and returns a JSX element.\n\n2. What is the purpose of the `onSearch` function and how is it used?\n- The `onSearch` function is called when the user types into the search input and updates the search term for each list in the `lists` array. It is used as an event handler for the `onChange` event of the search input.\n\n3. What is the purpose of the `classNames` function and where is it imported from?\n- The `classNames` function is used to conditionally apply CSS classes to the `Card.Header` element based on the value of the `type` prop. It is imported from a file located at `../../functions`.",
- "checksum": "b96ce42b055e0feba188cb820dc0d8dc"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/kashi/SmartNumberInput.json b/.autodoc/docs/json/core/src/features/kashi/SmartNumberInput.json
deleted file mode 100644
index a714a8b7c..000000000
--- a/.autodoc/docs/json/core/src/features/kashi/SmartNumberInput.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SmartNumberInput.tsx",
- "filePath": "core/src/features/kashi/SmartNumberInput.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/kashi/SmartNumberInput.tsx",
- "summary": "The `SmartNumberInput` function is a React component that renders a form input field with additional functionality for handling numeric values. The component takes in several props that allow for customization of the input field and its behavior. \n\nThe component renders two main sections: a header section and an input section. The header section displays a title, a button to toggle between using a BentoBox or a Wallet, and a maximum value. The input section displays a numeric input field and a button to set the input value to the maximum value. \n\nThe `SmartNumberInput` component is designed to be used in a larger project where numeric input fields are required. The component can be customized to fit the specific needs of the project by passing in different props. For example, the `color` prop can be used to change the color of the input field and the `useBento` prop can be used to determine whether the input value is coming from a BentoBox or a Wallet. \n\nHere is an example of how the `SmartNumberInput` component can be used in a React project:\n\n```\nimport SmartNumberInput from './SmartNumberInput'\n\nfunction MyForm() {\n const [value, setValue] = useState('')\n const max = BigNumber.from(1000)\n\n return (\n \n )\n}\n```\n\nIn this example, the `SmartNumberInput` component is used in a form to handle numeric input for a token. The `value` and `setValue` props are used to control the value of the input field, and the `max` prop is used to set the maximum value of the input field. The `showMax` prop is set to `true` to display the maximum value button.",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code defines a React component called `SmartNumberInput` that renders a form input field with some additional features such as a toggle button and a maximum value display.\n\n2. What external libraries or dependencies does this code rely on?\n- This code imports two components from the `react-feather` library, as well as the `BigNumber` class from the `@ethersproject/bignumber` library. It also uses two custom components called `Button` and `Input` that are presumably defined elsewhere in the project.\n\n3. What are the optional props that can be passed to this component and what do they do?\n- The `SmartNumberInput` component accepts several optional props, including `color` (which determines the color scheme of the component), `token` (which is an object containing information about a cryptocurrency token), `value` (which is the current value of the input field), `setValue` (which is a function to update the value of the input field), and several others. These props control various aspects of the component's behavior and appearance, such as whether to display a maximum value button, whether to use a BentoBox or wallet balance, and whether the component is disabled.",
- "checksum": "549eda243b4658c072dc6f2c24383972"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/kashi/TradeReview.json b/.autodoc/docs/json/core/src/features/kashi/TradeReview.json
deleted file mode 100644
index c4f55f9ea..000000000
--- a/.autodoc/docs/json/core/src/features/kashi/TradeReview.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TradeReview.tsx",
- "filePath": "core/src/features/kashi/TradeReview.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/kashi/TradeReview.tsx",
- "summary": "The `TradeReview` component is a React component that displays a summary of a trade that is about to be executed on a decentralized exchange. The component takes two props: `trade` and `allowedSlippage`. `trade` is an object that represents the trade to be executed, while `allowedSlippage` is a number that represents the maximum amount of slippage that is allowed for the trade.\n\nThe component first imports several modules from the `@zoolabs/zdk` library, as well as several React components and hooks. It then defines the `TradeReview` function component, which returns a JSX element that displays the trade summary.\n\nThe component first checks if a trade object has been passed as a prop. If not, it displays a message indicating that no liquidity was found to do the swap. If a trade object is present, the component displays several pieces of information about the trade, including the minimum amount of output currency that will be received, the price impact of the trade, and the liquidity provider fee.\n\nThe component also checks if the trade has a route with more than two tokens. If so, it displays the route that the trade will take through the tokens.\n\nThe `TradeReview` component is likely used in a larger project that involves executing trades on a decentralized exchange. It provides users with a summary of the trade they are about to execute, including important information such as the minimum amount of output currency they will receive and the price impact of the trade. This information can help users make informed decisions about whether to proceed with the trade or not.",
- "questions": "1. What is the purpose of the `TradeReview` component?\n- The `TradeReview` component is used to display information about a trade, including the minimum amount received, price impact, liquidity provider fee, and route.\n\n2. What libraries and hooks are being imported in this file?\n- The file is importing `@zoolabs/zdk`, `React`, `useMemo`, `@lingui/macro`, `useActiveWeb3React`, and `useLingui`.\n\n3. What is the significance of the `allowedSlippage` prop?\n- The `allowedSlippage` prop is used to determine the minimum amount of output currency that must be received in a trade, taking into account the maximum allowable slippage.",
- "checksum": "bd12d5f11c2ad8bf58575fd73aa67579"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/kashi/TransactionReview.json b/.autodoc/docs/json/core/src/features/kashi/TransactionReview.json
deleted file mode 100644
index 0aee30c13..000000000
--- a/.autodoc/docs/json/core/src/features/kashi/TransactionReview.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TransactionReview.tsx",
- "filePath": "core/src/features/kashi/TransactionReview.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/kashi/TransactionReview.tsx",
- "summary": "The `TransactionReviewView` function in this file is a React component that renders a transaction review. It takes a single prop, `transactionReview`, which is an array of objects representing each line of the review. Each object has three properties: `name`, `from`, and `to`, which represent the name of the transaction, the sender of the transaction, and the recipient of the transaction, respectively. Additionally, each object has a `direction` property, which is an enum value from the `Direction` enum defined in `TransactionReview.ts`.\n\nThe component first checks if `transactionReview` is truthy and has a length greater than 0. If so, it renders a heading (\"Transaction Review\") and a list of lines, where each line is rendered as a flexbox with two columns: the name of the transaction in the left column, and the sender and recipient in the right column. The direction of the transaction is indicated by an arrow icon between the sender and recipient, with the icon pointing right for a flat transaction, up for a positive transaction, and down for a negative transaction.\n\nThis component can be used in the larger project to display a summary of a transaction review to the user. For example, it could be used in a wallet application to show the user a summary of the transactions they have made or received. Here is an example usage of the component:\n\n```jsx\nimport TransactionReviewView from './TransactionReviewView'\n\nconst transactionReview = [\n {\n name: 'Transaction 1',\n from: 'Alice',\n to: 'Bob',\n direction: Direction.UP,\n },\n {\n name: 'Transaction 2',\n from: 'Charlie',\n to: 'Alice',\n direction: Direction.FLAT,\n },\n {\n name: 'Transaction 3',\n from: 'Bob',\n to: 'Eve',\n direction: Direction.DOWN,\n },\n]\n\nfunction MyComponent() {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `TransactionReviewView` function?\n- The `TransactionReviewView` function is a React component that renders a list of transaction review lines.\n\n2. What is the `TransactionReview` entity and where is it defined?\n- The `TransactionReview` entity is used as a type for the `transactionReview` prop passed to the `TransactionReviewView` component. It is defined in a file located at `../../entities/TransactionReview`.\n\n3. What is the purpose of the `ArrowRight`, `ArrowUpRight`, and `ArrowDownRight` components imported from `react-feather`?\n- These components are icons that are used to indicate the direction of a transaction review line. The `ArrowRight` component is used for a flat direction, `ArrowUpRight` for an up direction, and `ArrowDownRight` for a down direction.",
- "checksum": "ca2de031d947d35ce64bdd893309f86b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/kashi/WarningsList.json b/.autodoc/docs/json/core/src/features/kashi/WarningsList.json
deleted file mode 100644
index c833d1fc8..000000000
--- a/.autodoc/docs/json/core/src/features/kashi/WarningsList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "WarningsList.tsx",
- "filePath": "core/src/features/kashi/WarningsList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/kashi/WarningsList.tsx",
- "summary": "The code above is a React component that renders a list of warnings. It imports the `Alert` component from the `../../components/Alert` file and the `Warnings` entity from the `../../entities/Warnings` file. The `WarningsList` function takes a single parameter, `warnings`, which is an array of `Warnings` objects. \n\nThe `WarningsList` function returns a list of `Alert` components, one for each warning in the `warnings` array. The `map` function is used to iterate over the `warnings` array and create an `Alert` component for each warning. The `key` prop is set to the index of the warning in the array, and the `type` prop is set to `'error'` if the warning is marked as `breaking`, and `'warning'` otherwise. The `message` prop is set to the `message` property of the warning object. Finally, the `className` prop is set to `'mb-4'` to add some margin to each `Alert` component.\n\nThis component can be used in the larger project to display a list of warnings to the user. For example, if the project has a build process that checks for potential issues or breaking changes, the `WarningsList` component can be used to display these warnings to the user. The `Warnings` entity can be populated with the results of the build process, and passed to the `WarningsList` component to display the warnings. \n\nHere is an example of how the `WarningsList` component can be used in a larger project:\n\n```\nimport React from 'react'\nimport WarningsList from './WarningsList'\nimport { getBuildWarnings } from './build'\n\nfunction App() {\n const warnings = getBuildWarnings()\n\n return (\n \n
\n )\n}\n\nexport default App\n```\n\nIn this example, the `App` component calls the `getBuildWarnings` function to get an array of `Warnings` objects, and passes it to the `WarningsList` component as a prop. The `WarningsList` component then renders a list of `Alert` components for each warning in the array.",
- "questions": "1. What is the purpose of the `Alert` component being imported?\n- The `Alert` component is being used to display warning messages in the `WarningsList` component.\n\n2. What is the `Warnings` entity and where is it defined?\n- The `Warnings` entity is being used as a type for the `warnings` prop in the `WarningsList` component. It is defined in a file located at `zoo/entities/Warnings`.\n\n3. What determines whether the `Alert` component displays an error or warning message?\n- The `type` prop of the `Alert` component is determined by the `breaking` property of each `warning` object. If `breaking` is true, the type will be set to `'error'`, otherwise it will be set to `'warning'`.",
- "checksum": "6aa04a6523745eaf44d5b7beb988e4e6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/kashi/Withdraw.json b/.autodoc/docs/json/core/src/features/kashi/Withdraw.json
deleted file mode 100644
index 900e40be9..000000000
--- a/.autodoc/docs/json/core/src/features/kashi/Withdraw.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Withdraw.tsx",
- "filePath": "core/src/features/kashi/Withdraw.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/kashi/Withdraw.tsx",
- "summary": "The `LendWithdrawAction` function is a React component that handles the withdrawal of assets from a Kashi market. The component takes a `pair` object as a prop, which contains information about the asset pair being traded in the market. The component renders a form that allows the user to specify the amount of the asset they wish to withdraw, and provides feedback on the potential transaction.\n\nThe component uses several hooks to manage state and perform actions. The `useActiveWeb3React` hook retrieves the current Ethereum account from the user's web3 provider. The `useKashiApprovalPending` hook checks whether the user has approved the Kashi market to spend their assets. The `useKashiApproveCallback` hook handles the approval process and returns several functions that are used in the withdrawal process.\n\nThe component uses several pieces of information from the `pair` object to calculate the maximum amount of the asset that can be withdrawn, and to determine the amount of the asset that the user wishes to withdraw. The `minimum` function is used to ensure that the calculated values do not exceed certain limits.\n\nThe component also performs several checks to ensure that the withdrawal is valid. The `Warnings` class is used to store any warnings that may be generated during the withdrawal process. If any warnings are present, they are displayed to the user. The `TransactionReview` class is used to store information about the potential transaction, such as the amount of the asset being withdrawn and the resulting changes to the user's balances.\n\nFinally, the component renders a button that initiates the withdrawal process. When the button is clicked, the `onCook` function is called with the `pair` object and an `onExecute` function as arguments. The `onExecute` function calculates the fraction of the asset to be withdrawn and calls the `removeAsset` function on a `KashiCooker` object to initiate the withdrawal. The `onCook` function then returns a string indicating the success of the withdrawal.\n\nExample usage:\n\n```jsx\nMy App
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `CurrencyInputPanel` that renders a panel for inputting currency amounts and displays information about the selected currency.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several modules from external libraries, including `@zoolabs/zdk`, `next/image`, `@lingui/macro`, and `useUSDCPrice`.\n\n3. What props does the `CurrencyInputPanel` component expect?\n- The `CurrencyInputPanel` component expects three props: `field`, which specifies the currency field to which this panel corresponds; `meowshiState`, which contains information about the currencies and input fields; and `showMax`, which determines whether a \"Max\" button should be displayed to allow the user to input the maximum available balance for the selected currency.",
- "checksum": "80e949d233ffabf69dae90c6af6065f6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/meowshi/HeaderToggle.json b/.autodoc/docs/json/core/src/features/meowshi/HeaderToggle.json
deleted file mode 100644
index 4d7b1ecf2..000000000
--- a/.autodoc/docs/json/core/src/features/meowshi/HeaderToggle.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "HeaderToggle.tsx",
- "filePath": "core/src/features/meowshi/HeaderToggle.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/meowshi/HeaderToggle.tsx",
- "summary": "The `HeaderToggle` component is a React functional component that renders a toggle switch with two options: \"Meow\" and \"Un-Meow\". The toggle switch is implemented using the `RadioGroup` component from the `@headlessui/react` library. \n\nThe component takes in a prop called `meowshiState`, which is an object that contains two properties: `meow` and `switchCurrencies`. `meow` is a boolean value that represents the current state of the toggle switch, and `switchCurrencies` is a function that toggles the value of `meow`. \n\nWhen the component is rendered, it displays the toggle switch with two options: \"Meow\" and \"Un-Meow\". The currently selected option is highlighted with a gradient background color. When the user clicks on one of the options, the `switchCurrencies` function is called to toggle the value of `meow`. \n\nIn addition to the toggle switch, the component also displays a text box that shows the conversion rate between xSUSHI and MEOW. The text box is styled with a gradient border and a rounded border radius. \n\nThis component can be used in the larger project to allow users to toggle between different modes or settings. For example, it could be used to toggle between light mode and dark mode, or between different languages. The `HeaderToggle` component can be easily customized by changing the text and styling to fit the specific needs of the project. \n\nExample usage:\n\n```\nimport HeaderToggle from './HeaderToggle'\n\nfunction App() {\n const [meowshiState, setMeowshiState] = useState({ meow: true })\n\n const handleSwitchCurrencies = () => {\n setMeowshiState({ meow: !meowshiState.meow })\n }\n\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports a React component called `HeaderToggle` that renders a radio group with two options and a text element.\n\n2. What props does the `HeaderToggle` component expect?\n- The `HeaderToggle` component expects a prop called `meowshiState` of type `MeowshiState`.\n\n3. What external libraries or components are being used in this code?\n- This code imports `React`, `RadioGroup` from `@headlessui/react`, `Typography`, and `classNames`.",
- "checksum": "28ee62f7ab0beb07a9b369cfe5d783fb"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/meowshi/MeowshiButton.json b/.autodoc/docs/json/core/src/features/meowshi/MeowshiButton.json
deleted file mode 100644
index a7b857020..000000000
--- a/.autodoc/docs/json/core/src/features/meowshi/MeowshiButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "MeowshiButton.tsx",
- "filePath": "core/src/features/meowshi/MeowshiButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/meowshi/MeowshiButton.tsx",
- "summary": "The `MeowshiButton` component is a React functional component that renders a button for converting between SUSHI and xSUSHI tokens using the Meowshi protocol. The component imports various hooks, components, and utility functions from different files in the project. \n\nThe component takes a single prop `meowshiState` which is an object containing the current state of the Meowshi protocol. The state includes the currencies being converted, the input and output fields, and a boolean flag indicating whether the user wants to convert from SUSHI to xSUSHI or vice versa. \n\nThe component first initializes various state variables using the `useState` hook. It then uses the `useActiveWeb3React` hook to get the current user's account and chain ID. It also uses the `useTokenBalance` hook to get the user's SUSHI and xSUSHI token balances. \n\nThe component then uses the `useMeowshi` hook to get the current approval state and to approve, convert, and unconvert tokens using the Meowshi protocol. It also uses the `tryParseAmount` function to parse the input and output amounts entered by the user. \n\nThe component then renders different buttons depending on the current approval state and network. If the user is not connected to a wallet, the component renders a disabled button prompting the user to connect to a wallet. If the user is on a network other than the mainnet, the component renders a disabled button indicating that the network is not yet supported. If the user has not yet approved the Meowshi protocol to spend their tokens, the component renders a button prompting the user to approve the protocol. If the user has approved the protocol, the component renders a button that, when clicked, opens a confirmation modal and converts the tokens. \n\nOverall, this component provides a simple and user-friendly way for users to convert between SUSHI and xSUSHI tokens using the Meowshi protocol. It can be used in the larger project as a building block for more complex features that involve token conversions. \n\nExample usage:\n\n```jsx\nimport MeowshiButton from './MeowshiButton';\n\nconst MyComponent = () => {\n const meowshiState = {\n currencies: {\n input: SUSHI,\n output: XSUSHI\n },\n fields: {\n input: '10',\n output: ''\n },\n meow: true\n };\n\n return (\n \n
\n );\n};\n```",
- "questions": "1. What is the purpose of the `MeowshiButton` component?\n- The `MeowshiButton` component is used to render a button that allows the user to convert between two different currencies.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including `@zoolabs/zdk`, `@ethersproject/units`, `@lingui/macro`, and several custom hooks and components.\n\n3. What conditions must be met for the button to be enabled?\n- The button is enabled if the user is connected to a wallet, the network is set to `ChainId.MAINNET`, and the user has approved the necessary token allowance. Additionally, the button is disabled if the user's balance is insufficient or if no amount has been entered.",
- "checksum": "a25ceafea16a0cadb7ec74fb13c8cee7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/migration/index.json b/.autodoc/docs/json/core/src/features/migration/index.json
deleted file mode 100644
index 307d59857..000000000
--- a/.autodoc/docs/json/core/src/features/migration/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/features/migration/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/features/migration/index.ts",
- "summary": "The code above is a simple export statement that defines an array called `MigrationSupported`. This array contains three elements, which are constants imported from the `@zoolabs/zdk` library: `ChainId.MAINNET`, `ChainId.BSC`, and `ChainId.MATIC`. \n\nThe purpose of this code is to provide a list of supported blockchain networks for the migration of assets in the larger zoo project. The `ChainId` constants represent unique identifiers for different blockchain networks, and by including them in the `MigrationSupported` array, the code ensures that assets can be migrated between these networks. \n\nFor example, if a user wants to migrate an asset from the Binance Smart Chain (BSC) to the Polygon (MATIC) network, they can use the `MigrationSupported` array to check if this migration is supported. They can do this by checking if both `ChainId.BSC` and `ChainId.MATIC` are included in the array. If they are, the migration is supported, and the user can proceed with the migration. \n\nHere's an example of how this code might be used in the larger zoo project:\n\n```javascript\nimport { MigrationSupported } from 'zoo'\n\nconst sourceChain = ChainId.BSC\nconst targetChain = ChainId.MATIC\n\nif (MigrationSupported.includes(sourceChain) && MigrationSupported.includes(targetChain)) {\n // Perform asset migration from BSC to MATIC\n} else {\n console.log('Asset migration not supported for the selected source and target chains.')\n}\n```\n\nIn this example, the `MigrationSupported` array is imported from the `zoo` module. The `sourceChain` and `targetChain` variables are set to `ChainId.BSC` and `ChainId.MATIC`, respectively. The `includes()` method is then used to check if both `sourceChain` and `targetChain` are included in the `MigrationSupported` array. If they are, the asset migration can proceed. If not, an error message is logged to the console. \n\nOverall, this code provides a simple and flexible way to manage asset migrations between different blockchain networks in the larger zoo project.",
- "questions": "1. What is the purpose of this code?\n - This code exports an array of supported chain IDs for migration in the `zoo` project.\n\n2. What is the `ChainId` module and where does it come from?\n - The `ChainId` module is imported from the `@zoolabs/zdk` package, which is likely a custom library developed by the `zoo` project team.\n\n3. Are there any other modules or functions that depend on this `MigrationSupported` array?\n - Without further context, it is unclear whether other parts of the `zoo` project depend on this array. However, it is possible that other migration-related functions or modules may reference this array.",
- "checksum": "335d3e11d9f99fb2a242975db8970ce3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/miso/Article.json b/.autodoc/docs/json/core/src/features/miso/Article.json
deleted file mode 100644
index 662c342f0..000000000
--- a/.autodoc/docs/json/core/src/features/miso/Article.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Article.tsx",
- "filePath": "core/src/features/miso/Article.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/miso/Article.tsx",
- "summary": "The code above defines a React functional component called `Article`. This component takes in two props: `title` and `content`. The `title` prop is optional and has a default value of an empty string. The `content` prop is required and has no default value. \n\nThe purpose of this component is to render an article with a title and content. The article is contained within a `div` element with a class of `col-span-12 md:col-span-6 xl:col-span-4 xl:mx-8`, which is a CSS class used for grid layout. The title is rendered within a nested `div` element with a class of `self-end mb-3 text-lg font-bold md:text-xl text-high-emphesis md:mb-7`. This class is used for styling the title to be bold and larger on medium and large screens. The content is rendered within another nested `div` element with a class of `pr-3 mb-2 text-sm leading-5 text-white opacity-50 md:text-base md:mb-4 md:pr-0`. This class is used for styling the content to be smaller and less opaque than the title, and to have some padding on the right side.\n\nThis component can be used in a larger project to display articles with a consistent layout and styling. For example, if a blog website was being built with React, this component could be used to render each blog post with a title and content. Here is an example of how this component could be used:\n\n```\nimport React from 'react';\nimport Article from './Article';\n\nfunction BlogPost({ title, content }) {\n return (\n \n );\n}\n\nexport default BlogPost;\n```\n\nIn this example, the `BlogPost` component takes in `title` and `content` props and passes them down to the `Article` component. This allows for consistent styling and layout of each blog post on the website.",
- "questions": "1. What is the purpose of the `Article` function?\n- The `Article` function is a React component that renders an article with a title and content.\n\n2. What is the data type of the `title` and `content` props?\n- The `title` prop is of type `any` and is optional, while the `content` prop is of type `any` and is required.\n\n3. What is the purpose of the CSS classes used in the JSX code?\n- The CSS classes are used to style the article component, including the font size, color, and layout.",
- "checksum": "4ab3fe5b6527a73e444560565f4de859"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/miso/Articles.json b/.autodoc/docs/json/core/src/features/miso/Articles.json
deleted file mode 100644
index 171c700cd..000000000
--- a/.autodoc/docs/json/core/src/features/miso/Articles.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Articles.tsx",
- "filePath": "core/src/features/miso/Articles.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/miso/Articles.tsx",
- "summary": "The code above is a React component called `Articles` that takes in an array of objects as a prop, where each object represents an article with a `title` and `content`. The component then maps over the array and renders an `Article` component for each object in the array, passing in the `title` and `content` as props. \n\nThe `Article` component is imported from a file located at `./Article`, which suggests that this code is part of a larger project with multiple components. The purpose of this code is to render a list of articles on a webpage, where each article is represented by an `Article` component. \n\nThis component can be used in a variety of ways within the larger project. For example, it could be used to display a list of blog posts, news articles, or any other type of content that is organized into articles. \n\nHere is an example of how this component could be used in a larger project:\n\n```jsx\nimport React from 'react'\nimport Articles from './Articles'\n\nconst articles = [\n {\n title: 'The Importance of Exercise',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'\n },\n {\n title: 'Healthy Eating Habits',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'\n },\n {\n title: 'Mental Health Awareness',\n content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'\n }\n]\n\nfunction App() {\n return (\n \n
\n )\n}\n\nexport default App\n```\n\nIn this example, the `Articles` component is used to render a list of three articles with titles and content. The `articles` array is passed in as a prop to the `Articles` component, which then maps over the array and renders an `Article` component for each object in the array. The resulting output would be a list of three articles with titles and content displayed on the webpage.",
- "questions": "1. What is the purpose of the `Article` component being imported?\n - The `Article` component is being imported to be used in the `Articles` function.\n\n2. What is the expected data structure for the `articles` prop?\n - The `articles` prop is expected to be an array of objects with properties `title` and `content`.\n\n3. What does the `key` prop do in the `Article` component being returned?\n - The `key` prop is used to uniquely identify each `Article` component when rendering a list of them, and is set to `article-${i}` where `i` is the index of the current `article` in the `articles` array.",
- "checksum": "4336ddeb719baa76e42128d7c263aa9f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/CurrencyInputPanel.json b/.autodoc/docs/json/core/src/features/onsen/CurrencyInputPanel.json
deleted file mode 100644
index ad3ce1592..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/CurrencyInputPanel.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CurrencyInputPanel.tsx",
- "filePath": "core/src/features/onsen/CurrencyInputPanel.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/CurrencyInputPanel.tsx",
- "summary": "The `CurrencyInputPanel` component is a reusable UI component that provides an input field for users to enter a currency amount, along with an optional button to set the input field to the maximum available balance for the selected currency. The component also displays the currency symbol and logo, along with the current balance and fiat value of the selected currency.\n\nThe component takes in several props, including the current value of the input field, a callback function to handle user input, a boolean flag to show or hide the \"max\" button, the current balance of the selected currency, the fiat value of the selected currency, and various other optional flags to customize the appearance of the component.\n\nInternally, the component uses several other components and hooks from the `@zoolabs/zdk`, `@heroicons/react/outline`, `@lingui/react`, and `lottie-react` libraries to render the currency logo, fiat value, and animation for the \"max\" button. The component also uses the `classNames` and `formatCurrencyAmount` functions from the `../../functions` module to apply CSS classes and format currency amounts, respectively.\n\nOverall, the `CurrencyInputPanel` component provides a flexible and customizable input field for users to enter currency amounts, along with useful information about the selected currency's balance and fiat value. This component can be used in various parts of the larger project, such as in trading interfaces or wallet management pages. \n\nExample usage:\n\n```jsx\nimport { CurrencyAmount, Currency } from \"@zoolabs/zdk\";\nimport CurrencyInputPanel from \"./CurrencyInputPanel\";\n\nfunction MyComponent() {\n const [value, setValue] = useState(\"\");\n const currencyBalance = new CurrencyAmountArticles
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code defines a React component called `CurrencyInputPanel` that renders a panel for inputting a currency amount, including an optional currency logo, input field, and balance information.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies, including `@zoolabs/zdk`, `@heroicons/react/outline`, `lottie-react`, `@lingui/macro`, and several custom components and hooks defined elsewhere in the project.\n\n3. What are the optional props that can be passed to the `CurrencyInputPanel` component?\n- The `CurrencyInputPanel` component accepts several optional props, including `value`, `onUserInput`, `onMax`, `showMaxButton`, `currency`, `id`, `currencyBalance`, `fiatValue`, `priceImpact`, `hideBalance`, `hideInput`, and `hideIcon`. These props control the behavior and appearance of the component, such as the initial input value, whether to show a \"max\" button, and whether to hide the currency logo or balance information.",
- "checksum": "5147dd122805808c687eed2a323c3e6f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/FarmList.json b/.autodoc/docs/json/core/src/features/onsen/FarmList.json
deleted file mode 100644
index 13798ffe4..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/FarmList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "FarmList.tsx",
- "filePath": "core/src/features/onsen/FarmList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/FarmList.tsx",
- "summary": "The `FarmList` component is a React component that renders a list of farms. It receives two props: `farms`, which is an array of farm objects, and `term`, which is a search term used to filter the farms. \n\nThe component uses the `useSortableData` hook to enable sorting of the farms by different criteria such as symbol, TVL, and APR. The sorting is triggered by clicking on the corresponding column header, which calls the `requestSort` function with the appropriate key. The current sort configuration is stored in the `sortConfig` object, which is used to display an up or down arrow next to the column header to indicate the sort direction.\n\nThe component also uses the `useInfiniteScroll` hook to enable infinite scrolling of the farms. The `numDisplayed` state variable keeps track of the number of farms currently displayed, and is updated by the `setNumDisplayed` function when the user scrolls to the bottom of the list. The `InfiniteScroll` component from the `react-infinite-scroll-component` library is used to detect when the user has reached the bottom of the list and trigger the loading of more farms.\n\nEach farm in the list is rendered using the `FarmListItem` component, which receives a single `farm` prop. The `FarmListItem` component is not shown in this code snippet, but it is likely responsible for rendering the individual farm details such as the farm name, symbol, TVL, and APR.\n\nOverall, the `FarmList` component provides a flexible and interactive way to display and sort a list of farms, while also enabling infinite scrolling to handle large lists. It can be used as a standalone component or as part of a larger project that involves displaying and managing farms. \n\nExample usage:\n\n```jsx\nimport FarmList from './FarmList'\n\nconst farms = [\n { symbol: 'ETH-USDT', tvl: 1000000, roiPerYear: 0.1 },\n { symbol: 'BTC-USDT', tvl: 2000000, roiPerYear: 0.2 },\n { symbol: 'USDC-USDT', tvl: 3000000, roiPerYear: 0.3 },\n]\n\nfunction App() {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `useSortableData` hook?\n - The `useSortableData` hook is used to sort the `farms` array based on the user's request.\n\n2. What is the purpose of the `InfiniteScroll` component?\n - The `InfiniteScroll` component is used to render a list of `FarmListItem` components and load more items as the user scrolls down the page.\n\n3. What is the purpose of the `Dots` component?\n - The `Dots` component is used to display a loading animation while the `farms` data is being fetched.",
- "checksum": "e921e27c6c4c85abfd9b759d4635c895"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/FarmListItem.json b/.autodoc/docs/json/core/src/features/onsen/FarmListItem.json
deleted file mode 100644
index c22954ef6..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/FarmListItem.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "FarmListItem.tsx",
- "filePath": "core/src/features/onsen/FarmListItem.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/FarmListItem.tsx",
- "summary": "The `FarmListItem` component is a React component that renders a single farm item in a list of farms. It takes a `farm` object as a prop, which contains information about the farm, such as the tokens being farmed, the TVL (total value locked), rewards, and ROI (return on investment).\n\nThe component uses the `Disclosure` component from the `@headlessui/react` library to create a collapsible section for each farm item. When the user clicks on the farm item, the section expands to show more details about the farm.\n\nThe component uses several other components and functions from the project, such as `DoubleLogo`, `Image`, `QuestionHelper`, and `useCurrency`. It also imports the `PairType` enum from another file.\n\nThe component renders the farm item using a grid layout with four columns. The first column displays the tokens being farmed, along with their logos and symbols. The second column displays the TVL of the farm. The third column displays the rewards being earned by the farm, along with their icons and reward rates. The fourth column displays the ROI of the farm, along with a tooltip that shows the reward APR and fee APY.\n\nThe component uses several utility functions to format numbers and percentages, such as `formatNumber` and `formatPercent`. It also uses the `classNames` function to conditionally apply CSS classes based on whether the farm item is open or closed.\n\nOverall, the `FarmListItem` component is a reusable component that can be used to display a list of farms in the larger project. It provides a consistent and user-friendly way to view and interact with farms, and can be customized and extended as needed.",
- "questions": "1. What is the purpose of the `FarmListItem` component?\n- The `FarmListItem` component is used to display information about a farm, including its tokens, TVL, rewards, and ROI.\n\n2. What is the `Disclosure` component from `@headlessui/react` used for?\n- The `Disclosure` component is used to create a collapsible section that can be expanded or collapsed by clicking a button.\n\n3. What is the `QuestionHelper` component used for?\n- The `QuestionHelper` component is used to display a tooltip with additional information about a farm's reward APR and fee APY.",
- "checksum": "7422adcb6a122f33154a5557d233577f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/FarmListItemDetails.json b/.autodoc/docs/json/core/src/features/onsen/FarmListItemDetails.json
deleted file mode 100644
index ea868bd64..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/FarmListItemDetails.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "FarmListItemDetails.tsx",
- "filePath": "core/src/features/onsen/FarmListItemDetails.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/FarmListItemDetails.tsx",
- "summary": "The `FarmListItemDetails` component is a React component that renders a panel containing information about a farm. The component imports several dependencies, including `React`, `useState`, `PairType` from an enum file, `Disclosure`, `Tab`, and `Transition` from the `@headlessui/react` library, `t` and `useLingui` from the `@lingui` library, `useActiveWeb3React` from a custom hook, `Token` and `ZERO` from the `@zoolabs/zdk` library, `getAddress` from the `@ethersproject/address` library, and several custom hooks and components.\n\nThe component takes a `farm` object as a prop, which contains information about the farm, including the pair ID and type. The component uses this information to create a `liquidityToken` object, which is an instance of the `Token` class from the `@zoolabs/zdk` library. The `liquidityToken` object is used to retrieve the `stakedAmount` of the farm using the `useUserInfo` hook.\n\nThe component renders a `Transition` component from the `@headlessui/react` library, which animates the panel when it is shown or hidden. The panel is a `Disclosure.Panel` component from the same library, which contains an `InformationDisclosure` component and a `div` element. The `InformationDisclosure` component displays information about the farm, including the name, APR, and TVL. The `div` element contains the investment details and manage position tabs.\n\nThe `div` element contains a `toggleView` state variable, which determines whether the investment details or manage position tab is displayed. The `toggleView` variable is toggled when the user clicks the manage position or investment details button. If the investment details tab is selected, the `InvestmentDetails` component is rendered. If the manage position tab is selected, a `Tab.Group` component is rendered, which contains two `Tab` components and two `Tab.Panel` components. The `Tab` components display the text \"Lending\" or \"Liquidity\" depending on the type of pair, and \"Staking\". The `Tab.Panel` components contain the `ManageKashiPair` or `ManageSwapPair` component and the `ManageBar` component, respectively.\n\nOverall, the `FarmListItemDetails` component is a reusable component that can be used to display information about a farm and allow the user to manage their position or view investment details. It uses several custom hooks and components to retrieve and display the necessary information.",
- "questions": "1. What is the purpose of the `FarmListItemDetails` component?\n- The `FarmListItemDetails` component is responsible for rendering the details of a farm, including investment details and the ability to manage a user's position.\n\n2. What libraries and hooks are being used in this code?\n- This code is using several libraries and hooks, including React, @headlessui/react, @lingui/macro, @lingui/react, and @zoolabs/zdk. It is also using custom hooks from the `../../hooks` and `./hooks` files.\n\n3. What is the purpose of the `liquidityToken` variable?\n- The `liquidityToken` variable is creating a new `Token` object using the `Token` class from the `@zoolabs/zdk` library. It is used to represent the liquidity token for a given farm, which is used to calculate the staked amount for a user's position.",
- "checksum": "9589014d0f05199e7177e3bf7162983f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/FarmMenu.json b/.autodoc/docs/json/core/src/features/onsen/FarmMenu.json
deleted file mode 100644
index 7ab019bdb..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/FarmMenu.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "FarmMenu.tsx",
- "filePath": "core/src/features/onsen/FarmMenu.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/FarmMenu.tsx",
- "summary": "The `Menu` component in the `zoo` project is responsible for rendering a menu of links to different farms. The farms are filtered based on the chain ID and the user's account. The component imports several dependencies, including `ChainId` from the `@zoolabs/zdk` library, `NavLink` from the `../../components/NavLink` file, and two hooks from the `../../hooks` and `../../state/application/hooks` files.\n\nThe `Menu` component takes a single prop, `positionsLength`, which is not used in the component. The component then uses the `useActiveWeb3React` hook to get the user's account and chain ID. It also uses the `useWalletModalToggle` hook to toggle the wallet modal when the user clicks on the \"Your Farms\" link.\n\nThe component then renders a list of links to different farms. If the user is logged in (`account` is truthy), the \"Your Farms\" link is an active link that takes the user to their portfolio of farms. If the user is not logged in, the \"Your Farms\" link is a non-active link that opens the wallet modal when clicked.\n\nThe component then renders a horizontal divider and links to \"All Farms\", \"Kashi Farms\", \"SushiSwap Farms\", and \"2x Reward Farms\". The \"Kashi Farms\" and \"SushiSwap Farms\" links are only rendered if the chain ID is `ChainId.MAINNET`. The \"2x Reward Farms\" link is only rendered if the chain ID is `ChainId.MAINNET` or `ChainId.MATIC`.\n\nOverall, the `Menu` component provides a convenient way for users to navigate to different farms in the `zoo` project. Developers can use this component in the larger project by importing it and rendering it wherever a menu of farm links is needed. For example, the component could be used in the project's header or sidebar to provide easy access to different farms.",
- "questions": "1. What is the purpose of the `Menu` component?\n - The `Menu` component is responsible for rendering a menu of links to different farms based on the user's account and chain ID.\n\n2. What is the significance of the `useActiveWeb3React` and `useWalletModalToggle` hooks?\n - The `useActiveWeb3React` hook is used to retrieve the user's account and chain ID from the active Web3 provider, while the `useWalletModalToggle` hook is used to toggle the display of the wallet modal.\n\n3. What is the purpose of the `NavLink` component?\n - The `NavLink` component is used to create links that are aware of the current route and can apply custom styles when active.",
- "checksum": "f5c3289016f5d985e314d7f5e6af8f3a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/InformationDisclosure.json b/.autodoc/docs/json/core/src/features/onsen/InformationDisclosure.json
deleted file mode 100644
index 73557f898..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/InformationDisclosure.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "InformationDisclosure.tsx",
- "filePath": "core/src/features/onsen/InformationDisclosure.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/InformationDisclosure.tsx",
- "summary": "The `InformationDisclosure` component is a React component that displays information on how to participate in a liquidity pool or Kashi market. It is used in the larger project to provide users with a clear understanding of how to participate in the project's liquidity pools and Kashi markets.\n\nThe component uses the `Disclosure` and `Transition` components from the `@headlessui/react` library to create a collapsible panel that displays the information. When the panel is closed, a `QuestionMarkCircleIcon` is displayed, and when it is open, a `XCircle` icon is displayed to close it.\n\nThe component receives a `farm` prop, which is an object that contains information about the liquidity pool or Kashi market. The component uses this information to display the appropriate instructions for participating in the pool or market.\n\nThe component uses the `Typography` component from the `../../components/Typography` file to display text. It also uses the `NavLink` component from the `../../components/NavLink` file to create links to other pages in the project.\n\nThe component is used in the larger project to provide users with a clear understanding of how to participate in the project's liquidity pools and Kashi markets. It is displayed on the project's website and can be accessed by users who are interested in participating in the project. \n\nExample usage:\n\n```jsx\nimport InformationDisclosure from './InformationDisclosure'\n\nconst MyComponent = () => {\n const farm = {\n pair: {\n type: PairType.SWAP,\n token0: {\n id: '0x123',\n symbol: 'ETH'\n },\n token1: {\n id: '0x456',\n symbol: 'USDC'\n }\n }\n }\n\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `InformationDisclosure` component?\n- The `InformationDisclosure` component is used to display information on how to participate in a farm, including steps to provide liquidity, deposit tokens, and harvest rewards.\n\n2. What libraries and components are being imported in this file?\n- The file is importing React, Fragment, `Disclosure` and `Transition` components from `@headlessui/react`, `QuestionMarkCircleIcon` from `@heroicons/react/solid`, `XCircle` from `react-feather`, `useLingui` and `t` from `@lingui/react`, `Typography` from `../../components/Typography`, `PairType` from `./enum`, and `NavLink` from `../../components/NavLink`.\n\n3. What is the purpose of the `useLingui` hook and `t` function?\n- The `useLingui` hook is used for internationalization and localization of the text displayed in the component. The `t` function is used to translate the text into the appropriate language based on the user's locale.",
- "checksum": "64ebf1e0c164e8b6914c2e916dd11069"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/InvestmentDetails.json b/.autodoc/docs/json/core/src/features/onsen/InvestmentDetails.json
deleted file mode 100644
index 6f69cc07d..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/InvestmentDetails.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "InvestmentDetails.tsx",
- "filePath": "core/src/features/onsen/InvestmentDetails.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/InvestmentDetails.tsx",
- "summary": "The `InvestmentDetails` component is a React functional component that displays information about a particular investment in a farming pool. The component takes a single prop `farm`, which is an object containing information about the farming pool. \n\nThe component imports several hooks and components from various packages and files. The `useLingui` hook and `Typography` component are imported from the `@lingui` package and are used for internationalization. The `Image` component is imported from the `../../components/Image` file and is used to display images. The `useKashiPair` hook is imported from the `../kashi/context` file and is used to get information about a Kashi pair. The `useActiveWeb3React` hook is imported from the `../../hooks` file and is used to get information about the active Web3 connection. The `CurrencyAmount`, `JSBI`, `Token`, `USDC`, and `ZERO` objects are imported from the `@zoolabs/zdk` package and are used for currency calculations. The `getAddress` function is imported from the `@ethersproject/address` package and is used to get the address of a contract. The `PairType` enum is imported from the `./enum` file and is used to determine the type of farming pool. The `usePendingSushi` and `useUserInfo` hooks are imported from the `./hooks` file and are used to get information about pending Sushi rewards and user information, respectively. The `easyAmount` and `formatNumber` functions are imported from the `../../functions` file and are used for formatting numbers. The `BigNumber` object is imported from the `@ethersproject/bignumber` package and is used for big number calculations. The `usePendingReward` and `useMasterChef` hooks are imported from the `./usePendingReward` and `./useMasterChef` files, respectively, and are used to get information about pending rewards and the MasterChef contract.\n\nThe component renders a div that contains two sections: one for displaying information about the user's deposits and one for displaying information about the user's rewards. The deposits section displays the amount of liquidity tokens staked by the user, the value of the staked tokens in USD, and the amount of each token staked. The rewards section displays the amount of pending Sushi and other rewards, the value of the pending rewards in USD, and a button to harvest the rewards.\n\nThe component uses several hooks to get the necessary information for rendering the deposit and reward sections. The `useKashiPair` hook is used to get information about a Kashi pair, which is used to calculate the amount of KMP staked by the user. The `useUserInfo` hook is used to get information about the user's staked amount, which is used to calculate the amount of each token staked. The `usePendingReward` and `usePendingSushi` hooks are used to get information about the user's pending rewards. The `useMasterChef` hook is used to get the `harvest` function, which is called when the user clicks the harvest button.\n\nThe component also uses several functions to calculate the necessary values for rendering the deposit and reward sections. The `onHarvest` function is called when the user clicks the harvest button and calls the `harvest` function from the `useMasterChef` hook. The `positionFiatValue` function calculates the value of the staked tokens in USD. The `rewardValue` function calculates the value of the pending rewards in USD.\n\nOverall, the `InvestmentDetails` component is a reusable component that can be used to display information about a particular investment in a farming pool. It uses several hooks and functions to get and calculate the necessary information for rendering the deposit and reward sections.",
- "questions": "1. What is the purpose of the `InvestmentDetails` component?\n- The `InvestmentDetails` component is used to display information about a particular investment, including the user's deposits, rewards, and details about the investment pair.\n\n2. What external libraries and APIs are being used in this code?\n- The code is using several external libraries and APIs, including Lingui for internationalization, Next.js for routing, and the ZDK library for working with tokens and currencies.\n\n3. What is the difference between `PairType.KASHI` and `PairType.SWAP`?\n- `PairType.KASHI` and `PairType.SWAP` are two different types of pairs that can be used for investments. Kashi pairs are used for lending and borrowing, while swap pairs are used for trading one token for another.",
- "checksum": "739ec437f84755ee530c197f00a4fef7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/KashiDeposit.json b/.autodoc/docs/json/core/src/features/onsen/KashiDeposit.json
deleted file mode 100644
index ac68d52c8..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/KashiDeposit.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "KashiDeposit.tsx",
- "filePath": "core/src/features/onsen/KashiDeposit.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/KashiDeposit.tsx",
- "summary": "The `KashiDeposit` component is a React component that allows users to deposit assets into a Kashi market. Kashi is a lending and borrowing platform built on top of the Aave protocol. The component imports various dependencies such as `@lingui/macro`, `@zoolabs/zdk`, and `@ethersproject/bignumber`. \n\nThe component takes in two props: `pair` and `useBento`. `pair` is an object that contains information about the asset pair being deposited, such as the asset address and balance. `useBento` is a boolean that determines whether the deposit should be made to the BentoBox, which is a smart contract that optimizes gas usage for token transfers.\n\nThe component renders a `CurrencyInputPanel` that allows users to input the amount of assets they want to deposit. The component also calculates the user's asset balance and displays it on the panel. If the user has insufficient balance or has not entered an amount, an error message is displayed.\n\nThe component also renders a button that allows users to approve the Kashi contract to spend their assets. If the user has not approved the contract, the button will display \"Approve Kashi\". If the user has already approved the contract, the button will display \"Confirm Deposit\". If the user is using BentoBox, the component will also render a button that allows users to approve the BentoBox contract to spend their assets.\n\nWhen the user clicks the \"Confirm Deposit\" button, the `onCook` function is called with the `pair` object and an `onDeposit` function as arguments. The `onDeposit` function adds the user's assets to the Kashi market. If the exchange rate for the asset pair is zero, the `updateExchangeRate` function is called to update the exchange rate. \n\nOverall, the `KashiDeposit` component provides a user-friendly interface for depositing assets into a Kashi market. It handles the approval process and provides error messages if necessary. The component can be used in conjunction with other Kashi components to create a full-fledged lending and borrowing platform. \n\nExample usage:\n\n```\nimport KashiDeposit from './KashiDeposit';\n\nconst MyComponent = () => {\n const pair = {\n asset: {\n address: '0x123...',\n balance: '1000000000000000000',\n tokenInfo: {\n symbol: 'USDC'\n }\n },\n currentExchangeRate: '1000000000000000000'\n };\n\n return (\n \n
\n )\n}\n\nexport default MyKashiPair\n```\n\nIn this example, the `MyKashiPair` component renders a heading and the `ManageKashiPair` component, passing in the `farm` prop. The `ManageKashiPair` component handles the UI for managing the Kashi pair, while the `MyKashiPair` component provides the overall structure and context for the Kashi pair.",
- "questions": "1. What is the purpose of the `ManageKashiPair` component?\n- The `ManageKashiPair` component is used to manage deposits and withdrawals for a Kashi pair.\n\n2. What libraries and frameworks are being used in this code?\n- The code is using several libraries and frameworks, including `@headlessui/react`, `@heroicons/react/solid`, `@lingui/macro`, `@lingui/react`, and `React`.\n\n3. What is the significance of the `useBento` state variable?\n- The `useBento` state variable is used to determine whether to deposit/withdraw from the user's wallet or from the BentoBox smart contract.",
- "checksum": "d792d21749ca3757da3d8078bb9cc20e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/ManageSwapPair.json b/.autodoc/docs/json/core/src/features/onsen/ManageSwapPair.json
deleted file mode 100644
index 0e456fc15..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/ManageSwapPair.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ManageSwapPair.tsx",
- "filePath": "core/src/features/onsen/ManageSwapPair.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/ManageSwapPair.tsx",
- "summary": "The code defines a React component called `ManageSwapPair` that renders a UI for adding or removing liquidity from a token pair in a decentralized exchange. The component imports several dependencies, including React, `useState` hook, `Switch` component from the `@headlessui/react` library, and icons from the `@heroicons/react/solid` library. It also imports `Settings` component, `PoolAddLiquidity` and `PoolRemoveLiquidity` components, and a custom hook called `useCurrency` from other files in the project.\n\nThe component takes a single prop called `farm`, which is an object containing information about the token pair. The component initializes a state variable called `toggle` using the `useState` hook, which determines whether the UI should display the \"Add Liquidity\" or \"Remove Liquidity\" view. The component then uses the `useCurrency` hook to fetch information about the two tokens in the pair and renders a UI that displays a toggle switch and a `Settings` component.\n\nThe toggle switch is implemented using the `Switch` component from the `@headlessui/react` library. When the user toggles the switch, the `toggle` state variable is updated, which triggers a re-render of the component. Depending on the value of `toggle`, the component conditionally renders either the `PoolAddLiquidity` or `PoolRemoveLiquidity` component, passing in the two tokens as props.\n\nOverall, this component provides a high-level UI for managing liquidity in a decentralized exchange. It can be used as part of a larger project that implements a decentralized exchange, allowing users to add or remove liquidity from token pairs. Here is an example of how this component can be used in a parent component:\n\n```\nimport ManageSwapPair from './ManageSwapPair'\n\nconst MyExchange = () => {\n const tokenPair = { token0: { id: 'token0' }, token1: { id: 'token1' } }\n\n return (\n Kashi Pair
\n\n
\n )\n}\n```",
- "questions": "1. What does this code do?\n- This code exports a React component called `ManageSwapPair` that renders a UI for adding or removing liquidity from a pool.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries, including `React`, `@headlessui/react`, `@heroicons/react/solid`, and `@lingui/core`.\n\n3. What is the purpose of the `useCurrency` hook?\n- The `useCurrency` hook is used to retrieve information about a currency token based on its ID, which is passed in as an argument. This information is then used to render the UI for adding or removing liquidity.",
- "checksum": "46ef2f50b8e009439d5f566342c7c0f8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/enum.json b/.autodoc/docs/json/core/src/features/onsen/enum.json
deleted file mode 100644
index 268907792..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/enum.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "enum.ts",
- "filePath": "core/src/features/onsen/enum.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/enum.ts",
- "summary": "This file contains three enums: Chef, Rewarder, and PairType. These enums are used to define a set of related constants that can be used throughout the project. \n\nThe Chef enum defines four constants: MASTERCHEF, MASTERCHEF_V2, MINICHEF, and an implicit default value of 0. These constants are likely used to represent different types of chefs in the project, such as different levels of experience or different roles within the zoo.\n\nThe Rewarder enum defines three constants: SIMPLE, COMPLEX, and ALCX, with an implicit default value of 0. These constants are likely used to represent different types of rewarders in the project, such as different reward structures or different types of tokens.\n\nThe PairType enum defines two constants: SWAP and KASHI, with an implicit default value of 0. These constants are likely used to represent different types of pairs in the project, such as different trading pairs or different types of liquidity pools.\n\nOverall, these enums provide a convenient way to define and use related constants throughout the project. For example, if a function needs to take a Chef as an argument, it can use the Chef enum to ensure that only valid Chef values are passed in. Similarly, if a function needs to return a Rewarder, it can use the Rewarder enum to ensure that only valid Rewarder values are returned. \n\nExample usage:\n\n```\nfunction cookMeal(chef: Chef, ingredients: string[]): string {\n // code to cook a meal using the given ingredients and chef\n}\n\nconst myChef = Chef.MASTERCHEF;\nconst myIngredients = ['chicken', 'rice', 'vegetables'];\nconst myMeal = cookMeal(myChef, myIngredients);\n```",
- "questions": "1. What is the purpose of these enums?\n - These enums are used to define different types of chefs, rewarders, and pair types in the zoo project. They likely have specific functionality or characteristics associated with them.\n\n2. Are there any other enums used in the zoo project?\n - It's unclear from this code snippet whether there are other enums used in the zoo project. Further investigation of the codebase would be necessary to determine this.\n\n3. How are these enums used in the zoo project?\n - Without additional context, it's difficult to determine exactly how these enums are used in the zoo project. However, it's likely that they are used to define and differentiate between different types of objects or functionality within the project.",
- "checksum": "96289ee1be424a99a2d88649cc7e2cef"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/hooks.json b/.autodoc/docs/json/core/src/features/onsen/hooks.json
deleted file mode 100644
index 62a3401ff..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/features/onsen/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/hooks.ts",
- "summary": "The `zoo` project is a blockchain-based project that involves farming and staking of tokens. The code in this file provides a set of utility functions and hooks that are used to interact with the smart contracts that power the farming and staking functionality. \n\nThe code imports several constants and functions from other modules in the `zoo` project, including `ChainId`, `CurrencyAmount`, `MASTERCHEF_ADDRESS`, `MASTERCHEF_V2_ADDRESS`, `MINICHEF_ADDRESS`, `Chef`, `useSingleCallResult`, `useSingleContractMultipleData`, `useMasterChefContract`, `useMasterChefV2Contract`, `useMiniChefContract`, `Contract`, `SUSHI`, `Zero`, `useActiveWeb3React`, `zip`, and `concat`. \n\nThe `useChefContract` function returns the contract instance for a given chef, which is used to interact with the smart contract for that chef. The `useChefContracts` function returns an array of contract instances for a given array of chefs. The `useUserInfo` function returns the amount of a given token that a user has staked in a given farm. The `usePendingSushi` function returns the amount of SUSHI tokens that a user has earned from a given farm. The `usePendingToken` function returns an array of pending tokens for a given farm and contract. The `useChefPositions` function returns an array of positions for a given chef, including the pending SUSHI and token rewards, the amount of tokens staked, and the chef type. The `usePositions` function returns an array of all positions across all chefs. The `useInfiniteScroll` hook is used to manage the number of items displayed in a list of farms, to minimize the rendering cost of the list.\n\nThese functions and hooks are used throughout the `zoo` project to interact with the smart contracts that power the farming and staking functionality. For example, `useUserInfo` and `usePendingSushi` are used to display the amount of tokens that a user has staked and earned in the UI. `usePositions` is used to display a list of all positions across all chefs. The `useInfiniteScroll` hook is used to manage the rendering cost of the farm list. Overall, this file provides a set of utility functions and hooks that are essential to the functionality of the `zoo` project.",
- "questions": "1. What is the purpose of the `useChefContract` function and how is it used?\n- The `useChefContract` function returns the contract instance for a given chef type (MasterChef, MasterChefV2, or MiniChef) and is used to interact with the corresponding smart contract.\n\n2. What is the purpose of the `usePendingSushi` function and how is it used?\n- The `usePendingSushi` function returns the pending SUSHI rewards for a given farm and is used to display the amount of SUSHI that a user can claim as rewards.\n\n3. What is the purpose of the `usePositions` function and how is it used?\n- The `usePositions` function returns an array of all the user's positions across all chef types and is used to display the user's farms and their corresponding information (such as pending rewards and staked amount).",
- "checksum": "bcd282f5e01ddd2ff9a3278ce71bb8e2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/useMasterChef.json b/.autodoc/docs/json/core/src/features/onsen/useMasterChef.json
deleted file mode 100644
index ba963b162..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/useMasterChef.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useMasterChef.ts",
- "filePath": "core/src/features/onsen/useMasterChef.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/useMasterChef.ts",
- "summary": "The `useMasterChef` function is a custom React hook that provides access to deposit, withdraw, and harvest functions for a given chef contract. The hook takes a `chef` parameter of type `Chef`, which is an enum that specifies the type of chef contract to interact with. \n\nThe hook uses several other hooks to retrieve the necessary data for interacting with the chef contract. The `useActiveWeb3React` hook retrieves the current user's Ethereum account, while the `useSushiContract` and `useChefContract` hooks retrieve the SushiSwap token contract and the chef contract, respectively. \n\nThe `deposit` function takes two parameters: `pid`, which is the pool ID of the pool to deposit into, and `amount`, which is the amount of tokens to deposit. The function first checks which type of chef contract is being used and then calls the appropriate `deposit` function on the contract with the given `pid` and `amount`. If the chef contract is not the `MASTERCHEF` contract, the function also passes the current user's account as a third parameter. The function returns the transaction hash of the deposit transaction.\n\nThe `withdraw` function is similar to the `deposit` function, but instead of depositing tokens, it withdraws tokens from the specified pool. The function takes the same two parameters as the `deposit` function: `pid` and `amount`. The function checks which type of chef contract is being used and then calls the appropriate `withdraw` function on the contract with the given `pid` and `amount`. If the chef contract is not the `MASTERCHEF` contract, the function also passes the current user's account as a third parameter. The function returns the transaction hash of the withdraw transaction.\n\nThe `harvest` function is used to claim rewards from the specified pool. The function takes a single parameter, `pid`, which is the pool ID of the pool to harvest rewards from. The function first checks which type of chef contract is being used and then calls the appropriate `harvest` function on the contract with the given `pid` and the current user's account. If the chef contract is the `MASTERCHEF_V2` contract, the function also checks if there are enough SUSHI tokens in the contract to harvest. If there are not enough tokens, the function batches two harvest functions together to ensure that the user receives all of their rewards. The function returns the transaction hash of the harvest transaction.\n\nOverall, this hook provides a convenient way for developers to interact with chef contracts in the SushiSwap ecosystem. Developers can use this hook to build interfaces that allow users to deposit, withdraw, and claim rewards from various pools. Here is an example of how this hook might be used in a larger project:\n\n```\nimport { useMasterChef, Chef } from 'zoo'\n\nfunction Pool({ pid }) {\n const { deposit, withdraw, harvest } = useMasterChef(Chef.MASTERCHEF_V2)\n\n const handleDeposit = async (amount) => {\n const tx = await deposit(pid, amount)\n console.log(`Deposit transaction hash: ${tx.hash}`)\n }\n\n const handleWithdraw = async (amount) => {\n const tx = await withdraw(pid, amount)\n console.log(`Withdraw transaction hash: ${tx.hash}`)\n }\n\n const handleHarvest = async () => {\n const tx = await harvest(pid)\n console.log(`Harvest transaction hash: ${tx.hash}`)\n }\n\n return (\n My Decentralized Exchange
\n\n \n \n \n
\n )\n}\n```\n\nIn this example, the `Pool` component uses the `useMasterChef` hook to retrieve the `deposit`, `withdraw`, and `harvest` functions for the `MASTERCHEF_V2` contract. The component then defines three event handlers that call these functions with the appropriate parameters when the user clicks on the corresponding buttons. When a transaction is successfully executed, the component logs the transaction hash to the console.",
- "questions": "1. What is the purpose of the `useMasterChef` function?\n- The `useMasterChef` function returns an object with three functions: `deposit`, `withdraw`, and `harvest`, which are used to interact with a smart contract related to a specific chef.\n\n2. What is the significance of the `Chef` enum?\n- The `Chef` enum is used to determine which chef's contract to interact with, as different chefs have different functions and parameters.\n\n3. What is the purpose of the `harvest` function and how does it work?\n- The `harvest` function is used to claim rewards from the chef's contract. Depending on the chef, it may involve different steps such as checking pending rewards, batching in a harvest, or simply calling the `harvest` function.",
- "checksum": "28105f4063b8ed8dcfdd66e2bf05584f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/onsen/usePendingReward.json b/.autodoc/docs/json/core/src/features/onsen/usePendingReward.json
deleted file mode 100644
index 74e3ed9e8..000000000
--- a/.autodoc/docs/json/core/src/features/onsen/usePendingReward.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "usePendingReward.ts",
- "filePath": "core/src/features/onsen/usePendingReward.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/features/onsen/usePendingReward.ts",
- "summary": "The `usePending` function is a React hook that calculates the pending rewards for a given farm. It imports several hooks and functions from other files in the project, including `useCallback`, `useEffect`, `useMemo`, `useState`, `useActiveWeb3React`, `useBlockNumber`, `useCloneRewarderContract`, `useComplexRewarderContract`, and `getContract`. \n\nThe function first defines an object called `REWARDERS` that maps chain IDs to rewarder contract addresses. It then defines a `usePending` function that takes a `farm` object as an argument. This `farm` object contains information about the farm, including its ID, reward token, and chef. \n\nWithin the `usePending` function, several hooks are used to get information about the current user's account, the current block number, and the rewarder contract for the given farm. The `useMemo` hook is used to memoize the `contract` object, which maps chain IDs to rewarder contracts. \n\nThe `useEffect` hook is used to fetch the pending rewards for the given farm. If the user is connected to a wallet, the rewarder contract exists, and the farm is a MasterChefV2 or MiniChef farm, the `fetchPendingReward` function is called. This function uses the `pendingTokens` function of the rewarder contract to get the pending rewards for the given farm and user account. It then formats the pending rewards as a string and sets the `balance` state variable to this value. \n\nFinally, the `usePending` function returns the `balance` state variable, which represents the pending rewards for the given farm. This hook can be used in other components to display the pending rewards for a given farm. \n\nExample usage:\n\n```\nimport usePending from './path/to/usePending'\n\nfunction Farm({ farm }) {\n const pendingRewards = usePending(farm)\n\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `usePending` function?\n- The `usePending` function is used to fetch the pending rewards for a given farm and return the formatted balance.\n\n2. What is the purpose of the `REWARDERS` object?\n- The `REWARDERS` object is used to store the rewarder contract addresses for different chain IDs.\n\n3. What is the purpose of the commented out `useRewarderContract` function?\n- It is unclear what the purpose of the `useRewarderContract` function is, as it is currently commented out and not used in the code. It appears to be related to fetching a rewarder contract for a given farm, but more context is needed to understand its intended use.",
- "checksum": "ae952016beaf2a64e89445b90e6c4801"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/trade/Header.json b/.autodoc/docs/json/core/src/features/trade/Header.json
deleted file mode 100644
index 2b391c729..000000000
--- a/.autodoc/docs/json/core/src/features/trade/Header.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Header.tsx",
- "filePath": "core/src/features/trade/Header.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/trade/Header.tsx",
- "summary": "The `ExchangeHeader` component is a React functional component that renders a header for the exchange page of the Zoo project. The header contains three buttons for swapping, creating limit orders, and adding/removing liquidity, respectively. The component also includes a gas fee estimator and a settings button.\n\nThe component takes three props: `input`, `output`, and `allowedSlippage`. `input` and `output` are optional Currency objects that represent the input and output tokens for the exchange. `allowedSlippage` is an optional Percent object that represents the maximum allowed slippage for the exchange.\n\nThe `getQuery` function is a helper function that takes `input` and `output` as arguments and returns an object with `inputCurrency` and `outputCurrency` properties. If `input` is not provided, the `inputCurrency` property defaults to `\"ETH\"`. If neither `input` nor `output` is provided, the function returns `undefined`.\n\nThe `ExchangeHeader` component uses the `useLingui` hook from the `@lingui/react` package to provide internationalization support. It also uses the `useActiveWeb3React` hook from the Zoo project to get the current chain ID.\n\nThe component renders a `div` element with two child elements: a `div` element containing the three buttons, and a `div` element containing the gas fee estimator and the settings button.\n\nThe three buttons are implemented as `NavLink` components from the Zoo project. Each `NavLink` component has an `href` prop that points to a different page of the exchange, depending on the current input and output tokens. The `getQuery` function is used to generate the query parameters for the `href` prop.\n\nThe gas fee estimator is implemented as a `Gas` component from the Zoo project. It displays the estimated gas fee for the current transaction.\n\nThe settings button is implemented as a `Settings` component from the Zoo project. It opens a modal dialog that allows the user to adjust the slippage tolerance and other settings.\n\nOverall, the `ExchangeHeader` component provides a convenient and user-friendly interface for the exchange page of the Zoo project. It allows users to easily swap tokens, create limit orders, and add/remove liquidity, while also providing important information about gas fees and settings.",
- "questions": "1. What is the purpose of the `ExchangeHeader` component?\n- The `ExchangeHeader` component is used to render the header section of the exchange page, which includes navigation links, gas settings, and other components.\n\n2. What libraries and hooks are being imported in this file?\n- The file is importing several libraries and hooks, including `@zoolabs/zdk`, `React`, `@lingui/macro`, `@lingui/react`, and `next/router`. It is also importing several components from other files in the project.\n\n3. What is the `getQuery` function used for?\n- The `getQuery` function is used to generate a query object based on the input and output currencies passed to the `ExchangeHeader` component. This query object is used to construct links for the navigation links in the header.",
- "checksum": "e442d7a62b312805e64a884f1e518beb"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/features/user/TransactionList.json b/.autodoc/docs/json/core/src/features/user/TransactionList.json
deleted file mode 100644
index 50fa14a03..000000000
--- a/.autodoc/docs/json/core/src/features/user/TransactionList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TransactionList.tsx",
- "filePath": "core/src/features/user/TransactionList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/features/user/TransactionList.tsx",
- "summary": "The code is a React component that renders a list of transactions. It takes in an array of transactions as a prop and maps over them to render each transaction as a separate div element. Each transaction div contains information about the tokens being traded, a link to view the transaction on the blockchain explorer, and a checkmark icon to indicate that the transaction was successful.\n\nThe component uses several other components and hooks from the project, including `Image` and `Dots` components, and the `useActiveWeb3React` and `useLingui` hooks. It also imports two icons from the `react-feather` library.\n\nThe `getExplorerLink` function is imported from a `functions/explorer` file, which is not included in this code snippet. This function likely generates a URL to view a transaction on a blockchain explorer based on the chain ID and transaction hash.\n\nThe component checks if there are any transactions to render. If there are, it maps over the transactions and renders each one as a div element. If there are no transactions, it renders a loading spinner.\n\nThis component can be used in a larger project that involves trading tokens on a decentralized exchange. It provides a visual representation of the user's transaction history and allows them to view the details of each transaction on the blockchain explorer. The component can be customized with different styles and icons to fit the project's design. Here is an example of how the component can be used in a parent component:\n\n```\nimport TransactionList from './TransactionList'\n\nfunction MyComponent() {\n const transactions = [\n {\n tx_hash: '0x123abc',\n token_0: {\n logo_url: 'https://example.com/token0.png',\n symbol: 'TOKEN0'\n },\n token_1: {\n logo_url: 'https://example.com/token1.png',\n symbol: 'TOKEN1'\n },\n description: 'Swapped TOKEN0 for TOKEN1'\n },\n // more transactions...\n ]\n\n return (\n {farm.name}
\nPending rewards: {pendingRewards}
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code is a React component that renders a list of transactions with their corresponding token logos and descriptions.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and components, including `react-feather`, `@lingui/macro`, `@lingui/react`, and custom functions from `../../functions/explorer` and `../../hooks/useActiveWeb3React`.\n\n3. What is the expected format of the `transactions` prop?\n- The `transactions` prop is expected to be an array of objects, where each object contains a `tx_hash` property and two nested objects with `logo_url` and `symbol` properties for each token involved in the transaction.",
- "checksum": "cca8ad406f0ec25bca80db756eb3161f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/abbreviateNumbers.json b/.autodoc/docs/json/core/src/functions/abbreviateNumbers.json
deleted file mode 100644
index cd29903cb..000000000
--- a/.autodoc/docs/json/core/src/functions/abbreviateNumbers.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "abbreviateNumbers.ts",
- "filePath": "core/src/functions/abbreviateNumbers.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/abbreviateNumbers.ts",
- "summary": "The code above defines a function called `abbreviateNumber` that takes in a number as an argument and returns an abbreviated version of that number. The purpose of this function is to make large numbers more readable by abbreviating them with a letter that represents the magnitude of the number. For example, instead of displaying 1000000, the function would return 1M.\n\nThe function works by checking the magnitude of the input number and then dividing it by the appropriate factor to get the abbreviated version. If the number is greater than or equal to 1000000000000, the function divides it by 1000000000000 and appends a 'T' to the end. If the number is greater than or equal to 1000000000, the function divides it by 1000000000 and appends a 'B' to the end. If the number is greater than or equal to 1000000, the function divides it by 1000000 and appends an 'M' to the end. If the number is greater than or equal to 1000, the function divides it by 1000 and appends a 'K' to the end. If the number is less than 1000, the function returns the original number.\n\nThis function can be useful in a variety of contexts where large numbers need to be displayed in a more readable format. For example, it could be used in a financial application to display large sums of money, or in a data visualization tool to display large quantities of data. Here is an example of how the function could be used:\n\n```\nconst num = 1234567890;\nconst abbreviatedNum = abbreviateNumber(num);\nconsole.log(abbreviatedNum); // Output: 1.2B\n```\n\nIn this example, the function takes in the number 1234567890 and returns the abbreviated version 1.2B, which represents 1.2 billion.",
- "questions": "1. What is the purpose of this function?\n This function abbreviates large numbers by converting them into a shorter format with a letter suffix indicating the magnitude (e.g. \"1.5M\" for 1,500,000).\n\n2. What is the input type for this function?\n The input type for this function is a number.\n\n3. What is the output type for this function?\n The output type for this function is either a string (if the number is abbreviated) or a number (if the number is not large enough to be abbreviated).",
- "checksum": "f9630c53afa37f03acf21eede993cff2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/analytics.json b/.autodoc/docs/json/core/src/functions/analytics.json
deleted file mode 100644
index c5e7585f2..000000000
--- a/.autodoc/docs/json/core/src/functions/analytics.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "analytics.ts",
- "filePath": "core/src/functions/analytics.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/analytics.ts",
- "summary": "This code is a set of functions that utilize the ReactGA library to log user activity on a website. The ReactGA library is a third-party analytics tool that allows developers to track user behavior and gain insights into how users interact with their website. \n\nThe `logPageView` function logs a page view by setting the page property to the current window location and then calling the `pageview` method. This function can be used to track which pages on the website are being viewed and how often they are being viewed. \n\nThe `logEvent` function logs a custom event with a specified category and action. This function can be used to track specific user interactions on the website, such as button clicks or form submissions. \n\nThe `logException` function logs an exception with a specified description and fatal flag. This function can be used to track errors or unexpected behavior on the website. \n\nOverall, these functions provide a way for developers to gain insights into how users are interacting with their website and identify areas for improvement. By using the ReactGA library, developers can easily integrate analytics tracking into their website without having to build their own tracking system from scratch. \n\nExample usage:\n\n```\nimport { logPageView, logEvent, logException } from 'zoo'\n\n// Log a page view\nlogPageView()\n\n// Log a custom event\nlogEvent('Button Click', 'Submit Form')\n\n// Log an exception\nlogException('Error: Invalid input', true)\n```",
- "questions": "1. What is ReactGA and how is it being used in this code?\n ReactGA is a library for tracking user interactions with a website using Google Analytics. It is being used to log page views, events, and exceptions.\n\n2. What is the purpose of the logPageView function?\n The logPageView function is used to log a page view with Google Analytics, setting the page path to the current window location.\n\n3. What is the purpose of the logException function?\n The logException function is used to log an exception with Google Analytics, with an optional description and flag for whether it is fatal. This can be used to track errors and issues on the website.",
- "checksum": "ae9656ff74fcd11133700a5839c98a71"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/approveAmountCalldata.json b/.autodoc/docs/json/core/src/functions/approveAmountCalldata.json
deleted file mode 100644
index 1ca9b9af6..000000000
--- a/.autodoc/docs/json/core/src/functions/approveAmountCalldata.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "approveAmountCalldata.ts",
- "filePath": "core/src/functions/approveAmountCalldata.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/approveAmountCalldata.ts",
- "summary": "The code is a module that exports two functions related to the ERC20 token standard. The first function, `toHex`, takes a `BigintIsh` argument and returns a hexadecimal string representation of the number. The second function, `approveAmountCalldata`, takes a `CurrencyAmount` object and a `spender` address as arguments and returns an object with `to`, `data`, and `value` properties. \n\nThe `to` property is set to the address of the ERC20 token contract associated with the `Currency` object in the `amount` argument. The `data` property is set to the encoded function data for the `approve` function of the ERC20 contract, with the `spender` argument and the `quotient` of the `amount` argument passed as parameters. The `value` property is set to `'0x0'`, indicating that no ether is being sent along with the transaction.\n\nThe purpose of this module is to provide a convenient way to generate the necessary data for an `approve` transaction for an ERC20 token. This is useful for allowing a third party to spend a certain amount of tokens on behalf of the token owner. The `toHex` function is used to convert the `quotient` of the `amount` argument to a hexadecimal string, which is required for the `approve` function call. The `ERC20_INTERFACE` constant is an instance of the `Interface` class from the `@ethersproject/abi` package, which is used to encode the function call data for the `approve` function.\n\nExample usage:\n\n```\nimport { CurrencyAmount, Token } from '@zoolabs/zdk'\nimport approveAmountCalldata from '@zoolabs/zdk/dist/approveAmountCalldata'\n\nconst token = new Token(1, '0x123...', 18, 'USDT', 'Tether')\nconst amount = CurrencyAmount.fromRawAmount(token, '100')\nconst spender = '0x456...'\n\nconst calldata = approveAmountCalldata(amount, spender)\nconsole.log(calldata)\n// Output: { to: '0x123...', data: '0x095ea7b3...123', value: '0x0' }\n```",
- "questions": "1. What is the purpose of the `toHex` function?\n- The `toHex` function converts a `BigintIsh` value to a hexadecimal string with a '0x' prefix.\n\n2. What is the `ERC20_INTERFACE` object used for?\n- The `ERC20_INTERFACE` object is an instance of the `Interface` class from the `@ethersproject/abi` library, which defines the ABI (Application Binary Interface) of an ERC20 token contract.\n\n3. What does the `approveAmountCalldata` function do?\n- The `approveAmountCalldata` function takes a `CurrencyAmount` object and a spender address as inputs, and returns an object with `to`, `data`, and `value` properties that represent the calldata needed to approve the spender to spend the specified amount of tokens.",
- "checksum": "2dfb4f1091cd82129a52af9ab8e823e3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/archerRouter.json b/.autodoc/docs/json/core/src/functions/archerRouter.json
deleted file mode 100644
index 29e9b1470..000000000
--- a/.autodoc/docs/json/core/src/functions/archerRouter.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "archerRouter.ts",
- "filePath": "core/src/functions/archerRouter.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/archerRouter.ts",
- "summary": "The code is a TypeScript module that exports an abstract class called `ArcherRouter` and several interfaces and types. The `ArcherRouter` class has a single static method called `swapCallParameters` that produces the on-chain method name to call and the hex encoded parameters to pass as arguments for a given trade. The method takes three arguments: `factoryAddress`, `trade`, and `options`. \n\nThe `factoryAddress` argument is a string representing the address of the factory contract that created the pair of tokens being traded. The `trade` argument is an instance of the `Trade` class from the `@zoolabs/zdk` library, which represents a trade between two tokens. The `options` argument is an object that extends the `TradeOptions` interface and adds three additional properties: `ethTip`, `ttl`, and `recipient`. \n\nThe `ethTip` property is an optional `CurrencyAmount` object that represents the amount of ETH to tip the miners who process the transaction. The `ttl` property is a number representing the time-to-live of the transaction in seconds. The `recipient` property is a string representing the address of the recipient of the transaction.\n\nThe `swapCallParameters` method first checks if the input or output currency is Ether and throws an error if both are Ether. It then validates the `ttl` property and the `ethTip` property, ensuring that the `ethTip` currency is Ether on the mainnet. It then calculates the `amountIn` and `amountOut` values for the trade, converts them to hexadecimal strings, and creates an `ArcherTrade` object with the `amountIn`, `amountOut`, `path`, `to`, and `deadline` properties. The `path` property is an array of token addresses representing the path of the trade. The `to` property is the recipient of the transaction, and the `deadline` property is the deadline for the transaction in hexadecimal format.\n\nThe method then determines the method name to call based on the `tradeType` property of the `trade` argument and whether the input or output currency is Ether. It sets the `args` and `value` properties of the `ArcherSwapParameters` object based on the method name and the `ethTip` property. Finally, it returns the `methodName`, `args`, and `value` properties as an `ArcherSwapParameters` object.\n\nThis code is part of the larger `zoo` project and is used to facilitate trades on the Archer Swap decentralized exchange. Developers can use the `ArcherRouter` class and the `swapCallParameters` method to execute trades on the Archer Swap exchange programmatically. For example, a developer could use the following code to execute a trade between two tokens:\n\n```\nimport { ArcherRouter } from 'zoo'\n\nconst factoryAddress = '0x1234567890abcdef'\nconst trade = new Trade(...)\nconst options = {\n ethTip: new Ether(...),\n ttl: 3600,\n recipient: '0x9876543210fedcba',\n allowedSlippage: 0.1,\n}\n\nconst swapParams = ArcherRouter.swapCallParameters(factoryAddress, trade, options)\n// Use swapParams to execute the trade on the Archer Swap exchange\n```",
- "questions": "1. What is the purpose of the `ArcherRouter` class?\n- The `ArcherRouter` class represents the Archer Router and has static methods for helping execute trades.\n\n2. What is the `swapCallParameters` method used for?\n- The `swapCallParameters` method is used to produce the on-chain method name to call and the hex encoded parameters to pass as arguments for a given trade.\n\n3. What is the purpose of the `validateAndParseAddress` function?\n- The `validateAndParseAddress` function is used to validate and parse an Ethereum address, and returns the checksummed address if it is valid. If the address is not valid, it throws an error.",
- "checksum": "b41fd19f8d7648b700edc8558b2381d9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/array/chunkArray.json b/.autodoc/docs/json/core/src/functions/array/chunkArray.json
deleted file mode 100644
index 7e1ba2c2f..000000000
--- a/.autodoc/docs/json/core/src/functions/array/chunkArray.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "chunkArray.ts",
- "filePath": "core/src/functions/array/chunkArray.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/array/chunkArray.ts",
- "summary": "The code provided is a utility function that is used to chunk an array into smaller arrays. The purpose of this function is to evenly distribute items among the chunks while ensuring that each chunk does not exceed a specified gas limit. \n\nThe function takes in an array of items and an optional gas limit parameter. If the gas limit parameter is not specified, the function uses a default value of 2,000,000. The function then iterates through each item in the array and calculates the gas required by each item. If the current chunk is empty or the current item would not push the chunk over the gas limit, the item is added to the current chunk and the cumulative gas is incremented. If the current item would push the chunk over the gas limit, the current chunk is pushed to the chunks array, and a new chunk is created with the current item. \n\nOnce all items have been iterated through, the function checks if there are any remaining items in the current chunk and pushes it to the chunks array if there are. The function then returns the chunks array.\n\nThis function can be used in the larger project to split up large arrays into smaller chunks that can be processed more efficiently. For example, if the project is processing a large number of transactions, this function can be used to split the transactions into smaller chunks that can be processed in parallel. \n\nExample usage:\n\n```\nconst transactions = [/* array of transactions */];\nconst chunks = chunkArray(transactions, 500_000); // split transactions into chunks of 500,000 or less\nfor (const chunk of chunks) {\n // process each chunk of transactions\n}\n```",
- "questions": "1. What is the purpose of the `chunkArray` function?\n- The `chunkArray` function takes an array of items and evenly distributes them into smaller arrays called chunks, based on a gas limit. \n\n2. What is the significance of the `gasRequired` property in this code?\n- The `gasRequired` property is used to calculate the gas required by each item in the `chunkArray` function. If an item doesn't specify a `gasRequired` value, it defaults to `DEFAULT_GAS_REQUIRED`.\n\n3. Why is the `CONSERVATIVE_BLOCK_GAS_LIMIT` value hard-coded?\n- The `CONSERVATIVE_BLOCK_GAS_LIMIT` value is hard-coded as a conservative estimate of the current block gas limit. This is likely done to ensure that the `chunkArray` function doesn't exceed the gas limit and cause errors or unexpected behavior.",
- "checksum": "639f731a61c0df3f3f62101242c4c4e6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/array/index.json b/.autodoc/docs/json/core/src/functions/array/index.json
deleted file mode 100644
index 417a719aa..000000000
--- a/.autodoc/docs/json/core/src/functions/array/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/functions/array/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/array/index.ts",
- "summary": "This code exports a function called `chunkArray` from a module located in the `zoo` project. The purpose of the `chunkArray` function is to take an array and split it into smaller arrays of a specified size. This can be useful in situations where you need to process large amounts of data in smaller, more manageable chunks.\n\nThe `chunkArray` function takes two arguments: the array to be chunked and the size of each chunk. It then returns an array of arrays, where each sub-array contains the specified number of elements from the original array.\n\nHere is an example of how the `chunkArray` function can be used:\n\n```\nimport { chunkArray } from 'zoo';\n\nconst myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nconst chunkSize = 3;\n\nconst chunkedArray = chunkArray(myArray, chunkSize);\n\nconsole.log(chunkedArray);\n// Output: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]\n```\n\nIn this example, we import the `chunkArray` function from the `zoo` project and use it to split an array of numbers into smaller arrays of size 3. The resulting `chunkedArray` variable contains an array of arrays, where each sub-array contains 3 elements from the original array (except for the last sub-array, which contains the remaining elements).\n\nOverall, this code provides a useful utility function for working with arrays in the `zoo` project. By exporting it as a module, it can be easily used in other parts of the project where array manipulation is needed.",
- "questions": "1. **What does the `chunkArray` function do?** \n The code exports the `chunkArray` function from a file located at `./chunkArray`, so a smart developer might want to investigate that file to understand what the function does.\n\n2. **What other functions or variables are exported from the `zoo` module?** \n The code only exports the `chunkArray` function, so a smart developer might want to check other files in the `zoo` module to see if there are any other exports.\n\n3. **Is the `chunkArray` function used anywhere else in the `zoo` module?** \n The code only exports the `chunkArray` function, so a smart developer might want to search the `zoo` module for any other files that import and use the `chunkArray` function.",
- "checksum": "4d7f749db220a8192ddc38973fb35836"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/assets.json b/.autodoc/docs/json/core/src/functions/assets.json
deleted file mode 100644
index 5fc8577e0..000000000
--- a/.autodoc/docs/json/core/src/functions/assets.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "assets.ts",
- "filePath": "core/src/functions/assets.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/assets.ts",
- "summary": "The code above defines several constants and functions related to NFTs (non-fungible tokens) in the context of the zoo project. The `import` statements at the top of the file bring in two external dependencies: `ChainId` from the `@zoolabs/zdk` library, and the `_` (underscore) utility library.\n\nThe constants defined in this file are `TYPE_VALIDATOR`, `TYPE_ATM`, `TYPE_WALLET`, and `TYPE_CASH`, which are strings representing different types of NFTs that can be owned in the zoo project.\n\nThe `newNft` function takes three arguments: `tokenId` (a unique identifier for the NFT), `type` (one of the constants defined above), and `props` (an optional object containing additional properties to be added to the NFT object). This function returns an object representing a new NFT, with the `tokenId`, `type`, `image`, and `video` properties set based on the input arguments. The `image` and `video` properties are hardcoded to point to files in the `/nfts` directory with filenames based on the `type` argument.\n\nThe remaining functions (`getOwnedNfts`, `getValidatorNfts`, `getAtmNfts`, `getWalletNfts`, and `getCashNfts`) all return arrays of NFT objects. `getOwnedNfts` returns an array of three NFTs of different types, while the other functions each return an array of six NFTs of a specific type. These functions use the `newNft` function to create the NFT objects, with the `tokenId` values incremented by a fixed amount for each NFT in the array.\n\nOverall, this code provides a way to create and retrieve NFT objects with various properties and types, which can be used in other parts of the zoo project. For example, these functions could be used to populate a user's NFT collection or to display NFTs in a marketplace. Here is an example usage of the `getOwnedNfts` function:\n\n```\nconst ownedNfts = getOwnedNfts()\nconsole.log(ownedNfts)\n// Output:\n// [\n// { tokenId: 1, type: 'Validator', image: '/nfts/validator.gif', video: '/nfts/validator.mov' },\n// { tokenId: 2, type: 'ATM', image: '/nfts/atm.gif', video: '/nfts/atm.mov' },\n// { tokenId: 3, type: 'Wallet', image: '/nfts/wallet.gif', video: '/nfts/wallet.mov' }\n// ]\n```",
- "questions": "1. What is the purpose of the `ChainId` import from `@zoolabs/zdk`?\n - It is not clear from this code snippet what the `ChainId` import is used for or how it relates to the rest of the code. Further investigation or context is needed to understand its purpose.\n\n2. What is the expected format of the `props` parameter in the `newNft` function?\n - The `newNft` function takes in a `props` parameter, but it is not clear what properties are expected or what format they should be in. Additional documentation or comments within the code may be helpful in clarifying this.\n\n3. How are the generated NFTs intended to be used within the `zoo` project?\n - While the code generates various types of NFTs, it is not clear from this snippet how they are intended to be used within the larger `zoo` project. Further context or documentation is needed to understand their purpose and how they fit into the project as a whole.",
- "checksum": "918a51f0b0094fb9930a97ea49677322"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/bentobox.json b/.autodoc/docs/json/core/src/functions/bentobox.json
deleted file mode 100644
index 07c6b36c1..000000000
--- a/.autodoc/docs/json/core/src/functions/bentobox.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "bentobox.ts",
- "filePath": "core/src/functions/bentobox.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/bentobox.ts",
- "summary": "This code provides two functions, `toAmount` and `toShare`, that are used to convert between token amounts and shares in the context of the larger project. The project likely involves some sort of decentralized exchange or trading platform that uses a custom token standard called BentoBox. \n\nThe `toAmount` function takes in a `token` object and a `shares` value, both of which are of type `BigNumber`. The function then returns the equivalent token amount based on the BentoBox token standard. This is done by multiplying the `shares` value by the `bentoAmount` property of the `token` object and then dividing by the `bentoShare` property of the `token` object. The resulting value is also of type `BigNumber`.\n\nHere is an example usage of the `toAmount` function:\n\n```\nimport { BigNumber } from '@ethersproject/bignumber'\nimport { toAmount } from 'zoo'\n\nconst token = {\n bentoAmount: BigNumber.from(1000000000000000000), // 1 token = 10^18 wei\n bentoShare: BigNumber.from(1000000000000000000) // 1 share = 10^18 wei\n}\n\nconst shares = BigNumber.from(500000000000000000) // 0.5 shares\n\nconst amount = toAmount(token, shares) // returns BigNumber(500000000000000000)\n```\n\nThe `toShare` function is similar to `toAmount`, but instead takes in a `token` object and an `amount` value, both of which are of type `BigNumber`. The function then returns the equivalent share value based on the BentoBox token standard. This is done by multiplying the `amount` value by the `bentoShare` property of the `token` object and then dividing by the `bentoAmount` property of the `token` object. The resulting value is also of type `BigNumber`.\n\nHere is an example usage of the `toShare` function:\n\n```\nimport { BigNumber } from '@ethersproject/bignumber'\nimport { toShare } from 'zoo'\n\nconst token = {\n bentoAmount: BigNumber.from(1000000000000000000), // 1 token = 10^18 wei\n bentoShare: BigNumber.from(1000000000000000000) // 1 share = 10^18 wei\n}\n\nconst amount = BigNumber.from(500000000000000000) // 0.5 tokens\n\nconst shares = toShare(token, amount) // returns BigNumber(500000000000000000)\n```\n\nOverall, these functions provide a convenient way to convert between token amounts and shares in the context of the BentoBox token standard used in the larger project.",
- "questions": "1. What is the purpose of the `BigNumber` import from `@ethersproject/bignumber`?\n- The `BigNumber` import is used to perform arithmetic operations on large numbers with precision.\n\n2. What do the `toAmount` and `toShare` functions do?\n- The `toAmount` function takes in a `token` object and a `shares` value, and returns the equivalent amount of the token based on the token's `bentoAmount` and `bentoShare` values. The `toShare` function takes in a `token` object and an `amount` value, and returns the equivalent number of shares based on the token's `bentoAmount` and `bentoShare` values.\n\n3. What are the expected data types for the `token`, `shares`, and `amount` parameters?\n- The `token` parameter is expected to be an object with `bentoAmount` and `bentoShare` properties. The `shares` and `amount` parameters are expected to be instances of the `BigNumber` class.",
- "checksum": "7b6e01c2d9a8e7d9800befa876968948"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/block.json b/.autodoc/docs/json/core/src/functions/block.json
deleted file mode 100644
index 380d0c5ef..000000000
--- a/.autodoc/docs/json/core/src/functions/block.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "block.ts",
- "filePath": "core/src/functions/block.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/block.ts",
- "summary": "This file is a module that exports an empty object. The purpose of this file is to serve as a placeholder for future code that may be added to the `zoo` project. By exporting an empty object, this file allows other modules in the project to import it without causing any errors or issues. \n\nFor example, if another module in the `zoo` project needs to import this file, it can do so with the following code:\n\n```\nimport {} from './zoo';\n```\n\nThis code simply imports the empty object from the `zoo` module, which can then be used as needed in the importing module. \n\nWhile this file may seem insignificant on its own, it plays an important role in the larger `zoo` project. By providing a consistent way for modules to import and use each other, the project can be more easily maintained and updated over time. Additionally, by using modules to organize the code, the project can be more easily scaled and extended as needed. \n\nOverall, while this file may not contain any actual code, it serves an important purpose in the larger `zoo` project by providing a consistent way for modules to interact with each other.",
- "questions": "1. **What is the purpose of this file?**\\\nA smart developer might wonder why this file only contains an export statement and no other code. The purpose of this file could be to serve as an entry point for the entire `zoo` module, exporting all the necessary functions and variables from other files within the module.\n\n2. **What is being exported from this file?**\\\nThe export statement in this file is empty, which could lead a developer to question what exactly is being exported. It's possible that this file is simply exporting everything from other files within the `zoo` module, or it could be exporting a specific function or variable that is defined elsewhere.\n\n3. **Is this file necessary for the `zoo` module to function?**\\\nSince this file doesn't contain any actual code, a developer might wonder if it's necessary for the `zoo` module to include this file at all. It's possible that this file is simply serving as a placeholder or convention for organizing the module's code, but it's also possible that it's required for the module to function properly.",
- "checksum": "81996540b59ab96897e89f90d1304d62"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/bridgeFiltering.json b/.autodoc/docs/json/core/src/functions/bridgeFiltering.json
deleted file mode 100644
index 8fcd3d1a5..000000000
--- a/.autodoc/docs/json/core/src/functions/bridgeFiltering.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "bridgeFiltering.ts",
- "filePath": "core/src/functions/bridgeFiltering.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/bridgeFiltering.ts",
- "summary": "The code in this file provides utility functions for filtering and sorting tokens in a larger project called zoo. The file imports the Token and TokenInfo types from other modules, as well as a validation function and a hook from the React library. \n\nThe `createTokenFilterFunction` function takes a search query as input and returns a filter function that can be applied to a list of tokens. If the search query is an Ethereum address, the filter function checks if the token's address matches the query. Otherwise, it splits the search query into parts and checks if each part is a substring of the token's name or symbol. The function returns true if the token matches the search query and false otherwise.\n\nThe `filterTokens` function takes a list of tokens and a search query as input and returns a filtered list of tokens that match the search query. It uses the `createTokenFilterFunction` function to create a filter function and applies it to the list of tokens using the `filter` method.\n\nThe `useSortedTokensByQuery` hook takes a list of tokens and a search query as input and returns a sorted list of tokens that match the search query. It uses the `useMemo` hook to memoize the sorted list of tokens and avoid unnecessary re-renders. The function first checks if the list of tokens is empty and returns an empty list if it is. Otherwise, it splits the search query into parts and checks if there is more than one part. If there is, it returns the original list of tokens. Otherwise, it sorts the list of tokens by exact matches on the symbol, substrings on the symbol, and the rest of the tokens. The function returns the sorted list of tokens.\n\nOverall, this file provides useful utility functions for filtering and sorting tokens in the larger zoo project. Here is an example of how these functions can be used:\n\n```\nimport { filterTokens, useSortedTokensByQuery } from 'zoo/tokenUtils'\n\nconst tokens = [\n { name: 'Ethereum', symbol: 'ETH', address: '0x123' },\n { name: 'Dai Stablecoin', symbol: 'DAI', address: '0x456' },\n { name: 'Chainlink', symbol: 'LINK', address: '0x789' },\n]\n\nconst filteredTokens = filterTokens(tokens, 'eth')\n// [{ name: 'Ethereum', symbol: 'ETH', address: '0x123' }]\n\nconst sortedTokens = useSortedTokensByQuery(tokens, 'link')\n// [{ name: 'Chainlink', symbol: 'LINK', address: '0x789' }, { name: 'Dai Stablecoin', symbol: 'DAI', address: '0x456' }, { name: 'Ethereum', symbol: 'ETH', address: '0x123' }]\n```",
- "questions": "1. What is the purpose of the `createTokenFilterFunction` function?\n- The `createTokenFilterFunction` function creates a filter function that can be used to filter a list of tokens based on a search query.\n\n2. What is the purpose of the `useSortedTokensByQuery` function?\n- The `useSortedTokensByQuery` function sorts a list of tokens based on a search query, with exact matches first, followed by tokens with a symbol that starts with the search query, and then the rest of the tokens.\n\n3. What is the purpose of the `alwaysTrue` function?\n- The `alwaysTrue` function is a helper function that always returns `true`. It is used as a fallback filter function in case the search query is empty.",
- "checksum": "c2730de4494429d5fd132f42cbb83cec"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/cloudinary.json b/.autodoc/docs/json/core/src/functions/cloudinary.json
deleted file mode 100644
index da470b8b4..000000000
--- a/.autodoc/docs/json/core/src/functions/cloudinary.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "cloudinary.ts",
- "filePath": "core/src/functions/cloudinary.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/cloudinary.ts",
- "summary": "The code above defines two functions: `normalize` and `cloudinaryLoader`. The `normalize` function takes a string `src` as input and returns the string with the first character removed if it is a forward slash. If the first character is not a forward slash, the function returns the original string. This function is used to ensure that the `src` parameter passed to the `cloudinaryLoader` function is properly formatted.\n\nThe `cloudinaryLoader` function takes an object with three properties as input: `src`, `width`, and `style`. The function returns a string that represents a URL to an image hosted on the Cloudinary platform. The URL includes the `src` parameter passed to the function, which is first normalized using the `normalize` function. The `width` parameter is used to specify the desired width of the image in pixels. The `style` parameter is not used in the function and is therefore ignored.\n\nThis function is likely used in a larger project to dynamically load images from the Cloudinary platform. The `cloudinaryLoader` function can be called with different values for the `src` and `width` parameters to load images of different sizes and from different locations. For example, the following code could be used to load an image with a width of 500 pixels from a Cloudinary URL:\n\n```\ncloudinaryLoader({ src: '/images/my-image.jpg', width: 500 });\n```\n\nOverall, the `cloudinaryLoader` function provides a convenient way to load images from the Cloudinary platform with dynamic sizing. The `normalize` function is used internally to ensure that the `src` parameter is properly formatted before being used in the URL.",
- "questions": "1. What is the purpose of the `normalize` function?\n - The `normalize` function removes the first character of the `src` string if it is a forward slash.\n2. What does the `cloudinaryLoader` function do?\n - The `cloudinaryLoader` function returns a URL that fetches an image from the Cloudinary service with the specified `width` and `src`, after normalizing the `src` string using the `normalize` function.\n3. Are there any required parameters for the `cloudinaryLoader` function?\n - Yes, the `src` parameter is required for the `cloudinaryLoader` function to work properly. The `width` and `style` parameters are optional.",
- "checksum": "40cc46765cab1d788f206691191cf853"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/contract.json b/.autodoc/docs/json/core/src/functions/contract.json
deleted file mode 100644
index c28ed59f2..000000000
--- a/.autodoc/docs/json/core/src/functions/contract.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "contract.ts",
- "filePath": "core/src/functions/contract.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/contract.ts",
- "summary": "This file contains several utility functions that are used throughout the zoo project. \n\nThe `getSigner` function takes a `Web3Provider` instance and an Ethereum account address as arguments and returns a `JsonRpcSigner` instance that is connected to the specified account. This function is used to sign transactions on behalf of the specified account.\n\nThe `getProviderOrSigner` function takes a `Web3Provider` instance and an optional Ethereum account address as arguments and returns either the `Web3Provider` instance or a `JsonRpcSigner` instance that is connected to the specified account. If an account address is provided, the function returns a `JsonRpcSigner` instance that can be used to sign transactions. If no account address is provided, the function returns the `Web3Provider` instance, which can be used to read data from the blockchain.\n\nThe `getContract` function takes an Ethereum contract address, an ABI (Application Binary Interface) definition, a `Web3Provider` instance, and an optional Ethereum account address as arguments and returns a `Contract` instance that is connected to the specified contract address. This function is used to interact with smart contracts on the blockchain.\n\nThe `getRouterAddress` function takes an optional `ChainId` enum value as an argument and returns the address of the Uniswap router contract for the specified chain. If no chain ID is provided, the function throws an error.\n\nThe `getRouterContract` function takes a `ChainId` enum value, a `Web3Provider` instance, and an optional Ethereum account address as arguments and returns a `Contract` instance that is connected to the Uniswap router contract for the specified chain. This function is used to interact with the Uniswap router contract on the blockchain.\n\nThe `getArcherRouterContract` function takes a `ChainId` enum value, a `Web3Provider` instance, and an optional Ethereum account address as arguments and returns a `Contract` instance that is connected to the Archer Swap router contract for the specified chain. This function is used to interact with the Archer Swap router contract on the blockchain.\n\nThe `switchChain` function takes a `ChainId` enum value, a `Web3Provider` instance, and an Ethereum account address as arguments and switches the user's MetaMask wallet to the specified chain. This function is used to allow users to switch between different Ethereum networks in the zoo application.\n\nOverall, these utility functions provide a convenient way to interact with the Ethereum blockchain and smart contracts in the zoo project. They are used throughout the project to sign transactions, read data from the blockchain, and interact with smart contracts.",
- "questions": "1. What is the purpose of this code file?\n- The purpose of this code file is to provide functions for interacting with smart contracts on different chains.\n\n2. What are the parameters required for the `switchChain` function?\n- The `switchChain` function requires `chainId`, `library`, and `account` parameters.\n\n3. What is the difference between `getRouterContract` and `getArcherRouterContract` functions?\n- `getRouterContract` function returns a contract instance for Uniswap V2 router on a specified chain, while `getArcherRouterContract` function returns a contract instance for Archer Swap router on a specified chain.",
- "checksum": "674491b0661d5254e3468569c2fcc649"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/convert/apyApr.json b/.autodoc/docs/json/core/src/functions/convert/apyApr.json
deleted file mode 100644
index db6eb2113..000000000
--- a/.autodoc/docs/json/core/src/functions/convert/apyApr.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "apyApr.ts",
- "filePath": "core/src/functions/convert/apyApr.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/convert/apyApr.ts",
- "summary": "This code provides two functions for converting between Annual Percentage Yield (APY) and Annual Percentage Rate (APR). APY is the rate of return on an investment over a year, taking into account compounding interest, while APR is the simple interest rate over a year. The functions take in the APY or APR as a percentage and the frequency of compounding (in times per year), and return the corresponding APR or APY as a percentage.\n\nThe `apyToApr` function uses the formula `(1 + apy / 100) ** (1 / frequency) - 1` to calculate the periodic interest rate, then multiplies it by the frequency to get the APR. The `aprToApy` function uses the formula `(1 + apr / 100 / frequency) ** frequency - 1` to calculate the periodic interest rate, then multiplies it by 100 to get the APY.\n\nThese functions could be useful in financial applications where APY and APR are important metrics, such as calculating interest on loans or investments. For example, if a user inputs an APY for a savings account, the `apyToApr` function could be used to calculate the equivalent APR for comparison to other interest rates. Similarly, if a user inputs an APR for a loan, the `aprToApy` function could be used to calculate the equivalent APY to determine the total cost of the loan over time.\n\nExample usage:\n\n```\nimport { apyToApr, aprToApy } from 'zoo';\n\nconst apy = 6;\nconst frequency = 12; // monthly compounding\nconst apr = apyToApr(apy, frequency); // 5.82\n\nconst apr2 = 5.82;\nconst frequency2 = 365; // daily compounding\nconst apy2 = aprToApy(apr2, frequency2); // 6.01\n```",
- "questions": "1. What is the purpose of this code?\n- This code provides two functions, `apyToApr` and `aprToApy`, that convert between annual percentage yield (APY) and annual percentage rate (APR) based on a given compounding frequency.\n\n2. What is the source of the formulas used in this code?\n- The formulas used in this code are sourced from http://www.linked8.com/blog/158-apy-to-apr-and-apr-to-apy-calculation-methodologies.\n\n3. What is the significance of the `BLOCKS_IN_A_YEAR` constant?\n- The `BLOCKS_IN_A_YEAR` constant is used as the default value for the `frequency` parameter in both functions. It represents the number of blocks in a year based on a block time of 14 seconds, which is used in the Ethereum blockchain.",
- "checksum": "ff12e6d15eed92e114acfe740ec8a607"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/convert/basisPointsToPercent.json b/.autodoc/docs/json/core/src/functions/convert/basisPointsToPercent.json
deleted file mode 100644
index da3cdcbf8..000000000
--- a/.autodoc/docs/json/core/src/functions/convert/basisPointsToPercent.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "basisPointsToPercent.ts",
- "filePath": "core/src/functions/convert/basisPointsToPercent.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/convert/basisPointsToPercent.ts",
- "summary": "The code above is a function that converts a basis points value to a Percent object from the '@zoolabs/zdk' library. The purpose of this function is to provide a convenient way to convert a basis points value to a Percent object that can be used in other parts of the project. \n\nThe function takes in a single argument, a number representing the basis points value to be converted. The function then creates a new Percent object using the JSBI.BigInt() method from the '@zoolabs/zdk' library. The first argument passed to the JSBI.BigInt() method is the basis points value, while the second argument is the value 10000, which represents the total number of basis points in a whole number. \n\nFor example, if the function is called with the argument 500, it will return a Percent object representing 5%. This is because 500 basis points is equal to 5% of the total value. \n\nHere is an example of how this function could be used in the larger project:\n\n```\nimport { basisPointsToPercent } from 'zoo'\n\nconst basisPointsValue = 250\nconst percentValue = basisPointsToPercent(basisPointsValue)\n\nconsole.log(percentValue.toString()) // \"2.5%\"\n```\n\nIn this example, the basisPointsToPercent() function is imported from the 'zoo' module. The function is then called with a basis points value of 250, which is equal to 2.5% of the total value. The resulting Percent object is stored in the variable percentValue, which can then be used in other parts of the project. Finally, the toString() method is called on the Percent object to convert it to a string representation of the percentage value. \n\nOverall, this function provides a simple and convenient way to convert basis points values to Percent objects in the '@zoolabs/zdk' library, which can be used in other parts of the project.",
- "questions": "1. What is the purpose of the `@zoolabs/zdk` library and how is it being used in this code?\n- The `@zoolabs/zdk` library is being imported to use the `JSBI` and `Percent` classes. Its purpose is not clear from this code alone and would require further investigation.\n\n2. What is the expected input and output of the `basisPointsToPercent` function?\n- The function takes in a number representing basis points and returns a new `Percent` object using the `JSBI` class to convert the basis points to a percentage.\n\n3. Are there any potential errors or edge cases that need to be considered when using this function?\n- It is not clear from this code if any error handling or input validation is being performed, so a smart developer may want to investigate and consider potential edge cases such as negative numbers or non-numeric inputs.",
- "checksum": "3266a2bcb20679cf3b454b26ee5c075f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/convert/contenthashToUri.json b/.autodoc/docs/json/core/src/functions/convert/contenthashToUri.json
deleted file mode 100644
index 1744ab120..000000000
--- a/.autodoc/docs/json/core/src/functions/convert/contenthashToUri.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "contenthashToUri.ts",
- "filePath": "core/src/functions/convert/contenthashToUri.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/convert/contenthashToUri.ts",
- "summary": "The code in this file provides functions for converting content hashes to URI representations for supported codecs. It imports functions from the `multihashes` and `multicodec` libraries to decode and get the codec of the content hash. It also imports the `CID` class from the `cids` library to create a CID object from the decoded content hash.\n\nThe `hexToUint8Array` function takes a hexadecimal string and returns a Uint8Array. It removes the '0x' prefix if present, checks that the length of the string is a multiple of 2, creates a new Uint8Array with half the length of the string, and populates it with the parsed hexadecimal values.\n\nThe `contenthashToUri` function takes a content hash string and returns a URI string. It first converts the content hash to a Uint8Array using the `hexToUint8Array` function. It then gets the codec of the content hash using the `getCodec` function from `multicodec`. If the codec is 'ipfs-ns', it removes the prefix from the content hash, creates a CID object from the data, and returns an IPFS URI string with the base58-encoded multihash. If the codec is 'ipns-ns', it removes the prefix from the content hash, creates a CID object from the data, decodes the multihash using `decode` from `multihashes`, and returns an IPNS URI string with the decoded digest if the multihash name is 'identity', or with the base58-encoded multihash otherwise. If the codec is not recognized, it throws an error.\n\nThis code can be used in the larger project to convert content hashes to URI representations for supported codecs. For example, it can be used to generate IPFS or IPNS URIs for content stored on the network. Here is an example usage:\n\n```\nconst contenthash = '0x1220deadbeef'\nconst uri = contenthashToUri(contenthash)\nconsole.log(uri) // 'ipfs://Qm...'\n```",
- "questions": "1. What is the purpose of the `multihashes` and `multicodec` libraries being imported?\n- The `multihashes` library is used to decode the content hash passed to the `contenthashToUri` function, while the `multicodec` library is used to determine the codec of the content hash.\n\n2. What is the expected format of the `contenthash` parameter passed to the `contenthashToUri` function?\n- The `contenthash` parameter is expected to be a hexadecimal string representing a content hash.\n\n3. What is the purpose of the `UTF_8_DECODER` constant?\n- The `UTF_8_DECODER` constant is an instance of the `TextDecoder` class and is used to decode the digest of an IPNS multihash into a UTF-8 string.",
- "checksum": "4f9c572d872887a63278a992d35e7c2e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/convert/index.json b/.autodoc/docs/json/core/src/functions/convert/index.json
deleted file mode 100644
index a6a18bd8f..000000000
--- a/.autodoc/docs/json/core/src/functions/convert/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/functions/convert/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/convert/index.ts",
- "summary": "This code exports three functions from three different files: `basisPointsToPercent`, `contenthashToUri`, and `uriToHttp`. These functions are likely used in the larger project to convert data between different formats or to manipulate data in some way. \n\nThe `basisPointsToPercent` function is likely used to convert financial data from basis points to a percentage format. This could be useful in financial calculations or when displaying financial data to users. Here is an example of how this function might be used:\n\n```\nimport { basisPointsToPercent } from 'zoo';\n\nconst basisPoints = 500;\nconst percent = basisPointsToPercent(basisPoints);\nconsole.log(percent); // Output: 5%\n```\n\nThe `contenthashToUri` function is likely used to convert a content hash to a URI format. This could be useful when working with content-addressable storage systems or when generating unique identifiers for content. Here is an example of how this function might be used:\n\n```\nimport { contenthashToUri } from 'zoo';\n\nconst contentHash = 'QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ';\nconst uri = contenthashToUri(contentHash);\nconsole.log(uri); // Output: /ipfs/QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ\n```\n\nThe `uriToHttp` function is likely used to convert a URI to an HTTP URL format. This could be useful when working with web APIs or when generating links to web resources. Here is an example of how this function might be used:\n\n```\nimport { uriToHttp } from 'zoo';\n\nconst uri = '/ipfs/QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ';\nconst httpUrl = uriToHttp(uri);\nconsole.log(httpUrl); // Output: https://ipfs.io/ipfs/QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ\n```\n\nOverall, this code exports three useful functions that can be used in a variety of ways throughout the larger project.",
- "questions": "1. **What is the purpose of this code file?** \nA smart developer might wonder what the overall goal of this file is and how it fits into the larger project. Based on the code, it appears to be exporting three functions from separate files.\n\n2. **What do the exported functions do?** \nA developer might want to know more about the specific functionality of the exported functions, such as what arguments they take and what they return. Without additional context or documentation, it's unclear what these functions do.\n\n3. **Are there any dependencies or requirements for these functions to work?** \nA developer might want to know if there are any external dependencies or requirements for these functions to work properly. For example, do they rely on other functions or modules within the zoo project, or do they require certain versions of external libraries?",
- "checksum": "e7a126c34531e2271cb06fba2099bf61"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/convert/uriToHttp.json b/.autodoc/docs/json/core/src/functions/convert/uriToHttp.json
deleted file mode 100644
index 3f92abebe..000000000
--- a/.autodoc/docs/json/core/src/functions/convert/uriToHttp.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "uriToHttp.ts",
- "filePath": "core/src/functions/convert/uriToHttp.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/convert/uriToHttp.ts",
- "summary": "The `uriToHttp` function takes a URI as input and returns an array of fetch-able http(s) URLs for the same content. The function supports four protocols: http, https, ipfs, and ipns. \n\nFor http and https protocols, the function simply returns the input URI as a single-element array. For ipfs and ipns protocols, the function returns two URLs: one for the cloudflare-ipfs.com gateway and one for the ipfs.io gateway. \n\nThe function first extracts the protocol from the input URI using the `split` method and converts it to lowercase. It then uses a `switch` statement to handle each protocol case. \n\nFor http protocol, the function constructs two URLs: one with https protocol and the same path as the input URI (with the first four characters removed), and one with http protocol and the same path as the input URI. These URLs are returned as a two-element array. \n\nFor ipfs and ipns protocols, the function extracts the hash or name from the URI using a regular expression and constructs two URLs for each protocol using the extracted hash or name. These URLs are returned as a two-element array. \n\nThis function can be used in the larger project to convert URIs to fetch-able http(s) URLs for content stored on ipfs or ipns. For example, if the project needs to fetch content from ipfs, it can use this function to convert the ipfs URI to http(s) URLs and then use these URLs to fetch the content. \n\nExample usage:\n\n```\nconst uri = 'ipfs:QmXyZabc123'\nconst httpUrls = uriToHttp(uri)\nconsole.log(httpUrls) // ['https://cloudflare-ipfs.com/ipfs/QmXyZabc123/', 'https://ipfs.io/ipfs/QmXyZabc123/']\n```",
- "questions": "1. What is the purpose of this function?\n \n This function takes a URI and returns an array of fetch-able http(s) URLs for the same content.\n\n2. What protocols does this function support?\n \n This function supports ipfs, ipns, http, and https protocols.\n\n3. What is the purpose of the regular expressions used in this function?\n \n The regular expressions are used to extract the hash or name from the ipfs or ipns URI, respectively.",
- "checksum": "61494456080fa3e935ae97548456f62d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/currency/currencyId.json b/.autodoc/docs/json/core/src/functions/currency/currencyId.json
deleted file mode 100644
index b45a11163..000000000
--- a/.autodoc/docs/json/core/src/functions/currency/currencyId.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "currencyId.ts",
- "filePath": "core/src/functions/currency/currencyId.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/currency/currencyId.ts",
- "summary": "The code in this file defines a function called `currencyId` that takes a `Currency` object as an argument and returns a string representing the currency's ID. The `Currency` object is imported from the `@zoolabs/zdk` library, which is presumably part of the larger zoo project.\n\nThe `currencyId` function first checks if the `Currency` object's `chainId` property is equal to `ChainId.CELO`. If it is, the function returns the `address` property of the `wrapped` property of the `Currency` object. This suggests that the `Currency` object has a `wrapped` property that contains information about the wrapped version of the currency on the CELO blockchain.\n\nIf the `chainId` property is not equal to `ChainId.CELO`, the function checks if the `Currency` object's `isNative` property is true. If it is, the function returns the string `'ETH'`. This suggests that the `Currency` object represents the native currency of the Ethereum blockchain.\n\nIf the `isNative` property is false, the function checks if the `Currency` object's `isToken` property is true. If it is, the function returns the `address` property of the `Currency` object. This suggests that the `Currency` object represents a token on some blockchain.\n\nIf neither of the previous conditions are true, the function throws an error with the message `'invalid currency'`. This suggests that the `Currency` object is expected to have either a `wrapped` property or an `address` property, and that the function is designed to handle specific types of currencies.\n\nIt's possible that this function is used in other parts of the zoo project to convert `Currency` objects into IDs that can be used in other contexts, such as in smart contracts or API requests. Here's an example of how this function might be used:\n\n```\nimport { Currency } from '@zoolabs/zdk'\nimport { currencyId } from 'zoo'\n\nconst currency = new Currency('CELO', '0x123abc', 1)\nconst currencyId = currencyId(currency) // returns '0x123abc'\n```",
- "questions": "1. What is the purpose of this code?\n This code defines a function called `currencyId` that takes a `Currency` object as input and returns a string representing the currency's ID.\n\n2. What is the `@zoolabs/zdk` package used for?\n The `@zoolabs/zdk` package is used to import the `ChainId` and `Currency` classes that are used in this code.\n\n3. Why is there commented-out code at the bottom of the file?\n The commented-out code defines a different version of the `currencyId` function that takes an additional `chainId` parameter and uses different logic to determine the currency ID. It is possible that this code was an earlier version of the function that was replaced by the current implementation.",
- "checksum": "8171a583e7909049a242903ba64da1c7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/currency/getCurrency.json b/.autodoc/docs/json/core/src/functions/currency/getCurrency.json
deleted file mode 100644
index 3cf6b3acd..000000000
--- a/.autodoc/docs/json/core/src/functions/currency/getCurrency.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "getCurrency.ts",
- "filePath": "core/src/functions/currency/getCurrency.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/currency/getCurrency.ts",
- "summary": "This code defines two objects, `USD_CURRENCY` and `ETH_CURRENCY`, which contain information about the addresses and decimal places of various currencies on different blockchain networks. The `Currency` type is defined as an object with an `address` property (a string representing the currency's contract address) and a `decimals` property (an integer representing the number of decimal places the currency uses). \n\nThe `USD_CURRENCY` object contains information for several different networks, including Ethereum mainnet, Ropsten, Kovan, Rinkeby, Göerli, Binance Smart Chain, Binance Smart Chain testnet, HECO, HECO testnet, Polygon, Polygon testnet, xDai, and Arbitrum. The `ETH_CURRENCY` object only contains information for Ethereum mainnet. \n\nThe `getCurrency` function takes a `ChainId` argument (an enum defined in the `@zoolabs/zdk` package) and returns the corresponding `Currency` object from `USD_CURRENCY` if it exists, or a default `Currency` object with an `address` of `AddressZero` (a constant from the `@ethersproject/constants` package) and `decimals` of 18 if it does not. \n\nThis code is likely used in the larger project to provide a centralized place to store information about the addresses and decimal places of various currencies on different networks. Other parts of the project can import these objects and use them to perform currency-related calculations or display currency information to users. For example, a user interface component might use the `getCurrency` function to display the appropriate currency symbol and decimal formatting for a given network. \n\nExample usage:\n```\nimport { USD_CURRENCY, getCurrency, ChainId } from 'zoo'\n\nconsole.log(USD_CURRENCY[ChainId.MAINNET]) // { address: '0xdAC17F958D2ee523a2206206994597C13D831ec7', decimals: 6 }\n\nconsole.log(getCurrency(ChainId.BSC_TESTNET)) // { address: '0x337610d27c682E347C9cD60BD4b3b107C9d34dDd', decimals: 18 }\n```",
- "questions": "1. What is the purpose of the `Currency` type and how is it used in this code?\n- The `Currency` type defines an object with an `address` property (a string) and a `decimals` property (a number). It is used to represent different currencies on different blockchain networks.\n\n2. What is the significance of the `USD_CURRENCY` and `ETH_CURRENCY` constants?\n- `USD_CURRENCY` is an object that maps `ChainId` values to `Currency` objects representing the USD stablecoin on different blockchain networks. `ETH_CURRENCY` is a similar object representing Ether on different networks.\n\n3. What is the purpose of the `getCurrency` function and how does it work?\n- The `getCurrency` function takes a `ChainId` argument and returns the corresponding `Currency` object from `USD_CURRENCY` if it exists, or a default `Currency` object with an `address` of `AddressZero` and `decimals` of 18 if it does not. This function is used to retrieve the appropriate pricing currency for a given blockchain network.",
- "checksum": "ea298efe059450485f7250256d109637"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/currency/index.json b/.autodoc/docs/json/core/src/functions/currency/index.json
deleted file mode 100644
index 1c7db1db0..000000000
--- a/.autodoc/docs/json/core/src/functions/currency/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/functions/currency/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/currency/index.ts",
- "summary": "This file is responsible for exporting various modules related to currency and spending limits in the larger project. The `export *` syntax is used to export all the functions and variables from the specified modules. \n\nThe `currencyId` module likely contains a list of unique identifiers for different currencies used in the project. This could be useful for tracking and managing different types of currency within the system.\n\nThe `getCurrency` module likely contains functions for retrieving information about a specific currency, such as its name, symbol, and exchange rate. This could be useful for displaying currency information to users or performing calculations involving different currencies.\n\nThe `wrappedCurrency` module likely contains functions for wrapping and unwrapping currencies, which is a common practice in decentralized finance (DeFi) applications. This involves converting one type of currency into another that is compatible with a specific DeFi protocol or platform.\n\nThe `maxAmountSpend` module likely contains functions for calculating the maximum amount of a specific currency that can be spent based on various factors such as account balance, transaction fees, and spending limits. This could be useful for preventing users from overspending or exceeding their account limits.\n\nOverall, this file plays an important role in managing currency-related functionality within the larger project. By exporting these modules, other parts of the project can easily access and utilize these functions and variables as needed. \n\nExample usage:\n\n```\nimport { getCurrency } from './getCurrency';\n\nconst currencyInfo = getCurrency('USD');\nconsole.log(currencyInfo.name); // Output: \"United States Dollar\"\n```",
- "questions": "1. **What is the purpose of this code file?**\\\nA smart developer might wonder what the overall goal of this file is, as it simply exports various functions from other files. The purpose of this file is to provide a centralized location for importing these functions into other parts of the project.\n\n2. **What do the exported functions do?**\\\nA developer might want to know more about the specific functionality of the exported functions. `currencyId` likely provides an identifier for a specific currency, `getCurrency` probably retrieves information about a given currency, `wrappedCurrency` may wrap a currency in a specific format, and `maxAmountSpend` could calculate the maximum amount of a currency that can be spent.\n\n3. **What other files are related to this code?**\\\nA developer may want to know what other files are related to this code, as it is only exporting functions from other files. The file names listed in the code suggest that there are other files related to currency and spending within the project.",
- "checksum": "31efb99bb31cea799c48b64cb03fcf74"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/currency/maxAmountSpend.json b/.autodoc/docs/json/core/src/functions/currency/maxAmountSpend.json
deleted file mode 100644
index f060f5962..000000000
--- a/.autodoc/docs/json/core/src/functions/currency/maxAmountSpend.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "maxAmountSpend.ts",
- "filePath": "core/src/functions/currency/maxAmountSpend.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/currency/maxAmountSpend.ts",
- "summary": "The code in this file is responsible for calculating the maximum amount that can be spent on a given currency. It imports three modules from the '@zoolabs/zdk' library: Currency, CurrencyAmount, and JSBI. \n\nThe constant variable MIN_NATIVE_CURRENCY_FOR_GAS is defined as the result of raising 10 to the power of 16, which represents the minimum amount of native currency (in this case, Ethereum) required to pay for gas fees. \n\nThe main function in this file is maxAmountSpend, which takes a CurrencyAmount object as its parameter and returns either a new CurrencyAmount object or undefined. If the input parameter is undefined, the function returns undefined. If the currency of the input parameter is native (i.e. Ethereum), the function checks if the quotient of the currency amount is greater than MIN_NATIVE_CURRENCY_FOR_GAS. If it is, the function subtracts MIN_NATIVE_CURRENCY_FOR_GAS from the quotient and returns a new CurrencyAmount object with the same currency and the new quotient. If the quotient is less than or equal to MIN_NATIVE_CURRENCY_FOR_GAS, the function returns a new CurrencyAmount object with the same currency and a quotient of 0. If the currency is not native, the function simply returns the input parameter. \n\nThis function can be used in the larger project to calculate the maximum amount that can be spent on a given currency, which is useful for various financial transactions. For example, if a user wants to make a transaction that requires a certain amount of Ethereum, this function can be used to ensure that they have enough Ethereum to cover the transaction fees. \n\nExample usage:\n\n```\nimport { maxAmountSpend, CurrencyAmount, Currency } from 'zoo'\n\nconst ethAmount = CurrencyAmount.fromRawAmount(Currency.ETH, '1000000000000000000') // 1 ETH\nconst maxSpend = maxAmountSpend(ethAmount) // returns a new CurrencyAmount object with 0.99 ETH\n```",
- "questions": "1. What is the purpose of the `Currency`, `CurrencyAmount`, and `JSBI` imports from `@zoolabs/zdk`?\n- These imports are likely used to handle currency-related calculations and conversions within the `maxAmountSpend` function.\n\n2. What is the significance of the `MIN_NATIVE_CURRENCY_FOR_GAS` constant?\n- This constant represents the minimum amount of native currency (in this case, ETH) required to cover gas fees for a transaction.\n\n3. What does the `maxAmountSpend` function do?\n- This function takes in a `CurrencyAmount` object and returns the maximum amount that can be spent of that currency, taking into account gas fees if the currency is native to the blockchain. If no `CurrencyAmount` is provided, the function returns `undefined`.",
- "checksum": "17a02e9da14b342cfdf287d6482be1af"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/currency/wrappedCurrency.json b/.autodoc/docs/json/core/src/functions/currency/wrappedCurrency.json
deleted file mode 100644
index 7dc3dafbd..000000000
--- a/.autodoc/docs/json/core/src/functions/currency/wrappedCurrency.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "wrappedCurrency.ts",
- "filePath": "core/src/functions/currency/wrappedCurrency.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/currency/wrappedCurrency.ts",
- "summary": "The code above is a function called `unwrappedToken` that takes a `Currency` object as its argument and returns a `Currency` object. The purpose of this function is to check if the given `Currency` object is a native currency or not. If it is a native currency, the function returns the same object. If it is not a native currency, the function checks if the `chainId` property of the `Currency` object is present in the `ChainId` object and if the `Currency` object is equal to the `WNATIVE` object for that `chainId`. If both conditions are true, the function returns the `NATIVE` object for that `chainId`. If neither condition is true, the function returns the same `Currency` object that was passed as an argument.\n\nThis function is part of the larger `zoo` project and is used to handle different types of currencies in the project. It is particularly useful when dealing with wrapped tokens, which are tokens that are backed by another asset, such as Ether. Wrapped tokens are often used in decentralized finance (DeFi) applications and can be traded on various decentralized exchanges (DEXs). This function helps to identify whether a given token is a wrapped token or not and returns the underlying asset if it is.\n\nHere is an example of how this function can be used in the larger `zoo` project:\n\n```javascript\nimport { Currency } from '@zoolabs/zdk'\nimport { unwrappedToken } from 'zoo'\n\nconst wrappedToken = new Currency('0x123', 'Wrapped Token', 18)\nconst nativeToken = new Currency('0x456', 'Native Token', 18)\n\nconst unwrappedWrappedToken = unwrappedToken(wrappedToken)\nconst unwrappedNativeToken = unwrappedToken(nativeToken)\n\nconsole.log(unwrappedWrappedToken) // returns the same wrappedToken object\nconsole.log(unwrappedNativeToken) // returns the same nativeToken object\n``` \n\nIn this example, we create two `Currency` objects, one for a wrapped token and one for a native token. We then pass each of these objects to the `unwrappedToken` function and log the results to the console. Since the wrapped token is not a native currency, the function returns the same `wrappedToken` object. Since the native token is a native currency, the function also returns the same `nativeToken` object.",
- "questions": "1. What is the purpose of the `unwrappedToken` function?\n- The `unwrappedToken` function takes a `Currency` object as input and returns either the same object or a different `Currency` object depending on certain conditions.\n\n2. What is the significance of the `isNative` property of the `Currency` object?\n- The `isNative` property of the `Currency` object is used to determine whether the input `Currency` object is the native currency of its blockchain.\n\n3. What is the purpose of the commented out code block?\n- The commented out code block appears to be related to a specific use case involving a particular `Currency` object (`WETH9_EXTENDED`) and a formatted chain ID. However, without more context it is unclear what the purpose of this code block is or why it is commented out.",
- "checksum": "d9ec30c6ac1aa2fe0fb17d2a83bc999e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/ens.json b/.autodoc/docs/json/core/src/functions/ens.json
deleted file mode 100644
index 1cc235756..000000000
--- a/.autodoc/docs/json/core/src/functions/ens.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ens.ts",
- "filePath": "core/src/functions/ens.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/ens.ts",
- "summary": "This code provides functionality for resolving ENS (Ethereum Name Service) addresses to content hashes on the Ethereum mainnet. \n\nThe `import` statements at the beginning of the file bring in necessary dependencies from the `@ethersproject` library. \n\nThe `REGISTRAR_ABI` and `REGISTRAR_ADDRESS` constants define the ABI (Application Binary Interface) and address of the ENS registrar contract on the Ethereum mainnet. The `RESOLVER_ABI` constant defines the ABI for the resolver contract, which is used to resolve ENS names to content hashes. \n\nThe `resolverContract` function takes a resolver address and provider as arguments and returns a new `Contract` instance for that resolver address using the `RESOLVER_ABI` constant. This function is used to cache resolver contracts since most of them are the public resolver. \n\nThe `resolveENSContentHash` function takes an ENS name and provider as arguments and returns a promise that resolves to the content hash associated with that ENS name. This function first creates a new `Contract` instance for the ENS registrar contract using the `REGISTRAR_ABI` constant. It then uses the `namehash` function from the `@ethersproject/hash` library to compute the hash of the ENS name. It then calls the `resolver` function on the ENS registrar contract to get the resolver address associated with the ENS name. Finally, it calls the `contenthash` function on the resolver contract for the given hash to get the content hash associated with the ENS name. \n\nThe `ENS_NAME_REGEX` constant defines a regular expression for matching ENS addresses. The `parseENSAddress` function takes an ENS address as an argument and returns an object with the ENS name and path (if any) parsed from the address. This function uses the `ENS_NAME_REGEX` constant to match the ENS address and returns `undefined` if there is no match. Otherwise, it returns an object with the ENS name and path parsed from the address. \n\nOverall, this code provides a way to resolve ENS addresses to content hashes on the Ethereum mainnet, which can be useful for retrieving content associated with decentralized websites and applications. Here is an example usage of the `resolveENSContentHash` function:\n\n```\nimport { ethers } from 'ethers'\nimport { resolveENSContentHash } from 'zoo'\n\nconst provider = new ethers.providers.InfuraProvider('mainnet', 'your-infura-project-id')\nconst ensName = 'mywebsite.eth'\n\nresolveENSContentHash(ensName, provider)\n .then(contentHash => {\n console.log(`Content hash for ${ensName}: ${contentHash}`)\n })\n .catch(error => {\n console.error(`Error resolving content hash for ${ensName}: ${error}`)\n })\n```",
- "questions": "1. What is the purpose of this code?\n- This code provides functions for resolving ENS content hashes and parsing ENS addresses.\n\n2. What is the significance of the REGISTRAR_ADDRESS and REGISTRAR_ABI constants?\n- The REGISTRAR_ADDRESS constant is the address of the ENS registrar contract on the Ethereum mainnet, and the REGISTRAR_ABI constant is the ABI for that contract. These are used to fetch the resolver address for a given ENS name.\n\n3. What is the format of a valid ENS address that can be parsed by the parseENSAddress function?\n- A valid ENS address must have a domain name ending in \".eth\", and may optionally include a path after the domain name. The domain name must consist of one or more alphanumeric labels separated by hyphens.",
- "checksum": "8244981155877a7994eb2ff9fe0ce1ad"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/environment.json b/.autodoc/docs/json/core/src/functions/environment.json
deleted file mode 100644
index ebfc15dee..000000000
--- a/.autodoc/docs/json/core/src/functions/environment.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "environment.ts",
- "filePath": "core/src/functions/environment.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/environment.ts",
- "summary": "The `isEnvironment` function is a utility function that checks whether the current environment matches a given environment. The function takes a single argument, `env`, which is a string representing the environment to check against. \n\nThe function uses the `process.env` object to access the current environment variables. Specifically, it checks the value of the `REACT_PUBLIC_APP_ENV` variable, which is assumed to be set by the build process or runtime environment. If the value of `REACT_PUBLIC_APP_ENV` matches the `env` argument, the function returns `true`. Otherwise, it returns `false`. \n\nThis function can be used in a variety of ways within the larger project. For example, it could be used to conditionally render certain components or features based on the current environment. It could also be used to configure different settings or behavior based on the environment. \n\nHere is an example of how the `isEnvironment` function could be used in a React component:\n\n```\nimport React from 'react';\nimport { isEnvironment } from './utils';\n\nconst MyComponent = () => {\n const isProduction = isEnvironment('production');\n\n return (\n My Transaction History
\n\n {isProduction ? (\n
\n );\n};\n```\n\nIn this example, the `isEnvironment` function is used to determine whether the current environment is the production environment. Depending on the result, the component renders different content. \n\nOverall, the `isEnvironment` function is a simple but useful utility function that can help with environment-specific logic and behavior within the larger project.",
- "questions": "1. What does this function do?\n - This function checks if the environment variable `REACT_PUBLIC_APP_ENV` is equal to the input `env`.\n\n2. What is the expected input for this function?\n - The expected input for this function is a string representing the environment to be checked against the `REACT_PUBLIC_APP_ENV` variable.\n\n3. Where is the `process.env.REACT_PUBLIC_APP_ENV` variable defined?\n - The `process.env.REACT_PUBLIC_APP_ENV` variable is likely defined in a configuration file or environment variable setup outside of this code file.",
- "checksum": "16d1f13d7bc29073549deeea9d9110a7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/explorer.json b/.autodoc/docs/json/core/src/functions/explorer.json
deleted file mode 100644
index 5e8fedd33..000000000
--- a/.autodoc/docs/json/core/src/functions/explorer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "explorer.ts",
- "filePath": "core/src/functions/explorer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/explorer.ts",
- "summary": "The code defines a set of explorers and chains for the zoo project. The explorers are functions that take in a link, data, and type, and return a URL string for a specific blockchain explorer. The chains are objects that map a chain ID to a link and an explorer builder function. The `getExplorerLink` function takes in a chain ID, data, and type, and returns a URL string for the corresponding explorer.\n\nThe `explorers` object defines four explorer functions for etherscan, blockscout, harmony, and okex. Each function takes in a link, data, and type, and returns a URL string for a specific blockchain explorer. The `switch` statement inside each function determines the type of data and returns the corresponding URL string.\n\nThe `chains` object maps each chain ID to a link and an explorer builder function. The link is a string that represents the base URL for the corresponding blockchain explorer. The explorer builder function is one of the four explorer functions defined in the `explorers` object. The `ChainId` enum is imported from the `@zoolabs/zdk` library and is used to define the keys for the `chains` object.\n\nThe `getExplorerLink` function takes in a chain ID, data, and type, and returns a URL string for the corresponding explorer. It first retrieves the chain object from the `chains` object using the chain ID. It then calls the explorer builder function with the link, data, and type to generate the URL string.\n\nThis code is used to provide a consistent way of generating blockchain explorer URLs for different chains in the zoo project. It can be used by other modules in the project that need to generate explorer URLs for different chains. For example, if a module needs to generate an explorer URL for a transaction on the Ethereum mainnet, it can call `getExplorerLink(ChainId.MAINNET, txHash, 'transaction')` to get the URL string for the transaction on Etherscan.",
- "questions": "1. What is the purpose of the `explorers` object?\n- The `explorers` object contains functions that generate links to blockchain explorers based on the type of data provided (transaction, token, address, or block).\n\n2. What is the `chains` object used for?\n- The `chains` object maps chain IDs to explorer links and builder functions that generate links for each chain.\n\n3. What does the `getExplorerLink` function do?\n- The `getExplorerLink` function takes a chain ID, data, and type as arguments, and returns a link to a blockchain explorer generated by the corresponding builder function for that chain.",
- "checksum": "1b7dc9d551b4ae183aed8f36c5cfeb6b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/feature.json b/.autodoc/docs/json/core/src/functions/feature.json
deleted file mode 100644
index 08d48c364..000000000
--- a/.autodoc/docs/json/core/src/functions/feature.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "feature.ts",
- "filePath": "core/src/functions/feature.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/feature.ts",
- "summary": "This code defines a set of features and their availability on different blockchain networks. The `Feature` enum lists the available features, including AMM, liquidity mining, BentoBox, Kashi, MISO, analytics, migrate, and staking. The `globalFeatures` array lists the features that are globally available, but are not tied to any specific blockchain network.\n\nThe `features` object is a mapping of `ChainId` to an array of `Feature`s that are available on that network. `ChainId` is an enum that lists the supported blockchain networks, including MAINNET, HARDHAT, ROPSTEN, RINKEBY, GÖRLI, KOVAN, BSC, BSC_TESTNET, FANTOM, FANTOM_TESTNET, MATIC, MATIC_TESTNET, HARMONY, HARMONY_TESTNET, AVALANCHE, AVALANCHE_TESTNET, OKEX, OKEX_TESTNET, XDAI, MOONRIVER, and ARBITRUM.\n\nThe `featureEnabled` function takes a `Feature` and a `ChainId` as input and returns a boolean indicating whether the feature is available on that network. It checks if the `features` object has an array of features for the given `ChainId`, and if so, whether that array includes the given `Feature`. It also checks if the `globalFeatures` array includes the given `Feature`.\n\nThe `chainsWithFeature` function takes a `Feature` as input and returns an array of `ChainId`s that support that feature. It filters the keys of the `features` object to only include those that have the given `Feature` in their array of features, and then maps those keys to their corresponding `ChainId`.\n\nThis code is likely used in the larger project to determine which features are available on which blockchain networks, and to enable or disable certain functionality based on those features. For example, a UI component might display different options depending on which features are available on the user's selected network.",
- "questions": "1. What is the purpose of the `globalFeatures` array?\n - The `globalFeatures` array contains a list of features that are enabled globally across all chains.\n2. What is the purpose of the `featureEnabled` function?\n - The `featureEnabled` function takes in a `Feature` and a `ChainId` as arguments and returns a boolean indicating whether the feature is enabled on the specified chain and globally.\n3. What is the purpose of the `chainsWithFeature` function?\n - The `chainsWithFeature` function takes in a `Feature` as an argument and returns an array of `ChainId`s that have the specified feature enabled.",
- "checksum": "8cb4ac6c47e90a5971dedecddfaebdd1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/filtering.json b/.autodoc/docs/json/core/src/functions/filtering.json
deleted file mode 100644
index fd36547fb..000000000
--- a/.autodoc/docs/json/core/src/functions/filtering.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "filtering.ts",
- "filePath": "core/src/functions/filtering.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/filtering.ts",
- "summary": "The code in this file provides functions for filtering and sorting tokens in a larger project called zoo. The file imports the Token and TokenInfo classes from the zdk and token-lists modules, respectively, as well as the isAddress function from a local validate module and the useMemo hook from the React library.\n\nThe createTokenFilterFunction function takes a search query string as input and returns a filter function that can be applied to a list of tokens. If the search query is an Ethereum address, the filter function checks whether the token's address matches the query. Otherwise, the function splits the search query into lowercase parts and checks whether each part is a substring of the token's name or symbol. The function returns true if the token matches all search query parts.\n\nThe filterTokens function takes a list of tokens and a search query string as input and returns a filtered list of tokens that match the search query. It uses the createTokenFilterFunction to create a filter function and applies it to the list of tokens.\n\nThe useSortedTokensByQuery function takes a list of tokens and a search query string as input and returns a sorted list of tokens that match the search query. It uses the useMemo hook to memoize the sorted list of tokens and avoid unnecessary re-renders. The function first checks whether the search query matches exactly one token symbol. If so, it returns a list of tokens that match the exact symbol. Otherwise, it sorts the tokens into three lists: exact matches, substring matches on symbol, and the rest. The function returns a concatenated list of these three lists, sorted in that order.\n\nOverall, this file provides useful functions for filtering and sorting tokens in the larger zoo project. For example, the filterTokens function could be used to display a list of tokens that match a user's search query, while the useSortedTokensByQuery function could be used to display a sorted list of tokens that match the query. These functions could be used in various parts of the zoo project, such as a token search feature or a token list display.",
- "questions": "1. What is the purpose of the `createTokenFilterFunction` function?\n- The `createTokenFilterFunction` function creates a filter function that can be used to filter an array of tokens based on a search query.\n\n2. What is the purpose of the `useSortedTokensByQuery` function?\n- The `useSortedTokensByQuery` function sorts an array of tokens based on a search query, with exact matches first, followed by tokens with a symbol that starts with the search query, and then the rest of the tokens.\n\n3. What is the purpose of the `alwaysTrue` function?\n- The `alwaysTrue` function is a helper function that always returns `true`, and is used as a fallback filter function in case the search query is empty.",
- "checksum": "a83ad2c83b833e91a28f21697bcf6c63"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/format.json b/.autodoc/docs/json/core/src/functions/format.json
deleted file mode 100644
index 896438cd5..000000000
--- a/.autodoc/docs/json/core/src/functions/format.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "format.ts",
- "filePath": "core/src/functions/format.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/format.ts",
- "summary": "This file contains a collection of utility functions for formatting various types of data. The functions are exported as individual named functions and can be used independently of each other. \n\nThe `capitalize` function takes a string as input and returns the same string with the first letter capitalized. \n\nThe `formatK` function takes a string as input and formats it in a human-readable way by abbreviating large numbers with a \"K\" suffix. For example, `formatK('1234567')` would return `'1.23M'`. \n\nThe `shortenAddress` function takes an Ethereum address as input and returns a shortened version of the address with only the first and last four characters visible. \n\nThe `shortenString` function takes a string and a length as input and returns a shortened version of the string with three dots in the middle. \n\nThe `formatPercent` function takes a string representation of a percentage as input and returns a formatted string with a percent sign. \n\nThe `formatNumber` function takes a number as input and returns a formatted string with commas and/or abbreviated with a \"K\" suffix. It also has options for formatting as USD and specifying the number of decimal places. \n\nThe `formatNumberScale` function is similar to `formatNumber` but uses a different scaling system based on the length of the number. \n\nThe `escapeRegExp` function takes a string as input and returns the same string with any special characters escaped so that it can be used as a regular expression. \n\nThe `formatBalance` function takes a BigNumberish value and returns a formatted string representing the value in ether. It also has options for specifying the number of decimal places and the maximum number of digits after the decimal point. \n\nThe `formatCurrencyAmount` and `formatPrice` functions take CurrencyAmount and Price objects, respectively, and return formatted strings representing the values. They also have options for specifying the number of significant figures. \n\nThe `formatDateAgo` function takes a Date object as input and returns a formatted string representing the time elapsed since that date. \n\nThe `formatCurrencyFromRawAmount` and `formatCurrencyAmountWithCommas` functions take a Currency object and a raw amount as input and return formatted strings representing the value in the specified currency. \n\nThe `numberWithCommas` function takes a number or string as input and returns a formatted string with commas separating the thousands. \n\nThe `formatError` function takes an error object as input and returns a formatted string representing the error message. \n\nOverall, these functions provide a variety of useful formatting options for different types of data that may be used throughout the larger project.",
- "questions": "1. What is the purpose of the `formatFoo` convention and where is it used in this code?\n- The purpose of the `formatFoo` convention is not clear from this code alone. It is not used in this code and there is no documentation explaining its purpose.\n\n2. What is the `Intl.NumberFormat` library used for in this code?\n- The `Intl.NumberFormat` library is used to format numbers as currency with a minimum of 2 decimal places.\n\n3. What is the purpose of the `formatError` function and what kind of input does it expect?\n- The `formatError` function is used to format error messages. It expects an error object as input and returns a formatted error message.",
- "checksum": "7086ca5750d49350787d793a9c18a8a8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/getLibrary.json b/.autodoc/docs/json/core/src/functions/getLibrary.json
deleted file mode 100644
index d8c1aa08a..000000000
--- a/.autodoc/docs/json/core/src/functions/getLibrary.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "getLibrary.ts",
- "filePath": "core/src/functions/getLibrary.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/getLibrary.ts",
- "summary": "This code is a TypeScript module that exports a single function called `getLibrary`. The purpose of this function is to create and return a `Web3Provider` object that is connected to a given Ethereum provider. The `Web3Provider` is a class from the `@ethersproject/providers` library that provides a way to interact with the Ethereum blockchain using the Web3 API.\n\nThe `getLibrary` function takes a single argument called `provider`, which can be any type of Ethereum provider. The function first creates a new `Web3Provider` object using the `provider` argument. If the `provider` object has a `chainId` property that is a number or a string that can be parsed as a number, then that value is used as the chain ID for the `Web3Provider`. Otherwise, the string `'any'` is used as the chain ID.\n\nAfter creating the `Web3Provider` object, the function sets its `pollingInterval` property to 15 seconds. This property determines how often the `Web3Provider` will poll the Ethereum network for updates. \n\nThe function then calls the `detectNetwork` method of the `Web3Provider` object to determine the current network that the provider is connected to. If the network has a known chain ID (i.e. it is one of the chain IDs defined in the `NETWORK_POLLING_INTERVALS` object), then the function sets the `pollingInterval` property of the `Web3Provider` to the corresponding value from the `NETWORK_POLLING_INTERVALS` object.\n\nThe `NETWORK_POLLING_INTERVALS` object is a constant object that maps Ethereum chain IDs to polling intervals in milliseconds. Currently, it only defines polling intervals for the Arbitrum and Harmony networks.\n\nOverall, this code provides a convenient way to create a `Web3Provider` object that is connected to a given Ethereum provider and has a reasonable polling interval. It also allows for customization of the polling interval based on the current network, which can help improve performance and reduce unnecessary network traffic. \n\nExample usage:\n\n```typescript\nimport { ethers } from 'ethers'\nimport getLibrary from './getLibrary'\n\n// create an Ethereum provider using ethers.js\nconst provider = new ethers.providers.JsonRpcProvider('https://mainnet.infura.io/v3/your-project-id')\n\n// create a Web3Provider object using the provider\nconst library = getLibrary(provider)\n\n// use the library to interact with the Ethereum blockchain\nconst balance = await library.getBalance('0x123...')\n```",
- "questions": "1. What external libraries or dependencies are being used in this code?\n- The code is importing `ExternalProvider`, `JsonRpcFetchFunc`, and `Web3Provider` from the `@ethersproject/providers` library, as well as `ChainId` from the `@zoolabs/zdk` library.\n\n2. What is the purpose of the `NETWORK_POLLING_INTERVALS` object?\n- The `NETWORK_POLLING_INTERVALS` object is used to store polling intervals for different chain IDs. The polling interval is set to a specific value if the chain ID matches one of the keys in the object.\n\n3. What is the purpose of the `getLibrary` function and what does it return?\n- The `getLibrary` function takes in a provider and returns a `Web3Provider` instance. It sets the polling interval of the instance to 15 seconds and also detects the network of the provider and sets the polling interval to a specific value if the network's chain ID matches one of the keys in the `NETWORK_POLLING_INTERVALS` object.",
- "checksum": "ae71909a88ff51fff996247cf5822d05"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/getNetworkLibrary.json b/.autodoc/docs/json/core/src/functions/getNetworkLibrary.json
deleted file mode 100644
index 1a0317437..000000000
--- a/.autodoc/docs/json/core/src/functions/getNetworkLibrary.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "getNetworkLibrary.ts",
- "filePath": "core/src/functions/getNetworkLibrary.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/getNetworkLibrary.ts",
- "summary": "The code above is a TypeScript module that exports a function called `getNetworkLibrary()`. The purpose of this function is to provide a Web3Provider instance that can be used to interact with the Ethereum network. \n\nThe function first imports the `Web3Provider` class from the `@ethersproject/providers` package. This class is used to create a provider object that can be used to interact with the Ethereum network. \n\nNext, the `network` object is imported from the `../connectors/network` module. This object contains information about the Ethereum network that the application is connected to. \n\nThe `getNetworkLibrary()` function returns a `Web3Provider` instance. It first checks if the `networkLibrary` variable is defined. If it is, it returns the existing instance. If it is not, it creates a new instance using the `Web3Provider` class and the `network.provider` object. The `network.provider` object is provided by the `network` module and contains information about the Ethereum network provider that the application is connected to. \n\nThis function can be used in other parts of the application to interact with the Ethereum network. For example, if the application needs to send a transaction to the network, it can use the `Web3Provider` instance returned by `getNetworkLibrary()` to create a transaction object and send it to the network. \n\nHere is an example of how this function can be used:\n\n```\nimport { getNetworkLibrary } from 'zoo'\n\nconst provider = getNetworkLibrary()\n\n// Use the provider to interact with the Ethereum network\n```",
- "questions": "1. What is the purpose of the `Web3Provider` import from `@ethersproject/providers`?\n- The `Web3Provider` import is used to create a provider object that can interact with an Ethereum network.\n\n2. What is the `network` import from `../connectors/network` used for?\n- The `network` import is used to get the provider object for a specific Ethereum network.\n\n3. What is the purpose of the `getNetworkLibrary` function?\n- The `getNetworkLibrary` function returns the provider object for the specified Ethereum network, creating it if it doesn't already exist.",
- "checksum": "b951b3dcf01b752c3f01146d4779a878"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/index.json b/.autodoc/docs/json/core/src/functions/index.json
deleted file mode 100644
index 5f18efcfe..000000000
--- a/.autodoc/docs/json/core/src/functions/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/functions/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/index.ts",
- "summary": "This code exports all the modules from various files located in the `zoo` project. Each of these modules serves a specific purpose in the larger project. \n\nThe `array` module provides utility functions for working with arrays, such as finding the intersection or difference between two arrays. \n\nThe `convert` module provides functions for converting between different data types, such as converting a string to a number or a date object. \n\nThe `currency` module provides functions for working with different currencies, such as converting between different currencies or formatting currency values. \n\nThe `bentobox` module provides functions for interacting with the Bentobox protocol, which is a decentralized exchange protocol built on Ethereum. \n\nThe `block` module provides functions for working with Ethereum blocks, such as getting the latest block number or retrieving a specific block by its hash or number. \n\nThe `ens` module provides functions for working with the Ethereum Name Service (ENS), which is a decentralized domain name system built on Ethereum. \n\nThe `contract` module provides functions for interacting with Ethereum smart contracts, such as deploying a new contract or calling a function on an existing contract. \n\nThe `format` module provides functions for formatting data in various ways, such as formatting a date object as a string or formatting a number with a specific number of decimal places. \n\nThe `kashi` module provides functions for interacting with the Kashi protocol, which is a lending and borrowing protocol built on Ethereum. \n\nThe `list` module provides utility functions for working with lists, such as finding the first or last element in a list. \n\nThe `math` module provides utility functions for performing mathematical operations, such as finding the minimum or maximum value in an array. \n\nThe `parse` module provides functions for parsing data from various sources, such as parsing a JSON string or parsing a date string. \n\nThe `prices` module provides functions for retrieving price data from various sources, such as retrieving the current price of a specific cryptocurrency. \n\nThe `rebase` module provides functions for working with rebasing tokens, which are tokens that adjust their supply to maintain a specific price target. \n\nThe `retry` module provides utility functions for retrying a function that may fail, such as retrying a network request that may fail due to a temporary error. \n\nThe `styling` module provides utility functions for styling user interfaces, such as generating CSS classes or applying styles to a specific element. \n\nThe `trade` module provides functions for interacting with decentralized exchanges, such as executing a trade or retrieving the current price of a specific token. \n\nThe `validate` module provides functions for validating data, such as validating an email address or a password. \n\nThe `zoo` module likely serves as the main entry point for the `zoo` project, and may provide utility functions or configuration options for the project as a whole. \n\nOverall, this code serves to organize and export the various modules that make up the `zoo` project, allowing other parts of the project to easily import and use these modules as needed. For example, if a developer needs to work with Ethereum smart contracts, they can simply import the `contract` module from the `zoo` project and use its functions to interact with contracts.",
- "questions": "1. What is the purpose of the `zoo` project?\n- The `zoo` project appears to be a collection of modules related to various financial and mathematical operations.\n\n2. What is the relationship between the different modules listed in the code?\n- The code exports various modules from different files, each related to a specific financial or mathematical operation.\n\n3. Are there any dependencies required for these modules to work properly?\n- It is unclear from the code whether there are any dependencies required for these modules to work properly. Further investigation into each individual module may be necessary to determine any dependencies.",
- "checksum": "058d279958632802698583b552be04b7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/kashi.json b/.autodoc/docs/json/core/src/functions/kashi.json
deleted file mode 100644
index 4ccbd950a..000000000
--- a/.autodoc/docs/json/core/src/functions/kashi.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "kashi.ts",
- "filePath": "core/src/functions/kashi.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/kashi.ts",
- "summary": "The code in this file contains several functions that are used in the larger zoo project. The purpose of this code is to provide functionality related to interest accrual, fee calculation, and value calculation for assets and tokens. \n\nThe `accrue` function calculates the amount of interest accrued on a given pair and amount of tokens. It takes in a pair object, an amount of tokens, and an optional boolean flag to include the principal amount in the calculation. It returns a BigNumber representing the accrued interest.\n\nThe `accrueTotalAssetWithFee` function calculates the total asset value of a pair, including a fee. It takes in a pair object and returns an object with two BigNumbers: one representing the elastic value and one representing the base value.\n\nThe `interestAccrue` function calculates the interest rate for a given pair and interest amount. It takes in a pair object and a BigNumber representing the current interest rate. It returns a BigNumber representing the updated interest rate.\n\nThe `getUSDValue` function calculates the USD value of a given amount of tokens. It takes in a BigNumber representing the amount of tokens and a token object. It returns a BigNumber representing the USD value.\n\nThe `getUSDString` function calculates the USD value of a given amount of tokens and returns it as a string. It takes in a BigNumber representing the amount of tokens and a token object. It returns a string representing the USD value.\n\nThe `easyAmount` function returns an object containing the token amount, token amount as a string, USD value of the token amount, and USD value as a string. It takes in a BigNumber representing the token amount and a token object.\n\nThe `takeFee` function calculates the fee for a given amount of tokens. It takes in a BigNumber representing the amount of tokens and returns a BigNumber representing the fee.\n\nThe `addBorrowFee` function calculates the fee for a given amount of borrowed tokens. It takes in a BigNumber representing the amount of borrowed tokens and returns a BigNumber representing the fee.\n\nThe `getFraction` function calculates the fraction of a pair's total asset base value. It takes in several objects representing the total asset base value, total asset elastic value, total borrowed elastic value, and token total supply values. It returns a fraction representing the total asset base value. \n\nOverall, this code provides important functionality for the zoo project related to interest accrual, fee calculation, and value calculation for assets and tokens. These functions can be used in various parts of the project to perform calculations and provide data to users.",
- "questions": "1. What is the purpose of the `accrue` function and what does it return?\n- The `accrue` function calculates the accrued interest on a given amount based on the interest rate and elapsed time for a given pair. It returns a `BigNumber` value representing the accrued interest.\n\n2. What is the purpose of the `interestAccrue` function and what does it return?\n- The `interestAccrue` function calculates the current interest rate for a given pair based on its utilization and elapsed time. It returns a `BigNumber` value representing the current interest rate.\n\n3. What is the purpose of the `easyAmount` function and what does it return?\n- The `easyAmount` function takes a `BigNumber` amount and a token object and returns an object containing the original amount, a string representation of the amount with the token's decimals, the USD value of the amount, and a string representation of the USD value with the currency's decimals.",
- "checksum": "c70102896cbeb2c52051db91e8bff673"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/functions/list.json b/.autodoc/docs/json/core/src/functions/list.json
deleted file mode 100644
index 78605151e..000000000
--- a/.autodoc/docs/json/core/src/functions/list.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "list.ts",
- "filePath": "core/src/functions/list.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/functions/list.ts",
- "summary": "The code in this file contains functions that are used to resolve a list URL to a validated token list. The `getTokenList` function takes in a list URL and a function that resolves an ENS name to a content hash. It then parses the ENS address, translates the content hash to a URI, and converts the URI to an HTTP URL. It then loops through the URLs and fetches the list from the first URL that returns a valid response. If the fetched list fails validation, an error is thrown. If none of the URLs return a valid response, an error is thrown.\n\nThe `sortByListPriority` function is used to sort a list of URLs based on their priority. The priority is determined by the ordering of the default list of lists. The function returns 1 if the first URL has a higher priority, -1 if the second URL has a higher priority, and 0 if they have the same priority.\n\nThe `listVersionLabel` function takes in a `Version` object and returns a string that represents the version label. The version label is in the format `vThis is the production environment.
\n ) : (\nThis is not the production environment.
\n )}\nLoading...
;\n }\n\n if (error) {\n return Error: {error.message}
;\n }\n\n return (\n \n {data.map((nft) => (\n
\n );\n};\n\nconst App = () => {\n return (\n {nft.get(\"name\")}
\n ))}\n \n {pairs.map(([tokenA, tokenB]) => (\n
\n )\n}\n```\n\nIn this example, the `useAllCurrencyCombinations` function is used to generate all possible currency pairs for the `currencyA` and `currencyB` props. The resulting pairs are then mapped to a list of currency symbols, which are displayed in the component.",
- "questions": "1. What is the purpose of the `useAllCurrencyCombinations` function?\n- The `useAllCurrencyCombinations` function returns an array of all possible token pairs that can be traded against each other, as well as against a set of common and additional base tokens.\n\n2. What is the significance of the `chainId` variable?\n- The `chainId` variable is used to determine which set of common and additional base tokens to use in the `bases` array.\n\n3. What is the purpose of the `CUSTOM_BASES` object in the `filter` method?\n- The `CUSTOM_BASES` object is used to filter out any token pairs that do not have a custom base token specified for either token in the pair. If a custom base token is specified for a token, then the pair must include that base token in order to be included in the final array.",
- "checksum": "75f60c04b59af2661e984450fb45aec4"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useApproveCallback.json b/.autodoc/docs/json/core/src/hooks/useApproveCallback.json
deleted file mode 100644
index da62affe0..000000000
--- a/.autodoc/docs/json/core/src/hooks/useApproveCallback.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useApproveCallback.ts",
- "filePath": "core/src/hooks/useApproveCallback.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useApproveCallback.ts",
- "summary": "The code defines several React hooks that are used to manage token approvals for the Zoo project. The `useApproveCallback` hook takes in two optional parameters: `amountToApprove` and `spender`. It returns an array with two elements: an `ApprovalState` enum indicating the current approval status, and a function that approves the token if necessary. \n\nThe `useApproveCallbackFromTrade` hook is a wrapper around `useApproveCallback` that takes in a `V2Trade` object, an allowed slippage percentage, and a boolean flag indicating whether to use the Archer router. It calculates the `amountToApprove` based on the input currency of the trade and passes it to `useApproveCallback`.\n\nThe `useVotingApproveCallback` hook is similar to `useApproveCallback`, but it is specifically designed for the Zoo voting system. It takes in `amountToApprove` and `spender` parameters and returns an array with the current approval status and an approval function. \n\nAll of these hooks use other custom hooks defined in the same file, such as `useActiveWeb3React`, `useTokenAllowance`, and `useTokenContract`. They also import various constants and functions from external libraries and files, such as `@zoolabs/zdk`, `@ethersproject/constants`, and `addresses`. \n\nOverall, these hooks provide a convenient way for developers to manage token approvals in the Zoo project. They can be used in various components and modules to ensure that users have approved the necessary tokens before executing trades or voting.",
- "questions": "1. What is the purpose of the `useApproveCallback` function?\n- The `useApproveCallback` function returns a variable indicating the state of the approval and a function which approves if necessary or early returns. It is used to handle token approvals for a given spender.\n\n2. What is the purpose of the `useApproveCallbackFromTrade` function?\n- The `useApproveCallbackFromTrade` function wraps the `useApproveCallback` function in the context of a swap. It takes in a trade, allowed slippage, and a boolean flag to indicate whether to use the Archer router or not, and returns the same variables as `useApproveCallback`.\n\n3. What is the purpose of the `useVotingApproveCallback` function?\n- The `useVotingApproveCallback` function is similar to `useApproveCallback`, but it is specifically designed for voting. It returns a variable indicating the state of the approval and a function which approves if necessary or early returns. It is used to handle token approvals for voting.",
- "checksum": "fc84acbdb8a412b0bd58c4e4011d3558"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useArcherMinerTips.json b/.autodoc/docs/json/core/src/hooks/useArcherMinerTips.json
deleted file mode 100644
index 5246288cb..000000000
--- a/.autodoc/docs/json/core/src/hooks/useArcherMinerTips.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useArcherMinerTips.ts",
- "filePath": "core/src/hooks/useArcherMinerTips.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useArcherMinerTips.ts",
- "summary": "The code is a custom React hook called `useArcherMinerTips` that fetches gas prices from the Archer API and returns them as an object with a `status` and `data` property. The `status` property indicates the current state of the hook, which can be one of three values: `idle`, `fetching`, or `fetched`. The `data` property is an object that contains gas prices for different transaction speeds.\n\nThe hook uses the `useEffect` and `useState` hooks from React to manage state and side effects. When the component mounts, the hook fetches gas prices from the Archer API using the `fetch` function. The API endpoint is determined by the `ChainId` from the `@zoolabs/zdk` library, which is obtained using the `useActiveWeb3React` hook. If the `ChainId` is `MAINNET`, the hook fetches gas prices. If the `ChainId` is not `MAINNET`, the hook does nothing.\n\nOnce the gas prices are fetched, the hook updates the `data` state with the response data and sets the `status` state to `fetched`. If there is an error fetching the gas prices, the `status` state is set to `idle`.\n\nThe `data` object contains gas prices for different transaction speeds, which are represented as strings. The keys of the object are `immediate`, `rapid`, `fast`, `standard`, `slow`, `slower`, and `slowest`. These keys correspond to different gas prices based on the speed of the transaction. For example, a transaction with a gas price of `immediate` will be processed faster than a transaction with a gas price of `slowest`.\n\nThis hook can be used in the larger project to fetch gas prices for transactions and determine the appropriate gas price to use based on the desired transaction speed. For example, if a user wants to send a transaction quickly, they can use the `rapid` gas price. If they are willing to wait longer for the transaction to be processed, they can use the `slow` or `slower` gas price. The `useArcherMinerTips` hook abstracts away the complexity of fetching gas prices from the Archer API and provides a simple interface for accessing gas prices in the project. \n\nExample usage:\n\n```\nimport useArcherMinerTips from './useArcherMinerTips'\n\nfunction MyComponent() {\n const { status, data } = useArcherMinerTips()\n\n if (status === 'fetching') {\n return \n {tokenA.symbol}/{tokenB.symbol}\n
\n ))}\n Loading...
\n }\n\n if (status === 'fetched') {\n return (\n \n
\n )\n }\n\n return null\n}\n```",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code defines a custom React hook called `useArcherMinerTips` that fetches gas prices from an API and returns them as an object. It solves the problem of needing to fetch gas prices in a standardized way across the application.\n\n2. What external dependencies does this code rely on?\n- This code relies on the `react` library, as well as the `@zoolabs/zdk` library for the `ChainId` type. It also imports a constant `ARCHER_GAS_URI` from a configuration file.\n\n3. What is the expected behavior of this code if the `chainId` is not `ChainId.MAINNET`?\n- If the `chainId` is not `ChainId.MAINNET`, the `fetchData` function will not be called and the `status` and `data` values will remain at their initial states of `'idle'` and the default gas price values, respectively.",
- "checksum": "ca954bc364c135efb43447c99b8dc782"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useArgentWalletContract.json b/.autodoc/docs/json/core/src/hooks/useArgentWalletContract.json
deleted file mode 100644
index 189cc8c80..000000000
--- a/.autodoc/docs/json/core/src/hooks/useArgentWalletContract.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useArgentWalletContract.ts",
- "filePath": "core/src/hooks/useArgentWalletContract.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useArgentWalletContract.ts",
- "summary": "The code above is a function that returns an instance of a smart contract called `ArgentWalletContract`. The contract is defined by the `ARGENT_WALLET_ABI` constant, which is imported from a JSON file located in the `constants/abis` directory. \n\nThe function is designed to be used in a larger project that involves interacting with the Ethereum blockchain. It is assumed that the project is using the `@ethersproject/contracts` library, as this is imported at the top of the file. \n\nThe function itself is called `useArgentWalletContract` and is designed to be used as a React hook. It uses several other custom hooks, including `useActiveWeb3React`, `useContract`, and `useIsArgentWallet`. \n\nThe `useActiveWeb3React` hook is used to retrieve the current Ethereum account that the user is connected to. This is necessary because the `ArgentWalletContract` is specific to each user's Ethereum address. \n\nThe `useIsArgentWallet` hook is used to determine whether the current wallet being used is an Argent wallet. If it is, then the `ArgentWalletContract` instance is returned. If not, then `null` is returned. \n\nThe `useContract` hook is used to actually create the instance of the `ArgentWalletContract`. It takes three arguments: the Ethereum address of the user (if they are using an Argent wallet), the ABI of the contract, and a boolean indicating whether to use the read-only version of the contract. \n\nOverall, this function is a useful tool for interacting with the `ArgentWalletContract` in a larger Ethereum-based project. It is designed to be used as a React hook and relies on several other custom hooks to function properly. \n\nExample usage:\n\n```\nimport { useArgentWalletContract } from './useArgentWalletContract'\n\nfunction MyComponent() {\n const argentWalletContract = useArgentWalletContract()\n\n // Use the contract instance to interact with the Ethereum blockchain\n // ...\n}\n```",
- "questions": "1. What is `ARGENT_WALLET_ABI` and where is it defined?\n- `ARGENT_WALLET_ABI` is likely an ABI (Application Binary Interface) for a smart contract related to the Argent wallet. Its definition is likely located in the `../constants/abis/argent-wallet.json` file.\n\n2. What is the purpose of the `useActiveWeb3React` and `useContract` hooks?\n- The `useActiveWeb3React` hook likely provides access to the active Web3 provider and account, while the `useContract` hook likely creates an instance of a smart contract using its ABI and address.\n\n3. What is the significance of the `useIsArgentWallet` hook and how is it used?\n- The `useIsArgentWallet` hook likely checks if the current account is an Argent wallet. It is used to conditionally pass the account to the `useContract` hook, depending on whether or not it is an Argent wallet.",
- "checksum": "f302c9c12917e35b9bd9d451a25203fd"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useBentoBox.json b/.autodoc/docs/json/core/src/hooks/useBentoBox.json
deleted file mode 100644
index 539a9ef0c..000000000
--- a/.autodoc/docs/json/core/src/hooks/useBentoBox.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useBentoBox.ts",
- "filePath": "core/src/hooks/useBentoBox.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useBentoBox.ts",
- "summary": "The `useBentoBox` function is a React hook that provides functionality for interacting with the BentoBox smart contract. The BentoBox is a smart contract that allows for efficient and gas-saving token transfers and storage. \n\nThe function imports several dependencies, including `BigNumber` from the `@ethersproject/bignumber` library, `getAddress` from the `@ethersproject/address` library, `AddressZero` from the `@ethersproject/constants` library, and `WNATIVE_ADDRESS` from the `@zoolabs/zdk` library. It also imports two custom hooks: `useActiveWeb3React` and `useBentoBoxContract`, as well as `useCallback` from the `react` library and `useTransactionAdder` from a custom `transactions` state.\n\nThe `useBentoBox` function returns an object with two properties: `deposit` and `withdraw`. Both of these properties are functions that take two arguments: `tokenAddress` and `value`. `tokenAddress` is a string representing the address of the token to be deposited or withdrawn, and `value` is a `BigNumber` representing the amount of the token to be deposited or withdrawn.\n\nThe `deposit` function first checks if `value` and `chainId` are truthy. If they are, it converts `tokenAddress` to a checksummed address using `getAddress` and checks if it is equal to the `WNATIVE_ADDRESS` for the current `chainId`. If it is, it calls the `deposit` function on the `bentoBoxContract` with `AddressZero` as the `to` address, `account` as the `from` and `recipient` addresses, `value` as the `amount`, and `{ value }` as the `overrides`. If it is not, it calls the `deposit` function on the `bentoBoxContract` with `tokenAddressChecksum` as the `to` address, `account` as the `from` and `recipient` addresses, `value` as the `amount`, and no `overrides`. If there is an error, it logs the error to the console and returns the error.\n\nThe `withdraw` function is similar to the `deposit` function, but it first checks if `tokenAddressChecksum` is equal to the `WNATIVE_ADDRESS` for the current `chainId`. If it is, it sets the `to` address to `0x0000000000000000000000000000000000000000`. If it is not, it sets the `to` address to `tokenAddressChecksum`. It then calls the `withdraw` function on the `bentoBoxContract` with the appropriate arguments. If there is an error, it logs the error to the console and returns the error.\n\nThis hook can be used in a React component to interact with the BentoBox smart contract. For example, a component that allows a user to deposit tokens into the BentoBox could use the `deposit` function to initiate the deposit when a button is clicked. Similarly, a component that allows a user to withdraw tokens from the BentoBox could use the `withdraw` function to initiate the withdrawal when a button is clicked.",
- "questions": "1. What is the purpose of the `useBentoBox` function?\n- The `useBentoBox` function is a custom React hook that provides methods for depositing and withdrawing tokens from the BentoBox smart contract.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `@ethersproject/bignumber`, `@ethersproject/address`, `@ethersproject/constants`, and `@zoolabs/zdk`.\n\n3. What is the significance of `WNATIVE_ADDRESS`?\n- `WNATIVE_ADDRESS` is a constant defined in the `@zoolabs/zdk` library that represents the address of the native token for the current blockchain network. It is used in this code to determine whether a token being deposited or withdrawn is the native token, so that the appropriate method can be called on the BentoBox contract.",
- "checksum": "1afb94bdad8a8a4c9a203f0c3d115b0f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useBentoBoxAllowance.json b/.autodoc/docs/json/core/src/hooks/useBentoBoxAllowance.json
deleted file mode 100644
index 80e183ffb..000000000
--- a/.autodoc/docs/json/core/src/hooks/useBentoBoxAllowance.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useBentoBoxAllowance.ts",
- "filePath": "core/src/hooks/useBentoBoxAllowance.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useBentoBoxAllowance.ts",
- "summary": "The code defines a custom React hook called `useAllowance` that returns the allowance of a given ERC20 token for the current user's account. The hook takes a single argument, `tokenAddress`, which is the address of the ERC20 token contract.\n\nThe hook uses several other hooks and libraries to accomplish its task. The `useActiveWeb3React` hook is used to get the current user's Ethereum account. The `useBentoBoxContract` and `useContract` hooks are used to get instances of the BentoBox and ERC20 token contracts, respectively. The `getAddress` function from the `@ethersproject/address` library is used to convert the `tokenAddress` to a checksummed address.\n\nOnce the necessary contracts and addresses are obtained, the hook fetches the current allowance for the user's account using the `allowance` function of the ERC20 token contract. The allowance is then formatted as a `Fraction` using the `Fraction.from` method, which takes a `BigNumber` and a divisor. In this case, the divisor is `10^18`, since ERC20 tokens have 18 decimal places. The formatted allowance is then stored in state using the `setAllowance` function.\n\nThe hook also sets up an interval to periodically refresh the allowance every 10 seconds. This is done using the `setInterval` function in the `useEffect` hook. The interval is cleared when the component unmounts using the `clearInterval` function.\n\nOverall, this hook is useful for any part of the project that needs to check the current allowance of an ERC20 token for the user's account. For example, it could be used in a component that displays the user's current token balances and allowances for various tokens. Here is an example usage of the hook:\n\n```\nimport useAllowance from '../hooks/useAllowance'\n\nfunction MyComponent() {\n const allowance = useAllowance('0x1234567890123456789012345678901234567890')\n return Immediate: {data.immediate}
\nRapid: {data.rapid}
\nFast: {data.fast}
\nStandard: {data.standard}
\nSlow: {data.slow}
\nSlower: {data.slower}
\nSlowest: {data.slowest}
\nCurrent allowance: {allowance}
\n}\n```",
- "questions": "1. What does this code do?\n- This code exports a custom hook called `useAllowance` which takes a token address as input and returns the allowance of that token for the current user's account.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies including `react`, `@ethersproject/bignumber`, `@ethersproject/address`, and `../hooks/useContract` and `../hooks/useActiveWeb3React` which are custom hooks defined elsewhere in the project.\n\n3. What is the purpose of the `fetchAllowance` function?\n- The `fetchAllowance` function is an asynchronous function that fetches the allowance of a token for the current user's account and updates the `allowance` state variable with the formatted value of the allowance. It is called on mount and every 10 seconds thereafter.",
- "checksum": "6d69e3890dc05694337605299d322b2d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useBentoMasterApproveCallback.json b/.autodoc/docs/json/core/src/hooks/useBentoMasterApproveCallback.json
deleted file mode 100644
index f14cad03f..000000000
--- a/.autodoc/docs/json/core/src/hooks/useBentoMasterApproveCallback.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useBentoMasterApproveCallback.ts",
- "filePath": "core/src/hooks/useBentoMasterApproveCallback.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useBentoMasterApproveCallback.ts",
- "summary": "The code in this file provides a hook called `useBentoMasterApproveCallback` that can be used to approve a master contract on the BentoBox protocol. The BentoBox protocol is a lending protocol that allows users to deposit assets and earn interest. The protocol uses a system of master contracts to manage the assets and interest rates.\n\nThe `useBentoMasterApproveCallback` hook takes two arguments: the address of the master contract to approve, and an options object that can include the name of the contract and the name of the function to call. The hook returns an object that includes the current approval state, a function to approve the contract, a function to get a permit for the contract, and the current permit.\n\nThe `useBentoMasterApproveCallback` hook uses several other hooks to get the necessary data. The `useActiveWeb3React` hook is used to get the current account and chain ID. The `useBentoBoxContract` hook is used to get the BentoBox contract instance. The `useAllTransactions` and `useTransactionAdder` hooks are used to manage the approval transaction.\n\nThe `useBentoMasterApproveCallback` hook also uses several utility functions to sign the approval transaction and split the signature. These functions are imported from other files in the project.\n\nThe `useBentoMasterApproveCallback` hook is used in other parts of the project to manage the approval of master contracts. For example, it may be used in a component that allows users to deposit assets into the BentoBox protocol. When the user clicks the deposit button, the component can call the `useBentoMasterApproveCallback` hook to check if the master contract is approved. If the contract is not approved, the component can call the `getPermit` function to get a permit for the contract. The permit can then be used to approve the contract by calling the `approve` function. Once the contract is approved, the component can call the `deposit` function to deposit the assets into the protocol.",
- "questions": "1. What is the purpose of this code?\n- This code defines a hook called `useBentoMasterApproveCallback` that returns an object with functions and data related to approving a master contract in the BentoBox protocol.\n\n2. What are the dependencies of this code?\n- This code depends on several other hooks and functions from different files, including `useBentoMasterContractAllowed`, `useActiveWeb3React`, `useBentoBoxContract`, `useAllTransactions`, `useTransactionAdder`, and `signMasterContractApproval`.\n\n3. What are the possible values of `BentoApprovalState` and `BentoApproveOutcome`?\n- `BentoApprovalState` is an enum with possible values of `UNKNOWN`, `NOT_APPROVED`, `PENDING`, `FAILED`, and `APPROVED`. `BentoApproveOutcome` is another enum with possible values of `SUCCESS`, `REJECTED`, `FAILED`, and `NOT_READY`.",
- "checksum": "d6456087554f01a504cc672487b22e83"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useColor.json b/.autodoc/docs/json/core/src/hooks/useColor.json
deleted file mode 100644
index 054714da1..000000000
--- a/.autodoc/docs/json/core/src/hooks/useColor.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useColor.ts",
- "filePath": "core/src/hooks/useColor.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useColor.ts",
- "summary": "This code defines two React hooks, `useColor` and `useListColor`, that are used to determine the dominant color of an image. The hooks use the `Vibrant` library to extract the color palette of an image and return the hex code of the most vibrant color. \n\nThe `getColorFromToken` function is used to extract the color of a token logo. It takes a `Token` object as input and returns a promise that resolves to a hex code string or null. If the token is on the Rinkeby network and has a specific address, the function returns a pre-defined hex code. Otherwise, it constructs a URL to the token's logo image and uses `Vibrant` to extract the color palette. If a vibrant color is found, the function applies the `shade` function from the `polished` library to the color until it has a minimum contrast score of 3 against white. The function then returns the resulting hex code.\n\nThe `getColorFromUriPath` function is used to extract the color of an image from a URI. It takes a URI string as input and returns a promise that resolves to a hex code string or null. The function first converts the URI to an HTTP URL using the `uriToHttp` function from a separate file. It then uses `Vibrant` to extract the color palette of the image and returns the hex code of the most vibrant color.\n\nThe `useColor` hook takes a `Token` object as input and returns the dominant color of the token's logo image. It initializes the color state to `#0094ec` and uses `useLayoutEffect` to asynchronously fetch the color from the token's logo image. If the token is not null and a color is found, the hook updates the color state with the new value. If the token is null or the component is unmounted before the color is fetched, the hook sets the color state back to `#0094ec`.\n\nThe `useListColor` hook takes a URI string as input and returns the dominant color of the image at the URI. It initializes the color state to `#0094ec` and uses `useLayoutEffect` to asynchronously fetch the color from the image. If the URI is not null and a color is found, the hook updates the color state with the new value. If the URI is null or the component is unmounted before the color is fetched, the hook sets the color state back to `#0094ec`.\n\nThese hooks can be used in the larger project to dynamically set the color of components based on the dominant color of an image. For example, the `useColor` hook could be used to set the background color of a token card to the dominant color of the token's logo image. The `useListColor` hook could be used to set the background color of a list item to the dominant color of the item's image.",
- "questions": "1. What is the purpose of the `getColorFromToken` function?\n- The `getColorFromToken` function takes a `Token` object and returns a promise that resolves to a string representing the color of the token's logo image.\n\n2. What is the purpose of the `useColor` function?\n- The `useColor` function is a React hook that takes a `Token` object and returns a color string based on the logo image of the token. It uses the `getColorFromToken` function internally.\n\n3. What is the purpose of the `useListColor` function?\n- The `useListColor` function is another React hook that takes a URI string representing an image and returns a color string based on the image. It uses the `getColorFromUriPath` function internally.",
- "checksum": "94517330da909a4c3dbc47ac178a460c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useCopyClipboard.json b/.autodoc/docs/json/core/src/hooks/useCopyClipboard.json
deleted file mode 100644
index 3d379160c..000000000
--- a/.autodoc/docs/json/core/src/hooks/useCopyClipboard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useCopyClipboard.ts",
- "filePath": "core/src/hooks/useCopyClipboard.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useCopyClipboard.ts",
- "summary": "The code above is a custom React hook that provides functionality for copying text to the clipboard. It uses the `copy-to-clipboard` library to perform the actual copying of the text. \n\nThe hook returns an array with two values: a boolean indicating whether the text has been copied to the clipboard, and a function that can be called to initiate the copying process. The function takes a single argument, `toCopy`, which is the text to be copied.\n\nThe `useCallback` hook is used to memoize the `staticCopy` function, which is responsible for performing the copying. This is done to prevent unnecessary re-renders of the component that uses this hook. \n\nThe `useEffect` hook is used to handle the state of the `isCopied` variable. When the text is successfully copied to the clipboard, `isCopied` is set to `true`. The `useEffect` hook then sets a timeout to reset `isCopied` to `false` after a specified amount of time (`timeout`). This timeout is cleared if the component unmounts before the timeout is reached.\n\nThis hook can be used in any React component that needs to provide a copy-to-clipboard functionality. For example, it could be used in a button component that copies a URL to the clipboard when clicked. \n\nHere is an example of how this hook could be used in a component:\n\n```\nimport React from 'react'\nimport useCopyClipboard from './useCopyClipboard'\n\nfunction CopyButton({ text }) {\n const [isCopied, copyToClipboard] = useCopyClipboard()\n\n const handleClick = () => {\n copyToClipboard(text)\n }\n\n return (\n \n )\n}\n\nexport default CopyButton\n```\n\nIn this example, the `CopyButton` component takes a `text` prop, which is the text to be copied to the clipboard. When the button is clicked, the `copyToClipboard` function is called with the `text` prop as an argument. The `isCopied` value is used to display a message to the user indicating whether the text has been successfully copied.",
- "questions": "1. What does this code do?\n This code exports a custom React hook called `useCopyClipboard` that takes an optional timeout parameter and returns a tuple containing a boolean value indicating whether the copy operation was successful and a function to copy text to the clipboard.\n\n2. What library dependencies does this code have?\n This code imports two libraries: `copy-to-clipboard` and `react`.\n\n3. What is the purpose of the `useEffect` hook in this code?\n The `useEffect` hook is used to set a timeout to reset the `isCopied` state to `false` after a successful copy operation. It also clears the timeout if the `isCopied` state changes before the timeout is reached.",
- "checksum": "c1e38dd17508bea8099c5c7cd809040a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useCurrentBlockTimestamp.json b/.autodoc/docs/json/core/src/hooks/useCurrentBlockTimestamp.json
deleted file mode 100644
index d1c144be2..000000000
--- a/.autodoc/docs/json/core/src/hooks/useCurrentBlockTimestamp.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useCurrentBlockTimestamp.ts",
- "filePath": "core/src/hooks/useCurrentBlockTimestamp.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useCurrentBlockTimestamp.ts",
- "summary": "The code above is a TypeScript function that is used to retrieve the current timestamp from the blockchain. It is part of a larger project called \"zoo\" and is located in a file within that project. \n\nThe function imports two modules: `BigNumber` from the `@ethersproject/bignumber` library and `useMulticall2Contract` from a custom `useContract` module. It also imports `useSingleCallResult` from a custom `multicall` state module. \n\nThe function itself is named `useCurrentBlockTimestamp` and returns a `BigNumber` object or `undefined`. It first calls the `useMulticall2Contract` function to retrieve the contract instance for the `Multicall2` contract. It then calls the `useSingleCallResult` function, passing in the `multicall` instance and the string `'getCurrentBlockTimestamp'` as arguments. This function retrieves the result of a single call to the `Multicall2` contract, which should return the current timestamp of the blockchain. \n\nIf the result is not `undefined`, the function returns the first element of the result array as a `BigNumber` object. If the result is `undefined`, the function returns `undefined`. \n\nThis function can be used in the larger project to retrieve the current timestamp of the blockchain. This information can be useful for various purposes, such as time-based calculations or verifying the timing of certain events. \n\nExample usage:\n\n```typescript\nimport useCurrentBlockTimestamp from './useCurrentBlockTimestamp'\n\nconst currentTimestamp = useCurrentBlockTimestamp()\n\nif (currentTimestamp) {\n console.log(`The current timestamp is ${currentTimestamp.toString()}`)\n} else {\n console.log('Unable to retrieve current timestamp')\n}\n```",
- "questions": "1. What is the purpose of the `BigNumber` import from `@ethersproject/bignumber`?\n- The `BigNumber` import is likely used to handle large numbers in a precise and efficient manner, which is important in blockchain development.\n\n2. What is the `useSingleCallResult` function and where is it defined?\n- The `useSingleCallResult` function is likely defined in the `../state/multicall/hooks` file, and it is used to retrieve the result of a single function call from a smart contract.\n\n3. What smart contract function is being called in the `useCurrentBlockTimestamp` function?\n- The `getCurrentBlockTimestamp` function is being called in the `useCurrentBlockTimestamp` function to retrieve the current timestamp from the blockchain.",
- "checksum": "03bb47a40b81810ea2f4030f25a0d9b3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useDebounce.json b/.autodoc/docs/json/core/src/hooks/useDebounce.json
deleted file mode 100644
index 2708c53db..000000000
--- a/.autodoc/docs/json/core/src/hooks/useDebounce.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useDebounce.ts",
- "filePath": "core/src/hooks/useDebounce.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useDebounce.ts",
- "summary": "The code is a custom React hook called `useDebounce` that takes in two parameters: a value of generic type `T` and a delay in milliseconds. The purpose of this hook is to debounce the value passed in, meaning that it delays the execution of a function until a certain amount of time has passed since the last time it was called. This is useful for scenarios where you want to avoid executing a function too frequently, such as when handling user input.\n\nThe hook uses the `useState` and `useEffect` hooks from React to manage the state of the debounced value. When the hook is first called, it sets the initial value of `debouncedValue` to the value passed in. It then sets up an effect that runs whenever the `value` or `delay` parameters change. This effect sets a timeout using `setTimeout` that will update the `debouncedValue` to the current `value` after the specified `delay` has passed. If the `value` or `delay` parameters change before the timeout has completed, the effect will clean up the previous timeout using `clearTimeout` and start a new one.\n\nThe hook returns the `debouncedValue`, which will only be updated after the specified `delay` has passed since the last time the `value` parameter was updated. This can be used in a larger project to improve performance by reducing the number of times a function is called in response to user input. For example, if you have a search bar that executes a search function every time the user types a letter, you could use this hook to delay the execution of the search function until the user has stopped typing for a certain amount of time. This would reduce the number of unnecessary search requests and improve the overall performance of the application. \n\nExample usage:\n\n```\nimport useDebounce from './useDebounce'\n\nfunction SearchBar() {\n const [searchTerm, setSearchTerm] = useState('')\n const debouncedSearchTerm = useDebounce(searchTerm, 500)\n\n useEffect(() => {\n // Execute search function after debouncedSearchTerm has been updated\n searchFunction(debouncedSearchTerm)\n }, [debouncedSearchTerm])\n\n return (\n \n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code and how is it used in the `zoo` project?\n- This code provides a custom hook called `useDebouncedChangeHandler` that can be used to debounce the handling of a rapidly changing value. It takes in the changing value, a change handler function, and a debounce time in milliseconds as parameters, and returns an array containing the current value and a function to update the value with debounced changes.\n\n2. What type of values can be passed as the `value` parameter?\n- The `value` parameter is a generic type `T`, which means it can accept any type of value.\n\n3. How does the `useDebouncedChangeHandler` hook work internally to debounce the value changes?\n- The hook uses the `useState`, `useCallback`, and `useEffect` hooks from React to manage the state of the changing value and the debounced updates. It sets up a timer using `setTimeout` to delay the execution of the change handler function until the debounce time has elapsed, and clears the timer if the value changes again before the timer has finished.",
- "checksum": "66b497518cc33dd447ec42813fdc6e1e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useENS.json b/.autodoc/docs/json/core/src/hooks/useENS.json
deleted file mode 100644
index 9fba79c0f..000000000
--- a/.autodoc/docs/json/core/src/hooks/useENS.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useENS.ts",
- "filePath": "core/src/hooks/useENS.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useENS.ts",
- "summary": "The code in this file is a function that takes in a string parameter, which can be either an ENS name or an Ethereum address. The function then performs a lookup to resolve the name or address to an actual Ethereum address and name. \n\nThe function first imports a validation function from another file in the project. This function checks if the input parameter is a valid Ethereum address. If it is, the function proceeds to perform a reverse lookup using the useENSName function, which takes in the validated address as a parameter. If the input parameter is not a valid Ethereum address, the function performs a regular lookup using the useENSAddress function, which takes in the input parameter as a parameter.\n\nThe function then returns an object with three properties: loading, address, and name. The loading property is a boolean that indicates whether the lookup is still in progress. The address property is a string that represents the resolved Ethereum address. The name property is a string that represents the resolved ENS name.\n\nThis function can be used in the larger project to resolve ENS names to Ethereum addresses and vice versa. For example, if a user enters an ENS name in a form, this function can be used to resolve the name to an Ethereum address that can be used in a smart contract. Conversely, if a user enters an Ethereum address, this function can be used to resolve the address to an ENS name that can be displayed in the UI. \n\nHere is an example of how this function can be used:\n\n```\nimport useENS from './useENS'\n\nconst resolved = useENS('myensname.eth')\n\nconsole.log(resolved.address) // '0x1234567890abcdef1234567890abcdef12345678'\nconsole.log(resolved.name) // 'myensname.eth'\n```",
- "questions": "1. What is the purpose of the `isAddress` function imported from `../functions/validate`?\n- The `isAddress` function is used to validate whether the `nameOrAddress` parameter is a valid Ethereum address.\n\n2. What is the difference between `useENSName` and `useENSAddress`?\n- `useENSName` is used to perform a reverse lookup of an Ethereum address to its corresponding ENS name, while `useENSAddress` is used to perform a forward lookup of an ENS name to its corresponding Ethereum address.\n\n3. What is the expected return value of the `useENS` function?\n- The `useENS` function returns an object with three properties: `loading` (a boolean indicating whether the lookup is still in progress), `address` (the resolved Ethereum address), and `name` (the resolved ENS name).",
- "checksum": "f8f1a2dd92dbbb7d3dcefb273f607ae8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useENSAddress.json b/.autodoc/docs/json/core/src/hooks/useENSAddress.json
deleted file mode 100644
index 1f00dc4d4..000000000
--- a/.autodoc/docs/json/core/src/hooks/useENSAddress.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useENSAddress.ts",
- "filePath": "core/src/hooks/useENSAddress.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useENSAddress.ts",
- "summary": "The `useENSAddress` function is used to lookup the address of an Ethereum Name Service (ENS) name. ENS is a decentralized naming system built on the Ethereum blockchain that allows users to register human-readable names for their Ethereum addresses. This function takes an optional `ensName` parameter, which is the ENS name to lookup. If no `ensName` is provided, the function will return an object with a `loading` property set to `true` and an `address` property set to `null`.\n\nThe function first uses the `useDebounce` hook to debounce the `ensName` parameter. This means that if the `ensName` parameter changes, the function will wait for 200 milliseconds before performing the ENS lookup. This is done to prevent the function from making too many requests to the ENS registry.\n\nNext, the function uses the `namehash` function from the `@ethersproject/hash` library to compute the hash of the debounced `ensName`. The hash is used as an argument to the ENS resolver contract to look up the address associated with the ENS name. The function uses the `useENSRegistrarContract` and `useENSResolverContract` hooks to get instances of the ENS registrar and resolver contracts respectively. It then uses the `useSingleCallResult` hook to call the `resolver` and `addr` functions on the contracts with the computed hash argument.\n\nFinally, the function returns an object with two properties: `loading` and `address`. The `loading` property is set to `true` if the `ensName` parameter has changed or if the resolver or addr calls are still loading. The `address` property is set to the address associated with the ENS name if the lookup was successful, or `null` otherwise.\n\nThis function can be used in the larger project to provide a convenient way for users to look up the addresses associated with ENS names. For example, it could be used in a wallet application to allow users to send transactions to ENS names instead of Ethereum addresses. Here is an example usage of the `useENSAddress` function:\n\n```\nimport useENSAddress from './useENSAddress'\n\nfunction MyComponent() {\n const { loading, address } = useENSAddress('my-ens-name.eth')\n\n if (loading) {\n return Debounced value: {debouncedValue}
\nLoading...
\n }\n\n return (\n \n Address: {address}\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n \n This code defines a custom hook called `useENSAddress` that performs a lookup for an ENS name to find its address.\n\n2. What external dependencies does this code rely on?\n \n This code relies on several external dependencies, including `useContract` from a local file, `isZero` from `../functions`, `namehash` from `@ethersproject/hash`, `useDebounce` from a local file, `useMemo` from `react`, and `useSingleCallResult` from `../state/multicall/hooks`.\n\n3. What is the expected behavior if `ensName` is not provided?\n \n If `ensName` is not provided, the `useENSAddress` hook will still run, but it will return an object with `loading` set to `true` and `address` set to `null`.",
- "checksum": "db0eabc81ead9d0f4050c9ea5f2754d5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useENSContentHash.json b/.autodoc/docs/json/core/src/hooks/useENSContentHash.json
deleted file mode 100644
index 210a7d962..000000000
--- a/.autodoc/docs/json/core/src/hooks/useENSContentHash.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useENSContentHash.ts",
- "filePath": "core/src/hooks/useENSContentHash.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useENSContentHash.ts",
- "summary": "The `useENSContentHash` function is used to look up the contenthash associated with an ENS name. ENS (Ethereum Name Service) is a decentralized naming system built on the Ethereum blockchain that allows users to register human-readable domain names and associate them with Ethereum addresses or other metadata. The contenthash is a piece of metadata that can be associated with an ENS name and is used to store IPFS content hashes or other data.\n\nThe function takes an optional `ensName` parameter, which is the ENS name to look up. If no `ensName` is provided, the function returns an object with a `loading` property set to `true` and a `contenthash` property set to `null`. If an `ensName` is provided, the function first calculates the namehash of the ENS name using the `namehash` function from the `@ethersproject/hash` library. If the namehash calculation fails, the function returns an object with a `loading` property set to `true` and a `contenthash` property set to `null`.\n\nThe function then uses the `useENSRegistrarContract` and `useSingleCallResult` hooks from the `useContract` and `multicall` modules, respectively, to retrieve the resolver contract address associated with the ENS name. The `useENSRegistrarContract` hook returns the ENS registrar contract, which is used to look up the resolver contract address associated with the ENS name. The `useSingleCallResult` hook is used to call the `resolver` function on the registrar contract with the namehash of the ENS name as an argument. The result of this call is the resolver contract address associated with the ENS name.\n\nIf the resolver contract address is zero (i.e., the ENS name is not registered), the function returns an object with a `loading` property set to `true` and a `contenthash` property set to `null`. Otherwise, the function uses the `useENSResolverContract` hook to retrieve the resolver contract associated with the resolver contract address. The `useENSResolverContract` hook returns the resolver contract, which is used to look up the contenthash associated with the ENS name. The `useSingleCallResult` hook is used to call the `contenthash` function on the resolver contract with the namehash of the ENS name as an argument. The result of this call is the contenthash associated with the ENS name.\n\nThe function returns an object with a `loading` property set to `true` if either the resolver address or contenthash is still loading, and a `contenthash` property set to the contenthash associated with the ENS name if it is available, or `null` otherwise.\n\nThis function can be used in the larger project to retrieve the contenthash associated with an ENS name, which can be used to retrieve IPFS content or other metadata associated with the name. For example, the contenthash could be used to retrieve a website hosted on IPFS associated with the ENS name. An example usage of this function is as follows:\n\n```\nimport useENSContentHash from './useENSContentHash'\n\nfunction MyComponent({ ensName }) {\n const { loading, contenthash } = useENSContentHash(ensName)\n\n if (loading) {\n return Loading...
\n }\n\n if (!contenthash) {\n return No contenthash found for {ensName}
\n }\n\n // Use contenthash to retrieve IPFS content or other metadata\n return Contenthash: {contenthash}
\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a custom React hook called `useENSContentHash` that performs a lookup for an ENS name to find its contenthash.\n\n2. What other custom hooks are being used in this code?\n- This code imports and uses two other custom hooks called `useENSRegistrarContract` and `useENSResolverContract` from the `useContract` module, as well as `useSingleCallResult` from the `multicall/hooks` module.\n\n3. What is the expected input and output of the `useENSContentHash` hook?\n- The `useENSContentHash` hook expects an optional string parameter called `ensName` and returns an object with two properties: `loading` (a boolean indicating whether the hook is currently loading data) and `contenthash` (a string or null value representing the contenthash of the ENS name).",
- "checksum": "30d68c69922a67d7716c7cb568bb147d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useENSName.json b/.autodoc/docs/json/core/src/hooks/useENSName.json
deleted file mode 100644
index d5b1b4868..000000000
--- a/.autodoc/docs/json/core/src/hooks/useENSName.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useENSName.ts",
- "filePath": "core/src/hooks/useENSName.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useENSName.ts",
- "summary": "The code is a React hook that performs a reverse lookup for an Ethereum address to find its corresponding ENS name. ENS (Ethereum Name Service) is a decentralized naming system built on the Ethereum blockchain that maps human-readable names to Ethereum addresses. \n\nThe hook takes an optional `address` parameter and returns an object with two properties: `ENSName` and `loading`. `ENSName` is the ENS name corresponding to the given `address`, or `null` if the name cannot be found. `loading` is a boolean that indicates whether the hook is currently loading data.\n\nThe hook uses several other hooks and functions to perform its task. `useDebounce` is used to debounce the `address` parameter to avoid making too many requests to the ENS registry. `useMemo` is used to memoize the `ensNodeArgument` variable, which is an array containing the ENS node hash for the reverse lookup. `useENSRegistrarContract` and `useENSResolverContract` are custom hooks that return instances of the ENS registrar and resolver contracts, respectively. Finally, `useSingleCallResult` is used to call the `resolver` and `name` functions on the resolver contract and retrieve their results.\n\nOverall, this hook provides a convenient way to look up ENS names for Ethereum addresses in a React application. It can be used in conjunction with other hooks and components to build more complex applications that interact with the Ethereum blockchain. For example, it could be used to display human-readable names for Ethereum addresses in a wallet application or to verify that a user has control over a particular ENS name. \n\nExample usage:\n\n```jsx\nimport useENSName from './useENSName'\n\nfunction MyComponent({ address }) {\n const { ENSName, loading } = useENSName(address)\n\n if (loading) {\n return Loading...
\n }\n\n if (ENSName) {\n return {ENSName}
\n }\n\n return No ENS name found for {address}
\n}\n```",
- "questions": "1. What is the purpose of this code?\n \n This code is a custom hook called `useENSName` that performs a reverse lookup for an Ethereum address to find its corresponding ENS name.\n\n2. What external libraries or dependencies does this code rely on?\n \n This code relies on several external libraries and dependencies, including `@ethersproject/address`, `@ethersproject/hash`, `useDebounce`, `react`, and `useSingleCallResult`.\n\n3. What is the expected input and output of this code?\n \n The expected input of this code is a string representing an Ethereum address, which is an optional parameter. The expected output is an object with two properties: `ENSName`, which is a string representing the corresponding ENS name of the input address, and `loading`, which is a boolean indicating whether the ENS name is currently being loaded.",
- "checksum": "69f6722e8cee2b9f727b6bb308d360d2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useERC20Permit.json b/.autodoc/docs/json/core/src/hooks/useERC20Permit.json
deleted file mode 100644
index 752673482..000000000
--- a/.autodoc/docs/json/core/src/hooks/useERC20Permit.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useERC20Permit.ts",
- "filePath": "core/src/hooks/useERC20Permit.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useERC20Permit.ts",
- "summary": "The code is a TypeScript module that exports three functions: `useERC20Permit`, `useV2LiquidityTokenPermit`, and `useERC20PermitFromTrade`. The module imports several dependencies, including `@zoolabs/zdk`, `react`, and `@ethersproject/bytes`. \n\nThe `useERC20Permit` function is a React hook that returns an object with three properties: `state`, `signatureData`, and `gatherPermitSignature`. The function takes three arguments: `currencyAmount`, `spender`, and `overridePermitInfo`. The `currencyAmount` argument is an object that represents the amount of a currency to be approved for spending. The `spender` argument is a string that represents the Ethereum address of the account that will be allowed to spend the approved currency. The `overridePermitInfo` argument is an optional object that provides additional information about the permit. \n\nThe `useV2LiquidityTokenPermit` function is a wrapper around `useERC20Permit` that provides default values for the `overridePermitInfo` argument. \n\nThe `useERC20PermitFromTrade` function is a helper function that takes a `V2Trade` object and an allowed slippage percentage as arguments. The function returns the result of calling `useERC20Permit` with the maximum amount of currency that can be spent in the trade and the `spender` argument set to the trade object. \n\nThe module also defines several constants, interfaces, and types, including `PermitType`, `PERMIT_VALIDITY_BUFFER`, `PermitInfo`, `PERMITTABLE_TOKENS`, `UseERC20PermitState`, `BaseSignatureData`, `StandardSignatureData`, `AllowedSignatureData`, `SignatureData`, `EIP712_DOMAIN_TYPE`, `EIP712_DOMAIN_TYPE_NO_VERSION`, `EIP2612_TYPE`, and `PERMIT_ALLOWED_TYPE`. \n\nThe `PERMITTABLE_TOKENS` object is a mapping of Ethereum chain IDs to objects that map token addresses to `PermitInfo` objects. The `PermitInfo` object contains information about the type of permit required for the token, such as the name of the token and the version of the permit. \n\nThe `useERC20Permit` function uses the `useActiveWeb3React` hook to get the current Ethereum account and chain ID. It then uses the `useEIP2612Contract` hook to get the contract object for the token. The function also uses the `useIsArgentWallet` hook to determine if the user is using an Argent wallet. \n\nThe function then checks if all the required arguments are present and returns an object with `state` set to `NOT_APPLICABLE` if any of the arguments are missing. If the required arguments are present, the function checks if the token supports the permit type required by the `PermitInfo` object. If the token does not support the permit type, the function returns an object with `state` set to `NOT_APPLICABLE`. \n\nIf the token supports the permit type, the function gets the nonce for the token and checks if it is valid. If the nonce is not valid, the function returns an object with `state` set to `LOADING`. If the nonce is valid, the function checks if the signature data is valid. If the signature data is valid, the function returns an object with `state` set to `SIGNED`. If the signature data is not valid, the function returns an object with `state` set to `NOT_SIGNED`. \n\nIf the signature data is not valid, the function returns an object with `gatherPermitSignature` set to a function that gathers the permit signature. The function uses the `eth_signTypedData_v4` method to sign the permit data and sets the `signatureData` object with the signed data. \n\nOverall, this module provides a set of functions that can be used to generate permit signatures for ERC20 tokens. These functions are designed to be used in a React application and rely on several hooks to interact with the Ethereum blockchain.",
- "questions": "1. What is the purpose of the `useERC20Permit` function and how is it used?\n \n The `useERC20Permit` function is used to generate a permit signature for a given ERC20 token and spender. It takes in a `currencyAmount` and `spender` as arguments, and returns an object with `signatureData`, `state`, and `gatherPermitSignature` properties. The `signatureData` property contains the permit signature data, the `state` property indicates whether the permit has been signed or not, and the `gatherPermitSignature` property is a function that can be called to initiate the permit signature process.\n\n2. What is the purpose of the `PERMITTABLE_TOKENS` object and how is it used?\n \n The `PERMITTABLE_TOKENS` object is a mapping of token addresses to permit information for various chains. It is used to determine whether a given token is permit-enabled and what type of permit is required. The `useERC20Permit` function uses this object to determine the permit information for a given token.\n\n3. What is the purpose of the `useV2LiquidityTokenPermit` function and how is it used?\n \n The `useV2LiquidityTokenPermit` function is a specialized version of the `useERC20Permit` function that is used specifically for removing liquidity from a Uniswap V2 pool. It takes in a `liquidityAmount` and `spender` as arguments, and returns an object with `signatureData`, `state`, and `gatherPermitSignature` properties. The `signatureData` property contains the permit signature data, the `state` property indicates whether the permit has been signed or not, and the `gatherPermitSignature` property is a function that can be called to initiate the permit signature process.",
- "checksum": "a168218b8f82e9459a7c4c9bac3508b5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useEagerConnect.json b/.autodoc/docs/json/core/src/hooks/useEagerConnect.json
deleted file mode 100644
index aac900eb9..000000000
--- a/.autodoc/docs/json/core/src/hooks/useEagerConnect.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useEagerConnect.ts",
- "filePath": "core/src/hooks/useEagerConnect.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useEagerConnect.ts",
- "summary": "The code above is a custom React hook called `useEagerConnect` that is used to connect a user's wallet to a decentralized application (dApp). This hook is part of a larger project called \"zoo\" and is located in the \"zoo\" file. \n\nThe hook uses the `useEffect` and `useState` hooks from the React library, as well as the `useActiveWeb3React` hook from another custom hook file. It also imports the `injected` object from a `wallets` configuration file and the `isMobile` function from the `react-device-detect` library.\n\nThe `useEagerConnect` hook first calls the `useActiveWeb3React` hook to get the current web3 provider and whether or not the user is currently connected to a wallet. It then sets the `tried` state to `false` using the `useState` hook.\n\nThe first `useEffect` hook is used to check if the user is authorized to connect their wallet using the `injected` object. If the user is authorized, the `connector` is activated using the `activate` method with the `injected` object and `undefined` parameters. The third parameter is set to `true` to indicate that the connection should be persistent. If the user is not authorized, the hook checks if the user is on a mobile device and has the `ethereum` object available. If so, the `connector` is activated using the same parameters as before. If not, the `tried` state is set to `true`.\n\nThe second `useEffect` hook is used to update the `tried` state to `true` if the connection was successful and the `active` state is `true`.\n\nFinally, the `useEagerConnect` hook returns the `tried` state, which is used to determine whether or not the connection was successful.\n\nThis hook can be used in a larger project to automatically connect a user's wallet to a dApp when they visit the site. For example, the hook could be used in a decentralized exchange (DEX) to automatically connect the user's wallet and display their balances and trading history. \n\nExample usage:\n\n```\nimport useEagerConnect from './useEagerConnect'\n\nfunction MyComponent() {\n const triedToConnect = useEagerConnect()\n\n if (triedToConnect) {\n // display content that requires a wallet connection\n } else {\n // display loading or connection prompt\n }\n}\n```",
- "questions": "1. What is the purpose of this code?\n \n This code defines a custom React hook called `useEagerConnect` that attempts to connect to a web3 provider using the `injected` wallet configuration and returns a boolean value indicating whether the connection was attempted or not.\n\n2. What is the significance of the `useEffect` hooks in this code?\n \n The first `useEffect` hook runs only once on mount and attempts to connect to the web3 provider using the `injected` wallet configuration. The second `useEffect` hook runs whenever the `active` state variable changes and sets the `tried` state variable to `true` if the connection was successful.\n\n3. What is the purpose of the `isMobile` check in this code?\n \n The `isMobile` check is used to determine whether the user is accessing the application from a mobile device. If so, and if the `window.ethereum` object is available, the `injected` wallet configuration is used to attempt to connect to the web3 provider.",
- "checksum": "a6a671efef591df2b0bae6becea93c2e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useFarmRewards.json b/.autodoc/docs/json/core/src/hooks/useFarmRewards.json
deleted file mode 100644
index 5b0bcf854..000000000
--- a/.autodoc/docs/json/core/src/hooks/useFarmRewards.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useFarmRewards.ts",
- "filePath": "core/src/hooks/useFarmRewards.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useFarmRewards.ts",
- "summary": "The `useFarmRewards` function is a custom React hook that retrieves and processes data related to farms and their rewards on the SushiSwap decentralized exchange. The hook imports various functions and constants from other files in the project, including enums, graph services, and other custom hooks.\n\nThe function first retrieves the current chain ID using the `useActiveWeb3React` hook. It then uses this ID to fetch the user's positions in the farms using the `usePositions` hook. The function also retrieves the block number from one week ago using the `useBlock` hook.\n\nNext, the function fetches data on all farms using the `useFarms` hook, and extracts the addresses of the pairs involved in these farms. It then uses the `useSushiPairs` and `useKashiPairs` hooks to fetch data on the SushiSwap and Kashi pairs, respectively, that correspond to these addresses. The function also retrieves data on the average block time, the total allocation points for the MasterChef V1 contract, and the SUSHI rewards per block for this contract.\n\nThe function then retrieves the current prices of various tokens, including SUSHI, ETH, MATIC, STAKE, and ONE, using various `useXPrice` hooks. It calculates the number of blocks per day based on the average block time, and defines a `map` function that processes data for each farm.\n\nThe `map` function first checks whether the farm is based on a SushiSwap or Kashi pair, and retrieves the corresponding pair data. It then calculates the rewards for the farm based on the allocation points, SUSHI rewards per block, and other factors. The function also calculates the total value locked (TVL) for the farm, as well as the fee APY per hour, day, month, and year. It then calculates the ROI per block, as well as the reward APY per hour, day, month, and year. Finally, the function returns an object containing all of this data, as well as the original farm data and the user's position in the farm.\n\nThe `useFarmRewards` function returns an array of objects, where each object corresponds to a farm and contains all of the processed data described above. This data can be used to display information about the farms and their rewards to the user, as well as to make decisions about which farms to invest in. For example, the ROI and reward APY data can be used to compare the profitability of different farms, while the TVL data can be used to assess the liquidity of each farm.",
- "questions": "1. What is the purpose of this code?\n- This code defines a custom React hook called `useFarmRewards` that fetches data from various subgraphs and services to calculate rewards and other metrics for farms in the Zoo project.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `@zoolabs/zdk`, `@ethersproject/address`, `react`, and various packages from the `../features`, `../services`, and `../functions` directories.\n\n3. What data is being fetched and processed by this code?\n- This code fetches data about farms, pairs, and rewards from various subgraphs and services, and processes this data to calculate metrics such as TVL, APR, and ROI for each farm. It also uses data from the `usePositions` hook to display information about the user's positions in each farm.",
- "checksum": "332eb785ef7a4847458fcf8c29775aa1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useFetchListCallback.json b/.autodoc/docs/json/core/src/hooks/useFetchListCallback.json
deleted file mode 100644
index fc87a552f..000000000
--- a/.autodoc/docs/json/core/src/hooks/useFetchListCallback.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useFetchListCallback.ts",
- "filePath": "core/src/hooks/useFetchListCallback.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useFetchListCallback.ts",
- "summary": "The code defines a custom React hook called `useFetchListCallback` that returns a function. This function takes a `listUrl` string as its argument and returns a Promise that resolves to a `TokenList` object. The `TokenList` object is imported from the `@uniswap/token-lists` package.\n\nThe `useFetchListCallback` hook uses several other hooks and functions to fetch and process the token list. The `useActiveWeb3React` hook is used to get the current Ethereum chain ID and provider library. The `useCallback` hook is used to memoize the `ensResolver` function, which resolves an ENS name to an IPFS content hash. The `useDispatch` hook is used to get the Redux store's dispatch function.\n\nThe `useFetchListCallback` function dispatches a `fetchTokenList.pending` action to the Redux store, which sets the `loading` state to `true`. It then calls the `getTokenList` function, passing in the `listUrl` and `ensResolver` functions. The `getTokenList` function fetches the token list from the specified URL and resolves any ENS names using the `ensResolver` function. If the fetch is successful, the `getTokenList` function returns a `TokenList` object, which is then dispatched to the Redux store using the `fetchTokenList.fulfilled` action. If the fetch fails, the `getTokenList` function throws an error, which is caught and re-thrown by the `useFetchListCallback` function after dispatching a `fetchTokenList.rejected` action to the Redux store.\n\nThe `useFetchListCallback` hook is intended to be used in other components to fetch and display token lists. For example, a token list selector component could use this hook to fetch a list of tokens and display them in a dropdown menu. The `sendDispatch` argument can be used to prevent the `fetchTokenList` actions from being dispatched in certain cases, such as when the hook is used for list search or when an unsupported list is requested.",
- "questions": "1. What is the purpose of this code?\n- This code defines a custom hook called `useFetchListCallback` that returns a function for fetching a token list from a given URL and resolving ENS names to content hashes.\n\n2. What dependencies does this code have?\n- This code imports several dependencies, including `AppDispatch` from a local `state` module, `ChainId` from the `@zoolabs/zdk` package, `TokenList` from the `@uniswap/token-lists` package, and various functions from local `state` and `functions` modules.\n\n3. What is the error message thrown if the chain ID is not `MAINNET` and no network library is available?\n- The error message thrown is \"Could not construct mainnet ENS resolver\".",
- "checksum": "3b4509328fecbf4680d90ac04a1d1496"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useFuse.json b/.autodoc/docs/json/core/src/hooks/useFuse.json
deleted file mode 100644
index 31509bb30..000000000
--- a/.autodoc/docs/json/core/src/hooks/useFuse.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useFuse.ts",
- "filePath": "core/src/hooks/useFuse.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useFuse.ts",
- "summary": "The code above is a custom React hook that provides fuzzy search functionality using the Fuse.js library. The hook is called `useFuse` and takes in two parameters: `data` and `options`. `data` is an array of objects that will be searched, and `options` is an object that contains options for the Fuse.js library.\n\nThe `useFuse` hook returns an object with four properties: `result`, `search`, `term`, and `reset`. `result` is an array of objects that match the search term. `search` is a function that takes in a string and sets the search term. `term` is the current search term. `reset` is a function that resets the search term to an empty string.\n\nThe `useFuse` hook uses the `useState` hook to keep track of the current search term. It then creates a new instance of the Fuse.js library using the `data` and `options` parameters. The `fuzzySearch` function is called with the `fuse`, `data`, and `term` parameters. The `fuzzySearch` function returns an array of objects that match the search term. If the search term is empty, the `data` parameter is returned.\n\nThe `useFuse` hook is useful for implementing search functionality in a React application. It provides a simple interface for searching through an array of objects using fuzzy search. Here is an example of how to use the `useFuse` hook:\n\n```\nimport useFuse from './useFuse'\n\nconst data = [\n { name: 'John Doe', age: 30 },\n { name: 'Jane Doe', age: 25 },\n { name: 'Bob Smith', age: 40 },\n]\n\nconst options = {\n keys: ['name'],\n}\n\nfunction App() {\n const { result, search, term, reset } = useFuse({ data, options })\n\n return (\n \n search(e.target.value)} />\n \n
\n )\n}\n```\n\nIn this example, the `data` parameter is an array of objects with `name` and `age` properties. The `options` parameter specifies that the `name` property should be used for searching. The `useFuse` hook is called with these parameters, and the resulting object is destructured into `result`, `search`, `term`, and `reset`. The `result` array is mapped over to display the names of the matching objects. The `input` element is used to set the search term, and the `button` element is used to reset the search term.",
- "questions": "1. What is the purpose of the `Fuse` library being imported?\n - The `Fuse` library is being used for fuzzy searching functionality.\n \n2. What is the purpose of the `useFuse` function?\n - The `useFuse` function is a custom hook that takes in data and options, and returns an object with search functionality and search results based on fuzzy search using the `Fuse` library.\n \n3. What is the purpose of the `reset` function being returned by the `useFuse` hook?\n - The `reset` function allows the user to reset the search term to an empty string, effectively resetting the search results to the original data.",
- "checksum": "c201a9c15f2ecb6642cb20736819813b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useHttpLocations.json b/.autodoc/docs/json/core/src/hooks/useHttpLocations.json
deleted file mode 100644
index c17b21b91..000000000
--- a/.autodoc/docs/json/core/src/hooks/useHttpLocations.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useHttpLocations.ts",
- "filePath": "core/src/hooks/useHttpLocations.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useHttpLocations.ts",
- "summary": "The code in this file is a module that exports a custom hook called `useHttpLocations`. This hook takes in a single argument, `uri`, which is a string that represents a Uniform Resource Identifier (URI). The purpose of this hook is to convert the given URI into one or more HTTP locations that can be used to retrieve content from a server.\n\nTo achieve this, the hook first imports two functions from another module: `contenthashToUri` and `uriToHttp`. These functions are used to convert a content hash (a unique identifier for content stored on a decentralized network) to a URI, and then to convert that URI to an HTTP location.\n\nThe hook also imports another function called `parseENSAddress` from a different module. This function is used to parse an Ethereum Name Service (ENS) address from the given URI. ENS is a decentralized naming system that maps human-readable names to machine-readable identifiers, such as Ethereum addresses or content hashes.\n\nThe hook then uses the `useMemo` hook from the React library to memoize the result of parsing the ENS address from the given URI. This means that the ENS address will only be parsed once, and subsequent calls to the hook with the same URI will reuse the previously parsed result.\n\nNext, the hook calls another custom hook called `useENSContentHash`, passing in the parsed ENS address. This hook is responsible for resolving the content hash associated with the given ENS address. If the ENS address is not valid or does not have a content hash associated with it, the `useENSContentHash` hook will return an empty object.\n\nFinally, the `useHttpLocations` hook returns an array of HTTP locations based on the given URI and the resolved content hash. If the URI contains a valid ENS address, the hook will use the resolved content hash to generate an HTTP location using the `contenthashToUri` and `uriToHttp` functions. If the URI does not contain a valid ENS address, the hook will simply use the `uriToHttp` function to generate an HTTP location from the URI.\n\nOverall, this hook is useful for resolving content stored on a decentralized network using human-readable ENS addresses, and converting those addresses to HTTP locations that can be used to retrieve the content from a server. Here is an example of how this hook might be used in a larger project:\n\n```\nimport useHttpLocations from './useHttpLocations'\n\nfunction MyComponent({ uri }) {\n const httpLocations = useHttpLocations(uri)\n\n return (\n - \n {result.map((item) => (\n
- {item.name} \n ))}\n
\n {httpLocations.map((location) => (\n \n ))}\n
\n )\n}\n```\n\nIn this example, the `MyComponent` component takes in a `uri` prop, which is passed to the `useHttpLocations` hook to generate an array of HTTP locations. The component then maps over this array to render one or more images, each with a `src` attribute set to an HTTP location.",
- "questions": "1. What does this code do?\n This code exports a function called `useHttpLocations` that takes a URI string as input and returns an array of HTTP locations. It uses other functions from the `convert` and `ens` modules to convert content hashes and parse ENS addresses.\n\n2. What is the purpose of the `useMemo` hook in this code?\n The `useMemo` hook is used to memoize the result of a function call and prevent unnecessary re-renders in React. In this code, it is used to memoize the parsed ENS address based on the input URI.\n\n3. What happens if the input URI is undefined?\n If the input URI is undefined, the function returns an empty array.",
- "checksum": "0914134a60be4814250199ccfe312cee"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useInactiveListener.json b/.autodoc/docs/json/core/src/hooks/useInactiveListener.json
deleted file mode 100644
index 6c77a36f3..000000000
--- a/.autodoc/docs/json/core/src/hooks/useInactiveListener.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useInactiveListener.ts",
- "filePath": "core/src/hooks/useInactiveListener.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useInactiveListener.ts",
- "summary": "The `useInactiveListener` function is a React hook that is used to log a user in and out of a web3 wallet after checking what network they are on. It is imported from the `useActiveWeb3React` hook and the `wallets` configuration file. \n\nThe hook uses the `useEffect` hook to listen for changes in the user's wallet and network. If the user is not active, has no errors, and the `suppress` flag is not set to true, the hook will activate the `injected` wallet from the `wallets` configuration file. \n\nThe `ethereum.on` method is used to listen for changes in the user's wallet and network. If the user changes their network, the `handleChainChanged` function is called, which activates the `injected` wallet. If the user changes their account, the `handleAccountsChanged` function is called, which also activates the `injected` wallet. \n\nThe `useInactiveListener` hook is used in the larger project to ensure that the user is logged in and using the correct wallet for the current network. It is particularly useful for applications that require the user to interact with a blockchain, as it ensures that the user is using the correct wallet and network. \n\nExample usage:\n\n```\nimport useInactiveListener from './useInactiveListener'\n\nfunction MyComponent() {\n useInactiveListener()\n\n // rest of component code\n}\n```",
- "questions": "1. What is the purpose of this code and how is it used in the `zoo` project?\n- This code defines a React hook called `useInactiveListener` that is used for logging users in and out based on their network. It is likely used in the authentication or wallet management features of the `zoo` project.\n\n2. What is the significance of the `useEffect` hook and how does it work in this code?\n- The `useEffect` hook is used to run side effects in a React component. In this code, it is used to listen for changes in the user's network and accounts using the `ethereum` object provided by the browser. When a change is detected, the `connector` is activated to log the user in or out.\n\n3. What is the purpose of the `suppress` parameter and how is it used in this code?\n- The `suppress` parameter is used to prevent the hook from running in certain cases. If `suppress` is set to `true`, the hook will not listen for changes in the user's network or accounts. This parameter is likely used to control the behavior of the hook in different parts of the `zoo` project.",
- "checksum": "390f94d0797a847514811475c89340fe"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useInterval.json b/.autodoc/docs/json/core/src/hooks/useInterval.json
deleted file mode 100644
index 931200e10..000000000
--- a/.autodoc/docs/json/core/src/hooks/useInterval.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useInterval.ts",
- "filePath": "core/src/hooks/useInterval.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useInterval.ts",
- "summary": "The code above defines a custom React hook called `useInterval`. This hook allows a function to be executed repeatedly at a specified interval. The hook takes three arguments: a callback function to be executed, a delay in milliseconds between each execution, and a boolean value indicating whether the first execution should occur immediately or after the first interval has elapsed.\n\nThe `useInterval` hook uses the `useRef` and `useEffect` hooks from the React library. The `useRef` hook creates a reference to the callback function that is passed as an argument to the hook. The `useEffect` hook is used to set up the interval and execute the callback function at the specified interval.\n\nThe first `useEffect` hook is used to update the reference to the callback function whenever it changes. This ensures that the latest version of the function is used when the interval is executed.\n\nThe second `useEffect` hook is used to set up the interval. It creates a function called `tick` that executes the callback function stored in the `savedCallback` reference. If the delay is not null, the `tick` function is executed immediately if the `leading` argument is true. Then, the `setInterval` function is called to execute the `tick` function at the specified interval. The `clearInterval` function is returned from the `useEffect` hook to stop the interval when the component using the hook is unmounted.\n\nThis hook can be used in a variety of scenarios where a function needs to be executed repeatedly at a specified interval. For example, it could be used to create a countdown timer or to periodically update data from an API. Here is an example of how the `useInterval` hook could be used to create a simple countdown timer:\n\n```\nimport React, { useState } from 'react'\nimport useInterval from './useInterval'\n\nfunction CountdownTimer() {\n const [count, setCount] = useState(10)\n\n useInterval(() => {\n setCount(count - 1)\n }, 1000)\n\n return (\n \n
\n )\n}\n```\n\nIn this example, the `useInterval` hook is used to decrement the `count` state variable every second. The countdown timer is displayed using the `h1` element.",
- "questions": "1. What does this code do?\n- This code exports a custom React hook called `useInterval` that sets up an interval to repeatedly call a provided callback function with a specified delay.\n\n2. What is the purpose of the `useRef` hook in this code?\n- The `useRef` hook is used to create a mutable reference to the latest callback function passed to the `useInterval` hook, which can be accessed across multiple renders of the component.\n\n3. What is the significance of the `leading` parameter in the `useInterval` function?\n- The `leading` parameter determines whether the first call to the callback function should happen immediately (if `true`) or after the first delay interval (if `false`).",
- "checksum": "e68a27d8bb4ee2c52c8f64fbe432b050"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useIntervalTransaction.json b/.autodoc/docs/json/core/src/hooks/useIntervalTransaction.json
deleted file mode 100644
index 6a3af2175..000000000
--- a/.autodoc/docs/json/core/src/hooks/useIntervalTransaction.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useIntervalTransaction.ts",
- "filePath": "core/src/hooks/useIntervalTransaction.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useIntervalTransaction.ts",
- "summary": "The code defines a custom React hook called `useInterval` that allows for the execution of a given callback function at a specified interval. The hook takes in three parameters: `callback`, `delay`, and `leading`. \n\nThe `callback` parameter is a function that will be executed at the specified interval. The `delay` parameter is the time in milliseconds between each execution of the `callback` function. If `delay` is set to `null`, the interval will not be set up. The `leading` parameter is a boolean that determines whether the `callback` function should be executed immediately upon setting up the interval or after the first interval has passed. \n\nThe hook uses the `useRef` hook to create a reference to the `callback` function that is passed in. This reference is stored in the `savedCallback` variable. The `useEffect` hook is then used to update the `savedCallback` reference whenever the `callback` parameter changes. \n\nThe `useEffect` hook is also used to set up the interval. The `tick` function is defined to execute the `savedCallback` function if it exists. If `delay` is not `null`, the `tick` function is called immediately if `leading` is set to `true`. The `setInterval` function is then called to set up the interval, and the `clearInterval` function is returned in a cleanup function to clear the interval when the component unmounts. \n\nThe `useInterval` hook can be used in a larger project to execute a function at a specified interval. For example, it could be used to periodically fetch data from an API or to update the UI with new information. Here is an example of how the `useInterval` hook could be used to update the time displayed in a clock component every second:\n\n```\nimport React, { useState } from 'react'\nimport useInterval from './useInterval'\n\nexport default function Clock() {\n const [time, setTime] = useState(new Date())\n\n useInterval(() => {\n setTime(new Date())\n }, 1000)\n\n return (\n {count}
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code and how is it used in the `zoo` project?\n- This code defines a custom hook called `useInterval` that sets up an interval to repeatedly call a provided callback function. It is likely used throughout the `zoo` project to handle timed updates or animations.\n\n2. What is the significance of the `useTransactionStatus` hook being imported and used in this code?\n- The `useTransactionStatus` hook is likely used to determine whether or not the interval should be paused or stopped based on the current state of any ongoing transactions in the `zoo` project.\n\n3. What is the purpose of the `leading` parameter in the `useInterval` function?\n- The `leading` parameter determines whether or not the callback function should be called immediately upon setting up the interval, before any delay has passed. If `leading` is `false`, the first call to the callback will occur after the specified delay has passed.",
- "checksum": "001451f572f2990df4f1b3227bcf6869"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useIsArgentWallet.json b/.autodoc/docs/json/core/src/hooks/useIsArgentWallet.json
deleted file mode 100644
index 481bcb945..000000000
--- a/.autodoc/docs/json/core/src/hooks/useIsArgentWallet.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useIsArgentWallet.ts",
- "filePath": "core/src/hooks/useIsArgentWallet.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useIsArgentWallet.ts",
- "summary": "The code above is a custom hook called `useIsArgentWallet` that is used to detect whether the current user is using an Argent wallet. The Argent wallet is a smart contract wallet that allows users to manage their Ethereum assets and interact with decentralized applications.\n\nThe hook imports several other hooks and functions from different files in the project. The `useActiveWeb3React` hook is used to get the current user's Ethereum account and network information. The `useArgentWalletDetectorContract` function is used to get the smart contract instance of the Argent wallet detector. The `useMemo` hook is used to memoize the inputs to the `useSingleCallResult` hook.\n\nThe `useSingleCallResult` hook is used to call the `isArgentWallet` function on the Argent wallet detector smart contract. The `inputs` array is passed as an argument to the `useSingleCallResult` hook, which includes the current user's Ethereum account. The `NEVER_RELOAD` constant is also passed as an argument to the `useSingleCallResult` hook, which ensures that the function is only called once and the result is cached.\n\nThe `useIsArgentWallet` hook returns a boolean value that indicates whether the current user is using an Argent wallet. The `call` variable is the result of the `useSingleCallResult` hook, which includes the result of the `isArgentWallet` function call. The `?.` operator is used to safely access the `result` array and the first element of the array, which is a boolean value that indicates whether the current user is using an Argent wallet. If the `result` array is undefined or empty, the hook returns `false`.\n\nThis hook can be used in other parts of the project to conditionally render certain components or features based on whether the user is using an Argent wallet. For example, a dApp could use this hook to display a message or offer special features to users who are using an Argent wallet. \n\nExample usage:\n\n```\nimport useIsArgentWallet from './useIsArgentWallet'\n\nfunction MyComponent() {\n const isArgentWallet = useIsArgentWallet()\n\n return (\n {time.toLocaleTimeString()}
\n\n {isArgentWallet ?
\n )\n}\n```",
- "questions": "1. What is the purpose of the `useIsArgentWallet` function?\n- The `useIsArgentWallet` function is used to determine if the current user's wallet is an Argent wallet or not.\n\n2. What is the `useSingleCallResult` function and where is it imported from?\n- The `useSingleCallResult` function is imported from the `../state/multicall/hooks` file and is used to make a single call to a contract method and return the result.\n\n3. What is the `useMemo` hook used for in this code?\n- The `useMemo` hook is used to memoize the `inputs` array, which is passed as an argument to the `useSingleCallResult` function. This ensures that the `inputs` array is only recomputed when the `account` value changes.",
- "checksum": "5938cb4ac5151aeef0433b5440006373"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useIsSwapUnsupported.json b/.autodoc/docs/json/core/src/hooks/useIsSwapUnsupported.json
deleted file mode 100644
index f0faddfcb..000000000
--- a/.autodoc/docs/json/core/src/hooks/useIsSwapUnsupported.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useIsSwapUnsupported.ts",
- "filePath": "core/src/hooks/useIsSwapUnsupported.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useIsSwapUnsupported.ts",
- "summary": "The code above is a TypeScript module that exports a single function called `useIsSwapUnsupported`. This function takes two optional parameters, `currencyIn` and `currencyOut`, which are both of type `Currency`. The purpose of this function is to determine whether a given input or output currency can be traded in the interface. \n\nThe function makes use of the `useUnsupportedTokens` hook from the `./Tokens` module, which returns a dictionary of unsupported tokens. The function then uses the `useMemo` hook from the `react` library to memoize the result of the function. \n\nThe function checks whether the `unsupportedTokens` dictionary has been loaded and whether either the `currencyIn` or `currencyOut` is a token that is on the list of unsupported tokens. If either of these conditions is true, the function returns `true`, indicating that the swap is unsupported. Otherwise, it returns `false`.\n\nThis function is likely used in the larger project to determine whether a given swap is supported by the interface. It could be used, for example, to disable a swap button or display a warning message to the user if the swap is not supported. \n\nHere is an example of how this function could be used in a React component:\n\n```jsx\nimport { useIsSwapUnsupported } from '@zoolabs/zoo'\n\nfunction SwapButton({ currencyIn, currencyOut }) {\n const isUnsupported = useIsSwapUnsupported(currencyIn, currencyOut)\n\n return (\n \n )\n}\n```\n\nIn this example, the `SwapButton` component takes two currency props, `currencyIn` and `currencyOut`. It then calls the `useIsSwapUnsupported` function to determine whether the swap is unsupported. If it is unsupported, the button is disabled and displays the text \"Unsupported\". Otherwise, the button is enabled and displays the text \"Swap\".",
- "questions": "1. What is the purpose of the `useIsSwapUnsupported` function?\n- The function returns a boolean indicating whether the input currency or output currency cannot be traded in the interface.\n\n2. What is the `useMemo` hook used for in this code?\n- The `useMemo` hook is used to memoize the result of the function and avoid unnecessary re-renders.\n\n3. What is the `useUnsupportedTokens` hook used for in this code?\n- The `useUnsupportedTokens` hook is used to retrieve a list of unsupported tokens from the application state.",
- "checksum": "ea328d32d6709d019f7ba821bd8af040"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useIsWindowVisible.json b/.autodoc/docs/json/core/src/hooks/useIsWindowVisible.json
deleted file mode 100644
index 05d12f29d..000000000
--- a/.autodoc/docs/json/core/src/hooks/useIsWindowVisible.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useIsWindowVisible.ts",
- "filePath": "core/src/hooks/useIsWindowVisible.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useIsWindowVisible.ts",
- "summary": "The code above is a React hook that determines whether the window is currently visible to the user. It does this by checking the `visibilityState` property of the `document` object. If the `visibilityState` property is not supported or if it is not equal to 'hidden', then the window is considered visible.\n\nThe hook is exported as a default function called `useIsWindowVisible()`. It uses the `useState` hook to keep track of whether the window is currently visible or not. The initial state is set to the result of the `isWindowVisible()` function, which checks the `visibilityState` property of the `document` object.\n\nThe `useCallback` hook is used to create a memoized version of the `listener` function, which updates the `focused` state whenever the `visibilitychange` event is fired. The `useEffect` hook is used to add and remove the `listener` function as an event listener for the `visibilitychange` event. If the `visibilityState` property is not supported, then the `useEffect` hook returns `undefined` to indicate that there is no cleanup needed.\n\nThis hook can be used in a larger project to conditionally render components based on whether the window is visible or not. For example, if a video is playing and the window becomes hidden, the video could be paused until the window becomes visible again. Here is an example of how this hook could be used:\n\n```\nimport React from 'react'\nimport useIsWindowVisible from './useIsWindowVisible'\n\nfunction VideoPlayer() {\n const isWindowVisible = useIsWindowVisible()\n\n return (\n \n )\n}\n```\n\nIn this example, the `autoPlay` prop of the `video` element is set to the value of `isWindowVisible`, which will be `true` if the window is visible and `false` if it is not. This ensures that the video will only play when the window is visible.",
- "questions": "1. What is the purpose of the `useIsWindowVisible` function?\n- The `useIsWindowVisible` function returns a boolean value indicating whether the window is currently visible to the user.\n\n2. What is the significance of the `VISIBILITY_STATE_SUPPORTED` constant?\n- The `VISIBILITY_STATE_SUPPORTED` constant is used to check if the `visibilityState` property is supported by the current document. If it is not supported, the `isWindowVisible` function always returns `true`.\n\n3. Why is the `listener` function wrapped in a `useCallback` hook?\n- The `listener` function is wrapped in a `useCallback` hook to memoize the function and prevent unnecessary re-renders of the component. This is because the `listener` function is used as a dependency in the `useEffect` hook.",
- "checksum": "de35aa6505590ef8fee57e22a49a3234"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useKashiApproveCallback.json b/.autodoc/docs/json/core/src/hooks/useKashiApproveCallback.json
deleted file mode 100644
index 6897389ca..000000000
--- a/.autodoc/docs/json/core/src/hooks/useKashiApproveCallback.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useKashiApproveCallback.ts",
- "filePath": "core/src/hooks/useKashiApproveCallback.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useKashiApproveCallback.ts",
- "summary": "The `useKashiApproveCallback` function is a React hook that returns a tuple of values and functions that can be used to manage the approval state of a Kashi contract. Kashi is a lending and borrowing platform built on top of the Aave protocol. The hook is used to manage the approval state of the user's BentoBox contract to interact with Kashi contracts.\n\nThe hook imports several functions and constants from other files, including `KashiCooker`, `signMasterContractApproval`, `useActiveWeb3React`, `useBentoBoxContract`, `useBentoMasterContractAllowed`, `useKashiApprovalPending`, `useTransactionAdder`, `AddressZero`, `HashZero`, and `splitSignature`. \n\nThe hook defines an enum `BentoApprovalState` with five possible values: `UNKNOWN`, `NOT_APPROVED`, `PENDING`, `FAILED`, and `APPROVED`. It also defines an interface `KashiPermit` with four properties: `account`, `masterContract`, `v`, `r`, and `s`. It also defines an enum `BentoApproveOutcome` with four possible values: `SUCCESS`, `REJECTED`, `FAILED`, and `NOT_READY`. Finally, it defines a type `BentoApproveResult` with two properties: `outcome` of type `BentoApproveOutcome` and `permit` of type `KashiPermit`.\n\nThe hook returns a tuple with five values: `approvalState` of type `BentoApprovalState`, `approveKashiFallback` of type `boolean`, `kashiPermit` of type `KashiPermit | undefined`, `onApprove` of type `() => void`, and `onCook` of type `(pair: any, execute: (cooker: KashiCooker) => PromiseYou are using an Argent wallet!
:You are not using an Argent wallet.
}\n\n \n
\n )\n}\n```\n\nExample usage of `useLastTruthy` hook:\n\n```\nimport { useState } from 'react'\nimport useLastTruthy from './useLastTruthy'\n\nfunction Dropdown() {\n const [selectedOption, setSelectedOption] = useState(null)\n const lastSelectedOption = useLastTruthy(selectedOption)\n\n function handleOptionSelect(event) {\n setSelectedOption(event.target.value)\n }\n\n return (\n Last valid input: {lastValidInput}
\n\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `useLast` function?\n- The `useLast` function returns the last value of type T that passes a filter function.\n\n2. What is the purpose of the `useEffect` hook in the `useLast` function?\n- The `useEffect` hook is used to update the `last` state variable whenever the `value` or `filterFn` dependencies change.\n\n3. What is the purpose of the `isDefined` function?\n- The `isDefined` function is a type guard that checks if a value is not null or undefined and returns a boolean value. It is used in the `useLastTruthy` function to filter out null and undefined values.",
- "checksum": "6e9ae75fd7cf06c6e327e3ad0ee1acb2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useLimitOrderApproveCallback.json b/.autodoc/docs/json/core/src/hooks/useLimitOrderApproveCallback.json
deleted file mode 100644
index 4f2a53adf..000000000
--- a/.autodoc/docs/json/core/src/hooks/useLimitOrderApproveCallback.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useLimitOrderApproveCallback.ts",
- "filePath": "core/src/hooks/useLimitOrderApproveCallback.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useLimitOrderApproveCallback.ts",
- "summary": "The `useLimitOrderApproveCallback` function is a React hook that provides a callback function to approve a limit order and execute a deposit into the BentoBox smart contract. The BentoBox is a smart contract that allows for efficient and gas-saving token transfers and storage. The function is part of the larger `zoo` project and uses several other functions and hooks from the project.\n\nThe function first imports several constants and functions from other modules, including the `STOP_LIMIT_ORDER_ADDRESS` and `getSignatureWithProviderBentobox` functions. It also imports several hooks from the `zoo` project, including `useActiveWeb3React`, `useLimitOrderState`, and `useTransactionAdder`.\n\nThe function defines two enums, `BentoApprovalState` and `BentoApproveOutcome`, which are used to represent the different states of the approval process and the possible outcomes of the approval function.\n\nThe main logic of the function is in the `useLimitOrderApproveCallback` function, which defines several constants and hooks, including the `account`, `library`, and `chainId` from the `useActiveWeb3React` hook, and the `bentoBoxContract` and `limitOrderHelperContract` from the `useContract` hook. It also defines several state variables, including `fallback`, which is used to handle cases where the user rejects the signature request, and `limitOrderPermit`, which is used to store the signature data for the limit order approval.\n\nThe function then defines an `approve` function that checks the current approval status and attempts to approve the limit order if it is not already approved. The function uses the `getSignatureWithProviderBentobox` function to generate a signature for the approval request and returns the signature data and encoded function data for the `setMasterContractApproval` function.\n\nThe `onApprove` function is called when the user clicks the \"Approve\" button on the limit order form. It first checks if the `fallback` flag is set, indicating that the user has already rejected the signature request. If so, it calls the `setMasterContractApproval` function directly with a gas limit of 0 to force the transaction to fail and trigger the fallback logic. Otherwise, it calls the `approve` function and sets the `limitOrderPermit` state variable if the approval is successful.\n\nThe `execute` function is called when the user clicks the \"Swap\" button on the limit order form. It first checks if the limit order is approved and if the user has sufficient funds in the BentoBox. If not, it adds the necessary transactions to the batch and executes them using the `batch` function of the `bentoBoxContract`. If the token is native and the limit order is not approved, it uses the `depositAndApprove` function of the `limitOrderHelperContract` to deposit the token and approve the limit order in a single transaction.\n\nOverall, the `useLimitOrderApproveCallback` function provides a convenient way for users to approve limit orders and execute deposits into the BentoBox smart contract. It uses several other functions and hooks from the `zoo` project and provides a flexible and efficient way to interact with the BentoBox.",
- "questions": "1. What is the purpose of this code?\n- This code defines a custom React hook called `useLimitOrderApproveCallback` that returns an array of values and functions related to approving and executing a limit order transaction using the BentoBox smart contract.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `@ethersproject/constants`, `@zoolabs/zdk`, `react`, `@ethersproject/address`, and several custom functions and hooks defined in other files within the `zoo` project.\n\n3. What is the purpose of the `BentoApprovalState` and `BentoApproveOutcome` enums?\n- These enums define possible states and outcomes related to approving a BentoBox master contract for a given user account. `BentoApprovalState` can be one of `UNKNOWN`, `NOT_APPROVED`, `PENDING`, `FAILED`, or `APPROVED`, while `BentoApproveOutcome` can be one of `SUCCESS`, `REJECTED`, `FAILED`, or `NOT_READY`. These enums are used to determine whether a user needs to approve the master contract and to handle different outcomes of the approval process.",
- "checksum": "2d188c4838439cc24286951846e630e2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useLimitOrders.json b/.autodoc/docs/json/core/src/hooks/useLimitOrders.json
deleted file mode 100644
index 265438c8a..000000000
--- a/.autodoc/docs/json/core/src/hooks/useLimitOrders.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useLimitOrders.ts",
- "filePath": "core/src/hooks/useLimitOrders.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useLimitOrders.ts",
- "summary": "The `useLimitOrders` function is a React hook that provides data on limit orders for a given user account and chain ID. It imports several dependencies from the `@zoolabs/zdk` and `@ethersproject/bignumber` libraries, as well as other custom hooks from the `.` and `./Tokens` files. \n\nThe function defines two interfaces: `State` and `OpenOrder`. `State` is an object that contains two properties, `pending` and `completed`, each of which is an object with properties for `page`, `maxPages`, `data`, `loading`, and `totalOrders`. `OpenOrder` is an object that contains properties for `tokenIn`, `tokenOut`, `filledPercent`, `limitOrder`, `status`, and `rate`. \n\nThe function also defines several helper functions. `denominator` is a function that takes an optional `decimals` argument (defaulting to 18) and returns the result of raising 10 to the power of `decimals` using the `JSBI` library. `viewUrl` is a string that represents the URL for fetching limit order data. `viewFetcher` is a function that takes several arguments and returns a Promise that fetches data from `viewUrl` using a POST request with a JSON body containing the `address`, `chainId`, `page`, and `pendingPage` parameters. \n\nThe main body of the function defines several constants and hooks. `useActiveWeb3React` is a custom hook that returns the current `account` and `chainId` values from the Web3 React context. `useLimitOrderContract` is a custom hook that returns the contract instance for the limit order contract. `useAllTokens` is a custom hook that returns an object containing all known tokens for the current chain ID. \n\nThe function also defines a `state` variable using the `useState` hook, which is an object with `pending` and `completed` properties that each contain an object with `page`, `maxPages`, `data`, `loading`, and `totalOrders` properties. It defines a `shouldFetch` variable using the `useMemo` hook, which is an array of values that determine whether or not to fetch data from `viewUrl`. It defines a `useSWR` hook that fetches data from `viewUrl` using `viewFetcher` and the `shouldFetch` variable. \n\nThe function defines two callback functions, `setPendingPage` and `setCompletedPage`, that update the `state` variable with a new `page` value for the `pending` and `completed` properties, respectively. It also defines an `useEffect` hook that updates the `state` variable with new data from the `ordersData` object returned by the `useSWR` hook. \n\nFinally, the function returns an object that contains the `state` variable, as well as `setPage` properties for the `pending` and `completed` properties that call the `setPendingPage` and `setCompletedPage` callback functions, respectively. It also returns a `mutate` property that can be used to manually trigger a re-fetch of the data. \n\nThis hook can be used in a larger project to display a user's limit orders and their status. For example, it could be used to display a table of open and completed orders with information such as the token pair, rate, and filled percentage. The `setPage` and `mutate` properties can be used to allow the user to navigate between pages of orders and manually refresh the data, respectively.",
- "questions": "1. What is the purpose of this code?\n- This code defines a custom React hook called `useLimitOrders` that fetches and transforms limit orders data from a server and returns it as state.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `@zoolabs/zdk`, `react`, `swr`, and `@ethersproject/bignumber`.\n\n3. What is the structure of the data returned by the `useLimitOrders` hook?\n- The `useLimitOrders` hook returns an object with two properties: `pending` and `completed`, each of which contains an object with `page`, `maxPages`, `data`, `loading`, and `totalOrders` properties. The `data` property is an array of `OpenOrder` objects, which contain information about a limit order, including the input and output tokens, the filled percentage, the order status, and the exchange rate.",
- "checksum": "e5c0bc7fa56732f14bf3cfe40e76ebc0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useMatchBreakpoints.json b/.autodoc/docs/json/core/src/hooks/useMatchBreakpoints.json
deleted file mode 100644
index dc94c1d5e..000000000
--- a/.autodoc/docs/json/core/src/hooks/useMatchBreakpoints.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useMatchBreakpoints.ts",
- "filePath": "core/src/hooks/useMatchBreakpoints.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useMatchBreakpoints.ts",
- "summary": "The code defines a custom React hook called `useMatchBreakpoints` that returns an object representing the current state of whether the browser window matches certain media query breakpoints. The hook uses the `useState` and `useEffect` hooks from React to manage state and side effects respectively.\n\nThe `mediaQueries` object is defined as a mapping of breakpoint sizes to media query strings. The breakpoints are defined in another file and imported as `breakpointMap`. The `mediaQueries` object is constructed by iterating over the keys of `breakpointMap` and creating a media query string for each breakpoint size. The media query strings are constructed such that they represent a range of screen sizes, e.g. `(min-width: 370px) and (max-width: 576px)`.\n\nThe `getKey` function is a helper function that takes a breakpoint size string and returns a string representing the corresponding state key, e.g. `isSmall` for the `small` breakpoint.\n\nThe `useMatchBreakpoints` hook initializes state by iterating over the keys of `mediaQueries` and creating a state object with a key for each breakpoint size. The value of each key is set to the result of calling `window.matchMedia` with the corresponding media query string. The `matches` property of the resulting `MediaQueryList` object is used to set the initial value of each state key.\n\nThe hook then sets up listeners for each media query using the `useEffect` hook. The effect function creates an array of listener functions, one for each media query. Each listener function updates state by calling `setState` with a new object that merges the previous state with the new state for the corresponding breakpoint size. The new state is computed by calling `matches` on the `MediaQueryListEvent` object passed to the listener function.\n\nFinally, the effect function returns a cleanup function that removes the listeners created earlier. The cleanup function is called when the component using the hook unmounts.\n\nThe `useMatchBreakpoints` hook can be used in a larger project to conditionally render components based on the current screen size. For example, a component might render differently on small screens than on large screens. The hook can be used to determine the current screen size and pass that information down to child components as props. Here is an example usage:\n\n```\nimport useMatchBreakpoints from './useMatchBreakpoints'\n\nfunction MyComponent() {\n const { isSmall, isMedium, isLarge } = useMatchBreakpoints()\n\n return (\n Last selected option: {lastSelectedOption}
\n\n {isSmall &&
\n )\n}\n```",
- "questions": "1. What does this code do?\n- This code exports a custom React hook called `useMatchBreakpoints` that returns a state object indicating whether the current viewport matches certain media query breakpoints.\n\n2. What is the purpose of the `mediaQueries` object?\n- The `mediaQueries` object is used to define media queries that correspond to specific viewport sizes. These media queries are used to create listeners that update the state returned by the `useMatchBreakpoints` hook.\n\n3. Why are there Safari version checks in the code?\n- There are Safari version checks in the code because older versions of Safari (before version 14) use a different event listener syntax for `MediaQueryList` objects. The checks ensure that the code works correctly across different versions of Safari.",
- "checksum": "89d701d7146661af3818b5550b4788a2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useMeowshi.json b/.autodoc/docs/json/core/src/hooks/useMeowshi.json
deleted file mode 100644
index 47078dfb0..000000000
--- a/.autodoc/docs/json/core/src/hooks/useMeowshi.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useMeowshi.ts",
- "filePath": "core/src/hooks/useMeowshi.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useMeowshi.ts",
- "summary": "The `useMeowshi` function is a custom React hook that provides functionality for interacting with the Meowshi contract. The Meowshi contract is a smart contract on the Ethereum blockchain that allows users to deposit and withdraw tokens in exchange for a reward token called MEOW. The purpose of this hook is to provide a simple interface for users to interact with the Meowshi contract from within a React application.\n\nThe hook uses several other custom hooks to interact with the Ethereum blockchain, including `useActiveWeb3React`, `useTransactionAdder`, `useMeowshiContract`, `useSushiContract`, and `useSushiBarContract`. These hooks provide access to the user's Ethereum account, the Meowshi contract, and the SushiSwap contracts.\n\nThe `useMeowshi` hook provides several functions for interacting with the Meowshi contract, including `approve`, `meow`, `unmeow`, `meowSushi`, and `unmeowSushi`. These functions allow the user to approve the Meowshi contract to spend their tokens, deposit tokens into the contract, and withdraw tokens from the contract. The `meowSushi` and `unmeowSushi` functions are specific to the SushiSwap version of the Meowshi contract.\n\nThe hook also provides an `approvalState` variable that indicates whether the user has approved the Meowshi contract to spend their tokens. This variable is updated automatically when the user interacts with the contract.\n\nOverall, the `useMeowshi` hook provides a simple and convenient way for users to interact with the Meowshi contract from within a React application. By abstracting away the complexity of interacting with the Ethereum blockchain, this hook makes it easier for developers to build applications that use the Meowshi contract. \n\nExample usage:\n\n```\nimport useMeowshi from './useMeowshi'\n\nfunction MyComponent() {\n const { approvalState, approve, meow, unmeow } = useMeowshi(false)\n\n return (\n Small screen
}\n {isMedium &&Medium screen
}\n {isLarge &&Large screen
}\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code defines a custom hook called `useMeowshi` that provides functions for interacting with the Meowshi contract, allowing users to enter and leave the Meowshi pool and the Sushi pool. It also handles approval of the contract to spend the user's tokens.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `react`, `@ethersproject/bignumber`, and custom hooks defined in other files such as `useContract` and `useActiveWeb3React`.\n\n3. What is the significance of the `pendingApproval` state variable?\n- The `pendingApproval` state variable is used to track whether an approval transaction is currently pending. It is set to `true` when the user initiates an approval transaction and set back to `false` when the transaction is complete or fails. This is used to prevent the user from initiating multiple approval transactions simultaneously.",
- "checksum": "3da6260721f0e8f92f457b3dda270aaa"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useMeowshiPerXSushi.json b/.autodoc/docs/json/core/src/hooks/useMeowshiPerXSushi.json
deleted file mode 100644
index f491965b0..000000000
--- a/.autodoc/docs/json/core/src/hooks/useMeowshiPerXSushi.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useMeowshiPerXSushi.ts",
- "filePath": "core/src/hooks/useMeowshiPerXSushi.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useMeowshiPerXSushi.ts",
- "summary": "The code is a custom React hook called `useMeowshiPerXSushi` that is used to retrieve the conversion rate between XSUSHI tokens and Meowshi tokens. The hook uses the `useEffect` and `useState` hooks from the React library to manage state and side effects.\n\nThe `useBentoBoxContract` hook is used to retrieve the BentoBox smart contract instance, which is used to call the `toShare` and `toAmount` functions. These functions are used to calculate the conversion rate between XSUSHI and Meowshi tokens.\n\nThe `useState` hook is used to store the conversion rate as a tuple of two `BigNumber` objects. The initial value of the state is set to `[BigNumber.from('0'), BigNumber.from('0')]`.\n\nThe `useEffect` hook is used to call the `toShare` and `toAmount` functions when the `bentoboxContract` object is available. The `async` function inside the `useEffect` hook retrieves the conversion rate by calling the `toShare` and `toAmount` functions with the `XSUSHI` token address and a value of `1` in XSUSHI token decimals. The `false` parameter is used to indicate that the conversion rate should be calculated using the current block timestamp.\n\nOnce the conversion rate is retrieved, it is stored in the state using the `setState` function.\n\nThe `useMeowshiPerXSushi` hook returns the current state, which is a tuple of two `BigNumber` objects representing the conversion rate between XSUSHI and Meowshi tokens.\n\nThis hook can be used in other components of the project to retrieve the current conversion rate between XSUSHI and Meowshi tokens. For example, a component that displays the current price of Meowshi tokens in XSUSHI tokens could use this hook to retrieve the conversion rate and calculate the price.",
- "questions": "1. What is the purpose of this code and what does it do?\n This code defines a custom React hook called `useMeowshiPerXSushi` that returns an array of two `BigNumber` values. It uses the `useBentoBoxContract` hook to interact with a smart contract and calculate the conversion rate between XSUSHI tokens and Meowshi tokens.\n\n2. What is the significance of the `useEffect` hook and how does it work?\n The `useEffect` hook is used to run side effects in a React component. In this code, it is used to asynchronously fetch data from the smart contract and update the component state when the `bentoboxContract` dependency changes.\n\n3. What is the purpose of the `XSUSHI` constant and where is it defined?\n The `XSUSHI` constant is a token object that represents the XSUSHI token. It is imported from a file located at `../config/tokens` and is used to interact with the smart contract and perform calculations involving XSUSHI tokens.",
- "checksum": "2de02eca5c5c462451cb6b3cd7f86dcb"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useMounted.json b/.autodoc/docs/json/core/src/hooks/useMounted.json
deleted file mode 100644
index 50532d923..000000000
--- a/.autodoc/docs/json/core/src/hooks/useMounted.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useMounted.ts",
- "filePath": "core/src/hooks/useMounted.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useMounted.ts",
- "summary": "The code above is a custom React hook called `useMounted`. The purpose of this hook is to determine whether or not a component is mounted in the DOM. \n\nThe hook uses the `useEffect` and `useState` hooks from React. The `useState` hook initializes a state variable called `mounted` to `false`. The `useEffect` hook is used to update the `mounted` state variable to `true` when the component is mounted in the DOM. The `[]` passed as the second argument to `useEffect` ensures that the effect only runs once, when the component is mounted.\n\nThe `useMounted` hook returns the `mounted` state variable, which can be used in other parts of the code to determine if the component is mounted. For example, if a component needs to perform an action only when it is mounted, it can use the `useMounted` hook to check if it is currently mounted before performing the action.\n\nHere is an example of how the `useMounted` hook can be used in a component:\n\n```\nimport React from 'react'\nimport useMounted from './useMounted'\n\nfunction MyComponent() {\n const isMounted = useMounted()\n\n if (!isMounted) {\n return Approval state: {approvalState}
\n \n \n \nLoading...
\n }\n\n return My Component
\n}\n```\n\nIn the example above, the `MyComponent` component uses the `useMounted` hook to determine if it is currently mounted. If it is not mounted, it displays a loading message. If it is mounted, it displays the component content.\n\nOverall, the `useMounted` hook is a useful utility hook that can be used in various parts of a React project to determine if a component is mounted in the DOM.",
- "questions": "1. What is the purpose of this code?\n This code defines a custom React hook called `useMounted` that returns a boolean value indicating whether the component is mounted or not.\n\n2. What is the significance of the `useEffect` hook in this code?\n The `useEffect` hook is used to set the `mounted` state to `true` when the component is mounted. The empty dependency array `[]` ensures that this effect only runs once when the component is mounted.\n\n3. How can this hook be used in a React component?\n This hook can be used in a React component by calling it and storing the returned value in a variable. The value can then be used to conditionally render components or perform other logic based on whether the component is mounted or not.",
- "checksum": "c4bd977f8285ae75ac0df8c58df02487"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useOnClickOutside.json b/.autodoc/docs/json/core/src/hooks/useOnClickOutside.json
deleted file mode 100644
index 21f022f1b..000000000
--- a/.autodoc/docs/json/core/src/hooks/useOnClickOutside.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useOnClickOutside.tsx",
- "filePath": "core/src/hooks/useOnClickOutside.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useOnClickOutside.tsx",
- "summary": "The code above defines a custom React hook called `useOnClickOutside`. This hook is designed to be used in a React component to detect clicks outside of a specified element and trigger a callback function when this occurs. \n\nThe hook takes two arguments: `node` and `handler`. `node` is a reference to the element that the click event should be detected outside of. `handler` is an optional callback function that will be called when a click event is detected outside of the specified element. \n\nThe `useOnClickOutside` hook uses the `useRef` and `useEffect` hooks from React. The `useRef` hook is used to create a reference to the `handler` function that is passed in as an argument. The `useEffect` hook is used to update the `handlerRef` reference whenever the `handler` function changes. \n\nThe main logic of the `useOnClickOutside` hook is implemented in the second `useEffect` hook. This hook adds an event listener to the `document` object that listens for `mousedown` events. When a `mousedown` event occurs, the `handleClickOutside` function is called. This function checks if the `node` reference contains the target of the `mousedown` event. If the target is not contained within the `node`, the `handler` function is called (if it exists). \n\nFinally, the `useEffect` hook returns a cleanup function that removes the event listener from the `document` object when the component unmounts. \n\nOverall, the `useOnClickOutside` hook is a useful utility for detecting clicks outside of a specified element in a React component. It can be used to implement various UI features such as closing a dropdown menu when a user clicks outside of it. \n\nExample usage of the `useOnClickOutside` hook:\n\n```\nimport React, { useRef } from 'react'\nimport { useOnClickOutside } from './useOnClickOutside'\n\nfunction DropdownMenu() {\n const dropdownRef = useRef(null)\n\n const closeDropdown = () => {\n // close dropdown menu logic\n }\n\n useOnClickOutside(dropdownRef, closeDropdown)\n\n return (\n \n {/* dropdown menu content */}\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n This code defines a custom React hook called `useOnClickOutside` that takes a ref to a DOM node and a callback function as arguments, and attaches a click event listener to the document that triggers the callback when a click occurs outside the specified node.\n\n2. What is the significance of the generic type `T` in this code?\n The generic type `T` is used to specify the type of the DOM node that the `useOnClickOutside` hook will be attached to. This allows for type safety and ensures that the correct type of node is passed to the hook.\n\n3. Why is the `handlerRef` variable declared as a `useRef` and updated in a separate `useEffect` hook?\n The `handlerRef` variable is declared as a `useRef` so that it can be accessed and updated by the event listener function even after the initial render. The separate `useEffect` hook updates the `handlerRef` variable whenever the `handler` function changes, ensuring that the latest version of the function is always used by the event listener.",
- "checksum": "015b2ffffb30b14c94a173aed7ea73cd"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useParsedQueryString.json b/.autodoc/docs/json/core/src/hooks/useParsedQueryString.json
deleted file mode 100644
index 6fae4434d..000000000
--- a/.autodoc/docs/json/core/src/hooks/useParsedQueryString.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useParsedQueryString.ts",
- "filePath": "core/src/hooks/useParsedQueryString.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useParsedQueryString.ts",
- "summary": "The code above is a custom React hook that parses the query string parameters from the URL and returns them as an object. It uses the `qs` library to parse the query string and the `useMemo` hook to memoize the result.\n\nThe `useParsedQueryString` hook takes no arguments and returns an object of type `ParsedQs`, which is a type definition from the `qs` library. This object contains the parsed query string parameters as key-value pairs.\n\nTo use this hook, it must be imported into a React component and called like any other hook. For example:\n\n```\nimport useParsedQueryString from './useParsedQueryString'\n\nfunction MyComponent() {\n const queryParams = useParsedQueryString()\n\n // do something with queryParams\n\n return (\n // JSX code\n )\n}\n```\n\nThe `useMemo` hook is used to memoize the result of parsing the query string. This means that if the `search` string (which contains the query string parameters) has not changed, the hook will return the same object as before, without re-parsing the query string. This can improve performance in cases where the query string is frequently accessed but rarely changes.\n\nThe `parse` function from the `qs` library is used to parse the query string. It takes two optional arguments: `parseArrays` and `ignoreQueryPrefix`. The `parseArrays` argument specifies whether to parse arrays in the query string as arrays or as objects with numeric keys. The `ignoreQueryPrefix` argument specifies whether to ignore the leading '?' character in the query string.\n\nOverall, this hook provides a convenient way to access and parse query string parameters in a React component. It can be used in conjunction with other hooks, such as `useLocation` from the `react-router-dom` library, to build more complex functionality.",
- "questions": "1. What is the purpose of the `useMemo` hook in this code?\n - The `useMemo` hook is used to memoize the result of parsing the query string, so that it is only re-computed when the `search` value changes.\n2. Why is the `parseArrays` option set to `false` in the `parse` function?\n - The `parseArrays` option is set to `false` to ensure that query string parameters with multiple values are not parsed into arrays, but instead are represented as strings.\n3. What is the expected format of the `location.search` value?\n - The `location.search` value is expected to be a string representing the query string portion of a URL, including the leading `?` character.",
- "checksum": "1a78919ddac1d75e03109da9fc53be6c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/usePlayer.json b/.autodoc/docs/json/core/src/hooks/usePlayer.json
deleted file mode 100644
index 786f9af73..000000000
--- a/.autodoc/docs/json/core/src/hooks/usePlayer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "usePlayer.ts",
- "filePath": "core/src/hooks/usePlayer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/usePlayer.ts",
- "summary": "The `usePlayer` function is a custom React hook that provides functionality for playing audio files. It takes in an `id` parameter that can be null, a number, or a string. The function returns an object that contains the current time of the audio file, the duration of the audio file, a boolean indicating whether the audio is currently playing or not, a function to set the playing state, and a function to set the clicked time.\n\nThe hook uses the `useState` and `useEffect` hooks from React to manage state and side effects. The `useState` hook is used to create state variables for the duration, current time, playing state, and clicked time. The `useEffect` hook is used to perform side effects such as updating the React state when DOM events occur and updating the DOM when React state changes.\n\nThe `useEffect` hook sets up event listeners for the audio file to update the React state when the audio file is loaded and when the current time of the audio file changes. It also updates the DOM to play or pause the audio file based on the playing state. If the clicked time is not null and is different from the current time, the hook sets the current time of the audio file to the clicked time and resets the clicked time to null. Finally, the hook cleans up the event listeners when the component unmounts.\n\nThis hook can be used in a larger project to provide audio playback functionality. For example, it can be used in a music player app to play and control audio files. Here is an example of how the hook can be used:\n\n```\nimport usePlayer from './usePlayer';\n\nfunction MusicPlayer({ audioFile }) {\n const { curTime, duration, playing, setPlaying, setClickedTime } = usePlayer(audioFile.id);\n\n const handlePlayPause = () => {\n setPlaying(!playing);\n };\n\n const handleSeek = (e) => {\n const clickedTime = e.target.value;\n setClickedTime(clickedTime);\n };\n\n return (\n \n \n \n \n
\n );\n}\n```\n\nIn this example, the `usePlayer` hook is used to control the playback of an audio file. The `curTime` and `duration` values are used to display the current time and duration of the audio file. The `playing` value is used to toggle between playing and pausing the audio file. The `setPlaying` function is called when the play/pause button is clicked. The `setClickedTime` function is called when the user seeks to a different time in the audio file.",
- "questions": "1. What is the purpose of this code?\n \n This code defines a custom React hook called `usePlayer` that manages the state of an HTML audio player.\n\n2. What arguments does the `usePlayer` hook take?\n \n The `usePlayer` hook takes a single argument called `id` that can be `null`, a number, or a string.\n\n3. What does the `useEffect` hook do in this code?\n \n The `useEffect` hook sets up event listeners on an HTML audio element and updates the state of the `usePlayer` hook based on the events that occur. It also cleans up the event listeners when the component unmounts.",
- "checksum": "13af1bdf2be3a5d5aaa8f50c4172b1c1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/usePool.json b/.autodoc/docs/json/core/src/hooks/usePool.json
deleted file mode 100644
index f254e5ab3..000000000
--- a/.autodoc/docs/json/core/src/hooks/usePool.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "usePool.ts",
- "filePath": "core/src/hooks/usePool.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/usePool.ts",
- "summary": "The `usePool` function is a custom React hook that fetches data about a Uniswap V2 liquidity pool and returns it as an object. The function takes a single argument, `poolAddress`, which is a string representing the Ethereum address of the liquidity pool. \n\nThe function first imports several dependencies: `useCallback`, `useEffect`, and `useState` from the React library, `BigNumber` from the `@ethersproject/bignumber` library, and `IUniswapV2PairABI` from the `@sushiswap/core/build/abi` library. It also imports a helper function called `isAddress` from a local `functions` file and a custom hook called `useContract` from another local file.\n\nThe `usePool` function initializes a state variable called `poolData` using the `useState` hook. This variable will hold the data fetched from the liquidity pool. The function then checks if the `poolAddress` argument is a valid Ethereum address using the `isAddress` helper function. If it is, the function calls the `useContract` hook to get a reference to the Uniswap V2 pair contract at the specified address.\n\nThe `useCallback` hook is used to define a function called `fetchPoolData` that asynchronously fetches data about the liquidity pool using the contract reference. Specifically, it retrieves the reserves of the two tokens in the pool, the addresses of the two tokens, and the total supply of the pool tokens. Once the data is fetched, it is stored in the `poolData` state variable using the `setPoolData` function.\n\nThe `useEffect` hook is used to call the `fetchPoolData` function whenever the `poolAddress` argument changes. This ensures that the data is always up-to-date with the specified liquidity pool.\n\nFinally, the `usePool` function returns the `poolData` object, which contains the reserves, token addresses, and total supply of the liquidity pool. This data can be used in other parts of the project to display information about the pool or to perform calculations involving the pool's tokens.\n\nExample usage:\n\n```\nimport usePool from './usePool'\n\nfunction PoolInfo({ poolAddress }) {\n const poolData = usePool(poolAddress)\n\n return (\n \n
\n )\n}\n```\n\nIn this example, the `PoolInfo` component uses the `usePool` hook to fetch data about a liquidity pool specified by the `poolAddress` prop. The data is then displayed in the component using JSX.",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code defines a custom React hook called `usePool` that fetches data about a Uniswap pool given its address. It solves the problem of needing to repeatedly fetch pool data in different components.\n\n2. What external libraries or dependencies does this code rely on?\n- This code relies on the `react`, `@ethersproject/bignumber`, `@sushiswap/core`, and a custom `isAddress` function from another file. \n\n3. What is the expected input and output of the `usePool` hook?\n- The `usePool` hook expects a string `poolAddress` as input, which is the address of a Uniswap pool. It returns an object `poolData` containing information about the pool's reserves, tokens, and total supply.",
- "checksum": "475529d54bd85ac945a73f63f793514d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/usePrevious.json b/.autodoc/docs/json/core/src/hooks/usePrevious.json
deleted file mode 100644
index 6b545c26d..000000000
--- a/.autodoc/docs/json/core/src/hooks/usePrevious.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "usePrevious.ts",
- "filePath": "core/src/hooks/usePrevious.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/usePrevious.ts",
- "summary": "The code above is a custom React hook called `usePrevious` that allows developers to access the previous value of a state or prop in a functional component. This hook is useful when a component needs to compare the current value of a state or prop with its previous value to determine if any changes have occurred. \n\nThe `usePrevious` hook is implemented using the `useRef` and `useEffect` hooks from the React library. The `useRef` hook creates a mutable reference object that can hold any value, similar to an instance property on a class. The `useEffect` hook is used to update the reference object with the current value of the state or prop whenever it changes. \n\nThe `usePrevious` hook takes a generic type parameter `T` that represents the type of the value being stored. The `value` parameter is the current value of the state or prop that is being tracked. The hook returns the previous value of the state or prop, which is stored in the `ref.current` property. \n\nHere is an example of how the `usePrevious` hook can be used in a functional component:\n\n```\nimport React, { useState } from 'react'\nimport usePrevious from './usePrevious'\n\nfunction Counter() {\n const [count, setCount] = useState(0)\n const prevCount = usePrevious(count)\n\n function handleIncrement() {\n setCount(count + 1)\n }\n\n return (\n Token 1: {poolData.token0}
\nToken 2: {poolData.token1}
\nReserves: {poolData.reserves.toString()}
\nTotal supply: {poolData.totalSupply.toString()}
\n\n
\n )\n}\n```\n\nIn the example above, the `Counter` component uses the `useState` hook to manage the state of a count variable. The `usePrevious` hook is used to track the previous value of the count variable. Whenever the count variable is updated, the `usePrevious` hook returns the previous value of the count variable, which is then displayed in the component. \n\nOverall, the `usePrevious` hook is a useful tool for React developers who need to track the previous value of a state or prop in a functional component. It can be used in a variety of scenarios, such as tracking changes in form input values or detecting changes in API response data.",
- "questions": "1. What is the purpose of this code?\n This code defines a custom React hook called `usePrevious` that returns the previous value of a given input value.\n\n2. What is the significance of the `useRef` and `useEffect` hooks used in this code?\n The `useRef` hook is used to create a mutable reference to a value that persists across renders, while the `useEffect` hook is used to run a side effect (in this case, updating the reference value) after a render.\n\n3. How can this code be used in a React component?\n This code can be imported into a React component and used like any other custom hook, by calling `usePrevious` with a value as its argument and using the returned previous value in the component's logic.",
- "checksum": "e0a6e12b873cee33fb64cd1889200588"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useSearchAndSort.json b/.autodoc/docs/json/core/src/hooks/useSearchAndSort.json
deleted file mode 100644
index 3c687668c..000000000
--- a/.autodoc/docs/json/core/src/hooks/useSearchAndSort.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useSearchAndSort.ts",
- "filePath": "core/src/hooks/useSearchAndSort.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useSearchAndSort.ts",
- "summary": "The code defines a custom React hook called `useSearchAndSort` that can be used to search and sort an array of items. The hook takes in three arguments: `items`, `searchOptions`, and `sortOptions`. \n\nThe `items` argument is the array of items that needs to be searched and sorted. The `searchOptions` argument is an optional object that can be used to configure the search functionality. The `sortOptions` argument is an optional object that can be used to configure the sort functionality.\n\nThe hook returns an object that contains the following properties: `items`, `term`, `setTerm`, `sortConfig`, `setSortConfig`, and `requestSort`. \n\nThe `items` property is the sorted and searched array of items. The `term` property is the current search term. The `setTerm` property is a function that can be used to update the search term. The `sortConfig` property is an object that contains the current sort configuration. The `setSortConfig` property is a function that can be used to update the sort configuration. The `requestSort` property is a function that can be used to request a sort based on a specific key and direction.\n\nThe `useMemo` hook is used to memoize the sorted array of items. The `Fuse` library is used to perform the search functionality. The `getNested` function is a helper function that is used to get the value of a nested property in an object.\n\nThe `useSearchAndSort` hook can be used in a React component to search and sort an array of items. Here is an example of how the hook can be used:\n\n```\nimport useSearchAndSort from './useSearchAndSort'\n\nconst items = [\n { name: 'John', age: 25 },\n { name: 'Jane', age: 30 },\n { name: 'Bob', age: 20 },\n]\n\nfunction App() {\n const { items: sortedItems, term, setTerm, sortConfig, setSortConfig, requestSort } = useSearchAndSort(items)\n\n return (\n Current count: {count}
\nPrevious count: {prevCount}
\n \n\n setTerm(e.target.value)} />\n \n \n
\n )\n}\n```\n\nIn this example, the `useSearchAndSort` hook is used to search and sort an array of objects that contain a `name` and an `age` property. The `term` state is used to store the current search term, and the `setTerm` function is used to update the search term. The `requestSort` function is used to request a sort based on the `name` or `age` property. The `sortedItems` array is the sorted and searched array of items.",
- "questions": "1. What is the purpose of this code?\n \n This code defines a custom React hook called `useSearchAndSort` that takes in an array of items, search options, and sort options, and returns an object with sorted items, search term, and sort configuration.\n\n2. What external libraries does this code use?\n \n This code uses two external libraries: `@ethersproject/bignumber` for handling big numbers, and `fuse.js` for fuzzy searching.\n\n3. What is the role of the `getNested` function?\n \n The `getNested` function is a helper function that takes in an object, a path string, and a separator, and returns the value of the nested property specified by the path string. It replaces square brackets with the separator and splits the path string to traverse the object. If the property is not found, it returns `undefined`.",
- "checksum": "cd6eeffe9b1f468b05cfa5191748eea7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useSortableData.json b/.autodoc/docs/json/core/src/hooks/useSortableData.json
deleted file mode 100644
index a1b1c3822..000000000
--- a/.autodoc/docs/json/core/src/hooks/useSortableData.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useSortableData.ts",
- "filePath": "core/src/hooks/useSortableData.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useSortableData.ts",
- "summary": "The code defines a custom React hook called `useSortableData` that can be used to sort an array of items based on a specified configuration. The hook takes two arguments: `items`, which is the array of items to be sorted, and `config`, which is an optional object that specifies the initial sorting configuration. \n\nThe `useMemo` hook is used to memoize the sorted items array, which means that the array will only be recalculated when either the `items` or `sortConfig` dependencies change. \n\nThe `requestSort` function is used to update the sorting configuration based on the specified `key` and `direction`. If the `key` is already being used for sorting and the `direction` is currently ascending, the direction is changed to descending, and vice versa. \n\nThe `getNested` function is a helper function that is used to retrieve nested properties from an object using a dot-separated path. For example, if the object is `{ a: { b: { c: 1 } } }` and the path is `'a.b.c'`, the function will return `1`. \n\nThe sorting algorithm used by the hook is a standard comparison function that compares the values of the specified `key` property for each item in the array. If the values are `BigNumber` instances, they are compared using the `lt` and `gt` methods provided by the `@ethersproject/bignumber` library. If one of the values is `Infinity`, it is treated as the largest possible value. \n\nOverall, this hook provides a flexible and reusable way to sort arrays of items in a React application. It can be used in a variety of contexts, such as sorting a table of data or a list of items. Here is an example of how the hook can be used to sort an array of objects by their `name` property:\n\n```\nimport useSortableData from './useSortableData'\n\nconst items = [\n { name: 'Alice', age: 25 },\n { name: 'Bob', age: 30 },\n { name: 'Charlie', age: 20 },\n]\n\nfunction App() {\n const { items: sortedItems, requestSort, sortConfig } = useSortableData(items)\n\n return (\n - \n {sortedItems.map((item) => (\n
- \n {item.name} - {item.age}\n \n ))}\n
| requestSort('name')}>\n Name {sortConfig && sortConfig.key === 'name' && sortConfig.direction === 'ascending' ? <>▲ : <>▼}\n | \nrequestSort('age')}>\n Age {sortConfig && sortConfig.key === 'age' && sortConfig.direction === 'ascending' ? <>▲ : <>▼}\n | \n
|---|---|
| {item.name} | \n{item.age} | \n
\n \n
\n )\n}\n\nexport default MyComponent\n```\n\nIn the example above, the `useStickyData` hook is used to maintain the state of the `name` variable even when the `MyComponent` is unmounted and remounted. The `name` variable is initialized with the value returned by the `useStickyData` hook. The `handleNameChange` function is used to update the `name` variable when the user types into the input field.",
- "questions": "1. What is the purpose of this code?\n This code defines a custom React hook called `useStickyData` that returns a value that persists across renders.\n\n2. How does this code work?\n The `useRef` hook is used to create a mutable reference to a value. If the `value` argument passed to `useStickyData` is not `undefined`, the reference is updated with the new value. The current value of the reference is then returned.\n\n3. How can this code be used in a React application?\n This code can be imported and used as a custom hook in a React component. The returned value can be used to persist data across renders, such as form input values or user preferences.",
- "checksum": "fd0aab6fc516816c25ddddc194ecbfbb"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useSushiBar.json b/.autodoc/docs/json/core/src/hooks/useSushiBar.json
deleted file mode 100644
index 91cdaea59..000000000
--- a/.autodoc/docs/json/core/src/hooks/useSushiBar.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useSushiBar.ts",
- "filePath": "core/src/hooks/useSushiBar.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useSushiBar.ts",
- "summary": "The code is a custom React hook called `useSushiBar` that provides functionality for interacting with the SushiBar contract. The SushiBar is a staking contract that allows users to earn rewards in the form of SUSHI tokens by staking their SLP tokens. \n\nThe hook imports `Currency`, `CurrencyAmount`, and `Token` from the `@zoolabs/zdk` library, which are used to represent currency amounts and tokens. It also imports `useCallback` from React, `useSushiBarContract` from another custom hook called `useContract`, and `useTransactionAdder` from a state management library.\n\nThe `useSushiBar` hook returns an object with two functions: `enter` and `leave`. These functions take a `CurrencyAmount\n \n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n - This code defines a custom React hook called `useSushiBar` that provides functions for entering and leaving a SushiBar contract using the SushiSwap protocol.\n2. What external dependencies does this code rely on?\n - This code imports several modules from the `@zoolabs/zdk` library, as well as two custom hooks called `useSushiBarContract` and `useTransactionAdder` from other files in the project.\n3. What arguments do the `enter` and `leave` functions take, and what do they return?\n - Both functions take an optional `amount` argument that is a `CurrencyAmount` object representing the amount of a `Token` to enter or leave the SushiBar with. They return a Promise that resolves to a transaction hash if successful, or an error if not.",
- "checksum": "380caa006004f471dc1c24afd73708ea"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useSushiMaker.json b/.autodoc/docs/json/core/src/hooks/useSushiMaker.json
deleted file mode 100644
index 445cfabdf..000000000
--- a/.autodoc/docs/json/core/src/hooks/useSushiMaker.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useSushiMaker.ts",
- "filePath": "core/src/hooks/useSushiMaker.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useSushiMaker.ts",
- "summary": "The code above is a custom React hook called `useMaker` that is part of a larger project called `zoo`. This hook is designed to interact with a Maker contract and provide a `serve` function that can be used to convert one token to another. \n\nThe hook imports two other custom hooks: `useMakerContract` and `useTransactionAdder`. `useMakerContract` is used to retrieve the Maker contract instance, while `useTransactionAdder` is used to add transactions to the project's global state. \n\nThe `useCallback` hook is used to memoize the `serve` function and prevent unnecessary re-renders. The `serve` function takes two arguments, `token0` and `token1`, which are the tokens to be converted. The function attempts to call the `convert` method on the Maker contract instance with the provided tokens. If successful, the resulting transaction is added to the global state using the `addTransaction` function. If an error occurs, the error is returned. \n\nThe `useMaker` hook returns an object with a single property, `serve`, which is the memoized `serve` function. This hook can be used in other components to interact with the Maker contract and convert tokens. \n\nExample usage:\n\n```\nimport useMaker from './useMaker'\n\nconst MyComponent = () => {\n const { serve } = useMaker()\n\n const handleServe = async () => {\n const token0 = 'ETH'\n const token1 = 'DAI'\n const result = await serve(token0, token1)\n console.log(result)\n }\n\n return (\n \n )\n}\n```\n\nIn the example above, the `useMaker` hook is used to retrieve the `serve` function, which is then called when the button is clicked. The `token0` and `token1` arguments are hard-coded for simplicity, but could be passed in dynamically based on user input or other factors. The resulting transaction or error is logged to the console.",
- "questions": "1. What is the purpose of the `useMaker` hook?\n - The `useMaker` hook is used to provide a `serve` function that can be used to convert tokens using the `makerContract` and add the transaction to the state using `addTransaction`.\n\n2. What is the `useCallback` hook used for in this code?\n - The `useCallback` hook is used to memoize the `serve` function and prevent unnecessary re-renders when the `addTransaction` and `makerContract` dependencies change.\n\n3. What is the purpose of the `TODO` comment in the code?\n - The `TODO` comment suggests that there is a potential future feature to implement called `Serve all`, but it has not been implemented yet.",
- "checksum": "22ffa961ba669b343d2ba1148681eefe"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useSwaave.json b/.autodoc/docs/json/core/src/hooks/useSwaave.json
deleted file mode 100644
index a1fbf0476..000000000
--- a/.autodoc/docs/json/core/src/hooks/useSwaave.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useSwaave.ts",
- "filePath": "core/src/hooks/useSwaave.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useSwaave.ts",
- "summary": "The `useSushiBar` function is a custom React hook that provides functionality related to the SushiBar contract in the larger project. It imports several other custom hooks and libraries, including `useActiveWeb3React`, `useTransactionAdder`, `useSushiContract`, and `useSushiBarContract`. \n\nThe hook returns an object with four properties: `allowance`, `approve`, `enter`, and `leave`. \n\n`allowance` is a string that represents the amount of SUSHI tokens that the user has approved for the SushiBar contract to spend on their behalf. The `fetchAllowance` function is called on mount and every 10 seconds thereafter to update the `allowance` state. \n\n`approve` is an asynchronous function that approves the SushiBar contract to spend an unlimited amount of SUSHI tokens on the user's behalf. It returns a transaction object that is added to the transaction history using the `addTransaction` function from the `useTransactionAdder` hook. \n\n`enter` is an asynchronous function that allows the user to deposit a specified amount of SUSHI tokens into the SushiBar contract. It returns a transaction object that is added to the transaction history using the `addTransaction` function. \n\n`leave` is an asynchronous function that allows the user to withdraw a specified amount of SUSHI tokens from the SushiBar contract. It returns a transaction object that is added to the transaction history using the `addTransaction` function. \n\nOverall, this hook provides a convenient way for other components in the project to interact with the SushiBar contract and manage SUSHI token deposits and withdrawals. \n\nExample usage: \n\n```\nimport useSushiBar from './useSushiBar'\n\nfunction MyComponent() {\n const { allowance, approve, enter, leave } = useSushiBar()\n\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code defines a custom React hook called `useSushiBar` that provides functions for interacting with the SushiBar smart contract. It allows users to approve, enter, and leave the SushiBar, which is a staking contract for SUSHI tokens.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including the `react`, `@ethersproject/bignumber`, and `@ethersproject/constants` packages. It also imports several custom hooks from other files in the project, such as `useContract` and `useActiveWeb3React`.\n\n3. What improvements could be made to this code?\n- The code currently uses strings to represent token amounts, but it would be more precise to use `BigNumber` objects instead. The code includes comments indicating that this should be updated in the future. Additionally, the error handling could be improved to provide more informative error messages to users.",
- "checksum": "16379359618befc8baa5cbf1c2f365f5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useSwapSlippageTollerence.json b/.autodoc/docs/json/core/src/hooks/useSwapSlippageTollerence.json
deleted file mode 100644
index 1b568948e..000000000
--- a/.autodoc/docs/json/core/src/hooks/useSwapSlippageTollerence.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useSwapSlippageTollerence.ts",
- "filePath": "core/src/hooks/useSwapSlippageTollerence.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useSwapSlippageTollerence.ts",
- "summary": "The code imports several modules from the '@zoolabs/zdk' library and the 'react' library. It defines two constants, V2_SWAP_DEFAULT_SLIPPAGE and ONE_TENTHS_PERCENT, both of which are instances of the Percent class from the '@zoolabs/zdk' library. \n\nThe code exports a function called useSwapSlippageTolerance that takes a single argument, trade, which is an instance of the Trade class from the '@zoolabs/zdk' library. The function uses the useMemo hook from the 'react' library to memoize a defaultSlippageTolerance value based on the trade argument. If trade is undefined, the defaultSlippageTolerance is set to ONE_TENTHS_PERCENT. Otherwise, it is set to V2_SWAP_DEFAULT_SLIPPAGE. Finally, the function returns the result of calling the useUserSlippageToleranceWithDefault hook from the '../state/user/hooks' module with the defaultSlippageTolerance value as an argument.\n\nThe purpose of this code is to provide a hook that calculates the slippage tolerance for a given trade. Slippage tolerance is the maximum amount by which the execution price of a trade can differ from the expected price. The useSwapSlippageTolerance function takes a trade object as an argument and calculates the default slippage tolerance based on whether the trade object is defined or not. It then passes this default value to the useUserSlippageToleranceWithDefault hook, which returns the user's preferred slippage tolerance or the default value if the user has not set a preference.\n\nThis code can be used in the larger project to ensure that trades are executed within the user's preferred slippage tolerance. For example, a trading interface could use this hook to calculate the slippage tolerance for a given trade and display it to the user. The user could then adjust the slippage tolerance if desired before executing the trade.",
- "questions": "1. What is the purpose of the `useSwapSlippageTolerance` function?\n- The `useSwapSlippageTolerance` function is used to calculate the slippage tolerance for a given trade.\n\n2. What is the difference between `V2_SWAP_DEFAULT_SLIPPAGE` and `ONE_TENTHS_PERCENT`?\n- `V2_SWAP_DEFAULT_SLIPPAGE` represents the default slippage tolerance for a V2 swap, which is 0.50%. `ONE_TENTHS_PERCENT` represents a slippage tolerance of 0.10%.\n\n3. What is the `useMemo` hook used for in this code?\n- The `useMemo` hook is used to memoize the default slippage tolerance value based on whether or not a trade is provided. This helps to optimize performance by avoiding unnecessary re-renders.",
- "checksum": "af95cbec588f6710694f1d985a411578"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useTimestampFromBlock.json b/.autodoc/docs/json/core/src/hooks/useTimestampFromBlock.json
deleted file mode 100644
index f09e69872..000000000
--- a/.autodoc/docs/json/core/src/hooks/useTimestampFromBlock.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useTimestampFromBlock.ts",
- "filePath": "core/src/hooks/useTimestampFromBlock.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useTimestampFromBlock.ts",
- "summary": "The code above is a custom React hook called `useTimestampFromBlock` that retrieves the timestamp of a given block on the Ethereum blockchain. It utilizes the `useEffect` and `useState` hooks from the React library, as well as the `useActiveWeb3React` hook from a separate file.\n\nThe `useTimestampFromBlock` hook takes in a single argument, `block`, which is a number representing the block number to retrieve the timestamp from. If `block` is undefined, the hook will return undefined.\n\nThe hook first retrieves the active Web3 provider using the `useActiveWeb3React` hook. It then initializes a state variable called `timestamp` using the `useState` hook. The `timestamp` variable will hold the retrieved timestamp value.\n\nThe `useEffect` hook is used to fetch the timestamp data asynchronously. It first checks if `block` is defined, and if so, it retrieves the block data using the `getBlock` method from the Web3 library. If the block data is successfully retrieved, the timestamp value is set using the `setTimestamp` method.\n\nThe `useEffect` hook also checks if the `timestamp` state variable is undefined. If it is, it calls the `fetchTimestamp` function to retrieve the timestamp data.\n\nFinally, the hook returns the `timestamp` value, which will be undefined if the `block` argument is undefined or if the timestamp data has not yet been retrieved.\n\nThis hook can be used in a larger project to retrieve the timestamp of a specific block on the Ethereum blockchain. For example, it could be used to display the timestamp of a particular transaction or block on a user interface. Here is an example usage of the hook:\n\n```\nimport { useTimestampFromBlock } from './useTimestampFromBlock'\n\nfunction BlockTimestamp({ blockNumber }) {\n const timestamp = useTimestampFromBlock(blockNumber)\n\n return (\n Current allowance: {allowance}
\n \n \n \n\n Timestamp: {timestamp ? new Date(timestamp * 1000).toLocaleString() : 'Loading...'}\n
\n )\n}\n```\n\nIn this example, the `BlockTimestamp` component takes in a `blockNumber` prop and uses the `useTimestampFromBlock` hook to retrieve the timestamp of that block. The timestamp is then displayed in a user-friendly format using the `toLocaleString` method. If the timestamp has not yet been retrieved, the component will display a \"Loading...\" message.",
- "questions": "1. What is the purpose of this code?\n This code defines a custom hook called `useTimestampFromBlock` that takes a block number as input and returns the timestamp of that block.\n\n2. What is the `useActiveWeb3React` hook used for?\n The `useActiveWeb3React` hook is used to get access to the active Web3 provider and library in the current context.\n\n3. Why is the `timestamp` state variable initialized as undefined?\n The `timestamp` state variable is initialized as undefined because it is only set after fetching the timestamp data asynchronously, and it may not always be set depending on the value of the `block` input.",
- "checksum": "25e589a5d8f49755317170b6db67fad1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useToast.json b/.autodoc/docs/json/core/src/hooks/useToast.json
deleted file mode 100644
index ca4828129..000000000
--- a/.autodoc/docs/json/core/src/hooks/useToast.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useToast.ts",
- "filePath": "core/src/hooks/useToast.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useToast.ts",
- "summary": "The code defines a custom hook called `useToast` that provides a set of functions to display toast notifications in a React application. The hook uses the `useMemo` hook from React to memoize the functions and avoid unnecessary re-renders. It also uses the `useDispatch` hook from the `react-redux` library to dispatch actions to the Redux store.\n\nThe `useToast` hook returns an object with the following functions:\n\n- `toastError`: displays a toast notification with a red background and an error icon. It takes a `title` parameter (required) and an optional `description` parameter.\n- `toastInfo`: displays a toast notification with a blue background and an info icon. It takes a `title` parameter (required) and an optional `description` parameter.\n- `toastWarning`: displays a toast notification with a yellow background and a warning icon. It takes a `title` parameter (required) and an optional `description` parameter.\n- `push`: adds a new toast notification to the Redux store. It takes a `Toast` object as a parameter, which has the following properties:\n - `id`: a unique identifier for the toast (generated from the `title` parameter using the `kebabCase` function from the `lodash` library).\n - `type`: the type of the toast (one of `toastTypes.DANGER`, `toastTypes.INFO`, `toastTypes.SUCCESS`, or `toastTypes.WARNING`).\n - `title`: the title of the toast (required).\n - `description`: an optional description of the toast.\n- `remove`: removes a toast notification from the Redux store. It takes an `id` parameter (the same as the `id` property of the `Toast` object).\n- `clear`: removes all toast notifications from the Redux store.\n\nThis hook can be used in any React component to display toast notifications. For example:\n\n```\nimport React from 'react'\nimport useToast from './useToast'\n\nconst MyComponent = () => {\n const { toastError, toastInfo, toastWarning } = useToast()\n\n const handleClick = () => {\n toastError('Error', 'Something went wrong!')\n toastInfo('Info', 'Here is some information.')\n toastWarning('Warning', 'Be careful!')\n }\n\n return (\n \n )\n}\n\nexport default MyComponent\n```\n\nWhen the button is clicked, three toast notifications will be displayed: one with a red background and an error icon, one with a blue background and an info icon, and one with a yellow background and a warning icon.",
- "questions": "1. What is the purpose of this code?\n- This code defines a custom hook called `useToast` that provides functions for displaying toast notifications using Redux.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several modules from external libraries including `lodash`, `react`, and `react-redux`.\n\n3. What types of toast notifications are available and how are they triggered?\n- This code provides functions for displaying toast notifications with different types including `toastError`, `toastInfo`, and `toastWarning`. These functions take a title and optional description as arguments and dispatch an action to add the toast to the Redux store.",
- "checksum": "4758bf0873a1af59be485175111f8b52"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useToggle.json b/.autodoc/docs/json/core/src/hooks/useToggle.json
deleted file mode 100644
index 85f38e36b..000000000
--- a/.autodoc/docs/json/core/src/hooks/useToggle.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useToggle.ts",
- "filePath": "core/src/hooks/useToggle.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useToggle.ts",
- "summary": "The code above is a custom React hook called `useToggle` that allows for toggling between two states. The hook takes in an optional `initialState` parameter, which defaults to `false`. The hook returns an array with two elements: the current state and a function to toggle the state.\n\nThe `useState` hook is used to create a state variable called `state` and its corresponding `setState` function. The `useCallback` hook is used to memoize the `toggle` function, which toggles the `state` variable between `true` and `false` using the `setState` function.\n\nThis hook can be used in a larger project to toggle between different states, such as showing or hiding a component, changing the color of a button, or switching between different views. Here is an example of how this hook can be used in a React component:\n\n```\nimport React from 'react'\nimport useToggle from './useToggle'\n\nfunction MyComponent() {\n const [isToggled, toggle] = useToggle()\n\n return (\n \n \n {isToggled &&
\n )\n}\n```\n\nIn the example above, the `useToggle` hook is used to toggle the `isToggled` state between `true` and `false` when the button is clicked. The `isToggled` state is used to conditionally render the `Hello World!` message based on whether the button has been toggled or not.\n\nOverall, the `useToggle` hook provides a simple and reusable way to toggle between two states in a React component.",
- "questions": "1. What does this code do?\n This code exports a custom hook called `useToggle` that takes an optional boolean `initialState` and returns an array with the current state and a function to toggle the state.\n\n2. What is the purpose of the `useCallback` hook in this code?\n The `useCallback` hook is used to memoize the toggle function so that it only gets recreated if the dependencies change. In this case, the toggle function has no dependencies, so it will only be created once.\n\n3. What is the significance of the array being returned by the `useToggle` hook?\n The array returned by the `useToggle` hook contains the current state and the toggle function, respectively. This allows the consumer of the hook to easily access and manipulate the state.",
- "checksum": "cdb1c488fde2932266abb81d83e01a5f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useTokenAllowance.json b/.autodoc/docs/json/core/src/hooks/useTokenAllowance.json
deleted file mode 100644
index 2c456ef38..000000000
--- a/.autodoc/docs/json/core/src/hooks/useTokenAllowance.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useTokenAllowance.ts",
- "filePath": "core/src/hooks/useTokenAllowance.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useTokenAllowance.ts",
- "summary": "The code above is a TypeScript module that exports a custom hook function called `useTokenAllowance`. This hook is used to retrieve the current allowance of a specific token for a given owner and spender. The hook is designed to be used in a React component and relies on two other custom hooks: `useSingleCallResult` and `useTokenContract`.\n\nThe `useTokenAllowance` hook takes three optional parameters: `token`, `owner`, and `spender`. The `token` parameter is an instance of the `Token` class from the `@zoolabs/zdk` library, which represents a specific ERC20 token. The `owner` and `spender` parameters are strings that represent the Ethereum addresses of the token owner and spender, respectively.\n\nThe hook first calls the `useTokenContract` hook to retrieve the contract instance for the specified token. It then uses the `useMemo` hook to memoize the `inputs` array, which contains the `owner` and `spender` parameters. This is done to prevent unnecessary re-renders of the component that uses the hook.\n\nThe hook then calls the `useSingleCallResult` hook with the contract instance, the name of the `allowance` function, and the `inputs` array. This hook is used to retrieve the current allowance of the specified token for the given owner and spender.\n\nFinally, the hook returns a `CurrencyAmount` instance from the `@zoolabs/zdk` library that represents the allowance of the specified token. This is done using another `useMemo` hook that memoizes the `token` and `allowance` values.\n\nOverall, this hook is useful for retrieving the current allowance of a specific ERC20 token for a given owner and spender. It can be used in a React component to display the allowance or to perform other actions based on the allowance value. For example, it could be used to enable or disable a button based on whether the allowance is greater than zero. \n\nExample usage:\n\n```\nimport { useTokenAllowance } from './useTokenAllowance'\n\nfunction MyComponent({ token, owner, spender }) {\n const allowance = useTokenAllowance(token, owner, spender)\n\n return (\n Hello World!
}\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n This code defines a custom hook called `useTokenAllowance` that returns the allowance of a token for a specific owner and spender.\n\n2. What external dependencies does this code rely on?\n This code relies on two external dependencies: `@zoolabs/zdk` for `CurrencyAmount` and `Token` types, and `react` for the `useMemo` hook.\n\n3. What is the expected input and output of the `useTokenAllowance` hook?\n The `useTokenAllowance` hook expects three optional parameters: `token` (of type `Token`), `owner` (of type `string`), and `spender` (of type `string`). It returns a `CurrencyAmountCurrent allowance: {allowance?.toSignificant(4)}
\n\n {hasPendingTransactions ? (\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `useTransactionStatus` hook?\n- The `useTransactionStatus` hook is used to determine if there are any pending transactions in the application.\n\n2. What is the significance of the `newTransactionsFirst` function?\n- The `newTransactionsFirst` function is used to sort transactions in descending order based on their `addedTime` property, so that the latest transaction comes first.\n\n3. What is the role of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the sorted recent transactions array, so that it is only recalculated when the `allTransactions` dependency changes.",
- "checksum": "f97fa01ee83f2262abdd391144904050"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useUSDCPrice.json b/.autodoc/docs/json/core/src/hooks/useUSDCPrice.json
deleted file mode 100644
index b302489b5..000000000
--- a/.autodoc/docs/json/core/src/hooks/useUSDCPrice.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useUSDCPrice.ts",
- "filePath": "core/src/hooks/useUSDCPrice.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useUSDCPrice.ts",
- "summary": "The code is a module that exports two React hooks: `useUSDCPrice` and `useUSDCValue`. The purpose of these hooks is to calculate the price of a given currency in USDC and the value of a given currency amount in USDC, respectively. \n\nThe `useUSDCPrice` hook takes a `currency` parameter and returns a `Price` object representing the price of the input currency in USDC. The function first retrieves the current chain ID using the `useActiveWeb3React` hook. It then looks up the corresponding `STABLECOIN_AMOUNT_OUT` value for the current chain ID, which is a large amount of USDC used to filter low liquidity pairs. The function then calls the `useV2TradeExactOut` hook to get the best trade route for swapping the input currency for USDC. If a valid trade route is found, the function returns a `Price` object representing the price of the input currency in USDC based on the trade route. If the input currency is USDC, the function returns a `Price` object representing a price of 1 USDC. Otherwise, the function returns `undefined`.\n\nThe `useUSDCValue` hook takes a `currencyAmount` parameter and returns the value of the input currency amount in USDC. The function first calls the `useUSDCPrice` hook to get the current price of the input currency in USDC. It then uses the `quote` method of the `Price` object to calculate the value of the input currency amount in USDC. If either the price or the currency amount is undefined, the function returns `null`.\n\nThese hooks can be used in a larger project to display the price and value of various currencies in USDC. For example, a trading interface could use these hooks to display the current price of a selected currency in USDC and the estimated value of a user's portfolio in USDC.",
- "questions": "1. What is the purpose of the `useUSDCPrice` function?\n- The `useUSDCPrice` function returns the price in USDC of a given input currency.\n\n2. What is the `STABLECOIN_AMOUNT_OUT` object used for?\n- The `STABLECOIN_AMOUNT_OUT` object contains stablecoin amounts used when calculating spot price for a given currency, with the amount being large enough to filter low liquidity pairs.\n\n3. What is the `useUSDCValue` function used for?\n- The `useUSDCValue` function takes a `CurrencyAmount` and returns its value in USDC based on the current USDC price of the currency.",
- "checksum": "67eb393f52da3eaed55fcd26855144de"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useV2Pairs.json b/.autodoc/docs/json/core/src/hooks/useV2Pairs.json
deleted file mode 100644
index 9956d1281..000000000
--- a/.autodoc/docs/json/core/src/hooks/useV2Pairs.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useV2Pairs.ts",
- "filePath": "core/src/hooks/useV2Pairs.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useV2Pairs.ts",
- "summary": "The code is a module that provides functions for interacting with Uniswap V2 pairs. It exports two functions, `useV2Pairs` and `useV2Pair`, which are React hooks that can be used in a React component to fetch and display information about Uniswap V2 pairs.\n\nThe `useV2Pairs` hook takes an array of pairs of currencies and returns an array of pairs of `PairState` and `Pair` objects. The `PairState` enum represents the state of the pair, which can be one of four values: `LOADING`, `NOT_EXISTS`, `EXISTS`, or `INVALID`. The `Pair` object represents a Uniswap V2 pair and contains information about the reserves of the two tokens in the pair.\n\nThe `useV2Pair` hook is a convenience function that takes two currency objects and returns a single `PairState` and `Pair` object.\n\nThe `useV2Pairs` hook works by first converting the array of currency pairs into an array of token pairs. It then uses the `computePairAddress` function from the `@zoolabs/zdk` library to compute the address of the Uniswap V2 pair for each token pair. It then uses the `useMultipleContractSingleData` hook from the `multicall` module to fetch the reserves of each pair from the Uniswap V2 pair contract. Finally, it maps the results to an array of `PairState` and `Pair` objects.\n\nThe `useV2Pair` hook is a simple wrapper around the `useV2Pairs` hook that takes two currency objects and passes them as an array to `useV2Pairs`. It then returns the first element of the resulting array.\n\nThis module can be used in a React component to display information about Uniswap V2 pairs. For example, a component could use the `useV2Pair` hook to fetch and display the reserves of a specific Uniswap V2 pair. The `PairState` enum can be used to display a loading spinner, an error message, or the pair information depending on the state of the pair.",
- "questions": "1. What is the purpose of the `useV2Pairs` function?\n- The `useV2Pairs` function takes an array of currency pairs and returns an array of pairs with their state (loading, not exists, exists, or invalid).\n\n2. What is the purpose of the `useV2Pair` function?\n- The `useV2Pair` function takes two currency parameters and returns a single pair with its state (loading, not exists, exists, or invalid).\n\n3. What is the significance of the `PairState` enum?\n- The `PairState` enum is used to indicate the state of a pair (loading, not exists, exists, or invalid) and is returned by the `useV2Pairs` and `useV2Pair` functions.",
- "checksum": "82da7fd606071ef8b76befa425ca986b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useV2Trades.json b/.autodoc/docs/json/core/src/hooks/useV2Trades.json
deleted file mode 100644
index af69d7ed6..000000000
--- a/.autodoc/docs/json/core/src/hooks/useV2Trades.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useV2Trades.ts",
- "filePath": "core/src/hooks/useV2Trades.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useV2Trades.ts",
- "summary": "The code in this file provides functions for finding the best trades for exchanging tokens in a decentralized exchange. The functions use the `@zoolabs/zdk` library to perform the trades. \n\nThe `useAllCommonPairs` function takes two optional currency parameters and returns an array of valid pairs that can be used for trading. It uses the `useAllCurrencyCombinations` function to get all possible currency combinations and then filters out invalid and duplicated pairs. The resulting array of pairs is memoized to improve performance.\n\nThe `useV2TradeExactIn` function takes a `currencyAmountIn` parameter and a `currencyOut` parameter, and returns the best trade for exchanging the exact amount of `currencyAmountIn` to `currencyOut`. It uses the `useAllCommonPairs` function to get the valid pairs and then searches for the best trade using the `Trade.bestTradeExactIn` method from the `@zoolabs/zdk` library. The function can take an optional `maxHops` parameter to limit the number of hops in the trade. If `maxHops` is greater than 1, the function searches for the best trade with varying hops and returns the best one. The function returns `null` if there are no valid pairs or if the trade cannot be executed.\n\nThe `useV2TradeExactOut` function is similar to `useV2TradeExactIn`, but it takes a `currencyIn` parameter and a `currencyAmountOut` parameter instead. It returns the best trade for exchanging `currencyIn` to the exact amount of `currencyAmountOut`. It also takes an optional `maxHops` parameter to limit the number of hops in the trade.\n\nBoth `useV2TradeExactIn` and `useV2TradeExactOut` use the `isTradeBetter` function from the `../functions/trade` module to compare trades and find the best one. The `BETTER_TRADE_LESS_HOPS_THRESHOLD` constant from the `../constants` module is used as a threshold for determining if a trade is better than another. \n\nThese functions can be used in a larger project that involves trading tokens in a decentralized exchange. They provide a convenient way to find the best trades for exchanging tokens and can be used to build more complex trading strategies. For example, a trading bot could use these functions to find the best trades and execute them automatically. \n\nExample usage:\n\n```\nimport { useV2TradeExactIn } from './useV2Trades'\n\nconst currencyAmountIn = new CurrencyAmount(Currency.ETH, '1')\nconst currencyOut = Currency.USDC\n\nconst bestTrade = useV2TradeExactIn(currencyAmountIn, currencyOut)\n\nconsole.log(bestTrade)\n// Output: TradeThere are pending transactions. Please wait...
\n ) : (\n \n )}\n\n
\n )\n}\n```",
- "questions": "1. What does the `useWindowSize` function do?\n- The `useWindowSize` function is a custom React hook that returns the current size of the browser window as an object with `width` and `height` properties.\n\n2. What is the purpose of the `getSize` function?\n- The `getSize` function returns an object with the current `width` and `height` of the browser window, or `undefined` if the code is not running in a browser environment.\n\n3. Why is the `isClient` variable used in this code?\n- The `isClient` variable is used to check if the code is running in a browser environment by checking if the `window` object exists. This is necessary because the `window` object is not available in server-side rendering or other non-browser environments.",
- "checksum": "ece785afdea60348805fcb875e8efbec"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useWrapCallback.json b/.autodoc/docs/json/core/src/hooks/useWrapCallback.json
deleted file mode 100644
index 82bd85b20..000000000
--- a/.autodoc/docs/json/core/src/hooks/useWrapCallback.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useWrapCallback.ts",
- "filePath": "core/src/hooks/useWrapCallback.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useWrapCallback.ts",
- "summary": "The `useWrapCallback` function in the `zoo` project is responsible for returning a wrap callback given the selected input and output currency. It is a React hook that takes in three parameters: `inputCurrency`, `outputCurrency`, and `typedValue`. It returns an object with three properties: `wrapType`, `execute`, and `inputError`.\n\nThe `useWrapCallback` function imports several modules from the `zdk` and `wallet` directories. It also imports the `useMemo` hook from React, which is used to memoize the result of the function.\n\nThe `useWrapCallback` function first retrieves the `chainId` and `account` from the `useActiveWeb3React` hook. It then retrieves the `wethContract` and `balance` using the `useWETH9Contract` and `useCurrencyBalance` hooks, respectively. The `inputAmount` is calculated using the `tryParseAmount` function from the `parse` module.\n\nThe function then returns a memoized object based on the input and output currencies. If the `wethContract`, `chainId`, `inputCurrency`, or `outputCurrency` is undefined, or if the `chainId` is `ChainId.CELO`, the function returns an object with `wrapType` set to `WrapType.NOT_APPLICABLE`. If the input currency is native and the output currency is WETH, the function returns an object with `wrapType` set to `WrapType.WRAP`. If the input currency is WETH and the output currency is native, the function returns an object with `wrapType` set to `WrapType.UNWRAP`. Otherwise, the function returns an object with `wrapType` set to `WrapType.NOT_APPLICABLE`.\n\nIf `wrapType` is `WrapType.WRAP`, the `execute` property is set to an async function that wraps the input amount of native currency to WETH. If `wrapType` is `WrapType.UNWRAP`, the `execute` property is set to an async function that unwraps the input amount of WETH to native currency. If `wrapType` is `WrapType.NOT_APPLICABLE`, the `execute` property is undefined.\n\nIf there is insufficient balance to execute the wrap or unwrap, the `inputError` property is set to an error message. Otherwise, the `inputError` property is undefined.\n\nThis function is used in the larger project to provide a wrap callback for the selected input and output currencies. It is used in conjunction with other functions and components to enable users to wrap and unwrap their native currency to and from WETH. For example, it may be used in a form where users can enter the amount of native currency they want to wrap or unwrap, and then click a button to execute the transaction.",
- "questions": "1. What is the purpose of this code?\n- This code defines a function called `useWrapCallback` that returns an object with information about whether a wrap or unwrap operation can be executed based on the selected input and output currencies, as well as the user input value.\n\n2. What external dependencies does this code have?\n- This code imports several functions and hooks from other files in the `zoo` project, as well as two constants from an external library called `@zoolabs/zdk`.\n\n3. What is the expected input and output of the `useWrapCallback` function?\n- The `useWrapCallback` function takes in three optional parameters: `inputCurrency`, `outputCurrency`, and `typedValue`. It returns an object with three properties: `wrapType`, `execute`, and `inputError`. The `wrapType` property is an enum that indicates whether the operation is a wrap, unwrap, or not applicable. The `execute` property is a function that executes the wrap or unwrap operation, if possible. The `inputError` property is a string that describes any errors with the user input value.",
- "checksum": "56f3e9ce25b3f98d91f9fba98436a62f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/useXSushiPerSushi.json b/.autodoc/docs/json/core/src/hooks/useXSushiPerSushi.json
deleted file mode 100644
index 426efb002..000000000
--- a/.autodoc/docs/json/core/src/hooks/useXSushiPerSushi.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useXSushiPerSushi.ts",
- "filePath": "core/src/hooks/useXSushiPerSushi.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/useXSushiPerSushi.ts",
- "summary": "This code is a module that exports a function called `useSushiPerXSushi`. The function uses the `useSWR` hook from the `swr` library to fetch data from a GraphQL API endpoint. The API endpoint is specified in the `fetcher` function, which uses the `request` function from the `graphql-request` library to make a request to the endpoint. The query that is sent to the endpoint is defined in the `QUERY` constant.\n\nThe purpose of this code is to retrieve the ratio of XSushi to Sushi tokens from the GraphQL API endpoint and return it as a floating-point number. The ratio is obtained from the `ratio` field of the `bar` object, which is returned by the GraphQL query. The `parse` parameter is used to determine whether the ratio should be returned as a string or a floating-point number. If `parse` is `true`, the ratio is parsed as a floating-point number using the `parseFloat` function.\n\nThis code can be used in the larger project to retrieve the current ratio of XSushi to Sushi tokens, which is an important metric for the SushiSwap decentralized exchange. The `useSushiPerXSushi` function can be imported and used in other modules to obtain the ratio and use it for various purposes, such as calculating the price of Sushi tokens in terms of XSushi tokens. Here is an example of how the function can be used:\n\n```\nimport useSushiPerXSushi from 'zoo'\n\nfunction MyComponent() {\n const ratio = useSushiPerXSushi()\n const price = 100 * ratio // calculate price of 100 Sushi tokens in XSushi tokens\n return Window width: {width}
\nWindow height: {height}
\nCurrent XSushi:Sushi ratio is {ratio}. Price of 100 Sushi tokens is {price} XSushi tokens.
\n}\n```",
- "questions": "1. What is the purpose of the `graphql-request` and `swr` libraries being imported?\n- The `graphql-request` library is used to make a GraphQL API request to retrieve data, while the `swr` library is used for data fetching and caching.\n\n2. What is the `QUERY` constant and what data is being requested?\n- The `QUERY` constant is a GraphQL query string that requests the `ratio` field of the `bar` object with a specific `id` value.\n\n3. What does the `useSushiPerXSushi` function do and what does the `parse` parameter do?\n- The `useSushiPerXSushi` function uses the `useSWR` hook to fetch data using the `QUERY` constant and `fetcher` function. It then returns the `ratio` value of the `bar` object. The `parse` parameter is optional and if set to `true`, it will parse the `ratio` value as a float before returning it.",
- "checksum": "a4bddc2a2c769aa1a94802a37291c43f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/hooks/webReact.json b/.autodoc/docs/json/core/src/hooks/webReact.json
deleted file mode 100644
index 62e6ae116..000000000
--- a/.autodoc/docs/json/core/src/hooks/webReact.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "webReact.ts",
- "filePath": "core/src/hooks/webReact.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/hooks/webReact.ts",
- "summary": "The code above is a module that exports two functions: `getLibrary` and `signMessage`. The purpose of this module is to provide utility functions for interacting with the Ethereum blockchain using the `ethers.js` library.\n\nThe `getLibrary` function takes a provider object as an argument and returns a `Web3Provider` instance. The `Web3Provider` is a class provided by the `ethers.js` library that wraps a `JsonRpcProvider` and provides additional functionality for interacting with the Ethereum blockchain. The `pollingInterval` property of the `Web3Provider` instance is set to 12000 milliseconds (12 seconds) to control how often the provider should poll the blockchain for updates. This function can be used to create a `Web3Provider` instance that can be used to interact with the Ethereum blockchain.\n\nThe `signMessage` function takes a message, an account address, and a wallet object as arguments and returns a signature. The `getSigner` function is imported from another module and is used to get a signer object from the wallet object. The `signMessage` method of the signer object is then called with the message as an argument to generate a signature. This function can be used to sign a message using a wallet object and an account address.\n\nThere is also a commented out function called `handleSignMessage` that takes an object with a `message` and `library` property as an argument. This function is not used in the current implementation and is likely a work in progress or a remnant of previous development.\n\nOverall, this module provides useful utility functions for interacting with the Ethereum blockchain using the `ethers.js` library. The `getLibrary` function can be used to create a `Web3Provider` instance, and the `signMessage` function can be used to sign messages using a wallet object and an account address.",
- "questions": "1. What external libraries or dependencies does this code use?\n- This code imports `BaseProvider`, `ExternalProvider`, `JsonRpcFetchFunc`, and `Web3Provider` from the `@ethersproject/providers` library, and `getSigner` from a custom `functions/contract` module.\n\n2. What does the `getLibrary` function do?\n- The `getLibrary` function takes an `ExternalProvider` or `JsonRpcFetchFunc` as input, creates a new `Web3Provider` instance with the input as its provider, sets the polling interval to 12 seconds, and returns the new `Web3Provider` instance.\n\n3. What does the `signMessage` function do?\n- The `signMessage` function takes a `message` string, an `account` string, and a `BaseProvider`, `Web3Provider`, or any other object as input, and uses the `getSigner` function to sign the message with the specified account and wallet. It then returns the resulting signature.",
- "checksum": "6f0b8a92d8281f60a56489457ad0bc67"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/ipfs/localhost.json b/.autodoc/docs/json/core/src/ipfs/localhost.json
deleted file mode 100644
index 6837fed42..000000000
--- a/.autodoc/docs/json/core/src/ipfs/localhost.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "localhost.json",
- "filePath": "core/src/ipfs/localhost.json",
- "url": "zoo-labs/zoo/blob/master/core/src/ipfs/localhost.json",
- "summary": "The code above is a JSON object that contains information about various files related to the zoo project. Each file has a name, URL, IPFS, and hash. The purpose of this code is to provide a way to access these files from within the project. \n\nThe files are all related to the zoo project, and they are all media files. There are three images and three videos. The images are named \"validator.jpg\", \"wallet.jpg\", and \"atm.jpg\". The videos are named \"validator.mp4\", \"wallet.mp4\", and \"atm.mp4\". \n\nThe URLs and IPFS addresses in the code can be used to access the files from within the project. For example, if the project has a web interface, the URLs could be used to display the images and videos on the website. The hash values can be used to verify the integrity of the files. \n\nHere is an example of how this code could be used in the larger project:\n\n```javascript\n// Access the validator image URL\nconst validatorImageUrl = zoo[\"validator.jpg\"].url;\n\n// Display the validator image on the website\nconst validatorImage = document.createElement(\"img\");\nvalidatorImage.src = validatorImageUrl;\ndocument.body.appendChild(validatorImage);\n\n// Verify the hash of the validator image\nconst validatorImageHash = zoo[\"validator.jpg\"].hash;\nverifyHash(validatorImageUrl, validatorImageHash);\n```\n\nIn this example, we access the URL of the validator image from the `zoo` object. We then create an `img` element and set its `src` attribute to the URL. Finally, we append the image to the `body` of the document. We also verify the hash of the image using the `verifyHash` function. \n\nOverall, this code provides a way to access and verify media files related to the zoo project. It can be used to display images and videos on the project's website, or to verify the integrity of the files.",
- "questions": "1. What is the purpose of this code?\n - This code defines a set of files related to a project called \"zoo\", including images and videos, along with their URLs and IPFS hashes.\n\n2. What is the significance of the \"__type\" key in each object?\n - The \"__type\" key indicates that each object is of type \"File\", which is likely a custom data type used within the project.\n\n3. What is the difference between the \"url\" and \"ipfs\" keys for each file?\n - The \"url\" key provides a direct URL to access the file, while the \"ipfs\" key provides a URL to access the file via the InterPlanetary File System (IPFS), which is a decentralized file storage system.",
- "checksum": "167fe93eeb1ebaed0b4bb2af31893384"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/layouts/Dao/index.json b/.autodoc/docs/json/core/src/layouts/Dao/index.json
deleted file mode 100644
index f5f3bdbe9..000000000
--- a/.autodoc/docs/json/core/src/layouts/Dao/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/layouts/Dao/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/layouts/Dao/index.tsx",
- "summary": "The code above is a React component called `DaoLayout` that serves as a layout for a specific page in the larger project. It imports several components from the project's `components` directory, including `Banner`, `Footer`, `Header`, `Main`, and `Popups`. It also imports two functions from the project's `hooks` and `state/network/actions` directories, respectively.\n\nThe `DaoLayout` component takes two props: `children` and `banner`. The `children` prop represents the content that will be rendered within the `Main` component, while the `banner` prop represents an optional banner that can be passed to the `Header` component.\n\nThe component uses the `useActiveWeb3React` hook to get access to the `library` object, which is used to update the gas price for the current network. This is done by calling the `updateGasPrice` function from the `state/network/actions` directory with the `library` object as an argument. This function updates the gas price in the project's Redux store.\n\nThe `DaoLayout` component returns a JSX element that contains the imported components and the `children` prop. The `Header` component is passed the `transparent` prop with a value of `true` and the `banner` prop, if it exists. The `Main` component is passed the `isModal` prop with a value of `false` and the `bgColor` prop with a value of `dao-bg`. The `Popups` and `Footer` components are also included.\n\nThis component can be used as a layout for any page in the project that requires a header, main content area, popups, and footer. It also updates the gas price for the current network, which is important for any transactions that may occur on the page. An example usage of this component would be:\n\n```\nimport DaoLayout from \"./path/to/DaoLayout\";\n\nconst MyPage = () => {\n return (\n Welcome to My Page
\nThis is some content for my page.
\nWelcome to the Zoo!
\nExplore our collection of exotic animals.
\n \n );\n};\n\nexport default HomePage;\n```", - "questions": "1. What is the purpose of the `Layout` component?\n- The `Layout` component is responsible for rendering the main layout of the application, including the header, main content, popups, and footer.\n\n2. What is the significance of the `useEffect` hook in this code?\n- The `useEffect` hook is used to update the gas price in the network state whenever the `library` object changes. \n\n3. What is the purpose of the `bg` prop in the `Layout` component?\n- The `bg` prop is used to set the background color of the main content area, with a default value of black.", - "checksum": "ea4c38392f5f29d90720a3c5cc3ca400" -} \ No newline at end of file diff --git a/.autodoc/docs/json/core/src/layouts/Drop/index.json b/.autodoc/docs/json/core/src/layouts/Drop/index.json deleted file mode 100644 index d76c97570..000000000 --- a/.autodoc/docs/json/core/src/layouts/Drop/index.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "index.tsx", - "filePath": "core/src/layouts/Drop/index.tsx", - "url": "zoo-labs/zoo/blob/master/core/src/layouts/Drop/index.tsx", - "summary": "This code defines a React component called `DropLayout` that is used to render a layout for a specific page in the larger project. The component imports several other components from the project's `components` directory, including `Footer`, `Header`, `Main`, and `Popups`. It also imports a custom hook called `useActiveWeb3React` and an action creator function called `updateGasPrice` from the project's `hooks` and `state/network/actions` directories, respectively.\n\nThe `DropLayout` component takes three props: `children`, `banner`, and `isMarginTop`. The `children` prop is used to render any child components that are passed to `DropLayout`. The `banner` prop is an optional prop that can be used to specify a banner image for the page. The `isMarginTop` prop is a boolean that determines whether or not to add a top margin to the `Main` component.\n\nThe `useEffect` hook is used to call the `updateGasPrice` function whenever the `library` object (which is obtained from the `useActiveWeb3React` hook) changes. This function is responsible for updating the gas price used for transactions on the Ethereum network.\n\nThe `return` statement renders the layout for the page. It consists of a `div` element that contains the `Header`, `Main`, `Popups`, and `Footer` components. The `Header` component is rendered with a transparent background and the `banner` prop (if provided). The `Main` component is rendered with a background color of \"bg-drop\" and the `children` prop. The `Popups` component is used to render any popups that may appear on the page. Finally, the `Footer` component is rendered at the bottom of the page.\n\nThis component can be used in the larger project to provide a consistent layout for pages that require a banner image, a specific background color, and a fixed set of components (i.e. `Header`, `Main`, `Popups`, and `Footer`). Developers can use this component by importing it and passing any necessary props to it. For example:\n\n```\nimport DropLayout from \"./DropLayout\";\n\nfunction MyPage() {\n return (\nWelcome to My Page
\nThis is some content for my page.
\nWelcome to my page!
\nThis is some content.
\n \n );\n}\n```", - "questions": "1. What is the purpose of the `Layout` component?\n- The `Layout` component is responsible for rendering the overall layout of the application, including the header, main content, and footer.\n\n2. What are the optional props that can be passed to the `Layout` component?\n- The `Layout` component accepts three optional props: `left`, `children`, and `right`. `left` and `right` are JSX elements that will be rendered in the left and right columns of the layout, respectively. `children` is a React child or an array of React children that will be rendered in the main content area.\n\n3. What is the purpose of the `useRouter` hook from the `next/router` module?\n- The `useRouter` hook is used to access the Next.js router object, which provides information about the current route and allows for programmatic navigation. In this code, it is used to determine the current route and apply appropriate styling to the navigation links.", - "checksum": "0402e4e701f93c8eec736e763e76c5cf" -} \ No newline at end of file diff --git a/.autodoc/docs/json/core/src/layouts/Miso/index.json b/.autodoc/docs/json/core/src/layouts/Miso/index.json deleted file mode 100644 index bd9533e86..000000000 --- a/.autodoc/docs/json/core/src/layouts/Miso/index.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "index.tsx", - "filePath": "core/src/layouts/Miso/index.tsx", - "url": "zoo-labs/zoo/blob/master/core/src/layouts/Miso/index.tsx", - "summary": "The code above defines a React component called `Layout` that is used to render the layout of a web page. The component imports three other components: `Footer`, `Header`, and `Popups`. These components are located in the `components` directory of the `zoo` project, which suggests that this `Layout` component is part of a larger web application.\n\nThe `Layout` component takes a single prop called `children`, which is used to render the content of the web page. The `children` prop is enclosed in empty tags (`<>...`) to allow for the rendering of multiple child components.\n\nThe `Layout` component returns a `div` element that has a class of `z-0` and is styled to be a flex container with a column direction (`flex-col`). The `div` element takes up the full width and height of the screen and has both horizontal and vertical scrolling enabled. \n\nInside the `div` element, there are four child components: `Header`, `main`, `Popups`, and `Footer`. The `Header` component is rendered with a prop called `banner` set to `false`, which suggests that the `Header` component may have a banner that can be toggled on or off. The `main` component is a flex container that takes up the remaining space in the `div` element and is styled to grow to the maximum height of its content. The `Popups` component is used to render any popups that may appear on the web page, and the `Footer` component is used to render the footer of the web page.\n\nOverall, the `Layout` component is a reusable component that can be used to render the layout of any web page in the `zoo` project. It provides a consistent layout across all pages and allows for the easy rendering of child components. Here is an example of how the `Layout` component can be used:\n\n```\nimport Layout from \"./Layout\";\nimport HomePage from \"./HomePage\";\n\nconst App = () => {\n return (\nThis is the content of my modal window.
\n\n {isEditing ? (\n
\n )\n}\n\nexport default BidItemContainer\n```\n\nIn this example, the `BidItemContainer` component renders either the `BidItem` component or the `BidEditable` component depending on whether the user is editing the bid item or not. When the user clicks on the bid item, the `handleEditClick` function is called, which sets the `isEditing` state to `true`. This causes the `BidEditable` component to be rendered instead of the `BidItem` component. \n\nOverall, the `BidEditable` component provides a way for users to edit bid items in the larger project.",
- "questions": "1. What is the purpose of the `GraphBid` type and where is it defined?\n- The `GraphBid` type is imported from the `types` module, but it's unclear what properties or methods it contains or what its purpose is within the `BidEditable` component.\n\n2. What is the `BidItem` component and how is it used within `BidEditable`?\n- It's unclear what the `BidItem` component does or how it's implemented, but it's being passed a `bid` prop from `BidEditable`.\n\n3. What is the expected output or behavior of the `BidEditable` component?\n- It's unclear what the purpose of the `BidEditable` component is or how it's intended to be used within the larger `zoo` project.",
- "checksum": "3d66c754a3cc01789b56c1e5cd3dd6f6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/BidItem.json b/.autodoc/docs/json/core/src/marketplace/BidItem.json
deleted file mode 100644
index 2b3ffb310..000000000
--- a/.autodoc/docs/json/core/src/marketplace/BidItem.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BidItem.tsx",
- "filePath": "core/src/marketplace/BidItem.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/BidItem.tsx",
- "summary": "The `BidItem` component is a React component that renders a single bid item. It takes in a `bid` object, which contains information about the bid, such as the bidder, the amount, and the currency used. It also takes in some optional props, such as `showToken`, `summary`, and `onClick`, which determine how the bid item is displayed and what actions can be taken on it.\n\nThe component first imports various dependencies, such as icons, tokens, and hooks, that are used throughout the component. It then defines the `BidProps` type, which specifies the shape of the `bid` object and the optional props.\n\nThe `BidItem` component then defines its state using the `useState` hook. It keeps track of the formatted amount of the bid and the currency token used. It also uses the `useEffect` hook to update the currency token when the `chainId` changes.\n\nThe component then renders the bid item using JSX. It displays information about the bid, such as the bidder, the bid amount, and the currency used. It also displays a token ID if `showToken` is true. Additionally, it displays a time ago timestamp and an eye icon if `onClick` is defined.\n\nOverall, the `BidItem` component is a reusable component that can be used to display a single bid item in a larger project. It takes in a `bid` object and optional props to customize its display and functionality. It uses various dependencies and hooks to manage its state and render the bid item. Here is an example usage of the `BidItem` component:\n\n```jsx\nimport BidItem from './BidItem'\n\nconst bid = {\n bidder: {\n id: '0x1234567890123456789012345678901234567890'\n },\n amount: '1000000000000000000',\n currency: {\n id: '0x0000000000000000000000000000000000000000'\n },\n media: {\n contentURI: 'ipfs://Qm...'\n },\n createdAtTimestamp: '1620000000'\n}\n\nconst MyComponent = () => {\n return (\n \n
\n )}\n \n console.log(bid)} />\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `BidItem` component?\n- The `BidItem` component is used to display information about a bid, including the bidder's address, bid amount, and currency token.\n\n2. What external libraries are being used in this file?\n- The file is importing several external libraries, including `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, and `react-timeago`.\n\n3. What is the purpose of the `useEffect` hook in this file?\n- The `useEffect` hook is used to update the `currencyToken` and `formattedAmount` state variables when the `chainId` changes. This is done by calling the `getCurrencyTokenLowerCase` and `formatCurrencyAmountWithCommas` functions, respectively.",
- "checksum": "5b75ed48c10b8c20f0662cdca28e16b9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/BidList.json b/.autodoc/docs/json/core/src/marketplace/BidList.json
deleted file mode 100644
index d711d651f..000000000
--- a/.autodoc/docs/json/core/src/marketplace/BidList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BidList.tsx",
- "filePath": "core/src/marketplace/BidList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/BidList.tsx",
- "summary": "The code above is a React component called `BidList` that fetches a list of bids from a GraphQL API and renders them as a list of `BidItem` components. The component takes in several props, including `where`, `empty`, `showToken`, and `onClick`. \n\nThe `where` prop is an object that can contain filters for the bids to fetch. The `empty` prop is a JSX element to render if there are no bids to display. The `showToken` prop is a boolean that determines whether to display the token associated with each bid. The `onClick` prop is a function to call when a bid is clicked.\n\nThe component uses the `useQuery` hook from the `@apollo/client` library to fetch the bids from the GraphQL API. The GraphQL query is defined using the `gql` template literal tag and is stored in the `GET_BIDS` constant. The query fetches the `id`, `amount`, `createdAtTimestamp`, `currency`, `bidder`, and `media` fields for each bid.\n\nThe `useQuery` hook takes in the `GET_BIDS` query and an object of variables to pass to the query. The `where` object is spread into the variables object and the `bidder` and `media` fields are converted to lowercase. The `fetchPolicy` option is set to `'no-cache'` to ensure that the query is always sent to the server. The `pollInterval` option is set to `10000` to refetch the bids every 10 seconds.\n\nThe `loading`, `error`, and `data` variables are destructured from the result of the `useQuery` hook. The `bids` variable is set to the `data.bids` array or an empty array if `data` is falsy.\n\nThe component conditionally renders the `BidItem` components for each bid in the `bids` array. If there are no bids, it renders the `empty` prop or a default message. The `getUsdAmount` function is passed to each `BidItem` component to convert the bid amount to USD if necessary.\n\nThis component can be used in a larger project to display a list of bids for a particular media asset or bidder. The `where` prop can be used to filter the bids by media or bidder ID. The `showToken` prop can be used to display the token associated with each bid. The `onClick` prop can be used to handle click events on each bid.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `BidList` that queries a GraphQL API for a list of bids and renders them using the `BidItem` component.\n\n2. What is the structure of the GraphQL query being used?\n- The query is called `GetBids` and takes two variables: `where` and `first`. It returns a list of bids with various fields such as `id`, `amount`, `createdAtTimestamp`, and nested objects like `currency`, `bidder`, and `media`.\n\n3. What is the purpose of the `usePrice` hook being imported?\n- The `usePrice` hook is used to get the USD value of a given token. It is likely used to display the USD value of bids in the `BidList` component.",
- "checksum": "f97e1399e0d060e7b84912402a521bc8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/BidModal.json b/.autodoc/docs/json/core/src/marketplace/BidModal.json
deleted file mode 100644
index 9d709a404..000000000
--- a/.autodoc/docs/json/core/src/marketplace/BidModal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BidModal.tsx",
- "filePath": "core/src/marketplace/BidModal.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/BidModal.tsx",
- "summary": "The `BidModal` component is a React component that renders a modal window for displaying information about a bid on a media asset. The component takes three props: `bid`, `isOpen`, and `onClose`. The `bid` prop is an object that contains information about the bid, including the bidder, the owner of the media asset, the currency used for the bid, and the ID of the media asset. The `isOpen` prop is a boolean that determines whether the modal window is open or closed. The `onClose` prop is a function that is called when the modal window is closed.\n\nThe component imports several other components and functions from other files in the project. These include `Modal`, `ModalHeader`, `useActiveWeb3React`, `getContent`, `usePrice`, `formatCurrencyAmountWithCommas`, `isSameAddress`, `shortenAddress`, `RemoveBidButton`, `useContract`, `BidItem`, and `AcceptBidButton`.\n\nThe component uses the `useActiveWeb3React` hook to get the current user's account address. It also uses the `useContract` hook to get a reference to the `Market` contract. The component then uses the `useEffect` hook to call the `bidForTokenBidder` function on the `Market` contract to check whether the bid is offline. If the bid is offline, the component sets the `offline` state to `true`.\n\nThe component then uses several callback functions to determine whether the current user is the bidder or the owner of the media asset. If the current user is the bidder, the component displays a message indicating that the bidder's address will be refunded if the bid is removed. If the current user is the owner, the component displays buttons for removing or accepting the bid.\n\nThe component returns a `Modal` component that contains a `ModalHeader` component, a `BidItem` component, and buttons for removing or accepting the bid. The `Modal` component is a reusable component that provides a modal window for displaying content. The `ModalHeader` component is a reusable component that provides a header for the modal window. The `BidItem` component is a custom component that displays information about the bid, including the bidder, the amount of the bid, and the currency used for the bid. The buttons for removing or accepting the bid are custom components that call functions on the `Market` contract to remove or accept the bid.\n\nOverall, the `BidModal` component provides a user interface for managing bids on media assets in the `zoo` project. It uses several reusable components and custom functions to display information about the bid and allow the user to remove or accept the bid.",
- "questions": "1. What is the purpose of this code?\n- This code is for a BidModal component that displays bid information and allows the user to remove or accept a bid.\n\n2. What external dependencies does this code have?\n- This code imports several components and functions from other files, including Modal, ModalHeader, useActiveWeb3React, getContent, usePrice, isSameAddress, shortenAddress, RemoveBidButton, AcceptBidButton, and BidItem.\n\n3. What is the significance of the \"offline\" state variable?\n- The \"offline\" state variable is used to determine whether a bid was made offline (i.e. not through the app) and display a message to the bidder if the bid is removed. It is set based on the result of a call to the \"bidForTokenBidder\" function from the \"Market\" contract.",
- "checksum": "eae45be40a47d7a1bc0aca430a29d9ae"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/BidsModal/index.json b/.autodoc/docs/json/core/src/marketplace/BidsModal/index.json
deleted file mode 100644
index 79ed382ab..000000000
--- a/.autodoc/docs/json/core/src/marketplace/BidsModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/marketplace/BidsModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/BidsModal/index.tsx",
- "summary": "The code defines a React component called `BidsModal` that renders a modal window for editing auction bids. The component takes a single prop called `CloseEvent`, which is a function that is called when the user clicks the close button on the modal. \n\nThe modal window is a fixed-size container with a black background and white text. It is positioned in the center of the screen using absolute positioning. The window contains several input fields for editing the auction details, including the current bid, start date, and end date. \n\nThe `useState` hook is used to manage the state of the modal window. The `isOpen` state variable is initialized to `false`, indicating that the modal is initially closed. \n\nWhen the component is rendered, it returns the JSX code that defines the modal window. The `CloseEvent` function is passed to the close button's `onClick` event handler, so that it is called when the user clicks the button. \n\nThe `BidsModal` component can be used in a larger project to allow users to edit auction details. For example, it could be used in an online auction platform to allow sellers to update the start and end dates of their auctions, or to adjust the current bid price. \n\nHere is an example of how the `BidsModal` component could be used in a larger React application:\n\n```jsx\nimport React, { useState } from 'react';\nimport BidsModal from './BidsModal';\n\nfunction AuctionDetails() {\n const [showModal, setShowModal] = useState(false);\n\n function handleEditClick() {\n setShowModal(true);\n }\n\n function handleCloseModal() {\n setShowModal(false);\n }\n\n return (\n \n
\n );\n}\n```\n\nIn this example, the `AuctionDetails` component renders a button that opens the `BidsModal` when clicked. The `showModal` state variable is used to determine whether the modal should be displayed. When the user clicks the close button on the modal, the `handleCloseModal` function is called, which sets `showModal` to `false` and hides the modal.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `BidsModal` that renders a modal for editing auction details.\n\n2. What props does the `BidsModal` component accept?\n- The `BidsModal` component accepts a prop called `CloseEvent`, which is a function that is called when the user clicks the \"X\" button to close the modal.\n\n3. What are some of the UI elements that are rendered by the `BidsModal` component?\n- The `BidsModal` component renders several UI elements, including a header with a title and a close button, input fields for the current bid and start/end dates, and a \"Save Changes\" button.",
- "checksum": "af9ebb071b975853cbb719de44ecb7bc"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/Cards/BidsCard.json b/.autodoc/docs/json/core/src/marketplace/Cards/BidsCard.json
deleted file mode 100644
index 0e90e6932..000000000
--- a/.autodoc/docs/json/core/src/marketplace/Cards/BidsCard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BidsCard.tsx",
- "filePath": "core/src/marketplace/Cards/BidsCard.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/Cards/BidsCard.tsx",
- "summary": "The `BidsCard` component is a React component that renders a card displaying information about an auction. The component takes in several props, including `glb`, `usdz`, `itemId`, `ownerAdd`, `CurrentBid`, `StartingBid`, `greenNum`, `AuctionTime`, `typeOfNft`, and `bid`. \n\nThe component uses the `useRouter` hook from the `next/router` module to handle navigation to other pages in the application. It also uses two custom hooks, `useEditAuctionModalToggle` and `useIncreaseBidModalToggle`, from the `state/application/hooks` module to toggle the visibility of modals for editing auctions and increasing bids, respectively.\n\nThe component renders two columns of information. The left column displays a 3D model of the item being auctioned using the `ModelViewer` component from the `../../components/ModelViewer` module. The right column displays information about the auction, including the type of NFT being auctioned, the owner's address, the current bid, the reserve price, the time remaining in the auction, and buttons for editing the auction or increasing the bid.\n\nThe `handleFunc` function is called when the user clicks on one of the buttons. If the `bid` prop is `true`, the function toggles the visibility of the \"increase bid\" modal using the `toggleIncreaseBidModal` function. Otherwise, it toggles the visibility of the \"edit auction\" modal using the `toggleEditAuctionModal` function.\n\nOverall, the `BidsCard` component provides a reusable way to display information about auctions in the larger project. Developers can use this component to render auction information on various pages throughout the application. For example, the component could be used on a marketplace page to display information about items currently up for auction. \n\nExample usage:\n\n```\nimport BidsCard from \"zoo/components/BidsCard\";\n\nfunction AuctionPage() {\n return (\n Auction Details
\nCurrent bid: 1 ETH
\n \n {showModal &&\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `BidsCard` component?\n- The `BidsCard` component is used to display information about an auction item, including its image, owner, current and starting bid, auction time, and type of NFT. It also includes buttons to increase the bid or edit the auction, as well as a button to view the item or bid.\n\n2. What is the purpose of the `ModelViewer` component?\n- The `ModelViewer` component is imported from `../../components/ModelViewer` and is used to display a 3D model of the auction item. It is wrapped in a `div` with a fixed width and height and a rounded border.\n\n3. What are the `useEditAuctionModalToggle` and `useIncreaseBidModalToggle` hooks used for?\n- These hooks are imported from `state/application/hooks` and are used to toggle the visibility of the \"Edit Auction\" and \"Increase Bid\" modals, respectively. They are called when the corresponding button is clicked in the `handleFunc` function, which checks whether the `bid` prop is true or false.",
- "checksum": "4e0ec09807967ac177279c4c3d4a832f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/Cards/CardNft.json b/.autodoc/docs/json/core/src/marketplace/Cards/CardNft.json
deleted file mode 100644
index f399e876b..000000000
--- a/.autodoc/docs/json/core/src/marketplace/Cards/CardNft.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CardNft.tsx",
- "filePath": "core/src/marketplace/Cards/CardNft.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/Cards/CardNft.tsx",
- "summary": "The `CardNft` component is a React component that renders a card displaying information about a specific NFT (non-fungible token) auction. The component takes in several props, including the `nft` prop, which is an object containing information about the NFT auction, such as its name, animation URL, reserve price, and highest bid. \n\nThe component first renders a container div with a minimum width and height, and a flex layout that centers its child elements. Within this container, the component renders a video or 3D model of the NFT, depending on the `kind` property of the `nft` object. If the `kind` is 0 or 2, a video is rendered using the `animation_url` property of the `nft` object. Otherwise, a 3D model is rendered using the `glb_animation_url` and `usdz_animation_url` properties of the `nft` object.\n\nIf the `showDetails` prop is true, the component also renders additional information about the NFT auction, including the NFT's name, reserve price, highest bid, and yield per day. The reserve price is displayed as a button that links to the marketplace page for the corresponding animal NFT. The highest bid and yield per day are displayed as text.\n\nThis component can be used in the larger project to display information about NFT auctions in a visually appealing way. It can be used in conjunction with other components to create a marketplace or auction page for animal NFTs. \n\nExample usage:\n\n```\nimport CardNft from \"path/to/CardNft\";\n\nconst nft = {\n name: \"Giraffe NFT\",\n kind: 1,\n glb_animation_url: \"path/to/giraffe.glb\",\n usdz_animation_url: \"path/to/giraffe.usdz\",\n reservePrice: 1000000,\n amount: 500000,\n duration: 86400,\n tokenOwner: \"0x1234567890abcdef\",\n attributes: [\n { trait_type: \"Yields\", value: \"10\" },\n { trait_type: \"Color\", value: \"Brown\" },\n ],\n};\n\nfunction AuctionPage() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code defines a React component called `CardNft` that renders an NFT card with details such as name, highest bid, and yield per day. It also includes a video or 3D model viewer depending on the type of NFT.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies including React, Next.js, moment.js, and functions from other files such as `abbreviateNumbers` and `shortenAddress`.\n\n3. What props can be passed to the `CardNft` component and what are their types?\n- The `CardNft` component accepts four props: `nft` of type `Auction`, `showDetails` of type `boolean` with a default value of `true`, `className` of type `string`, and `onNFTClick` of type `function` that returns `void`.",
- "checksum": "a51cb32ddc0a6d32df005005c4bf934c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/Carousel/Arrows.json b/.autodoc/docs/json/core/src/marketplace/Carousel/Arrows.json
deleted file mode 100644
index 408663569..000000000
--- a/.autodoc/docs/json/core/src/marketplace/Carousel/Arrows.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Arrows.tsx",
- "filePath": "core/src/marketplace/Carousel/Arrows.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/Carousel/Arrows.tsx",
- "summary": "This code defines two styled components, `Previous` and `Next`, which are used to create arrow buttons for a carousel or slider. The arrows are created using the `ChevronLeft` and `ChevronRight` icons from the Material UI library. The `Arrow` component is a base component that sets some common styles for both the `Previous` and `Next` components, such as positioning, color, and cursor. \n\nThe `Previous` and `Next` components are positioned absolutely and offset from the track of the slider by a fixed amount (`arrowOffset`). The `arrowDiameter` constant is used to set the width and height of the arrow icons. The `&:hover` selector is used to change the background color of the arrow when it is hovered over. The `& .slick-disabled` selector is used to hide the arrow when it is disabled (e.g. when there are no more items to scroll to).\n\nThe `PreviousArrow` and `NextArrow` components are exported for use in other parts of the project. They take three props: `onClick`, `style`, and `className`. These props are passed down to the `Previous` and `Next` components, which are rendered with the appropriate icon (`ChevronLeft` or `ChevronRight`). \n\nThis code is a reusable component that can be used in any React project that requires a carousel or slider with arrow buttons. The `PreviousArrow` and `NextArrow` components can be imported and used in any other React component, and the `onClick` prop can be used to handle click events on the arrow buttons. For example:\n\n```\nimport React from 'react'\nimport Slider from 'react-slick'\nimport { PreviousArrow, NextArrow } from './path/to/arrows'\n\nconst settings = {\n dots: true,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n prevArrow: Giraffe NFT Auction
\n\n
\n Slide 1
\n\n
\n Slide 2
\n\n
\n Slide 3
\n| Index | \nName | \nFloor Price | \n24h Volume | \n
|---|---|---|---|
\n
\n )\n}\n```\n\nIn the example above, the `CurrencyLogo` component is used to render the image of the USD currency symbol with a size of 64 pixels and an additional CSS class of `my-class`.",
- "questions": "1. What is the purpose of this code?\n This code defines a component called `CurrencyLogo` that displays an image logo for a given currency symbol.\n\n2. What is the `CURRENCY_SYMBOL_LOGO` object and where does it come from?\n `CURRENCY_SYMBOL_LOGO` is an object that maps currency symbols to image URLs. It is imported from the `@zoolabs/zdk` library.\n\n3. What is the `Image` component and where does it come from?\n `Image` is a component imported from the `next/image` library that optimizes images for performance and provides features like lazy loading and automatic resizing.",
- "checksum": "f48aba0ad70062d53fe07d68874e9188"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/EarnWithZoo/EarnCard.json b/.autodoc/docs/json/core/src/marketplace/EarnWithZoo/EarnCard.json
deleted file mode 100644
index 0c630045a..000000000
--- a/.autodoc/docs/json/core/src/marketplace/EarnWithZoo/EarnCard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "EarnCard.tsx",
- "filePath": "core/src/marketplace/EarnWithZoo/EarnCard.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/EarnWithZoo/EarnCard.tsx",
- "summary": "The code defines a React component called `EarnCard` that renders a card with a heading and subtext. The component takes two props, `heading` and `subText`, which are both optional and have default values. If no values are provided, the heading will be \"Main Heading\" and the subtext will be a placeholder string.\n\nThe component returns a div element with a fixed width and height, a transparent background, and a gray border. Inside the div, there are three child elements: two divs and a paragraph. The first div is empty and has a fixed height of 50 pixels. The second div contains an h1 element with the value of the `heading` prop. The third div contains a p element with the value of the `subText` prop.\n\nThis component can be used in a larger project to display information in a card format. The `heading` prop can be used to provide a title for the card, while the `subText` prop can be used to provide additional details or a description. The component's fixed width and height make it suitable for use in a grid or other layout where consistent sizing is desired.\n\nHere is an example of how the `EarnCard` component could be used in a larger React application:\n\n```\nimport React from 'react'\nimport EarnCard from './EarnCard'\n\nconst App = () => {\n return (\n \n
\n )\n}\n\nexport default App\n```\n\nIn this example, the `EarnCard` component is used three times to display different ways to earn rewards. The component's fixed size and consistent layout make it easy to create a grid of cards that look good together. The `heading` and `subText` props are used to customize the content of each card.",
- "questions": "1. What is the purpose of this code?\n This code defines a React component called `EarnCard` that renders a card with a heading and subtext.\n\n2. What are the default values for the `heading` and `subText` props?\n The default value for `heading` is \"Main Heading\", and the default value for `subText` is a long string of placeholder text.\n\n3. What CSS classes are applied to the different elements in the component?\n The component uses Tailwind CSS classes to style the different elements, including `w-[300px]`, `h-[250px]`, `border-2`, `border-gray-600`, `text-gray-600`, and various padding and flexbox classes.",
- "checksum": "447ff957b138d108df5893d643516af0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/EarnWithZoo/EarnWithZoo.json b/.autodoc/docs/json/core/src/marketplace/EarnWithZoo/EarnWithZoo.json
deleted file mode 100644
index b2614ec18..000000000
--- a/.autodoc/docs/json/core/src/marketplace/EarnWithZoo/EarnWithZoo.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "EarnWithZoo.tsx",
- "filePath": "core/src/marketplace/EarnWithZoo/EarnWithZoo.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/EarnWithZoo/EarnWithZoo.tsx",
- "summary": "The code above is a React component that renders a grid layout with three columns and a minimum height of 300 pixels. It is named `EarnWithZoo` and is imported from a file located in the `zoo` project. \n\nThe component takes in a single prop called `children`, which is used to render the content of each column. The content is expected to be a collection of `EarnCard` components, which are also located in the `zoo` project. \n\nThe purpose of this component is to provide a layout for displaying a collection of `EarnCard` components in a visually appealing and organized way. It can be used in various parts of the larger `zoo` project where a grid layout is needed to display multiple `EarnCard` components. \n\nHere is an example of how this component can be used in a parent component:\n\n```\nimport React from 'react'\nimport EarnWithZoo from './EarnWithZoo'\nimport EarnCard from './EarnCard'\n\nconst EarnPage = () => {\n return (\n Earn Rewards
\n\n
\n \n \n \n
\n )\n}\n\nexport default EarnPage\n```\n\nIn the example above, the `EarnPage` component renders a heading and a `EarnWithZoo` component with three `EarnCard` components as its children. The `EarnCard` components are passed in with different titles and descriptions, which will be displayed in each card. \n\nOverall, the `EarnWithZoo` component provides a simple and reusable way to display a collection of `EarnCard` components in a grid layout.",
- "questions": "1. What is the purpose of the `EarnCard` component that is imported?\n- The `EarnCard` component is imported but not used in this file. It is possible that it is used in another file within the `zoo` project.\n\n2. What is the significance of the `className` property in the returned JSX element?\n- The `className` property sets the CSS class of the returned element to \"grid md:grid-cols-3 gap-6 min-h-[300px] w-full bg-transparent\", which likely affects the layout and styling of the element.\n\n3. What is the expected input for the `children` prop?\n- The `children` prop is used within the returned JSX element, so it is likely that this component is meant to be a wrapper for other components or elements. The expected input for `children` would be any valid React component or element.",
- "checksum": "e4df10e49ef8ce3f89c8dd449840d896"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/Graph/Graph.json b/.autodoc/docs/json/core/src/marketplace/Graph/Graph.json
deleted file mode 100644
index 2c597b166..000000000
--- a/.autodoc/docs/json/core/src/marketplace/Graph/Graph.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Graph.tsx",
- "filePath": "core/src/marketplace/Graph/Graph.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/Graph/Graph.tsx",
- "summary": "The code above is a simple React component called `Graph`. Its purpose is to render a basic HTML `div` element with the text \"Graph\" inside it. This component can be used as a building block for more complex visualizations or data representations within the larger project.\n\nTo use this component, it can be imported into another React component file using the `import` statement, like so:\n\n```\nimport Graph from './Graph'\n```\n\nThen, within the render method of the parent component, the `Graph` component can be included as a child element, like this:\n\n```\nrender() {\n return (\n Earn with Zoo
\n\n
\n )\n}\n```\n\nThis would render the \"My Data Visualization\" heading followed by the `Graph` component, which would display the text \"Graph\" inside a `div` element.\n\nOverall, this code serves as a basic building block for more complex data visualization components within the larger project. Its simplicity and reusability make it a valuable tool for developers working on the zoo project.",
- "questions": "1. **What is the purpose of this component?** \nA smart developer might wonder what this component is used for and how it fits into the overall functionality of the `zoo` project. Based on the code, it appears to be a simple component that renders a `My Data Visualization
\n` element with the text \"Graph\".\n\n2. **Are there any props or state being used in this component?** \nA smart developer might want to know if this component relies on any external data or state to render its output. Based on the code, it does not appear to be using any props or state.\n\n3. **Is this component being used anywhere else in the project?** \nA smart developer might want to know if this component is being imported and used in other parts of the `zoo` project. Without additional context, it is impossible to determine if this is the case.",
- "checksum": "13faf6cb3762bd60d3d0418fae6c1c62"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/Grid/CardWithTabs.json b/.autodoc/docs/json/core/src/marketplace/Grid/CardWithTabs.json
deleted file mode 100644
index d532e95ca..000000000
--- a/.autodoc/docs/json/core/src/marketplace/Grid/CardWithTabs.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CardWithTabs.tsx",
- "filePath": "core/src/marketplace/Grid/CardWithTabs.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/Grid/CardWithTabs.tsx",
- "summary": "The `CardWithTabs` component is a reusable React component that renders a card with three tabs. The component takes in three props, `TabA`, `TabB`, and `TabC`, which are used to render the content of each tab. The component also takes in three optional props, `TabAName`, `TabBName`, and `TabCName`, which are used to set the names of each tab. If these props are not provided, the default names \"My Wallet\", \"My Bids\", and \"My Auctions\" are used.\n\nThe component uses the `useSelector` hook from the `react-redux` library to get the `zooBalance` value from the Redux store. It also uses the `useZoobalance` hook from the `state/zoo/hooks` module to fetch the `zooBalance` value from the server. The `useEffect` hook is used to call the `getZooBalance` function when the component mounts and whenever the `getZooBalance` function changes.\n\nThe component renders a header that displays the `zooBalance` value. The `zooBalance` value is formatted using the `toLocaleString` method to add commas and decimal places. The header also includes a gradient background and a row of three tabs. The active tab is highlighted with a black background, while the inactive tabs have a transparent background. When a tab is clicked, the `HandleChangeTab` function is called to update the `Tab` state variable, which determines which tab is active. The content of the active tab is rendered below the header.\n\nThis component can be used in the larger project to display a card with three tabs that allow the user to switch between different views of their wallet, bids, and auctions. The component can be customized by passing in different content for each tab and by setting the names of the tabs. Here is an example of how the `CardWithTabs` component can be used:\n\n```\n console.log(\"Bid accepted!\")}\n onError={(error) => console.log(`Error accepting bid: ${error}`)}\n/>\n```",
- "questions": "1. What is the purpose of the `LazyAcceptBidButton` component?\n- The `LazyAcceptBidButton` component is used to display a button that allows the user to accept a bid for a specific token.\n\n2. What external libraries or packages are being imported in this file?\n- The file is importing `isNativeCurrency` from the `@zoolabs/zdk` package, and `ethers`, `useCallback`, `useEffect`, and `useState` from the `react` package.\n\n3. What is the role of the `useTransactionPopups` hook in this code?\n- The `useTransactionPopups` hook is used to add transaction popups to the UI when a transaction is initiated or when an error occurs during the transaction.",
- "checksum": "aa1b5770fc412fbc19ef7eb8e33d0791"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/LazyBidItem.json b/.autodoc/docs/json/core/src/marketplace/LazyBidItem.json
deleted file mode 100644
index ef59ad0a3..000000000
--- a/.autodoc/docs/json/core/src/marketplace/LazyBidItem.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LazyBidItem.tsx",
- "filePath": "core/src/marketplace/LazyBidItem.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/LazyBidItem.tsx",
- "summary": "The `LazyBidItem` component is a React component that renders a single bid item for a lazy auction. It takes in a `bid` object, which contains information about the bid, and several optional props that can be used to customize the rendering of the component.\n\nThe component first imports several dependencies, including icons, currency and token types, and various utility functions. It then defines the `LazyBidItemProps` type, which specifies the shape of the props that can be passed to the component. The props include the `bid` object, a function to get the USD amount of a token, a boolean to indicate whether to show the token name, a label for the bid item, a summary of the bid, and a callback function to handle click events.\n\nThe component then defines the `LazyBidItem` function, which takes in the props and returns a JSX element that renders the bid item. The function first extracts the `chainId` and `account` from the active Web3 React context using the `useActiveWeb3React` hook. It then initializes several state variables using the `useState` hook, including the formatted amount of the bid, the currency token used for the bid, and the type of the bid content.\n\nThe function then calls the `usePrice` hook to get the `getUsdAmount` function, which can be used to get the USD value of a token. It also calls the `getContent` function to get the type and name of the bid content, although this is currently hardcoded to an empty string.\n\nThe function then uses the `useEffect` hook to update the `currencyToken` and `formattedAmount` state variables whenever the `chainId` changes. It does this by calling the `getCurrencyTokenLowerCase` function to get the currency token for the bid, and then using the `formatCurrencyAmountWithCommas` function to format the bid amount with commas.\n\nFinally, the function returns a JSX element that renders the bid item. The element consists of a `div` container with two columns, one for the bid information and one for the bid amount. The bid information column displays the bid type or name, the bidder's address, and the time the bid was created. The bid amount column displays the formatted bid amount and the currency symbol. If the `onClick` prop is provided, the component also renders an eye icon that can be clicked to trigger the `onClick` callback function.\n\nOverall, the `LazyBidItem` component is a reusable component that can be used to render individual bid items for a lazy auction. It provides several customization options and uses various utility functions to format and display the bid information.",
- "questions": "1. What is the purpose of the `LazyBidItem` component?\n- The `LazyBidItem` component is used to display information about a bid, including the bidder's address, bid amount, and bid timestamp.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies, including `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, `react-timeago`, and custom functions and hooks.\n\n3. What is the significance of the `getUsdAmount` function and how is it used?\n- The `getUsdAmount` function is used to calculate the USD value of a bid based on the bid amount and the currency used for the bid. It is passed as a prop to the `LazyBidItem` component and called within the component to display the USD value of the bid if available.",
- "checksum": "2dfd80d9dd27e8e8e52fe3856743c822"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/LazyBidList.json b/.autodoc/docs/json/core/src/marketplace/LazyBidList.json
deleted file mode 100644
index 9347f1bb8..000000000
--- a/.autodoc/docs/json/core/src/marketplace/LazyBidList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LazyBidList.tsx",
- "filePath": "core/src/marketplace/LazyBidList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/LazyBidList.tsx",
- "summary": "The code defines a React component called `LazyBidList` that fetches and displays a list of bids from a GraphQL API. The component takes in several props, including a `where` object that specifies filters for the bids, a boolean `showToken` that determines whether to display the token associated with each bid, an `onClick` function that is called when a bid is clicked, and an optional `empty` JSX element to display when there are no bids.\n\nThe component uses the `useQuery` hook from the `@apollo/client` library to fetch bids from the GraphQL API. The query is defined using the `gql` function and specifies the fields to fetch for each bid, including the bid amount, creation timestamp, currency, and bidder. The `where` object is passed as a variable to the query and is used to filter the bids based on the drop ID, token type name, and/or bidder ID.\n\nThe fetched bids are stored in the `data` object returned by the `useQuery` hook. If there are bids, the component maps over them and renders a `LazyBidItem` component for each bid. The `getUsdAmount` function from a `usePrice` hook is passed to each `LazyBidItem` component to convert the bid amount to USD. If there are no bids, the `empty` prop is rendered if provided, otherwise a default message is displayed.\n\nOverall, this code provides a reusable component for displaying a list of bids from a GraphQL API with filtering and customization options. It can be used in a larger project that involves auctions or bidding systems. For example, it could be used in an NFT marketplace to display bids on a particular NFT or in a charity auction platform to display bids on various items. Here is an example usage of the `LazyBidList` component:\n\n```\n console.log(`Clicked bid ${bid.id}`)}\n empty={ setIsOpen(false)}\n/>\n```",
- "questions": "1. What is the purpose of the `LazyBidModal` component?\n- The `LazyBidModal` component is used to display bid information and allow the user to remove or accept a bid.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `react`, `react-dom`, and various custom components and hooks defined in other files within the project.\n\n3. What is the significance of the `offline` state variable?\n- The `offline` state variable is used to determine whether the current user is offline or not, and is used to conditionally render a message to the user if they are the bidder and the bid is removed.",
- "checksum": "26b764c837e8145c458be35c2f81c67b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/LazyRemoveBidButton.json b/.autodoc/docs/json/core/src/marketplace/LazyRemoveBidButton.json
deleted file mode 100644
index 2a1fd0ba4..000000000
--- a/.autodoc/docs/json/core/src/marketplace/LazyRemoveBidButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LazyRemoveBidButton.tsx",
- "filePath": "core/src/marketplace/LazyRemoveBidButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/LazyRemoveBidButton.tsx",
- "summary": "The code is a React component that exports a button component called `LazyRemoveBidButton`. This button is used to remove a bid for a specific token. The component takes in several props including `dropId`, `name`, `currency`, `onError`, and `onRemove`. \n\nThe `useActiveWeb3React` hook is used to get the current user's account. The `useGasPrice` hook is used to get the current gas price. The `useContract` hook is used to get the `App` and `Media` contracts. The `useTransactionPopups` hook is used to add transaction and error popups.\n\nThe `removeBid` function is a callback function that is called when the button is clicked. It first tries to remove the bid using the `app.removeLazyBid` function. If the currency is native, it will use the `app` contract to remove the bid. Otherwise, it will use the `media` contract to remove the bid. If the bid is successfully removed, the `onRemove` function is called. If there is an error, the `onError` function is called.\n\nThe `LazyRemoveBidButton` component returns a button with the text \"Remove Bid\". When the button is clicked, the `removeBid` function is called. The button has a red background and turns indigo when hovered over. \n\nThis component can be used in a larger project that involves bidding on tokens. When a user wants to remove their bid, they can click the `LazyRemoveBidButton` component and the bid will be removed. The `onRemove` function can be used to update the UI to reflect that the bid has been removed. The `onError` function can be used to display an error message if there is an error removing the bid.",
- "questions": "1. What is the purpose of the `LazyRemoveBidButton` component?\n- The `LazyRemoveBidButton` component is a button that, when clicked, removes a bid for a specific token ID.\n\n2. What external libraries or packages are being imported in this file?\n- The file is importing functions from \"@zoolabs/zdk\", \"react\", and \"../hooks\", as well as components from \"../state/network/hooks\" and \"../state/transactions/hooks\".\n\n3. What is the purpose of the `useCallback` hook in this code?\n- The `useCallback` hook is used to define the `removeBid` function, which is an asynchronous function that removes a bid for a specific token ID. It is memoized to prevent unnecessary re-renders of the component.",
- "checksum": "6ec4fb2baa26062665773cd71fff2efd"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/LazySetAsk.json b/.autodoc/docs/json/core/src/marketplace/LazySetAsk.json
deleted file mode 100644
index d5941bd83..000000000
--- a/.autodoc/docs/json/core/src/marketplace/LazySetAsk.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LazySetAsk.tsx",
- "filePath": "core/src/marketplace/LazySetAsk.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/LazySetAsk.tsx",
- "summary": "The `LazySetAsk` component is a React component that allows users to set an ask price for a given token. It is part of the larger `zoo` project and imports various dependencies from other files in the project. \n\nThe component takes in two props: `dropId` and `name`. These props are used to retrieve the `ask` and `currencyToken` values from the `useTokenType` hook. The `ask` value represents the current ask price for the token, while the `currencyToken` value represents the currency used to set the ask price. \n\nThe component renders an input field that allows users to enter a new ask price for the token. The value of this input field is stored in the component's state using the `useState` hook. The component also renders a button that, when clicked, sets the new ask price for the token. This button is implemented using the `LazySetAskButton` component, which is imported from another file in the project. \n\nThe component also renders a `SelectCurrency` component that allows users to select the currency used to set the ask price. This component is only rendered when the user clicks on a button next to the input field. The selected currency is stored in the component's state using the `useState` hook. \n\nThe component also includes commented-out code that allows users to toggle an \"offline ask\" option. This option is not currently implemented in the component. \n\nOverall, the `LazySetAsk` component provides a simple interface for users to set an ask price for a given token. It is designed to be used in conjunction with other components in the `zoo` project to create a full-featured marketplace for buying and selling tokens.",
- "questions": "1. What is the purpose of the `LazySetAsk` component?\n- The `LazySetAsk` component is used to set an ask price for a given token.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including `@zoolabs/zdk`, `ethers`, `@headlessui/react`, `@heroicons/react/solid`, and `@lingui/macro` and `@lingui/core`.\n\n3. What state is managed by the `LazySetAsk` component?\n- The `LazySetAsk` component manages several pieces of state, including the selected currency token, the value of the ask price, and whether the ask is offline or not.",
- "checksum": "8088926395261074a66980b076c9d20e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/LazySetAskButton.json b/.autodoc/docs/json/core/src/marketplace/LazySetAskButton.json
deleted file mode 100644
index 09b2b6e22..000000000
--- a/.autodoc/docs/json/core/src/marketplace/LazySetAskButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LazySetAskButton.tsx",
- "filePath": "core/src/marketplace/LazySetAskButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/LazySetAskButton.tsx",
- "summary": "The code is a React component that renders a button used to set an \"ask\" price for a token on the Drop contract. The component takes in several props including the name of the token, the amount of the ask price, the currency token used for the ask price, and a boolean indicating whether the user is offline. \n\nThe component uses several hooks including `useActiveWeb3React`, `useGasPrice`, and `useContract` to interact with the Ethereum network and the Drop contract. The `useTransactionPopups` hook is also used to display transaction popups to the user.\n\nWhen the user clicks the \"Set Ask\" button, the `setAsk` function is called. This function first checks if the `amount` prop is truthy. If it is, it creates an `Ask` object with the `currency` and `amount` properties, where the `amount` is converted to the appropriate units using the `ethers.utils.parseUnits` function. The `setTokenTypeAsk` function is then called on the `drop` contract with the `name`, `ask`, `from`, and `gasPrice` parameters. If the transaction is successful, a transaction popup is displayed to the user indicating that the ask price has been set.\n\nIf the `amount` prop is falsy, a message is displayed to the user indicating that an amount is required.\n\nOverall, this component is used to allow users to set an ask price for a token on the Drop contract. It is likely used in conjunction with other components and functionality to create a full-fledged marketplace for buying and selling tokens. An example usage of this component might look like:\n\n```\n\n```",
- "questions": "1. What is the purpose of the `LazySetAskButton` component?\n- The `LazySetAskButton` component is used to set an ask price for a given token type.\n\n2. What external libraries or packages are being imported in this file?\n- The file is importing `Currency` from the `@zoolabs/zdk` package, and `ethers`, `useCallback`, `useActiveWeb3React`, `useContract`, `useGasPrice`, and `useTransactionPopups` from various other packages.\n\n3. What is the `setAsk` function doing?\n- The `setAsk` function is creating an `Ask` object with a currency and amount, and then calling the `setTokenTypeAsk` function on the `drop` contract with the provided `name`, `Ask`, `account`, and `gasPrice` parameters. If successful, it adds a transaction popup with the name of the token type.",
- "checksum": "1637a072d955b45e8a0abd7b4983e690"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/MarketHero/HomeCard.json b/.autodoc/docs/json/core/src/marketplace/MarketHero/HomeCard.json
deleted file mode 100644
index ad3c7bc83..000000000
--- a/.autodoc/docs/json/core/src/marketplace/MarketHero/HomeCard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "HomeCard.tsx",
- "filePath": "core/src/marketplace/MarketHero/HomeCard.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/MarketHero/HomeCard.tsx",
- "summary": "This code defines a React component called HomeCard that renders a card displaying information about a 3D model. The component imports two other components, MovingModelviewer and ModelViewer, using the dynamic import function from the Next.js framework. The dynamic import function allows for code splitting, which means that the imported components are only loaded when they are needed, improving the performance of the application.\n\nThe HomeCard component takes four props: glb, CollectionName, TopOffer, and NftName. The glb prop specifies the path to the 3D model file, which is set to a default value of '/models/Tiger/TIGER_BABY.glb'. The other props specify information about the model, such as the name of the collection it belongs to, the top offer for the model, and the name of the NFT (non-fungible token) associated with the model.\n\nThe component renders a div element with a class of \"mt-5 lg:mt-2 mb-2\", which contains two child div elements. The first child div element has a class of \"w-[300px] h-[300px] borderGrad\" and a black background color. Inside this div element, the MovingModelviewer component is rendered. The MovingModelviewer component is responsible for displaying the 3D model specified by the glb prop. The ssr: false option passed to the dynamic import function ensures that the component is not rendered on the server side, which is necessary because the component relies on browser-specific APIs.\n\nThe second child div element contains two child div elements, each with a class of \"text-center\". The first child div element contains the CollectionName prop, and the second child div element contains the TopOffer prop. Below this div element is another div element with two child div elements, each containing the NftName and TopOffer props, respectively.\n\nOverall, this code defines a reusable React component that can be used to display information about a 3D model, including its name, collection, and top offer. The component uses dynamic imports to improve performance and relies on the MovingModelviewer component to display the 3D model. An example usage of this component might look like:\n\n```\nimport HomeCard from './HomeCard'\n\nfunction App() {\n return (\n console.log(`Bid removed for token ${tokenId}`)}\n onError={(error) => console.error(error)}\n/>\n```",
- "questions": "1. What is the purpose of the `RemoveBidButton` component?\n- The `RemoveBidButton` component is used to render a button that, when clicked, removes a bid for a specific token.\n\n2. What libraries or hooks are being imported and used in this file?\n- The file imports `isNativeCurrency` from the `@zoolabs/zdk` library, as well as `useCallback` from `react`, and `useActiveWeb3React`, `useContract`, `useGasPrice`, and `useTransactionPopups` from various custom hooks defined in other files.\n\n3. What happens when the `removeBid` function is called?\n- The `removeBid` function attempts to remove a bid for a specific token by calling either the `removeBid` function on the `app` contract or the `media` contract, depending on whether the `currency` parameter is a native currency or not. If successful, it calls the `onRemove` function with the `tokenId` parameter. If there is an error, it calls the `onError` function with the error parameter and displays an error popup.",
- "checksum": "d10e38a89c32838ceea886dab9e1f463"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/SelectCurrency.json b/.autodoc/docs/json/core/src/marketplace/SelectCurrency.json
deleted file mode 100644
index ca136733e..000000000
--- a/.autodoc/docs/json/core/src/marketplace/SelectCurrency.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SelectCurrency.tsx",
- "filePath": "core/src/marketplace/SelectCurrency.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/SelectCurrency.tsx",
- "summary": "The code above is a React component that renders a list of supported payment currencies for a given blockchain network. It imports the `useActiveWeb3React` hook from a `hooks` module and the `getSupportedPaymentCurrencies` function from a `config/currencies` module. It also imports a `CurrencyLogo` component from a local file.\n\nThe `SelectCurrency` component takes a single prop called `onSelect`, which is a callback function that will be called when a currency is selected. The component first calls the `useActiveWeb3React` hook to get the current blockchain network's ID. It then renders a list of buttons, each representing a supported currency for the current network. The list is generated by mapping over the result of calling `getSupportedPaymentCurrencies` with the current network's ID as an argument.\n\nEach button has an `onClick` handler that calls the `onSelect` callback with the selected currency as an argument. The button also renders a `CurrencyLogo` component and the currency symbol in a `div` element. The `CurrencyLogo` component takes the currency symbol as a prop and renders the corresponding logo.\n\nThis component can be used in a larger project that requires users to select a payment currency for a transaction. The `onSelect` callback can be used to update the selected currency in the parent component's state or trigger an action. The `getSupportedPaymentCurrencies` function can be modified to support additional blockchain networks or currencies. The `CurrencyLogo` component can be reused in other parts of the project that require currency logos. \n\nExample usage:\n\n```\nimport SelectCurrency from './SelectCurrency'\n\nconst PaymentForm = () => {\n const [selectedCurrency, setSelectedCurrency] = useState(null)\n\n const handleCurrencySelect = (currency) => {\n setSelectedCurrency(currency)\n }\n\n return (\n \n```",
- "questions": "1. What is the purpose of the `SetBidButton` component?\n- The `SetBidButton` component is used to place a bid on a specific token.\n\n2. What libraries or dependencies are being imported in this file?\n- The file is importing `Currency` and `isNativeCurrency` from the `@zoolabs/zdk` library, as well as `useCallback`, `useActiveWeb3React`, `useContract`, and `useGasPrice` from various React hooks, and `Ask` and `Bid` from a custom `types` file.\n\n3. What happens if the `amount` parameter is not provided in the `SetBidButtonProps`?\n- If the `amount` parameter is not provided, a message is displayed indicating that the amount is required, but no further action is taken.",
- "checksum": "0877cf7dbbfa7cf52dd3da21336da660"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/SetSaleBid.json b/.autodoc/docs/json/core/src/marketplace/SetSaleBid.json
deleted file mode 100644
index 537174b1c..000000000
--- a/.autodoc/docs/json/core/src/marketplace/SetSaleBid.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SetSaleBid.tsx",
- "filePath": "core/src/marketplace/SetSaleBid.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/SetSaleBid.tsx",
- "summary": "The `SetSaleBid` component is a React component that allows users to place bids on a particular item in a marketplace. The component imports various functions and hooks from other files in the project, including `useEffect`, `useState`, `CurrencyAmount`, `useActiveWeb3React`, `useApproveCallback`, and others. \n\nThe component takes in several props, including `dropId`, `name`, and `children`. It then uses various hooks to retrieve information about the item being bid on, the user's account and balance, and the current market prices. \n\nThe component renders a form that allows the user to input a bid amount in a specific currency, and then submit the bid. The form includes a dropdown menu that allows the user to select the currency they wish to bid in, and a button that triggers the bid submission process. \n\nThe component also includes several conditional statements that check whether the user has sufficient funds to place the bid, and whether the bid amount meets the minimum bid requirement. If the user does not have sufficient funds or the bid amount is too low, the component displays an error message and disables the bid submission button. \n\nOverall, the `SetSaleBid` component is an important part of the larger marketplace project, as it allows users to place bids on items and participate in the marketplace.",
- "questions": "1. What is the purpose of the `SetSaleBid` component?\n- The `SetSaleBid` component is used to allow users to set a bid for a particular item in the market.\n\n2. What external libraries and hooks are being used in this code?\n- The code is using external libraries such as `react`, `@zoolabs/zdk`, and `@lingui/core`. It is also using various hooks such as `useEffect`, `useState`, `useActiveWeb3React`, `useApproveCallback`, `useContract`, `useAsset`, `usePrice`, `useTokenType`, and `useCurrencyBalance`.\n\n3. What is the purpose of the `approvalState` and `approve` variables?\n- The `approvalState` variable is used to keep track of the approval state of a particular currency token. The `approve` variable is a callback function that is used to approve the spending of a particular currency token.",
- "checksum": "7508e2544294a23b8908c81a0e7996c2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/SetSaleBidButton.json b/.autodoc/docs/json/core/src/marketplace/SetSaleBidButton.json
deleted file mode 100644
index 6ac84fefa..000000000
--- a/.autodoc/docs/json/core/src/marketplace/SetSaleBidButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SetSaleBidButton.tsx",
- "filePath": "core/src/marketplace/SetSaleBidButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/SetSaleBidButton.tsx",
- "summary": "The code is a React component that exports a button component called `SetSaleBidButton`. This button is used to place a bid on a particular item in a marketplace. The component takes in several props, including the `ask` object, which contains information about the item being bid on, such as the amount being asked for, and the `currencyToken`, which is the token being used to make the bid.\n\nThe component first imports several dependencies, including `@headlessui/react`, `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, and several custom hooks and components. It then defines the `SetSaleBidButton` component, which uses the `useActiveWeb3React` hook to get the current user's account, and the `useGasPrice` hook to get the current gas price. It also defines two state variables, `offline` and `offlineSwitch`, which are used to determine whether the user is placing an offline bid.\n\nThe `SetSaleBidButton` component then defines a `setLazyBid` function, which is called when the button is clicked. This function creates a `Bid` object, which contains information about the bid, such as the amount being bid and the bidder's address. It then checks whether the `currencyToken` is the native currency (e.g. ETH), and if so, calls the `setLazyBid` function on the `app` contract with the appropriate parameters. If the `currencyToken` is an ERC-20 token, it calls the `setLazyBidERC20` function instead.\n\nThe component also defines an `useEffect` hook, which is used to determine whether the user is an offline bidder. If the user is an offline bidder, the `offlineSwitch` state variable is set to `true`, and a switch is displayed that allows the user to toggle between online and offline bidding.\n\nFinally, the component returns a button element that displays the text \"Place Offline Bid\" if the user is an offline bidder, and a regular \"Place Bid\" button otherwise. If the user is not allowed to place a bid (e.g. because they do not have enough funds), the button is disabled. When the button is clicked, the `setLazyBid` function is called.\n\nOverall, this component is an important part of the zoo project's marketplace functionality, allowing users to place bids on items using either the native currency or an ERC-20 token. The component also provides a way for users to place offline bids, which can be useful in situations where the user's internet connection is unreliable.",
- "questions": "1. What is the purpose of the `SetSaleBidButton` component?\n- The `SetSaleBidButton` component is used to place a bid on a particular item for sale.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including \"@headlessui/react\", \"@heroicons/react/solid\", \"@zoolabs/zdk\", \"react\", \"@lingui/core\", and \"@lingui/macro\".\n\n3. What is the significance of the `offline` state variable and how is it used?\n- The `offline` state variable is used to determine whether the bid should be placed offline or not. It is used to conditionally render the \"Offline\" text in the button text and to display an offline switch if the user is eligible to place offline bids.",
- "checksum": "f270ed97bcd1da6e670df1b6ffcb3df2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/TableCollection/CollectionRow.json b/.autodoc/docs/json/core/src/marketplace/TableCollection/CollectionRow.json
deleted file mode 100644
index a79b64d50..000000000
--- a/.autodoc/docs/json/core/src/marketplace/TableCollection/CollectionRow.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CollectionRow.tsx",
- "filePath": "core/src/marketplace/TableCollection/CollectionRow.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/TableCollection/CollectionRow.tsx",
- "summary": "The `CollectionRow` component is a reusable React component that renders a table row with six columns. The purpose of this component is to provide a consistent layout for displaying data in a table format. The component takes in six optional props (`ColARank`, `ColA`, `ColB`, `ColC`, `ColD`, and `ColE`) that can be used to customize the content of each column. If a prop is not provided, a default value is used.\n\nThe component uses the `tr` and `td` HTML tags to create the table row and columns, respectively. The `className` attribute is used to apply CSS classes to each element, which control the styling of the table. The `flex` class is used to make the first column (`ColARank`) and the second column (`ColA`) appear side-by-side.\n\nHere is an example of how the `CollectionRow` component can be used:\n\n```\nimport CollectionRow from './CollectionRow'\n\nfunction MyTable() {\n return (\n \n \n
\n )\n}\n```\n\nIn this example, the `CollectionRow` component is used to render two rows of data in a table. The `ColARank`, `ColA`, `ColB`, `ColC`, `ColD`, `ColE`, and `ColF` props are used to customize the content of each column. The resulting table will have a consistent layout and styling, making it easier to read and understand the data.",
- "questions": "1. What is the purpose of this code?\n - This code defines a React component called `CollectionRow` that renders a table row with cells that can be customized using props.\n\n2. What are the default values for the props used in this component?\n - The default values for the props are: `ColARank` is `'1'`, `ColA` is `'Use Prop \"ColA\" To Change '`, `ColB` is `'Use Prop \"ColB\" To Change '`, `ColC` is `'Use Prop \"ColC\" To Change '`, `ColD` is `'Use Prop \"ColD\" To Change '`, `ColE` is `'Use Prop \"ColC\" To Change'`, and `ColF` is `'Use Prop \"ColF\" To Change'`.\n\n3. What CSS classes are applied to the table cells in this component?\n - The table cells have the following CSS classes applied to them: `text-xs md:text-base text-left`, `bg-[#1F2030]`, `p-4`, `border-b`, and `border-opacity-5`. The first cell in each row also has the additional classes `col-span-2` and `flex`, and the first div inside that cell has the class `w-1/4`.",
- "checksum": "7b22a93c3c9f12cb29c26d1547ad05c9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/TableCollection/CollectionTable.json b/.autodoc/docs/json/core/src/marketplace/TableCollection/CollectionTable.json
deleted file mode 100644
index 8eadef3bf..000000000
--- a/.autodoc/docs/json/core/src/marketplace/TableCollection/CollectionTable.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CollectionTable.tsx",
- "filePath": "core/src/marketplace/TableCollection/CollectionTable.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/TableCollection/CollectionTable.tsx",
- "summary": "The `CollectionTable` component is a reusable React component that renders a table with customizable column titles. It takes in several props, including `TitleA` through `TitleF`, which are used to set the titles of the corresponding columns in the table. If any of these props are not provided, default titles are used instead. The `TitleMain` prop is used to set the main title of the table, which is rendered above the table itself.\n\nThe component renders a `div` element with a class of `w-full bg-transparent min-h-[800px]`, which sets the width and minimum height of the table. Inside this `div`, there is an `h3` element that displays the `TitleMain` prop. Below this, there is a `table` element with a class of `w-full rounded-2xl p-2`, which sets the width, border radius, and padding of the table.\n\nThe `thead` element contains a single row with seven columns, each of which corresponds to a column in the table. The `th` elements inside each column display the corresponding title, which is either the value of the corresponding prop or a default value if the prop is not provided. The `tbody` element contains the actual content of the table, which is passed in as the `children` prop.\n\nThis component can be used in a larger project whenever a table with customizable column titles is needed. For example, it could be used to display a list of animals in a zoo, with each column representing a different attribute of the animals (e.g. name, species, habitat, etc.). The `CollectionTable` component could be reused throughout the project wherever a similar table is needed, with different props passed in to customize the column titles and content. \n\nExample usage:\n\n```\nimport CollectionTable from './CollectionTable'\n\nconst animals = [\n { name: 'Lion', species: 'Panthera leo', habitat: 'Savannah' },\n { name: 'Giraffe', species: 'Giraffa camelopardalis', habitat: 'Grasslands' },\n { name: 'Elephant', species: 'Loxodonta africana', habitat: 'Forests' },\n // ...\n]\n\nconst AnimalTable = () => {\n return (\n \n {animals.map(animal => (\n \n {animal.name} \n {animal.species} \n {animal.habitat} \n \n ))}\n \n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `CollectionTable` that renders a table with customizable column titles and child elements.\n\n2. What props can be passed to the `CollectionTable` component?\n- The `CollectionTable` component accepts several optional props for customizing the table column titles: `TitleA`, `TitleB`, `TitleC`, `TitleD`, `TitleE`, `TitleF`, and `TitleMain`.\n\n3. What is the styling of the table?\n- The table has a full width, rounded corners, and a minimum height of 800 pixels. The table header has a dark purple background color, and the table cells have white text on a dark background. The first column has a larger left margin and spans two columns.",
- "checksum": "f0863ffaa08e91e4d19b76f0730c2069"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/TradingHistory/TableRow.json b/.autodoc/docs/json/core/src/marketplace/TradingHistory/TableRow.json
deleted file mode 100644
index b5b645b18..000000000
--- a/.autodoc/docs/json/core/src/marketplace/TradingHistory/TableRow.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TableRow.tsx",
- "filePath": "core/src/marketplace/TradingHistory/TableRow.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/TradingHistory/TableRow.tsx",
- "summary": "The `TableRow` component is a reusable React component that renders a table row with four columns and a copy-to-clipboard button. The component takes four props, `ColA`, `ColB`, `ColC`, and `ColD`, which are used to populate the text content of the four columns. If any of these props are not provided, default values are used instead.\n\nThe first column of the table row contains an image of a checkmark and the text content of `ColA`. The second, third, and fourth columns contain the text content of `ColB`, `ColC`, and `ColD`, respectively. The fifth column contains a copy-to-clipboard button that, when clicked, copies the text content of `ColD` to the user's clipboard and displays a checkmark icon to indicate that the copy was successful.\n\nThe `TableRow` component uses the `useState` hook to manage the state of the `copied` variable, which is initially set to `false`. When the copy-to-clipboard button is clicked, the `copyToClipboard` function is called, which uses the `navigator.clipboard.writeText` method to write the text content of `ColD` to the user's clipboard. The `copied` variable is then set to `true`, which triggers a re-render of the component. During this re-render, the checkmark icon is displayed instead of the copy-to-clipboard icon.\n\nThe `TableRow` component also uses the `useEffect` hook to reset the `copied` variable to `false` after two seconds have elapsed since the copy-to-clipboard button was clicked. This ensures that the checkmark icon is only displayed briefly to indicate that the copy was successful, and then reverts back to the copy-to-clipboard icon.\n\nThis component can be used in any React project that requires a table with copy-to-clipboard functionality. It is highly customizable, as the text content of each column can be easily changed by passing in different props. Additionally, the styling of the component can be customized by modifying the CSS classes applied to each column. Here is an example of how the `TableRow` component can be used in a larger project:\n\n```\nimport TableRow from './TableRow'\n\nconst MyTable = () => {\n return (\n \n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `TableRow` component?\n- The `TableRow` component is used to render a table row with four columns and a copy-to-clipboard button.\n\n2. What is the significance of the `copied` state variable?\n- The `copied` state variable is used to keep track of whether the value in the fourth column has been copied to the clipboard or not.\n\n3. What is the purpose of the `useEffect` hook in this component?\n- The `useEffect` hook is used to reset the `copied` state variable to `false` after 2 seconds if it has been set to `true`. This is done to remove the \"copied\" checkmark icon after it has been displayed for a short period of time.",
- "checksum": "7b797f6d6da6c58eb4455c769363a9c0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/TradingHistory/Trading.json b/.autodoc/docs/json/core/src/marketplace/TradingHistory/Trading.json
deleted file mode 100644
index d534bf9a2..000000000
--- a/.autodoc/docs/json/core/src/marketplace/TradingHistory/Trading.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Trading.tsx",
- "filePath": "core/src/marketplace/TradingHistory/Trading.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/TradingHistory/Trading.tsx",
- "summary": "The code defines a React component called `Trading` that renders a table with a specific style. The table is created using the `styled-components` library, which allows the developer to write CSS code inside the JavaScript file. The `TableContainer` constant is a styled `table` element that defines the table's appearance. It has a minimum width of 350 pixels, and the cells in the table body have a bottom border of 0.5 pixels in white with 60% opacity.\n\nThe `Trading` component takes several props that allow the developer to customize the table's header and title. The component renders a `div` element with a white text title that can be customized using the `TitleMain` prop. The table's header has four columns with titles that can be customized using the `TitleA`, `TitleB`, `TitleC`, and `TitleD` props. The table body is rendered using the `children` prop, which is a special prop that allows the component to render any content passed to it between its opening and closing tags.\n\nThe `Trading` component uses CSS to style the table's borders and corners. The first column of each row has a left border of 1 pixel in a dark color. The top-left, top-right, bottom-left, and bottom-right corners of the table have a border radius of 15 pixels, giving the table a rounded appearance.\n\nThis component can be used in a larger project that requires a table with a specific style. The `Trading` component can be imported into other React components and used like any other React component. For example, a financial dashboard application could use the `Trading` component to display stock prices or other financial data in a table format. The `Trading` component's props can be customized to display the appropriate data and column titles.",
- "questions": "1. What is the purpose of the `Trading` component?\n- The `Trading` component is a React component that renders a table with customizable titles for each column.\n\n2. What is the purpose of the `TableContainer` styled component?\n- The `TableContainer` styled component is used to style the table element with specific CSS rules, such as border spacing, border radius, and background color.\n\n3. What are the default values for the `TitleA`, `TitleB`, `TitleC`, `TitleD`, and `TitleMain` props?\n- The default values for the `TitleA`, `TitleB`, `TitleC`, `TitleD`, and `TitleMain` props are provided as strings in the component definition. If these props are not passed in when the component is used, these default values will be displayed in the table.",
- "checksum": "0f9bad874f7a6aa8ed40faeddb0f7baa"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/WalletNav/WalletNav.json b/.autodoc/docs/json/core/src/marketplace/WalletNav/WalletNav.json
deleted file mode 100644
index ca90bc5ca..000000000
--- a/.autodoc/docs/json/core/src/marketplace/WalletNav/WalletNav.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "WalletNav.tsx",
- "filePath": "core/src/marketplace/WalletNav/WalletNav.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/WalletNav/WalletNav.tsx",
- "summary": "The code above is a simple React functional component called `WalletNav`. Its purpose is to render a navigation bar for a wallet feature in the larger project. \n\nThe `import` statement at the beginning of the code imports the React library, which is necessary for creating React components. \n\nThe `WalletNav` function returns a simple `div` element with the text \"WalletNav\" inside. This will be rendered as the navigation bar for the wallet feature. \n\nThe `export default` statement at the end of the code exports the `WalletNav` component so that it can be imported and used in other parts of the project. \n\nHere is an example of how this component might be used in another file within the project:\n\n```\nimport React from 'react'\nimport WalletNav from './WalletNav'\n\nconst WalletPage = () => {\n return (\n \n \n
\n )\n}\n```\n\nIn this example, the `Table` component maintains the state of the sorting order and the data to be sorted. The `SortButton` component is rendered in the header of the table column that can be sorted. When the button is clicked, the `toggleSortOrder` function is called, which updates the state and triggers a re-sorting of the data. The sorted data is then rendered in the table rows.",
- "questions": "1. What is the purpose of the `FilterWrapper` component?\n- The `FilterWrapper` component is a styled div that provides padding, border radius, and hover effects. It also prevents user selection and applies the same style to its child elements.\n\n2. What does the `SortButton` component do?\n- The `SortButton` component is a functional component that renders a `FilterWrapper` with a text content of either '↑' or '↓' depending on the value of the `ascending` prop. It also accepts a `toggleSortOrder` function as a prop that is called when the component is clicked.\n\n3. What external libraries are being used in this file?\n- This file is using two external libraries: `React` and `styled-components`. `React` is used to define and render the components, while `styled-components` is used to create the `FilterWrapper` component with custom styles.",
- "checksum": "32deff73954a4e94e5ada0f3237bce1c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/BridgeSearchModal/sorting.json b/.autodoc/docs/json/core/src/modals/BridgeSearchModal/sorting.json
deleted file mode 100644
index 6f752e8a6..000000000
--- a/.autodoc/docs/json/core/src/modals/BridgeSearchModal/sorting.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "sorting.ts",
- "filePath": "core/src/modals/BridgeSearchModal/sorting.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/sorting.ts",
- "summary": "This code defines a set of functions that are used to compare and sort tokens based on their balances and symbols. The functions are used in the larger project to display a list of tokens in a dropdown menu, with the most relevant tokens appearing at the top of the list.\n\nThe `balanceComparator` function takes two token amounts as input and returns a number that indicates which token has the higher balance. If both balances are defined, the function compares them and returns -1 if the first balance is higher, 0 if they are equal, and 1 if the second balance is higher. If only one balance is defined and it is greater than 0, the function returns -1 or 1 depending on which balance is defined. If neither balance is defined or they are both 0, the function returns 0.\n\nThe `getTokenComparator` function takes an array of token balances as input and returns a function that can be used to sort tokens based on their balances and symbols. The function first sorts the tokens by their balances using the `balanceComparator` function. If the balances are equal, the function sorts the tokens by their symbols in alphabetical order. If one or both tokens do not have a symbol, they are sorted to the end of the list.\n\nThe `useTokenComparator` function is a React hook that takes a boolean value as input and returns a function that can be used to sort tokens. The function first calls the `useAllTokenBalances` hook to get an array of token balances. It then calls the `getTokenComparator` function to get a comparator function based on the balances. If the input boolean value is true, the function returns a comparator function that sorts tokens in reverse order. Otherwise, it returns the original comparator function.\n\nHere is an example of how the `useTokenComparator` function might be used in the larger project:\n\n```jsx\nimport { useTokenComparator } from 'zoo'\n\nfunction TokenSelect({ tokens }) {\n const tokenComparator = useTokenComparator(false)\n\n return (\n \n )\n}\n```\n\nIn this example, the `TokenSelect` component takes an array of tokens as input and uses the `useTokenComparator` hook to get a comparator function. It then sorts the tokens using the comparator function and renders them in a dropdown menu. The most relevant tokens will appear at the top of the list based on their balances and symbols.",
- "questions": "1. What is the purpose of the `useTokenComparator` function?\n- The `useTokenComparator` function returns a comparator function that can be used to sort an array of `Token` objects based on their balances and symbols.\n\n2. What is the `balanceComparator` function used for?\n- The `balanceComparator` function is used to compare two token amounts with the highest one coming first, and is used as part of the `getTokenComparator` function.\n\n3. What is the significance of the `inverted` parameter in the `useTokenComparator` function?\n- The `inverted` parameter determines whether the comparator function should sort in ascending or descending order, and is used to reverse the order of the sorting if `inverted` is `true`.",
- "checksum": "673db5b12a89e69aa3fa12dce5b4542d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/BridgeSearchModal/styleds.json b/.autodoc/docs/json/core/src/modals/BridgeSearchModal/styleds.json
deleted file mode 100644
index 73fba2644..000000000
--- a/.autodoc/docs/json/core/src/modals/BridgeSearchModal/styleds.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "styleds.tsx",
- "filePath": "core/src/modals/BridgeSearchModal/styleds.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/styleds.tsx",
- "summary": "This file contains a set of styled components that can be used to create various UI elements in the larger project. The purpose of this code is to provide a consistent and reusable set of styles for different components across the project. \n\nThe `ModalInfo` component is a container that centers its child elements and provides padding and margin. It can be used to display information in a modal dialog box. \n\nThe `TextDot` component is a small dot with a height and width of 3 pixels and a border radius of 50%. It can be used as a bullet point or to indicate a selected item. \n\nThe `FadedSpan` component is a text element with a font size of 14 pixels. It can be used to display text that is less important than other content on the page. \n\nThe `Checkbox` component is an input element styled to have a height of 20 pixels and no margin. It can be used to create checkboxes in forms. \n\nThe `PaddedColumn` component is a container with 20 pixels of padding. It can be used to create columns of content with consistent spacing. \n\nThe `MenuItem` component is a container with a height of 56 pixels and a grid layout that can be used to display menu items. It has four columns, with the second column taking up the remaining space. \n\nThe `SearchInput` component is an input element styled to have a padding of 16 pixels and a border radius of 10 pixels. It can be used to create search bars or input fields. \n\nThe `Separator` and `SeparatorDark` components are horizontal lines with a height of 1 pixel. They can be used to separate content on a page. \n\nOverall, this file provides a set of reusable styled components that can be used to create consistent UI elements across the project. By using these components, developers can save time and ensure that the project has a consistent look and feel. \n\nExample usage:\n\n```\nimport { ModalInfo, TextDot, Checkbox } from 'zoo'\n\nconst MyComponent = () => {\n return (\n \n \n )\n}\n```",
- "questions": "1. What is the purpose of this code file?\n- This code file contains styled components for various UI elements used in the zoo project.\n\n2. What is the difference between `Separator` and `SeparatorDark` components?\n- Both components are used to create a horizontal line, but `SeparatorDark` likely has a darker color scheme compared to `Separator`.\n\n3. What is the purpose of the `MenuItem` component?\n- The `MenuItem` component is used to create a clickable menu item with a specific layout using CSS grid.",
- "checksum": "032baa7d7c1202a3faf4b97b544512ae"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/CastVoteModal/index.json b/.autodoc/docs/json/core/src/modals/CastVoteModal/index.json
deleted file mode 100644
index bfdfe9003..000000000
--- a/.autodoc/docs/json/core/src/modals/CastVoteModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/CastVoteModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/CastVoteModal/index.tsx",
- "summary": "The `CastVoteModal` component is a React component that renders a modal for confirming a vote on a proposal. It imports various hooks and components from the project's codebase and uses them to display information about the vote and allow the user to confirm or cancel their vote.\n\nThe component takes in several props, including the type of vote (approve or disapprove), a function to vote on the proposal, the user's voting power, and the number of approvals and disapprovals for the proposal. It also uses the `useSelector` hook to access the user's Zoo balance and the `useActiveWeb3React` hook to get the user's account.\n\nThe component renders a modal with information about the vote, including the user's voting power, the number of approvals and disapprovals, and the amount of Zoo required to vote. If the user has enough voting power, they can confirm their vote by clicking a button. If they do not have enough voting power, they must first approve the contract to spend their Zoo tokens on their behalf. The component uses the `useVotingApproveCallback` hook to handle this approval process.\n\nThe `CastVoteModal` component is used in the larger project to allow users to vote on proposals in the Zoo ecosystem. It provides a user-friendly interface for confirming votes and handles the approval process for spending Zoo tokens. The component can be easily customized to fit the project's design and functionality needs. \n\nExample usage:\n\n```jsx\n\n```",
- "questions": "1. What does this code do?\n- This code defines a React component called `CastVoteModal` that renders a modal for confirming a vote on a proposal. It uses various hooks and selectors to retrieve data from the application state and the blockchain.\n\n2. What external dependencies does this code have?\n- This code imports several modules from external packages, including `React`, `next/link`, `react-redux`, and `components/Modal`. It also imports several custom hooks from the `state/application/hooks`, `hooks/useTokenAllowance`, `hooks/useApproveCallback`, and `hooks/useZooVoting` modules.\n\n3. What props does the `CastVoteModal` component expect?\n- The `CastVoteModal` component expects several props to be passed to it, including `vote`, `voteProposal`, `votingPower`, `approvedCount`, and `disapprovedCount`. These props are used to populate the modal with information about the vote being cast and the user's available voting power.",
- "checksum": "7d8b39b911d25fc0f0365ef85e630e90"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/CountdownModal./index.json b/.autodoc/docs/json/core/src/modals/CountdownModal./index.json
deleted file mode 100644
index 3626c19fd..000000000
--- a/.autodoc/docs/json/core/src/modals/CountdownModal./index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/CountdownModal./index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/CountdownModal./index.tsx",
- "summary": "The `CooldownModal` component is a React functional component that displays a modal window with information about the cooldown time for breeding animals in the Zoo project. The component imports several modules from the project, including `React`, `ApplicationModal`, `useCountdownToggle`, `useModalOpen`, `Modal`, `BidModalHeader`, `MyNFT`, `ModalHeader`, and `Image`. \n\nThe component takes no props and returns a JSX element that renders a modal window with a header, an image, and some text. The header contains a close button that dismisses the modal window. The image is a snowflake icon that is displayed at the top of the modal window. The text explains that the cooldown time for breeding animals is 24 hours and that the cooldown helps protect the animals from Lorem. The text also displays a countdown timer that shows the remaining time until the next breeding opportunity. The timer is displayed in the format of hours:minutes:seconds. \n\nThe `CooldownModal` component is used in the larger Zoo project to provide users with information about the cooldown time for breeding animals. When a user attempts to breed an animal, the `CooldownModal` component is displayed to inform the user of the cooldown time and to provide a countdown timer that shows the remaining time until the next breeding opportunity. The component is also used to protect the animals from Lorem by enforcing a cooldown period between breeding attempts. \n\nHere is an example of how the `CooldownModal` component might be used in the Zoo project:\n\n```jsx\nimport CooldownModal from \"components/CooldownModal\";\n\nfunction BreedAnimal() {\n const [showModal, setShowModal] = useState(false);\n\n function handleBreed() {\n // perform breeding logic\n setShowModal(true);\n }\n\n return (\n <>\n \n {showModal && setSelectedBase(currency)}\n/>\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code exports a React component called `CommonBases` that displays a list of commonly paired tokens for a given `chainId`. It allows the user to select a token from the list and calls the `onSelect` function with the selected token.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `@zoolabs/zdk`, `react`, and various components from the `../../components` directory.\n\n3. What is the significance of the `COMMON_BASES` constant and how is it used in this code?\n- The `COMMON_BASES` constant is a configuration object that maps `chainId` values to arrays of `Currency` objects. It is used in this code to determine which tokens to display in the list based on the `chainId` prop passed to the `CommonBases` component. If `chainId` is not defined, an empty array is used instead.",
- "checksum": "41d2eff45ecd5c11401838e1ff98652e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/SearchModal/CurrencyList.json b/.autodoc/docs/json/core/src/modals/SearchModal/CurrencyList.json
deleted file mode 100644
index 0d5027cae..000000000
--- a/.autodoc/docs/json/core/src/modals/SearchModal/CurrencyList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CurrencyList.tsx",
- "filePath": "core/src/modals/SearchModal/CurrencyList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/SearchModal/CurrencyList.tsx",
- "summary": "The code is a React component that renders a list of currencies. It imports various components and hooks from the project's codebase and external libraries. The component takes in several props, including an array of currencies to display, a selected currency, and a callback function to handle currency selection. \n\nThe component renders a list of currencies using the `FixedSizeList` component from the `react-window` library. Each currency is rendered as a `CurrencyRow` component, which displays the currency's logo, symbol, name, and balance. The `CurrencyRow` component also displays tags associated with the currency, such as whether it was added by the user or is part of an inactive token list. \n\nThe component also includes a `BreakLineComponent` that is rendered between the list of currencies and any inactive token lists. The `BreakLineComponent` displays a message indicating that the following tokens are from inactive lists and provides a tooltip with more information. \n\nThe `CurrencyList` component is used in other parts of the project to display a list of currencies, such as in a dropdown menu for selecting a currency to trade. The component can be customized with various props to control its behavior and appearance. \n\nExample usage:\n\n```\nimport { CurrencyList } from \"@zoolabs/zdk\";\n\nfunction MyComponent() {\n const currencies = [/* array of Currency objects */];\n const [selectedCurrency, setSelectedCurrency] = useState(null);\n\n function handleCurrencySelect(currency) {\n setSelectedCurrency(currency);\n }\n\n return (\n console.log(\"Option clicked\")}\n color=\"#FF0000\"\n header=\"Home\"\n subheader=\"Go to the homepage\"\n icon=\"/icons/home.svg\"\n active={false}\n id=\"home-option\"\n/>\n```",
- "questions": "1. What is the purpose of this code and where is it used in the zoo project?\n- This code defines a React component called `Option` that renders a clickable option with an icon, header, and subheader. It can be used in various parts of the zoo project where such options are needed.\n\n2. What are the required and optional props for the `Option` component?\n- The required props are `color`, `header`, `icon`, and `id`. The optional props are `link`, `clickable`, `size`, `onClick`, `subheader`, and `active`.\n\n3. What is the significance of the `active` prop and how does it affect the rendering of the `Option` component?\n- The `active` prop determines whether the option is currently selected or not. If it is `true`, the option is rendered with a gradient background and a colored dot next to the header. If it is `false` or not provided, the option is rendered with a dark background and no dot.",
- "checksum": "0ff87b7092548d7d5b7d990f97919c70"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/WalletModal/PendingView.json b/.autodoc/docs/json/core/src/modals/WalletModal/PendingView.json
deleted file mode 100644
index 2d1edbe9b..000000000
--- a/.autodoc/docs/json/core/src/modals/WalletModal/PendingView.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "PendingView.tsx",
- "filePath": "core/src/modals/WalletModal/PendingView.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/WalletModal/PendingView.tsx",
- "summary": "The code above is a React component called `PendingView` that renders a view for when a user is waiting for a wallet connection to be established. The component takes in several props, including `connector`, `error`, `setPendingError`, and `tryActivation`. \n\nThe `connector` prop is an instance of an `AbstractConnector` class from the `@web3-react/abstract-connector` library. The `error` prop is a boolean that indicates whether there was an error connecting to the wallet. The `setPendingError` prop is a function that sets the `error` prop to `true` or `false`. The `tryActivation` prop is a function that attempts to activate the `connector`.\n\nThe component first checks if the user is using the MetaMask wallet by checking if `window.ethereum.isMetaMask` is truthy. It then renders a loading indicator using the `Dots` component from `../../components/Dots` if there is no error, or an error message with a \"Try Again\" button if there is an error. Clicking the \"Try Again\" button calls the `tryActivation` function with the `connector` prop.\n\nThe component then maps over an object called `SUPPORTED_WALLETS` from `../../config/wallets` and renders an `Option` component for each supported wallet. The `Option` component displays information about the wallet, including its name, description, and icon. If the `connector` prop matches the `connector` property of the current wallet option, the `Option` component is rendered. If not, `null` is returned.\n\nThis component is likely used in a larger project that involves connecting to a user's wallet to interact with a blockchain. It provides a user-friendly interface for waiting for the wallet connection to be established and displays information about the supported wallets. An example usage of this component might look like:\n\n```\nimport PendingView from './PendingView'\n\nfunction WalletConnection() {\n const [connector, setConnector] = useState(null)\n const [error, setError] = useState(false)\n\n const handleActivation = useCallback(async (connector) => {\n try {\n await activate(connector)\n setConnector(connector)\n } catch (error) {\n setError(true)\n }\n }, [])\n\n return (\n {metadata.name} \n \n \n \n \n \n \n \n {/* Your component code here */}\n \n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n This code sets up an ApolloClient to interact with different subgraphs based on the current chain ID, and provides a SubgraphProvider component for use in a React application.\n\n2. What are the different subgraph endpoints being used?\n The code uses three different subgraph endpoints: SUBGRAPH_LOCALHOST for the Hardhat development environment, SUBGRAPH_RINKEBY for the Rinkeby testnet, and SUBGRAPH_MAINNET for the Binance Smart Chain mainnet.\n\n3. What is the fallback client used for?\n The fallbackClient is used when the current environment is not development and the current chain ID is not Rinkeby. It defaults to the Hardhat client for development and the Rinkeby client for other environments.",
- "checksum": "b37313fa1e981df2a85eed991c961f3d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/sections/my-nft/AllMyNfts.json b/.autodoc/docs/json/core/src/sections/my-nft/AllMyNfts.json
deleted file mode 100644
index a25693a4e..000000000
--- a/.autodoc/docs/json/core/src/sections/my-nft/AllMyNfts.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AllMyNfts.tsx",
- "filePath": "core/src/sections/my-nft/AllMyNfts.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/sections/my-nft/AllMyNfts.tsx",
- "summary": "This code defines a React component called `AllMyNfts` that renders a section of a web page displaying a user's NFTs (non-fungible tokens). The component imports the `React` library and the `Image` component from the `next/image` module. \n\nThe `AllMyNfts` component returns a `div` element with a class of `allMyNfts` that contains a heading and a `div` element with a class of `allMyNfts__items`. The heading displays the text \"All My Nfts\" and is styled with CSS classes for font size, font weight, and letter spacing. The `allMyNfts__items` `div` contains four `div` elements with classes of `allMyNfts__item`. Each of these `div` elements displays an NFT image and is styled with CSS classes for size, border, and spacing.\n\nThe `Image` component is used to display the NFT images. It takes several props, including the `src` prop, which specifies the image file to display, and the `width` and `height` props, which specify the dimensions of the image. In this code, the `src` prop is set to a string that specifies the file path of each NFT image, and the `width` and `height` props are set to fixed values.\n\nThis component can be used in a larger project that involves displaying a user's NFT collection. It can be customized by changing the text of the heading and the image files and dimensions. For example, if the project involves displaying a user's artwork collection, the `AllMyNfts` component can be modified to display images of the artwork instead of NFTs. \n\nExample usage:\n\n```\nimport AllMyNfts from \"./AllMyNfts\";\n\nfunction App() {\n return (\n ` object as an argument and returns a Promise that resolves to a transaction object.\n\nThe `useBentoBoxTrait` hook is used to add the BentoBox trait to strategies that have BentoBox as their output. The trait is used to handle approvals for spending tokens when unzapping. The hook is exported as a default export from the file and can be used in other files in the project.\n\nExample usage:\n\n```jsx\nimport useBentoBoxTrait from './useBentoBoxTrait'\n\nconst MyStrategy = (props) => {\n const { ... } = useBentoBoxTrait(props)\n\n // use the trait properties and methods here\n\n return (\n // ...\n )\n}\n```",
- "questions": "1. What is the purpose of the `useBentoBoxTrait` function?\n- The `useBentoBoxTrait` function is a hook that adds a trait to strategies that have BentoBox as their output, allowing them to batch execute with permit if one is provided or else execute normally.\n\n2. What is the `bentoApproveCallback` variable used for?\n- The `bentoApproveCallback` variable is used to create a callback function that approves the Inari Master Contract and sets the BentoBox approval for the current user.\n\n3. What is the difference between `execute` and `batchExecute`?\n- `execute` is a function that executes a strategy normally, while `batchExecute` is a function that batches the execution with permit if one is provided or else executes normally. `batchExecute` is used when unzapping from BentoBox.",
- "checksum": "727850f69e5c5e6540ead5226cbf2ef9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/traits/useHasPermitTokenTrait.json b/.autodoc/docs/json/core/src/state/inari/traits/useHasPermitTokenTrait.json
deleted file mode 100644
index 5412858a4..000000000
--- a/.autodoc/docs/json/core/src/state/inari/traits/useHasPermitTokenTrait.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useHasPermitTokenTrait.ts",
- "filePath": "core/src/state/inari/traits/useHasPermitTokenTrait.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/traits/useHasPermitTokenTrait.ts",
- "summary": "The code defines a React hook called `useHasPermitTokenTrait` that can be used in conjunction with other hooks and traits to create a strategy for interacting with a smart contract. The hook takes in a `BaseStrategyHook` object as a parameter and returns a new object that includes the properties of both `BaseStrategyHook` and `BaseTrait`. \n\nThe purpose of this hook is to enable batched transactions with a permit token, which is a type of token that allows a smart contract to spend a certain amount of tokens on behalf of the token owner without requiring an explicit approval transaction. The hook uses several other hooks and functions to achieve this functionality. \n\nFirst, it imports `CurrencyAmount` and `Token` from the `@zoolabs/zdk` library, which are used to represent amounts of tokens and token objects, respectively. It also imports several other hooks and traits from other files in the project, including `useActiveWeb3React`, `useInariContract`, `useTrait`, and `useDerivedInariState`. \n\nThe `useActiveWeb3React` hook provides access to the current user's Ethereum account and network information, while `useInariContract` returns a reference to the Inari Master Contract, which is a smart contract used in the larger project. `useTrait` is a custom hook that returns a new object with properties from both the input object and a configuration object, while `useDerivedInariState` is another custom hook that returns a derived state object based on other state variables. \n\nThe hook also imports `useERC20Permit` and `useTransactionAdder` from other files in the project. `useERC20Permit` is a custom hook that returns an object with signature data and a function to gather a permit signature for a given token, while `useTransactionAdder` is a hook that adds a new transaction to a transaction queue. \n\nThe `TRAIT_CONFIG` object is defined with two properties, `overrides`, which is an array of strings representing the names of methods to override, and `execute`, which is a function that executes a batched transaction with a permit token if one is provided, or else executes a normal transaction. \n\nThe `useHasPermitTokenTrait` function returns a new object that includes the properties of both `BaseStrategyHook` and `BaseTrait`, as well as two new properties, `approveCallback` and `execute`. The `approveCallback` property is an array that includes the first element of the `BaseStrategyHook` object's `approveCallback` property and either the `gatherPermitSignature` function or the second element of the `BaseStrategyHook` object's `approveCallback` property, depending on whether a permit signature is available. The `execute` property is a function that calls the `batchExecute` function if a permit signature is available, or else calls the `execute` function from the input `BaseStrategyHook` object. \n\nOverall, this code defines a hook that can be used to create a strategy for interacting with a smart contract that supports batched transactions with a permit token. The hook uses several other hooks and functions from the larger project to achieve this functionality.",
- "questions": "1. What is the purpose of the `useHasPermitTokenTrait` hook?\n- The `useHasPermitTokenTrait` hook is used as a `BaseStrategy` when the `outputToken` allows for a batched `permitToken`.\n\n2. What is the purpose of the `batchExecute` function?\n- The `batchExecute` function is used to execute a batch transaction with permit if one is provided or else execute normally.\n\n3. What is the purpose of the `gatherPermitSignature` function?\n- The `gatherPermitSignature` function is used to gather the permit signature for the `inputValue` and `inariContract` address.",
- "checksum": "ba3ce1f6e0b906013f48a51d9517606b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/traits/useTrait.json b/.autodoc/docs/json/core/src/state/inari/traits/useTrait.json
deleted file mode 100644
index f6fbd198e..000000000
--- a/.autodoc/docs/json/core/src/state/inari/traits/useTrait.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useTrait.ts",
- "filePath": "core/src/state/inari/traits/useTrait.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/traits/useTrait.ts",
- "summary": "The code above defines a custom React hook called `useTrait`. This hook is designed to be used as a base trait hook for other hooks in the larger project. \n\nThe `useTrait` hook takes two arguments: `props` and an object containing an array of `overrides`. The `props` argument is an object that contains the properties that will be used by the hook. The `overrides` argument is an array of strings that represent the properties that can be overridden by other traits.\n\nThe hook uses the `useEffect` hook to check for any conflicts between the `overrides` array and the `props.overrides` array. If there are any conflicts, an error is thrown with a message that lists the conflicting properties.\n\nThe hook then uses the `useMemo` hook to return a new object that combines the original `props` object with the `overrides` array. This new object is then returned by the `useTrait` hook.\n\nThis hook can be used as a base trait hook for other hooks in the larger project. For example, a hook that adds a hover effect to a component could use the `useTrait` hook to ensure that it doesn't conflict with other hooks that may also modify the hover effect. \n\nHere is an example of how the `useTrait` hook could be used in a larger project:\n\n```\nimport useTrait from './useTrait'\n\nconst useHoverEffect = (props) => {\n const { overrides } = useTrait(props, { overrides: ['hover'] })\n\n // Add hover effect logic here\n\n return {\n ...overrides,\n }\n}\n\nexport default useHoverEffect\n```\n\nIn this example, the `useHoverEffect` hook uses the `useTrait` hook to ensure that it doesn't conflict with other hooks that may also modify the hover effect. The `overrides` object returned by the `useTrait` hook is then spread into the return object of the `useHoverEffect` hook.",
- "questions": "1. What is the purpose of the `BaseTrait` interface?\n - The `BaseTrait` interface defines a property called `overrides` that can be used by components that use the `useTrait` hook.\n\n2. What is the purpose of the `useTrait` hook?\n - The `useTrait` hook checks for conflicts between different trait overrides and returns a memoized object that includes the original `props` and the `overrides` array.\n\n3. What is the significance of the `overrides` array in the `useTrait` hook?\n - The `overrides` array is used to specify which properties of the `props` object should be overridden by the component that uses the `useTrait` hook. It is also used to check for conflicts between different trait overrides.",
- "checksum": "d77427bca0dc7c225095e7586401aff3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/types.json b/.autodoc/docs/json/core/src/state/inari/types.json
deleted file mode 100644
index fff8964c7..000000000
--- a/.autodoc/docs/json/core/src/state/inari/types.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "types.ts",
- "filePath": "core/src/state/inari/types.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/types.ts",
- "summary": "This code defines various interfaces and types related to the Inari project's strategies for swapping tokens. The `import` statements bring in necessary dependencies from the `@zoolabs/zdk` library and other files in the project. \n\nThe `Strategy` interface defines the structure of a strategy object, which includes an ID, general information about the strategy, and definitions of the input and output tokens. The `StrategyGeneralInfo` interface provides more specific information about the strategy, such as its name, description, and symbols for the input and output tokens. The `StrategyToken` interface defines the properties of a token, including its chain ID, address, decimals, and symbol. \n\nThe `StrategyBalances` interface defines the structure of an object that holds the balances of the input and output tokens for a given strategy. \n\nThe `StrategyHook` type is a union of three other types, each of which represents a different hook that can be used in a strategy. These hooks provide additional functionality for interacting with the BentoBox and permit tokens. \n\nThe `InariState` interface defines the structure of the state object for the Inari project, which includes information about the current strategy, whether the user is zapping in or out, and the input and output values. The `DerivedInariState` interface extends `InariState` and adds derived properties for the input and output token amounts and token objects. \n\nOverall, this code provides a foundation for defining and managing the state and functionality of the Inari project's token swapping strategies. It can be used in conjunction with other files and modules in the project to implement the actual swapping logic and user interface. \n\nExample usage:\n```typescript\nconst strategy: Strategy = {\n id: 'my-strategy',\n general: {\n name: 'My Strategy',\n steps: ['Step 1', 'Step 2'],\n zapMethod: 'zap',\n unzapMethod: 'unzap',\n description: 'A custom strategy for swapping tokens',\n inputSymbol: 'ETH',\n outputSymbol: 'USDC'\n },\n tokenDefinitions: {\n inputToken: {\n chainId: ChainId.MAINNET,\n address: '0x123abc',\n decimals: 18,\n symbol: 'ETH'\n },\n outputToken: {\n chainId: ChainId.MAINNET,\n address: '0x456def',\n decimals: 6,\n symbol: 'USDC'\n }\n }\n}\n\nconst balances: StrategyBalances = {\n inputTokenBalance: CurrencyAmount.fromRawAmount(strategy.tokenDefinitions.inputToken, '1'),\n outputTokenBalance: CurrencyAmount.fromRawAmount(strategy.tokenDefinitions.outputToken, '100')\n}\n\nconst inariState: InariState = {\n id: 'my-state',\n zapIn: true,\n inputValue: '0.5',\n outputValue: '50',\n general: strategy.general,\n tokens: strategy.tokenDefinitions\n}\n\nconst derivedState: DerivedInariState = {\n ...inariState,\n inputValue: CurrencyAmount.fromRawAmount(strategy.tokenDefinitions.inputToken, inariState.inputValue),\n outputValue: CurrencyAmount.fromRawAmount(strategy.tokenDefinitions.outputToken, inariState.outputValue),\n tokens: {\n inputToken: new Token(strategy.tokenDefinitions.inputToken.chainId, strategy.tokenDefinitions.inputToken.address, strategy.tokenDefinitions.inputToken.decimals, strategy.tokenDefinitions.inputToken.symbol),\n outputToken: new Token(strategy.tokenDefinitions.outputToken.chainId, strategy.tokenDefinitions.outputToken.address, strategy.tokenDefinitions.outputToken.decimals, strategy.tokenDefinitions.outputToken.symbol)\n }\n}\n```",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code defines interfaces and types related to a strategy for swapping tokens, as well as state interfaces for an Inari app. It likely solves the problem of providing a standardized way to define and interact with token swapping strategies.\n\n2. What are the dependencies of this code and where can they be found?\n- This code imports several dependencies from the `@zoolabs/zdk` package, as well as several other modules within the `zoo` project. The specific locations of these dependencies would need to be determined by examining the project's file structure.\n\n3. What is the difference between `Strategy` and `DerivedInariState`?\n- `Strategy` defines the structure of a token swapping strategy, including general information about the strategy and definitions of the input and output tokens. `DerivedInariState` extends `InariState` and adds additional derived properties, including `inputValue` and `outputValue` as `CurrencyAmount` types and `inputToken` and `outputToken` as `Token` types.",
- "checksum": "631185d0944ed8c54492eb7d9f05784c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/index.json b/.autodoc/docs/json/core/src/state/index.json
deleted file mode 100644
index b82afec80..000000000
--- a/.autodoc/docs/json/core/src/state/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/state/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/index.ts",
- "summary": "This code is responsible for creating and configuring a Redux store for the zoo project. It uses the `configureStore` function from the `@reduxjs/toolkit` package to create the store, and `persistReducer` and `persistStore` from the `redux-persist` package to persist the store's state across sessions.\n\nThe `makeStore` function creates the store with the persisted reducer and middleware that enables the use of asynchronous actions (thunks). It also sets up the store to use the `devTools` extension in development mode.\n\nThe `getOrCreateStore` function is used to retrieve the store instance, creating it if it doesn't exist. It checks if the store already exists and returns it if it does. If a preloaded state is provided, it merges it with the current state in the store and creates a new store. This is useful for server-side rendering (SSR) and static site generation (SSG) where the initial state is provided by the server. If the code is running in the client, it creates the store once and returns it.\n\nThe `store` variable is initialized with the result of calling `getOrCreateStore()`, which ensures that the store is created and persisted before it is used.\n\nThe `persistConfig` object defines the configuration for persisting the store's state. It specifies the `key` to use for the persisted state, the `whitelist` of keys to persist, and the `storage` engine to use (in this case, `localStorage`).\n\nThe `PERSISTED_KEYS` array contains the keys of the state slices that should be persisted. This array is used in the `persistConfig` object.\n\nThe `AppState` and `AppDispatch` types are defined as the return types of `store.getState()` and `store.dispatch()`, respectively. The `AppThunk` type is a generic type that represents a thunk action that returns a value of type `ReturnType` and has access to the `AppState` and `Action` types.\n\nThe `persistor` variable is initialized with the result of calling `persistStore(store)`, which returns a persistor object that can be used to rehydrate the store's state.\n\nOverall, this code sets up a Redux store with persistence and middleware for asynchronous actions, and provides functions for retrieving and using the store instance. It is a crucial part of the zoo project's state management and enables the use of Redux for predictable and scalable state management. \n\nExample usage:\n\n```javascript\nimport { useDispatch, useSelector } from 'react-redux'\nimport { AppDispatch, AppState } from './store'\n\nfunction MyComponent() {\n const dispatch: AppDispatch = useDispatch()\n const user = useSelector((state: AppState) => state.user)\n\n useEffect(() => {\n dispatch(fetchUser())\n }, [dispatch])\n\n return ` object, and `error`, which is a string or undefined. The `parsedAmount` property is derived based on the input and other parameters, while the `error` property is set to a string if there is an error with the input or if the user is not connected to a wallet.",
- "checksum": "579d0fad52eb77be8da2d7ac5678dbf5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/store/actions.json b/.autodoc/docs/json/core/src/state/store/actions.json
deleted file mode 100644
index 17a31a176..000000000
--- a/.autodoc/docs/json/core/src/state/store/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/store/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/store/actions.ts",
- "summary": "This code is a module that exports several Redux actions related to managing a shopping cart and products. The `createAction` function from the `@reduxjs/toolkit` library is used to create each action, which is essentially an object with a `type` property and a `payload` property. The `type` property is a string that identifies the action, while the `payload` property contains the data associated with the action.\n\nThe `getCartItems` action returns an array of `CartItem` objects, which likely represent items in the user's shopping cart. The `clearCartItems` action does not have a payload and is likely used to empty the user's cart. The `addCartItem` action takes a single `CartItem` object as its payload and is used to add an item to the cart. The `updateCartItem` action also takes a `CartItem` object as its payload and is used to update an existing item in the cart. The `removeCartItem` action takes a string (likely an ID) as its payload and is used to remove an item from the cart.\n\nThe `getProducts` action returns an array of `Product` objects, which likely represent items available for purchase in the store. It is not clear from this code how the products are obtained or managed, but it is likely that they are stored in a separate Redux slice or fetched from an API.\n\nThese actions can be used in conjunction with a Redux store and reducers to manage the state of the shopping cart and products in a larger e-commerce application. For example, a `cart` reducer could handle the `addCartItem`, `updateCartItem`, and `removeCartItem` actions to update the cart state, while a `product` reducer could handle the `getProducts` action to update the available products state. The `getCartItems` action could be used to retrieve the current cart state from the store and display it to the user, while the `clearCartItems` action could be triggered when the user completes their purchase. Overall, this code provides a simple and standardized way to manage shopping cart and product-related actions in a Redux-based e-commerce application.",
- "questions": "1. What is the purpose of this code?\n- This code exports several Redux actions related to managing a shopping cart and retrieving products.\n\n2. What are the types `CartItem` and `Product`?\n- These types are likely defined in separate files and imported into this module. They likely represent the shape of data for items in a shopping cart and products available for purchase.\n\n3. How are these actions used in the application?\n- This code only defines the actions, so a smart developer may want to look for where these actions are dispatched and handled in the application's Redux store and UI components.",
- "checksum": "a379714c251ea44362143f03b09b9eed"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/store/hooks.json b/.autodoc/docs/json/core/src/state/store/hooks.json
deleted file mode 100644
index 90ff9dbbb..000000000
--- a/.autodoc/docs/json/core/src/state/store/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.tsx",
- "filePath": "core/src/state/store/hooks.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/state/store/hooks.tsx",
- "summary": "The code above is a module that exports two functions: `useCart` and `useAllProducts`. It also imports several dependencies such as `useAppDispatch`, `useAppSelector`, `useCallback`, `useMemo`, `useState`, `useSelector`, `useDispatch`, `toast`, `CartItem`, `db`, `collection`, `getDoc`, `getDocs`, `limit`, `orderBy`, `query`, and `where`.\n\nThe `useCart` function returns an array of four functions that can be used to interact with the shopping cart. These functions are `addToCart`, `removeFromCart`, `updateCart`, and `clearCart`. The `addToCart` function takes a `CartItem` object as an argument and dispatches an `addCartItem` action to the Redux store. The `removeFromCart` function takes an `id` string as an argument and dispatches a `removeCartItem` action to the Redux store. The `updateCart` function takes a `CartItem` object as an argument and dispatches an `updateCartItem` action to the Redux store. The `clearCart` function dispatches a `clearCartItems` action to the Redux store.\n\nThe `useAllProducts` function returns a function that can be used to retrieve all the products from the Firebase Firestore database. This function takes four optional arguments: `startDate`, `endDate`, `noLimit`, and `callback`. The `startDate` and `endDate` arguments are strings that represent the start and end dates of the products to retrieve. The `noLimit` argument is a boolean that determines whether to limit the number of products retrieved. The `callback` argument is a function that is called with the retrieved products as an argument. If the `callback` argument is not provided, the retrieved products are dispatched to the Redux store using the `getProducts` action.\n\nOverall, this module provides functions that can be used to interact with the shopping cart and retrieve products from the database. These functions can be used in other parts of the project to implement shopping cart functionality and display product information. For example, the `useCart` functions can be used in a shopping cart component to add, remove, update, and clear items from the cart. The `useAllProducts` function can be used in a product listing component to retrieve and display all the available products.",
- "questions": "1. What is the purpose of the `useCart` function and what does it return?\n- The `useCart` function returns an array of functions that allow for adding, removing, updating, and clearing items in a cart. It is likely used in a shopping cart feature of the application.\n\n2. What is the purpose of the `useAllProducts` function and what parameters does it take?\n- The `useAllProducts` function returns a function that retrieves all products from a Firebase database and either dispatches an action to update the Redux store or calls a callback function with the retrieved products. It takes optional parameters for filtering the products by date range and limiting the number of results.\n\n3. What is the purpose of the `notify` function and how is it used?\n- The `notify` function is used to display toast notifications using the `react-toastify` library. It takes a message and a type (error, success, or info) as parameters and displays a corresponding toast notification. It is likely used throughout the application to display feedback to the user.",
- "checksum": "4884b481abc553d1990e93013af1bd16"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/store/reducer.json b/.autodoc/docs/json/core/src/state/store/reducer.json
deleted file mode 100644
index cf31fea7c..000000000
--- a/.autodoc/docs/json/core/src/state/store/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/store/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/store/reducer.ts",
- "summary": "This code defines a Redux store for managing the state of a shopping cart in an e-commerce application. The store state is defined as an object with two properties: `CartItems` and `Products`. The `CartItems` property is an array of `CartItem` objects, which represent items in the shopping cart. The `Products` property is an array of `Product` objects, which represent the available products in the store.\n\nThe `createReducer` function from the `@reduxjs/toolkit` library is used to create a reducer function that handles actions dispatched to the store. The reducer function is defined using a builder pattern, which allows for concise and readable code.\n\nThe reducer function handles several actions, including `getProducts`, `getCartItems`, `addCartItem`, `updateCartItem`, `removeCartItem`, and `clearCartItems`. The `getProducts` and `getCartItems` actions update the `Products` and `CartItems` properties of the store state, respectively, with the payload data provided in the action.\n\nThe `addCartItem` action adds a new `CartItem` object to the `CartItems` array. If the `CartItem` already exists in the array, an error is thrown. The `updateCartItem` action updates an existing `CartItem` object in the `CartItems` array. If the `CartItem` does not exist in the array, an error is thrown.\n\nThe `removeCartItem` action removes an existing `CartItem` object from the `CartItems` array based on the `id` provided in the action payload. The `clearCartItems` action removes all `CartItem` objects from the `CartItems` array.\n\nThis code can be used in the larger e-commerce application to manage the state of the shopping cart. For example, when a user adds a product to their cart, an `addCartItem` action can be dispatched to the store with the `CartItem` object as the payload. The reducer function will update the `CartItems` array with the new `CartItem` object. Similarly, when a user removes a product from their cart, a `removeCartItem` action can be dispatched to the store with the `id` of the `CartItem` object to be removed as the payload. The reducer function will update the `CartItems` array by removing the specified `CartItem` object.",
- "questions": "1. What is the purpose of this code?\n- This code defines the initial state and a reducer function for a Redux store that manages cart items and products.\n\n2. What actions can be dispatched to this reducer?\n- The actions that can be dispatched to this reducer are `getProducts`, `getCartItems`, `addCartItem`, `updateCartItem`, `removeCartItem`, and `clearCartItems`.\n\n3. What are the types of `CartItem` and `Product`?\n- `CartItem` and `Product` are custom types defined elsewhere in the project, and this code imports them. Their definitions are not shown in this code snippet.",
- "checksum": "941ec8b59ab782e47cf9b2516e16b6d1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/swap/actions.json b/.autodoc/docs/json/core/src/state/swap/actions.json
deleted file mode 100644
index 30505c438..000000000
--- a/.autodoc/docs/json/core/src/state/swap/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/swap/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/swap/actions.ts",
- "summary": "This code is a module that exports several Redux actions related to a \"swap\" feature. The purpose of this feature is likely to allow users to exchange one type of currency for another. \n\nThe `Field` enum defines two possible values: `INPUT` and `OUTPUT`. These likely refer to the input and output currencies in the swap transaction. \n\nThe `createAction` function is imported from the `@reduxjs/toolkit` library and is used to create Redux actions. Each of the exported functions in this module uses `createAction` to create a different action. \n\n`selectCurrency` takes an object with two properties: `field` (which should be either `Field.INPUT` or `Field.OUTPUT`) and `currencyId` (a string representing the selected currency). This action is likely dispatched when the user selects a currency from a dropdown menu or similar UI element. \n\n`switchCurrencies` takes no arguments and is likely dispatched when the user clicks a button to switch the input and output currencies. \n\n`typeInput` takes an object with two properties: `field` (either `Field.INPUT` or `Field.OUTPUT`) and `typedValue` (a string representing the user's typed input). This action is likely dispatched when the user types a value into an input field. \n\n`replaceSwapState` takes an object with several properties: `field` (either `Field.INPUT` or `Field.OUTPUT`), `typedValue` (a string representing the user's typed input), `inputCurrencyId` (an optional string representing the selected input currency), `outputCurrencyId` (an optional string representing the selected output currency), and `recipient` (a string or null representing the recipient of the swap transaction). This action is likely dispatched when the user submits the swap transaction. \n\n`setRecipient` takes an object with one property: `recipient` (a string or null representing the recipient of the swap transaction). This action is likely dispatched when the user enters a recipient for the swap transaction. \n\nOverall, this module exports several Redux actions that are likely used in a larger feature allowing users to swap currencies. These actions are dispatched in response to user interactions with various UI elements, and likely update the Redux store with information about the selected currencies, user input, and recipient. Here is an example of how `selectCurrency` might be used in a React component:\n\n```\nimport { useDispatch } from 'react-redux';\nimport { selectCurrency, Field } from './zoo';\n\nfunction CurrencySelector({ field }) {\n const dispatch = useDispatch();\n\n function handleCurrencySelect(currencyId) {\n dispatch(selectCurrency({ field, currencyId }));\n }\n\n return (\n \n );\n}\n```",
- "questions": "1. What is the purpose of the `createAction` function being imported from `@reduxjs/toolkit`?\n - The `createAction` function is used to create Redux actions with a specific type and payload structure.\n2. What is the `Field` enum used for?\n - The `Field` enum defines two constants, `INPUT` and `OUTPUT`, which are used as values for the `field` property in some of the created actions.\n3. What is the `replaceSwapState` action used for and what are its possible payload properties?\n - The `replaceSwapState` action is used to replace the entire swap state with new values. Its payload can include a `field` property (either `INPUT` or `OUTPUT`), a `typedValue` property (a string), optional `inputCurrencyId` and `outputCurrencyId` properties (strings), and a `recipient` property (a string or null).",
- "checksum": "afb4873d255a0dcc0e2d5d9368505123"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/swap/reducer.json b/.autodoc/docs/json/core/src/state/swap/reducer.json
deleted file mode 100644
index 879af76e4..000000000
--- a/.autodoc/docs/json/core/src/state/swap/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/swap/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/swap/reducer.ts",
- "summary": "This code defines a Redux reducer for managing the state of a currency swapping feature in a larger project called \"zoo\". The reducer handles various actions related to currency swapping, such as selecting a currency, switching the input and output currencies, typing in a value, and setting a recipient address.\n\nThe `SwapState` interface defines the shape of the state object that the reducer manages. It includes the currently selected input and output currencies, the typed value, and the recipient address. The `initialState` object sets the initial values for these properties.\n\nThe `createReducer` function from the `@reduxjs/toolkit` library is used to create the reducer function. It takes the initial state and a \"builder\" function that defines how the state should be updated in response to different actions.\n\nThe `addCase` method of the builder function is used to define how the state should be updated for each action. For example, the `replaceSwapState` action updates the state with new values for the input and output currencies, the typed value, the recipient address, and the independent field (the field that the user is currently interacting with). The `selectCurrency` action updates the state with a new currency selection for the specified field (input or output), and may also swap the input and output currencies if the same currency is selected for both fields. The `switchCurrencies` action swaps the input and output currencies. The `typeInput` action updates the state with a new typed value for the specified field. The `setRecipient` action updates the state with a new recipient address.\n\nOverall, this code provides a way to manage the state of a currency swapping feature in a Redux store. It can be used in conjunction with other parts of the \"zoo\" project to provide a seamless user experience for swapping currencies. Here is an example of how this reducer might be used in a React component:\n\n```jsx\nimport { useDispatch, useSelector } from 'react-redux'\nimport { SwapState, selectCurrency, switchCurrencies, typeInput, setRecipient } from './zoo'\n\nfunction CurrencySwap() {\n const dispatch = useDispatch()\n const swapState = useSelector((state: { swap: SwapState }) => state.swap)\n\n function handleCurrencySelect(field: Field, currencyId: string) {\n dispatch(selectCurrency({ field, currencyId }))\n }\n\n function handleSwitchCurrencies() {\n dispatch(switchCurrencies())\n }\n\n function handleTypeInput(field: Field, typedValue: string) {\n dispatch(typeInput({ field, typedValue }))\n }\n\n function handleSetRecipient(recipient: string) {\n dispatch(setRecipient({ recipient }))\n }\n\n return (\n (\n (state) => state.voting.proposals\n );\n\n useEffect(() => {\n dispatch(getAllProposals());\n }, [dispatch]);\n\n return (\n ` values. \n\nThe `CurrencyAmount` and `Token` types are imported from the `@zoolabs/zdk` library, which suggests that this code is likely part of the zoo project's integration with that library. `CurrencyAmount` represents a quantity of a particular currency, while `Token` represents a specific token within the zoo project. \n\nThe `TokenBalancesMap` type is likely used to keep track of the balances of various tokens within the zoo project. For example, if a user has 10 ZOO tokens and 5 ETH tokens, their `TokenBalancesMap` might look like this:\n\n```\n{\n \"ZOO\": CurrencyAmount(10, Token),\n \"ETH\": CurrencyAmount(5, Token)\n}\n```\n\nThis code can be used throughout the zoo project to keep track of token balances and perform various operations on them. For example, a function might take a `TokenBalancesMap` as an argument and return the total value of all tokens in a particular currency. \n\nOverall, this code serves as a foundational piece of the zoo project's token management system, allowing for easy tracking and manipulation of token balances.",
- "questions": "1. **What is the purpose of the `CurrencyAmount` and `Token` imports from `@zoolabs/zdk`?** \n `CurrencyAmount` and `Token` are likely classes or interfaces defined in the `@zoolabs/zdk` library that are used in this code to represent currency amounts and tokens respectively.\n\n2. **What is the `TokenAddress` type used for?** \n `TokenAddress` is a type alias for the `string` type, and is likely used to represent the address of a token in the `TokenBalancesMap`.\n\n3. **What is the `TokenBalancesMap` type used for?** \n `TokenBalancesMap` is a type alias for a `Record` object that maps `TokenAddress` keys to `CurrencyAmount` values. This type is likely used to represent a mapping of token addresses to their respective balances.",
- "checksum": "9a553209de0064cae2b66f2723546b7d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/zoo/actions.json b/.autodoc/docs/json/core/src/state/zoo/actions.json
deleted file mode 100644
index 4efdaa06e..000000000
--- a/.autodoc/docs/json/core/src/state/zoo/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/zoo/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/zoo/actions.ts",
- "summary": "This code exports a set of functions and actions that can be used in the larger project. The functions and actions are related to the zoo project and are used to manage the state of the application. The code imports various types and interfaces from other files in the project. \n\nThe `createAction` function is used to create actions that can be dispatched to the store. The actions include `getZooBalance`, `getBNBBalance`, `getEggs`, `getAllowance`, `addEgg`, `loading`, `updateMyNfts`, `eggsCount`, `animalsCount`, `breedsCount`, `addAuctionNft`, `createBid`, and `addNftTTransfers`. \n\nThe `getZooBalance` action is used to get the balance of the zoo token for a given account. The `getBNBBalance` action is used to get the balance of BNB for a given account. The `getEggs` action is used to get the eggs for a given account. The `getAllowance` action is used to get the allowance for a given account. The `addEgg` action is used to add an egg to the state. The `loading` action is used to set the loading state of the application. The `updateMyNfts` action is used to update the NFTs for a given account. The `eggsCount` action is used to update the count of eggs. The `animalsCount` action is used to update the count of animals. The `breedsCount` action is used to update the count of breeds. The `addAuctionNft` action is used to add an NFT to the auction. The `createBid` action is used to create a bid for an NFT. The `addNftTTransfers` action is used to add an NFT transfer to the state.\n\nThe code also exports the `clear`, `push`, and `remove` functions from the `toasts` file. These functions are used to manage the toasts in the application.\n\nOverall, this code provides a set of functions and actions that can be used to manage the state of the zoo project. These functions and actions can be imported and used in other files in the project.",
- "questions": "1. What are the actions being exported from this file?\n- The file exports several actions such as `getZooBalance`, `getBNBBalance`, `getEggs`, `getAllowance`, `addEgg`, `loading`, `updateMyNfts`, `eggsCount`, `animalsCount`, `breedsCount`, `addAuctionNft`, `createBid`, and `addNftTTransfers`.\n\n2. What are the types being imported in this file?\n- The file imports several types such as `Auction`, `AvailableEgg`, `Egg`, and `MyNFT`.\n\n3. What is the purpose of the `createAction` function being imported from \"@reduxjs/toolkit\"?\n- The `createAction` function is used to create an action creator function that returns an action object with a type and a payload. This function is used to create several actions in this file such as `getZooBalance`, `getBNBBalance`, `getEggs`, `getAllowance`, `addEgg`, `loading`, `updateMyNfts`, `eggsCount`, `animalsCount`, `breedsCount`, `addAuctionNft`, `createBid`, and `addNftTTransfers`.",
- "checksum": "30ab37773f1133f84e288a5b44b78995"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/zoo/reducer.json b/.autodoc/docs/json/core/src/state/zoo/reducer.json
deleted file mode 100644
index e0fe7c869..000000000
--- a/.autodoc/docs/json/core/src/state/zoo/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/zoo/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/zoo/reducer.ts",
- "summary": "This code defines the state and reducer for the `zoo` project. The `zoo` project is a blockchain-based game where users can buy, sell, and breed virtual animals. The state is defined as an object with various properties such as `animals`, `myBids`, `myAuctions`, `eggs`, `zooBalance`, `myEggs`, and `myTransactions`. The reducer is created using the `createReducer` function from the `@reduxjs/toolkit` library.\n\nThe reducer handles various actions such as `loading`, `getZooBalance`, `getBNBBalance`, `getAllowance`, `addEgg`, `updateMyNfts`, `addAuctionNft`, `eggsCount`, `animalsCount`, `breedsCount`, and `addNftTTransfers`. These actions update the state based on the payload received. For example, the `getZooBalance` action updates the `zooBalance` property of the state with the balance received in the payload.\n\nThe code also imports various functions and types from other files such as `actions`, `types`, and `functions`. These files contain the implementation of the various actions and types used in the `zoo` project.\n\nOverall, this code defines the state and reducer for the `zoo` project and handles various actions to update the state based on the payload received. This code can be used in the larger `zoo` project to manage the state of the application and handle various user actions. For example, when a user buys an animal, the `addNftTTransfers` action can be used to update the state with the new transfer. Similarly, when a user wants to check their balance, the `getZooBalance` action can be used to retrieve the balance from the blockchain and update the state.",
- "questions": "1. What are the different actions being imported from \"./actions\" and what do they do?\n- The actions being imported are `getZooBalance`, `getAllowance`, `addEgg`, `updateMyNfts`, `loading`, `eggsCount`, `animalsCount`, `breedsCount`, `addAuctionNft`, `getBNBBalance`, and `addNftTTransfers`. They are used to update different parts of the `initialState` object in response to different events.\n\n2. What is the purpose of the `createReducer` function and how is it being used in this code?\n- The `createReducer` function is used to create a Redux reducer function that updates the state based on different actions. It takes an initial state object and a builder function that defines how the state should be updated in response to different actions. In this code, it is being used to create the default export for the module.\n\n3. What is the purpose of the `isEmptyObj` function and where is it being used?\n- The `isEmptyObj` function is used to check if an object is empty (i.e. has no properties). It is being imported from a `functions` module and used in the `addEgg` and `updateMyNfts` cases of the reducer to check if the payload object is empty before updating the state.",
- "checksum": "2e963d143f6a7a17a3e2bd27c735b589"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/zoo/types.json b/.autodoc/docs/json/core/src/state/zoo/types.json
deleted file mode 100644
index 552c5488d..000000000
--- a/.autodoc/docs/json/core/src/state/zoo/types.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "types.ts",
- "filePath": "core/src/state/zoo/types.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/zoo/types.ts",
- "summary": "This code defines several interfaces that are likely used throughout the larger zoo project. The `AnimalState` interface defines a single property, `eggs`, which is a number representing the number of eggs in the animal's possession. The `ZooState` interface defines several properties related to the state of the zoo, including `eggs`, which is an object with string keys and `Egg` values, representing all the eggs in the zoo; `animals`, which is an object with string keys and `Animal` values, representing all the animals in the zoo; `zooBalance`, which is a number representing the amount of money the zoo has; `myEggs`, which is an object with string keys and `Egg` values, representing all the eggs owned by the user; `myTransactions`, which is an array of objects representing the user's transactions; `myBids`, which is an object with string keys and `Egg` values, representing all the eggs the user has bid on; and `myAuctions`, which is an object with string keys and `Egg` values, representing all the eggs the user has put up for auction.\n\nThe `MyNFT` interface defines a large number of properties related to a non-fungible token (NFT) owned by the user. This interface likely represents the structure of the data associated with an NFT in the larger zoo project.\n\nOverall, these interfaces provide a way to define the structure of the data used throughout the zoo project, allowing for consistent and type-safe usage of this data throughout the codebase. For example, the `AnimalState` interface could be used to define the state of an animal component in the zoo UI, while the `MyNFT` interface could be used to define the structure of NFT data returned from an API call.",
- "questions": "1. What is the purpose of the `AnimalState` interface?\n- The `AnimalState` interface defines the shape of the state object that contains the number of eggs in the zoo.\n\n2. What is the relationship between the `ZooState` interface and the `Animal` and `Egg` types?\n- The `ZooState` interface contains properties that use the `Animal` and `Egg` types as values, indicating that the state object contains information about animals and eggs in the zoo.\n\n3. What is the purpose of the `MyNFT` interface and what properties does it contain?\n- The `MyNFT` interface defines the shape of an object that represents a non-fungible token (NFT) and contains properties such as description, index, customName, and various other metadata related to the NFT.",
- "checksum": "b9387b4d8c147adc074a9e8efef7e49c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/styles/fonts/made-outer-sans/License READ ME FIRST.json b/.autodoc/docs/json/core/src/styles/fonts/made-outer-sans/License READ ME FIRST.json
deleted file mode 100644
index a153f6cf0..000000000
--- a/.autodoc/docs/json/core/src/styles/fonts/made-outer-sans/License READ ME FIRST.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "License READ ME FIRST.txt",
- "filePath": "core/src/styles/fonts/made-outer-sans/License READ ME FIRST.txt",
- "url": "zoo-labs/zoo/blob/master/core/src/styles/fonts/made-outer-sans/License READ ME FIRST.txt",
- "summary": "This code is not actually a part of the zoo project, but rather a license agreement for a typeface created by MadeType. The purpose of this code is to provide information about the terms and conditions of using the typeface, as well as contact information for the creator. \n\nThe code includes links to various websites where the typeface can be purchased, indicating that it is available for commercial use. However, the license agreement states that before using the typeface for commercial purposes, the user must contact MadeType to obtain permission. This suggests that the creator may have specific requirements or restrictions for commercial use.\n\nThe license agreement also includes a disclaimer stating that MadeType is not liable for any damage resulting from the use of the typeface. This is a common practice in the design industry, as it protects the creator from any legal issues that may arise from the use of their work.\n\nOverall, this code serves as an important legal document for anyone who wishes to use the MadeType typeface. It outlines the terms and conditions of use, as well as contact information for the creator. By including this license agreement, MadeType is able to protect their work and ensure that it is used appropriately. \n\nExample usage:\n\nIf a designer wants to use the MadeType typeface for a commercial project, they would need to contact MadeType at the provided email address to obtain permission. They would also need to ensure that they follow the terms and conditions outlined in the license agreement, such as giving credit to the creator and not using the typeface in any way that could be considered harmful or offensive.",
- "questions": "1. What is the purpose of this code?\n \n This code is not a program or script, but rather a license agreement for a typeface created by MadeType. \n\n2. Can this typeface be used for commercial purposes?\n \n The license agreement states that commercial use is allowed, but the user must contact MadeType at Madetypeinfo@gmail.com before doing so. \n\n3. Who is responsible for any damage resulting from the use of this typeface?\n \n The license agreement states that MadeType is not liable for any damage resulting from the use of this typeface.",
- "checksum": "ffdeeec7cab9df76869af3bea88d8286"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/styles/react-morphing-modal.json b/.autodoc/docs/json/core/src/styles/react-morphing-modal.json
deleted file mode 100644
index 0cca994a3..000000000
--- a/.autodoc/docs/json/core/src/styles/react-morphing-modal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "react-morphing-modal.css",
- "filePath": "core/src/styles/react-morphing-modal.css",
- "url": "zoo-labs/zoo/blob/master/core/src/styles/react-morphing-modal.css",
- "summary": "This code defines the styles for a React component called `ReactMorphingModal`. The component is a modal window that can be used to display content on top of the main application. The styles are defined using CSS and include properties such as position, height, width, background color, border radius, and transitions.\n\nThe `.RMM__close-button` class defines the styles for a close button that appears in the top left corner of the modal window. The button is circular and has a white \"X\" in the center. The button is hidden by default and only appears when the modal window is active. When the user hovers over the button, the background color changes to a darker shade of black.\n\nThe `.RMM__container` class defines the styles for the container that holds the modal window. The container is fixed to the top left corner of the screen and has a height and width of 100%. The container is hidden by default and only appears when the modal window is active. When the container is active, it has a higher z-index than the rest of the application, which ensures that it appears on top of all other content.\n\nThe `.RMM__body` class defines the styles for the content of the modal window. The content is positioned in the center of the screen and has a white background. The content is hidden by default and only appears when the modal window is active. When the content is active, it has a higher z-index than the close button, which ensures that it appears on top of the button.\n\nThe `.RMM__placeholder` class defines the styles for the placeholder that appears behind the modal window when it is active. The placeholder has a black background and is used to darken the rest of the application while the modal window is active.\n\nOverall, this code defines the styles for a React component that can be used to display content in a modal window. The component includes a close button, a container for the modal window, and styles for the content of the modal window. The component can be customized by changing the CSS styles defined in this file. For example, the background color of the modal window can be changed by modifying the `background` property in the `.RMM__body` class.",
- "questions": "1. What is the purpose of this code?\n - This code defines the styles for a close button, container, body, and placeholder for a React Morphing Modal component.\n\n2. What is the significance of the `RMM__` prefix used in the class names?\n - The `RMM__` prefix is likely used to namespace the class names and avoid potential conflicts with other CSS styles in the project.\n\n3. What is the purpose of the `::before` and `::after` pseudo-elements in the `.RMM__close-button` class?\n - The `::before` and `::after` pseudo-elements are used to create the horizontal lines of the close button icon by positioning two 2px high, 24px wide elements at a 45 degree angle from each other.",
- "checksum": "f220978066b6a02ec107e344c14e9b3e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/styles/variables.json b/.autodoc/docs/json/core/src/styles/variables.json
deleted file mode 100644
index 4d593d46c..000000000
--- a/.autodoc/docs/json/core/src/styles/variables.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "variables.css",
- "filePath": "core/src/styles/variables.css",
- "url": "zoo-labs/zoo/blob/master/core/src/styles/variables.css",
- "summary": "This code defines CSS variables for the root element of a webpage. These variables can be used throughout the webpage to maintain consistency in design and layout. \n\nThe `--primary` variable is set to the color black (#000), which can be used as the primary color for the webpage. The `--text-primary` variable is set to white (#fff), which can be used as the primary text color. The `--font-sans` variable is set to a font stack that includes the Inter font, as well as fallback fonts for different operating systems. This font stack can be used to set the default font for the webpage. \n\nFinally, the `--scrollbar-width` variable is set to 14 pixels. This can be used to set the width of scrollbars on the webpage, ensuring consistency across different browsers and devices. \n\nOverall, this code provides a simple and efficient way to define global variables for a webpage, making it easier to maintain a consistent design and layout. \n\nExample usage:\n\nTo use the `--primary` variable in CSS, simply reference it using the `var()` function:\n\n```\nh1 {\n color: var(--primary);\n}\n```\n\nThis will set the color of all `h1` elements to the value of the `--primary` variable (in this case, black).\n\nSimilarly, to use the `--font-sans` variable to set the default font for the webpage, simply reference it in the `font-family` property:\n\n```\nbody {\n font-family: var(--font-sans);\n}\n```\n\nThis will set the default font for the entire webpage to the Inter font (or a fallback font if Inter is not available).",
- "questions": "1. What is the purpose of the `:root` selector in this code?\n - The `:root` selector is used to target the root element of the document, which in this case is likely the HTML element. The purpose of this selector is to define global CSS variables that can be used throughout the project.\n\n2. What do the CSS variables `--primary`, `--text-primary`, `--font-sans`, and `--scrollbar-width` represent?\n - `--primary` likely represents the primary color used throughout the project, `--text-primary` represents the primary text color, `--font-sans` represents the primary font family used, and `--scrollbar-width` represents the width of scrollbars in the project.\n\n3. What is the value of the `--font-sans` variable?\n - The value of the `--font-sans` variable is a font stack that includes the \"Inter\" font, as well as several fallback fonts. This suggests that \"Inter\" is the preferred font for the project, but other fonts will be used if \"Inter\" is not available.",
- "checksum": "4b3f30f19b17bb7e8943cb48ff9d1287"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/theme/base.json b/.autodoc/docs/json/core/src/theme/base.json
deleted file mode 100644
index 0abad5000..000000000
--- a/.autodoc/docs/json/core/src/theme/base.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "base.ts",
- "filePath": "core/src/theme/base.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/theme/base.ts",
- "summary": "The code defines a set of constants and exports them as a default object. The constants include `breakpointMap`, `breakpoints`, `mediaQueries`, `shadows`, `spacing`, `radii`, and `zIndices`. \n\n`breakpointMap` is an object that maps breakpoint names to their corresponding pixel values. `breakpoints` is an array of breakpoint pixel values, sorted in ascending order. `mediaQueries` is an object that maps breakpoint names to their corresponding media query strings. Each media query string is constructed using the corresponding pixel value from `breakpointMap`. \n\n`shadows` is an object that defines a set of CSS box-shadow values for different use cases. `spacing` is an array of pixel values used for spacing elements. `radii` is an object that defines a set of border-radius values for different use cases. `zIndices` is an object that defines a set of z-index values for different use cases.\n\nThis code can be used to provide a consistent set of constants for use throughout a project. For example, the `mediaQueries` object can be used to define responsive styles for different screen sizes. The `shadows` object can be used to apply consistent box-shadow styles to elements throughout the project. The `spacing` array can be used to apply consistent spacing between elements. The `radii` object can be used to apply consistent border-radius styles to elements. The `zIndices` object can be used to ensure consistent z-index stacking order for elements. \n\nExample usage:\n\n```javascript\nimport constants from './constants'\n\n// Use media queries to apply styles for different screen sizes\nconst styles = {\n [constants.mediaQueries.sm]: {\n fontSize: '16px',\n },\n [constants.mediaQueries.md]: {\n fontSize: '18px',\n },\n [constants.mediaQueries.lg]: {\n fontSize: '20px',\n },\n}\n\n// Use shadows to apply consistent box-shadow styles to elements\nconst boxStyles = {\n boxShadow: constants.shadows.level1,\n}\n\n// Use spacing to apply consistent spacing between elements\nconst containerStyles = {\n margin: constants.spacing[4],\n}\n\n// Use radii to apply consistent border-radius styles to elements\nconst buttonStyles = {\n borderRadius: constants.radii.default,\n}\n\n// Use zIndices to ensure consistent z-index stacking order for elements\nconst modalStyles = {\n zIndex: constants.zIndices.modal,\n}\n```",
- "questions": "1. What is the purpose of the `breakpointMap` object?\n- The `breakpointMap` object maps breakpoint names to their corresponding pixel values.\n\n2. What is the purpose of the `mediaQueries` object?\n- The `mediaQueries` object defines media query strings for each breakpoint in the `breakpointMap` object.\n\n3. What is the purpose of the `shadows` object?\n- The `shadows` object defines CSS box-shadow values for different shadow levels and styles.",
- "checksum": "2464e81b9cffb3e9f70552bf08bc5e9d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/theme/colors.json b/.autodoc/docs/json/core/src/theme/colors.json
deleted file mode 100644
index 052907258..000000000
--- a/.autodoc/docs/json/core/src/theme/colors.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "colors.ts",
- "filePath": "core/src/theme/colors.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/theme/colors.ts",
- "summary": "This code defines color schemes for the zoo project. The `Colors` type is imported from the `types` module, which is not shown in this code snippet. The `baseColors` object defines a set of colors that are used as the foundation for the light and dark color schemes. The `brandColors` object defines additional colors that are specific to the zoo brand. \n\nThe `lightColors` object extends the `baseColors` and `brandColors` objects to define a color scheme for light mode. The `darkColors` object extends the same base objects to define a color scheme for dark mode. \n\nEach color scheme defines a set of colors for various elements of the user interface, such as the background, text, and borders. The color values are specified as hexadecimal codes or RGB values. The `gradients` property defines a set of gradient styles that can be used for backgrounds or other elements. \n\nThis code is used to ensure consistency in the color scheme across the entire zoo project. Other modules can import the `lightColors` or `darkColors` objects to use the defined color scheme. For example, a component that needs to display a button can import the `lightColors` object and use the `primary` color for the button background. \n\nExample usage:\n\n```\nimport { lightColors } from 'zoo/colors';\n\nconst buttonStyle = {\n backgroundColor: lightColors.primary,\n color: lightColors.text,\n border: `1px solid ${lightColors.borderColor}`,\n};\n```",
- "questions": "1. What is the purpose of the `Colors` import from `./types`?\n- The `Colors` import from `./types` is used to define the type of the `lightColors` and `darkColors` objects.\n\n2. What is the difference between `baseColors` and `brandColors`?\n- `baseColors` contains a set of colors that are used throughout the application, while `brandColors` contains colors specific to the brand of the application.\n\n3. What is the purpose of the `gradients` object in `lightColors` and `darkColors`?\n- The `gradients` object in `lightColors` and `darkColors` contains a set of linear gradients that can be used as background colors for various elements in the application.",
- "checksum": "28f1242e85f8fdac0253f2ee22458111"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/theme/dark.json b/.autodoc/docs/json/core/src/theme/dark.json
deleted file mode 100644
index 34ef7c9d9..000000000
--- a/.autodoc/docs/json/core/src/theme/dark.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "dark.ts",
- "filePath": "core/src/theme/dark.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/theme/dark.ts",
- "summary": "This code exports a default object called `darkTheme` that defines the theme for a styled-components-based project. The `DefaultTheme` import from `styled-components` is used to define the type of the `darkTheme` object. \n\nThe `darkTheme` object extends a `base` object that is imported from another file in the same directory. The `base` object likely contains shared styles and properties that are used across all themes. \n\nThe `darkTheme` object also defines a boolean property called `isDark` that is set to `true`. This property can be used to conditionally render styles based on whether the theme is dark or light. \n\nThe `darkColors` object is imported from another file in the same directory and is used to define the color palette for the `darkTheme`. \n\nThe commented-out lines of code suggest that this file is part of a larger project that includes other components such as `Alert`, `Card`, `Radio`, `Toggle`, `Menu`, `Modal`, and `Tooltip`. Each of these components likely has its own theme that can be imported and used in the `darkTheme` object. \n\nOverall, this code is used to define the theme for a styled-components-based project and specifically defines the dark theme. Other themes can be defined in a similar way by extending the `base` object and defining their own color palette and component-specific themes. \n\nExample usage:\n\n```jsx\nimport React from 'react'\nimport styled, { ThemeProvider } from 'styled-components'\nimport darkTheme from './path/to/darkTheme'\n\nconst App = () => {\n return (\n \n \n My Dark App \n \n \n \n )\n}\n\nconst Container = styled.div`\n background-color: ${props => props.theme.colors.background};\n color: ${props => props.theme.colors.text};\n`\n\nconst Title = styled.h1`\n font-size: 2rem;\n`\n\nconst Button = styled.button`\n background-color: ${props => props.theme.colors.primary};\n color: ${props => props.theme.colors.text};\n padding: 1rem;\n border: none;\n border-radius: 0.5rem;\n cursor: pointer;\n`\n``` \n\nIn this example, the `ThemeProvider` component from `styled-components` is used to provide the `darkTheme` to all styled components in the app. The `Container`, `Title`, and `Button` components are all styled using properties from the `darkTheme` object, such as `colors.background`, `colors.text`, and `colors.primary`. The `isDark` property can also be used to conditionally render styles based on whether the theme is dark or light.",
- "questions": "1. What is the purpose of this code?\n This code exports a default dark theme object for a project called zoo, which includes base styles and dark colors.\n\n2. What are the commented out imports for?\n The commented out imports are for different components' dark themes, such as Alert, Card, Radio, Toggle, Menu, Modal, and Tooltip. They are not currently being used in this code.\n\n3. What is the type of the `darkTheme` object?\n The type of the `darkTheme` object is `DefaultTheme`, which is imported from the `styled-components` library.",
- "checksum": "769912535bf9e67ab4a14d59c74c454e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/theme/index.json b/.autodoc/docs/json/core/src/theme/index.json
deleted file mode 100644
index 839087d73..000000000
--- a/.autodoc/docs/json/core/src/theme/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/theme/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/theme/index.ts",
- "summary": "This code defines the interface for the theme used in the larger project. The `Theme` interface defines various properties that are used to style the components in the project. These properties include `siteWidth`, `isDark`, `colors`, `breakpoints`, `mediaQueries`, `spacing`, `shadows`, `radii`, and `zIndices`. \n\nThe `siteWidth` property is used to define the maximum width of the site. The `isDark` property is used to determine whether the theme is dark or light. The `colors` property defines the color palette used in the project. The `breakpoints` property defines the breakpoints used for responsive design. The `mediaQueries` property defines the media queries used for responsive design. The `spacing` property defines the spacing used in the project. The `shadows` property defines the shadows used in the project. The `radii` property defines the border radii used in the project. The `zIndices` property defines the z-indices used in the project.\n\nThe code also exports two themes, `dark` and `light`, which are defined in separate files. These themes are used to provide different color schemes for the project. Additionally, the code exports two color palettes, `lightColors` and `darkColors`, which are used to define the colors for the `light` and `dark` themes respectively.\n\nThis code is an important part of the larger project as it defines the interface for the theme used throughout the project. By defining the properties of the theme, this code ensures that the components in the project are styled consistently. The `Theme` interface can be used by other components in the project to ensure that they are styled correctly. For example, a component that uses the `colors` property of the theme will be styled using the colors defined in the theme. \n\nHere is an example of how the `Theme` interface can be used in a component:\n\n```\nimport React from 'react';\nimport { Theme } from './theme';\n\ninterface Props {\n theme: Theme;\n}\n\nconst MyComponent: React.FC = ({ theme }) => {\n return (\n \n {/* component code */}\n \n )\n}\n```\n\nThis will apply the light theme to all styled components within the MyComponent component. By defining multiple themes, the zoo project can provide users with the ability to switch between different visual styles while maintaining a consistent design system.",
- "questions": "1. What is the purpose of the `DefaultTheme` import from `styled-components`?\n- The `DefaultTheme` import is used to define the type of the `lightTheme` object as a default theme for styled components.\n\n2. Why are there multiple commented out imports for different components' themes?\n- The commented out imports suggest that the `lightTheme` object was originally intended to include theme settings for those components, but they were either not needed or not yet implemented.\n\n3. What is the `base` import and how is it used in the `lightTheme` object?\n- The `base` import is likely a separate file that contains shared theme settings. It is spread into the `lightTheme` object using the spread syntax (`...`) to merge the shared settings with the specific settings for the light theme.",
- "checksum": "d7e10752e473ca1edae71d6afcd08e16"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/theme/types.json b/.autodoc/docs/json/core/src/theme/types.json
deleted file mode 100644
index caed0e208..000000000
--- a/.autodoc/docs/json/core/src/theme/types.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "types.ts",
- "filePath": "core/src/theme/types.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/theme/types.ts",
- "summary": "This code defines a number of types that are used to define various aspects of the visual design of a web application. These types include Breakpoints, MediaQueries, Spacing, Radii, Shadows, Gradients, Modal, Colors, and ZIndices. \n\nBreakpoints is an array of strings that define the different screen sizes at which the application should adjust its layout. MediaQueries is an object that defines the specific CSS media queries that correspond to each breakpoint. Spacing is an array of numbers that define the different spacing values that can be used throughout the application. Radii is an object that defines the different border radii that can be used for various elements. Shadows is an object that defines the different box shadows that can be used for various elements. Gradients is an object that defines the different gradient colors that can be used for various elements. Modal is an object that defines the colors and styles for modal windows. Colors is an object that defines the color palette for the application, including primary, secondary, and tertiary colors, as well as various shades of gray and other accent colors. Finally, ZIndices is an object that defines the z-index values for various elements, such as dropdown menus and modal windows.\n\nThese types can be used throughout the application to ensure consistency in the visual design. For example, the Spacing array can be used to ensure that all elements are spaced consistently throughout the application, regardless of their location. The Colors object can be used to ensure that all elements use the same color palette, making the application look cohesive and professional. The MediaQueries object can be used to ensure that the application is responsive and adjusts its layout appropriately for different screen sizes.\n\nHere is an example of how these types might be used in a React component:\n\n```\nimport React from 'react';\nimport styled from 'styled-components';\nimport { Colors, Spacing } from 'zoo';\n\nconst Button = styled.button`\n background-color: ${Colors.primary};\n color: ${Colors.text};\n padding: ${Spacing[2]}px ${Spacing[3]}px;\n border-radius: ${Radii.default};\n box-shadow: ${Shadows.level1};\n`;\n\nconst MyComponent = () => {\n return (\n \n );\n};\n```\n\nIn this example, the Button component uses the primary color from the Colors object, the default border radius from the Radii object, and the level 1 box shadow from the Shadows object. It also uses the second and third values from the Spacing array to set the padding. This ensures that the button looks consistent with other elements throughout the application.",
- "questions": "1. What are the different types defined in this code?\n- This code defines several types including Breakpoints, MediaQueries, Spacing, Radii, Shadows, Gradients, Modal, Colors, and ZIndices.\n\n2. What is the purpose of the Gradients type?\n- The Gradients type defines several gradient color values that can be used in the project, including bubblegum, buttongum, bubbleYum, starterAppGlare, and starterAppMarble.\n\n3. What is the ZIndices type used for?\n- The ZIndices type defines the z-index values for dropdown and modal components in the project.",
- "checksum": "c8e0c011f1b20d99880a51de0781e3c2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/types/cart.json b/.autodoc/docs/json/core/src/types/cart.json
deleted file mode 100644
index 96139a190..000000000
--- a/.autodoc/docs/json/core/src/types/cart.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "cart.ts",
- "filePath": "core/src/types/cart.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/types/cart.ts",
- "summary": "The code above defines an interface called `CartItem` which represents an item that can be added to a shopping cart. The `CartItem` interface has several properties that describe the item, such as its name, base price, discount price, description, image, gallery images, quantity, and ID. \n\nIn addition to these basic properties, the `CartItem` interface also has a `properties` property which is an object that can contain additional information about the item. This `properties` object has three optional properties: `color`, `size`, and `adendums`. The `color` property is a string that represents the color of the item, the `size` property is a string that represents the size of the item, and the `adendums` property is an array of strings that represents any additional features or attributes of the item.\n\nThis `CartItem` interface can be used throughout the larger project to represent items that can be added to a shopping cart. For example, if the project has a page where users can browse and purchase products, the `CartItem` interface can be used to represent each product that is displayed on the page. When a user adds a product to their cart, an object that conforms to the `CartItem` interface can be created and added to the cart.\n\nHere is an example of how the `CartItem` interface can be used in code:\n\n```\nconst item: CartItem = {\n name: \"T-Shirt\",\n basePrice: \"$20.00\",\n discountPrice: \"$15.00\",\n description: \"A comfortable and stylish t-shirt\",\n properties: {\n color: \"blue\",\n size: \"medium\",\n adendums: [\"100% cotton\", \"machine washable\"]\n },\n image: \"tshirt.jpg\",\n galleryImages: [\"tshirt-front.jpg\", \"tshirt-back.jpg\"],\n quantity: 1,\n id: \"12345\",\n status: \"available\",\n productId: \"67890\"\n};\n\n// Add the item to the shopping cart\nshoppingCart.addItem(item);\n``` \n\nIn this example, an object that conforms to the `CartItem` interface is created with some sample data. The `addItem` method of a `shoppingCart` object is then called with the `item` object as an argument to add the item to the cart.",
- "questions": "1. **What is the purpose of this interface?** \nThe interface defines the structure of a CartItem object, which likely represents an item that can be added to a shopping cart on an e-commerce website.\n\n2. **What are the properties of a CartItem object?** \nThe CartItem object has several properties, including name, basePrice, discountPrice, description, properties (which includes color, size, and adendums), image, galleryImages, quantity, id, status, and productId.\n\n3. **What is the data type of each property?** \nThe data types of the properties are: string for name, basePrice, discountPrice, description, color (optional), and size; Array for adendums and galleryImages; number for quantity; and string for id, status, and productId.",
- "checksum": "04c72c5e4db14c2c5e2592be8f1a9fa5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/types/index.json b/.autodoc/docs/json/core/src/types/index.json
deleted file mode 100644
index e60bc1253..000000000
--- a/.autodoc/docs/json/core/src/types/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/types/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/types/index.ts",
- "summary": "This file contains a set of interfaces that define the structure of various objects used in the larger project. These interfaces include `Drop`, `Animal`, `Egg`, `AvailableEgg`, `EggAttribute`, `AuctionHistory`, `Auction`, `Bid`, `Ask`, `ANIMAL_TYPE`, `CardEgg`, `EggCardType`, `ToastsState`, and `Proposal`. \n\nThe `Drop` interface defines the structure of a drop, which includes a title, description, items (either an array of `AvailableEgg` or `Animal` objects), supply, minted, dropSupply, dropId, and image. \n\nThe `Animal` interface defines the structure of an animal, which includes an optional owner, kind, tokenID, parentA, parentB, name, description, yield, boost, rarity, dob, startBid, currentBid, buyNow, imageUrl, listed, bloodline, selected, bred, breedCount, timeRemaining, CTAOverride, lastBred, revealed, freed, createdAt, and updatedAt. \n\nThe `Egg` interface defines the structure of an egg, which includes an owner, kind, tokenID, parentA, parentB, basic, timeRemaining, CTAOverride, burned, interactive, hatched, animalID, createdAt, updatedAt, and hatching. \n\nThe `AvailableEgg` interface defines the structure of an available egg, which includes bidShares, birthday, exist, id, kind, minted, name, price, supply, timestamp, image, animation_url, attributes, and description. \n\nThe `EggAttribute` interface defines the structure of an egg attribute, which includes a trait_type and value. \n\nThe `AuctionHistory` interface defines the structure of an auction history, which includes a value, from_address, blockNumber, block_timestamp, and transaction_hash. \n\nThe `Auction` interface defines the structure of an auction, which includes an array of `AuctionHistory` objects, a description, index, tokenID, auctionId, tokenOwner, reservePrice, firstBidTime, duration, curatorFeePercentage, amount, tokenUri, name, image, animation_url, attributes, kind, glb_animation_url, and usdz_animation_url. \n\nThe `Bid` interface defines the structure of a bid, which includes an amount, currency, bidder, recipient, and sellOnFee. \n\nThe `Ask` interface defines the structure of an ask, which includes an amount, currency, and sellOnFee. \n\nThe `ANIMAL_TYPE` type defines the structure of an animal type, which includes a name, image, and description (which includes a head and desc). \n\nThe `CardEgg` interface extends the `Egg` interface and adds an id and name property. \n\nThe `EggCardType` type defines the structure of an egg card, which includes an `egg` object (of type `CardEgg`), `hatchEgg` and `hatchEggReady` functions, a `hatching` boolean, a `viewItem` function, and an `eggGroup` object. \n\nThe `ToastsState` interface defines the structure of the toast state, which includes a `data` array of `Toast` objects. \n\nThe `Proposal` interface defines the structure of a proposal, which includes a signature, timestamp, token, type, tokenDecimal, tokenAddress, id, proposalType, proposalStatus, proposalIpfs, votes, voteCount, title, description, choices, startDate, startTime, endDate, endTime, creator, and blockNumber. \n\nOverall, this file provides a set of interfaces that define the structure of various objects used in the larger project. These interfaces can be used to ensure that objects are properly formatted and to provide type checking throughout the codebase. For example, if a function expects an `Animal` object as an argument, it can specify that in its type signature, and TypeScript will ensure that the object passed in conforms to the `Animal` interface.",
- "questions": "1. What are the interfaces `Animal` and `Egg` used for?\n - The `Animal` interface is used to define the properties of an animal object, while the `Egg` interface is used to define the properties of an egg object.\n2. What is the purpose of the `Auction` interface?\n - The `Auction` interface is used to define the properties of an auction object, which includes information such as the auction ID, reserve price, and duration.\n3. What is the `Toast` component used for?\n - The `Toast` component is imported from the `components/Toast` module and is likely used to display notifications or alerts to the user.",
- "checksum": "04e18395920f90d84b5d942461963acc"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/types/order.json b/.autodoc/docs/json/core/src/types/order.json
deleted file mode 100644
index 220dffd91..000000000
--- a/.autodoc/docs/json/core/src/types/order.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "order.ts",
- "filePath": "core/src/types/order.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/types/order.ts",
- "summary": "This code defines several interfaces that are used to represent different aspects of an order and transaction in the larger project. The `Transaction` interface defines the properties of a transaction, including the `orderId`, `salesRepId`, `createdAt`, `updatedAt`, `amount`, `commission`, and `currency`. The `OrderData` interface defines the properties of an order, including the `orders`, `extUserId`, and `extChannel`. The `OrderItem` interface defines the properties of an item within an order, including the `price`, `quantity`, `shippedQuantity`, `name`, `_id`, `basePrice`, `status`, `hasReturnables`, `discountPrice`, `description`, `properties`, `image`, and `galleryImages`. Finally, the `Order` interface defines the properties of an entire order, including the `orderNumber`, `items`, `balance`, `createdBy`, `currency`, `createdAt`, `customerNumber`, `customerName`, `subTotal`, `isPickup`, `totalShippedQuantity`, `total`, `status`, `userId`, `shippingCosts`, `discounts`, `shippingAddress`, `dispatchedAt`, `itemBaseTotal`, `baseTotal`, `orderType`, `contactPhone`, `orderTypeName`, `itemTotal`, `_id`, `customerCompanyId`, `paymentStatus`, `baseSubTotal`, `updatedAt`, `summary`, and `shippingStatus`.\n\nThese interfaces are likely used throughout the larger project to represent orders and transactions in different contexts. For example, the `Transaction` interface may be used when creating a new transaction in the database, while the `Order` interface may be used when retrieving an order from the database. The `OrderItem` interface may be used when displaying a list of items within an order, and the `OrderData` interface may be used when passing order data between different parts of the application.\n\nHere is an example of how the `Order` interface might be used in the larger project:\n\n```typescript\nimport { Order } from './zoo';\n\n// Retrieve an order from the database\nconst order: Order = await db.collection('orders').doc('123').get();\n\n// Display the order information to the user\nconsole.log(`Order Number: ${order.orderNumber}`);\nconsole.log(`Customer Name: ${order.customerName}`);\nconsole.log(`Total: ${order.total}`);\n```",
- "questions": "1. What is the purpose of the `zoo` project and how does this code fit into it?\n- As a code documentation expert, I do not have enough context to answer this question. The smart developer would need to provide more information about the project and how this code is used.\n\n2. What is the difference between `Transaction` and `Order` interfaces?\n- The `Transaction` interface represents a single transaction with details such as `amount`, `commission`, and `currency`, while the `Order` interface represents an entire order with details such as `items`, `balance`, and `shippingAddress`.\n\n3. What is the purpose of the `Firestore.FieldValue` type in the `Transaction` interface?\n- The `Firestore.FieldValue` type is used to represent a timestamp value in Firestore, so it is likely used to track when a transaction was created or updated.",
- "checksum": "82524c2eaab7afdf8d3b0b6e5f4e7c28"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/types/product.json b/.autodoc/docs/json/core/src/types/product.json
deleted file mode 100644
index eabebf69a..000000000
--- a/.autodoc/docs/json/core/src/types/product.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "product.ts",
- "filePath": "core/src/types/product.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/types/product.ts",
- "summary": "The code defines an interface called `Product` which represents the properties of a product in the zoo project. The `Product` interface has several properties including `name`, `basePrice`, `discountPrice`, `description`, `shortDescription`, `properties`, `image`, `galleryImages`, `quantity`, `id`, `status`, and `createdAt`. \n\nThe `name` property is a string that represents the name of the product. The `basePrice` property is a string that represents the original price of the product before any discounts are applied. The `discountPrice` property is a string that represents the price of the product after any discounts are applied. The `description` property is a string that represents a detailed description of the product. The `shortDescription` property is a string that represents a brief description of the product. \n\nThe `properties` property is an object that contains three arrays: `colors`, `sizes`, and `adendums`. The `colors` array contains strings that represent the available colors of the product. The `sizes` array contains strings that represent the available sizes of the product. The `adendums` array contains strings that represent any additional features or details of the product. \n\nThe `image` property is a string that represents the URL of the main image of the product. The `galleryImages` property is an array of strings that represents the URLs of additional images of the product. The `quantity` property is a number that represents the available quantity of the product. The `id` property is a string that represents the unique identifier of the product. The `status` property is a string that represents the current status of the product (e.g. \"available\", \"out of stock\", etc.). The `createdAt` property is a string that represents the date and time when the product was created.\n\nThis interface is likely used throughout the zoo project to represent products in various contexts such as in the database, in the user interface, and in API responses. For example, when retrieving a list of products from the database, the resulting objects would likely conform to the `Product` interface. \n\nHere is an example of how the `Product` interface could be used in TypeScript code:\n\n```\nimport { Product } from './zoo';\n\nconst product: Product = {\n name: 'Giraffe Plushie',\n basePrice: '19.99',\n discountPrice: '14.99',\n description: 'A soft and cuddly plushie of a giraffe.',\n shortDescription: 'Soft and cuddly giraffe plushie.',\n properties: {\n colors: ['yellow', 'brown'],\n sizes: ['small', 'medium', 'large'],\n adendums: ['removable bowtie']\n },\n image: 'https://example.com/giraffe-plushie.jpg',\n galleryImages: [\n 'https://example.com/giraffe-plushie-1.jpg',\n 'https://example.com/giraffe-plushie-2.jpg'\n ],\n quantity: 10,\n id: '12345',\n status: 'available',\n createdAt: '2021-01-01T00:00:00.000Z'\n};\n```",
- "questions": "1. **What is the purpose of this code?** \nThis code defines an interface for a product in the zoo project, including its name, pricing, description, properties, images, quantity, and status.\n\n2. **What is the difference between `basePrice` and `discountPrice`?** \n`basePrice` likely refers to the original price of the product, while `discountPrice` refers to a discounted price that may be offered for the product.\n\n3. **What is the format of the `createdAt` property?** \nThe `createdAt` property is a string, but it is unclear what format it is in. It would be helpful to have documentation or comments explaining the expected format.",
- "checksum": "80511d0f3f0354be77517c61bbe8b54f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/types/shippment.json b/.autodoc/docs/json/core/src/types/shippment.json
deleted file mode 100644
index 10e148a15..000000000
--- a/.autodoc/docs/json/core/src/types/shippment.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "shippment.ts",
- "filePath": "core/src/types/shippment.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/types/shippment.ts",
- "summary": "This code defines a set of interfaces that are used to represent different aspects of a shipment in the larger project. The `Coordinates` interface defines the latitude and longitude of a location. The `ShippingAddress` interface defines the details of a shipping address, including whether it is the default billing or shipping address, the phone number, address line 1, local government area, ID, company, state, coordinates, and full name. The `Currency` interface defines the ISO code and symbol for a currency. Finally, the `Shipment` interface combines all of these interfaces to define a complete shipment, including the shipping address, currency, order number, date issued, customer name, contact phone number, total cost, shipping status, dispatch assignee ID, global order number, sales assignee number, sales assignee name, and group ID.\n\nThese interfaces can be used throughout the larger project to represent shipments and their associated data. For example, when creating a new shipment, the `Shipment` interface can be used to define the necessary data, which can then be passed to a function that creates the shipment in the system. Similarly, when retrieving a shipment from the system, the data can be returned as an object that conforms to the `Shipment` interface, making it easy to work with and manipulate the data.\n\nOverall, this code provides a set of standardized interfaces for working with shipments in the larger project, making it easier to create, retrieve, and manipulate shipment data throughout the system.",
- "questions": "1. What is the purpose of the `Coordinates` interface?\n - The `Coordinates` interface defines the structure of an object that contains latitude and longitude values.\n2. What is the significance of the `Shipment` interface?\n - The `Shipment` interface defines the structure of an object that represents a shipment, including details such as the shipping address, currency, order number, and total cost.\n3. What is the meaning of the `g` property in the `Shipment` interface?\n - It is unclear what the `g` property represents without additional context or documentation.",
- "checksum": "17e05cd7a74d80597b080ddf9a45e569"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/utils/handleFunds.json b/.autodoc/docs/json/core/src/utils/handleFunds.json
deleted file mode 100644
index 7e8839be0..000000000
--- a/.autodoc/docs/json/core/src/utils/handleFunds.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "handleFunds.ts",
- "filePath": "core/src/utils/handleFunds.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/utils/handleFunds.ts",
- "summary": "The `handleFunds` function in the `zoo` project takes in two parameters: `chainId` and `buyZoo`. The `chainId` parameter is used to determine which blockchain network the user is on, while the `buyZoo` parameter is a function that is called when the user has sufficient funds to purchase Zoo tokens.\n\nThe function first checks if the user has sufficient funds to purchase Zoo tokens. However, this check is currently commented out, so it does not affect the function's behavior. If the user does not have sufficient funds, the function logs a message to the console and returns.\n\nNext, the function uses a switch statement to determine what action to take based on the `chainId` parameter. If the `chainId` matches one of the cases in the switch statement (1338, 1337, 97, or 4), the `buyZoo` function is called. This function likely handles the actual purchase of Zoo tokens.\n\nIf the `chainId` does not match any of the cases in the switch statement, the function opens a new window to the PancakeSwap website, specifically to the Zoo token page. This suggests that the user is directed to PancakeSwap to purchase Zoo tokens if they are on an unsupported blockchain network.\n\nOverall, the `handleFunds` function appears to be a key component in the process of purchasing Zoo tokens in the `zoo` project. It determines which blockchain network the user is on and directs them to the appropriate action based on that information.",
- "questions": "1. What is the purpose of the `handleFunds` function?\n- The purpose of the `handleFunds` function is to determine which `buyZoo` function to call based on the `chainId` parameter.\n\n2. What is the significance of the `switch` statement in the `handleFunds` function?\n- The `switch` statement is used to determine which `buyZoo` function to call based on the `chainId` parameter. If the `chainId` matches one of the cases, the corresponding `buyZoo` function is called. Otherwise, a default URL is opened in a new window.\n\n3. What is the purpose of the commented out code in the `handleFunds` function?\n- The commented out code appears to be a check for the user's Ethereum balance, and if it is zero, a message is logged indicating that the user does not have sufficient funds to get Zoo. However, it is currently not being used in the function.",
- "checksum": "b55f2c85895ad5d7952b900f70ead7da"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/AcceptBidButton.json b/.autodoc/docs/json/core/src/zoo/AcceptBidButton.json
deleted file mode 100644
index 7856e0093..000000000
--- a/.autodoc/docs/json/core/src/zoo/AcceptBidButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AcceptBidButton.tsx",
- "filePath": "core/src/zoo/AcceptBidButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/AcceptBidButton.tsx",
- "summary": "The code is a React component that renders a button to accept a bid for a specific token. The component takes in several props, including the ID of the token, the type of the token, the bidder's address, and optional callbacks for when the bid is accepted or when an error occurs.\n\nThe component uses several hooks to interact with the Ethereum network. It uses the `useActiveWeb3React` hook to get the current user's account, the `useGasPrice` hook to get the current gas price, and the `useContract` hook to get instances of the `App`, `Media`, and `Market` contracts.\n\nWhen the component is mounted, it fetches the bid for the specified token and bidder from the `Market` contract using the `bidForTokenBidder` method. If a bid is found, it is stored in the component's state.\n\nWhen the user clicks the \"Accept Bid\" button, the `acceptBid` function is called. If there is no bid stored in the component's state, the function returns early. Otherwise, it tries to accept the bid by calling the `acceptBid` method on either the `App` or `Media` contract, depending on whether the bid currency is the native currency (e.g. Ether) or a token. If the transaction is successful, the `onAccept` callback is called with the token ID, and a transaction popup is added to the UI. If an error occurs, the `onError` callback is called with the error, and an error popup is added to the UI.\n\nOverall, this component provides a simple way for users to accept bids for their tokens on the Ethereum network. It can be used in a larger project that involves buying and selling NFTs or other digital assets. For example, it could be used in a marketplace application that allows users to list their tokens for sale and accept bids from potential buyers.",
- "questions": "1. What is the purpose of the `AcceptBidButton` component?\n- The `AcceptBidButton` component is used to accept a bid for a specific token.\n\n2. What external libraries or packages are being imported in this file?\n- The file is importing `isNativeCurrency` from the `@zoolabs/zdk` package, and `ethers`, `useCallback`, `useEffect`, and `useState` from the `react` package.\n\n3. What is the role of the `useTransactionPopups` hook in this code?\n- The `useTransactionPopups` hook is used to add transaction popups to the UI when a transaction is initiated or when an error occurs.",
- "checksum": "937dd4ca0e023f72b8cc12a1a7535d1d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/Account.json b/.autodoc/docs/json/core/src/zoo/Account.json
deleted file mode 100644
index df0a0784e..000000000
--- a/.autodoc/docs/json/core/src/zoo/Account.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Account.tsx",
- "filePath": "core/src/zoo/Account.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/Account.tsx",
- "summary": "The `Account` component in the `zoo` project is a React functional component that renders a user's account information. It takes in two optional props: `label` and `account`. The `label` prop is a string that is used to label the account information, while the `account` prop is a string that represents the user's account address. \n\nThe component first imports several dependencies, including `React`, `Copy`, `ExternalLink`, `Image`, `Typography`, and several custom hooks and functions. It then defines an interface for the `AccountProps` that specifies the optional `label` and `account` props. \n\nWithin the component, it uses the `useLingui` hook to access the internationalization (i18n) functionality and the `useActiveWeb3React` hook to access the user's active Web3 React context, including the `chainId`, `account`, and `connector`. It also uses the `useENSName` hook to retrieve the user's ENS name, if available.\n\nThe component then renders a `div` element with a `flex` layout and `space-y-3` spacing. If the user's ENS name is available, it renders a `Typography` component with the `label` prop and the ENS name. Otherwise, it renders a `Typography` component with the `label` prop and the shortened account address. \n\nThe component also includes commented-out code that would render an `ExternalLink` component to view the account on an explorer and a `Copy` component to copy the account address. These components are not currently being used in the component, but could be uncommented and used if desired.\n\nOverall, the `Account` component is a reusable component that can be used throughout the `zoo` project to display a user's account information. It is flexible enough to handle different types of account information and can be easily customized with additional functionality if needed. \n\nExample usage:\n\n```jsx\nimport Account from './Account'\n\nfunction MyComponent() {\n const account = '0x1234567890123456789012345678901234567890'\n\n return (\n No asks for this media.
} />\n```",
- "questions": "1. What is the purpose of the `AskList` component?\n- The `AskList` component is used to display a list of asks (offers to sell) for media items, with optional filtering and display options.\n\n2. What GraphQL query is being used to fetch data for the `AskList` component?\n- The `GET_ASKS` query is being used to fetch data for the `AskList` component, which retrieves the ID, amount, timestamp, currency, owner, and media information for a list of asks.\n\n3. What is the purpose of the `onClick` function in the `AskList` component?\n- The `onClick` function is used to handle click events on an ask item, and it navigates to a URL with a query parameter for the media ID of the ask item.",
- "checksum": "2406264d89c732ee1ab718971c18a75c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/Asset.json b/.autodoc/docs/json/core/src/zoo/Asset.json
deleted file mode 100644
index a581bf084..000000000
--- a/.autodoc/docs/json/core/src/zoo/Asset.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Asset.tsx",
- "filePath": "core/src/zoo/Asset.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/Asset.tsx",
- "summary": "The `Asset` component is a React component that renders an asset, which can be an image or a video, along with some metadata such as the asset's name, ID, and price. The component takes in several props, including the `tokenId` and `contentURI` of the asset, as well as optional props such as `ask`, `highest`, `formattedAmount`, `usdAmount`, and `symbol`. \n\nThe component first imports several dependencies, including `React`, `react-player`, `@zoolabs/zdk`, and `next/image`. It also imports several custom functions and types from other files in the project. \n\nInside the component, it uses several hooks such as `useActiveWeb3React` and `useContract` to interact with the Ethereum blockchain and retrieve data from the project's smart contracts. It also uses the `getContent` function to parse the `contentURI` and extract the asset's type, image, video, and name. \n\nThe component conditionally renders either an image or a video based on the `large` prop and whether the asset has a video. It also renders the asset's metadata, including its name, ID, and price. If the asset has a highest bid, it displays the bidder's address and the bid amount. If the user is the owner of the asset, it also displays a button to accept the highest bid. \n\nOverall, the `Asset` component is a reusable component that can be used to display assets throughout the project. It handles the rendering of the asset and its metadata, as well as interactions with the blockchain such as retrieving the highest bid and accepting bids.",
- "questions": "1. What is the purpose of the `Asset` component?\n- The `Asset` component is used to display information about a particular asset, including its image or video, token ID, and highest bid.\n\n2. What external libraries or packages are being used in this code?\n- The code is using several external libraries or packages, including React, react-player, @zoolabs/zdk, @heroicons/react, react-timeago, and next/image.\n\n3. What is the role of the `useActiveWeb3React` and `useContract` hooks?\n- The `useActiveWeb3React` hook is used to retrieve the current user's Ethereum account information, while the `useContract` hook is used to retrieve a specific smart contract instance based on its name.",
- "checksum": "3f223a984dd807fa50acde9f4abdb3bd"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/AssetList.json b/.autodoc/docs/json/core/src/zoo/AssetList.json
deleted file mode 100644
index 50caad72e..000000000
--- a/.autodoc/docs/json/core/src/zoo/AssetList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AssetList.tsx",
- "filePath": "core/src/zoo/AssetList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/AssetList.tsx",
- "summary": "The `AssetList` component is a React component that renders a list of assets. It takes in several props, including `title`, `tokenType`, `tokenName`, `totalMinted`, `perPage`, `cols`, `where`, `orderBy`, `className`, `autoPlay`, `showPageNumbers`, `animate`, `large`, `empty`, `getTriggerProps`, `onLoadAssets`, and `openModal`. \n\nThe component uses the `useQuery` hook from the `@apollo/client` library to fetch data from a GraphQL API. The query is defined using the `gql` template literal tag and is stored in the `GET_ASSETS` constant. The query fetches a list of assets based on the `where`, `skip`, `first`, and `orderBy` variables passed in as arguments. \n\nThe `AssetList` component renders a grid of `Asset` components, which are defined in a separate file. Each `Asset` component represents a single asset and displays its image, name, and other relevant information. The `AssetList` component also includes pagination controls that allow the user to navigate between pages of assets. \n\nThe `getPages` function is a utility function that takes in the total number of items and the number of items per page and returns an array of page sizes. This function is used to calculate the total number of pages based on the `totalMinted` and `perPage` props passed in to the `AssetList` component. \n\nThe `Empty` component is a simple component that displays a message when the asset list is empty. It takes in an `empty` prop that can be used to customize the message. \n\nOverall, the `AssetList` component is a reusable component that can be used to display a list of assets in a grid format with pagination controls. It is highly customizable and can be used in a variety of contexts. Here is an example of how the `AssetList` component might be used in a larger project:\n\n```jsx\nimport AssetList from \"./AssetList\";\n\nconst MyPage = () => {\n const where = { owner: \"0x123abc\" };\n const orderBy = \"createdAt_DESC\";\n const perPage = 12;\n\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this component?\n This component is a two-column layout component that takes in two props, `LeftCol` and `RightCol`, to display content in the left and right columns respectively.\n\n2. What is the significance of the `AddClass` prop?\n The `AddClass` prop allows the developer to add additional CSS classes to the component, which can be useful for customizing the layout or styling of the component.\n\n3. What is the dependency used in this code?\n This code imports the React library, which is a JavaScript library used for building user interfaces.",
- "checksum": "a871151009ae37e6c0106706e55e015a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/HowOffline.json b/.autodoc/docs/json/core/src/marketplace/HowOffline.json
deleted file mode 100644
index 974a25f6f..000000000
--- a/.autodoc/docs/json/core/src/marketplace/HowOffline.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "HowOffline.tsx",
- "filePath": "core/src/marketplace/HowOffline.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/HowOffline.tsx",
- "summary": "The code defines a React component called `HowOffline` that renders a section of text explaining how offline asks work in the context of a smart contract-based marketplace for NFTs. The component takes a single prop called `onClick`, which is a function to be called when the user clicks the \"Ok\" button at the end of the text.\n\nThe text explains that an offline ask allows buyers to place a bid without sending funds to the smart contract. Instead, the buyer must send the funds directly to the seller as an \"over the counter\" deal, such as a bank wire transfer. Once the seller verifies receipt of the funds, they can accept the bid, which will transfer ownership of the NFT to the buyer.\n\nThe purpose of this component is to provide educational content to users of the marketplace, specifically those who may be unfamiliar with the concept of offline asks. By explaining how they work and what steps are involved, the component helps to build trust and confidence in the platform.\n\nHere is an example of how this component might be used in a larger project:\n\n```jsx\nimport HowOffline from './HowOffline';\n\nconst Marketplace = () => {\n const handleHowOfflineClick = () => {\n // Do something when the user clicks \"Ok\"\n };\n\n return (\n \n
\n );\n};\n```\n\nIn this example, the `HowOffline` component is rendered as part of a larger `Marketplace` component that provides an interface for buying and selling NFTs. The `handleHowOfflineClick` function is passed as a prop to `HowOffline` and will be called when the user clicks the \"Ok\" button. The rest of the `Marketplace` component would contain additional functionality and content related to the marketplace.",
- "questions": "1. What is the purpose of this code and where is it used in the zoo project?\n - This code is a React component that explains how offline asks work in the zoo project. It is likely used in a user interface or documentation section related to buying and selling NFTs.\n2. What props does the HowOffline component accept and how are they used?\n - The HowOffline component accepts a single prop called onClick, which is a function that will be called when the \"Ok\" button is clicked. It is likely used to dismiss the HowOffline component or trigger some other action.\n3. Are there any security concerns related to the process described in this component?\n - It is not clear from this component whether there are any security concerns related to accepting offline bids and receiving funds directly from buyers. A smart developer may want to investigate further to ensure that this process is secure and does not expose the seller or buyer to unnecessary risks.",
- "checksum": "608057184e7392c0be0f2fad5a715968"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/HowReservations.json b/.autodoc/docs/json/core/src/marketplace/HowReservations.json
deleted file mode 100644
index ad1cf65a8..000000000
--- a/.autodoc/docs/json/core/src/marketplace/HowReservations.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "HowReservations.tsx",
- "filePath": "core/src/marketplace/HowReservations.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/HowReservations.tsx",
- "summary": "The code defines a React functional component called `HowReservations`. This component renders a section of text that explains how reservations work for the LUX network launch. The component takes a single prop called `onClick`, which is a function that will be called when the \"Ok\" button is clicked.\n\nThe component returns a div element with a class of \"m-auto w-96\", which centers the content horizontally and sets a fixed width of 96 pixels. Inside the div, there is an h2 element with a class of \"mb-6 text-xl\", which sets the font size to extra large and adds a margin bottom of 6 units. This element displays the heading \"How do reservations work?\".\n\nBelow the heading, there is a p element with a class of \"mb-10\", which sets a margin bottom of 10 units. This element displays the text \"Reserve your NFT to ensure you are part of the LUX network at launch. If your bid is not accepted, your reservation will be refunded.\".\n\nFinally, there is a button element with a type of \"button\" and a class that sets various styles for the button. The button displays the text \"Ok\". When the button is clicked, the `onClick` function passed as a prop will be called.\n\nThis component can be used in the larger project to display information about how reservations work for the LUX network launch. It can be included in a page or modal that allows users to make reservations and provides them with information about the process. Here is an example of how the component can be used:\n\n```\nimport HowReservations from './HowReservations';\n\nfunction ReservationPage() {\n function handleOkClick() {\n // Handle the \"Ok\" button click\n }\n\n return (\n Welcome to the NFT Marketplace
\nHere you can buy and sell unique digital assets.
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this component?\n- This component is designed to display information about how reservations work for the LUX network launch and provide a button to acknowledge the information.\n\n2. What is the expected behavior when the button is clicked?\n- The onClick function passed as a prop will be executed, but the specific behavior is not defined in this component.\n\n3. What styling classes are being used in this component?\n- The component is using a variety of Tailwind CSS classes to style the text, button, and container.",
- "checksum": "242fc15000b24f4112b29c55327da25a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/InfinityLoader.json b/.autodoc/docs/json/core/src/marketplace/InfinityLoader.json
deleted file mode 100644
index b7e1418b3..000000000
--- a/.autodoc/docs/json/core/src/marketplace/InfinityLoader.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "InfinityLoader.tsx",
- "filePath": "core/src/marketplace/InfinityLoader.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/InfinityLoader.tsx",
- "summary": "The code above defines a React component called `InfinityLoader`. This component is responsible for rendering an animated infinity symbol that is used to indicate that a transaction is pending. The component takes in three optional props: `alt`, `height`, and `width`. \n\nThe `Image` component is imported from the `../components/Image` file. This component is likely a custom implementation of the standard HTML `img` tag that allows for more flexibility and customization. \n\nThe `InfinityLoader` component returns an instance of the `Image` component with the `src` prop set to the path of an animated infinity symbol. The `alt`, `height`, and `width` props are passed through to the `Image` component, allowing for customization of the rendered image.\n\nThis component is likely used in various places throughout the larger project to indicate that a transaction is pending. For example, it may be used in a payment processing flow to indicate that a payment is being processed and the user should wait for confirmation. \n\nHere is an example of how the `InfinityLoader` component may be used in a React component:\n\n```\nimport React from 'react';\nimport { InfinityLoader } from 'zoo';\n\nconst PaymentProcessing = () => {\n return (\n Make a Reservation
\n\n
\n );\n};\n\nexport default PaymentProcessing;\n```\n\nIn the example above, the `InfinityLoader` component is used to indicate that a payment is being processed. The `alt` prop is set to \"Payment Processing\" and the `height` and `width` props are set to 64 to increase the size of the rendered image.",
- "questions": "1. What is the purpose of the `Image` component being imported?\n - The `Image` component is being imported from a file located at `../components/Image`. It is likely used to display images within the application.\n\n2. What is the purpose of the `InfinityLoader` function?\n - The `InfinityLoader` function returns an `Image` component with a default source of `/animated-infinity.svg` and customizable `alt`, `height`, and `width` props. It is likely used as a loading animation for pending transactions.\n\n3. What type of file is this code located in?\n - The code is located in a file located at `zoo`. It is unclear what type of file it is without further context.",
- "checksum": "d056a062928f3c01247c909629a824e4"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/InfoComp/InfoComp.json b/.autodoc/docs/json/core/src/marketplace/InfoComp/InfoComp.json
deleted file mode 100644
index 4f437c0f9..000000000
--- a/.autodoc/docs/json/core/src/marketplace/InfoComp/InfoComp.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "InfoComp.tsx",
- "filePath": "core/src/marketplace/InfoComp/InfoComp.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/InfoComp/InfoComp.tsx",
- "summary": "The `InfoComp` component is a React component that displays a carousel of information cards. The component imports the `useState` hook from the `react` library, the `Slider` component from the `react-slick` library, and the `Image` component from the `next/image` library. It also imports two CSS files for styling the carousel.\n\nThe component defines an array of objects called `data`, where each object represents an information card. Each card has an `id`, a `title`, a `description`, and an `image`. The component also defines a `settings` object that configures the behavior of the `Slider` component.\n\nThe `return` statement of the component renders the carousel using the `Slider` component. The `Slider` component iterates over the `data` array and renders an information card for each object in the array. Each card is a `div` element that contains two child `div` elements. The first child `div` element contains the `title` and `description` of the card, and the second child `div` element contains the `image` of the card. The `Image` component is used to display the image, and its `src`, `width`, `height`, and `alt` attributes are set using the `image` property of the current object in the `data` array.\n\nThe `Slider` component is also configured to display navigation dots and to allow infinite scrolling. The component also defines two buttons that allow the user to navigate to the previous or next card in the carousel. These buttons are displayed at the bottom of the carousel and are only visible when the user hovers over them.\n\nThe `InfoComp` component can be used in a larger project to display a carousel of information cards. The `data` array can be customized to include different cards with different titles, descriptions, and images. The `settings` object can also be customized to change the behavior of the carousel. The component can be styled using CSS to match the design of the larger project. An example usage of the `InfoComp` component is shown below:\n\n```\nimport InfoComp from './InfoComp'\n\nconst HomePage = () => {\n return (\n Processing Payment
\nPlease wait while we process your payment...
\n\n
\n )\n}\n\nexport default HomePage\n```",
- "questions": "1. What is the purpose of the `InfoComp` component?\n- The `InfoComp` component is used to display a carousel of information cards containing titles, descriptions, and images.\n\n2. What library is being used for the carousel functionality?\n- The `react-slick` library is being used for the carousel functionality.\n\n3. What is the purpose of the `useState` hook being used in this component?\n- The `useState` hook is being used to store a reference to the `Slider` component, which is used to control the carousel navigation buttons.",
- "checksum": "50d3cbd066b1605c421817cdd4b7579b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/LazyAcceptBidButton.json b/.autodoc/docs/json/core/src/marketplace/LazyAcceptBidButton.json
deleted file mode 100644
index 64dd21609..000000000
--- a/.autodoc/docs/json/core/src/marketplace/LazyAcceptBidButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LazyAcceptBidButton.tsx",
- "filePath": "core/src/marketplace/LazyAcceptBidButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/LazyAcceptBidButton.tsx",
- "summary": "The code above is a React component that exports a button component called `LazyAcceptBidButton`. This button is used to accept a bid for a specific token in a market. The component takes in several props, including `dropId`, `name`, `bidder`, `onError`, and `onAccept`. \n\nThe `useActiveWeb3React` hook is used to get the current user's account, and the `useGasPrice` hook is used to get the current gas price. The `useContract` hook is used to get the `App` and `Market` contracts. \n\nThe `useEffect` hook is used to fetch the bid for the specified token using the `market.lazyBidForTokenBidder` function. If a bid is found, it is stored in the `bid` state using the `setBid` function. \n\nThe `acceptBid` function is called when the button is clicked. It first checks if a bid exists, and if not, it returns. If a bid exists, it calls the `app.acceptLazyBid` function to accept the bid. If the transaction is successful, the `onAccept` function is called with the `dropId` as an argument. If the transaction fails, the `onError` function is called with the error as an argument. \n\nThe `LazyAcceptBidButton` component returns a button element with the text \"Accept Bid\". When the button is clicked, the `acceptBid` function is called. \n\nThis component can be used in a larger project that involves a marketplace for buying and selling tokens. It provides an easy way for users to accept bids for their tokens. An example usage of this component is shown below:\n\n```\nWelcome to the Zoo!
\nNo bids yet for this drop.
}\n/>\n```",
- "questions": "1. What is the purpose of the `LazyBidList` component?\n- The `LazyBidList` component is used to display a list of bids based on the provided filter criteria, and includes functionality for converting bid amounts to USD.\n\n2. What is the purpose of the `GET_BIDS` GraphQL query?\n- The `GET_BIDS` query is used to retrieve bid data from a GraphQL API, including the bid ID, amount, creation timestamp, currency ID, and bidder ID.\n\n3. What is the purpose of the `LazyBidFilter` type?\n- The `LazyBidFilter` type is used to define the filter criteria that can be applied to the `LazyBidList` component, including the drop ID, token type name, and bidder ID.",
- "checksum": "b80b8553030997e1caf23377802e0aaf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/LazyBidModal.json b/.autodoc/docs/json/core/src/marketplace/LazyBidModal.json
deleted file mode 100644
index 6a7db2c58..000000000
--- a/.autodoc/docs/json/core/src/marketplace/LazyBidModal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LazyBidModal.tsx",
- "filePath": "core/src/marketplace/LazyBidModal.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/LazyBidModal.tsx",
- "summary": "The `LazyBidModal` function is a React component that renders a modal window for a bid on a media asset. The component takes several props, including `dropId`, `name`, `bid`, `isOpen`, and `onClose`. \n\nThe component imports several other components and functions from other files in the project, including `Modal`, `ModalHeader`, `useActiveWeb3React`, `getContent`, `usePrice`, `formatCurrencyAmountWithCommas`, `isSameAddress`, `shortenAddress`, `LazyRemoveBidButton`, `useContract`, `LazyBidItem`, and `LazyAcceptBidButton`.\n\nThe component uses the `useActiveWeb3React` hook to get the current user's account, and the `useContract` hook to get the `owner` of the media asset. It also uses several other functions to get information about the bid, including the `type`, `given_name`, `bidder`, `currency`, and `tokenId`.\n\nThe component conditionally renders several elements based on the user's account and the bid information. For example, if the user is the bidder and the bid is not offline, a message is displayed indicating that the bidder's address will be refunded if the bid is removed. If the user is the owner of the media asset, buttons are displayed to remove or accept the bid.\n\nOverall, this component provides a way for users to view and manage bids on media assets in a modal window. It is likely used in conjunction with other components and functions in the larger project to provide a complete user interface for buying and selling media assets. \n\nExample usage:\n\n```jsx\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `dynamic` function being imported from 'next/dynamic'?\n- The `dynamic` function is used to dynamically import components in Next.js, allowing for code splitting and improved performance.\n\n2. What is the significance of the `ssr: false` option being passed to the `dynamic` function?\n- The `ssr: false` option disables server-side rendering for the dynamically imported components, which can improve performance and prevent issues with server-side rendering.\n\n3. What is the purpose of the `HomeCard` component and what props does it accept?\n- The `HomeCard` component appears to be a reusable component for displaying information about a particular NFT collection. It accepts props for the GLB file path, collection name, top offer, and NFT name.",
- "checksum": "d69cbbcca2592d450f217d2b17622c63"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/MarketHero/MarketHero.json b/.autodoc/docs/json/core/src/marketplace/MarketHero/MarketHero.json
deleted file mode 100644
index 30e9e6f24..000000000
--- a/.autodoc/docs/json/core/src/marketplace/MarketHero/MarketHero.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "MarketHero.tsx",
- "filePath": "core/src/marketplace/MarketHero/MarketHero.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/MarketHero/MarketHero.tsx",
- "summary": "The code above is a React component called `MarketHero` that renders a two-column layout with a `WelcomeCard` component on the left and a `HomeCard` component on the right. The `TwoColumComp` component is imported from the `../Grid/TwoColumComp` file and is used to create the two-column layout. The `AddClass` prop is used to add a margin-top of 5 pixels on small screens and 1 pixel on large screens.\n\nThe `WelcomeCard` and `HomeCard` components are imported from their respective files and are used as the content for the left and right columns, respectively. These components are likely to contain information about the zoo, such as its history, mission, and featured animals.\n\nThe `MarketHero` component is exported as the default export of the file, which means it can be imported and used in other files within the project. For example, it could be used in the homepage of the zoo's website to showcase important information about the zoo and its offerings.\n\nHere is an example of how the `MarketHero` component could be used in a hypothetical `HomePage` component:\n\n```\nimport React from 'react'\nimport MarketHero from './MarketHero'\n\nconst HomePage = () => {\n return (\n \n
\n )\n}\n\nexport default HomePage\n```\n\nOverall, the `MarketHero` component serves as a reusable and flexible way to display important information about the zoo in a visually appealing way.",
- "questions": "1. What is the purpose of the `MarketHero` component?\n - The `MarketHero` component is used to render a `TwoColumComp` component with a `WelcomeCard` component in the left column and a `HomeCard` component in the right column.\n\n2. What are the dependencies of this file?\n - This file imports `React`, `TwoColumComp`, `HomeCard`, and `WelcomeCard` from other files.\n\n3. What props are being passed to the `TwoColumComp` component?\n - The `TwoColumComp` component is receiving the `AddClass` prop with a value of `\"mt-5 lg:mt-1\"`, the `LeftCol` prop with a value of `\n
\n )\n}\n\nexport default HomePage\n```\n\nIn this example, the `WelcomeCard` component is used on the `HomePage` component to display a welcome message with custom text. The `tittle` and `subtittle` props are passed in to override the default placeholder text. The buttons on the card could be linked to other parts of the application, such as a marketplace or gallery of NFTs.",
- "questions": "1. What is the purpose of this component?\n This component is a WelcomeCard that displays a main title, subtitle, and two buttons for buying and exploring ZOO NFTs.\n\n2. What props can be passed to this component?\n The component accepts two optional props: \"tittle\" (which sets the main title text) and \"subtittle\" (which sets the subtitle text).\n\n3. What is the significance of the CSS classes used in this component?\n The CSS classes are used to style the component's layout and appearance. The classes with the \"h-\" prefix set the height of the elements, while the classes with the \"w-\" prefix set the width. The \"p-\" class sets padding, and the \"m-\" class sets margin. The \"text-\" class sets the font size, and the \"border\" class sets a border around the button elements.",
- "checksum": "93ea9df16959573e17d20c125fb6639a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/Modelview/MovingModelviewer.json b/.autodoc/docs/json/core/src/marketplace/Modelview/MovingModelviewer.json
deleted file mode 100644
index 464b98748..000000000
--- a/.autodoc/docs/json/core/src/marketplace/Modelview/MovingModelviewer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "MovingModelviewer.tsx",
- "filePath": "core/src/marketplace/Modelview/MovingModelviewer.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/Modelview/MovingModelviewer.tsx",
- "summary": "The `MovingModelviewer` component is a React component that renders a 3D model viewer using the `model-viewer` web component from Google. The component takes in several props, including the path to a GLB file, a USDZ file, a zoom level, and a boolean flag for whether to display multiple models. \n\nThe component maintains state for the current GLB source and the current model index. It also defines an array of GLB file paths for multiple models. \n\nThe `ModelVie` variable is a string that contains the HTML for the `model-viewer` component. It sets various attributes for the component, including the source file, loading and reveal behavior, camera controls, auto-rotate, autoplay, and AR (augmented reality) settings. \n\nThe `useEffect` hook is used to update the GLB source and current model index every 7 seconds. It sets a timeout that increments the current model index and updates the GLB source to the corresponding file path. If the current model index exceeds the length of the array, it resets to 0. The `useEffect` hook also returns an empty function to clean up any resources when the component unmounts. \n\nThe component returns a div that renders the `model-viewer` component using the `dangerouslySetInnerHTML` prop to set the HTML from the `ModelVie` variable. \n\nThis component can be used to display 3D models in a web application, with the ability to switch between multiple models and view them in AR mode. It can be customized with different GLB and USDZ files, zoom levels, and other attributes. \n\nExample usage:\n\n```\nimport MovingModelviewer from './MovingModelviewer'\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `MovingModelviewer` component?\n- The `MovingModelviewer` component is a React component that renders a 3D model viewer using the Google Model Viewer library. It can display multiple GLB models and automatically switch between them after a set time interval.\n\n2. What props can be passed to the `MovingModelviewer` component?\n- The `MovingModelviewer` component accepts four optional props: `glb` (a string representing the path to the default GLB model), `usdz` (a string representing the path to the USDZ model), `zoom` (a string representing the maximum field of view), and `multiple` (a boolean indicating whether to display multiple models).\n\n3. What is the purpose of the `useEffect` hook in the `MovingModelviewer` component?\n- The `useEffect` hook is used to update the `GlbSource` and `CurrentModel` state variables after a set time interval. It switches between the GLB models in the `Arr` array and resets the index to 0 when it reaches the end of the array. The `useEffect` hook also returns an empty function to clean up any resources when the component unmounts.",
- "checksum": "30a89c3fbc0cce3e088613e7267627bf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/NftPageComp/NftRight.json b/.autodoc/docs/json/core/src/marketplace/NftPageComp/NftRight.json
deleted file mode 100644
index 35bb152b4..000000000
--- a/.autodoc/docs/json/core/src/marketplace/NftPageComp/NftRight.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "NftRight.tsx",
- "filePath": "core/src/marketplace/NftPageComp/NftRight.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/NftPageComp/NftRight.tsx",
- "summary": "The `NftRight` component in the `zoo` project is a React component that renders a right-hand side panel for displaying details about a non-fungible token (NFT). The component takes in several props, including `NftText`, `NftName`, `transaction`, `TokenId`, `Hash`, and `TokenStandard`, which are used to populate the various fields in the panel.\n\nThe panel is divided into two sections: \"Details\" and \"Proof of Authenticity\". The \"Details\" section displays information about the NFT, including the transaction ID, token ID, hash, and token standard. Each piece of information is displayed in a grid format with the label on the left and the value on the right. The \"Proof of Authenticity\" section displays the price of the NFT in $zoo, as well as links to view the transaction on Ether Scan and IPFs.\n\nThe component uses Tailwind CSS classes to style the panel, including setting the width to 300px on small screens and 400px on large screens. The panel also has a gradient border and a black background.\n\nThis component can be used in a larger project that involves displaying NFTs and their associated details. For example, it could be used in an NFT marketplace or a digital art gallery. The component could be reused throughout the project to display NFT details in a consistent and visually appealing way. Here is an example of how the component could be used in a larger React application:\n\n```\nimport React from 'react';\nimport NftRight from './NftRight';\n\nconst NftDetails = () => {\n return (\n \n
\n );\n};\n\nexport default NftDetails;\n```\n\nIn this example, the `NftDetails` component displays an NFT image and other details on the left-hand side of the screen, and the `NftRight` component is used to display additional details about the NFT on the right-hand side of the screen. By using the `NftRight` component, the project can ensure that NFT details are displayed consistently throughout the application.",
- "questions": "1. What is the purpose of this component and how is it used in the project?\n - This component is used to display details and information about a specific NFT (non-fungible token) and its transaction history. It can be used in a larger application that involves buying, selling, or trading NFTs.\n2. What are the default values for the props passed to this component?\n - The default values for the props are: NftText = 'To hatch or to hold...', NftName = 'Egg#4', transaction = '8xx902xcbx93..', TokenId = '43', Hash = '8xbsxbc9', TokenStandard = 'ERC-721'. These values will be used if the props are not explicitly passed to the component.\n3. What is the purpose of the \"borderGrad\" class and where is it defined?\n - The \"borderGrad\" class is used to apply a gradient border to the div elements that contain the NFT details and proof of authenticity. It is not defined in this file and must be defined elsewhere in the project's CSS or styling files.",
- "checksum": "71c0ac0899dfe416022877d2b371b149"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/Rankings/RankingsRow.json b/.autodoc/docs/json/core/src/marketplace/Rankings/RankingsRow.json
deleted file mode 100644
index de6a0b7d6..000000000
--- a/.autodoc/docs/json/core/src/marketplace/Rankings/RankingsRow.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "RankingsRow.tsx",
- "filePath": "core/src/marketplace/Rankings/RankingsRow.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/Rankings/RankingsRow.tsx",
- "summary": "The code above defines a React component called `RankingsRow` that renders a row for a rankings table. The component takes in four props: `Rank`, `Name`, `addy`, and `Rankid`. \n\nThe component returns a `div` element with a class of `grid` that contains three columns. The first column spans three columns and displays the rank and name of the item. The second column displays the `addy` prop, which is a string representing an Ethereum address. The third column contains a button that, when clicked, navigates to a page with more information about the item.\n\nThe `useRouter` hook from the `next/router` module is used to handle the navigation when the button is clicked. The `Image` component from the `next/image` module is used to display a right arrow icon.\n\nThis component can be used in a larger project that displays rankings data. The component can be reused for each row in the rankings table, with the appropriate props passed in for each item. For example:\n\n```\nimport RankingsRow from './RankingsRow'\n\nconst rankingsData = [\n { Rank: 1, Name: '@finessequeen', addy: '0xd8 … 3a8db', Rankid: 0 },\n { Rank: 2, Name: '@crypto_king', addy: '0x4f … 8c9a', Rankid: 1 },\n { Rank: 3, Name: '@blockchain_babe', addy: '0x1a … 2b3f', Rankid: 2 },\n]\n\nconst RankingsTable = () => {\n return (\n \n {/* Display NFT image and other details */}\n
\n \n
\n \n {rankingsData.map((item) => (\n
\n )\n}\n\nexport default RankingsTable\n```\n\nIn this example, the `RankingsTable` component maps over an array of rankings data and renders a `RankingsRow` component for each item in the array. The `key` prop is set to the `Rankid` prop of each item to ensure that each row is uniquely identified.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `RankingsRow` that renders a row of data for a rankings table.\n\n2. What dependencies does this code use?\n- This code imports several dependencies from the `next` and `react` libraries, including `Link`, `Image`, and `useRouter`.\n\n3. What props does the `RankingsRow` component accept?\n- The `RankingsRow` component accepts four props: `Rank`, `Name`, `addy`, and `Rankid`. These props are used to populate the data displayed in the row.",
- "checksum": "7bd9862c6dca3775a4a42eba83d989ae"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/RemoveBidButton.json b/.autodoc/docs/json/core/src/marketplace/RemoveBidButton.json
deleted file mode 100644
index c155f8703..000000000
--- a/.autodoc/docs/json/core/src/marketplace/RemoveBidButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "RemoveBidButton.tsx",
- "filePath": "core/src/marketplace/RemoveBidButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/RemoveBidButton.tsx",
- "summary": "The code defines a React component called `RemoveBidButton` that renders a button to remove a bid for a given token. The component takes in several props including `tokenId`, `tokenType`, `currency`, `onError`, and `onRemove`. \n\nThe component uses several hooks including `useActiveWeb3React`, `useGasPrice`, and `useContract` to interact with the Ethereum blockchain. Specifically, it uses the `app` and `media` contracts to remove a bid for the given `tokenId`. If the `currency` is the native currency (e.g. Ether), it uses the `app` contract to remove the bid. Otherwise, it uses the `media` contract. \n\nIf the removal of the bid is successful, the `onRemove` callback is called with the `tokenId`. If there is an error, the `onError` callback is called with the error. Additionally, the component uses the `useTransactionPopups` hook to display transaction popups for successful and failed transactions.\n\nThe component returns a button element with the text \"Remove Bid\" that calls the `removeBid` function when clicked. The `removeBid` function attempts to remove the bid using the appropriate contract and displays transaction popups or error popups as necessary.\n\nThis component can be used in a larger project that involves buying and selling tokens on the Ethereum blockchain. It provides a simple way for users to remove their bids on tokens they are no longer interested in purchasing. Here is an example usage of the component:\n\n```\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `SelectCurrency` component?\n - The `SelectCurrency` component is used to display a list of supported payment currencies and allow the user to select one.\n2. Where is the `useActiveWeb3React` hook imported from?\n - The `useActiveWeb3React` hook is imported from a file located in the `../hooks` directory.\n3. What is the structure of the data returned by the `getSupportedPaymentCurrencies` function?\n - The `getSupportedPaymentCurrencies` function returns an array of currency objects, each with a `symbol` property.",
- "checksum": "d8e6f5943151fe3f3e0c4a2d8dc54035"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/SetAsk.json b/.autodoc/docs/json/core/src/marketplace/SetAsk.json
deleted file mode 100644
index e877135e9..000000000
--- a/.autodoc/docs/json/core/src/marketplace/SetAsk.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SetAsk.tsx",
- "filePath": "core/src/marketplace/SetAsk.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/SetAsk.tsx",
- "summary": "The `SetAsk` component is used to set an asking price for a particular asset in the Zoo project. It imports various dependencies such as `Currency`, `Token`, `ZERO_ADDRESS`, `formatCurrencyFromRawAmount`, `useActiveWeb3React`, `useContract`, `useAsset`, `useGasPrice`, `Input`, `useState`, `Button`, `SelectCurrency`, `CurrencyLogo`, `Checkbox`, `Switch`, `Typography`, `CheckIcon`, `MinusIcon`, `PlusIcon`, `t`, `i18n`, and `SetAskButton`. \n\nThe component takes in a `tokenId` prop, which is used to retrieve the asset's information such as the `ask`, `currencyToken`, and `type` from the `useAsset` hook. The `ask` object contains the current asking price for the asset, while the `currencyToken` object contains information about the currency used for the asking price. The `type` prop is used to display the type of asset being priced.\n\nThe component renders an input field where the user can enter the asking price for the asset. The `value` state is used to store the value entered by the user. The `selectedCurrencyToken` state is used to store the currency used for the asking price. The `showSelectCurrency` state is used to toggle the display of the `SelectCurrency` component, which allows the user to select the currency used for the asking price.\n\nWhen the component mounts, the `useEffect` hook is called to set the initial values of `selectedCurrencyToken`, `value`, and `offline` based on the `ask` and `currencyToken` objects retrieved from the `useAsset` hook.\n\nThe component also renders a `SetAskButton` component, which is used to submit the asking price to the blockchain. The `tokenType`, `tokenId`, `amount`, `currencyToken`, and `offline` props are passed to the `SetAskButton` component.\n\nThe component also renders a `Switch` component, which is used to toggle the `offline` state. However, this feature is currently commented out.\n\nOverall, the `SetAsk` component provides a user interface for setting an asking price for a particular asset in the Zoo project. It allows the user to select the currency used for the asking price and submit the asking price to the blockchain.",
- "questions": "1. What is the purpose of the `SetAsk` component?\n- The `SetAsk` component is used to set an ask price for a given token.\n\n2. What external libraries or dependencies does this code use?\n- This code imports various functions and hooks from other files within the project, as well as external libraries such as `ethers` and `@headlessui/react`.\n\n3. What is the significance of the `offline` state variable?\n- It is unclear from the provided code what the `offline` state variable is used for, as it is currently commented out. It may have been intended to toggle whether the ask price is available for offline transactions.",
- "checksum": "df4a16cc4068055ba1aed347a60e5d7b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/SetAskButton.json b/.autodoc/docs/json/core/src/marketplace/SetAskButton.json
deleted file mode 100644
index eba514a51..000000000
--- a/.autodoc/docs/json/core/src/marketplace/SetAskButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SetAskButton.tsx",
- "filePath": "core/src/marketplace/SetAskButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/SetAskButton.tsx",
- "summary": "The code is a React component called `SetAskButton` that allows a user to set an asking price for a specific token. The component takes in several props including `tokenId`, `tokenType`, `amount`, `currencyToken`, and `offline`. \n\nThe component first imports several dependencies including `Currency` from the `@zoolabs/zdk` library, `ethers` from the `ethers` library, and several custom hooks from the `../hooks` and `../state` directories. \n\nThe `SetAskButton` component then defines a function called `setAsk` that is called when the user clicks the \"Set Ask\" button. This function first checks if an `amount` has been provided and if so, creates an `Ask` object with the provided `amount`, `currencyToken`, and `offline` status. The `amount` is converted to the appropriate units using the `ethers.utils.parseUnits` function. The `media` contract is then used to set the ask for the specified `tokenId` with the `ask` object and the `account` and `gasPrice` values. If successful, a transaction popup is added to the state using the `addTransactionPopup` function. If an error occurs, an error popup is added to the state using the `addErrorPopup` function.\n\nFinally, the component returns a button element with the text \"Set Ask\" that calls the `setAsk` function when clicked. The button has several CSS classes applied to it for styling purposes.\n\nThis component can be used in a larger project that involves buying and selling tokens. It allows users to set an asking price for their tokens, which can then be viewed by potential buyers. The component can be integrated into a larger UI that displays a user's tokens and allows them to manage their asking prices. \n\nExample usage:\n\n```\nSelected currency: {selectedCurrency ? selectedCurrency.symbol : 'None'}
\n {/* rest of payment form */}\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `SetBid` component?\n- The `SetBid` component is used to display and handle the process of setting a bid for a specific token.\n\n2. What external libraries or packages are being imported in this file?\n- The file is importing `react`, `@zoolabs/zdk`, `@lingui/core`, `@lingui/macro`, and `../functions` and `../hooks` from local files.\n\n3. What is the role of the `useEffect` hook in this code?\n- The `useEffect` hook is used to reset the `pendingTx` state variable whenever the `tokenId`, `account`, or `chainId` variables change.",
- "checksum": "4277d57475e559d9f6833e96b8fa2216"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/SetBidButton.json b/.autodoc/docs/json/core/src/marketplace/SetBidButton.json
deleted file mode 100644
index afef45e71..000000000
--- a/.autodoc/docs/json/core/src/marketplace/SetBidButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SetBidButton.tsx",
- "filePath": "core/src/marketplace/SetBidButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/SetBidButton.tsx",
- "summary": "The code is a React component called `SetBidButton` that allows a user to place a bid on a particular token. The component takes in several props including `ask`, `tokenId`, `tokenType`, `amount`, and `currencyToken`. \n\nThe component first imports several dependencies including `Currency` and `isNativeCurrency` from the `@zoolabs/zdk` library, as well as `useCallback` from React, and several custom hooks from the `../hooks` and `../state` directories. \n\nThe `SetBidButton` component then defines a function called `setBid` that is called when the user clicks the \"Place Bid\" button. This function first checks if an `amount` has been provided, and if not, displays a message indicating that an amount is required. \n\nIf an amount has been provided, the function creates a `Bid` object with the provided `amount`, `currency`, `bidder`, `recipient`, `sellOnShare`, and `offline` properties. The function then determines whether the `currencyToken` is a native currency or not using the `isNativeCurrency` function. If it is a native currency, the function calls the `setBid` function on the `app` contract with the provided `tokenId`, `bid`, and `gasPrice` properties. If it is not a native currency, the function calls the `setBid` function on the `media` contract with the provided `tokenId`, `bid`, and `gasPrice` properties. \n\nIf the function is successful, it adds a transaction popup to the UI indicating that a bid has been placed. If there is an error, it adds an error popup to the UI. \n\nFinally, the `SetBidButton` component returns a button element with the text \"Place Bid\" that, when clicked, calls the `setBid` function. \n\nThis component can be used in a larger project that involves buying and selling tokens. It allows users to place bids on tokens and handles the logic for interacting with the appropriate contracts depending on the type of currency being used. Developers can use this component as a building block for more complex UIs involving token trading. \n\nExample usage:\n\n```\nAsset Details
\n| Rank | \nColumn A | \nColumn B | \nColumn C | \nColumn D | \nColumn E | \n
|---|
| Column A | \nColumn B | \nColumn C | \nColumn D | \nActions | \n
|---|
\n
\n )\n}\n\nexport default WalletPage\n```\n\nIn this example, the `WalletNav` component is imported and used within the `WalletPage` component to render the navigation bar at the top of the page. \n\nOverall, this code is a small but important piece of the larger project's wallet feature, providing a reusable navigation component that can be easily imported and used in other parts of the project.",
- "questions": "1. What is the purpose of this component?\n - This component is called `WalletNav` and it returns a simple `div` element with the text \"WalletNav\". It is unclear what its purpose is beyond that.\n\n2. Are there any props that can be passed to this component?\n - It is not shown in this code whether or not this component accepts any props. Further investigation into its usage in the project would be necessary to determine if it does.\n\n3. Where is this component being used in the project?\n - Without additional context, it is unclear where this component is being used in the project. It would be helpful to know where it is being imported and rendered to understand its place in the overall application.",
- "checksum": "b9ef721c9ca7c618f0d1b67ad39d789b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/state.json b/.autodoc/docs/json/core/src/marketplace/state.json
deleted file mode 100644
index ef598fa8d..000000000
--- a/.autodoc/docs/json/core/src/marketplace/state.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "state.ts",
- "filePath": "core/src/marketplace/state.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/state.ts",
- "summary": "The `zoo` file contains several functions and types that are used in the larger project. The main purpose of this file is to provide functionality related to assets and token types. \n\nThe `useAsset` function is used to retrieve information about a specific asset, given its token ID. It uses the `useActiveWeb3React` and `useQuery` hooks to interact with the Ethereum blockchain and retrieve data from the GraphQL API. The function returns an object containing information about the asset, such as its owner, current ask price, and currency balance. \n\nThe `useTokenType` function is similar to `useAsset`, but is used to retrieve information about a specific token type, given its name. It also uses the `useActiveWeb3React` and `useQuery` hooks to interact with the Ethereum blockchain and retrieve data from the GraphQL API. The function returns an object containing information about the token type, such as its owner, current ask price, and minted/supply amounts. \n\nThe `usePrice` function is used to retrieve the current prices of various cryptocurrencies from the Coingecko API. It uses the `useActiveWeb3React` hook to determine the current chain ID, and returns an object containing the prices of various cryptocurrencies in USD. \n\nThe `useBids` function is used to retrieve information about the bids for a specific asset. It uses the `useActiveWeb3React` and `useQuery` hooks to interact with the Ethereum blockchain and retrieve data from the GraphQL API. The function returns an object containing information about the bids, such as the highest bid amount and the USD value of each bid. \n\nThe `useIsAddress` function is a utility function that is used to determine if a given Ethereum address is equal to another address. \n\nThe `AssetState` and `TokenType` types are used to define the shape of the objects returned by `useAsset` and `useTokenType`, respectively. \n\nOverall, this file provides important functionality for interacting with assets and token types in the larger project. It uses various hooks and APIs to retrieve data from the Ethereum blockchain and other sources, and returns objects containing useful information about assets and token types.",
- "questions": "1. What is the purpose of the `useAsset` function?\n- The `useAsset` function is used to retrieve information about a specific asset, such as its owner, current ask price, and currency balance.\n\n2. What is the purpose of the `usePrice` function?\n- The `usePrice` function is used to retrieve the current prices of various cryptocurrencies from the CoinGecko API, and to calculate the USD value of a given token amount.\n\n3. What is the purpose of the `useTokenTypes` function?\n- The `useTokenTypes` function is used to retrieve information about all token types associated with a particular contract, such as the number of tokens minted and their metadata URIs. However, it appears that this function is currently commented out and not being used in the code.",
- "checksum": "2b4dee7aed0498bbdaa58e0f0a5ecac9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/marketplace/types.json b/.autodoc/docs/json/core/src/marketplace/types.json
deleted file mode 100644
index f5196ad74..000000000
--- a/.autodoc/docs/json/core/src/marketplace/types.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "types.ts",
- "filePath": "core/src/marketplace/types.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/marketplace/types.ts",
- "summary": "This file contains various types used in the zoo project, as well as a type for Coingecko prices and a type for the highest bid. \n\nThe `Currency`, `BigintIsh`, and `Token` types are imported from the `@zoolabs/zdk` library, while the `BigNumber` type is imported from the `ethers` library. These types are likely used throughout the project to represent different aspects of tokens and currency.\n\nThe `TokenId` type is defined as either a string or a number, and is likely used to represent the unique identifier for a token.\n\nThe `Ask` and `Bid` types are defined as objects with various properties, including an `amount` property that can be either a `BigintIsh` or a `BigNumber`, a `currency` property that is a string, and various other properties such as `offline`, `bidder`, and `recipient`. These types are likely used to represent bids and asks in the project's marketplace.\n\nThe `GraphUser`, `GraphCurrency`, `GraphMedia`, `GraphAsk`, `GraphBid`, and `GraphLazyBid` types are all used to represent different aspects of data returned from GraphQL queries. These types likely correspond to different types of data that can be queried from the project's GraphQL API.\n\nThe `CoingeckoPrices` type is defined as an object with keys that are coin IDs and values that are objects with a `usd` property. This type is likely used to represent price data from the Coingecko API.\n\nThe `HighestBid` type is defined as an object with a `bid` property that is a `GraphBid` object, a `usdAmount` property that is a number, and a `createdAtTimestamp` property that is a string. This type is likely used to represent the highest bid on a particular item in the marketplace.\n\nOverall, this file contains various types that are used throughout the zoo project to represent different aspects of tokens, currency, bids, asks, and data returned from GraphQL queries. These types are likely used extensively throughout the project to ensure consistency and type safety.",
- "questions": "1. What is the purpose of the `zdk` library and how is it used in this code?\n- The `zdk` library is imported to provide access to the `Currency`, `BigintIsh`, and `Token` types used in the `Ask` and `Bid` types.\n\n2. What is the difference between an `Ask` and a `Bid`?\n- An `Ask` represents an offer to sell a media asset, while a `Bid` represents an offer to buy a media asset. `Bid` includes additional properties such as `bidder`, `recipient`, and `sellOnShare`.\n\n3. What is the `GraphLazyBid` type and why is the `media` property commented out?\n- `GraphLazyBid` is a type used in GraphQL responses to represent a bid without the associated media asset. The `media` property is commented out because it is not always included in the response and is not required for all use cases.",
- "checksum": "318c96d4d4cb17914f978de31dcfbd00"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/Auction/index.json b/.autodoc/docs/json/core/src/modals/Auction/index.json
deleted file mode 100644
index 47cfb762d..000000000
--- a/.autodoc/docs/json/core/src/modals/Auction/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/Auction/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/Auction/index.tsx",
- "summary": "This code defines a React component called `AuctionModal` that is used to create or edit auctions for animals in a virtual zoo. The component is imported into other parts of the project and is used to display a modal window with a form for creating or editing auctions.\n\nThe component imports several hooks from the project's state management system, including `useModalOpen`, `useAuctionModal`, and `useWalletModalToggle`. It also imports two custom hooks from the `state/zoo/hooks` module called `useCreateAuction` and `useEditAuction`. These hooks provide access to functions for creating and editing auctions.\n\nThe `AuctionModal` component takes two props: `nft` and `edit`. `nft` is an object that represents the animal being auctioned, and `edit` is a boolean flag that indicates whether the auction is being created or edited.\n\nThe component renders a `Modal` component from the project's `components` directory. The `Modal` component is a reusable component that displays a modal window with a header and content. The content of the modal is generated by the `getModalContent` function, which returns a form with input fields for the auction's duration, reserve price, and curator fee.\n\nThe `handleAuction` function is called when the user submits the form. It checks if the user is logged in and either creates a new auction or edits an existing one using the `useCreateAuction` and `useEditAuction` hooks. If the user is not logged in, the `toggleWallet` function is called to display a wallet modal.\n\nThe `successCallback` function is called when an auction is successfully created or edited. It closes the auction modal and redirects the user to the market page.\n\nOverall, this code provides a way for users to create and edit auctions for animals in the virtual zoo. It uses several hooks and custom functions to manage the state of the auction creation/editing process and displays a modal window with a form for inputting auction details.",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code is a React component that creates a modal for putting an animal on auction. It uses various hooks and functions to handle the auction creation and editing process.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, Redux, Next.js, and various custom hooks and components.\n\n3. What is the role of the `useCallback` hook in this code?\n- The `useCallback` hook is used to define a memoized callback function that is passed as a parameter to other functions. It is used to optimize performance by preventing unnecessary re-renders of components that depend on the callback function.",
- "checksum": "206e2ad98b8005b2767f25a03e763fd1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/BridgeSearchModal/CurrencyList.json b/.autodoc/docs/json/core/src/modals/BridgeSearchModal/CurrencyList.json
deleted file mode 100644
index f377b8581..000000000
--- a/.autodoc/docs/json/core/src/modals/BridgeSearchModal/CurrencyList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CurrencyList.tsx",
- "filePath": "core/src/modals/BridgeSearchModal/CurrencyList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/CurrencyList.tsx",
- "summary": "The `CurrencyList` component is a React component that renders a list of tokens. It takes in a list of tokens, a selected token, and a callback function to handle selecting a token. The component uses the `FixedSizeList` component from the `react-window` library to render the list of tokens. \n\nEach token in the list is rendered as a `CurrencyRow` component, which displays the token's logo, symbol, and name. When a token is selected, the `onCurrencySelect` callback function is called with the selected token as an argument. \n\nThe `CurrencyList` component also includes a `BreakLineComponent` component, which is used to display a message indicating that the list of tokens has been expanded to include tokens from inactive token lists. \n\nThe `CurrencyList` component also includes an `ImportRow` component, which is used to display a row for importing a token. This row is only displayed if the index of the token in the list is greater than the length of the list of tokens. \n\nThe `CurrencyList` component also includes a `Balance` component, which is used to display the balance of a token. However, this component is currently commented out and not being used. \n\nOverall, the `CurrencyList` component is a reusable component that can be used to display a list of tokens and handle selecting a token. It is used in the larger project to allow users to select a token to trade on a decentralized exchange. \n\nExample usage:\n\n```jsx\nimport CurrencyList from \"./CurrencyList\";\n\nfunction MyComponent() {\n const tokens = [\n { name: \"Ethereum\", symbol: \"ETH\", logoURI: \"https://example.com/eth.png\" },\n { name: \"Wrapped Bitcoin\", symbol: \"WBTC\", logoURI: \"https://example.com/wbtc.png\" },\n { name: \"Chainlink\", symbol: \"LINK\", logoURI: \"https://example.com/link.png\" },\n ];\n\n const [selectedToken, setSelectedToken] = useState(null);\n\n const handleTokenSelect = (token) => {\n setSelectedToken(token);\n };\n\n return (\n Wallet Page
\n {/* other wallet-related components */}\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `CurrencyList` component?\n- The `CurrencyList` component is used to display a list of tokens/currencies and allows the user to select a currency.\n\n2. What is the significance of the `Token` type and how is it used in this code?\n- The `Token` type represents a cryptocurrency token and is used throughout the code to represent different currencies. It is used as a parameter in the `currencyKey` function and as a prop in the `CurrencyRow` and `CurrencyList` components.\n\n3. What is the purpose of the `Tag` and `TagContainer` components?\n- The `Tag` component is used to display a tag for a currency, while the `TagContainer` component is used to display multiple tags for a currency. However, these components are currently commented out and not being used in the code.",
- "checksum": "b43f6178130a371939d282c6c3ff7f3e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/BridgeSearchModal/CurrencyModalView.json b/.autodoc/docs/json/core/src/modals/BridgeSearchModal/CurrencyModalView.json
deleted file mode 100644
index e5be0eaea..000000000
--- a/.autodoc/docs/json/core/src/modals/BridgeSearchModal/CurrencyModalView.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CurrencyModalView.ts",
- "filePath": "core/src/modals/BridgeSearchModal/CurrencyModalView.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/CurrencyModalView.ts",
- "summary": "The code above defines an enum called `CurrencyModalView`. An enum is a data type that consists of a set of named values, and it is used to define a set of constants that represent possible values for a variable. In this case, the `CurrencyModalView` enum has four possible values: `search`, `manage`, `importToken`, and `importList`.\n\nThis enum is exported as the default value of the module, which means that it can be imported and used in other parts of the project. The purpose of this enum is likely to provide a set of options for a modal view that deals with currency-related functionality. For example, if there is a modal view that allows the user to manage their currencies, the `CurrencyModalView.manage` value could be used to indicate that the modal should display the manage view.\n\nHere is an example of how this enum could be used in a React component:\n\n```\nimport React from 'react';\nimport CurrencyModalView from './CurrencyModalView';\n\nfunction CurrencyModal(props) {\n const { view } = props;\n\n switch (view) {\n case CurrencyModalView.search:\n return Select a token:
\n| Name | \nAge | \n\n | \n
|---|
\n {/* main view of the application */}\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code defines a React component called `NFTExpandedModal` that renders a modal with content based on the `nft` and `isAuction` props passed to it. The content can be either a video or a 3D model viewer.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `React`, `next/router`, `next/dynamic`, and several custom hooks defined in `../../state/application/hooks`.\n\n3. What is the purpose of the `ssr: false` option passed to `next/dynamic`?\n- The `ssr: false` option tells Next.js to only load the `ModelViewer` component on the client side, rather than during server-side rendering. This is necessary because the `ModelViewer` component relies on WebGL, which is not available during server-side rendering.",
- "checksum": "d6948db9867f8119f8332b65cea46587"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/FreeNFTModal/index.json b/.autodoc/docs/json/core/src/modals/FreeNFTModal/index.json
deleted file mode 100644
index edc2240f5..000000000
--- a/.autodoc/docs/json/core/src/modals/FreeNFTModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/FreeNFTModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/FreeNFTModal/index.tsx",
- "summary": "The `FreeNFTModal` component is a React component that renders a modal for freeing an NFT. It is part of the larger `zoo` project and is imported from various other files within the project. \n\nThe component imports several hooks from the `application` and `zoo` state slices, including `useModalOpen`, `useFreeNftModal`, and `useFreeNFT`. It also imports several components from the `components` folder, including `Modal`, `ModalHeader`, and `ModelViewer`. \n\nThe component takes an `nft` prop, which is an object representing the NFT to be freed. The modal displays a preview of the NFT, along with a message asking the user if they are sure they want to free the animal. If the user confirms, the NFT is freed and the collateral is returned, but the NFT is lost forever. \n\nThe `FreeNFTModal` component uses several hooks to manage state and handle user interactions. For example, it uses the `useModalOpen` hook to determine whether the modal is open, and the `useFreeNftModal` hook to toggle the modal. It also uses the `useActiveWeb3React` hook to get the user's account information, and the `useRouter` hook to navigate to a different page after the NFT is freed. \n\nThe component also defines several callback functions, including `successCallback`, which is called after the NFT is freed and navigates the user to the wallet page, and `freeNft`, which frees the NFT if the user is logged in and shows a wallet modal if they are not. \n\nThe `FreeNFTModal` component renders a `Modal` component that wraps the modal content. The modal content is defined in the `getModalContent` function, which returns a JSX element that displays the NFT preview, confirmation message, and \"Set Free\" button. The \"Set Free\" button is disabled if the NFT is currently being freed. \n\nOverall, the `FreeNFTModal` component provides a way for users to free their NFTs and get their collateral back, but at the cost of losing the NFT forever. It is a small but important part of the larger `zoo` project, which is likely a platform for buying, selling, and trading NFTs related to animals.",
- "questions": "1. What is the purpose of this code?\n- This code is a React component that renders a modal for freeing an animal NFT and returning collateral.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, Redux, Next.js, and dynamic importing.\n\n3. What is the role of the `useFreeNFT` hook?\n- The `useFreeNFT` hook is used to call the `freeNftF` function, which frees the specified animal NFT and returns collateral.",
- "checksum": "88103227997c10058485b350cec3e5d9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/HatchEggModal/Animation.json b/.autodoc/docs/json/core/src/modals/HatchEggModal/Animation.json
deleted file mode 100644
index 26b719982..000000000
--- a/.autodoc/docs/json/core/src/modals/HatchEggModal/Animation.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Animation.tsx",
- "filePath": "core/src/modals/HatchEggModal/Animation.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/HatchEggModal/Animation.tsx",
- "summary": "The `HatchEggAnimationModal` component is a React component that displays an animation of an egg hatching. The component is used as a modal in the larger project and is triggered when a user hatches an egg. The modal displays the animation and redirects the user to the wallet page once the animation is complete.\n\nThe component imports two hooks from the `application` state: `useHatchEggAnimationModal` and `useModalOpen`. These hooks are used to manage the state of the modal. The `useHatchEggAnimationModal` hook is used to toggle the modal on and off, while the `useModalOpen` hook is used to check if the modal is open.\n\nThe component also imports the `useRouter` hook from `next/router`. This hook is used to redirect the user to the wallet page once the animation is complete.\n\nThe component uses the `useState` hook to manage the state of the animation. The `useEffect` hook is used to set the animation based on the name of the egg that was hatched. If the name of the egg matches one of the cases in the switch statement, the corresponding animation is set. If the name of the egg does not match any of the cases, a default animation is set.\n\nThe `getModalContent` function returns the content of the modal. It contains a `video` element that displays the animation. The `onEnded` event listener is used to check if the animation has ended. If the animation has ended and the modal is open, the `toggleModal` function is called to close the modal. The `push` function is used to redirect the user to the wallet page.\n\nThe `Modal` component is used to display the content of the modal. It receives the `isOpen`, `onDismiss`, `minHeight`, and `isMax` props. The `isOpen` prop is used to check if the modal is open, the `onDismiss` prop is used to close the modal, the `minHeight` prop is used to set the minimum height of the modal, and the `isMax` prop is used to set the maximum height of the modal.\n\nExample usage:\n\n```jsx\nimport HatchEggAnimationModal from \"./path/to/HatchEggAnimationModal\";\n\nfunction MyComponent() {\n return (\n \n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code is for a React component that displays a modal for hatching an egg animation.\n\n2. What is the significance of the `useModalOpen` and `useHatchEggAnimationModal` hooks?\n- The `useModalOpen` hook is used to determine if the hatch egg animation modal is currently open. The `useHatchEggAnimationModal` hook is used to toggle the hatch egg animation modal.\n\n3. What is the purpose of the `switch` statement in the `useEffect` hook?\n- The `switch` statement sets the animation URL based on the name of the NFT (non-fungible token) passed as a prop to the component. If the name does not match any of the cases, a default animation is used. However, the `switch` statement is missing `break` statements, which may cause unexpected behavior.",
- "checksum": "2aa53db0d5e80e5d75e2d9783f0cf892"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/HatchEggModal/index.json b/.autodoc/docs/json/core/src/modals/HatchEggModal/index.json
deleted file mode 100644
index 180165961..000000000
--- a/.autodoc/docs/json/core/src/modals/HatchEggModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/HatchEggModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/HatchEggModal/index.tsx",
- "summary": "This code defines a React component called `HatchEggModal` that renders a modal for hatching an egg. The modal is opened by calling the `useHatchEggModal` hook from the `application` state slice. The modal displays a video of the egg and a button to hatch it. The button is disabled if the user is not logged in or if the egg is still in the process of hatching. \n\nThe component uses several hooks from the `web3-react`, `zoo`, and `hooks` libraries. The `useWeb3React` hook provides access to the user's Ethereum account, which is used to hatch the egg. The `useSelector` hook is used to retrieve the `loading` state from the `zoo` slice of the Redux store. The `useHatch` hook is used to hatch the egg. The `useMedia` hook is used to determine the user's screen size, and the `useZooToken` hook is used to retrieve the `ZooToken` contract instance. \n\nThe component also defines a `WALLET_VIEWS` object that maps different views of the wallet modal to string keys. \n\nThe `HatchEggModal` component takes two props: `nftItem` and `success`. `nftItem` is an object that contains information about the egg, including its `dropId` and `token_uri`. `success` is a callback function that is called when the egg is successfully hatched. \n\nThe `HatchEggModal` component renders a `Modal` component from the `components` directory. The `Modal` component is used to display the egg hatching modal. The `Modal` component takes several props, including `isOpen`, `onDismiss`, `minHeight`, `maxHeight`, `padding`, and `maxWidth`. \n\nThe `HatchEggModal` component defines several functions, including `toggleModal`, `toggleWallet`, `handleHatchEgg`, and `getModalContent`. `toggleModal` is a function that toggles the visibility of the egg hatching modal. `toggleWallet` is a function that toggles the visibility of the wallet modal. `handleHatchEgg` is a function that is called when the user clicks the hatch button. It checks if the user is logged in and then calls the `hatchEgg` function to hatch the egg. If the user is not logged in, it calls the `toggleWallet` function to open the wallet modal. `getModalContent` is a function that returns the content of the egg hatching modal. \n\nThe `HatchEggModal` component is exported as the default export of the file and can be used in other parts of the `zoo` project by importing it and rendering it. For example, it could be used in a page that displays the user's inventory of eggs and allows them to hatch them. \n\nExample usage:\n\n```jsx\nimport HatchEggModal from \"./path/to/HatchEggModal\";\n\nfunction EggInventory({ eggs }) {\n const [selectedEgg, setSelectedEgg] = useState(null);\n\n function handleHatchSuccess() {\n // do something when egg is hatched\n }\n\n return (\n \n {eggs.map((egg) => (\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `useHatch` hook and how is it used in this code?\n- The `useHatch` hook is used to hatch an egg by calling the `hatchEgg` function with the appropriate parameters. It is used in the `handleHatchEgg` function to hatch the egg when the \"Hatch Egg\" button is clicked.\n\n2. What is the significance of the `WALLET_VIEWS` object?\n- The `WALLET_VIEWS` object is used to define the different views of the wallet modal. It is used to determine which view to display when the wallet modal is opened.\n\n3. What is the purpose of the commented out code related to calculating the time left for hatching an egg?\n- The commented out code is used to calculate the time left for hatching an egg based on the egg's timestamp and the `HATCH_EGG_WAIT_PERIOD` environment variable. It is not currently being used in the code, but may have been used in a previous version or may be used in a future version.",
- "checksum": "3539e68d989caf03c8886a03c897299d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/MarketModals/BuyZooModal.json b/.autodoc/docs/json/core/src/modals/MarketModals/BuyZooModal.json
deleted file mode 100644
index 72423d172..000000000
--- a/.autodoc/docs/json/core/src/modals/MarketModals/BuyZooModal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BuyZooModal.tsx",
- "filePath": "core/src/modals/MarketModals/BuyZooModal.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/MarketModals/BuyZooModal.tsx",
- "summary": "The code above defines a React functional component called `BuyZooModal`. This component is responsible for rendering a modal that allows users to buy a zoo. The modal is triggered by a button click and is displayed using the `Modal` component from the `components` directory.\n\nThe `BuyZooModal` component imports two hooks from the `state/application/hooks` module: `useModalOpen` and `useBuyZooModalToggle`. These hooks are used to manage the state of the modal. The `useModalOpen` hook returns a boolean value that indicates whether the modal is currently open or closed. The `useBuyZooModalToggle` hook returns a function that toggles the state of the modal.\n\nThe `BuyZooModal` component renders the `Modal` component with several props. The `isOpen` prop is set to the value returned by the `useModalOpen` hook, which determines whether the modal is displayed or not. The `onDismiss` prop is set to a function that does nothing when the modal is dismissed. The `isMax` prop is set to `true`, which means that the modal will take up the entire screen. The `maxWidth` prop is set to `1200`, which is the maximum width of the modal. The `maxHeight` prop is set to `80`, which is the maximum height of the modal.\n\nInside the `Modal` component, there is a `div` element that contains a `h1` element with the text \"Buy Zoo Modal\". When the `div` element is clicked, the `toggleBuyZooModal` function is called, which toggles the state of the modal.\n\nThis component can be used in the larger project to provide users with a way to buy a zoo. It can be rendered on a page or triggered by a button click. Here is an example of how this component can be used:\n\n```\nimport React from \"react\";\nimport BuyZooModal from \"path/to/BuyZooModal\";\n\nconst HomePage: React.FC = () => {\n const [showModal, setShowModal] = React.useState(false);\n\n const handleButtonClick = () => {\n setShowModal(true);\n };\n\n return (\n setSelectedEgg(egg)}>\n \n
\n ))}\n {selectedEgg && (\n \n
\n );\n};\n\nexport default HomePage;\n```\n\nIn this example, the `BuyZooModal` component is rendered conditionally based on the value of the `showModal` state variable. When the \"Buy a Zoo\" button is clicked, the `showModal` variable is set to `true`, which triggers the rendering of the `BuyZooModal` component.",
- "questions": "1. What is the purpose of the `BuyZooModal` component?\n- The `BuyZooModal` component is a React functional component that renders a modal for buying a zoo. It uses the `Modal` component from the `components` directory and some custom hooks from the `state/application/hooks` directory to manage the modal state.\n\n2. What props does the `Modal` component receive?\n- The `Modal` component receives four props: `isOpen`, `onDismiss`, `isMax`, and `maxWidth`. `isOpen` is a boolean that determines whether the modal is open or closed. `onDismiss` is a function that is called when the modal is dismissed. `isMax` is a boolean that determines whether the modal should be maximized. `maxWidth` is a number that determines the maximum width of the modal.\n\n3. What is the purpose of the `toggleBuyZooModal` function?\n- The `toggleBuyZooModal` function is a custom hook that toggles the state of the `buyZooModal` variable in the `state/application/hooks` directory. It is used to open and close the modal when the user clicks on the `div` element that contains the `h1` element.",
- "checksum": "5c890178e76b78af567e82a70f1e3b66"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/NetworkMigrationModal/index.json b/.autodoc/docs/json/core/src/modals/NetworkMigrationModal/index.json
deleted file mode 100644
index 2358e3535..000000000
--- a/.autodoc/docs/json/core/src/modals/NetworkMigrationModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/NetworkMigrationModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/NetworkMigrationModal/index.tsx",
- "summary": "The code is a React component that renders a modal for network migration in the zoo project. The modal is triggered by a button click and displays a countdown timer, a button to burn tokens, and a link to copy the burn address. The countdown timer is calculated based on the difference between the current date and a hardcoded end date. The timer is updated every minute using a setInterval function. The burn button calls a function that transfers the user's zoo tokens to a hardcoded burn address. The amount of tokens transferred is calculated based on the user's zoo balance. The burn address is copied to the clipboard when the user clicks the copy link. The component uses several hooks from the zoo project, including useModalOpen, useNetworkMigrationModalToggle, useTransferZoo, and useSelector. It also imports several components and libraries, including Modal, ModalHeader, Web3, and dynamic. The ModelViewer component is loaded dynamically using the dynamic function from Next.js. The component is exported as the default export of the file and can be used in other parts of the zoo project by importing it and rendering it as a React component. For example:\n\n```\nimport NetworkMigrationModal from 'zoo/components/NetworkMigrationModal';\n\nfunction MyComponent() {\n return (\n Welcome to the Zoo!
\n \n {showModal &&\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code is a React component that renders a modal for network migration. It includes a countdown timer, a button to burn tokens, and a link to copy a burn address.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, Redux, MUI, Web3, and Next.js.\n\n3. What is the significance of the `ssr: false` option in the `dynamic` import statement?\n- The `ssr: false` option in the `dynamic` import statement ensures that the `ModelViewer` component is not rendered on the server side, but only on the client side. This is important for performance reasons and to avoid issues with server-side rendering.",
- "checksum": "276466ebbebd6dfe73f92d9b7aec4794"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/NetworkModal/index.json b/.autodoc/docs/json/core/src/modals/NetworkModal/index.json
deleted file mode 100644
index 913e6e410..000000000
--- a/.autodoc/docs/json/core/src/modals/NetworkModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/NetworkModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/NetworkModal/index.tsx",
- "summary": "The `NetworkModal` component is responsible for rendering a modal that allows users to switch between different Ethereum networks. The component imports various constants and hooks from other files in the project, including the `networks` configuration file and several custom hooks defined in the `application` and `hooks` directories.\n\nThe component first retrieves the current chain ID, library, and account using the `useActiveWeb3React` hook. It then checks if the chain ID is defined, and if not, returns `null` to prevent the modal from rendering.\n\nAssuming the chain ID is defined, the component renders a `Modal` component from the `components` directory, which displays a header with a \"Select a Network\" title and a message indicating the current network being used by the user. The available networks are then displayed in a grid, with each network represented by a button that includes an icon, label, and background color gradient. If the user is currently on a particular network, the corresponding button is highlighted with a different background color gradient.\n\nWhen a user clicks on a network button, the `toggleNetworkModal` function is called to close the modal, and a cookie is set to store the selected chain ID. Depending on whether the selected network is supported by MetaMask, the `library` object is used to call either the `wallet_switchEthereumChain` or `wallet_addEthereumChain` method to switch to the new network.\n\nOverall, the `NetworkModal` component provides a user-friendly way for users to switch between different Ethereum networks, which is an important feature for decentralized applications that may be deployed on multiple networks. The component can be used in conjunction with other components and hooks in the `application` and `hooks` directories to provide a seamless user experience for interacting with the Zoo project.",
- "questions": "1. What is the purpose of this code?\n- This code is responsible for rendering a modal that allows the user to select a network to connect to.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `next/image`, `react`, and `cookie-cutter`.\n\n3. What happens if the `chainId` is not defined?\n- If the `chainId` is not defined, the function returns `null` and the modal is not rendered.",
- "checksum": "b6fb88ff90080008ff8f5ddbdadea278"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/NetworkPopup/index.json b/.autodoc/docs/json/core/src/modals/NetworkPopup/index.json
deleted file mode 100644
index b3b836176..000000000
--- a/.autodoc/docs/json/core/src/modals/NetworkPopup/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/NetworkPopup/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/NetworkPopup/index.tsx",
- "summary": "The code is a React component that renders a network popup menu for a web3-enabled application. The popup displays a list of available networks and allows the user to switch between them. The component uses the `@headlessui/react` library to create the popup and the `next-themes` library to handle theme switching. \n\nThe `NetworkPopup` component takes two props: `userEthBalance` and `NATIVE`. `userEthBalance` is the user's ETH balance, and `NATIVE` is an object that maps network IDs to their native tokens. \n\nThe component uses the `useActiveWeb3React` hook from the `hooks` directory to get the current chain ID, library, and account. If there is no chain ID, the component returns `null`. \n\nThe component then renders a `Popover` component from `@headlessui/react`. The `Popover` component takes a function as a child that returns an object with an `open` property. The `open` property is `true` when the popup is open and `false` when it is closed. \n\nThe `Popover` component renders a button that displays the user's ETH balance and symbol. When the button is clicked, the popup opens, displaying a list of available networks. The list is rendered using the `AVAILABLE_NETWORKS` array from the `config/networks` file. \n\nFor each network in the list, the component renders a button that displays the network's name and icon. If the network is the current network, the button is disabled and displays a green dot to indicate that it is selected. If the network is not the current network, the button is clickable and switches the user to that network when clicked. \n\nThe component uses the `cookie-cutter` library to set the `chainId` cookie when the user switches networks. It also uses the `library` object to call the `wallet_switchEthereumChain` or `wallet_addEthereumChain` method to switch networks in the user's wallet. \n\nOverall, this component provides a simple and intuitive way for users to switch between networks in a web3-enabled application. \n\nExample usage:\n\n```jsx\nimport NetworkPopup from \"./components/NetworkPopup\";\n\nfunction App() {\n return (\n Welcome to my component
\n\n
\n );\n}\n```",
- "questions": "1. What does this code do?\n- This code exports a React component called `NetworkPopup` that renders a popover with a list of available networks and allows the user to switch between them.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies, including \"@headlessui/react\", \"next/link\", \"../../functions/styling\", \"next-themes\", \"hooks/useActiveWeb3React\", \"config/networks\", \"next/image\", and \"cookie-cutter\".\n\n3. What is the purpose of the `useActiveWeb3React` hook?\n- The `useActiveWeb3React` hook is used to retrieve the current chain ID, library, and account from the user's active Web3 provider. These values are used to determine which network the user is currently connected to and to switch between networks when the user selects a different one from the popover.",
- "checksum": "0df3689ba0df4665f85b19611c420c71"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/NftModal/index.json b/.autodoc/docs/json/core/src/modals/NftModal/index.json
deleted file mode 100644
index 69bb9f3ed..000000000
--- a/.autodoc/docs/json/core/src/modals/NftModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/NftModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/NftModal/index.tsx",
- "summary": "The `NftModal` component is a React functional component that renders a modal window containing information about a specific NFT (non-fungible token) item. The component receives several props, including the `nftItem` object, which contains information about the NFT, such as its name, attributes, and kind. The component also receives several callback functions, including `hatchEgg`, `feed`, `breed`, and `auction`, which are used to perform various actions related to the NFT.\n\nThe modal window is composed of two main sections: the left section displays a video or 3D model of the NFT, depending on its kind, while the right section displays various information about the NFT, such as its name, attributes, age, and description. The right section also contains several buttons that allow the user to perform various actions related to the NFT, such as hatching an egg, feeding the NFT, breeding it, or putting it up for auction.\n\nThe component uses several other components and libraries, such as `Modal` from the `components` directory, `BidModalHeader` from the `components/ModalHeader` directory, `Image` from the `next/image` library, `AccessAlarmRoundedIcon` from the `@mui/icons-material` library, and `ModelViewer` from the `components` directory. The component also uses several custom hooks from the `state/application/hooks` directory, such as `useMyNftModalToggle` and `useModalOpen`.\n\nOverall, the `NftModal` component provides a convenient way to display and interact with NFT items in the larger project. It allows users to view detailed information about their NFTs, as well as perform various actions related to them, such as hatching eggs, feeding, breeding, or auctioning them.",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code defines a React functional component called `NftModal` that renders a modal window displaying information about a specific NFT item, as well as buttons to perform actions such as hatching, feeding, breeding, and auctioning the NFT.\n\n2. What external libraries or components does this code use?\n- This code imports several external libraries and components, including `React`, `next/image`, `@mui/icons-material`, `moment`, and a custom `Modal` component. It also uses a dynamic import to load a `ModelViewer` component from a separate file.\n\n3. What are the props passed to the `NftModal` component and how are they used?\n- The `NftModal` component receives four props: `nftItem`, `hatchEgg`, `feed`, `breed`, and `auction`. These props are used to display information about the NFT item and to define the behavior of the action buttons in the modal window. For example, clicking the \"HATCH\" button calls the `hatchEgg` function passed as a prop.",
- "checksum": "0f8171affd029b4ba4fc38aa25d0fb04"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/NotificationModal/index.json b/.autodoc/docs/json/core/src/modals/NotificationModal/index.json
deleted file mode 100644
index 106ca1bc6..000000000
--- a/.autodoc/docs/json/core/src/modals/NotificationModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/NotificationModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/NotificationModal/index.tsx",
- "summary": "The code is a React component that renders a notification dialog box. The dialog box is displayed as a modal that appears in the center of the screen and overlays the rest of the content. The component uses the `Dialog` and `Transition` components from the `@headlessui/react` library to create the modal.\n\nThe `Notification` component takes two optional props: `title` and `hideOpenButton`. The `title` prop is used to set the title of the dialog box, while the `hideOpenButton` prop is used to control whether or not the button that opens the dialog box is displayed. By default, the `hideOpenButton` prop is set to `true`, which means that the button is hidden.\n\nThe component uses the `useState` hook to manage the state of the dialog box. The `isOpen` state variable is used to determine whether the dialog box is open or closed. The `openModal` and `closeModal` functions are used to update the `isOpen` state variable.\n\nThe `return` statement of the component renders the dialog box. If the `hideOpenButton` prop is set to `false`, a button is displayed that, when clicked, opens the dialog box. The `Transition` component is used to animate the appearance and disappearance of the dialog box. When the `isOpen` state variable is `true`, the `Dialog` component is displayed. The `Dialog` component contains the content of the dialog box, including the title, message, and close button.\n\nThe `Dialog` component is styled using Tailwind CSS classes. The `Dialog.Title` component is used to display the title of the dialog box, while the `Dialog.Description` component is used to display the message. The `closeModal` function is called when the close button is clicked, which updates the `isOpen` state variable and closes the dialog box.\n\nOverall, this component can be used to display notifications or alerts to the user in a visually appealing and user-friendly way. It can be easily integrated into a larger React project by importing and using the `Notification` component. For example:\n\n```\nimport Notification from './Notification';\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `Notification` component?\n- The `Notification` component is a modal dialog box that can be opened and closed by the user.\n\n2. What is the role of the `Transition` component?\n- The `Transition` component is used to animate the appearance and disappearance of the modal dialog box.\n\n3. What is the purpose of the `hideOpenButton` prop?\n- The `hideOpenButton` prop is used to conditionally render the \"Open dialog\" button. If it is set to `true`, the button will not be displayed.",
- "checksum": "6517a221daabec6af350829e51ba5fe4"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/SearchModal/CommonBases.json b/.autodoc/docs/json/core/src/modals/SearchModal/CommonBases.json
deleted file mode 100644
index b912f6ded..000000000
--- a/.autodoc/docs/json/core/src/modals/SearchModal/CommonBases.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CommonBases.tsx",
- "filePath": "core/src/modals/SearchModal/CommonBases.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/SearchModal/CommonBases.tsx",
- "summary": "The `CommonBases` component is a React functional component that renders a list of commonly used tokens (referred to as \"bases\") for a given blockchain network. The component takes in three props: `chainId`, `selectedCurrency`, and `onSelect`. \n\nThe `chainId` prop is an optional number that specifies the blockchain network for which the list of common bases should be displayed. If `chainId` is not provided, the component will not render any bases. If `chainId` is provided, the component will look up the list of common bases for that network from the `COMMON_BASES` object in the `routing` configuration file. If the list of common bases for the specified network is not found, an empty array is used instead.\n\nThe `selectedCurrency` prop is an optional `Currency` object that represents the currently selected base. If `selectedCurrency` is provided, the component will disable the button for that base and prevent it from being selected again. \n\nThe `onSelect` prop is a callback function that is called when a base is selected. The function takes in a `Currency` object representing the selected base.\n\nThe component renders a list of buttons, one for each base in the list of common bases. Each button displays the base's logo and symbol, and is disabled if the base is already selected. When a button is clicked, the `onSelect` callback is called with the corresponding `Currency` object.\n\nThis component can be used in a larger project that involves selecting a base token for a trading pair. For example, in a decentralized exchange application, the user may need to select a base token before selecting a quote token to create a trading pair. The `CommonBases` component provides a pre-defined list of commonly used base tokens for the user to choose from, making the selection process easier and more intuitive. \n\nExample usage:\n\n```\nWelcome to my app
\n\n \n {showManage && (\n setShowManage(false)}\n setModalView={(view) => console.log(view)}\n setImportToken={(token) => console.log(token)}\n setImportList={(list) => console.log(list)}\n setListUrl={(url) => console.log(url)}\n />\n )}\n
\n );\n}\n```",
- "questions": "1. What dependencies does this code use?\n- This code uses React, react-virtualized-auto-sizer, and @lingui/macro as dependencies.\n\n2. What is the purpose of the Manage component?\n- The Manage component is responsible for rendering a modal that allows the user to manage lists and tokens.\n\n3. What props does the Manage component expect?\n- The Manage component expects onDismiss, setModalView, setImportList, setImportToken, and setListUrl as props, all of which are functions.",
- "checksum": "e4c649d51a8a8c900db66ca23d0a92ce"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/SearchModal/ManageLists.json b/.autodoc/docs/json/core/src/modals/SearchModal/ManageLists.json
deleted file mode 100644
index b952015be..000000000
--- a/.autodoc/docs/json/core/src/modals/SearchModal/ManageLists.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ManageLists.tsx",
- "filePath": "core/src/modals/SearchModal/ManageLists.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/SearchModal/ManageLists.tsx",
- "summary": "The `ManageLists` component is responsible for rendering a list of token lists that can be managed by the user. It imports various components and hooks from other files in the project, including `AppDispatch`, `AppState`, `CheckCircle`, `Settings`, `AutoColumn`, `Row`, `RowBetween`, `RowFixed`, `useActiveListUrls`, `useAllLists`, `useIsListActive`, `useDispatch`, `useSelector`, `Button`, `CurrencyModalView`, `ExternalLink`, `ListLogo`, `ListToggle`, `ReactGA`, `TokenList`, `UNSUPPORTED_LIST_URLS`, `listVersionLabel`, `parseENSAddress`, `uriToHttp`, `useFetchListCallback`, `usePopper`, `classNames`, and `Popover`.\n\nThe `ManageLists` component renders an input field where the user can enter a URL or ENS name for a token list they want to import. As the user types, the component fetches the details of the list and displays them in a card below the input field. If the list is already imported, the component displays a checkmark and the text \"Loaded\" instead of the import button. If there is an error with the input or fetching the list, an error message is displayed.\n\nThe component also renders a list of all the token lists that have been imported by the user. Each list is displayed as a row with the list's logo, name, and number of tokens. The row also includes a toggle button that allows the user to enable or disable the list, a settings button that opens a popover with options to remove or update the list, and a background color that indicates whether the list is active or not.\n\nThe `ListRow` component is used to render each row in the list. It takes a `listUrl` prop and uses it to retrieve the corresponding list from the Redux store. It then renders the logo, name, and number of tokens for the list, along with the toggle and settings buttons. The component also handles user interactions with the buttons, such as enabling or disabling the list, removing the list, or updating the list.\n\nOverall, the `ManageLists` component provides a user-friendly interface for managing token lists in the project. It allows the user to easily import new lists, view details of existing lists, and enable or disable them as needed.",
- "questions": "1. What is the purpose of the `ManageLists` component?\n- The `ManageLists` component is responsible for displaying a list of imported token lists, allowing the user to add new lists, and importing a selected list.\n\n2. What is the purpose of the `listUrlRowHTMLId` function?\n- The `listUrlRowHTMLId` function generates an HTML ID for a list row based on its URL, replacing any periods with hyphens.\n\n3. What is the purpose of the `usePopper` hook?\n- The `usePopper` hook is used to position a popover element relative to a reference element, based on the specified placement.",
- "checksum": "b638def013f8b9045710aeb1f9011f61"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/SearchModal/ManageTokens.json b/.autodoc/docs/json/core/src/modals/SearchModal/ManageTokens.json
deleted file mode 100644
index 88f8982c8..000000000
--- a/.autodoc/docs/json/core/src/modals/SearchModal/ManageTokens.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ManageTokens.tsx",
- "filePath": "core/src/modals/SearchModal/ManageTokens.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/SearchModal/ManageTokens.tsx",
- "summary": "The `ManageTokens` component is a React component that is responsible for managing custom tokens in the Zoo project. It imports several components and hooks from other files in the project, including `RowBetween`, `RowFixed`, `useRemoveUserAddedToken`, `useUserAddedTokens`, `CurrencyLogo`, `CurrencyModalView`, `ExternalLink`, `ExternalLinkIcon`, `ImportRow`, `Token`, `Trash`, `getExplorerLink`, `isAddress`, `useActiveWeb3React`, and `useToken`.\n\nThe component takes two props: `setModalView` and `setImportToken`. `setModalView` is a function that sets the view of the currency modal, and `setImportToken` is a function that sets the token to be imported.\n\nThe component renders a search input field that allows users to search for custom tokens by address or symbol. It also displays a list of all custom tokens that have been added by the user, along with the option to remove them. The list is generated using the `userAddedTokens` hook, which retrieves all custom tokens stored locally in the user's browser. The `removeToken` function is used to remove a token from the list when the user clicks on the trash icon next to it.\n\nThe component also provides a tip at the bottom of the page, informing users that custom tokens are stored locally in their browser.\n\nOverall, the `ManageTokens` component is an important part of the Zoo project, as it allows users to manage their custom tokens and provides a user-friendly interface for doing so. It is likely used in conjunction with other components and features of the project, such as the currency modal and token import functionality.",
- "questions": "1. What is the purpose of the `ManageTokens` component?\n- The `ManageTokens` component manages the display and removal of custom tokens stored locally in the user's browser.\n\n2. What external libraries or components are being used in this code?\n- The code imports several components from the `../../components` directory, as well as the `Token` type from the `@zoolabs/zdk` library and the `Trash` icon from the `react-feather` library.\n\n3. What is the significance of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the `tokenList` variable, which is an array of JSX elements representing the user's custom tokens. This can improve performance by preventing unnecessary re-renders of this component when other parts of the application change.",
- "checksum": "dab22d1795669e30264c64bb6bb4f726"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/SearchModal/sorting.json b/.autodoc/docs/json/core/src/modals/SearchModal/sorting.json
deleted file mode 100644
index c0ec9f0ef..000000000
--- a/.autodoc/docs/json/core/src/modals/SearchModal/sorting.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "sorting.ts",
- "filePath": "core/src/modals/SearchModal/sorting.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/SearchModal/sorting.ts",
- "summary": "The code imports `Currency`, `CurrencyAmount`, and `Token` from the `@zoolabs/zdk` library, as well as `useAllTokenBalances` and `useMemo` from `react`. It then defines a `balanceComparator` function that takes two optional `CurrencyAmount` arguments and returns a number indicating their relative order. The function first checks if both arguments are defined, and if so, compares them using the `greaterThan` and `equalTo` methods of `CurrencyAmount`. If only one argument is defined and greater than zero, it is considered greater than the other. If neither argument is defined or greater than zero, they are considered equal. \n\nThe `getTokenComparator` function takes an object of `CurrencyAmount` values indexed by token addresses and returns a comparator function that takes two `Token` arguments and returns a number indicating their relative order. The comparator first compares the balances of the two tokens using the `balanceComparator` function, and if they are equal, it compares their symbols using the `toLowerCase` method. If one or both tokens do not have a symbol, they are considered equal to other tokens without symbols.\n\nThe `useTokenComparator` function takes a boolean `inverted` argument and returns a memoized comparator function that takes two `Token` arguments and returns a number indicating their relative order. It first calls `useAllTokenBalances` to get an object of `CurrencyAmount` values indexed by token addresses, and then calls `getTokenComparator` with this object to get a comparator function. If `inverted` is true, it returns a new comparator function that reverses the order of the original comparator function by multiplying its result by -1. Otherwise, it returns the original comparator function.\n\nThis code can be used to sort lists of tokens by balance and symbol, such as in a wallet or exchange interface. For example, to sort an array of `Token` objects called `tokens` in ascending order by balance and symbol, you could call `tokens.sort(useTokenComparator(false))`. To sort them in descending order, you could call `tokens.sort(useTokenComparator(true))`.",
- "questions": "1. What is the purpose of the `useTokenComparator` function?\n- The `useTokenComparator` function returns a comparator function that can be used to sort an array of `Token` objects based on their balances and symbols.\n\n2. What is the significance of the `inverted` parameter in `useTokenComparator`?\n- The `inverted` parameter determines whether the comparator function should sort the tokens in ascending or descending order based on their balances and symbols.\n\n3. What is the role of the `balances` object in `getTokenComparator`?\n- The `balances` object is used to look up the balance of each token in the `Token` array being sorted, and then compare the balances to determine their order.",
- "checksum": "4296ba95b66c5e05e1fe0e2e7688d304"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/ShareNFTModal/index.json b/.autodoc/docs/json/core/src/modals/ShareNFTModal/index.json
deleted file mode 100644
index 835b74c22..000000000
--- a/.autodoc/docs/json/core/src/modals/ShareNFTModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/ShareNFTModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/ShareNFTModal/index.tsx",
- "summary": "The `ShareNFTModal` component is a React component that renders a modal for sharing an NFT (non-fungible token) on social media platforms. The component imports two custom hooks from the `application` slice of the Redux store: `useModalOpen` and `useShareModal`. It also imports the `ApplicationModal` enum from the same slice, which is used to identify the modal being opened. Additionally, the component imports the `Modal` and `ModalHeader` components from the `components` directory, and several social media icons from the `react-icons` library.\n\nThe component takes two props: `nft`, which is an object representing the NFT being shared, and `edit`, which is a boolean indicating whether the NFT is being edited. The `nft` prop is required, while the `edit` prop is optional and defaults to `false`.\n\nThe `ShareNFTModal` component renders a modal that contains links to share the NFT on Twitter, Discord, and Gmail. The modal is opened and closed using the `modalOpen` and `toggleModal` variables, which are obtained from the `useModalOpen` and `useShareModal` hooks, respectively. The `getModalContent` function returns the JSX for the modal's content, which includes a header, a container for the social media links, and the links themselves. The links are styled with CSS classes and contain icons from the `react-icons` library.\n\nWhen the user clicks on the Twitter link, a new window is opened with a pre-populated tweet that includes the NFT's URL. When the user clicks on the Discord link, a new window is opened that prompts the user to authorize a Discord bot with certain permissions. The URL for the authorization request includes the NFT's ID as a state parameter. When the user clicks on the Gmail link, a new email is opened with the NFT's URL in the body.\n\nOverall, the `ShareNFTModal` component provides a convenient way for users to share NFTs on social media platforms. It can be used in conjunction with other components in the `zoo` project to create a seamless user experience for buying, selling, and sharing NFTs. For example, it could be used in conjunction with a component that displays a user's NFT collection, allowing the user to easily share their collection with others.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `ShareNFTModal` that displays a modal with social media sharing options for an NFT (non-fungible token).\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `react`, `react-icons`, and custom hooks from a `../../state/application` module.\n\n3. What is the significance of the `edit` prop?\n- The `edit` prop is an optional boolean value that defaults to `false`. It is not used within this component, but may be passed down to child components for conditional rendering based on whether the modal is being used for editing or sharing.",
- "checksum": "839527e4cdcc181e951b83457ff5451d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/TokenWarningModal/index.json b/.autodoc/docs/json/core/src/modals/TokenWarningModal/index.json
deleted file mode 100644
index 71c96fc37..000000000
--- a/.autodoc/docs/json/core/src/modals/TokenWarningModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/TokenWarningModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/TokenWarningModal/index.tsx",
- "summary": "This code defines a React component called `TokenWarningModal` that renders a modal window with a list of tokens and a confirmation button. The purpose of this component is to display a warning message to the user when they attempt to import a token that already exists in their wallet. The component takes three props: `isOpen`, `tokens`, and `onConfirm`. \n\nThe `isOpen` prop is a boolean that determines whether the modal is visible or not. The `tokens` prop is an array of `Token` objects that represent the tokens that are already in the user's wallet. The `onConfirm` prop is a callback function that is called when the user clicks the confirmation button.\n\nThe component renders a `Modal` component from the `../../components/Modal` module. The `Modal` component is a reusable component that provides a basic modal window with a header, body, and footer. The `isOpen` prop is passed to the `Modal` component to control its visibility. The `handleDismiss` function is defined using the `useCallback` hook, but it does not do anything.\n\nInside the `Modal` component, the `ImportToken` component from the `../SearchModal/ImportToken` module is rendered. The `ImportToken` component is a custom component that displays a list of tokens and allows the user to select one. The `tokens` prop is passed to the `ImportToken` component to populate the list. The `handleCurrencySelect` prop is passed to the `ImportToken` component as a callback function that is called when the user selects a token. This function is actually the `onConfirm` prop that was passed to the `TokenWarningModal` component.\n\nOverall, this code provides a simple way to display a warning message to the user when they attempt to import a token that already exists in their wallet. The `TokenWarningModal` component can be used in conjunction with other components in the `zoo` project to provide a more complete user interface for managing tokens. For example, it could be used in a settings page where the user can manage their wallet and import new tokens.",
- "questions": "1. What is the purpose of this code?\n This code defines a React component called `TokenWarningModal` that renders a modal with a list of tokens and a confirmation button.\n\n2. What dependencies does this code have?\n This code imports `React`, `useCallback`, `ImportToken`, `Modal`, and `Token` from various modules.\n\n3. What props does the `TokenWarningModal` component expect?\n The `TokenWarningModal` component expects an `isOpen` boolean, an array of `tokens`, and an `onConfirm` function as props.",
- "checksum": "5ca4b66e7cebb65d2a9f51ead471295a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/TransactionConfirmationModal/index.json b/.autodoc/docs/json/core/src/modals/TransactionConfirmationModal/index.json
deleted file mode 100644
index af8df340f..000000000
--- a/.autodoc/docs/json/core/src/modals/TransactionConfirmationModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/TransactionConfirmationModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/TransactionConfirmationModal/index.tsx",
- "summary": "This code defines several React components that are used to display different types of transaction confirmation modals in the Zoo project. The modals are used to provide feedback to the user about the status of a transaction, such as whether it is pending, has been submitted, or has encountered an error. \n\nThe `ConfirmationPendingContent` component displays a modal with a loading animation and a message indicating that the transaction is waiting for confirmation. It also displays two lines of text that are passed in as props. \n\nThe `TransactionSubmittedContent` component displays a modal with a checkmark icon and a message indicating that the transaction has been submitted. It also provides a link to view the transaction on an explorer and a button to add a currency to MetaMask. The component takes several props, including the transaction hash, chain ID, and currency to add. \n\nThe `ConfirmationModalContent` component is a generic component that displays a modal with a title, top content, and bottom content. It is used as a wrapper for the other confirmation modals. \n\nThe `TransactionErrorContent` component displays a modal with an error icon and a message indicating that the transaction has encountered an error. It also provides a button to dismiss the modal. \n\nThe `TransactionConfirmationModal` component is the main component that is exported by this file. It takes several props, including whether the modal is open, whether the transaction is attempting, the transaction hash, and the content to display. It conditionally renders one of the other confirmation modals based on the state of the transaction. \n\nOverall, these components provide a consistent and user-friendly way to display transaction confirmation feedback to users in the Zoo project. Developers can use these components in their own code to provide transaction confirmation feedback to users. For example, they might use the `TransactionSubmittedContent` component to display a confirmation modal after a user has submitted a transaction to the blockchain.",
- "questions": "1. What external libraries or packages are being used in this code?\n- The code is importing several packages such as `react-feather`, `@zoolabs/zdk`, `@lingui/macro`, `lottie-react`, and some custom components from the `../../components` directory.\n\n2. What are the different components being exported in this file?\n- The file exports several React components such as `ConfirmationPendingContent`, `TransactionSubmittedContent`, `ConfirmationModalContent`, `TransactionErrorContent`, and `TransactionConfirmationModal`.\n\n3. What is the purpose of the `useAddTokenToMetaMask` hook being imported in this file?\n- The `useAddTokenToMetaMask` hook is being used to add a token to the user's MetaMask wallet. It is being called in the `TransactionSubmittedContent` component when the user clicks on the \"Add to MetaMask\" button.",
- "checksum": "0b768d64857c444da9f8e54947d6f1c3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/TransactionFailedModal/index.json b/.autodoc/docs/json/core/src/modals/TransactionFailedModal/index.json
deleted file mode 100644
index dbc2e1fa0..000000000
--- a/.autodoc/docs/json/core/src/modals/TransactionFailedModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/TransactionFailedModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/TransactionFailedModal/index.tsx",
- "summary": "The code defines a React component called `TransactionFailedModal` that displays a modal dialog box with a message indicating that a transaction has been rejected. The component takes two props: `isOpen`, a boolean that determines whether the modal is visible, and `onDismiss`, a function that is called when the modal is dismissed.\n\nThe modal contains an image of a red X, a heading that says \"Uh Oh! Transaction rejected.\", and a button labeled \"Dismiss\". The text of the button is localized using the `@lingui/macro` and `@lingui/react` packages.\n\nThe component uses several other components and libraries to implement the modal. The `CloseIcon` component is imported from a file located in the `components` directory, and is used to display a clickable X icon in the upper-right corner of the modal. The `Image` component is imported from the `next/image` package, and is used to display the transaction-rejected.png image. The `Modal` component is imported from a file located in the `components` directory, and is used to display the modal dialog box.\n\nThe component is intended to be used in a larger project that involves transactions, such as a cryptocurrency exchange or a payment processing system. When a transaction is rejected, this component can be used to display a user-friendly error message to the user, indicating that the transaction was not successful and providing a way to dismiss the message. The component can be customized by changing the image, the heading, and the button text to fit the specific needs of the project. For example, the image could be replaced with a different icon or logo, and the heading could be changed to provide more specific information about the reason for the transaction rejection.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `TransactionFailedModal` that displays a modal with a message and an image when a transaction is rejected.\n\n2. What dependencies does this code use?\n- This code imports several dependencies including `CloseIcon` from a local file, `Image` from the `next/image` package, `Modal` from a local file, `React`, `t` and `useLingui` from the `@lingui` package.\n\n3. What props does the `TransactionFailedModal` component accept?\n- The `TransactionFailedModal` component accepts two props: `isOpen` which is a boolean that determines whether the modal is open or closed, and `onDismiss` which is a function that is called when the modal is dismissed.",
- "checksum": "b206fac93dd67c3411a38aa97581428f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/WalletModal/Option.json b/.autodoc/docs/json/core/src/modals/WalletModal/Option.json
deleted file mode 100644
index 18f7b4acc..000000000
--- a/.autodoc/docs/json/core/src/modals/WalletModal/Option.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Option.tsx",
- "filePath": "core/src/modals/WalletModal/Option.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/WalletModal/Option.tsx",
- "summary": "The `Option` component is a reusable React component that renders an option item with an icon, header, and subheader. It can be used in various parts of the larger project, such as a navigation menu or a settings page. \n\nThe component takes in several props, including `link`, `clickable`, `size`, `onClick`, `color`, `header`, `subheader`, `icon`, `active`, and `id`. \n\nThe `link` prop is an optional string that specifies the URL to link to when the option is clicked. If `link` is provided, the component returns an anchor tag with the `content` as its child. If `link` is not provided, the component returns the `content` div.\n\nThe `clickable` prop is a boolean that determines whether the option is clickable or not. If `clickable` is `false`, the cursor is set to `not-allowed`.\n\nThe `size` prop is an optional number that specifies the size of the option. If `size` is not provided, the default size is used.\n\nThe `onClick` prop is an optional function that is called when the option is clicked.\n\nThe `color` prop is a required string that specifies the background color of the option.\n\nThe `header` prop is a required React node that specifies the main text of the option.\n\nThe `subheader` prop is an optional React node that specifies the subtext of the option.\n\nThe `icon` prop is a required string that specifies the URL of the icon to display.\n\nThe `active` prop is a boolean that determines whether the option is active or not. If `active` is `true`, the option is highlighted with a gradient background.\n\nThe `id` prop is a required string that specifies the ID of the option.\n\nThe `content` variable is a div that contains the header, subheader, and icon. The header and subheader are wrapped in divs with appropriate styles. The icon is an `Image` component from the `next/image` library.\n\nIf `link` is provided, the `content` div is returned as a child of an anchor tag. If `link` is not provided and `active` is `false`, the `content` div is returned. If `link` is not provided and `active` is `true`, the `content` div is returned as a child of a div with a gradient background.\n\nExample usage:\n\n```\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `SUPPORTED_WALLETS` and `injected` variables imported from `../../config/wallets`?\n- `SUPPORTED_WALLETS` is an object containing information about different wallet options that can be used to connect to the application. `injected` is a specific connector option that refers to the user's browser extension wallet.\n2. What is the `PendingView` component used for?\n- The `PendingView` component is used to display a loading screen while the application is initializing and attempting to connect to a wallet.\n3. What is the purpose of the `tryActivation` function passed as a prop to `PendingView`?\n- The `tryActivation` function is used to attempt to activate a specific wallet connector option. It takes in a connector object as an argument and attempts to activate it for use in the application.",
- "checksum": "9b76edfb4b17be1a8c3bacc7f0f59149"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/modals/WalletModal/index.json b/.autodoc/docs/json/core/src/modals/WalletModal/index.json
deleted file mode 100644
index d96885ad4..000000000
--- a/.autodoc/docs/json/core/src/modals/WalletModal/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/modals/WalletModal/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/modals/WalletModal/index.tsx",
- "summary": "The `WalletModal` component is responsible for rendering a modal that allows users to connect their wallets to the application. It imports various dependencies such as React, `useEffect`, `useState`, and several other components and hooks from the application.\n\nThe component defines a constant object `WALLET_VIEWS` that contains different views of the wallet modal, such as `OPTIONS`, `ACCOUNT`, and `PENDING`. It then defines the `WalletModal` function that takes in an object with three properties: `pendingTransactions`, `confirmedTransactions`, and `ENSName`. These properties are used to display the user's account details and pending transactions.\n\nThe function then uses the `useActiveWeb3React` hook to get the current account, chain ID, and connector. It also uses the `useLingui` hook to get the current language and the `useModalOpen` and `useWalletModalToggle` hooks to open and close the wallet modal.\n\nThe `WalletModal` function defines several `useEffect` hooks that handle the opening and closing of the modal, resetting the wallet view, and closing the modal on successful connection. It also defines a `getOptions` function that returns a list of wallet options that the user can connect to, depending on the device and browser.\n\nFinally, the `WalletModal` function returns a `Modal` component that displays the modal content. The content is determined by the current wallet view and whether there is an error connecting to the wallet. If there is an error, the modal displays an error message and a button to disconnect. If the user is connected and the wallet view is `ACCOUNT`, the modal displays the user's account details and pending transactions. Otherwise, the modal displays a list of wallet options and a link to learn more about wallets.\n\nOverall, the `WalletModal` component is an important part of the application's user interface, allowing users to connect their wallets and interact with the application.",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code is a React component that renders a modal for selecting and connecting to different wallets. It uses various connectors from the `@web3-react` library and supports multiple wallets including MetaMask, WalletConnect, and Fortmatic.\n\n2. How does the code handle errors and what types of errors can occur?\n- The code handles errors by displaying an error message in the modal if there is an issue connecting to a wallet. Errors can include unsupported chain IDs, connection errors, and activation errors. The user can disconnect and try again or refresh the page.\n\n3. What is the role of the `useEffect` hooks in this code?\n- The `useEffect` hooks are used to handle various side effects such as closing the modal when a connection is successful, resetting the wallet view when the modal is opened, and detecting changes in the active connector or account. They also handle the case where the user is logged out and closes the modal.",
- "checksum": "df105ebc92d06cec2d07dad6955c845e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/404.json b/.autodoc/docs/json/core/src/pages/404.json
deleted file mode 100644
index 61f8ff1c4..000000000
--- a/.autodoc/docs/json/core/src/pages/404.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "404.tsx",
- "filePath": "core/src/pages/404.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/404.tsx",
- "summary": "The code above defines a React component called `NotFound` that renders a custom 404 error page. The purpose of this component is to provide a user-friendly message to the user when they try to access a page that does not exist. \n\nThe component uses the `Link` component from the `next/link` library to create a link to the homepage of the website. The `Link` component is used to create client-side navigation between pages, which is faster than traditional server-side navigation. \n\nThe `NotFound` component is designed to be used in a larger project, such as a website or web application, where it can be imported and used whenever a user tries to access a page that does not exist. By using this component, developers can provide a consistent and user-friendly experience to their users when they encounter a 404 error. \n\nHere is an example of how the `NotFound` component can be used in a larger project:\n\n```\nimport NotFound from './components/NotFound';\n\nfunction App() {\n return (\n Connect to your wallet
\n\n \n \n \n \n
\n );\n}\n\nexport default App;\n```\n\nIn this example, the `NotFound` component is used as the fallback route in a `Switch` component that defines the routes for the website. If the user tries to access a page that does not exist, the `NotFound` component will be rendered instead. \n\nOverall, the `NotFound` component is a useful tool for providing a better user experience in a larger project by handling 404 errors in a consistent and user-friendly way.",
- "questions": "1. What is the purpose of the `Link` import from \"next/link\"?\n \n The `Link` import is used to create a hyperlink to the homepage in the `NotFound` component.\n\n2. What is the significance of the `flex` and `items-center` classes in the `div` element?\n \n The `flex` class is used to create a flexible container for the child elements, while the `items-center` class is used to center the child elements horizontally and vertically within the container.\n\n3. Why is the `NotFound` component exported as the default export?\n \n The `NotFound` component is exported as the default export so that it can be imported and used in other parts of the `zoo` project without needing to specify a specific name for the import.",
- "checksum": "10955cecc2b3ff560b9fd1b21ba61faf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/_app.json b/.autodoc/docs/json/core/src/pages/_app.json
deleted file mode 100644
index 13865ec82..000000000
--- a/.autodoc/docs/json/core/src/pages/_app.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "_app.tsx",
- "filePath": "core/src/pages/_app.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/_app.tsx",
- "summary": "The code is the entry point for the Zoo project. It imports various dependencies and sets up the application's global state and providers. The code exports a function called MyApp that takes in an object with two properties: Component and pageProps. The Component property is a Next.js component that is rendered by MyApp, and pageProps are the initial props that are passed to the Component.\n\nThe code sets up various providers such as the ThemeProvider, I18nProvider, ReduxProvider, and SubgraphProvider. These providers are used to manage the application's state and provide context to the components. The code also sets up a PersistGate component that wraps the entire application. The PersistGate component is used to persist the application's state across page reloads.\n\nThe code initializes Google Analytics and sets up listeners for page views and errors. It also initializes the Lingui translation library and loads the translations for the current locale.\n\nThe code defines a GlobalHooks component that is used to conditionally activate the user's wallet connector based on the current chainId. The code also defines a Provider component that is used to conditionally set a provider to be hoisted per page. Similarly, the code defines a Layout component that is used to conditionally set a layout to be hoisted per page. Finally, the code defines a Guard component that is used to conditionally set a guard to be hoisted per page.\n\nThe code renders the Component passed to MyApp wrapped in various providers and components. It also renders a NextNProgress component that displays a progress bar at the top of the page when navigating between pages.",
- "questions": "1. What is the purpose of the `zoo` project?\n- The purpose of the `zoo` project is not explicitly stated in this code file.\n\n2. What libraries and frameworks are being used in this code?\n- This code is using several libraries and frameworks, including Next.js, React, Redux, Apollo Client, Lingui, and React Toastify.\n\n3. What is the role of the `MyApp` function in this code?\n- The `MyApp` function is the main component that sets up the application's providers, layouts, and guards. It also initializes various hooks and listeners, and renders the main component passed in as a prop.",
- "checksum": "86a086309ca449f545b388fc3b733b61"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/_document.json b/.autodoc/docs/json/core/src/pages/_document.json
deleted file mode 100644
index eadf97ac1..000000000
--- a/.autodoc/docs/json/core/src/pages/_document.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "_document.tsx",
- "filePath": "core/src/pages/_document.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/_document.tsx",
- "summary": "The code is a React component that extends the `Document` class from the Next.js framework. It is responsible for rendering the HTML document that is sent to the client when a user requests a page from the server. \n\nThe `MyDocument` component overrides the `render` method of the `Document` class to customize the HTML output. It returns an HTML document that includes a `head` and `body` section. The `head` section includes a link to a favicon and a manifest file. The `body` section includes a `Main` component and a `NextScript` component. \n\nThe `Main` component is a placeholder for the main content of the page, which is rendered by the Next.js framework. The `NextScript` component includes scripts that are required by Next.js to enable client-side rendering and other features.\n\nThe `MyDocument` component also includes three external JavaScript files that are loaded by the HTML document. Two of these files are from the Babylon.js library, which is used for 3D rendering in web applications. The third file is `a.js`, which is a custom JavaScript file that is specific to the project.\n\nThe `MyDocument` component also includes a static method called `getInitialProps`. This method is used by Next.js to fetch data that is required to render the page. In this case, the method simply calls the `getInitialProps` method of the `Document` class and returns the result.\n\nOverall, the `MyDocument` component is an important part of the Next.js framework that is responsible for rendering the HTML document that is sent to the client. It can be customized to include additional scripts, styles, and metadata that are required by the application.",
- "questions": "1. What is the purpose of the `ServerStyleSheet` import and how is it used in this code?\n- The `ServerStyleSheet` import is used to collect styles from the rendered components and generate a stylesheet. It is used in the `getInitialProps` method to wrap the `App` component and collect its styles.\n\n2. What is the purpose of the commented out `getInitialProps` method and how does it differ from the existing one?\n- The commented out `getInitialProps` method is an alternative implementation that uses `ServerStyleSheet` to collect styles and add them to the `initialProps` object. It differs from the existing one in that it returns a modified `initialProps` object with the collected styles.\n\n3. What is the purpose of the Babylon.js scripts included in the `render` method?\n- The Babylon.js scripts are used to load the Babylon.js library and its loaders, as well as a custom script `a.js`. It is unclear what `a.js` does, but it is likely related to using Babylon.js for 3D graphics or animation in the application.",
- "checksum": "c5c0ceefc64165a7228b4126f10ab967"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/_error.json b/.autodoc/docs/json/core/src/pages/_error.json
deleted file mode 100644
index 5f8ce664e..000000000
--- a/.autodoc/docs/json/core/src/pages/_error.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "_error.js",
- "filePath": "core/src/pages/_error.js",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/_error.js",
- "summary": "The code is a custom error component for a Next.js application that utilizes the Sentry error tracking service. The purpose of this component is to handle errors that occur during the rendering of a page and to log them to Sentry for debugging purposes. \n\nThe `MyError` component takes in three props: `statusCode`, `hasGetInitialPropsRun`, and `err`. If `hasGetInitialPropsRun` is false and `err` is not null, it means that `getInitialProps` was not called due to a known issue with Next.js. In this case, the error is captured by Sentry and returned. Otherwise, the component simply renders the `NextErrorComponent` with the given `statusCode`.\n\nThe `getInitialProps` method is used to fetch data for a page before it is rendered. In this case, it is used to capture errors that occur during the rendering of the error page itself. If the `statusCode` is 404, the method returns early without logging the error to Sentry. Otherwise, it checks if `err` is not null, which means that an error occurred during the rendering of the page. In this case, the error is captured by Sentry and flushed to the server. If `err` is null, it means that `getInitialProps` was called without any information about what the error might be. This is unexpected and may indicate a bug in Next.js, so the error is logged to Sentry for debugging purposes.\n\nThis component can be used in a Next.js application to handle errors that occur during the rendering of a page and to log them to Sentry for debugging purposes. To use this component, simply import it and use it as the default error component in the `_app.js` file:\n\n```javascript\nimport MyError from '../path/to/MyError';\n\nfunction MyApp({ Component, pageProps }) {\n return \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `useEffect` hook in this code?\n \n The `useEffect` hook is used to trigger the `fadeInFromLeft` and `fadeInFromRight` animations on the `getStartedContentRef` and `getStartedImageRef` elements respectively, when the component mounts.\n\n2. What is the significance of the `ref` attributes on the `div` elements?\n \n The `ref` attributes are used to create references to the `getStartedContentRef` and `getStartedImageRef` elements, which are then passed to the `fadeInFromLeft` and `fadeInFromRight` animation functions respectively.\n\n3. What is the purpose of the `Image` component from the `next/image` library?\n \n The `Image` component is used to display an image with optimized performance and user experience, by automatically optimizing the image size and format based on the device and screen size.",
- "checksum": "9f2a6cde9e7f85bb4e7773462b69974c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/animal-info/index.json b/.autodoc/docs/json/core/src/pages/animal-info/index.json
deleted file mode 100644
index e57e3504f..000000000
--- a/.autodoc/docs/json/core/src/pages/animal-info/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/animal-info/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/animal-info/index.tsx",
- "summary": "The code above is a React component that renders a section containing information about animals. The component imports the AnimalFamilyInfo component, which is responsible for rendering the information about each animal. It also imports the animals.json file, which contains an array of objects with information about each animal.\n\nThe AnimalInfo component maps over the animals array and renders an AnimalFamilyInfo component for each animal. The AnimalFamilyInfo component receives the animal's name, image, and description as props and renders them in a specific format. The animal's name is rendered as a heading, the image is displayed using the next/image component, and the description is split into a heading and a paragraph.\n\nThe AnimalInfo component also renders a heading that reads \"Our Animal Family\" above the list of animals. The entire section is styled using Tailwind CSS classes.\n\nThis component can be used in a larger project that requires a section displaying information about animals. The component can be easily customized by modifying the AnimalFamilyInfo component or the animals.json file. For example, additional properties can be added to the animals.json file to include more information about each animal, such as their habitat, diet, or lifespan. The AnimalFamilyInfo component can also be modified to display this additional information. \n\nHere is an example of how the AnimalInfo component can be used in a larger project:\n\n```\nimport React from \"react\";\nimport AnimalInfo from \"./components/AnimalInfo\";\n\nconst App = () => {\n return (\n \n
\n );\n};\n\nexport default App;\n```\n\nIn this example, the AnimalInfo component is imported and rendered below a heading that reads \"Welcome to the Zoo!\". The AnimalInfo component will render a section containing information about the animals in the zoo.",
- "questions": "1. What is the purpose of the `AnimalFamilyInfo` component?\n - The `AnimalFamilyInfo` component is imported from a file located at `../../components/AnimalInfo` and is used to render information about each animal in the `animals` array.\n\n2. Where is the `animals` array coming from?\n - The `animals` array is imported from a file located at `../../animals.json`.\n\n3. What is the purpose of the `Image` component imported from \"next/image\"?\n - It is unclear from this code snippet what the purpose of the `Image` component is, as it is not used in the code. It is possible that it is used elsewhere in the project.",
- "checksum": "75fbc22c3054422b60f6ae7688c131c9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/animal-list/index.json b/.autodoc/docs/json/core/src/pages/animal-list/index.json
deleted file mode 100644
index 5d178a329..000000000
--- a/.autodoc/docs/json/core/src/pages/animal-list/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/animal-list/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/animal-list/index.tsx",
- "summary": "The code is a React component that renders a list of animal NFTs (non-fungible tokens) with 3D models and images. The component imports the AnimalFamilyInfo component, which is responsible for rendering the details of a selected animal. It also imports the Image component from Next.js, which is used to display the animal images, and the Link component, which is used to create links to the animal detail pages.\n\nThe component uses the animalFamilyData array to render the list of animals. Each animal object in the array contains the following properties: id, cameraZ, upLimit, lowLimit, usdz, glb, usdz_baby, glb_baby, usdz_teen, glb_teen, image, gif, name, and slug. These properties are used to render the 3D models, images, and names of the animals.\n\nThe component also uses the useGif hook from the GifContext to determine whether to display the 3D models or the images of the animals. If the gifMode is set to \"gif\", the component renders the 3D models using the ModelViewer component. Otherwise, it renders the images using the Image component.\n\nWhen an animal is clicked, the handleActive function is called, which sets the animalFilter state to an array containing the selected animal. This state is used to render the AnimalFamilyInfo component, which displays the details of the selected animal.\n\nOverall, this component is a key part of the zoo project, as it allows users to view and interact with the animal NFTs. It can be used in conjunction with other components to create a complete user interface for the project. For example, it can be used in combination with the AnimalFamilyInfo component to create a detailed view of each animal.",
- "questions": "1. What is the purpose of the `useEffect` hook in this code?\n \n The `useEffect` hook is used to modify the `animalsModified` state by adding a copy of the first animal in the `animals` array. This is done once when the component mounts.\n\n2. What is the purpose of the `ModelViewer` component and why is it commented out?\n \n The `ModelViewer` component is used to render a 3D model of an animal using the `usdz` and `glb` files provided in the `animalFamilyData` array. It is commented out because it is dynamically imported using the `dynamic` function, which allows it to be loaded only when needed and not during server-side rendering.\n\n3. What is the purpose of the `animalFilter` and `animalsModified` states?\n \n The `animalFilter` state is used to filter the `animalFamilyData` array based on the selected animal, while the `animalsModified` state is used to modify the `animals` array by adding a copy of the first animal.",
- "checksum": "ea8ada5a0cac223c7f63c672c71dd186"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/api/hello.json b/.autodoc/docs/json/core/src/pages/api/hello.json
deleted file mode 100644
index ed42a9c47..000000000
--- a/.autodoc/docs/json/core/src/pages/api/hello.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hello.ts",
- "filePath": "core/src/pages/api/hello.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/api/hello.ts",
- "summary": "This code is an API route handler for a Next.js project. It imports the `NextApiRequest` and `NextApiResponse` types from the `next` module. The `handler` function takes in a request object of type `NextApiRequest` and a response object of type `NextApiResponse`. The `Data` type is defined as an object with a single property `name` of type string.\n\nWhen a request is made to this API route, the `handler` function sends a JSON response with a status code of 200 and a data object containing the name \"John Doe\". This code can be used to create a simple API endpoint that returns a static response.\n\nFor example, if this code is saved in a file called `api/hello.ts` in a Next.js project, it can be accessed at the URL `/api/hello`. When a GET request is made to this URL, the response will be a JSON object with the name \"John Doe\".\n\n```typescript\n// Example usage of the API route\nfetch('/api/hello')\n .then(response => response.json())\n .then(data => console.log(data.name)) // Output: \"John Doe\"\n```\n\nThis code can be extended to handle more complex API requests and responses by modifying the `Data` type and the logic in the `handler` function.",
- "questions": "1. What is the purpose of this code and what does it do?\n This code is an API route handler for a Next.js project. It receives a request and responds with a JSON object containing a name field set to 'John Doe'.\n\n2. What is the significance of the 'Data' type and how is it used?\n The 'Data' type is a TypeScript interface that defines the shape of the response object. It specifies that the response should have a 'name' field of type string. This type is then used as the generic type parameter for the NextApiResponse interface.\n\n3. Are there any required parameters for the handler function?\n Yes, the handler function requires two parameters: a NextApiRequest object representing the incoming request, and a NextApiResponse object with a generic type parameter of Data representing the response to be sent.",
- "checksum": "d19678cd360347ffc77d92326d311e1a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/api/metadata/[type].json b/.autodoc/docs/json/core/src/pages/api/metadata/[type].json
deleted file mode 100644
index b0bb0826f..000000000
--- a/.autodoc/docs/json/core/src/pages/api/metadata/[type].json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "[type].ts",
- "filePath": "core/src/pages/api/metadata/[type].ts",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/api/metadata/[type].ts",
- "summary": "This code is a Next.js API route that returns metadata for the Zoo project. The metadata object contains information about the project, such as its name, description, and external URL. The handler function is an asynchronous function that takes in a request and response object and returns the metadata object as a JSON response. \n\nThe code also uses the withSentry higher-order function from the @sentry/nextjs library to add error tracking to the API route. This means that any errors that occur in the handler function will be tracked by Sentry, a popular error tracking service. \n\nThe commented out code suggests that this API route may have been intended to handle different types of requests based on the query parameter \"type\". However, this functionality is not currently implemented and the handler function simply returns the metadata object. \n\nThis code can be used in the larger Zoo project to provide metadata about the project to other parts of the application or to external services. For example, the external_url property in the metadata object could be used to link to the Zoo project's website or to a specific page within the website. \n\nHere is an example of how this API route could be used in a Next.js application:\n\n```javascript\nimport React from 'react'\nimport Head from 'next/head'\n\nconst ZooPage = ({ metadata }) => {\n return (\n <>\n \n Welcome to the Zoo!
\n{metadata.name}
\n{metadata.description}
\n Visit Zoo\n \n )\n}\n\nexport async function getStaticProps() {\n const res = await fetch('/api/metadata')\n const metadata = await res.json()\n return {\n props: {\n metadata\n }\n }\n}\n\nexport default ZooPage\n```\n\nIn this example, the ZooPage component fetches the metadata from the /api/metadata API route and uses it to populate the page's title, description, and Open Graph tags. The metadata is also used to display the project's name and description on the page, as well as to provide a link to the project's external URL.", - "questions": "1. What is the purpose of the `withSentry` function imported from `@sentry/nextjs`?\n - The `withSentry` function is likely used to add Sentry error tracking to the `handler` function.\n\n2. What is the purpose of the commented out code related to `req.query.type` and the switch statement?\n - It is unclear without more context, but it appears that the code may have been used to handle different types of requests based on the `type` parameter in the query string.\n\n3. What is the expected output of the `handler` function?\n - The `handler` function is expected to respond to requests with a JSON object containing metadata about the project, including a name, description, and potentially other properties.", - "checksum": "7c0ce28f16c50e411d50ea0aa9501082" -} \ No newline at end of file diff --git a/.autodoc/docs/json/core/src/pages/api/moonpay.json b/.autodoc/docs/json/core/src/pages/api/moonpay.json deleted file mode 100644 index 3220e57a7..000000000 --- a/.autodoc/docs/json/core/src/pages/api/moonpay.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "moonpay.ts", - "filePath": "core/src/pages/api/moonpay.ts", - "url": "zoo-labs/zoo/blob/master/core/src/pages/api/moonpay.ts", - "summary": "This code defines an API route for the Next.js project that returns an HTML iframe containing a MoonPay button. The MoonPay button is imported from a component called `MoonpayBtn` and is rendered within the `MonComp` string. The `allow` attribute of the iframe specifies the permissions required for the iframe to function properly, including accelerometer, autoplay, camera, gyroscope, and payment. The `src` attribute of the iframe specifies the URL of the MoonPay sandbox environment, along with an API key and a currency code. \n\nWhen a request is made to this API route, the `moonpay` function is executed. The function extracts the `address` property from the request body and uses it to construct the `MonComp` string. The function then sends the `MonComp` string as the response to the request. \n\nThis code can be used in the larger project to provide a way for users to purchase cryptocurrency using MoonPay. The `MoonpayBtn` component can be customized to fit the design of the project, and the `moonpay` API route can be integrated into the project's payment flow. For example, a user could click on a \"Buy Crypto\" button in the project's UI, which would trigger a request to the `moonpay` API route. The `moonpay` function would then return the HTML iframe containing the MoonPay button, which the user could interact with to complete the purchase. \n\nExample usage:\n\n```javascript\nimport MoonpayBtn from \"components/Moonpaybtn/MoonpayBtn\";\n\nfunction BuyCrypto() {\n const handlePurchase = async () => {\n const response = await fetch(\"/api/moonpay\", {\n method: \"POST\",\n body: JSON.stringify({ address: \"0x123abc\" }),\n });\n const html = await response.text();\n document.getElementById(\"moonpay-container\").innerHTML = html;\n };\n\n return (\n\n \n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `MoonPayBtn` import?\n - A smart developer might ask what functionality the `MoonPayBtn` component provides and how it is used in the `moonpay` function.\n\n2. What is the purpose of the `allow` attribute in the `iframe` element?\n - A smart developer might ask why the `allow` attribute is set to specific values and what implications this has for the `iframe` content.\n\n3. Why are the commented out code blocks included in the file?\n - A smart developer might ask why the code blocks are commented out and if they are intended to be used in the future or if they are just remnants of previous development.",
- "checksum": "b23cdca758444f22654d1960671b9801"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/api/subscribe.json b/.autodoc/docs/json/core/src/pages/api/subscribe.json
deleted file mode 100644
index 34f0f4c15..000000000
--- a/.autodoc/docs/json/core/src/pages/api/subscribe.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "subscribe.ts",
- "filePath": "core/src/pages/api/subscribe.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/api/subscribe.ts",
- "summary": "This code is an API route that allows users to subscribe to a Mailchimp mailing list. The `mailchimp_marketing` library is imported and used to set the configuration for the Mailchimp API. The `apiKey` and `server` values are set to allow for authentication and to specify which Mailchimp server to use. \n\nThe `subscribe` function is an asynchronous function that takes in a `req` (request) and `res` (response) object. The `req.body` object is destructured to obtain the email address of the user who wants to subscribe to the mailing list. \n\nThe `mailchimp.lists.addListMember` method is then called with the email address and a status of \"subscribed\" to add the user to the mailing list. If the request is successful, a JSON response with a status of 200 is returned with the `SignUp` object. If there is an error, a JSON response with a status of 500 is returned with an error message.\n\nThis code can be used in a larger project to allow users to subscribe to a mailing list for updates or newsletters. For example, a website for a zoo could use this code to allow visitors to subscribe to a mailing list for updates on new exhibits or events. \n\nExample usage:\n```\n// Make a POST request to the API route with the email address in the request body\nconst response = await fetch('/api/subscribe', {\n method: 'POST',\n body: JSON.stringify({ email: 'example@email.com' }),\n headers: {\n 'Content-Type': 'application/json'\n }\n});\n\n// Handle the response\nif (response.ok) {\n const data = await response.json();\n console.log(data.SignUp);\n} else {\n console.error('Failed to subscribe:', response.status);\n}\n```",
- "questions": "1. What is the purpose of this code?\n - This code is an API route that subscribes an email address to a Mailchimp list using the Mailchimp API.\n\n2. What API key and server are being used to connect to Mailchimp?\n - The code is using an API key of \"2b3731e0fce301485c1f563c4463c0d8-us14\" and a server of \"us14\" to connect to Mailchimp.\n\n3. What happens if there is an error while adding a list member?\n - If there is an error while adding a list member, the code will return a 500 status code and a JSON object with an \"error\" key and value of \"failed to load data\".",
- "checksum": "c25a9915d2699e488456e32ab3d6531c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/artboard.json b/.autodoc/docs/json/core/src/pages/artboard.json
deleted file mode 100644
index 2a50e8b89..000000000
--- a/.autodoc/docs/json/core/src/pages/artboard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "artboard.tsx",
- "filePath": "core/src/pages/artboard.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/artboard.tsx",
- "summary": "The `ArtBoard` component is a React functional component that renders a UI for displaying auction information for an item called \"Egg\". The component imports the `Image` component from the `next/image` module. The `nav` constant is an array of strings that represent navigation links. The component returns a JSX expression that renders the UI.\n\nThe UI consists of two sections, each displaying information about the \"Egg\" item. Each section contains an image of the egg, the name of the item, the owner's address, the reserve price, the current bid, and the time remaining for the auction. The UI also includes two buttons, one for editing the auction and the other for viewing the item.\n\nThe `Image` component is used to display the egg images. It takes in the `src`, `alt`, `width`, and `height` props. The `nav` array is mapped over to create a series of navigation links. The `div` elements with the `className` of `flex`, `items-center`, and `justify-center` are used to center the egg images. The `div` elements with the `className` of `flex`, `justify-between`, and `items-center` are used to display the owner's address and the reserve price. The `div` element with the `className` of `border`, `rounded-[14px]`, and `bg-[#1F2030]` is used to display the current bid and the time remaining for the auction. The `button` elements are used to provide interactivity to the UI.\n\nThis component can be used in a larger project that involves displaying auction information for various items. The `ArtBoard` component can be reused for each item, with the item's information passed in as props. The component can also be modified to include additional information or to change the styling of the UI. For example, the `Image` component can be replaced with a custom component that displays a 3D model of the item. The `button` elements can be modified to trigger different actions, such as placing a bid or adding the item to a watchlist.",
- "questions": "1. What is the purpose of the `Image` import from \"next/image\"?\n- The `Image` import is used to display images on the webpage with optimized performance.\n\n2. What is the significance of the `nav` array and how is it used in the code?\n- The `nav` array contains the navigation links \"My Auctions\", \"My Bids\", and \"My Wallet\", which are displayed as clickable text on the webpage.\n\n3. What is the purpose of the two sections of code that are almost identical, except for the image file being used?\n- The two sections of code are displaying two different images of an \"Egg\" item, likely for showcasing different variations or styles of the item.",
- "checksum": "8e2c1eaad4ab4a8ca284c753cadebd3b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/blog/index.json b/.autodoc/docs/json/core/src/pages/blog/index.json
deleted file mode 100644
index e73af279d..000000000
--- a/.autodoc/docs/json/core/src/pages/blog/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/blog/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/blog/index.tsx",
- "summary": "The `Blog` component is responsible for rendering the blog page of the Zoo project. It imports several dependencies such as `React`, `useState`, `useEffect`, `Image`, and `Link`. It also imports two custom components, `Article` and `BlogCards`, and an animation function, `fadeInOnScroll`.\n\nThe component defines two arrays, `news` and `guides`, which contain objects representing blog posts. Each object has properties such as `name`, `image`, `link`, `date`, `writtenBy`, and `isNew`. These arrays are then concatenated and sorted by date in descending order to create a new array called `all`.\n\nThe `Blog` component renders a hero section with a title and a description, followed by a section with two columns. The first column displays an image, while the second column displays a blog post with a title, a short description, and a link to read the full story. This section is followed by a tab section that allows the user to filter the blog posts by category. The categories are \"All\", \"News\", and \"Zoo Guide\". Finally, the component renders a section that displays the blog posts based on the selected category.\n\nThe `useEffect` hook is used to apply the `fadeInOnScroll` animation to the hero section when the component mounts.\n\nOverall, the `Blog` component provides a user-friendly interface for browsing and reading blog posts related to the Zoo project. It allows users to filter posts by category and provides a visually appealing layout for displaying the posts. Below is an example of how the `Blog` component can be used in the larger project:\n\n```jsx\nimport Blog from 'zoo/Blog';\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `Blog` component?\n- The `Blog` component is responsible for rendering the Zoo blog page, which includes a hero section, tabs section, and articles map.\n\n2. What is the significance of the `all` variable?\n- The `all` variable is an array that contains all the articles from the `news` and `guides` arrays, sorted by date in descending order. It is used to display all articles when the \"All\" tab is selected.\n\n3. What is the purpose of the `fadeInOnScroll` function?\n- The `fadeInOnScroll` function is an animation function that fades in an element when it comes into view during scrolling. It is used to animate the hero section of the blog page.",
- "checksum": "e952b1094c1179034e43e147cf07880c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/coming-soon/index.json b/.autodoc/docs/json/core/src/pages/coming-soon/index.json
deleted file mode 100644
index 3416a697f..000000000
--- a/.autodoc/docs/json/core/src/pages/coming-soon/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/coming-soon/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/coming-soon/index.tsx",
- "summary": "This code defines a React component called `ComingSoon` that displays a \"Coming Soon\" message and a link to the homepage. The component imports the `React` and `useEffect` modules from the `react` package, as well as the `Link` component from the `next/link` package. It also imports an `fadeInOnScroll` function from an `animation` module.\n\nThe `ComingSoon` component renders a `div` element with two child elements: a `div` element and a `p` element. The `div` element has the class `max-w-7xl mx-auto py-20 px-4` and contains a child `div` element with the classes `flex`, `flex-col`, `items-center`, and `justify-center`, as well as a `ref` attribute set to a `comingSoonRef` object. The `comingSoonRef` object is created using the `useRef` hook from the `React` module.\n\nThe child `div` element contains two child elements: an `h1` element and a `p` element. The `h1` element has the classes `text-4xl`, `lg:text-[44px]`, `leading-[3rem]`, `lg:leading-4`, `font-bold`, and `mb-8`, and displays the text \"Coming Soon\". The `p` element contains a `Link` component that displays a link to the homepage.\n\nThe `useEffect` hook is used to call the `fadeInOnScroll` function with the `comingSoonRef.current` object as an argument. This causes the `comingSoonRef` element to fade in when it is scrolled into view.\n\nThis component can be used in a larger project to display a \"Coming Soon\" message and a link to the homepage. It also demonstrates how to use the `useRef` and `useEffect` hooks in a React component, as well as how to import and use external modules. An example usage of this component might look like:\n\n```\nimport ComingSoon from \"./ComingSoon\";\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `fadeInOnScroll` function imported from \"animation\"?\n- The `fadeInOnScroll` function is used to animate the `comingSoonRef` element when it is scrolled into view.\n\n2. What is the significance of the `comingSoonRef` variable being assigned to `React.useRef()`?\n- The `comingSoonRef` variable is being used to reference the `div` element that contains the \"Coming Soon\" text and the link to the homepage. This allows the `fadeInOnScroll` function to target and animate this specific element.\n\n3. What is the purpose of the `useEffect` hook in this component?\n- The `useEffect` hook is used to call the `fadeInOnScroll` function once when the component mounts, which sets up the animation for the `comingSoonRef` element.",
- "checksum": "cca8123e41bb542d74950283f7e3490a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/compare-yield/index.json b/.autodoc/docs/json/core/src/pages/compare-yield/index.json
deleted file mode 100644
index cb4629315..000000000
--- a/.autodoc/docs/json/core/src/pages/compare-yield/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/compare-yield/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/compare-yield/index.tsx",
- "summary": "The `CompareYield` component is responsible for rendering a table that compares the yield opportunities of different NFT animals in the ZOO project. The component imports the `Image` component from the `next/image` library, the `useActiveWeb3React` hook from the `hooks` module, and the `Web3Status` component from the `components` directory. It also imports the `i18n` object and the `t` function from the `@lingui/core` and `@lingui/macro` libraries respectively.\n\nThe component defines an array of `nftData` objects that represent different NFT animals in the ZOO project. Each object has an `id`, `name`, `dailyYield`, `medium`, and `large` property. The `dailyYield`, `medium`, and `large` properties are boolean values that indicate whether the animal has a daily yield, medium size, and large size respectively.\n\nThe `CompareYield` component returns a JSX element that contains a table with the NFT animal data. The table has a header row that displays the column names, and subsequent rows that display the NFT animal data. The table is generated using the `map` function to iterate over the `nftData` array and generate a row for each object.\n\nThe component also renders a header that displays the title and subtitle of the table. Additionally, the component renders three buttons that link to external pages. The first button links to the PancakeSwap page for the ZOO token, the second button links to the ZOO marketplace page, and the third button duplicates the second button.\n\nThe `useActiveWeb3React` hook is used to retrieve the user's account, chain ID, and library. These values are not used in the component, but they may be used in other parts of the project.\n\nOverall, the `CompareYield` component provides a user-friendly way to compare the yield opportunities of different NFT animals in the ZOO project. It also provides links to external pages that are relevant to the project.",
- "questions": "1. What is the purpose of the `nftData` array?\n- The `nftData` array contains information about different NFT animals, including their names and various attributes such as daily yield, medium, and large.\n\n2. What is the role of the `useActiveWeb3React` hook?\n- The `useActiveWeb3React` hook is used to retrieve information about the user's active Web3 connection, including their account, chain ID, and library.\n\n3. What is the purpose of the `CompareYield` component?\n- The `CompareYield` component displays a table comparing the yield opportunities of different NFT animals, as well as buttons for buying $ZOO and accessing the marketplace.",
- "checksum": "90fa3a98eb1503b591c18a74618d1d41"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/create-auction/index.json b/.autodoc/docs/json/core/src/pages/create-auction/index.json
deleted file mode 100644
index 09255cfa3..000000000
--- a/.autodoc/docs/json/core/src/pages/create-auction/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/create-auction/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/create-auction/index.tsx",
- "summary": "The `CreateAuctionPage` component is a React component that renders a form for creating an auction. It imports several hooks from different modules to manage state and dispatch actions. \n\nThe component uses the `useState` hook to manage the state of four input fields: `tokenId`, `duration`, `reservedPrice`, and `curatorFeePercentage`. It also uses the `useCreateAuction` hook to create an auction, the `useDispatch` hook to dispatch the created auction, and the `useActiveWeb3React` hook to get the current user's account. \n\nWhen the user submits the form, the `onSubmit` function is called. This function prevents the default form submission behavior and converts the input values to numbers. It then dispatches the `createAuction` action with the converted values. \n\nThe component renders a form with four input fields and a submit button. The input fields are controlled components that update the state when the user types in them. The submit button triggers the `onSubmit` function when clicked. \n\nThis component can be used in a larger project that involves creating and managing auctions. It provides a simple and reusable form for creating auctions. Developers can customize the form by adding or removing input fields or modifying the `onSubmit` function to perform additional actions. \n\nExample usage:\n\n```jsx\nimport CreateAuctionPage from 'zoo/CreateAuctionPage';\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `useCreateAuction` hook and how is it used in this code?\n - The `useCreateAuction` hook is likely a custom hook that provides functionality for creating an auction. It is used in the `onSubmit` function to dispatch an action that creates an auction with the inputted values.\n2. What is the purpose of the `useActiveWeb3React` hook and how is it used in this code?\n - The `useActiveWeb3React` hook is likely a custom hook that provides access to the active Web3 React context. It is used to retrieve the current account, which is logged to the console for debugging purposes.\n3. What is the purpose of the `parseInt` function call in the `onChange` function for the `curatorFeePercentage` input?\n - The `parseInt` function call is used to convert the input value to an integer before setting the state with `setCuratorFeePercentage`. This is likely done to ensure that the value is a valid number and can be used in calculations later on.",
- "checksum": "6919c14e32051010ac75f1c7576e05ba"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/dao/index.json b/.autodoc/docs/json/core/src/pages/dao/index.json
deleted file mode 100644
index 16237a654..000000000
--- a/.autodoc/docs/json/core/src/pages/dao/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/dao/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/dao/index.tsx",
- "summary": "The `Voting` component is a React component that renders a page for displaying and interacting with proposals in a DAO (decentralized autonomous organization). The component imports various dependencies, including `ProposalsTable` (a custom component for rendering a table of proposals), `useSelector` (a hook for accessing the Redux store), and several UI components from the Material-UI library.\n\nThe component defines several state variables using the `useState` hook, including `proposalState` (which represents the current state of proposals being displayed), `proposalType` (which represents the type of proposals being displayed), and `_proposals` (which represents the list of proposals being displayed). The component also defines a `getAllProposals` function using the `useGetAllProposals` hook, which retrieves all proposals from the DAO.\n\nThe component renders a page with two main sections: a sidebar and a main content area. The sidebar contains links to other pages in the DAO, while the main content area displays a table of proposals and various filtering options. The table of proposals is rendered using the `ProposalsTable` component, which takes in the list of proposals as a prop and filters them based on the current state and type.\n\nThe component also includes several event handlers for updating the state variables based on user input. For example, the `setProposalState` function is called when the user selects a new proposal state from a dropdown menu, and the `setProposalType` function is called when the user selects a new proposal type from a different dropdown menu. The component also includes a button for refreshing the list of proposals, which calls the `getAllProposals` function and displays a success message using the `addPopup` function.\n\nOverall, the `Voting` component provides a user-friendly interface for browsing and interacting with proposals in a DAO. By allowing users to filter proposals by state and type, the component makes it easy to find and participate in relevant proposals. The component could be used as part of a larger project for managing a DAO, alongside other components for creating and voting on proposals.",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code is for a project called \"zoo\" and it appears to be related to a DAO voting system. It imports various components and hooks, sets up state variables, and renders a UI for displaying proposals and allowing users to filter and refresh them.\n\n2. What external libraries or dependencies does this code rely on?\n- This code relies on several external libraries and dependencies, including Next.js, React, Redux, MUI, and various custom hooks and components.\n\n3. What is the significance of the commented-out code and why was it commented out?\n- The commented-out code appears to be an alternative way of rendering the proposal filtering options, using a different type of select element. It was likely commented out because the MUI select element was chosen as the preferred option instead.",
- "checksum": "18af2e456049060398fa1ba3e5c14141"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/dao/proposal/create/index.json b/.autodoc/docs/json/core/src/pages/dao/proposal/create/index.json
deleted file mode 100644
index e89f4a6b7..000000000
--- a/.autodoc/docs/json/core/src/pages/dao/proposal/create/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/dao/proposal/create/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/dao/proposal/create/index.tsx",
- "summary": "This code is a React component that renders a dynamic import of the `CreateProposal` component from the `components/Voting` directory. The `ssr` option is set to `false`, which means that this component will not be server-side rendered. The component is then wrapped in a higher-order component that sets the layout to `DaoLayout`.\n\nThe purpose of this code is to provide a way for users to create proposals for voting within a DAO (decentralized autonomous organization). The `CreateProposal` component likely contains a form where users can input the details of their proposal, such as the title, description, and voting options. The `MakeProposals` component then renders this form within the context of the `DaoLayout`, which provides a consistent visual style and navigation for the entire DAO application.\n\nThis component can be used in the larger project by being included in a page or route that is accessible to users who have permission to create proposals within the DAO. For example, there may be a page called `Proposals` that lists all of the current proposals and allows users to create new ones. The `MakeProposals` component could be included on this page to provide the form for creating a new proposal.\n\nHere is an example of how this component could be used in a Next.js page:\n\n```jsx\nimport MakeProposals from \"components/MakeProposals\";\n\nconst ProposalsPage = () => {\n return (\n \n
\n );\n};\n\nexport default ProposalsPage;\n```\n\nIn this example, the `MakeProposals` component is included on a page called `ProposalsPage`, which displays a heading and the `CreateProposal` form. The `DaoLayout` is automatically applied to the component, providing a consistent look and feel for the entire DAO application.",
- "questions": "1. What is the purpose of the `useEffect` hook in this code?\n - The purpose of the `useEffect` hook is not clear from this code snippet alone. It would require further context to determine its purpose.\n\n2. What is the significance of the `ssr: false` option in the `dynamic` import statement?\n - The `ssr: false` option indicates that the component being imported should not be server-side rendered, and should only be rendered on the client-side.\n\n3. What is the relationship between `MakeProposals` and `DaoLayout`?\n - `MakeProposals` is a component that uses `DaoLayout` as its layout component. This means that `DaoLayout` will be used to wrap the content of `MakeProposals`.",
- "checksum": "d15fe790204c5fe785b6a97464ff6210"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/drop/[id]/index.json b/.autodoc/docs/json/core/src/pages/drop/[id]/index.json
deleted file mode 100644
index a91678d26..000000000
--- a/.autodoc/docs/json/core/src/pages/drop/[id]/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/drop/[id]/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/drop/[id]/index.tsx",
- "summary": "The code is a React component that renders a single drop page for the Zoo project. The component imports various dependencies such as `useEffect`, `useState`, `NextComponentType`, `NextPageContext`, `AppProps`, `DropLayout`, `NullLayout`, `useRouter`, `useSelector`, `useGetAvailableEggs`, `useGetDrops`, `dynamic`, `Link`, and `Drop`. \n\nThe component fetches data from the Redux store using the `useSelector` hook and the `useGetDrops` hook. It also uses the `useRouter` hook to get the `id` parameter from the URL. The `useEffect` hook is used to fetch the drops data from the server and set the `drop` state variable. \n\nThe component renders the drop information such as the title, description, supply, minted, and floor price. It also renders the collection of items associated with the drop. The items are displayed in a grid layout and can be either a video or a 3D model. The component uses the `ModelViewer` component to render the 3D models. \n\nThe component also includes a link to the market page where users can buy the items. The link is only displayed if the `id` parameter is not equal to 100. If the `id` parameter is equal to 100, a \"Coming Soon\" message is displayed instead of the link. \n\nOverall, this component is an important part of the Zoo project as it allows users to view and buy drops. It is used in conjunction with other components and pages to provide a seamless user experience. \n\nExample usage:\n\n```jsx\nimport SingleDrop from \"path/to/SingleDrop\";\n\nconst MyComponent = () => {\n return (\n Proposals
\n\n
\n );\n};\n\nexport default MyComponent;\n```",
- "questions": "1. What is the purpose of the `useGetAvailableEggs` hook imported from `state/zoo/hooks`?\n- It is not clear from the provided code what the purpose of the `useGetAvailableEggs` hook is, as it is not used anywhere in the code. A smart developer might want to investigate further to determine if it is necessary or can be removed.\n\n2. What is the significance of the `ModelViewer` component and why is it loaded dynamically using `dynamic`?\n- The `ModelViewer` component is used to display a 3D model of an item in the collection. It is loaded dynamically using `dynamic` with `ssr` set to `false` to prevent server-side rendering, as the component relies on client-side rendering and cannot be rendered on the server.\n\n3. What is the purpose of the `activeDrop` state variable and how is it used?\n- The `activeDrop` state variable is used to keep track of which item in the collection is currently being hovered over by the user. It is used to conditionally display a \"BUY\" button for the item when it is being hovered over.",
- "checksum": "59a6ce8c23cc62878c91fa643ad0dffd"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/faqs/index.json b/.autodoc/docs/json/core/src/pages/faqs/index.json
deleted file mode 100644
index b289274c6..000000000
--- a/.autodoc/docs/json/core/src/pages/faqs/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/faqs/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/faqs/index.tsx",
- "summary": "The code defines an array of frequently asked questions (FAQs) and their corresponding answers for a project called ZOO. The FAQs cover various topics related to the ZOO project, such as its purpose, features, token, gameplay, and how to get started. The code also defines a functional component called Accordion that renders each FAQ as a collapsible item with a question and answer section. The Accordion component uses the useState hook to manage the open/closed state of each item. When a user clicks on a question, the corresponding answer is displayed or hidden depending on its current state. The code also defines another functional component called Faqs that renders a list of all the FAQs using the Accordion component. Additionally, the Faqs component includes a contact form and a message for users who need further assistance. \n\nThis code can be used as a reference for creating a FAQ section for any project. The Accordion component can be reused to render any list of collapsible items, not just FAQs. The code also demonstrates how to use the useState hook to manage state in a functional component. The Faqs component can be customized to fit the design and content needs of any project. \n\nExample usage:\n```\nimport Faqs from \"./Faqs\";\n\nfunction App() {\n return (\n \n
\n );\n}\n\nexport default App;\n```",
- "questions": "1. What is the purpose of the `Accordion` component?\n- The `Accordion` component is used to display each question and answer pair in a collapsible format, where the answer is hidden until the user clicks on the question.\n\n2. What is the significance of the `$ZOO` token in the game?\n- The `$ZOO` token is the native currency in the game and is used for various interactions such as buying NFTs, feeding animals, and investing. It also appreciates over time based on rarity, age, and gameplay.\n\n3. Where can users go for help or to interact with the community?\n- Users can join the Discord server for the project and post in the `#new-player-help` channel for assistance. They can also join the community on Discord to interact with other members. Additionally, a list of guides can be found on the project's blog.",
- "checksum": "6736296c6201785b9c2b579c428b6c4b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/global-leaderboard/[slug].json b/.autodoc/docs/json/core/src/pages/global-leaderboard/[slug].json
deleted file mode 100644
index 24299ffe0..000000000
--- a/.autodoc/docs/json/core/src/pages/global-leaderboard/[slug].json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "[slug].tsx",
- "filePath": "core/src/pages/global-leaderboard/[slug].tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/global-leaderboard/[slug].tsx",
- "summary": "The `Slug` component is a React functional component that renders a page for displaying information about a specific item in the zoo project. The component imports the `useState` and `useRouter` hooks from the `react` and `next/router` packages respectively, and the `Image` component from the `next/image` package. \n\nThe component defines a `Props` type that is an empty object and a `Slug` type that is a React functional component that takes in the `Props` type as a parameter. The component then destructures the `router.query` object to get the `slug` value and initializes a `category` state variable to 0 using the `useState` hook.\n\nThe component defines an array of `items` that contains objects representing different items in the zoo project. Each object has an `id`, `nftId`, `nftName`, `nftImg`, and `price` property. \n\nThe component then returns a JSX element that contains several nested elements. The first element is a div that contains a gradient background and three clickable links that represent different categories of items. The `category` state variable is used to determine which link is currently active. When a link is clicked, the `setCategory` function is called to update the `category` state variable.\n\nThe second element is a div that contains information about the specific item being displayed. It has a gradient background and displays the `slug` value along with other information such as the user and address associated with the item.\n\nThe third element is a div that contains information about the item's details. It has a black background and displays information such as the transaction, token ID, and token standard associated with the item.\n\nThe fourth element is a div that contains information about the item's authenticity. It has a black background and displays the price of the item in $ZOO, a link to an Etherscan transaction, and a link to view the item on IPS.\n\nThe fifth element is a div that maps over the `items` array and renders information about each item. It displays the item's image, name, description, and details. It also has a button that allows users to make an offer on the item.\n\nOverall, the `Slug` component is a reusable component that can be used to display information about any item in the zoo project. It uses state variables and hooks to allow users to navigate between different categories of items and make offers on specific items.",
- "questions": "1. What is the purpose of the `Slug` component?\n- The `Slug` component is used to display information about different NFTs and their details.\n\n2. What is the significance of the `items` array?\n- The `items` array contains information about different NFTs, including their ID, name, image, and price.\n\n3. What is the purpose of the `setCategory` function and how is it used?\n- The `setCategory` function is used to update the `category` state variable, which determines which section of the page is currently active. It is used as an event handler for clicking on different category links.",
- "checksum": "5cfa0490a7d3884bf78a2b0ad7b12d16"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/global-leaderboard/index.json b/.autodoc/docs/json/core/src/pages/global-leaderboard/index.json
deleted file mode 100644
index 43104c124..000000000
--- a/.autodoc/docs/json/core/src/pages/global-leaderboard/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/global-leaderboard/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/global-leaderboard/index.tsx",
- "summary": "The `GlobalLeaderboard` component is a React component that renders a leaderboard for a project called ZOO. The component imports `React`, `useState`, `useRouter`, and `Image` from the `react`, `next/router`, and `next/image` modules respectively. \n\nThe component uses the `useState` hook to create two state variables: `isActive` and `category`. `isActive` is initialized to `'nft-value'`, and `category` is initialized to `0`. \n\nThe component then defines a `dummyData` array that contains ten objects, each with an `id`, `name`, and `address` property. \n\nThe component returns a section element with a class of `flex`, `flex-col`, and `items-center`. Within this section, there is a div element with a class of `px-4`, `py-16`, `lg:w-4/12`, and `mx-auto`. This div contains an h1 element with a class of `text-xl`, `lg:text-2xl`, `font-bold`, `mb-4`, and `p-3`, which displays the text \"ZOO NFT Leaderboard\". \n\nBelow the h1 element, there is a div element with a class of `rounded-xl`, `w-full`, `mb-4`, and `p-0.5`. This div has a background color that is a linear gradient from `#4B31AC` to `#2703F8`. Within this div, there is another div element with a class of `flex`, `items-center`, `justify-center`, `bg-black`, `rounded-xl`, `w-full`, and `h-full`. This div contains three anchor elements that display the text \"NFT Value\", \"Top ZOO\", and \"Global Users\". The anchor element that corresponds to the current value of `category` has a background color that is a linear gradient from `#4B31AC` to `#2703F8`. When an anchor element is clicked, the `setCategory` function is called with the index of the clicked element as an argument. \n\nBelow the div with the class of `rounded-xl`, there is another div element with no class. This div contains a map function that iterates over the `dummyData` array and returns a div element for each object in the array. Each div element has a class of `mb-4`, `rounded-lg`, `p-px`, and `cursor-pointer`, and a background color that is a linear gradient from `#4B31AC` to `#2703F8`. When a div element is clicked, the `route.push` function is called with the path `/global-leaderboard/${id}` as an argument. \n\nIn summary, the `GlobalLeaderboard` component renders a leaderboard for the ZOO project. The component allows the user to switch between three categories: \"NFT Value\", \"Top ZOO\", and \"Global Users\". When a category is selected, the corresponding anchor element is highlighted. The component also displays a list of users with their name and address. When a user is clicked, the user is redirected to a page that displays more information about the user.",
- "questions": "1. What is the purpose of the `GlobalLeaderboard` component?\n- The `GlobalLeaderboard` component is used to display a leaderboard of NFT users.\n\n2. What is the purpose of the `dummyData` array?\n- The `dummyData` array is used to provide sample data for the leaderboard.\n\n3. What is the purpose of the `setCategory` function?\n- The `setCategory` function is used to update the `category` state variable when a user clicks on one of the leaderboard categories (NFT Value, Top ZOO, Global Users).",
- "checksum": "0b7cf86d17422c7c70e6793a2ab53aac"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/AnimalFamilySection.json b/.autodoc/docs/json/core/src/pages/home/AnimalFamilySection.json
deleted file mode 100644
index 429a0e98c..000000000
--- a/.autodoc/docs/json/core/src/pages/home/AnimalFamilySection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AnimalFamilySection.tsx",
- "filePath": "core/src/pages/home/AnimalFamilySection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/AnimalFamilySection.tsx",
- "summary": "This code defines a React component called `AnimalFamilySection` that displays information about animals and eggs in a zoo. The component imports several dependencies, including React, Next.js, and various custom hooks and components. \n\nThe component first defines an array of objects called `animalFamilyData`, which contains information about different animal species in the zoo. Each object contains properties such as `id`, `name`, `description`, `image`, and `gif`, which are used to display information about the animal on the page. \n\nThe component also imports a custom hook called `useGif` from a context called `GifContext`. This hook is used to determine whether to display a GIF or a 3D model of the animal on the page. \n\nThe component then defines a `useSelector` hook from the `react-redux` library, which is used to retrieve data from the Redux store. The component uses this hook to retrieve information about available eggs in the zoo. \n\nThe component also defines a custom hook called `useGetAvailableEggs`, which is used to retrieve data about available eggs from an API. This hook is called when the component mounts, using the `useEffect` hook. \n\nThe component then renders two sections: one for displaying information about available eggs, and one for displaying information about animal species. The section for displaying eggs maps over the `availableEggs` array retrieved from the Redux store and displays information about each egg, including its name, price, and an animation. \n\nThe section for displaying animal species maps over the `animalFamilyData` array and displays information about each animal, including its name, image, and a 3D model or GIF. \n\nOverall, this component provides a way to display information about animals and eggs in a zoo, and allows users to interact with this information by clicking on links and buttons. It is likely used as part of a larger application that provides additional functionality for managing and interacting with zoo data.",
- "questions": "1. What is the purpose of the `useEffect` hook in this code?\n \n The `useEffect` hook is used to call the `getAvailableEggs` function when the `zookeeper` variable changes. This is likely to update the available eggs in the `availableEggs` state variable.\n\n2. What is the purpose of the `ModelViewer` component and how is it used in this code?\n \n The `ModelViewer` component is used to display a 3D model of an animal. It is dynamically imported using `dynamic` from the `components/ModelViewer` file and is used to render the 3D model of each animal in the `animalFamilyData` array.\n\n3. What is the purpose of the `useSelector` hook and how is it used in this code?\n \n The `useSelector` hook is used to select data from the Redux store. In this code, it is used to select the `availableEggs` state variable from the `zoo` slice of the store and assign it to a variable of the same name.",
- "checksum": "7f92d599d11d8b0b669bc2fe9d44cfa4"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/BuyZooSection.json b/.autodoc/docs/json/core/src/pages/home/BuyZooSection.json
deleted file mode 100644
index 716c7e9a2..000000000
--- a/.autodoc/docs/json/core/src/pages/home/BuyZooSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BuyZooSection.tsx",
- "filePath": "core/src/pages/home/BuyZooSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/BuyZooSection.tsx",
- "summary": "The code above is a React component that renders a section of a web page for buying $Zoo, which is likely a cryptocurrency or token associated with the larger project. The component imports several functions and hooks from other files in the project, including `handleFunds` from `utils/handleFunds`, `useBuyZoo` from `state/zoo/hooks`, and `useActiveWeb3React` from `hooks`. \n\nThe `useActiveWeb3React` hook likely provides access to the user's Ethereum wallet and blockchain network information, while `useBuyZoo` is a custom hook that likely handles the logic for buying $Zoo. The `handleFunds` function is likely a utility function that handles the actual transaction of buying $Zoo using the user's wallet and the `buyZoo` function.\n\nThe `BuyZooSection` component returns a section element with a heading, paragraph, and a button for buying $Zoo. The button has an `onClick` event that calls the `handleFunds` function with the `chainId` and `buyZoo` variables as arguments. The `chainId` variable likely specifies which blockchain network the user is connected to, while `buyZoo` is the function for buying $Zoo.\n\nOverall, this component provides a user interface for buying $Zoo and utilizes other functions and hooks from the project to handle the actual transaction. It is likely used in conjunction with other components and features of the larger project to provide a seamless user experience for buying and using $Zoo. \n\nExample usage:\n\n```\nimport BuyZooSection from \"components/BuyZooSection\";\n\nconst HomePage = () => {\n return (\n Welcome to my project
\n\n
\n );\n};\n\nexport default HomePage;\n```",
- "questions": "1. What is the purpose of the `handleFunds` function being imported from `utils/handleFunds`?\n - The smart developer might wonder what the `handleFunds` function does and how it is used in the code. It is used as a callback function for the `onClick` event of the \"Buy $Zoo\" button and takes in the `chainId` and `buyZoo` as parameters.\n\n2. What is the `useBuyZoo` hook being imported from `state/zoo/hooks`?\n - The smart developer might want to know what the `useBuyZoo` hook does and how it is implemented. It is a custom hook that provides a function to buy $Zoo tokens.\n\n3. What is the purpose of the `useActiveWeb3React` hook being imported from `hooks`?\n - The smart developer might be curious about the `useActiveWeb3React` hook and how it is used in the code. It is used to get the current `chainId` from the active Web3 React context.",
- "checksum": "4010d2709ed66a485547d92efcd8cdf2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/Cards.json b/.autodoc/docs/json/core/src/pages/home/Cards.json
deleted file mode 100644
index 950e706d0..000000000
--- a/.autodoc/docs/json/core/src/pages/home/Cards.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Cards.tsx",
- "filePath": "core/src/pages/home/Cards.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/Cards.tsx",
- "summary": "The code defines a React component called `CardsSection` that renders a set of cards, each representing a different segment of a project called \"Zoo\". The `segments` array contains four objects, each with an `id`, `title`, and `description` property. The `CardsSection` component maps over the `segments` array and renders a `Card` component for each segment. \n\nEach `Card` component displays the `title` of the corresponding segment, and when clicked, expands to show the `description`. The `Card` component also has an \"add\" button that, when clicked, expands the card to show the `description`. The `Card` component uses the `useState` hook to keep track of whether it is currently expanded or not. \n\nThe `Modal` component is used to display the expanded `Card` content in a full-screen overlay on smaller screens. The `Modal` component is only rendered when the screen width is less than 640 pixels, as determined by the `useMediaQuery` hook from the `@mui/material` library. \n\nOverall, this code provides a simple and reusable way to display a set of cards with expandable content. It could be used in a variety of contexts, such as displaying a set of products or services with descriptions, or displaying a set of frequently asked questions with answers. \n\nExample usage:\n\n```jsx\nimport CardsSection from \"components/CardsSection\";\n\nconst ZooPage = () => {\n return (\n Welcome to the Zoo Project
\n\n
\n );\n};\n\nexport default ZooPage;\n```",
- "questions": "1. What is the purpose of the `CardsSection` component?\n- The `CardsSection` component is responsible for rendering a section of cards, each representing a different segment of the project.\n\n2. What is the significance of the `useMediaQuery` hook in the `Card` component?\n- The `useMediaQuery` hook is used to conditionally render a modal component based on the screen size. If the screen size is smaller than 640px, the modal will be displayed when a card is clicked.\n\n3. How does the breeding mechanism work in the `Breed` segment?\n- To breed animals, the user must collect two Origin Adult Animals of the same species. They can then breed the animals up to 7 times, resulting in the birth of a 2nd Gen Baby Animal in the same species. These 2nd Gen Animals can mint older versions of themselves but cannot breed at the adult stage.",
- "checksum": "526b8a1ef4df77d8fd910a479697918a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/FaqSection.json b/.autodoc/docs/json/core/src/pages/home/FaqSection.json
deleted file mode 100644
index 3efbd9151..000000000
--- a/.autodoc/docs/json/core/src/pages/home/FaqSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "FaqSection.tsx",
- "filePath": "core/src/pages/home/FaqSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/FaqSection.tsx",
- "summary": "The code defines a React component called FaqSection that renders a section of frequently asked questions (FAQs) for a project called ZOO. The component imports the React library and the Link component from the Next.js library. It also imports an animation function called fadeInOnScroll from an external module called \"animation\".\n\nThe FaqSection component returns a section element with an id of \"faqs\". The section contains a div element with a class of \"px-6 py-20 mx-auto max-w-7xl\" that sets some padding, margin, and maximum width styles. Inside this div, there is an h2 element that displays the title \"Game FAQ\" and a description of the game. The section also contains a flex container with four flex items, each containing a question and an answer about the game.\n\nThe first question asks \"What is ZOO?\" and the answer describes the project as a liquidity protocol that bridges tokens and NFTs at the intersection of DeFi and gaming. It explains that each NFT yields the native currency $ZOO and is collateralized by $ZOO, which appreciates over time based on rarity, age, and playing the game.\n\nThe second question asks \"What are the Key Features in ZOO?\" and the answer lists some of the key features, including growing and breeding animals, and an upcoming AR app that will allow players to interact with their NFTs in augmented reality.\n\nThe third question asks \"What is the $ZOO token?\" and the answer explains that it is the native currency in the game that allows token holders to play, invest, use the NFT marketplace, and be part of the game.\n\nThe fourth question asks \"How Do I Get Started?\" and the answer explains that players can access the game through the DApp or ZOO Labs' official website.\n\nThe fifth question asks \"How do I buy $ZOO?\" and the answer provides a link to a presentation that explains how to buy the token.\n\nThe section ends with a call-to-action button that links to a page with more FAQs.\n\nOverall, the FaqSection component provides a user-friendly way for players to learn about the ZOO project and its features. It can be used as part of a larger website or application that promotes the game and its community.",
- "questions": "1. What is the purpose of the `useEffect` hook that is currently commented out?\n- The `useEffect` hook is used to apply the `fadeInOnScroll` animation to the `faqsRef` element when the component mounts.\n2. What is the `ZOO` Liquidity Protocol and how does it work?\n- `ZOO` is a protocol that bridges tokens and NFTs at the intersection of Defi and gaming. Each NFT yields the native currency, $ZOO, which is collateralized by $ZOO and appreciates over time based on rarity, age, and gameplay.\n3. How can a player buy $ZOO?\n- A player can buy $ZOO by clicking on the link provided in the code, which redirects them to a website where they can purchase it.",
- "checksum": "4a94f00919b57baac5acfd22aeb26f08"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/GameFi.json b/.autodoc/docs/json/core/src/pages/home/GameFi.json
deleted file mode 100644
index 7567eeee1..000000000
--- a/.autodoc/docs/json/core/src/pages/home/GameFi.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "GameFi.tsx",
- "filePath": "core/src/pages/home/GameFi.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/GameFi.tsx",
- "summary": "The code above is a React component called `GameFi` that renders a section of the webpage for the Zoo project. The component takes in a prop called `gameFi`, which is an array of objects that contain information about different animal families. \n\nThe component starts by importing the `Image` component from the `next/image` library and the `React` library. It then defines the `GameFi` component as a function that takes in the `gameFi` prop. \n\nInside the component, there is a section element with a class of `AnimalFamily`. This section contains a div element with classes that set the padding, margin, and maximum width of the content. The div contains an h1 element with a class that sets the font size, font weight, and text alignment of the heading. The text inside the heading is \"GAME-FI For All\". \n\nBelow the heading, there is a grid element with classes that set the number of columns and the gap between the columns and rows. Inside the grid, there is a map function that iterates over the `gameFi` array and returns a div element for each object in the array. \n\nEach div element has a key attribute set to the index of the current object in the array. The div also has classes that set the border, padding, and alignment of the content. Inside the div, there is an `Image` component that displays the icon of the animal family. The `Image` component takes in the `src`, `alt`, `width`, and `height` attributes. The `src` attribute is set to the `icon` property of the current object in the array. The `alt` attribute is an empty string. The `width` and `height` attributes are set to 80. \n\nBelow the `Image` component, there is an h2 element with a class that sets the font size, font weight, and text alignment of the heading. The text inside the heading is the `title` property of the current object in the array. Below the h2 element, there is a p element with a class that sets the font size, font weight, and text alignment of the paragraph. The text inside the paragraph is the `description` property of the current object in the array. \n\nFinally, the component exports the `GameFi` function as the default export of the module. \n\nThis component is used to display information about different animal families on the Zoo project webpage. The `gameFi` prop is an array of objects that contain information about each animal family, including the icon, title, and description. The component maps over the `gameFi` array and returns a div element for each object in the array. Each div element contains an `Image` component, an h2 element, and a p element that display the icon, title, and description of the animal family, respectively.",
- "questions": "1. What is the purpose of the `Image` and `React` imports at the beginning of the code?\n \n The `Image` import is used to render images in the component, while the `React` import is necessary for defining and exporting the `GameFi` component.\n\n2. What is the `gameFi` prop and how is it used in the component?\n \n The `gameFi` prop is an array of objects that contain information about different games. It is mapped over to dynamically render each game's icon, title, and description in the component.\n\n3. What is the purpose of the CSS classes used in the component?\n \n The CSS classes are used to style the component's layout and content. For example, `max-w-7xl` sets the maximum width of the container to 7xl, while `text-[44px]` sets the font size of the heading to 44 pixels.",
- "checksum": "c4723c579798cc6e345d43f6ec7f24a3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/GetStartedSection.json b/.autodoc/docs/json/core/src/pages/home/GetStartedSection.json
deleted file mode 100644
index f4583bc53..000000000
--- a/.autodoc/docs/json/core/src/pages/home/GetStartedSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "GetStartedSection.tsx",
- "filePath": "core/src/pages/home/GetStartedSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/GetStartedSection.tsx",
- "summary": "The `GetStartedSection` component is a React functional component that renders a section of the Zoo project's landing page. The section contains a heading, a paragraph, and a button that links to the project's blog page. Additionally, the section displays an image of a hippopotamus.\n\nThe component imports the `React` and `useEffect` modules from the `react` package and the `Image` component from the `next/image` package. The `fadeInFromLeft` and `fadeInFromRight` functions are imported from the `animation` module located in the `../../animation` directory.\n\nThe `GetStartedSection` component returns a JSX element that represents the section. The section has a class name of `GetStarted` and an ID of `about`. The section contains a `div` element with a class name of `px-6 pb-20 mx-auto max-w-7xl lg:flex lg:items-center lg:justify-between`. This `div` element contains two child `div` elements.\n\nThe first child `div` element contains the heading, paragraph, and button. The heading is a `h1` element with a class name of `mb-6 text-3xl font-bold md:text-4xl lg:text-[44px] leading-[3rem] lg:leading-4` and the text \"Make yield and do good.\" The paragraph is a `p` element with a class name of `mb-6 text-base text-white lg:text-lg lg:mb-8 text-opacity-70 md:max-w-2xl` and the text \"ZOO is a DeFi game that allows players to collect NFT animals representative of endangered species in the real world. Based on your game interactions users make more or less $ZOO.\" The button is an `a` element with a class name of `px-5 py-3 text-sm text-white rounded-full font-semibold bg-gradient-to-b from-purple to-blue md:text-base md:px-6 md:py-4 lg:px-10` and the text \"Get Started\". The `href` attribute of the button is set to \"/blog\".\n\nThe second child `div` element contains the image of the hippopotamus. The image is an `Image` component with a `src` attribute that points to an image of a hippopotamus, a `width` of 603 pixels, a `height` of 450 pixels, and an empty `alt` attribute.\n\nThe `GetStartedSection` component is exported as the default export of the module, which means that it can be imported and used in other parts of the Zoo project. For example, it could be imported into the `HomePage` component and rendered as part of the landing page.",
- "questions": "1. What is the purpose of the `useEffect` hook that is currently commented out?\n- The `useEffect` hook is used to trigger animations on the `getStartedContentRef` and `getStartedImageRef` elements, but it is currently commented out.\n\n2. What is the significance of the `Image` component being imported from \"next/image\"?\n- The `Image` component from \"next/image\" is used to optimize image loading and performance in the application.\n\n3. What is the overall purpose of the `GetStartedSection` component?\n- The `GetStartedSection` component is a section of the application that displays information about the ZOO DeFi game and allows users to navigate to the blog or get started with the game.",
- "checksum": "e62c8108b467219fb37e1245d55d4f06"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/GrabAnimal.json b/.autodoc/docs/json/core/src/pages/home/GrabAnimal.json
deleted file mode 100644
index 16774cd07..000000000
--- a/.autodoc/docs/json/core/src/pages/home/GrabAnimal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "GrabAnimal.tsx",
- "filePath": "core/src/pages/home/GrabAnimal.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/GrabAnimal.tsx",
- "summary": "The `GrabAnimal` component is a React component that renders a section of the webpage displaying animals that can be purchased. The component imports several modules including `Image` from the `next/image` library, `Link` from the `next/link` library, and `React`. It also imports the `dynamic` function from the `next/dynamic` library and the `ModelViewer` component from the `components/ModelViewer` file.\n\nThe `GrabAnimal` component takes two props, `grabAnimal` and `grabAnimal2`, which are arrays of objects containing information about the animals that can be purchased. The component maps over these arrays and renders the information for each animal in a specific format.\n\nThe component is divided into two main sections. The first section displays the animals in a grid format, with each animal's image and title displayed side by side. The image is displayed in a black box with rounded corners, and the title is displayed below the image. Each animal also has a \"Buy Now\" button that links to a \"coming soon\" page.\n\nThe second section displays the animals in a two-column grid format, with each animal's image, title, and description displayed in a column. The image is displayed in a black box with rounded corners, and the title is displayed above the image. The description is displayed below the image. Each animal also has a \"Learn More\" button that links to a page with more information about the animal.\n\nThe `GrabAnimal` component is used in the larger project to display the animals that can be purchased. It is likely used in conjunction with other components to create a complete webpage for purchasing animals. Here is an example of how the `GrabAnimal` component might be used in a larger project:\n\n```\nimport React from \"react\";\nimport GrabAnimal from \"./GrabAnimal\";\n\nconst animals = [\n {\n icon: \"/images/animal1.png\",\n title: \"Lion\",\n },\n {\n icon: \"/images/animal2.png\",\n title: \"Tiger\",\n },\n {\n icon: \"/images/animal3.png\",\n title: \"Bear\",\n },\n];\n\nconst animals2 = [\n {\n icon: \"/images/animal4.png\",\n title: \"Elephant\",\n description: \"The largest land animal in the world.\",\n },\n {\n icon: \"/images/animal5.png\",\n title: \"Giraffe\",\n description: \"The tallest land animal in the world.\",\n },\n {\n icon: \"/images/animal6.png\",\n title: \"Zebra\",\n description: \"A horse-like animal with black and white stripes.\",\n },\n];\n\nconst PurchaseAnimalsPage = () => {\n return (\n Welcome to Zoo!
\n\n
\n );\n};\n\nexport default PurchaseAnimalsPage;\n```\n\nIn this example, the `PurchaseAnimalsPage` component imports the `GrabAnimal` component and passes in two arrays of animal information as props. The `GrabAnimal` component is then rendered on the page, displaying the animals that can be purchased.",
- "questions": "1. What is the purpose of the `ModelViewer` component and why is it loaded dynamically?\n \n The `ModelViewer` component is imported dynamically using `next/dynamic` with `ssr` set to `false`. This means that the component is not included in the server-side rendering and is only loaded on the client-side. A smart developer might wonder why this is necessary and what the purpose of the `ModelViewer` component is.\n\n2. What is the purpose of the `GrabAnimal` component and what props does it expect?\n \n The `GrabAnimal` component is a functional component that takes in two props: `grabAnimal` and `grabAnimal2`. A smart developer might wonder what the purpose of this component is and what data is expected to be passed in through these props.\n\n3. What is the purpose of the `Image` and `Link` imports and how are they used in the component?\n \n The `Image` and `Link` components are imported from the `next/image` and `next/link` packages, respectively. A smart developer might wonder how these components are used in the `GrabAnimal` component and what benefits they provide over using traditional HTML `img` and `a` tags.",
- "checksum": "ca8082c559896f7ddf56887bde28f8df"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/HeroSection.json b/.autodoc/docs/json/core/src/pages/home/HeroSection.json
deleted file mode 100644
index 074df8f04..000000000
--- a/.autodoc/docs/json/core/src/pages/home/HeroSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "HeroSection.tsx",
- "filePath": "core/src/pages/home/HeroSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/HeroSection.tsx",
- "summary": "The `HeroSection` component is a React component that renders a hero section for the zoo project. The hero section is the first section of the website that users see when they visit the website. The hero section contains a video background and a set of slides that display different animals and their information. The component uses the `useState`, `useEffect`, and `useRef` hooks from React to manage the state of the component and to interact with the DOM.\n\nThe `slides` array contains an array of objects that represent the different animals that are displayed in the hero section. Each object contains information about the animal, such as its title, video, price, type, and URI. The `activeSlideIndex` state variable is used to keep track of the currently active slide.\n\nThe `videoRef` and `videoCurrent` variables are used to reference the video element in the DOM and to interact with it. The `useEffect` hook is used to add an event listener to the video element that listens for the `timeupdate` event. When the `timeupdate` event is fired, the `handleVideoUpdate` function is called, which updates the `activeSlideIndex` state variable based on the current time of the video.\n\nThe `return` statement of the component renders the hero section. The hero section contains a `div` element that contains the video background and the slides. The `slides` array is mapped over to render each slide. The `activeSlideIndex` state variable is used to determine which slide is currently active. The `video` element is used to render the video background. The `Link` component from the `next/link` library is used to create a link to the animal's URI. The `button` element is used to display the animal's information and to allow users to navigate to the animal's page.\n\nOverall, the `HeroSection` component is an important part of the zoo project as it is the first section of the website that users see when they visit the website. The component provides users with an engaging and interactive experience that showcases the different animals that are available at the zoo.",
- "questions": "1. What is the purpose of the `HeroSection` component?\n- The `HeroSection` component is responsible for rendering a hero section with a video background and slides containing information about different animals and their types.\n\n2. What is the purpose of the `handleVideoUpdate` function?\n- The `handleVideoUpdate` function is responsible for updating the active slide index based on the current time of the video. It uses a switch statement to determine the active slide index based on the time.\n\n3. What external libraries or modules are being used in this code?\n- The code is importing the `React` library, as well as the `useState`, `useEffect`, and `useRef` hooks from React. It is also importing the `Link` component from the `next/link` module. Additionally, it is importing the `capitalize` function from a `functions/format` module and the `fadeInFromLeft` and `fadeInOnScroll` animations from an `animation` module.",
- "checksum": "d55d7ad3da486f0ebfb8072aa3df2556"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/InfoSection.json b/.autodoc/docs/json/core/src/pages/home/InfoSection.json
deleted file mode 100644
index 78a21cf04..000000000
--- a/.autodoc/docs/json/core/src/pages/home/InfoSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "InfoSection.tsx",
- "filePath": "core/src/pages/home/InfoSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/InfoSection.tsx",
- "summary": "The code above defines a React component called `InfoSection` that renders a section of the Zoo project's website. The section contains information about the project's features and benefits, presented as a list of cards. Each card contains an icon, a title, and a description of a specific feature. \n\nThe `utils` array contains an object for each feature, with properties for the feature's title, description, and icon. The `InfoSection` component maps over this array to render a card for each feature. The icon is displayed as an image, and the title and description are displayed as text. \n\nThe `InfoSection` component is exported as the default export of the module, which means it can be imported and used in other parts of the project. For example, it could be included in a landing page or a features page to provide an overview of the project's capabilities. \n\nHere is an example of how the `InfoSection` component could be used in a landing page:\n\n```\nimport InfoSection from './components/InfoSection';\n\nconst LandingPage = () => {\n return (\n Purchase Animals
\n\n \n {/* header content */}\n \n \n \n \n
\n );\n};\n\nexport default LandingPage;\n```\n\nIn this example, the `InfoSection` component is imported from a file located in the `components` directory. It is then included in the `main` section of the landing page, along with other content. \n\nOverall, the `InfoSection` component provides a simple and reusable way to display information about the Zoo project's features. By encapsulating the feature cards in a component, the code is easier to read, maintain, and reuse.",
- "questions": "1. What is the purpose of the `utils` array?\n \n The `utils` array contains objects that represent different features of the Zoo project, such as \"Stability Tax\" and \"Mint New Animals\". Each object has a title, description, and icon associated with it.\n\n2. What is the `InfoSection` component responsible for?\n \n The `InfoSection` component is responsible for rendering a section of the Zoo website that displays information about the project's features. It uses the `utils` array to generate a list of feature descriptions with icons.\n\n3. What is the significance of the `Image` and `React` imports at the beginning of the code?\n \n The `Image` import is used to display images on the website, while the `React` import is necessary for defining React components. However, neither of these imports are actually used in the `InfoSection` component itself.",
- "checksum": "1fc628da29c19ea89d09fd6b35f2383f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/JoinZooSection.json b/.autodoc/docs/json/core/src/pages/home/JoinZooSection.json
deleted file mode 100644
index 90ad5bf8b..000000000
--- a/.autodoc/docs/json/core/src/pages/home/JoinZooSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "JoinZooSection.tsx",
- "filePath": "core/src/pages/home/JoinZooSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/JoinZooSection.tsx",
- "summary": "The `JoinZooSection` component is a React component that renders a section of the Zoo project's website. The purpose of this section is to encourage users to follow Zoo on various social media platforms. The component imports the `React` library, as well as the `Image` component from the `next/image` library, and two custom icon components (`InstagramIcon` and `TwitterIcon`) from the `components/Icons` directory.\n\nThe component returns a section element with a purple background color and an ID of \"newsletter\". Within this section, there is a container element with a maximum width of 7xl (a custom tailwindcss class) that contains a heading, a paragraph, and a series of links to social media platforms. The heading encourages users to \"Join the ZOO family!\", while the paragraph instructs users to follow Zoo on social media. The links are represented as images, with each image wrapped in an anchor tag that links to the corresponding social media platform. The images are sourced from the `/img` directory and have a width and height of 32 pixels.\n\nThe component also contains a commented-out form element that would allow users to submit their email address to join the Zoo newsletter. However, this form is not currently being used and is therefore commented out.\n\nThis component can be used in the larger Zoo project to encourage users to follow Zoo on social media and stay up-to-date with the latest news and updates. It can be easily added to any page that requires a call-to-action for social media follows. For example, it could be added to the footer of the Zoo website to encourage users to follow Zoo on social media from any page. \n\nExample usage:\n```\nimport JoinZooSection from \"components/JoinZooSection\";\n\nconst HomePage = () => {\n return (\n \n
\n );\n};\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `JoinZooSection` that renders a section with a heading, a paragraph, and a list of social media links.\n\n2. What external dependencies does this code rely on?\n- This code imports several external dependencies, including React, Next.js's `Image` component, and custom icon components for Instagram and Twitter.\n\n3. What is the commented-out code at the end of the component for?\n- The commented-out code appears to be a form that allows users to submit their email address to join the ZOO mailing list. It is not currently being used in the component.",
- "checksum": "47decbf9e616da16492bc59fe8873b94"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/MarketPlaceSection.json b/.autodoc/docs/json/core/src/pages/home/MarketPlaceSection.json
deleted file mode 100644
index ba8050939..000000000
--- a/.autodoc/docs/json/core/src/pages/home/MarketPlaceSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "MarketPlaceSection.tsx",
- "filePath": "core/src/pages/home/MarketPlaceSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/MarketPlaceSection.tsx",
- "summary": "The `MarketPlaceSection` component is a React component that renders a section of the Zoo project's website. The section contains information about the Zoo Labs Foundation, which is dedicated to saving and preserving endangered species. The component uses various third-party libraries and components to render the section.\n\nThe component imports the following libraries and components:\n\n- `React`: the core library for building user interfaces in React.\n- `useRef`, `useEffect`, and `useState`: React hooks for managing state and side effects in functional components.\n- `Image` and `Link` from the `next` library: components for optimizing images and links in Next.js applications.\n- `useActiveWeb3React` from the `hooks` module: a custom hook for accessing the active Web3 context in the Zoo project.\n- `Slider` from the `react-slick` library: a component for creating customizable image sliders.\n- `Web3Status` from the `components` module: a custom component for displaying the user's Web3 status.\n- `axios`: a library for making HTTP requests.\n\nThe component defines a `MarketPlaceSection` function that takes a `slideData` prop as input. The function destructures the `account`, `chainId`, and `library` properties from the Web3 context using the `useActiveWeb3React` hook. It also defines several state variables using the `useState` hook: `Form`, `succes`, `error`, and `sliderRef`. \n\nThe component then defines a `settings` object that configures the behavior of the `Slider` component. It also defines an event handler function `handleSubmit` that sends an HTTP POST request to an API endpoint `/api/subscribe` with the email address entered in the `Form` state variable. If the request is successful, the `succes` state variable is set to `true`, and the `error` state variable is set to `false`. If the request fails, the `error` state variable is set to `true`, and the `Form` state variable is updated with an error message.\n\nThe component also defines an event handler function `handleInputChange` that updates the `Form` state variable with the current value of the email input field.\n\nThe component then renders a section of the Zoo project's website using JSX. The section contains several HTML elements, including headings, paragraphs, and buttons. The `Slider` component is commented out, so it is not currently being used in the section. The `Web3Status` component is not used in this section either.\n\nOverall, the `MarketPlaceSection` component is a reusable React component that renders a section of the Zoo project's website. It uses various third-party libraries and components to create a visually appealing and interactive section that provides information about the Zoo Labs Foundation and its mission to save endangered species. The component also includes functionality for subscribing to a newsletter using an HTTP POST request.",
- "questions": "1. What is the purpose of the `useActiveWeb3React` hook and how is it used in this code?\n \n The `useActiveWeb3React` hook is used to access the current active Web3 context, including the user's account, chain ID, and library. It is used in this code to retrieve the user's account and chain ID.\n\n2. What is the purpose of the `handleSubmit` function and what API endpoint does it call?\n \n The `handleSubmit` function is called when the user submits a form with their email address. It sends a POST request to the `/api/subscribe` endpoint with the email address as the payload. \n\n3. What is the purpose of the commented out code referencing `marketRef` and `fadeInOnScroll`?\n \n The commented out code is a reference to a `ref` that is not used in the current implementation. It is likely that the `marketRef` was intended to be used to trigger a fade-in animation when the component is scrolled into view using the `fadeInOnScroll` function. However, this functionality is not currently implemented in the code.",
- "checksum": "bd121f977f87439669d518139a0f9319"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/OpportunitySection.json b/.autodoc/docs/json/core/src/pages/home/OpportunitySection.json
deleted file mode 100644
index c12a54e89..000000000
--- a/.autodoc/docs/json/core/src/pages/home/OpportunitySection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "OpportunitySection.tsx",
- "filePath": "core/src/pages/home/OpportunitySection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/OpportunitySection.tsx",
- "summary": "The `OpportunitySection` component is a React component that renders a section of the zoo project's website. The section displays a circle with four images of animals in different stages of maturity. The component is responsible for handling user interactions with the images and displaying information about each stage of the animal's life cycle.\n\nThe component imports several other components and hooks from the zoo project, including `EndangeredSpecies`, `useBuyZoo`, `useActiveWeb3React`, and `useFaucet`. It also imports the `Image` component from the `next/image` library and the `useState` and `useEffect` hooks from the `react` library.\n\nThe component defines two state variables using the `useState` hook: `stage` and `hovered`. `stage` is used to keep track of the current stage of the animal's life cycle that the user is hovering over. `hovered` is used to keep track of whether the user is currently hovering over one of the animal images.\n\nThe component defines several functions that are used to handle user interactions with the animal images. The `displayContent` function takes a string argument and sets the `stage` state variable to that string. The `handleHover` function toggles the `hovered` state variable between `true` and `false`.\n\nThe component renders a section element with the `id` \"endless-opportunity\". The section contains a div element with the class \"px-6 lg:mt-10\". Inside this div, there is another div element with the classes \"flex flex-col items-center justify-between mx-auto lg:flex-row max-w-7xl\". This div contains two child components: `EndangeredSpecies` and a div that displays the animal images.\n\nThe div that displays the animal images contains a div element with the class \"big-circle\". Inside this div, there are four div elements with the classes \"animate-animal incubate\", \"animate-animal feed\", \"animate-animal grow\", and \"animate-animal breed\". Each of these divs contains an `Image` component that displays an image of an animal in a different stage of maturity.\n\nThe `Image` components have several event listeners attached to them that call the `displayContent` function when the user hovers over them. The `displayContent` function sets the `stage` state variable to a string that describes the current stage of the animal's life cycle. When the user moves the mouse away from the image, the `displayContent` function is called again with an empty string argument to clear the `stage` state variable.\n\nOverall, the `OpportunitySection` component is responsible for rendering a section of the zoo project's website that displays information about the different stages of an animal's life cycle. The component handles user interactions with the animal images and updates the `stage` state variable to display information about the current stage of the animal's life cycle.",
- "questions": "1. What is the purpose of the `OpportunitySection` component?\n- The `OpportunitySection` component is responsible for rendering a section of the website that displays different animal images and descriptions, and allows users to interact with them by hovering over them.\n\n2. What is the role of the `useDispatch` hook from `react-redux`?\n- The `useDispatch` hook is used to dispatch actions to the Redux store. It is likely used in this code to dispatch the `getZooBalance` action.\n\n3. What is the purpose of the `useFaucet` hook from `hooks`?\n- It is unclear from this code what the purpose of the `useFaucet` hook is, as it is not used anywhere in the `OpportunitySection` component. It is possible that it is used elsewhere in the `zoo` project.",
- "checksum": "b65eb792f546a7c6913850cc9e11bad3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/PartnersSection.json b/.autodoc/docs/json/core/src/pages/home/PartnersSection.json
deleted file mode 100644
index cbc0fe7d8..000000000
--- a/.autodoc/docs/json/core/src/pages/home/PartnersSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "PartnersSection.tsx",
- "filePath": "core/src/pages/home/PartnersSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/PartnersSection.tsx",
- "summary": "The `PartnersSection` component is a React functional component that renders a section of the zoo project's website that displays logos of partner organizations. The logos are displayed in a grid-like layout with varying sizes and are hyperlinked to the partner organizations' websites. \n\nThe component imports the `React`, `Image`, and `Link` modules from the `react`, `next/image`, and `next/link` packages respectively. The `React` module is used to define the component, while the `Image` and `Link` modules are used to display images and create hyperlinks respectively.\n\nThe component returns a JSX section element with a green background color and an ID of \"partnerships\". The section contains a div element with a flexbox layout that displays the logos of the partner organizations. The logos are displayed in three columns, with the first and third columns containing two logos each and the second column containing two larger logos. \n\nEach logo is wrapped in a `Link` component that creates a hyperlink to the partner organization's website. The `Image` component is used to display the logo image, with the `src`, `width`, `height`, and `alt` attributes set accordingly. \n\nOverall, this component serves as a way to showcase the partner organizations of the zoo project and provide users with a way to learn more about them. It can be easily modified to add or remove partner logos as needed. \n\nExample usage:\n\n```jsx\nimport PartnersSection from \"./PartnersSection\";\n\nfunction App() {\n return (\n \n
\n );\n}\n\nexport default App;\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `PartnersSection` that renders a section of the webpage with images and links to various partner organizations.\n\n2. What libraries or frameworks are being used in this code?\n- This code imports and uses the React, Next.js, and Image libraries.\n\n3. What is the layout of the partner images on the webpage?\n- The partner images are arranged in three columns, with the first column containing two images, the second column containing one image, and the third column containing two images. The images are all hyperlinked to external websites.",
- "checksum": "4b036b4897268dc15aae32742170c60f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/PopularNftsSection.json b/.autodoc/docs/json/core/src/pages/home/PopularNftsSection.json
deleted file mode 100644
index d3c7da3b0..000000000
--- a/.autodoc/docs/json/core/src/pages/home/PopularNftsSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "PopularNftsSection.tsx",
- "filePath": "core/src/pages/home/PopularNftsSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/PopularNftsSection.tsx",
- "summary": "The `PopularNftsSection` component is a React component that renders a section of the Zoo project's website that displays popular NFTs (non-fungible tokens) available for purchase on the marketplace. The component imports the `React` and `useEffect` modules from the `react` package, as well as the `Image` component from the `next/image` package, and the `NftCard` component from a local file. The component also imports two animation functions, `fadeInOnScroll` and `fadeInOnScrollAndStagger`, from a local `animation` module.\n\nThe `PopularNftsSection` component returns a JSX element that contains a `section` element with a `div` element inside of it. The `div` element has a `className` of `max-w-7xl mx-auto px-6 lg:pb-20`, which sets the maximum width of the element to 7xl, centers it horizontally, and adds padding to the bottom of the element on large screens. Inside the `div` element, there is another `div` element with a `className` of `flex flex-col items-center`, which centers its child elements vertically and horizontally. The `div` element contains an `h1` element with a `className` of `text-2xl md:text-2xl lg:text-[44px] leading-[3rem] lg:leading-4 text-center mb-4 font-semibold`, which sets the font size and weight of the text, centers it horizontally, and adds some margin to the bottom of the element. The `h1` element contains the text \"Popular NFTs\". Below the `h1` element, there is a `p` element with a `className` of `text-base lg:text-lg mb-6 lg:mb-8 text-white text-center text-opacity-70 md:max-w-xl`, which sets the font size, color, and opacity of the text, centers it horizontally, and adds some margin to the bottom of the element. The `p` element contains the text \"Browse and bid on the hottest ZOO NFTs on the marketplace.\".\n\nBelow the `div` element with the `h1` and `p` elements, there is another `div` element with a `className` of `flex flex-col items-center lg:flex-row lg: justify-between lg:gap-4`. This `div` element contains four instances of the `NftCard` component, each with different props passed to it. The `NftCard` component takes an `image` prop, which is an `Image` component with a `src`, `width`, `height`, and `alt` prop passed to it. The `NftCard` component also takes a `name`, `price`, `address`, `days`, `highestBid`, and `yields` prop, which are used to display information about the NFT. The `NftCard` component is defined in a separate file and is not included in this code snippet.\n\nThe `PopularNftsSection` component also includes two commented-out `useEffect` hooks that call the `fadeInOnScroll` and `fadeInOnScrollAndStagger` animation functions. These hooks are not currently being used in the component, but they could be used to animate the display of the NFTs when they come into view on the page.\n\nOverall, the `PopularNftsSection` component is a reusable component that can be used to display popular NFTs on any page of the Zoo project's website. The component is flexible and can be easily customized by passing different props to the `NftCard` component.",
- "questions": "1. What is the purpose of the `fadeInOnScroll` and `fadeInOnScrollAndStagger` functions?\n- These functions are used for animation and are imported from a separate file called \"animation\". \n\n2. Why are there commented out lines of code that reference `popularRef` and `nftsRef`?\n- It's unclear why these lines of code are commented out, but they may have been used for referencing elements in the DOM for animation purposes.\n\n3. What is the purpose of the `PopularNftsSection` component?\n- This component is used to display a section of popular NFTs with their associated information, such as name, price, and image.",
- "checksum": "97fb85b7ec6ff03efe0c6e5b858d375c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/ReliableGovernance.json b/.autodoc/docs/json/core/src/pages/home/ReliableGovernance.json
deleted file mode 100644
index 0ba8abb7c..000000000
--- a/.autodoc/docs/json/core/src/pages/home/ReliableGovernance.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ReliableGovernance.tsx",
- "filePath": "core/src/pages/home/ReliableGovernance.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/ReliableGovernance.tsx",
- "summary": "The code above is a React component that renders a section of a web page related to Reliable Governance. The component imports three modules: Image from \"next/image\", Link from \"next/link\", and React. \n\nThe ReliableGovernance component returns a JSX element that contains a div with a class name of \"max-w-7xl mx-auto\". This div contains another div with a class name of \"w-5/6 mx-auto mt-24\". Inside this div, there is another div with a class name of \"w-full flex flex-col-reverse md:flex-row items-center md:justify-between mb-11\". This div contains two child divs. The first child div has a class name of \"md:w-1/2\" and contains two paragraphs and a Link component. The second child div has a class name of \"flex-1 w-full md:w-1/2\" and contains a div with a class name of \"w-full bg-black rounded-xl h-[364px] flex items-center justify-center\" that contains an image.\n\nThe first paragraph inside the first child div has a class name of \"font-bold text-center lg:text-left mt-8 text-2xl md:text-[44px] md:leading-none mb-3 md:mb-[18px]\". It displays the text \"Reliable Governance\" in bold. The second paragraph has a class name of \"mb-5 md:mb-8 font-medium text-sm md:text-[20px] leading-7 text-muted-40 text-center lg:text-left mt-4\". It displays the text \"Our DAO leverages holographic consensus and quadratic voting.\" in a smaller font size. The Link component has a href attribute that points to \"/coming-soon\" and contains a div with a class name of \"px-5 py-3 text-[16px] font-semibold bg-black text-white flex items-center justify-between rounded-full w-48 md:text-lg md:px-6 lg:px-4 hover:cursor-pointer mx-auto lg:ml-0 mt-8\". This div contains a span element with the text \"Learn More\" and an Image component that displays an arrow icon.\n\nThe second child div contains a div with a class name of \"w-full bg-black rounded-xl h-[364px] flex items-center justify-center\". This div contains an image with a src attribute that points to \"/img/partnership.svg\".\n\nThis component can be used in a larger project to display information about reliable governance and provide a link to learn more about it. The component can be customized by changing the text and image displayed. For example, the text can be changed to display information about a different topic, and the image can be changed to display a different icon. Below is an example of how this component can be used in a larger project:\n\n```\nimport ReliableGovernance from \"./ReliableGovernance\";\n\nconst HomePage = () => {\n return (\n Welcome to the Zoo Project!
\n\n
\n );\n};\n\nexport default HomePage;\n```",
- "questions": "1. What is the purpose of this code?\n \n This code defines a React component called `ReliableGovernance` that renders a section of a webpage related to reliable governance.\n\n2. What external dependencies does this code have?\n \n This code imports three external dependencies: `Image` and `Link` from the `next` package, and `React` from the `react` package.\n\n3. What is the layout of the rendered section?\n \n The rendered section consists of two columns, with text on the left and an image on the right. The text includes a title, a description, and a \"Learn More\" button that links to a page with more information. The image is a black rectangle with a white icon in the center.",
- "checksum": "67bee7bb475a7b6fd92345af1af51c7b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/SingleAnimal.json b/.autodoc/docs/json/core/src/pages/home/SingleAnimal.json
deleted file mode 100644
index 04103ef30..000000000
--- a/.autodoc/docs/json/core/src/pages/home/SingleAnimal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SingleAnimal.tsx",
- "filePath": "core/src/pages/home/SingleAnimal.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/SingleAnimal.tsx",
- "summary": "The `SingleAnimal` component is a React component that renders a 3D model of an animal and allows the user to switch between different categories of the animal (baby, teen, and adult). The component imports the `dynamic` function from the `next/dynamic` module and the `React` library. It also imports the `ModelViewer` component from the `components/ModelViewer` module.\n\nThe `ModelViewer` component is loaded dynamically using the `dynamic` function. This means that the component is not loaded during server-side rendering (SSR), but is instead loaded on the client-side. This is because the `ModelViewer` component requires access to the browser's WebGL API, which is not available during SSR.\n\nThe `SingleAnimal` component takes a `data` prop, which is an object containing the URLs for the 3D models of the animal in different categories. The component uses the `React.useState` hook to keep track of the current category of the animal being displayed. The `useMemo` hook is used to memoize the result of the switch statement that renders the appropriate `ModelViewer` component based on the current category.\n\nThe component renders a container `div` with a fixed height and width that clips any overflow. Inside this container, the `ModelViewer` component is rendered with the appropriate `usdz` and `glb` props based on the current category. Below the `ModelViewer`, there is a container `div` that is absolutely positioned at the bottom of the container. This container contains three clickable elements that allow the user to switch between the different categories of the animal. The current category is highlighted with a gradient background.\n\nThis component can be used in a larger project that displays information about different animals. It can be used to display a 3D model of a single animal and allow the user to switch between different categories of the animal. For example, it could be used in a virtual zoo application that allows users to view different animals in different categories. \n\nExample usage:\n\n```jsx\nimport SingleAnimal from \"components/SingleAnimal\";\n\nconst animalData = {\n usdz_baby: \"/path/to/baby.usdz\",\n glb_baby: \"/path/to/baby.glb\",\n usdz_teen: \"/path/to/teen.usdz\",\n glb_teen: \"/path/to/teen.glb\",\n usdz: \"/path/to/adult.usdz\",\n glb: \"/path/to/adult.glb\",\n};\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `ModelViewer` component and where is it defined?\n- The `ModelViewer` component is used to render 3D models of animals and it is defined in a file located at `components/ModelViewer`.\n2. What is the significance of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the result of the `switch` statement that renders the appropriate `ModelViewer` component based on the `category` state. This helps to optimize performance by avoiding unnecessary re-renders.\n3. What is the purpose of the `category` state and how is it used in the code?\n- The `category` state is used to determine which age category of the animal to display (`baby`, `teen`, or `adult`). It is used in the `switch` statement inside the `useMemo` hook to render the appropriate `ModelViewer` component. The `category` state is also updated when the user clicks on one of the age category buttons at the bottom of the component.",
- "checksum": "e5e43f134ed14a4d324aaefcbaf88234"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/StartCollecting.json b/.autodoc/docs/json/core/src/pages/home/StartCollecting.json
deleted file mode 100644
index df57e9907..000000000
--- a/.autodoc/docs/json/core/src/pages/home/StartCollecting.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "StartCollecting.tsx",
- "filePath": "core/src/pages/home/StartCollecting.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/StartCollecting.tsx",
- "summary": "The code above is a React component that renders a section of the Zoo project's website. The purpose of this component is to encourage users to start collecting NFTs by clicking on a button that takes them to a specific page of the website. \n\nThe component is composed of two main sections: a text section and a video section. The text section contains a heading and a button that says \"Start Collecting\". The video section contains a looping video that showcases some of the NFTs available for collection. \n\nThe text section is made up of a div element with a class of \"flex flex-col px-6 mx-auto -mb-32 max-w-7xl gap-10 mt-6 lg:gap-36 lg:flex-row lg:items-center lg:justify-between\". This div element contains two child elements: a div element with a class of \"flex-1\" and a Link component. The \"flex-1\" div element contains a paragraph element with a class of \"text-3xl md:text-6xl font-bold mb-4 md:mb-9\" that displays the heading \"It all starts with one egg.\" The Link component wraps a div element that displays the \"Start Collecting\" button. \n\nThe video section is made up of a div element with a class of \"flex items-center justify-center flex-1 h-full max-h-[198px] md:max-h-[583px] border border-33 rounded-2xl max-w-max mx-auto bg-black\". This div element contains a video element that displays the looping video. The video element has a source attribute that points to a video file hosted on IPFS. \n\nThis component can be used in the larger Zoo project as a landing page for users who are interested in collecting NFTs. The \"Start Collecting\" button can be linked to a page that displays all of the available NFTs for collection. The video section can be updated with new videos to showcase new NFTs as they become available. \n\nExample usage:\n\n```\nimport StartCollecting from \"./StartCollecting\";\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n \n This code defines a React component called `StartCollecting` that renders a section of a webpage with a video and a button that links to another page.\n\n2. What libraries or dependencies are being used in this code?\n \n This code imports two modules: `Link` from the `next/link` library and `React` from the `react` library. It also uses CSS classes from the `tailwindcss` library.\n\n3. What is the source of the video being displayed?\n \n The video source is a URL that points to a file hosted on the IPFS network.",
- "checksum": "c3c3e6e74a2df82ada62c1eb83d74704"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/UnimagineableExperience.json b/.autodoc/docs/json/core/src/pages/home/UnimagineableExperience.json
deleted file mode 100644
index 23436f22e..000000000
--- a/.autodoc/docs/json/core/src/pages/home/UnimagineableExperience.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "UnimagineableExperience.tsx",
- "filePath": "core/src/pages/home/UnimagineableExperience.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/UnimagineableExperience.tsx",
- "summary": "This code defines a React component called `UnimagineableExperience`. The component returns a JSX element that renders a full-screen video background with a centered heading that reads \"Unimaginable Experiences\". The video source is a short clip of trippy animal footage. The component also includes some CSS classes to style the layout of the elements.\n\nThis component can be used as a landing page or introduction to a larger project, particularly one related to zoos or animal experiences. It provides a visually engaging and immersive experience for the user, with the video background and large heading drawing attention to the main message of the page. The component is also responsive, adapting to different screen sizes and orientations.\n\nHere is an example of how this component could be used in a larger React application:\n\n```\nimport React from \"react\";\nimport UnimagineableExperience from \"./UnimagineableExperience\";\n\nconst App = () => {\n return (\n \n
\n );\n};\n\nexport default App;\n```\n\nIn this example, the `UnimagineableExperience` component is imported and rendered as the first element in the `App` component. Other components and content can be added below it to create a complete application.",
- "questions": "1. What is the purpose of this component?\n - This component is rendering a full-screen video background with a centered heading that reads \"Unimaginable Experiences\".\n\n2. What is the significance of the class names used in the JSX?\n - The class names are used for styling purposes and are likely part of a larger CSS framework or custom styling system.\n\n3. Where is the video file being sourced from?\n - The video file is being sourced from a local directory called \"videoes\" and is in the format of a webm file.",
- "checksum": "d2e5f95b87c130840755a066935d8a13"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/WhatToDo.json b/.autodoc/docs/json/core/src/pages/home/WhatToDo.json
deleted file mode 100644
index 614cf870b..000000000
--- a/.autodoc/docs/json/core/src/pages/home/WhatToDo.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "WhatToDo.tsx",
- "filePath": "core/src/pages/home/WhatToDo.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/WhatToDo.tsx",
- "summary": "The code above is a React component that renders a section of a web page for the Zoo project. The purpose of this component is to display a list of utilities that can be performed with the Zoo NFTs. The component is called WhatToDo and it is imported from the file located at `zoo`.\n\nThe component imports three modules: Image, Link, and React. The Image module is imported from the Next.js library and is used to display an arrow icon. The Link module is also imported from Next.js and is used to create links to external resources. The React module is imported to enable the use of React components.\n\nThe component defines an array of objects called utilities. Each object represents a utility that can be performed with the Zoo NFTs. Each object has a title and a link property. The title property is a string that describes the utility, while the link property is a URL that points to a resource that provides more information about the utility.\n\nThe component then renders a section of the web page that displays the list of utilities. The section contains a heading that describes the purpose of the list and a paragraph that provides additional information. The list of utilities is displayed as a grid of boxes, each containing the title of a utility and an arrow icon that links to the resource that provides more information about the utility.\n\nFinally, the component renders a section of the web page that displays an image of an egg and a button that links to a page where users can start collecting NFTs. The purpose of this section is to encourage users to start using the Zoo NFTs.\n\nOverall, this component provides a high-level overview of the utilities that can be performed with the Zoo NFTs and encourages users to start collecting them. It is a useful component for the Zoo project as it provides a clear and concise summary of the project's features and benefits.",
- "questions": "1. What is the purpose of the `utilities` array?\n \n The `utilities` array contains a list of different actions that can be performed with the Zoo NFTs, along with links to relevant documentation.\n\n2. What is the purpose of the `WhatToDo` component?\n \n The `WhatToDo` component appears to be a section of a larger website or application, and it displays information about the different actions that can be performed with Zoo NFTs.\n\n3. What is the significance of the egg animation in the `WhatToDo` component?\n \n The egg animation appears to be a visual representation of the starting point for collecting Zoo NFTs, as the accompanying text states that \"It all starts with 1 egg.\"",
- "checksum": "6c5c615f048b382f53be1519eb31e55e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/ZooFooter.json b/.autodoc/docs/json/core/src/pages/home/ZooFooter.json
deleted file mode 100644
index 787ce5d72..000000000
--- a/.autodoc/docs/json/core/src/pages/home/ZooFooter.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ZooFooter.tsx",
- "filePath": "core/src/pages/home/ZooFooter.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/ZooFooter.tsx",
- "summary": "The `ZooFooter` component is a React component that renders the footer section of a website. It imports several modules, including `React`, `useEffect`, `useState`, `Link`, `axios`, and `Image`. The component defines a state object `Form` that has an `email` property and two other state variables `success` and `error`. The `Form` state object is updated when the user types in their email address in the input field. The `handleSubmit` function is called when the user clicks the submit button. It sends a POST request to the `/api/subscribe` endpoint with the email address entered by the user. If the request is successful, the `Form` state object is updated with a success message, and the `success` state variable is set to `true`. If the request fails, the `Form` state object is updated with an error message, and the `error` state variable is set to `true`.\n\nThe `ZooFooter` component renders a section with the id `faqs`. It contains a logo, a grid with three columns, and a social media section. The first column contains links to the marketplace, chart, community, press, and learn pages. The second column contains links to the user's profile, connect wallet, whitepaper, FAQ, and contact us pages. The third column contains a newsletter subscription form. The form has an input field for the user's email address and a submit button. When the user submits the form, the `handleSubmit` function is called, and the email address is sent to the server. If the request is successful, a success message is displayed, and if it fails, an error message is displayed.\n\nThe `CustomLink` and `CustomIconLink` components are used to render links and icons in the footer. The `CustomLink` component takes two props, `link` and `title`, and renders a link to the specified `link` with the specified `title`. The `CustomIconLink` component takes two props, `link` and `icon`, and renders an icon that links to the specified `link`.\n\nOverall, the `ZooFooter` component provides a way for users to subscribe to a newsletter and navigate to different pages of the website. It also displays social media links and copyright information.",
- "questions": "1. What is the purpose of the `handleSubmit` function?\n- The `handleSubmit` function is responsible for sending an API request to subscribe the user's email to the newsletter. It updates the state variables `Form`, `error`, and `succes` based on the response from the API.\n\n2. What is the purpose of the `CustomLink` and `CustomIconLink` components?\n- The `CustomLink` and `CustomIconLink` components are used to create links and icons with links respectively. They are used in the `ZooFooter` component to create the various links and icons in the footer.\n\n3. What is the purpose of the `fadeInOnScroll` function?\n- The `fadeInOnScroll` function is commented out and not currently being used in the code. Without additional context, it is unclear what its purpose is.",
- "checksum": "50e6072a0ddf3c35e6451666477f40af"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/ZooNewsSection.json b/.autodoc/docs/json/core/src/pages/home/ZooNewsSection.json
deleted file mode 100644
index 3eea02b14..000000000
--- a/.autodoc/docs/json/core/src/pages/home/ZooNewsSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ZooNewsSection.tsx",
- "filePath": "core/src/pages/home/ZooNewsSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/ZooNewsSection.tsx",
- "summary": "The `ZooNewsSection` component is a React component that renders a section of the Zoo website dedicated to news about the project. The component imports the `React` and `useEffect` modules from the `react` package, as well as the `Image` component from the `next/image` package. It also imports an `fadeInOnScroll` function from an `animation` module located in a different part of the project.\n\nThe component renders a section element with the class name `ZooNews`. The section contains two child elements: a div with the class name `pt-16 pb-16 px-6 lg:max-w-7xl lg:mx-auto`, and a div with the class name `flex flex-col items-center max-w-xl lg:max-h-[494px] mx-auto lg:flex-row lg:items-stretch lg:max-w-5xl`.\n\nThe first child div contains two child elements: a div with the class name `flex items-center text-center flex-col`, and a paragraph element. The first child div contains a heading element with the text \"ZOO News\" and a paragraph element with a description of the news content.\n\nThe second child div contains two child elements: an `Image` component and a div with the class name `flex flex-col justify-center w-full lg:basis-1/2 bg-deep-gray rounded-r-2xl lg:-ml-2 -mt-3 lg:-mt-0`. The `Image` component displays an SVG image of the Zoo logo. The second child div contains a div with the class name `max-w-sm mx-auto py-8 lg:py-0 px-4 lg:px-0`, which contains a heading element, a paragraph element, and a link to a blog post.\n\nThe `ZooNewsSection` component does not use the `fadeInOnScroll` function, which is commented out. The component exports itself as the default export of the module.\n\nThis component can be used in the larger Zoo project to display news content to users. It is a reusable component that can be included in other pages or components that need to display news content. Developers can customize the content of the component by changing the text and images displayed. For example, they can replace the Zoo logo with a different image, or change the text of the heading and paragraph elements to reflect different news content.",
- "questions": "1. What is the purpose of the `fadeInOnScroll` function and why is it commented out?\n- The `fadeInOnScroll` function is an animation function that fades in an element on scroll. It is likely commented out because it is not currently being used or may have caused issues with the component's rendering.\n\n2. What is the `ZooNewsSection` component responsible for rendering?\n- The `ZooNewsSection` component renders a section of the Zoo website that displays news and information about the company's NFTs, conservation efforts, and educational resources.\n\n3. What is the purpose of the `Image` component and what props are being passed to it?\n- The `Image` component is being used to display an SVG image of the Zoo logo. The `src`, `width`, `height`, `alt`, and `objectFit` props are being passed to it to specify the image source, dimensions, accessibility text, and how the image should be scaled to fit its container.",
- "checksum": "c542d4ada773e81b26005cecf7598be4"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/home/index.json b/.autodoc/docs/json/core/src/pages/home/index.json
deleted file mode 100644
index 2cb5952c6..000000000
--- a/.autodoc/docs/json/core/src/pages/home/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/home/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/home/index.tsx",
- "summary": "The `Home` component in this file is the main entry point for the Zoo project's homepage. It imports various components and libraries such as `lodash`, `next/dynamic`, `react`, `axios`, and others. \n\nThe `Home` component renders several sections of the homepage, including the hero section, buy egg section, unimagineable experience section, reliable governance section, what to do section, grab animal section, marketplace section, and FAQ section. \n\nThe `getTypeURIs` function takes a string argument and returns an object with two properties: `contentURI` and `metadataURI`. These properties are URLs that point to the image and metadata of the specified type. \n\nThe `grabAnimal` and `grabAnimal2` arrays contain objects with information about animals that users can purchase on the Zoo marketplace. The `slideData` array contains objects with information about how to set up a Metamask wallet. The `experiences` array contains objects with information about the benefits of using the Zoo platform. \n\nThe `useTokenTypes` hook is imported from the `zoo/state` module and used to retrieve the token types from the Zoo platform. The `fetchBlog` function is defined using the `useCallback` hook and retrieves the latest blog posts from the Zoo Medium page using the `axios` library. \n\nOverall, this file defines the `Home` component that serves as the main entry point for the Zoo project's homepage. It imports various components and libraries and renders several sections of the homepage. It also defines helper functions and arrays with information about animals, Metamask wallets, and the benefits of using the Zoo platform.",
- "questions": "1. What is the purpose of the `getTypeURIs` function?\n- The `getTypeURIs` function returns an object containing the content and metadata URIs for a given type, with the base URL being \"https://db.zoolabs.io\".\n\n2. What is the significance of the `grabAnimal` and `grabAnimal2` arrays?\n- The `grabAnimal` and `grabAnimal2` arrays contain objects with information about different animals and steps to take in order to participate in the Zoo Marketplace.\n\n3. What is the purpose of the `fetchBlog` function and how is it used?\n- The `fetchBlog` function is used to fetch blog data from the Medium API and set it in the `blogs` state. It is called in a `useEffect` hook to fetch the data on component mount.",
- "checksum": "33be6c520b9feed2388d0045cea462ae"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/index.json b/.autodoc/docs/json/core/src/pages/index.json
deleted file mode 100644
index f551ab797..000000000
--- a/.autodoc/docs/json/core/src/pages/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/index.tsx",
- "summary": "This code is a React component that serves as the main dashboard for the Zoo project. It imports several dependencies, including React, nanoid from the Redux Toolkit, GetStaticProps from Next.js, Head from Next.js, loadTranslation from the entities file, Home component, and HomeLayout component. \n\nThe code exports a function called getStaticProps that is used to fetch data at build time. This function takes a locale parameter and generates a unique sessionId using nanoid. It then calls the loadTranslation function from the entities file, passing in the locale, sessionId, and a boolean indicating whether the environment is in production. The messages returned from this function are spread into an object and returned as props.\n\nThe default export of the file is a React component called Dashboard. This component renders a Head component from Next.js, which sets the title and meta description of the page. It also renders a Home component, which is the main content of the dashboard. Finally, the code sets the Layout property of the Dashboard component to the HomeLayout component.\n\nThis code is used to generate the main dashboard page of the Zoo project. The getStaticProps function is used to fetch translation messages at build time, which are then passed as props to the Dashboard component. The Dashboard component renders the main content of the dashboard, including the Home component and the Head component. The HomeLayout component is used to provide a consistent layout for the dashboard. \n\nExample usage:\n\n```jsx\nimport Dashboard from \"./path/to/dashboard\";\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `getStaticProps` function?\n- The `getStaticProps` function is used to fetch data at build time and pass it as props to the component.\n\n2. What is the significance of the `Dashboard.Layout` property?\n- The `Dashboard.Layout` property is used to specify the layout component for the `Dashboard` component.\n\n3. What is the purpose of the `loadTranslation` function?\n- The `loadTranslation` function is used to load translation messages for a given locale and session ID.",
- "checksum": "89ab76a7ec0f7adf435b317eb5c455af"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/learn/index.json b/.autodoc/docs/json/core/src/pages/learn/index.json
deleted file mode 100644
index 29d92e0a7..000000000
--- a/.autodoc/docs/json/core/src/pages/learn/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/learn/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/learn/index.tsx",
- "summary": "The code above is a React component called `Learn`. It imports a component called `ComingSoon` from a file located at \"components/ComingSoon\". When the `Learn` component is rendered, it returns a div element with an empty class name and the `ComingSoon` component inside it.\n\nThe purpose of this code is to display a \"Coming Soon\" message to users who try to access the `Learn` section of the larger project. This could be used in a variety of ways, such as when a new feature or section of the project is being developed and is not yet ready for public use. \n\nHere is an example of how this code might be used in the larger project:\n\n```jsx\nimport Learn from \"components/Learn\";\n\nconst App = () => {\n const [showLearn, setShowLearn] = useState(false);\n\n // logic to determine whether to show the Learn component\n // based on user permissions or other conditions\n\n return (\n \n {showLearn ?
\n );\n};\n\nexport default App;\n```\n\nIn this example, the `Learn` component is conditionally rendered based on some logic that determines whether the user has access to that section of the project. If the user does not have access, a message is displayed instead. \n\nOverall, the `Learn` component serves as a placeholder for a future feature or section of the project, and allows developers to work on that feature without disrupting the user experience.",
- "questions": "1. What is the purpose of the `ComingSoon` component?\n - The `ComingSoon` component is likely a placeholder for a feature or section of the `Learn` page that is not yet implemented or under development.\n\n2. What other components or elements are included in the `Learn` page?\n - The code only shows the `ComingSoon` component being rendered within a `div` element with an empty `className`. It is unclear what other components or elements are included in the `Learn` page.\n\n3. What is the overall functionality or purpose of the `Learn` page within the `zoo` project?\n - The code only shows the rendering of the `ComingSoon` component within the `Learn` page. It is unclear what the overall functionality or purpose of the `Learn` page is within the `zoo` project.",
- "checksum": "62763981b3fb93a45d5059192eee945f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/my-nft.json b/.autodoc/docs/json/core/src/pages/my-nft.json
deleted file mode 100644
index 198c935cb..000000000
--- a/.autodoc/docs/json/core/src/pages/my-nft.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "my-nft.tsx",
- "filePath": "core/src/pages/my-nft.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/my-nft.tsx",
- "summary": "This code defines a React component called `Seemynft` that renders a page displaying information about a user's NFTs (non-fungible tokens) in the context of the larger project called \"zoo\". \n\nThe component imports several dependencies: `React`, `Image` from the `next/image` library, and two custom components called `ZooItem`, `TradingHistory`, and `AllMyNfts`. \n\nThe `Seemynft` component returns a JSX element that contains three child components: `ZooItem`, `TradingHistory`, and `AllMyNfts`. The `ZooItem` component displays information about a specific NFT, including an image, title, description, and price. The `TradingHistory` component displays a history of the user's trading activity for their NFTs. The `AllMyNfts` component displays a list of all the user's NFTs. \n\nThis component is likely used as a page in the larger \"zoo\" project that allows users to view and manage their NFTs. The `Seemynft` component could be used in conjunction with other components to create a dashboard or profile page for users to manage their NFTs. \n\nHere is an example of how the `Seemynft` component could be used in a larger project:\n\n```\nimport React from \"react\";\nimport Seemynft from \"./Seemynft\";\nimport OtherComponents from \"./OtherComponents\";\n\nconst MyNftsPage = () => {\n return (\n You do not have access to this section.
}\n\n
\n );\n};\n\nexport default MyNftsPage;\n```\n\nIn this example, the `MyNftsPage` component renders the `Seemynft` component along with other components that make up the user's NFT management page.",
- "questions": "1. What dependencies are being imported in this file?\n- The code imports React, Image from Next.js, ZooItem, AllMyNfts, and TradingHistory components.\n\n2. What is the purpose of the Seemynft component?\n- The Seemynft component returns a JSX element that renders the ZooItem, TradingHistory, and AllMyNfts components in a grid layout.\n\n3. What props are being passed to the ZooItem component?\n- The ZooItem component is being passed the src, infoTitle, infoDesc, and authenticityPrice props.",
- "checksum": "fdc05cae7197a3b39c0ee148aff11ee3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/nft-info/index.json b/.autodoc/docs/json/core/src/pages/nft-info/index.json
deleted file mode 100644
index f65e869e7..000000000
--- a/.autodoc/docs/json/core/src/pages/nft-info/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/nft-info/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/nft-info/index.tsx",
- "summary": "The `NftInfo` component is a React component that renders information about a specific NFT (non-fungible token). The component imports the `Image` component from the `next/image` library and the `Modal` component from a local file located at `../../components/Modal/`. \n\nThe component renders an image of the NFT, along with some details about the NFT, such as its name, generation, and transaction details. The component also includes a button that, when clicked, opens a modal window that displays additional information about the NFT. \n\nThe `NftInfo` component is likely used in a larger project that involves buying, selling, and trading NFTs. The component could be used on a page that displays a list of NFTs for sale, and when a user clicks on a specific NFT, the `NftInfo` component would be rendered to display more information about that NFT. \n\nHere is an example of how the `NftInfo` component could be used in a larger project:\n\n```\nimport React from \"react\";\nimport NftInfo from \"./NftInfo\";\n\nconst NftList = ({ nfts }) => {\n return (\n \n {nfts.map((nft) => (\n
\n );\n};\n\nexport default NftList;\n```\n\nIn this example, the `NftList` component receives an array of NFTs as a prop, and maps over the array to render an `NftInfo` component for each NFT. The `NftInfo` component would receive the specific NFT as a prop, and would render the information for that NFT.",
- "questions": "1. What is the purpose of the `Modal` component and how is it triggered?\n- The `Modal` component is used to display additional information when the \"Place bid\" button is clicked. It is triggered by setting the `isOpen` state to `true` when the button is clicked.\n\n2. What is the significance of the commented out `TransactionHistory` component?\n- The `TransactionHistory` component was previously used to display transaction history related to the NFT, but it is currently commented out and not being used. It is unclear why it was commented out or if it will be used again in the future.\n\n3. What is the purpose of the `Proof of Authenticity` section and how is it related to the NFT?\n- The `Proof of Authenticity` section displays the price of the NFT in $ZOO and provides a link to view the NFT on IPS. It is related to the NFT by providing additional information about its authenticity and value.",
- "checksum": "33f0dbf4503303c47a60ec76b1be06ca"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/nft/index.json b/.autodoc/docs/json/core/src/pages/nft/index.json
deleted file mode 100644
index 57511541a..000000000
--- a/.autodoc/docs/json/core/src/pages/nft/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/nft/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/nft/index.tsx",
- "summary": "The `Nft` component is a React component that renders a page for displaying information about a specific NFT (non-fungible token). The page is divided into two main sections: an image of the NFT and a section with details about the NFT.\n\nThe image section displays an animated GIF of an egg and a button to place a bid. The egg image is wrapped in a div that has a reference set to `nftImageRef`. This reference is used in the `useEffect` hook to apply an animation to the image when the component mounts. The animation is defined in the `fadeInFromLeft` function, which is imported from the `animation` module. The button to place a bid is styled with a gradient background and a rounded shape.\n\nThe details section displays information about the NFT, including its name, description, and various metadata. The section is divided into two parts: a box with general details and a box with proof of authenticity. The general details box is wrapped in a div that has a reference set to `nftContentRef`. This reference is used in the `useEffect` hook to apply an animation to the box when the component mounts. The animation is defined in the `fadeInFromRight` function, which is also imported from the `animation` module.\n\nThe proof of authenticity box displays a price in $ZOO and a link to view the NFT on IPS (InterPlanetary File System). The link is styled with an arrow icon and is clickable.\n\nAt the bottom of the page, there is a section that displays popular NFTs and a link to view all NFTs.\n\nThis component can be used in the larger project as a template for displaying information about individual NFTs. It can be customized with different images, descriptions, and metadata to display information about different NFTs. The animation functions can also be reused in other parts of the project to apply consistent animations.",
- "questions": "1. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to trigger the `fadeInFromLeft` and `fadeInFromRight` animations on the `nftImageRef` and `nftContentRef` elements respectively, when the component mounts.\n\n2. What is the significance of the `Image` component imported from \"next/image\"?\n- The `Image` component is used to display an image with optimized performance and user experience, by automatically optimizing images based on the device and network conditions.\n\n3. What is the purpose of the `PopularNftsSection` component imported from \"pages/home/PopularNftsSection\"?\n- The `PopularNftsSection` component is used to display a section of popular NFTs on the home page of the application.",
- "checksum": "5e2d46952b074fd1646ce85ecd85afa8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/partnerships/index.json b/.autodoc/docs/json/core/src/pages/partnerships/index.json
deleted file mode 100644
index 168c3b39c..000000000
--- a/.autodoc/docs/json/core/src/pages/partnerships/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/partnerships/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/partnerships/index.tsx",
- "summary": "The `Partnership` component is a React component that renders a section of the Zoo website related to partnerships and donations. The component imports several dependencies, including React, Next.js, Material UI, and an animation library. \n\nThe component starts by defining a custom styled switch component using Material UI's `styled` function. The `UiSwitch` component is a switch with a custom thumb that displays the Zoo logo. \n\nThe `Partnership` component then defines a `partnerRef` using React's `useRef` hook and a `checked` state variable using React's `useState` hook. The `useEffect` hook is used to apply a fade-in animation to the `partnerRef` element when the component mounts. \n\nThe component then renders several sections of content related to Zoo partnerships and donations. The first section includes a heading and a paragraph of text. The second section includes two paragraphs of text. The third section includes a custom switch component, an input field, and a button. \n\nOverall, the `Partnership` component provides a way for users to learn about Zoo partnerships and make donations. The custom switch component adds a unique touch to the donation form. \n\nExample usage: \n\n```jsx\nimport Partnership from \"./Partnership\";\n\nfunction App() {\n return (\n \n
\n ))}\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `UiSwitch` component and how is it styled?\n \n The `UiSwitch` component is a custom styled switch component from the Material UI library. It is styled using the `styled` function from Material UI and has custom styles for the switch base, thumb, and track.\n\n2. What is the purpose of the `fadeInOnScroll` function and where is it used?\n \n The `fadeInOnScroll` function is an animation function that fades in an element when it comes into view on the screen. It is used in the `useEffect` hook to apply the animation to the `partnerRef` element.\n\n3. What is the purpose of the `Switch` component from Material UI and how is it used in this code?\n \n The `Switch` component from Material UI is a basic switch component that can be used to toggle between two states. It is used in this code to create a switch that toggles between a one-time donation and a monthly donation. The `checked` state is controlled by the `checked` prop and the `onChange` function updates the state when the switch is toggled.",
- "checksum": "9910a10cf693612628af10adc37bc5c6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/press/index.json b/.autodoc/docs/json/core/src/pages/press/index.json
deleted file mode 100644
index 9d5019115..000000000
--- a/.autodoc/docs/json/core/src/pages/press/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/press/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/press/index.tsx",
- "summary": "The code above is a React component that renders a \"Coming Soon\" message. The component is imported from a file located at \"components/ComingSoon\". The purpose of this code is to provide a placeholder for a future feature or section of the website that is currently under development. \n\nThis component is likely to be used in the larger project as a way to inform users that a particular section of the website is not yet available. For example, if the website is a zoo website, this component may be used to indicate that a new exhibit or feature is coming soon. \n\nThe code is relatively simple. It defines a functional component called \"Press\" that returns a div containing the \"ComingSoon\" component. The \"ComingSoon\" component is likely to be a simple message or graphic that indicates that the feature is not yet available. \n\nHere is an example of how this component might be used in a larger project:\n\n```\nimport Press from \"components/Press\";\n\nconst App = () => {\n return (\n \n
\n );\n};\n\nexport default App;\n```\n\nIn this example, the \"Press\" component is used to indicate that a particular section of the website is not yet available. The message is displayed between the heading and the paragraph, providing a clear indication to the user that the website is still under development. \n\nOverall, this code provides a simple and effective way to indicate that a particular feature or section of the website is not yet available. It is likely to be used in a larger project as a way to manage user expectations and provide a clear indication of what is coming soon.",
- "questions": "1. What is the purpose of the `ComingSoon` component?\n - The `ComingSoon` component is likely a placeholder or teaser for a feature or section that is not yet available.\n2. Why is the `Press` component importing the `ComingSoon` component?\n - It is unclear why the `Press` component is importing the `ComingSoon` component without additional context about the overall functionality of the `zoo` project.\n3. What is the intended use of the `Press` component within the `zoo` project?\n - Without additional information about the project requirements or goals, it is unclear how the `Press` component fits into the overall functionality of the `zoo` project.",
- "checksum": "4b5456ca66224d1fd1a2656ca3fe5918"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/reward-calculator/index.json b/.autodoc/docs/json/core/src/pages/reward-calculator/index.json
deleted file mode 100644
index 21e5b22b8..000000000
--- a/.autodoc/docs/json/core/src/pages/reward-calculator/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/reward-calculator/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/reward-calculator/index.tsx",
- "summary": "The `RewardCalculator` component is a React component that calculates the potential rewards for a user based on the collateral amount, term, and animal selected. The component imports several components from external libraries such as `recharts` and `components/Slider`. It also imports a custom hook `useGetAvailableEggs` from the `zoo` slice of the Redux store.\n\nThe component renders a form with three input fields: Collateral Amount, Term, and Animal. The Collateral Amount field is disabled, while the Term and Animal fields are dropdown menus. The Term dropdown menu has three options: 6 months, 12 months, and 18 months. The Animal dropdown menu is populated with options based on the available eggs in the Redux store. The options are dynamically generated based on the `availableEggs` state variable.\n\nWhen the user selects a Term and an Animal, the component calculates the potential rewards based on the yield of the selected animal and the selected term. The calculation is done in the `handleChange` function, which generates an array of objects representing the monthly rewards for the selected term. The array is then passed to a `LineChart` component from the `recharts` library, which displays the data in a line chart.\n\nThe component also includes a `MarketTypeSlider` component from the `components/Slider` library, which allows the user to adjust the potential rewards based on the market type. The slider has seven positions, ranging from \"Super Bearish\" to \"Moon\". The selected position is used to calculate the potential rewards, which are displayed in the `LineChart`.\n\nOverall, the `RewardCalculator` component is a useful tool for users to calculate their potential rewards based on their collateral amount, term, animal, and market type. It provides a visual representation of the potential rewards in a line chart, which can help users make informed decisions about their investments.",
- "questions": "1. What is the purpose of the `useGetAvailableEggs` hook and how is it used in this code?\n \n The `useGetAvailableEggs` hook is used to fetch a list of available eggs from the zoo state. It is called in the `useEffect` hook to fetch the eggs when the component mounts.\n\n2. What is the purpose of the `handleChange` function and how is it used in this code?\n \n The `handleChange` function is used to generate data for the line chart based on the selected time frame and animal yield. It returns an array of objects with the name of the month and the corresponding amount of yield. It is called in the `useMemo` hook to memoize the data and avoid unnecessary re-renders.\n\n3. What is the purpose of the `MarketTypeSlider` component and how is it used in this code?\n \n The `MarketTypeSlider` component is used to display a slider that allows the user to select a market type and see the corresponding earning potential. It is used in the second column of the grid to display the slider and the earning potential values. The `onChange` prop is used to update the `earning` state when the slider value changes.",
- "checksum": "55d75b7b4566c0bddadda4d7b5a0b8dc"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/store/HeroSection.json b/.autodoc/docs/json/core/src/pages/store/HeroSection.json
deleted file mode 100644
index 73383c1c4..000000000
--- a/.autodoc/docs/json/core/src/pages/store/HeroSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "HeroSection.tsx",
- "filePath": "core/src/pages/store/HeroSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/store/HeroSection.tsx",
- "summary": "The `HeroSection` component is a React component that renders a search bar and links to the shopping cart and checkout pages of an online store. The component imports the `Link` component from the Next.js library and the `useAppSelector` hook and `CartItem` type from the project's state management and type definitions, respectively.\n\nThe `HeroSection` component uses the `useAppSelector` hook to retrieve the `CartItems` array from the project's Redux store. This array contains the items that the user has added to their shopping cart. The component then renders a search bar and two links. The search bar allows the user to search for products in the store. The first link leads to the shopping cart page and displays the number of items in the cart. The number of items is obtained from the `CartItems` array. The second link leads to the checkout page.\n\nThe component uses Tailwind CSS classes to style the search bar and links. The search bar has a dark background and white text. The links have a dark background and light text. The shopping cart link has an image of a shopping cart and the number of items in the cart next to it.\n\nThis component can be used in the larger project as a reusable component that can be included in multiple pages of the online store. It provides a consistent user interface for searching for products and accessing the shopping cart and checkout pages. Developers can customize the component's appearance and behavior by modifying the Tailwind CSS classes and the links' URLs. For example, they can change the color scheme, add or remove links, or change the text displayed on the links. \n\nExample usage:\n\n```jsx\nimport HeroSection from \"zoo/components/HeroSection\";\n\nconst HomePage = () => {\n return (\n Welcome to the Zoo Website
\nCheck back soon for updates!
\n\n
\n );\n};\n\nexport default HomePage;\n```",
- "questions": "1. What is the purpose of the `useAppSelector` hook and how is it used in this code?\n - The `useAppSelector` hook is used to extract data from the Redux store in the application state. In this code, it is used to retrieve the `CartItems` array from the store.\n2. What is the purpose of the `Link` component and how is it used in this code?\n - The `Link` component is used to create links to other pages within the application. In this code, it is used to create links to the shopping cart and checkout pages.\n3. What is the purpose of the `HeroSection` component and where is it used in the application?\n - The `HeroSection` component is used to display the search bar and links to the shopping cart and checkout pages. It is likely used on the homepage or a main store page of the application.",
- "checksum": "c62e1704e1adabb9af81d1c375879c33"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/store/ProductsSection.json b/.autodoc/docs/json/core/src/pages/store/ProductsSection.json
deleted file mode 100644
index 4c3c7b7d6..000000000
--- a/.autodoc/docs/json/core/src/pages/store/ProductsSection.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ProductsSection.tsx",
- "filePath": "core/src/pages/store/ProductsSection.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/store/ProductsSection.tsx",
- "summary": "The `ProductsSection` component is a React component that renders a section of the Zoo Store website that displays a list of products. The component imports the `useState` and `useAppSelector` hooks from the `react` and `state/hooks` modules respectively, and the `Product` type from the `types/product` module. \n\nThe `ProductInterface` interface defines the shape of a product object, which has properties such as `name`, `price`, `description`, `properties`, `image`, `gallery_image`, `quantity`, `_id`, and `status`. The `properties` property is an object that contains arrays of strings representing the available colors, sizes, and adendums for the product.\n\nThe `ProductsSection` component uses the `useAppSelector` hook to retrieve the `Products` array from the store state. If the `Products` array is not empty, the component maps over the array and renders a product card for each product. Each product card contains an image, name, short description, and base price. If the `Products` array is empty, the component displays a message indicating that there are no products.\n\nThe component is exported as the default export of the module, which means that it can be imported and used in other parts of the Zoo Store website. For example, the component could be imported and rendered in the `Home` component to display the list of products on the home page of the website.\n\nExample usage:\n\n```\nimport ProductsSection from 'zoo/ProductsSection';\n\nconst Home = () => {\n return (\n \n
\n );\n};\n\nexport default Home;\n```",
- "questions": "1. What is the purpose of the `ProductsSection` component?\n- The `ProductsSection` component is responsible for rendering a section of the Zoo Store that displays a list of products.\n\n2. What is the `ProductInterface` interface used for?\n- The `ProductInterface` interface defines the structure of a product object, including its name, price, description, properties, image, and other attributes.\n\n3. What is the `useAppSelector` hook used for?\n- The `useAppSelector` hook is used to extract data from the Redux store in the Zoo project. In this case, it is used to retrieve the `Products` array from the store and render it in the component.",
- "checksum": "583145a6d6357cb5172989fcbbd6efb5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/store/[id]/index.json b/.autodoc/docs/json/core/src/pages/store/[id]/index.json
deleted file mode 100644
index 9fe4bd961..000000000
--- a/.autodoc/docs/json/core/src/pages/store/[id]/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/store/[id]/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/store/[id]/index.tsx",
- "summary": "The `ShopDetails` component is responsible for rendering the details of a single product in the online store. It imports several hooks and types from other files in the project, including `useCart` and `CartItem` from `state/store/hooks`, `Product` from `types/product`, and `useAppSelector` from `state/hooks`. \n\nThe component starts by initializing several state variables using the `useState` hook, including `product`, `size`, `color`, and `adendums`. It then uses the `useRouter` hook from the `next/router` library to get the `id` of the product from the URL. It also uses the `useAppSelector` hook to get the `Products` and `CartItems` from the global store. \n\nThe `useEffect` hook is used to set the `product` state variable to the product with the matching `id` from the `Products` array. This ensures that the correct product details are displayed on the page.\n\nThe component then renders the product details, including the product name, price, description, and images. It also renders a dropdown menu for selecting the product size, and buttons for adding or removing the product from the cart. If the product is already in the cart, the \"Remove From Cart\" button is displayed, otherwise the \"Add To Cart\" button is displayed. \n\nOverall, this component plays an important role in the larger project by allowing users to view and purchase products from the online store. It relies on several other hooks and types from other files in the project, and uses state variables to keep track of the selected product size, color, and adendums. Developers working on the project could use this component as a starting point for building out additional features related to product details and purchasing. \n\nExample usage:\n\n```jsx\nimport ShopDetails from 'path/to/ShopDetails';\n\nfunction ProductPage() {\n return (\n Welcome to the Zoo Store
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to update the `product` state variable when the `Products` or `id` variables change.\n\n2. What is the role of the `useAllProducts` hook in this code?\n- The `useAllProducts` hook is not used in this code and can be removed.\n\n3. What is the purpose of the `adendums` state variable?\n- The `adendums` state variable is used to store an array of additional product properties that are selected by the user.",
- "checksum": "47677215e0074c4014b20d814b06e147"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/store/checkout/cart.json b/.autodoc/docs/json/core/src/pages/store/checkout/cart.json
deleted file mode 100644
index 8a967b8e1..000000000
--- a/.autodoc/docs/json/core/src/pages/store/checkout/cart.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "cart.tsx",
- "filePath": "core/src/pages/store/checkout/cart.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/store/checkout/cart.tsx",
- "summary": "The `Cart` component is responsible for rendering the shopping cart page of the e-commerce website. It imports several modules including `Link` and `useState` from the `next` and `react` libraries respectively. It also imports `useAppSelector` and `useCart` from the `state` module, `CartItem` from the `types/cart` module, and `Product` from the `types/product` module.\n\nThe `Cart` component uses the `useCart` hook to get the `addToCart`, `removeFromCart`, `updateCart`, and `clearCart` functions. These functions are used to add, remove, update, and clear items from the cart respectively. It also uses the `useAppSelector` hook to get the `Products` and `CartItems` from the store.\n\nThe `Cart` component renders the shopping cart page with a list of items in the cart, their images, names, descriptions, properties, base prices, and quantities. It also calculates the subtotal of the items in the cart and displays it. If the cart is empty, it displays a message saying so. The component also displays a checkbox for agreeing to the terms and conditions and a checkout button that links to the shipping page.\n\nThe `Cart` component also displays a list of new releases that are not in the cart. It filters the `Products` array to exclude items that are already in the cart and maps the remaining items to display their images, names, short descriptions, and base prices. Clicking on an item takes the user to the product page.\n\nThis component can be used in the larger project to provide users with a way to view and manage items in their shopping cart. It can also be used to display related products that the user may be interested in. Developers can customize the component to fit the design and functionality of their e-commerce website. For example, they can add more fields to the `CartItem` and `Product` types, change the layout of the shopping cart page, or add more filters to the list of new releases.",
- "questions": "1. What state management library is being used in this code?\n- The code is using the `useAppSelector` and `useCart` hooks, which suggests that it is using the Redux state management library.\n\n2. What is the purpose of the `Cart` component?\n- The `Cart` component is responsible for rendering the contents of the user's shopping cart, as well as the subtotal and other related information.\n\n3. What is the purpose of the `Link` component imported from \"next/link\"?\n- The `Link` component is used to create a link to the checkout page, which is located at \"/store/checkout/shipping\".",
- "checksum": "0b706e3a2f9dc3348c17d882f9f36321"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/store/checkout/payment.json b/.autodoc/docs/json/core/src/pages/store/checkout/payment.json
deleted file mode 100644
index 2883422fc..000000000
--- a/.autodoc/docs/json/core/src/pages/store/checkout/payment.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "payment.tsx",
- "filePath": "core/src/pages/store/checkout/payment.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/store/checkout/payment.tsx",
- "summary": "The `Shipping` component is responsible for rendering the shipping and payment information for the zoo project. It is a functional component that returns a JSX element. \n\nThe component is divided into two sections: the shipping section and the payment section. The shipping section displays the contact information, shipping address, and shipping method. Each section has a \"Change\" button that allows the user to modify the information. \n\nThe payment section displays a list of payment options. Each payment option is represented by an image and a radio button. The user can select one of the payment options to proceed with the payment. \n\nAt the bottom of the payment section, there is a \"Pay Now\" button that the user can click to complete the payment process. \n\nThis component can be used in the larger project by importing it and rendering it in a parent component that handles the overall checkout process. For example, the `Shipping` component can be rendered in a `Checkout` component that also handles the cart items and the total amount. \n\nHere is an example of how the `Shipping` component can be used in a `Checkout` component:\n\n```\nimport Shipping from './Shipping';\n\nconst Checkout = () => {\n return (\n \n {/* Render cart items and total amount */}\n
\n );\n};\n\nexport default Checkout;\n```\n\nOverall, the `Shipping` component provides a user-friendly interface for the shipping and payment information in the zoo project.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called Shipping that renders a form for entering shipping and payment information.\n\n2. What styling framework is being used in this code?\n- The code is using Tailwind CSS classes for styling.\n\n3. What payment methods are available in this form?\n- The form includes options for paying with Metamask, Moonpay, Stripe, and Paypal.",
- "checksum": "b6de089ff9a7deaa7626c59050de2edb"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/store/checkout/shipping.json b/.autodoc/docs/json/core/src/pages/store/checkout/shipping.json
deleted file mode 100644
index 35dee69e4..000000000
--- a/.autodoc/docs/json/core/src/pages/store/checkout/shipping.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "shipping.tsx",
- "filePath": "core/src/pages/store/checkout/shipping.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/store/checkout/shipping.tsx",
- "summary": "The `Info` component is responsible for rendering the shipping information form and the payment information for the checkout process of the online store. It imports several dependencies such as `Link` from Next.js, `useEffect` and `useState` from React, and `useAppSelector` from the store's hooks. It also imports the `CartItem` type from the `cart` file and the `countries` array from the `data` folder.\n\nThe component initializes several state variables using the `useState` hook. The `shippingDetails` state variable is an object that contains the user's email, first name, and last name. The `shippingPrice` state variable is a number that represents the shipping cost. The `subTotal` state variable is a number that represents the total cost of the items in the cart. The `country` state variable is a string that represents the user's country.\n\nThe component also initializes a `settings` object that is used to configure the `Slider` component from the `react-slick` library. The `handleChange` function is used to update the `shippingDetails` state variable when the user inputs their information into the form.\n\nThe `useAppSelector` hook is used to retrieve the `CartItems` array from the store. The `useEffect` hook is used to update the `subTotal` state variable whenever the `CartItems` array changes.\n\nThe `Info` component renders a form that allows the user to input their shipping information. The form includes fields for the user's email, first name, last name, address, city, state, postal code, and phone number. The form also includes a checkbox that allows the user to opt-in to receive news and offers via email.\n\nThe component also renders a section that displays the user's cart items. The `Slider` component is used to display each item in a carousel. The component also displays the subtotal, shipping cost, and total cost of the items in the cart.\n\nThe component includes buttons that allow the user to continue to the payment information section or return to the cart. The `Link` component from Next.js is used to create these buttons.\n\nOverall, the `Info` component is an important part of the checkout process for the online store. It allows the user to input their shipping information and displays the cost of their items and shipping. The component is reusable and can be used in other parts of the project that require shipping information input.",
- "questions": "1. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to update the `subTotal` state variable whenever the `CartItems` state variable changes.\n\n2. What is the purpose of the `Slider` component from the `react-slick` library?\n- The `Slider` component is used to display each item in the user's cart in a carousel format.\n\n3. Where is the `countries` array imported from and what is it used for?\n- The `countries` array is imported from a file located at `data/countries` and is used to populate a dropdown menu with a list of countries for the user to select from when entering their shipping address.",
- "checksum": "e3a19572da33c976739b97f30c8a02b9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/store/index.json b/.autodoc/docs/json/core/src/pages/store/index.json
deleted file mode 100644
index 85a49f5e7..000000000
--- a/.autodoc/docs/json/core/src/pages/store/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/store/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/store/index.tsx",
- "summary": "The `Shop` component is a React component that renders a page for an online shop. It imports two components, `HeroSection` and `ProductsSection`, which are responsible for rendering the hero section and the products section of the page, respectively. \n\nThe `useEffect` hook is used to fetch all the products from the store using the `useAllProducts` hook, which is imported from the `state/store/hooks` module. The `useEffect` hook is called only once, when the component mounts, and it calls the `getProducts` function to fetch all the products.\n\nThe `Shop` component returns a div that contains the `HeroSection` and `ProductsSection` components. The `HeroSection` component is responsible for rendering the hero section of the page, which typically contains a banner or an image that promotes the shop or a specific product. The `ProductsSection` component is responsible for rendering the products section of the page, which typically contains a list of products that are available for purchase.\n\nThis component can be used as a template for an online shop page. It can be customized by modifying the `HeroSection` and `ProductsSection` components to fit the specific needs of the shop. For example, the `HeroSection` component can be modified to display a different banner or image, and the `ProductsSection` component can be modified to display different products or categories of products.\n\nHere is an example of how the `Shop` component can be used in a larger project:\n\n```jsx\nimport React from \"react\";\nimport Shop from \"./Shop\";\n\nconst App = () => {\n return (\n \n
\n );\n};\n\nexport default App;\n```\n\nIn this example, the `Shop` component is rendered inside the `App` component, which is the main component of the application. The `App` component renders a heading that welcomes the user to the shop, followed by the `Shop` component, which renders the shop page.",
- "questions": "1. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to call the `getProducts` function after the component mounts, by passing an empty dependency array as the second argument.\n\n2. Where is the `useAllProducts` function defined?\n- The `useAllProducts` function is defined in a file located at `state/store/hooks`.\n\n3. What components are being rendered in the `return` statement?\n- The `HeroSection` and `ProductsSection` components are being rendered in the `return` statement, wrapped in a `div` element with a class of `w-full mt-[100px]`.",
- "checksum": "d43631e53908befbbe84ea03c5b5fbe8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/tools/index.json b/.autodoc/docs/json/core/src/pages/tools/index.json
deleted file mode 100644
index 0c50f4d37..000000000
--- a/.autodoc/docs/json/core/src/pages/tools/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "core/src/pages/tools/index.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/tools/index.tsx",
- "summary": "This code defines a React component called `Tools` that renders a page displaying a list of tools available on the SushiSwap platform. The component imports various modules including `ArrowRightIcon` from `@heroicons/react/outline`, `Container` from `../../components/Container`, `Head` from `next/head`, `I18n` from `@lingui/core`, `Link` from `next/link`, `Typography` from `../../components/Typography`, `t` from `@lingui/macro`, and `useLingui` from `@lingui/react`. \n\nThe `TOOLS` constant is an array of objects that represent the tools available on the platform. Each object has an `id`, `name`, `description`, and `href` property. The `name` property represents the name of the tool, the `description` property provides a brief description of the tool, and the `href` property is the URL to the tool's page. The `description` property is localized using the `i18n` object passed as an argument to the `TOOLS` function.\n\nThe `Tools` component uses the `useLingui` hook to get the current language and the `TOOL` constant to generate a list of tools. The list is rendered using the `map` function to iterate over each tool object and generate a list item for each tool. Each list item contains a link to the tool's page, the tool's name, and a brief description of the tool. The `ArrowRightIcon` is used to indicate that the link leads to the tool's page.\n\nThe `Typography` component is used to render the page title \"Tools\". The `Head` component is used to set the page title and description in the HTML head element.\n\nThis component can be used as a template for displaying a list of tools on any page of the SushiSwap platform. The `TOOLS` constant can be modified to add or remove tools from the list, and the `Link` component can be used to link to the tool's page. The `Typography` component can be used to set the page title, and the `Head` component can be used to set the page title and description in the HTML head element.",
- "questions": "1. What is the purpose of the `TOOLS` constant?\n- The `TOOLS` constant is an array of objects that contains information about different tools available on the SushiSwap platform, including their names, descriptions, and links.\n\n2. What is the role of the `useMemo` hook in this code?\n- The `useMemo` hook is used to memoize the `TOOLS` array based on the current `i18n` object from the Lingui library. This helps to optimize performance by avoiding unnecessary re-renders when the `i18n` object changes.\n\n3. What is the purpose of the `ArrowRightIcon` component?\n- The `ArrowRightIcon` component is an icon from the Heroicons library that is used to display a right arrow next to each tool on the page, indicating that clicking on the tool will take the user to a new page.",
- "checksum": "47b169b1ef8c5736845491483ecd3fc8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/tools/meowshi.json b/.autodoc/docs/json/core/src/pages/tools/meowshi.json
deleted file mode 100644
index 67e8c02ff..000000000
--- a/.autodoc/docs/json/core/src/pages/tools/meowshi.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "meowshi.tsx",
- "filePath": "core/src/pages/tools/meowshi.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/tools/meowshi.tsx",
- "summary": "The `Meowshi` component is a React component that renders a user interface for swapping tokens. The component imports various dependencies such as `ArrowDownIcon` and `InformationCircleIcon` from the `@heroicons/react/solid` library, `ChainId`, `Currency`, and `Token` from the `@zoolabs/zdk` library, and `MEOW`, `SUSHI`, and `XSUSHI` from the `../../config/tokens` file. The component also imports other components such as `Container`, `CurrencyInputPanel`, `Head`, `HeaderToggle`, `Image`, `MeowshiButton`, `NetworkGuard`, `Typography`, and custom hooks such as `useMeowshiPerXSushi` and `useSushiPerXSushi`.\n\nThe `Meowshi` component exports an enum called `Field` and an interface called `MeowshiState`. The `Field` enum has two properties, `INPUT` and `OUTPUT`, which are used to identify the input and output fields in the token swap form. The `MeowshiState` interface defines the state of the `Meowshi` component and has properties such as `currencies`, `setCurrency`, `fields`, `handleInput`, `switchCurrencies`, and `meow`.\n\nThe `Meowshi` component renders a user interface that consists of a container with a title, an image, and a description. The container also contains a token swap form that allows users to swap tokens. The token swap form has two input fields, an input token field and an output token field, and a swap button. The component also renders a `NetworkGuard` component that ensures that the user is connected to the correct network.\n\nThe `Meowshi` component uses various hooks such as `useState`, `useCallback`, `useEffect`, and `useMemo` to manage the state of the component and update the user interface. The `useState` hook is used to manage the state of the input and output fields in the token swap form. The `useCallback` hook is used to handle user input and update the state of the component. The `useEffect` hook is used to update the state of the component when the independent field changes. The `useMemo` hook is used to memoize the state of the component and prevent unnecessary re-renders.\n\nOverall, the `Meowshi` component is an important part of the `zoo` project as it provides a user interface for swapping tokens. The component is flexible and can be used in various contexts to allow users to swap tokens easily.",
- "questions": "1. What is the purpose of the `Meowshi` component?\n- The `Meowshi` component is a React component that renders a UI for swapping tokens and calculating exchange rates.\n\n2. What are the `useSushiPerXSushi` and `useMeowshiPerXSushi` hooks used for?\n- The `useSushiPerXSushi` hook is used to fetch the exchange rate between SUSHI and xSUSHI tokens, while the `useMeowshiPerXSushi` hook is used to fetch the exchange rate between MEOW and xSUSHI tokens.\n- These exchange rates are used to calculate the conversion rates between different tokens in the `handleInput` function.\n\n3. What is the purpose of the `MeowshiState` interface?\n- The `MeowshiState` interface defines the shape of the state object used by the `Meowshi` component to manage the selected currencies, input/output values, and other related functions.",
- "checksum": "399da1b1f8fbd702e0396f9111387fe3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/tools/saave.json b/.autodoc/docs/json/core/src/pages/tools/saave.json
deleted file mode 100644
index 74926a828..000000000
--- a/.autodoc/docs/json/core/src/pages/tools/saave.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "saave.tsx",
- "filePath": "core/src/pages/tools/saave.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/tools/saave.tsx",
- "summary": "This code defines a React component called `Saave` that renders a page for the Saave feature of the SushiSwap application. The page is composed of several sub-components from the `Container`, `Head`, and `Typography` modules. \n\nThe `Container` component is used to create a container element with a specified maximum width and class names for responsive styling. The `Head` component is used to set the title and description metadata for the page. The `Typography` component is used to render headings and text with specified variants and styles. \n\nThe `Saave` component is exported as the default export of the module, which means it can be imported and used in other parts of the application. For example, it could be included as a route in the application's router to display the Saave page when the corresponding URL is accessed. \n\nHere is an example of how the `Saave` component could be used in a router:\n\n```\nimport Saave from './path/to/Saave'\n\nconst routes = [\n {\n path: '/saave',\n component: Saave\n },\n // other routes...\n]\n```\n\nOverall, this code is a small but important part of the larger SushiSwap application, providing a reusable component for displaying the Saave page.",
- "questions": "1. What is the purpose of the `Container` component being imported from '../../components/Container'?\n- The `Container` component is likely a custom component that provides a container element with specific styling and layout properties.\n\n2. What is the significance of the `Head` component being used in this code?\n- The `Head` component is used to modify the document head of the page, specifically setting the title and meta description.\n\n3. What is the purpose of the `Saave` function being exported as the default export?\n- The `Saave` function is likely a React component that renders a page or section of a page for the Zoo project.",
- "checksum": "934915e6e239c8acb81a31f7bfd474af"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/pages/top-zoo.json b/.autodoc/docs/json/core/src/pages/top-zoo.json
deleted file mode 100644
index 438290bc2..000000000
--- a/.autodoc/docs/json/core/src/pages/top-zoo.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "top-zoo.tsx",
- "filePath": "core/src/pages/top-zoo.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/pages/top-zoo.tsx",
- "summary": "The code above is a Next.js page component that renders a section of the Zoo project's website called \"Topzoo\". The purpose of this component is to display a grid of three ZooItem components, each representing a different animal or egg that can be purchased on the Zoo platform. \n\nThe Topzoo component imports the ZooItem component from the \"../components/ZooItem\" file, which is a layout component that defines the structure and styling of each animal/egg item. The Topzoo component then renders three instances of the ZooItem component, each with different props that define the image source, title, description, and price of the item. \n\nThe Topzoo component is exported as the default export of the file, which means it can be imported and used in other parts of the Zoo project. For example, the Topzoo component could be imported into a higher-level page component that renders multiple sections of the Zoo website, or it could be imported into a layout component that defines the overall structure of the website. \n\nHere is an example of how the Topzoo component could be used in a higher-level page component:\n\n```\nimport type { NextPage } from \"next\";\nimport Topzoo from \"../sections/Topzoo\";\n\nconst HomePage: NextPage = () => {\n return (\n <>\n Welcome to my online shop!
\n\n
\n );\n};\n\nexport default App;\n```\n\nIn this example, the `WhitePaper` component is imported and rendered inside the `App` component. The `App` component displays a welcome message and encourages users to read the white paper. The `WhitePaper` component is then rendered below the message to inform users that the white paper is coming soon.",
- "questions": "1. What is the purpose of the `ComingSoon` component?\n - The `ComingSoon` component is likely a placeholder for a feature or content that is not yet available in the current version of the project.\n\n2. What is the significance of the `mt-16` class name in the `div` element?\n - The `mt-16` class name likely adds a margin-top of 16 pixels to the `div` element, which could affect the layout of the surrounding elements.\n\n3. What is the `WhitePaper` component used for in the `zoo` project?\n - The `WhitePaper` component is likely a page or section of the project that displays information about a white paper, but without any content yet since it only renders the `ComingSoon` component.",
- "checksum": "07833f774f951c4ca35c5a1c63893915"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/providers/SubgraphProvider.json b/.autodoc/docs/json/core/src/providers/SubgraphProvider.json
deleted file mode 100644
index 3cb60fb0d..000000000
--- a/.autodoc/docs/json/core/src/providers/SubgraphProvider.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SubgraphProvider.tsx",
- "filePath": "core/src/providers/SubgraphProvider.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/providers/SubgraphProvider.tsx",
- "summary": "This code is responsible for creating and providing an ApolloClient instance for interacting with a GraphQL subgraph API. The subgraph API is used to query data from the Zoo project. \n\nThe code imports the necessary dependencies from \"@zoolabs/zdk\" and \"@apollo/client\". It also imports a custom hook called \"useActiveWeb3React\" from \"../hooks\". \n\nThe code defines three constants that represent the URLs for the subgraph API on different networks: SUBGRAPH_LOCALHOST for local development, SUBGRAPH_RINKEBY for the Rinkeby test network, and SUBGRAPH_MAINNET for the Binance Smart Chain main network. \n\nThe code defines a function called \"createClient\" that takes a URI and returns a new ApolloClient instance with the provided URI and an InMemoryCache. \n\nThe code defines an object called \"clients\" that maps each ChainId (an enum from \"@zoolabs/zdk\") to a corresponding ApolloClient instance created using the \"createClient\" function and the appropriate subgraph API URL. \n\nThe code defines a fallbackClient that is used when the current environment is not development and the chainId is not available. The fallbackClient is set to the Rinkeby ApolloClient instance. \n\nFinally, the code exports a React component called \"SubgraphProvider\" that takes a \"children\" prop and returns an ApolloProvider component with a client prop that is set to the appropriate ApolloClient instance based on the current chainId. If the chainId is not available, the fallbackClient is used. The \"useActiveWeb3React\" hook is used to get the current chainId. \n\nThis code can be used in the larger Zoo project to interact with the subgraph API and query data from the Zoo project. For example, the code can be used to get information about Zoo NFTs, such as their owners, metadata, and transaction history. Here is an example of how the \"SubgraphProvider\" component can be used in a React component:\n\n```\nimport { SubgraphProvider } from \"./path/to/SubgraphProvider\";\n\nfunction MyComponent() {\n return (\n Welcome to the Zoo Project
\nLearn more about our project by reading our white paper.
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n \n This code defines a React component called `AllMyNfts` that renders a section of a web page displaying a grid of NFT images.\n\n2. What external libraries or dependencies are being used?\n \n This code imports two external libraries: `React` and `next/image`.\n\n3. What is the expected output of this code?\n \n The expected output of this code is a section of a web page displaying a grid of NFT images, each contained within a border and with a fixed height and width. The images are sourced from the `/img` directory and are displayed using the `next/image` library.",
- "checksum": "9f5d49540ea4bd14444b47ac39d8c96d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/sections/my-nft/TradingHistory.json b/.autodoc/docs/json/core/src/sections/my-nft/TradingHistory.json
deleted file mode 100644
index bd322a793..000000000
--- a/.autodoc/docs/json/core/src/sections/my-nft/TradingHistory.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TradingHistory.tsx",
- "filePath": "core/src/sections/my-nft/TradingHistory.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/sections/my-nft/TradingHistory.tsx",
- "summary": "The code defines a React component called `TradingHistory` that renders a trading history section on a web page. The component imports two modules, `React` and `Image` from `next/image`. \n\nThe `TradingHistory` component returns a JSX element that contains a `div` with a class name of `tradingHistory`. Inside this `div`, there is an `h3` element with a class name of `mb-12` that displays the text \"Trading History\". \n\nBelow the `h3` element, there is another `div` element with a class name of `mb-28`. This `div` contains an unordered list (`ul`) with a class name of `flex` and four list items (`li`) with class names of `mr-28`. The list items display the text \"ACTION\", \"BLOCK\", \"TOKEN ID\", and \"HASH\" respectively. \n\nBelow the unordered list, there is another `div` element with a class name of `rounded-xl tracking-tight not-italic py-8 px-3.5 text-xs leading-[3rem] lg:leading-4 font-bold text-center bg-trading-history`. This `div` contains two unordered lists (`ul`) with class names of `flex`. Each unordered list contains four list items (`li`) with class names of `mr-24`. The list items display the trading history data such as \"BOUGHT EGG\", \"12054184\", \"6\", and \"0xd8e1c294da833a8db\". \n\nThe `TradingHistory` component is exported as a default export, which means it can be imported and used in other parts of the project. For example, if there is a web page that displays a user's profile, the `TradingHistory` component can be used to display the user's trading history. \n\nExample usage:\n\n```\nimport TradingHistory from \"./components/TradingHistory\";\n\nfunction UserProfile() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of this component and where is it being used in the project?\n - This component is called `TradingHistory` and it renders a section of trading history with some hardcoded data. It is not clear where this component is being used in the project.\n2. What is the significance of the `next/image` import and how is it being used in this component?\n - The `next/image` import is being used to optimize the loading of images in the project. However, it is not being used in this component and can be removed.\n3. What is the meaning of the various CSS classes being used in this component and where are they defined?\n - The CSS classes being used in this component are defining the styles for the trading history section. It is not clear where these classes are defined, but they likely exist in a separate CSS file or are being generated dynamically using a CSS-in-JS library.",
- "checksum": "c21c3de799e318468ca299e10342487a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/covalent/fetchers.json b/.autodoc/docs/json/core/src/services/covalent/fetchers.json
deleted file mode 100644
index 442c0edfa..000000000
--- a/.autodoc/docs/json/core/src/services/covalent/fetchers.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "fetchers.ts",
- "filePath": "core/src/services/covalent/fetchers.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/covalent/fetchers.ts",
- "summary": "This code provides a set of functions for interacting with the Covalent API, which is a blockchain data platform. The functions are designed to retrieve various types of data from the API, such as token balances, portfolio information, transfers, blocks, logs, NFT metadata, and more. \n\nEach function takes in a chain ID and an address (or other relevant parameters) as input, and returns a Promise that resolves to the requested data. The default chain ID is set to MAINNET, but can be overridden if needed. \n\nFor example, the `getTokenBalances` function retrieves the token balances for a given address on a specified chain. Here's an example usage:\n\n```\nimport { getTokenBalances } from 'zoo'\n\nconst address = '0x123abc...'\nconst chainId = 1 // Ethereum mainnet\n\ngetTokenBalances(chainId, address)\n .then((balances) => {\n console.log(balances)\n })\n .catch((error) => {\n console.error(error)\n })\n```\n\nThis would log an array of token balances for the specified address on the Ethereum mainnet. \n\nNote that there is also a `getSushiSwapLiquidityTransactions` function that is currently marked as a TODO. This function is designed to retrieve liquidity transactions for the SushiSwap decentralized exchange. It takes in a chain ID and an address as input, and returns a Promise that resolves to the requested data. \n\nOverall, these functions provide a convenient way to retrieve blockchain data from the Covalent API, and can be used to power various features within a larger project.",
- "questions": "1. What is the purpose of this code?\n- This code provides functions for fetching data from the Covalent API for various blockchain-related data such as token balances, transactions, and NFT metadata.\n\n2. What is the format of the data returned by the fetcher function?\n- The fetcher function returns a Promise that resolves to the JSON data returned by the Covalent API.\n\n3. What is the purpose of the TODO comment for CLASS B?\n- The TODO comment indicates that there is a planned addition of a function for fetching SushiSwap liquidity transactions, but it has not yet been implemented.",
- "checksum": "0d9a30747cd157484a7d0edfd4f6b26a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/covalent/hooks.json b/.autodoc/docs/json/core/src/services/covalent/hooks.json
deleted file mode 100644
index 88883a36f..000000000
--- a/.autodoc/docs/json/core/src/services/covalent/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/services/covalent/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/covalent/hooks.ts",
- "summary": "This code provides a set of functions that can be used to fetch data from the Covalent API. The Covalent API provides a unified interface to access blockchain data across multiple chains. The functions in this code use the `useSWR` hook from the `swr` library to fetch data from the Covalent API and return it to the calling code.\n\nThe functions are organized into two classes: Class A and Class B. Class A contains functions that fetch data related to tokens, blocks, transactions, and NFTs. The functions in Class A take parameters such as `chainId`, `address`, `tokenId`, `blockHeight`, etc. to specify the data to be fetched. For example, the `useTokenBalances` function fetches the token balances for a given address on a given chain. The `useBlock` function fetches the block data for a given block height on a given chain. The `useNftMetadata` function fetches the metadata for a given NFT token on a given chain.\n\nClass B contains functions that fetch data related to chains and their status. The `useChains` function fetches the list of chains supported by the Covalent API, while the `useChainsStatus` function fetches the status of each chain.\n\nAll functions take an optional `fallbackData` parameter, which is used to provide initial data while the API call is being made. This can be useful for improving the user experience by showing some data immediately while the rest of the data is being fetched.\n\nThe functions in this code can be used in any React application that needs to fetch blockchain data from the Covalent API. For example, a DeFi dashboard application could use these functions to fetch data about the user's token balances, transaction history, and NFT holdings. The `useSWR` hook used in these functions provides a simple way to manage the state of the fetched data and update it automatically when needed.",
- "questions": "1. What is the purpose of this code?\n- This code provides a set of functions that use SWR to fetch data from the Covalent API for various blockchain-related tasks such as getting token balances, transaction details, and NFT metadata.\n\n2. What is the role of the `useActiveWeb3React` hook?\n- The `useActiveWeb3React` hook is used to get the current chain ID from the active Web3React context, which is then used as a parameter for some of the API endpoints.\n\n3. What is the purpose of the commented out \"CLASS B\" section?\n- It is unclear from the provided code what the purpose of the commented out \"CLASS B\" section is, so a smart developer might wonder if it is unfinished code or if it was intentionally left out for some reason.",
- "checksum": "135691af6060285111e96a3b503b72b9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/covalent/index.json b/.autodoc/docs/json/core/src/services/covalent/index.json
deleted file mode 100644
index e03dd0d3b..000000000
--- a/.autodoc/docs/json/core/src/services/covalent/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/services/covalent/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/covalent/index.ts",
- "summary": "This code exports all the functions and variables from two separate files located in the `zoo` project: `hooks.js` and `fetchers.js`. \n\nThe purpose of this code is to make all the functionality from these two files available to other parts of the project without having to import each function or variable individually. This can save time and make the code more readable by reducing the number of import statements needed.\n\nFor example, if another file in the `zoo` project needs to use a function from `hooks.js`, it can simply import it like this:\n\n```\nimport { useAnimal } from './zoo'\n```\n\nThis will import the `useAnimal` function from `hooks.js` and make it available for use in the importing file.\n\nSimilarly, if a function from `fetchers.js` is needed, it can be imported in the same way:\n\n```\nimport { getAnimalData } from './zoo'\n```\n\nOverall, this code helps to streamline the process of importing and using functions and variables from other files in the `zoo` project.",
- "questions": "1. **What is the purpose of the `hooks` and `fetchers` files?**\\\nA smart developer might wonder what functionality is contained within these files and how they are used within the `zoo` project.\n\n2. **Are there any dependencies or requirements for using these exports?**\\\nA smart developer might want to know if there are any specific versions of dependencies or other requirements needed to use the exported functions from these files.\n\n3. **Is there any documentation or examples available for using these exports?**\\\nA smart developer might want to know if there is any additional documentation or examples available for using the exported functions from these files, in order to better understand how to integrate them into their own code.",
- "checksum": "d2be0d615b92c3dfd81eb9649634851d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/constants/index.json b/.autodoc/docs/json/core/src/services/graph/constants/index.json
deleted file mode 100644
index 2caaae30e..000000000
--- a/.autodoc/docs/json/core/src/services/graph/constants/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/services/graph/constants/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/constants/index.ts",
- "summary": "This code defines a constant object GRAPH_HOST that maps each ChainId to a corresponding URL for a blockchain data indexing service. The ChainId values are imported from the '@zoolabs/zdk' library. The URLs are for various blockchain networks, including Ethereum mainnet, xDai, Matic, Fantom, Binance Smart Chain, Avalanche, Celo, Arbitrum, Harmony, OKExChain, and Heco. \n\nThis code is likely used in the larger project to provide a centralized location for accessing blockchain data indexing services across multiple networks. By defining the URLs in this object, the project can easily switch between different indexing services or add support for new networks by simply updating the object. \n\nFor example, if the project wanted to add support for a new network called \"MyChain\", they could simply add a new key-value pair to the GRAPH_HOST object like so:\n\n```\nconst MYCHAIN_GRAPH = 'https://api.mychain.com'\nexport const GRAPH_HOST = {\n [ChainId.MAINNET]: THE_GRAPH,\n [ChainId.XDAI]: THE_GRAPH,\n [ChainId.MATIC]: THE_GRAPH,\n [ChainId.FANTOM]: THE_GRAPH,\n [ChainId.BSC]: THE_GRAPH,\n [ChainId.AVALANCHE]: THE_GRAPH,\n [ChainId.CELO]: THE_GRAPH,\n [ChainId.ARBITRUM]: THE_GRAPH,\n [ChainId.HARMONY]: 'https://sushi.graph.t.hmny.io',\n [ChainId.OKEX]: HYPER_GRAPH,\n [ChainId.HECO]: HYPER_GRAPH,\n [ChainId.MYCHAIN]: MYCHAIN_GRAPH,\n}\n```\n\nThen, any code in the project that references GRAPH_HOST using the ChainId for \"MyChain\" would automatically use the new URL. \n\nOverall, this code provides a convenient way for the project to access blockchain data indexing services across multiple networks without having to hardcode URLs throughout the codebase.",
- "questions": "1. What is the purpose of the `ChainId` import from `@zoolabs/zdk`?\n - The `ChainId` import is likely used to define different blockchain networks within the `GRAPH_HOST` object.\n2. What are the different values assigned to `GRAPH_HOST` for each `ChainId`?\n - The different values assigned to `GRAPH_HOST` correspond to different blockchain networks, including MAINNET, XDAI, MATIC, FANTOM, BSC, AVALANCHE, CELO, ARBITRUM, HARMONY, OKEX, and HECO.\n3. What are the different URLs assigned to `THE_GRAPH`, `NAS_GRAPH`, and `HYPER_GRAPH`?\n - `THE_GRAPH` is assigned the URL `https://api.thegraph.com`, `NAS_GRAPH` is assigned the URL `https://graph.kkt.one/node`, and `HYPER_GRAPH` is assigned the URL `https://q.hg.network`.",
- "checksum": "a6a47d6ca1c96dc7ea195a68123de7dc"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/fetchers/bar.json b/.autodoc/docs/json/core/src/services/graph/fetchers/bar.json
deleted file mode 100644
index 5e572c1d8..000000000
--- a/.autodoc/docs/json/core/src/services/graph/fetchers/bar.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "bar.ts",
- "filePath": "core/src/services/graph/fetchers/bar.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/bar.ts",
- "summary": "The code above is a module that provides functions to interact with the Bar subgraph on The Graph protocol. The module imports the `ChainId` enum from the `@zoolabs/zdk` library, the `GRAPH_HOST` constant from a local `constants` file, and two GraphQL queries from a local `queries` file. \n\nThe `BAR` constant is an object that maps the `ChainId.MAINNET` value to a string representing the name of the Bar subgraph on The Graph protocol. \n\nThe `bar` function is an asynchronous function that takes a GraphQL query and optional variables as arguments and sends a request to the Bar subgraph using the `request` function from the `graphql-request` library. The function returns a Promise that resolves to the response data from the subgraph. \n\nThe `getBar` function is an asynchronous function that takes a block number as an argument and returns the Bar data for that block. The function calls the `bar` function with the `barQuery` and the block number as variables. If no block number is provided, the function returns the most recent Bar data. \n\nThe `getBarHistory` function is an asynchronous function that returns an array of Bar data objects representing the historical data for the Bar subgraph. The function calls the `bar` function with the `barHistoriesQuery` query. \n\nThese functions can be used in a larger project to retrieve data from the Bar subgraph on The Graph protocol. For example, the `getBar` function could be used to retrieve the current Bar data and display it on a dashboard or user interface. The `getBarHistory` function could be used to display a historical chart of the Bar data over time. Overall, this module provides a convenient way to interact with the Bar subgraph and retrieve data for use in a larger project.",
- "questions": "1. What is the purpose of the `zoo` project and how does this code fit into it?\n- This code is a part of the `zoo` project, but it is unclear what the overall purpose of the project is.\n\n2. What is the `@zoolabs/zdk` package and how is it used in this code?\n- It is unclear what the `@zoolabs/zdk` package is and how it is used in this code.\n\n3. What is the `BAR` object and why is it using `ChainId.MAINNET` as a key?\n- The `BAR` object is used to store a mapping of `ChainId` values to a specific string value. It is unclear why `ChainId.MAINNET` is being used as a key and what the purpose of this mapping is.",
- "checksum": "312fee2e9a167606328b00b6226a515d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/fetchers/bentobox.json b/.autodoc/docs/json/core/src/services/graph/fetchers/bentobox.json
deleted file mode 100644
index 1d7d8becd..000000000
--- a/.autodoc/docs/json/core/src/services/graph/fetchers/bentobox.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "bentobox.ts",
- "filePath": "core/src/services/graph/fetchers/bentobox.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/bentobox.ts",
- "summary": "The code is a module that exports several functions that interact with the BentoBox smart contract on different chains. BentoBox is a lending platform that allows users to deposit their assets and earn interest or borrow assets by using their deposited assets as collateral. \n\nThe `BENTOBOX` object is a map of BentoBox contract addresses on different chains. The `fetcher` function is an async function that takes a chainId, a query, and optional variables as arguments. It uses the `pager` function from the `.` module to fetch data from the BentoBox subgraph on the specified chain. \n\nThe `getKashiPairs` function is an async function that takes a chainId and optional variables as arguments. It fetches Kashi pairs data from the BentoBox subgraph and returns an array of Kashi pairs objects. Each Kashi pair object contains information about the pair, such as the two tokens in the pair, the amount of each token, and the total value of the pair. The function also fetches token data for the tokens in the pairs and adds it to the Kashi pair objects. \n\nThe `getUserKashiPairs` function is an async function that takes a chainId and variables as arguments. It fetches user Kashi pairs data from the BentoBox subgraph and returns an array of user Kashi pairs objects. Each user Kashi pair object contains information about the user's position in the pair, such as the amount of each token the user has borrowed or supplied as collateral. The function also fetches token data for the tokens in the pairs and adds it to the user Kashi pair objects. \n\nThe `getBentoUserTokens` function is an async function that takes a chainId and variables as arguments. It fetches user tokens data from the BentoBox subgraph and returns an array of user tokens objects. Each user token object contains information about the user's balance and total supply of the token. The function also calculates the user's share of the token's total supply and adds it to the user token objects. \n\nThe `getBentoBox` function is an async function that takes a chainId and variables as arguments. It fetches BentoBox data from the BentoBox subgraph and returns the first BentoBox object in the array of BentoBox objects returned by the subgraph. \n\nThese functions can be used to fetch data from the BentoBox subgraph and use it in other parts of the project. For example, the `getKashiPairs` function can be used to display a list of Kashi pairs on a web page, and the `getUserKashiPairs` function can be used to display a user's Kashi pairs and positions. The `getBentoUserTokens` function can be used to display a user's BentoBox token balances, and the `getBentoBox` function can be used to display information about the BentoBox platform.",
- "questions": "1. What is the purpose of the `fetcher` function?\n- The `fetcher` function is used to make GraphQL queries to the subgraph API for the BentoBox protocol.\n\n2. What is the `getKashiPairs` function doing?\n- The `getKashiPairs` function fetches Kashi pairs from the BentoBox subgraph API and returns an array of pairs with additional data such as token information and amounts.\n\n3. What is the `BENTOBOX` object used for?\n- The `BENTOBOX` object is used to map chain IDs to their corresponding BentoBox subgraph API endpoint paths.",
- "checksum": "b27382e9addd5c94ec4c0e0608393867"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/fetchers/blocks.json b/.autodoc/docs/json/core/src/services/graph/fetchers/blocks.json
deleted file mode 100644
index 23fcb17e1..000000000
--- a/.autodoc/docs/json/core/src/services/graph/fetchers/blocks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "blocks.ts",
- "filePath": "core/src/services/graph/fetchers/blocks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/blocks.ts",
- "summary": "This code defines a set of functions that interact with The Graph, a decentralized indexing protocol for querying networks like Ethereum. The functions are used to retrieve information about blocks on various chains, including Ethereum, xDai, Polygon, Fantom, BSC, Harmony, Avalanche, Celo, Arbitrum, OKExChain, and Heco. \n\nThe `BLOCKS` object maps each chain ID to a subgraph name on The Graph that contains information about blocks on that chain. The `fetcher` function takes a chain ID, a GraphQL query, and optional variables, and returns the result of the query from the corresponding subgraph. \n\nThe `getBlock` function takes a chain ID and a Unix timestamp, and returns the block number of the block that was mined closest to that timestamp. It does this by querying the subgraph for blocks with timestamps between `timestamp - 600` and `timestamp`, and returning the number of the first block in the result set. \n\nThe `getBlocks` function takes a chain ID, a start timestamp, and an end timestamp, and returns an array of blocks mined between those timestamps. It does this by querying the subgraph for blocks with timestamps between `start` and `end`. \n\nThe `getMassBlocks` function takes a chain ID and an array of Unix timestamps, and returns an array of objects containing the block number and timestamp of the block that was mined closest to each timestamp in the input array. It does this by constructing a GraphQL query that retrieves the block with the closest timestamp to each input timestamp, and returning the result set as an array of objects. \n\nThe `getAverageBlockTime` function takes a chain ID and returns the average time between blocks over the past 6 hours. It does this by calling `getBlocks` with a start time of 6 hours ago and an end time of the current time, and then calculating the average time between blocks in the result set. \n\nThese functions are used to retrieve information about blocks on various chains, which can be used for a variety of purposes such as calculating transaction fees, estimating confirmation times, and monitoring network health. For example, `getBlock` could be used to estimate the block number of a transaction that was mined at a specific time, while `getAverageBlockTime` could be used to monitor the health of a network by detecting changes in block times.",
- "questions": "1. What is the purpose of the `fetcher` function?\n- The `fetcher` function is used to make a GraphQL request to a subgraph for a specific chain ID and block data.\n\n2. What is the purpose of the `getBlock` function?\n- The `getBlock` function is used to retrieve the block number for a specific chain ID and timestamp.\n\n3. What is the purpose of the `getAverageBlockTime` function?\n- The `getAverageBlockTime` function is used to calculate the average time difference between a sample of blocks for a specific chain ID.",
- "checksum": "4f205a63debf030027575aeb00082f51"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/fetchers/exchange.json b/.autodoc/docs/json/core/src/services/graph/fetchers/exchange.json
deleted file mode 100644
index 3d7973b1f..000000000
--- a/.autodoc/docs/json/core/src/services/graph/fetchers/exchange.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "exchange.ts",
- "filePath": "core/src/services/graph/fetchers/exchange.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/exchange.ts",
- "summary": "The code provided is a collection of functions that interact with the SushiSwap subgraph API. The functions are used to retrieve data from the SushiSwap subgraph, which is a decentralized exchange built on the Ethereum blockchain. The functions are designed to be used in a larger project that interacts with the SushiSwap subgraph API.\n\nThe `import` statements at the beginning of the code import various queries and constants from other files in the project. The `pager` function is imported from the `./` file.\n\nThe `EXCHANGE` object is a mapping of chain IDs to the corresponding SushiSwap subgraph endpoint. The `exchange` function is an asynchronous function that takes a chain ID, a query, and variables as arguments. It returns the result of calling the `pager` function with the appropriate subgraph endpoint, query, and variables.\n\nThe remaining functions are all asynchronous functions that call the `exchange` function with the appropriate query and variables to retrieve specific data from the SushiSwap subgraph. For example, the `getPairs` function calls the `exchange` function with the `pairsQuery` query to retrieve a list of pairs on the exchange.\n\nEach function is designed to be used in a larger project that interacts with the SushiSwap subgraph API. For example, the `getPairs` function could be used to retrieve a list of pairs on the exchange and display them on a webpage. Similarly, the `getTokenPrice` function could be used to retrieve the price of a specific token and display it on a webpage.\n\nOverall, the code provides a set of functions that can be used to interact with the SushiSwap subgraph API and retrieve specific data from the exchange.",
- "questions": "1. What is the purpose of the `pager` function imported from `./`?\n- A smart developer might wonder what the `pager` function does and how it is used in this code. The `pager` function is used to paginate through results from The Graph API.\n\n2. What is the significance of the `EXCHANGE` object?\n- A smart developer might question the purpose of the `EXCHANGE` object and how it is used in this code. The `EXCHANGE` object maps chain IDs to subgraph names for different exchanges on The Graph API.\n\n3. What is the difference between `getTokens` and `getTokenSubset`?\n- A smart developer might wonder about the difference between `getTokens` and `getTokenSubset` and when to use each function. `getTokens` returns all tokens on a given chain, while `getTokenSubset` returns a subset of tokens based on a set of variables.",
- "checksum": "1360a0c94e4591cd536db47926e0e8ae"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/fetchers/index.json b/.autodoc/docs/json/core/src/services/graph/fetchers/index.json
deleted file mode 100644
index 1e8a1ecd2..000000000
--- a/.autodoc/docs/json/core/src/services/graph/fetchers/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/services/graph/fetchers/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/index.ts",
- "summary": "The code in this file provides a function called `pager` that is used to make paginated requests to a GraphQL endpoint. The function takes three arguments: `endpoint`, which is the URL of the GraphQL endpoint to query; `query`, which is the GraphQL query to execute; and `variables`, which is an optional object containing any variables needed for the query.\n\nThe `pager` function first checks if the `endpoint` argument contains the string \"undefined\". If it does, the function returns an empty object. Otherwise, the function initializes an empty object called `data`, a variable called `skip` set to 0, and a boolean flag set to `true`.\n\nThe function then enters a `while` loop that will continue to execute as long as the `flag` variable is `true`. Inside the loop, the function makes a GraphQL request to the `endpoint` using the `request` function from the `graphql-request` library. The response from the request is stored in a variable called `req`.\n\nThe function then iterates over the keys of the `req` object using `Object.keys()` and for each key, it checks if the key already exists in the `data` object. If it does, the function concatenates the new data with the existing data using the spread operator (`...`). If it doesn't, the function simply adds the new data to the `data` object.\n\nThe function then iterates over the values of the `req` object using `Object.values()` and for each value, it checks if the length of the value is equal to 1000. If it is, the function sets the `flag` variable to `true`, which will cause the `while` loop to continue executing.\n\nIf the `variables` object passed to the function contains a key called \"first\", the function breaks out of the `while` loop. Otherwise, the function increments the `skip` variable by 1000 and updates the `variables` object to include the new `skip` value.\n\nOnce the `while` loop has completed, the function returns the `data` object.\n\nIn addition to the `pager` function, this file also exports several other modules (`blocks`, `exchange`, `masterchef`, and `status`) using the `export * from` syntax. These modules likely contain additional functions or classes that are used elsewhere in the project.",
- "questions": "1. What is the purpose of the `pager` function?\n - The `pager` function is used to make paginated requests to a GraphQL endpoint and return the combined data from all pages.\n2. What is the significance of checking if the `endpoint` includes the string `'undefined'`?\n - If the `endpoint` includes the string `'undefined'`, the function returns an empty object. This is likely a safeguard against making requests to an invalid or non-existent endpoint.\n3. What are the other files being exported from this module?\n - In addition to the `pager` function, this module also exports functions from four other files: `blocks`, `exchange`, `masterchef`, and `status`. It is unclear what these functions do without further context.",
- "checksum": "7fc615bad9899fd8985d4731c313ce3f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/fetchers/masterchef.json b/.autodoc/docs/json/core/src/services/graph/fetchers/masterchef.json
deleted file mode 100644
index 7829c7e84..000000000
--- a/.autodoc/docs/json/core/src/services/graph/fetchers/masterchef.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "masterchef.ts",
- "filePath": "core/src/services/graph/fetchers/masterchef.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/masterchef.ts",
- "summary": "This code provides a set of functions for interacting with the subgraphs of the SushiSwap decentralized exchange on various blockchains. The subgraphs are used to query data from the blockchain and return it in a structured format. \n\nThe code imports a set of queries from a separate file, which are used to retrieve data from the subgraphs. It also imports a set of constants and functions from other files, including `ChainId` from the `@zoolabs/zdk` library, `GRAPH_HOST` from a `constants` file, and `getTokenSubset` from an `exchange` file. \n\nThe code defines a set of constants for the different subgraphs that can be queried, including `MINICHEF`, `MASTERCHEF_V2`, and `MASTERCHEF_V1`. Each of these constants is an object that maps a `ChainId` to a subgraph name. \n\nThe code defines a set of functions for querying the subgraphs, including `miniChef`, `masterChefV2`, and `masterChefV1`. Each of these functions takes a `query` parameter, which is a GraphQL query string, and an optional `chainId` parameter, which specifies the blockchain to query. The functions use the `request` function from the `graphql-request` library to send a request to the subgraph and return the result. \n\nThe code defines a set of functions for retrieving data from the subgraphs, including `getMasterChefV1TotalAllocPoint`, `getMasterChefV1SushiPerBlock`, `getMasterChefV1Farms`, `getMasterChefV1PairAddreses`, `getMasterChefV2Farms`, `getMasterChefV2PairAddreses`, `getMiniChefFarms`, and `getMiniChefPairAddreses`. Each of these functions calls the corresponding query function with the appropriate query string and returns the relevant data from the result. \n\nOverall, this code provides a set of tools for querying and retrieving data from the SushiSwap subgraphs on various blockchains. These tools can be used by other parts of the larger project to retrieve data about farms, pools, and other aspects of the decentralized exchange. \n\nExample usage:\n\n```\nimport { getMasterChefV1Farms } from 'zoo'\n\nconst farms = await getMasterChefV1Farms()\nconsole.log(farms)\n// Output: [{ id: '0x...', ... }, { id: '0x...', ... }, ...]\n```",
- "questions": "1. What is the purpose of the `zoo` project and how does this code fit into it?\n- This code provides functions for querying data from subgraphs related to SushiSwap's MasterChef and MiniChef contracts on various blockchains. It is likely part of a larger project related to analyzing or interacting with these contracts.\n\n2. What is the difference between `getMasterChefV1Farms` and `getMasterChefV1PairAddreses`?\n- `getMasterChefV1Farms` returns an array of objects representing the pools in the MasterChef contract, while `getMasterChefV1PairAddreses` returns an array of strings representing the addresses of the pairs in those pools.\n\n3. What is the purpose of the `getTokenSubset` function and where is it defined?\n- `getTokenSubset` is not defined in this file, but is likely defined in the `exchange.js` file imported on line 5. It appears to be a function for querying token data from a blockchain, and is used in `getMasterChefV2Farms` to retrieve information about the reward tokens for each pool.",
- "checksum": "ba50d7c5fdf96d0055e2ebcc6c5e51aa"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/fetchers/status.json b/.autodoc/docs/json/core/src/services/graph/fetchers/status.json
deleted file mode 100644
index 8351efee1..000000000
--- a/.autodoc/docs/json/core/src/services/graph/fetchers/status.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "status.ts",
- "filePath": "core/src/services/graph/fetchers/status.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/fetchers/status.ts",
- "summary": "This code is a module that exports a single function called `status`. The purpose of this function is to query the indexing status of a subgraph on a specified chain in the Zoo project. \n\nThe function takes two arguments: `chainId` and `subgraphName`. `chainId` is an optional argument that defaults to `ChainId.MAINNET`, which is an enum value from the `@zoolabs/zdk` library. `subgraphName` is a required argument that specifies the name of the subgraph to query.\n\nThe function uses the `request` function from the `graphql-request` library to send a GraphQL query to the Zoo project's indexing server. The query is a string that contains a GraphQL query that requests the indexing status for the specified subgraph on the specified chain. The query includes fields for the subgraph's sync status, health, fatal error (if any), and block information for the chain's head and latest blocks.\n\nThe function returns a Promise that resolves to an object containing the indexing status information for the specified subgraph on the specified chain. The object has the following properties:\n\n- `synced`: a boolean value indicating whether the subgraph is fully synced on the specified chain\n- `health`: a string value indicating the health status of the subgraph on the specified chain\n- `fatalError`: an object containing information about any fatal errors that have occurred during indexing, including an error message, block number and hash, and handler information\n- `chains`: an array of objects containing information about the chain(s) being queried, including the chain's head block number and the latest block number\n\nThis function can be used by other modules in the Zoo project to check the indexing status of a subgraph on a specified chain. For example, a monitoring module could use this function to periodically check the indexing status of all subgraphs on all chains and alert the development team if any subgraphs are not fully synced or have encountered fatal errors. \n\nExample usage:\n\n```\nimport { status } from 'zoo'\n\n// Get the indexing status for the \"my-subgraph\" subgraph on the Rinkeby testnet\nconst subgraphStatus = await status(ChainId.RINKEBY, 'my-subgraph')\nconsole.log(subgraphStatus)\n// Output: { synced: true, health: 'healthy', fatalError: null, chains: [{ chainHeadBlock: { number: 12345 }, latestBlock: { number: 12346 } }] }\n```",
- "questions": "1. What is the purpose of this code?\n- This code is used to retrieve the indexing status of a subgraph on a specified chain.\n\n2. What is the significance of the `ChainId` and `GRAPH_HOST` constants?\n- `ChainId` is an enum that represents the different Ethereum networks (e.g. Mainnet, Rinkeby). `GRAPH_HOST` is a constant that holds the URL of the Graph Node API endpoint.\n- These constants are used to construct the URL for the GraphQL request based on the specified chain.\n\n3. What information is returned by the `status` function?\n- The `status` function returns an object that contains information about the indexing status of the specified subgraph on the specified chain, including whether it is synced, its health, any fatal errors, and information about the chain's latest blocks.",
- "checksum": "67542caa37159f36b8f68f5310208078"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/hooks/bar.json b/.autodoc/docs/json/core/src/services/graph/hooks/bar.json
deleted file mode 100644
index d97f165dd..000000000
--- a/.autodoc/docs/json/core/src/services/graph/hooks/bar.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "bar.ts",
- "filePath": "core/src/services/graph/hooks/bar.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/hooks/bar.ts",
- "summary": "The code above is a module that provides two React hooks, `useBar` and `useBarHistory`, for fetching data related to a bar in the Zoo project. The module imports `ChainId` from the `@zoolabs/zdk` library, which is used to specify the chain ID for the data fetch. It also imports `useSWR` and `SWRConfiguration` from the `swr` library, which are used for data caching and revalidation. Additionally, the module imports `useActiveWeb3React` from a custom `hooks` module, and `getBar` and `getBarHistory` from a `fetchers/bar` module.\n\nThe `useBar` hook takes an optional object argument with `timestamp`, `block`, and `shouldFetch` properties, and an optional `swrConfig` argument. It uses the `useBlock` hook from the `blocks` module to fetch the block number for the given `timestamp` and `ChainId.MAINNET`. If `block` is not provided, it defaults to the fetched block number if `timestamp` is provided, or `undefined` otherwise. The hook then uses `useSWR` to fetch the bar data using the `getBar` function from the `fetchers/bar` module, passing in the `block` number as a parameter. If `shouldFetch` is `false`, the hook returns `undefined`. Otherwise, it returns the fetched data.\n\nThe `useBarHistory` hook takes an optional object argument with a `shouldFetch` property, and an optional `swrConfig` argument. It uses `useSWR` to fetch the bar history data using the `getBarHistory` function from the `fetchers/bar` module. If `shouldFetch` is `false`, the hook returns `undefined`. Otherwise, it returns the fetched data.\n\nThese hooks can be used in a React component to fetch and display data related to a bar in the Zoo project. For example, a component could use `useBar` to fetch the current data for a specific bar, and `useBarHistory` to fetch the historical data for the same bar. The fetched data could then be rendered in the component using JSX. Here is an example of how these hooks could be used in a component:\n\n```\nimport { useBar, useBarHistory } from 'zoo'\n\nfunction BarComponent({ barId }) {\n const barData = useBar({ shouldFetch: true })\n const barHistoryData = useBarHistory({ shouldFetch: true })\n\n return (\n User Profile
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `useBar` and `useBarHistory` functions?\n- `useBar` and `useBarHistory` are custom hooks that fetch data related to a bar and its history respectively using the `getBar` and `getBarHistory` functions.\n\n2. What is the role of the `useSWR` hook in this code?\n- The `useSWR` hook is used to fetch data and manage the state of the data in the component. It takes in a key and a fetcher function and returns the data.\n\n3. What is the significance of the `useBlock` hook in the `useBar` function?\n- The `useBlock` hook is used to fetch the block number based on the timestamp and chain ID provided. It is used to determine the block number to be used in the `useSWR` hook for fetching data related to the bar.",
- "checksum": "b4a2cb35d88f68c888ae012881aca33a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/hooks/bentobox.json b/.autodoc/docs/json/core/src/services/graph/hooks/bentobox.json
deleted file mode 100644
index aeaccef05..000000000
--- a/.autodoc/docs/json/core/src/services/graph/hooks/bentobox.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "bentobox.ts",
- "filePath": "core/src/services/graph/hooks/bentobox.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/hooks/bentobox.ts",
- "summary": "This code defines several custom hooks that can be used to fetch data related to the Kashi protocol and BentoBox smart contract on Ethereum. \n\nThe `useKashiPairs` hook fetches data on Kashi pairs, which are lending pairs on the Kashi protocol. The hook takes in several parameters, including the timestamp, block number, chain ID, and whether or not to fetch the data. It also takes in an optional user parameter and subset parameter, which can be used to filter the results. The hook uses the `useSWR` hook to fetch the data and returns the resulting data.\n\nThe `useUserKashiPairs` hook fetches data on Kashi pairs for a specific user. It takes in similar parameters as the `useKashiPairs` hook, but also takes in a variables parameter that can be used to filter the results. If the variables parameter includes a user property, the hook will fetch data for that user. Otherwise, it will fetch data for the current user. The hook uses the `useSWR` hook to fetch the data and returns the resulting data.\n\nThe `useBentoUserTokens` hook fetches data on tokens held by a specific user in the BentoBox smart contract. It takes in similar parameters as the `useUserKashiPairs` hook, but fetches data from the BentoBox smart contract instead. The hook uses the `useSWR` hook to fetch the data and returns the resulting data.\n\nThe `useBentoBox` hook fetches data on the BentoBox smart contract itself. It takes in similar parameters as the `useKashiPairs` hook, but only takes in the timestamp, block number, chain ID, and whether or not to fetch the data. The hook uses the `useSWR` hook to fetch the data and returns the resulting data.\n\nThese hooks can be used in a larger project to fetch data related to the Kashi protocol and BentoBox smart contract. For example, the `useKashiPairs` hook could be used to display a list of available lending pairs on the Kashi protocol, while the `useUserKashiPairs` hook could be used to display a list of lending pairs held by a specific user. The `useBentoUserTokens` hook could be used to display a list of tokens held by a specific user in the BentoBox smart contract, while the `useBentoBox` hook could be used to display information about the BentoBox smart contract itself.",
- "questions": "1. What is the purpose of the `useKashiPairs` function and what parameters does it take?\n- The `useKashiPairs` function is used to fetch Kashi pairs data based on the provided parameters such as timestamp, block, chainId, user, and subset. It takes two parameters: `useKashiPairsProps` object and `swrConfig` object.\n\n2. What is the difference between `useUserKashiPairs` and `useBentoUserTokens` functions?\n- `useUserKashiPairs` is used to fetch Kashi pairs data for a specific user, while `useBentoUserTokens` is used to fetch BentoBox user tokens data for a specific user.\n\n3. What is the purpose of the `useBentoBox` function and what parameters does it take?\n- The `useBentoBox` function is used to fetch BentoBox data based on the provided parameters such as timestamp, block, and chainId. It takes two parameters: `useBentoBoxProps` object and `swrConfig` object.",
- "checksum": "08d7ddaa72afa8033b15fbc6eb58d5ef"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/hooks/blocks.json b/.autodoc/docs/json/core/src/services/graph/hooks/blocks.json
deleted file mode 100644
index 9ce3bc7c0..000000000
--- a/.autodoc/docs/json/core/src/services/graph/hooks/blocks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "blocks.ts",
- "filePath": "core/src/services/graph/hooks/blocks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/hooks/blocks.ts",
- "summary": "This code defines three functions that are used to fetch data related to Ethereum blocks. The functions are `useBlock`, `useMassBlocks`, and `useAverageBlockTime`. \n\nThe `useBlock` function takes an object with four properties as its argument: `timestamp`, `daysAgo`, `chainId`, and `shouldFetch`. `timestamp` is a Unix timestamp in seconds, `daysAgo` is the number of days ago from the current time, `chainId` is the ID of the Ethereum chain, and `shouldFetch` is a boolean that determines whether or not the function should fetch data. The function then converts the `timestamp` to seconds if it is in milliseconds and calculates the timestamp based on the number of days ago if `daysAgo` is provided. It then uses the `useSWR` hook to fetch the block data using the `getBlock` function from the `fetchers` module. The `shouldFetch` parameter is used to determine whether or not to fetch the data. The function returns the fetched data.\n\nThe `useMassBlocks` function takes an array of timestamps or strings and an optional `swrConfig` object as its arguments. It uses the `useActiveWeb3React` hook to get the current chain ID and then uses the `useSWR` hook to fetch the mass block data using the `getMassBlocks` function from the `fetchers` module. The function returns the fetched data.\n\nThe `useAverageBlockTime` function takes an optional `swrConfig` object as its argument. It uses the `useActiveWeb3React` hook to get the current chain ID and then uses the `useSWR` hook to fetch the average block time data using the `getAverageBlockTime` function from the `fetchers` module. The function returns the fetched data.\n\nThese functions can be used to fetch Ethereum block data in a React application. For example, the `useBlock` function can be used to fetch the data for a specific block, while the `useMassBlocks` function can be used to fetch data for multiple blocks. The `useAverageBlockTime` function can be used to fetch the average block time for a specific chain. These functions can be used to display Ethereum block data in a user interface or to perform calculations based on the data.",
- "questions": "1. What is the purpose of the `useBlock` function and what parameters does it take?\n- The `useBlock` function is used to fetch a block from the blockchain based on a given timestamp or number of days ago, and it takes in an object with `timestamp`, `daysAgo`, `chainId`, and `shouldFetch` properties as well as an optional `swrConfig` parameter.\n\n2. What is the purpose of the `useMassBlocks` function and what parameters does it take?\n- The `useMassBlocks` function is used to fetch multiple blocks from the blockchain based on an array of timestamps or block numbers, and it takes in an array of `timestamps` or `blockNumbers` and an optional `swrConfig` parameter.\n\n3. What is the purpose of the `useAverageBlockTime` function and what parameters does it take?\n- The `useAverageBlockTime` function is used to fetch the average block time for a given blockchain, and it takes in an optional `swrConfig` parameter.",
- "checksum": "d4fda0d80ad83be7a118125a81123d51"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/hooks/index.json b/.autodoc/docs/json/core/src/services/graph/hooks/index.json
deleted file mode 100644
index 96923c9eb..000000000
--- a/.autodoc/docs/json/core/src/services/graph/hooks/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/services/graph/hooks/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/hooks/index.ts",
- "summary": "This code is a collection of hooks and utility functions related to fetching and processing data for various farming contracts in the larger project. The code imports several functions from the `fetchers` module, which are used to retrieve data from the various farming contracts. The `useSWR` hook is used to cache and manage the data returned from these fetchers.\n\nThe `useMasterChefV1TotalAllocPoint` and `useMasterChefV1SushiPerBlock` functions are used to retrieve the total allocation points and SUSHI rewards per block for the MasterChefV1 contract on the Ethereum mainnet. These functions return the data retrieved from the `getMasterChefV1TotalAllocPoint` and `getMasterChefV1SushiPerBlock` fetchers, respectively.\n\nThe `useMasterChefV1Farms`, `useMasterChefV2Farms`, and `useMiniChefFarms` functions are used to retrieve data for the various farming pools associated with the MasterChefV1, MasterChefV2, and MiniChef contracts, respectively. These functions return an array of farming pool objects, each of which contains information about the pool's contract address, allocation points, and other relevant data. The `useFarms` function is a utility function that combines the results of these three functions into a single array of farming pool objects.\n\nThe `useMasterChefV1PairAddresses`, `useMasterChefV2PairAddresses`, and `useMiniChefPairAddresses` functions are used to retrieve the contract addresses of the token pairs associated with the various farming pools. These functions return an array of contract addresses. The `useFarmPairAddresses` function is a utility function that combines the results of these three functions into a single array of contract addresses.\n\nOverall, this code provides a set of hooks and utility functions that can be used to retrieve and process data related to various farming contracts in the larger project. For example, the `useFarms` and `useFarmPairAddresses` functions could be used to display information about the available farming pools and their associated token pairs in a user interface.",
- "questions": "1. What is the purpose of the `useFarms` function and how does it work?\n- The `useFarms` function returns an array of farming pools across different chef contracts. It works by calling the `useMasterChefV1Farms`, `useMasterChefV2Farms`, and `useMiniChefFarms` functions and concatenating their results.\n\n2. What is the significance of the `shouldFetch` variable in the various `use*` functions?\n- The `shouldFetch` variable is used to determine whether or not to fetch data based on the current `chainId`. For example, some data is only relevant for the `MAINNET` chain, while other data is only relevant for specific testnets.\n\n3. What is the purpose of the `useMemo` hook in the various `use*` functions?\n- The `useMemo` hook is used to memoize the results of the data fetching functions. This can help improve performance by preventing unnecessary re-renders when the same data is requested multiple times.",
- "checksum": "b69733fba24b357e3f5c8bab153b8185"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/index.json b/.autodoc/docs/json/core/src/services/graph/index.json
deleted file mode 100644
index 5165dca8d..000000000
--- a/.autodoc/docs/json/core/src/services/graph/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/services/graph/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/index.ts",
- "summary": "This code exports all the functions and variables from two different files located in the `zoo` project: `hooks.js` and `fetchers.js`. \n\nThe purpose of this code is to make all the functionality from these two files available to other parts of the `zoo` project without having to import each function or variable individually. This can save time and make the code more readable by reducing the number of import statements needed.\n\nFor example, if another file in the `zoo` project needs to use a function from `hooks.js`, it can simply import everything from this file using the following code:\n\n```\nimport * as hooks from './hooks'\n```\n\nThis will import all the functions and variables from `hooks.js` and make them available under the `hooks` namespace. The same can be done for `fetchers.js`:\n\n```\nimport * as fetchers from './fetchers'\n```\n\nOverall, this code helps to simplify the process of importing and using functions and variables from multiple files within the `zoo` project.",
- "questions": "1. **What is the purpose of this file?** \nA smart developer might wonder what the overall purpose of this file is within the `zoo` project. Based on the code, it appears to be exporting functionality from two other files, but it's unclear what those files contain or how they relate to the rest of the project.\n\n2. **What are the `hooks` and `fetchers` modules?** \nA smart developer might want to know more about the `hooks` and `fetchers` modules being exported from this file. What functionality do they provide? Are they related to each other in any way? Understanding these modules could help the developer better understand the overall architecture of the `zoo` project.\n\n3. **Why is everything being exported?** \nA smart developer might question why everything is being exported from this file using the `export *` syntax. Is this necessary for the project to function properly? Are there any potential downsides to exporting everything in this way? Understanding the reasoning behind this design decision could help the developer make informed decisions about their own code.",
- "checksum": "d2be0d615b92c3dfd81eb9649634851d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/queries/bar.json b/.autodoc/docs/json/core/src/services/graph/queries/bar.json
deleted file mode 100644
index f7af22978..000000000
--- a/.autodoc/docs/json/core/src/services/graph/queries/bar.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "bar.ts",
- "filePath": "core/src/services/graph/queries/bar.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/queries/bar.ts",
- "summary": "This code defines three GraphQL queries related to the `bar` feature of the larger project. \n\nThe `bar` feature appears to be related to a cryptocurrency called Sushi, and the queries retrieve various pieces of information about the `bar` and its users. \n\nThe first query, `barQuery`, retrieves information about a specific `bar` identified by its `id`. The query takes an optional argument `block` which specifies the block height at which to retrieve the information. If no `block` is specified, the default value is used. The query returns various pieces of information about the `bar`, including its `id`, `totalSupply`, `ratio`, and various statistics related to `xSushi` (a type of token related to Sushi).\n\nThe second query, `barHistoriesQuery`, retrieves historical information about the `bar`. It retrieves the first 1000 historical records of the `histories` field, which includes information about `sushiStaked`, `sushiHarvested`, and other statistics related to `xSushi`.\n\nThe third query, `barUserQuery`, retrieves information about a specific user identified by their `id`. The query returns information about the user's `bar`, including `totalSupply` and `sushiStaked`, as well as various statistics related to `xSushi`. It also returns information about the user's transactions, including `sushiIn`, `sushiOut`, `usdIn`, and `usdOut`.\n\nThese queries can be used to retrieve information about the `bar` and its users, which can be used for various purposes within the larger project. For example, the information could be used to display statistics about the `bar` and its users, or to perform calculations related to `xSushi`. \n\nHere is an example of how the `barQuery` could be used in a React component:\n\n```\nimport { useQuery } from '@apollo/client';\nimport { barQuery } from './path/to/barQuery';\n\nfunction BarInfo({ barId }) {\n const { loading, error, data } = useQuery(barQuery, {\n variables: { id: barId },\n });\n\n if (loading) return Bar {barId}
\nCurrent price: {barData?.price}
\nHistorical prices:
\n- \n {barHistoryData?.map((price, index) => (\n
- {price} \n ))}\n
Loading...
;\n if (error) returnError :(
;\n\n const { bar } = data;\n\n return (\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code and what does it do?\n \n This code defines three GraphQL queries for the `bar` entity, which retrieves various data related to the SushiSwap bar. The queries retrieve data such as the total supply of the bar, the amount of SUSHI staked, and the amount of xSUSHI minted and burned.\n\n2. What is the significance of the commented out code in the `barQuery` function?\n \n The commented out code in the `barQuery` function is a GraphQL query for retrieving historical data related to the `bar` entity. It is currently not being used, but may be useful for future development or analysis.\n\n3. What is the purpose of the `barUserQuery` function and what data does it retrieve?\n \n The `barUserQuery` function is a GraphQL query for retrieving data related to a specific user of the SushiSwap bar. It retrieves data such as the user's ID, the total supply of the bar, the amount of SUSHI and xSUSHI staked, and various other transaction data such as amounts of SUSHI and USD in and out.",
- "checksum": "f579c8df2c3a00acb29ef5072659045c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/queries/bentobox.json b/.autodoc/docs/json/core/src/services/graph/queries/bentobox.json
deleted file mode 100644
index 8d1a0c1a0..000000000
--- a/.autodoc/docs/json/core/src/services/graph/queries/bentobox.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "bentobox.ts",
- "filePath": "core/src/services/graph/queries/bentobox.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/queries/bentobox.ts",
- "summary": "This code defines several GraphQL queries and fragments related to the BentoBox and KashiPair smart contracts on the Ethereum blockchain. These queries are used to retrieve data from the blockchain and display it in the user interface of the larger project.\n\nThe `bentoTokenFieldsQuery` fragment defines a set of fields that can be used to retrieve information about a specific token, such as its name, symbol, and total supply. This fragment is used in the `bentoUserTokensQuery` query, which retrieves a list of tokens owned by a specific user and the amount of each token they own.\n\nThe `kashiPairFieldsQuery` fragment defines a set of fields that can be used to retrieve information about a specific KashiPair, which is a type of lending pool on the BentoBox platform. This fragment is used in the `kashiPairsQuery` query, which retrieves a list of KashiPairs that meet certain criteria, such as having a high utilization rate. The `kashiUserPairsQuery` query retrieves a list of KashiPairs owned by a specific user and the user's share of each pair.\n\nThe `bentoBoxQuery` query retrieves information about the BentoBox platform itself, such as the total number of users and tokens, as well as a list of the tokens currently supported by the platform.\n\nOverall, these queries and fragments are used to display information about the BentoBox and KashiPair smart contracts in the user interface of the larger project. For example, the `bentoUserTokensQuery` query could be used to display a user's token balances, while the `kashiPairsQuery` query could be used to display a list of available lending pools.",
- "questions": "1. What is the purpose of the `bentoTokenFieldsQuery` and `kashiPairFieldsQuery` fragments?\n- These fragments define the fields that are commonly used in queries related to tokens and Kashi pairs, respectively. They allow for more efficient and reusable code by avoiding repetition of field definitions in multiple queries.\n\n2. What is the significance of the `$skip`, `$first`, and `$block` variables in the `bentoUserTokensQuery` and `kashiPairsQuery` queries?\n- These variables are used for pagination and filtering of results. `$skip` determines how many results to skip before returning data, `$first` determines the maximum number of results to return, and `$block` filters results based on the block height at which the data was recorded.\n\n3. What is the purpose of the `bentoBoxQuery` query and what is the default value for the `id` variable?\n- The `bentoBoxQuery` retrieves information about a BentoBox, which is a smart contract that allows for efficient token trading and lending. The default value for the `id` variable is the address of the BentoBox contract on the Ethereum network.",
- "checksum": "0a633dcca12870349476ef3562b8cd5a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/queries/blocks.json b/.autodoc/docs/json/core/src/services/graph/queries/blocks.json
deleted file mode 100644
index e7d8bebf9..000000000
--- a/.autodoc/docs/json/core/src/services/graph/queries/blocks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "blocks.ts",
- "filePath": "core/src/services/graph/queries/blocks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/queries/blocks.ts",
- "summary": "This code defines GraphQL queries for retrieving information about blocks in a blockchain. The `blockFieldsQuery` defines a fragment that specifies the fields to be returned for a block, including its `id`, `number`, and `timestamp`. \n\nThe `blockQuery` is a GraphQL query that retrieves the most recent block that matches a given filter. It takes a filter object as an argument and returns the first block that matches the filter, sorted by timestamp in descending order. The query includes the `blockFields` fragment to specify the fields to be returned for the block. \n\nThe `blocksQuery` is a GraphQL query that retrieves a list of blocks that match a given time range. It takes four arguments: `first` (the number of blocks to return), `skip` (the number of blocks to skip), `start` (the start of the time range), and `end` (the end of the time range). The query returns the blocks sorted by block number in descending order and includes the `blockFields` fragment to specify the fields to be returned for each block. \n\nThe `massBlocksQuery` is a function that takes an array of timestamps and returns a GraphQL query that retrieves the first block after each timestamp. The query includes a separate block query for each timestamp, with the query name being the timestamp value. The query includes the `blockFields` fragment to specify the fields to be returned for each block. \n\nThese queries can be used to retrieve information about blocks in a blockchain, such as their number, timestamp, and other metadata. The `blockQuery` can be used to retrieve the most recent block that matches a given filter, while the `blocksQuery` can be used to retrieve a list of blocks that match a given time range. The `massBlocksQuery` can be used to retrieve the first block after a list of timestamps, which can be useful for tracking the progress of the blockchain over time. \n\nExample usage:\n\n```\nimport { blockQuery, blocksQuery, massBlocksQuery } from 'zoo'\n\n// Retrieve the most recent block\nconst latestBlock = await client.query({\n query: blockQuery,\n variables: { where: { number_gt: 0 } }\n})\n\n// Retrieve the blocks in a given time range\nconst blocksInRange = await client.query({\n query: blocksQuery,\n variables: { first: 100, skip: 0, start: 1609459200, end: 1609545600 }\n})\n\n// Retrieve the first block after a list of timestamps\nconst timestamps = [1609459200, 1609462800, 1609466400]\nconst massBlocks = await client.query({\n query: massBlocksQuery(timestamps)\n})\n```",
- "questions": "1. What is the purpose of the `blockFieldsQuery` fragment?\n- The `blockFieldsQuery` fragment defines the fields that should be returned for a `Block` object.\n\n2. What is the difference between `blockQuery` and `blocksQuery`?\n- `blockQuery` returns the most recent `Block` object that matches the specified filter, while `blocksQuery` returns a list of `Block` objects that match the specified filter.\n\n3. What is the purpose of the `massBlocksQuery` function?\n- The `massBlocksQuery` function generates a GraphQL query that returns the first `Block` object that matches a list of timestamps, sorted in ascending order by timestamp.",
- "checksum": "4bdbae15e0fd131a2c7b9396e25e002a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/queries/exchange.json b/.autodoc/docs/json/core/src/services/graph/queries/exchange.json
deleted file mode 100644
index 31d0574d1..000000000
--- a/.autodoc/docs/json/core/src/services/graph/queries/exchange.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "exchange.ts",
- "filePath": "core/src/services/graph/queries/exchange.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/queries/exchange.ts",
- "summary": "This file contains a set of GraphQL queries that can be used to retrieve data from the Uniswap V2 subgraph. The queries are organized into sections based on the type of data they retrieve, such as pairs, tokens, and transactions.\n\nThe `factoryQuery` retrieves data about the Uniswap factory contract, such as the total volume and liquidity in USD. The `userIdsQuery` retrieves a list of user IDs. The `uniswapUserQuery` retrieves data about a specific user, including their liquidity positions. The `ethPriceQuery` retrieves the current ETH price. The `tokenPriceQuery` retrieves the price of a specific token in ETH.\n\nThe `dayDatasQuery` retrieves daily data for Uniswap pairs, such as volume and liquidity. The `pairQuery` retrieves data about a specific pair, including its reserves and volume. The `pairIdsQuery` retrieves a list of pair IDs. The `pairCountQuery` retrieves the total number of pairs in the Uniswap factory. The `pairDayDatasQuery` retrieves daily data for a set of pairs.\n\nThe `liquidityPositionsQuery` retrieves data about liquidity positions, including the user and pair IDs. The `pairsQuery` retrieves data about pairs, including their reserves and volume. The `pairsTimeTravelQuery` retrieves historical data for a set of pairs.\n\nThe `tokenQuery` retrieves data about a specific token, including its symbol, name, and liquidity. The `tokenIdsQuery` retrieves a list of token IDs. The `tokenDayDatasQuery` retrieves daily data for a set of tokens. The `tokenPairsQuery` retrieves pairs that include a specific token. The `tokensQuery` retrieves data about tokens, including their volume and price.\n\nThe `transactionsQuery` retrieves data about swaps, mints, and burns.\n\nThese queries can be used to retrieve data from the Uniswap V2 subgraph for analysis and visualization. For example, the `dayDatasQuery` can be used to create a chart of daily volume and liquidity for a specific pair. The `tokensQuery` can be used to create a list of the top tokens by volume. The `transactionsQuery` can be used to analyze trading activity on Uniswap.",
- "questions": "1. What is the purpose of this code?\n- This code contains GraphQL queries for retrieving data related to Uniswap, such as factory information, user data, pair data, token data, and transaction data.\n\n2. What are some of the specific data fields that can be retrieved using these queries?\n- Some of the specific data fields that can be retrieved include pair and token IDs, reserve and liquidity amounts, transaction timestamps, and user and pair-specific data.\n\n3. Are there any limitations or restrictions to the data that can be retrieved using these queries?\n- It is unclear from this code whether there are any limitations or restrictions to the data that can be retrieved using these queries, such as time periods or specific filters.",
- "checksum": "11e5645714bbc23309ec5d6cd453a5db"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/queries/index.json b/.autodoc/docs/json/core/src/services/graph/queries/index.json
deleted file mode 100644
index 22183fde1..000000000
--- a/.autodoc/docs/json/core/src/services/graph/queries/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/services/graph/queries/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/queries/index.ts",
- "summary": "This code exports all the modules from different files located in the `zoo` project. The `export *` statement is used to export all the functions, classes, and variables from the specified files. \n\nThe `blocks` module may contain code related to blockchain technology, such as creating and managing blocks. The `exchange` module may contain code related to cryptocurrency exchange, such as buying and selling cryptocurrencies. The `masterchef` and `masterchef-v2` modules may contain code related to yield farming, such as managing liquidity pools and distributing rewards. The `minichef` module may contain code related to a smaller version of the yield farming protocol.\n\nBy exporting all the modules from these files, other parts of the `zoo` project can easily access and use the functions and classes defined in these modules. For example, if there is a file in the `zoo` project that needs to use the functions defined in the `exchange` module, it can simply import them using the `import` statement:\n\n```\nimport { buyCrypto, sellCrypto } from './exchange';\n```\n\nThis code can then use the `buyCrypto` and `sellCrypto` functions to perform cryptocurrency exchange operations.\n\nOverall, this code serves as a way to organize and modularize the code in the `zoo` project, making it easier to maintain and reuse.",
- "questions": "1. **What is the purpose of this code file?** \nThis code file exports modules from different files located in the `zoo` project, specifically from the `blocks`, `exchange`, `masterchef`, `masterchef-v2`, and `minichef` files.\n\n2. **What are the contents of the `blocks`, `exchange`, `masterchef`, `masterchef-v2`, and `minichef` files?** \nWithout looking at the contents of these files, it is impossible to know what modules are being exported from them. A smart developer might want to investigate the contents of these files to understand the functionality of the `zoo` project.\n\n3. **Are there any dependencies required for these exported modules to work?** \nThe code file does not provide any information about dependencies required for the exported modules to work. A smart developer might want to check the documentation or source code of each module to determine if any dependencies are needed.",
- "checksum": "52dace33baf929bc58919654a2a1559a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/queries/masterchef-v2.json b/.autodoc/docs/json/core/src/services/graph/queries/masterchef-v2.json
deleted file mode 100644
index 17c1efbf4..000000000
--- a/.autodoc/docs/json/core/src/services/graph/queries/masterchef-v2.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "masterchef-v2.ts",
- "filePath": "core/src/services/graph/queries/masterchef-v2.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/queries/masterchef-v2.ts",
- "summary": "This code defines two GraphQL queries for the zoo project. The first query, `poolsV2Query`, retrieves information about pools in the project. The query takes in several variables, including `first`, `skip`, `orderBy`, `orderDirection`, `block`, and `where`. These variables are used to filter and sort the results of the query. The query returns information about each pool, including its ID, the pair associated with the pool, the allocation point for the pool, the SLP balance for the pool, and information about the pool's master chef and rewarder.\n\nThe second query, `masterChefV2PairAddressesQuery`, retrieves information about the pair addresses associated with the master chef in the project. This query takes in several variables, including `first`, `skip`, `orderBy`, `orderDirection`, and `where`. The query returns information about each pool associated with the master chef, including its ID, allocation point, accumulated Sushi per share, and the ID of the pair associated with the pool.\n\nThese queries can be used in the larger zoo project to retrieve information about pools and pair addresses associated with the master chef. For example, the `poolsV2Query` could be used to display a list of all pools in the project, sorted by allocation point or SLP balance. The `masterChefV2PairAddressesQuery` could be used to display a list of all pair addresses associated with the master chef, along with information about each pool. \n\nHere is an example of how the `poolsV2Query` could be used in a React component:\n\n```\nimport { useQuery } from '@apollo/client';\nimport { poolsV2Query } from './zoo';\n\nfunction PoolList() {\n const { loading, error, data } = useQuery(poolsV2Query);\n\n if (loading) return Bar Info
\nTotal Supply: {bar.totalSupply}
\nRatio: {bar.ratio}
\nxSushi Minted: {bar.xSushiMinted}
\nxSushi Burned: {bar.xSushiBurned}
\nSushi Staked: {bar.sushiStaked}
\nSushi Staked USD: {bar.sushiStakedUSD}
\nSushi Harvested: {bar.sushiHarvested}
\nSushi Harvested USD: {bar.sushiHarvestedUSD}
\nxSushi Age: {bar.xSushiAge}
\nxSushi Age Destroyed: {bar.xSushiAgeDestroyed}
\nLoading...
;\n if (error) returnError :(
;\n\n return (\n- \n {data.pools.map(pool => (\n
- \n
Pool ID: {pool.id}
\nPair: {pool.pair}
\nAllocation Point: {pool.allocPoint}
\nSLP Balance: {pool.slpBalance}
\n \n ))}\n
Loading...
;\n if (error) returnError :(
;\n\n return (\n\n {data.pools.map(pool => (\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines GraphQL queries for retrieving data related to pools and the MasterChef contract in a DeFi project called zoo.\n\n2. What are the default values for the variables used in the queries?\n- The default values for variables such as `first`, `skip`, `orderBy`, `orderDirection`, and `where` are specified in the query definitions.\n\n3. What is the significance of the `masterChefV1PairAddressesQuery` query?\n- This query retrieves the addresses of pairs associated with pools in the MasterChef contract, along with other relevant data such as allocation points and accumulated SUSHI rewards.",
- "checksum": "db320072e7b47604d980bee558a0636c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/graph/queries/minichef.json b/.autodoc/docs/json/core/src/services/graph/queries/minichef.json
deleted file mode 100644
index e98c134a7..000000000
--- a/.autodoc/docs/json/core/src/services/graph/queries/minichef.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "minichef.ts",
- "filePath": "core/src/services/graph/queries/minichef.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/graph/queries/minichef.ts",
- "summary": "The code above contains two GraphQL queries that are used to retrieve data related to pools in the larger project. The first query is called `miniChefPoolsQuery` and it retrieves information about the pools, such as their ID, pair, rewarder, allocation point, last reward time, accumulated Sushi per share, SLP balance, user count, and mini chef. The query takes in several variables, such as `first`, `skip`, `orderBy`, `orderDirection`, `block`, and `where`, which can be used to filter and sort the results. For example, `first` and `skip` can be used to paginate the results, while `orderBy` and `orderDirection` can be used to sort the results by a specific field and direction. The `where` variable is used to filter the results based on certain conditions, such as `allocPoint_gt` and `accSushiPerShare_gt`, which filter out pools with an allocation point or accumulated Sushi per share less than or equal to zero. The query is exported as a constant, which can be imported and used in other parts of the project.\n\nThe second query is called `miniChefPairAddressesQuery` and it retrieves information about the pair addresses associated with the pools. The query takes in similar variables as the first query, such as `first`, `skip`, `orderBy`, `orderDirection`, and `where`, which can be used to filter and sort the results. The query retrieves the ID, allocation point, accumulated Sushi per share, and pair ID for each pool. The query is also exported as a constant, which can be imported and used in other parts of the project.\n\nOverall, these queries are used to retrieve data related to pools in the larger project, which can be used for various purposes, such as displaying the data on a dashboard or calculating rewards for users. The queries are written in GraphQL, which is a query language for APIs that allows for efficient and flexible data retrieval. The queries take in variables that can be used to customize the results, making them more versatile and reusable.",
- "questions": "1. What is the purpose of the `miniChefPoolsQuery` and `miniChefPairAddressesQuery` functions?\n \n `miniChefPoolsQuery` and `miniChefPairAddressesQuery` are GraphQL queries that retrieve data from the `pools` table. The former retrieves more detailed information about each pool, while the latter only retrieves the pool ID and the ID of its associated pair.\n\n2. What are the default values for the variables used in these queries?\n \n The default values for the variables used in both queries are as follows: `first` is 1000, `skip` is 0, `orderBy` is \"id\", `orderDirection` is \"desc\", and `where` is a filter object that specifies that the `allocPoint` and `accSushiPerShare` fields must be greater than 0.\n\n3. What is the purpose of the `Pool_filter` type used in the `miniChefPoolsQuery` and `miniChefPairAddressesQuery` functions?\n \n `Pool_filter` is a custom input type that is used to filter the `pools` table based on certain criteria. In this case, it is used to filter pools where the `allocPoint` and `accSushiPerShare` fields are greater than 0.",
- "checksum": "2ca7d0f3bfea37497dac611f23b3f172"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/local-forage/fetcher.json b/.autodoc/docs/json/core/src/services/local-forage/fetcher.json
deleted file mode 100644
index 3bdf94cd7..000000000
--- a/.autodoc/docs/json/core/src/services/local-forage/fetcher.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "fetcher.ts",
- "filePath": "core/src/services/local-forage/fetcher.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/local-forage/fetcher.ts",
- "summary": "The code in this file is a function called `fetcher` that is used to retrieve data from a local storage using the `localForage` library. The function takes in a `key` parameter which is used to identify the data to be retrieved. \n\nThe `localForage` library is imported at the beginning of the file and is used to interact with the local storage. By default, the library uses IndexDB as the storage strategy, but this can be changed if needed.\n\nThe function uses the `await` keyword to wait for the `getItem` method of `localForage` to return the value associated with the given `key`. The value is then checked to see if it exists, and if it does not, `undefined` is returned. If the value exists, it is logged to the console and then parsed from a string to a JSON object using `JSON.parse`. The parsed object is then returned.\n\nIf an error occurs during the retrieval process, it is caught and logged to the console using `console.error`.\n\nThis function can be used in the larger project to retrieve data from the local storage. For example, if the project has a feature that allows users to save their preferences, this function can be used to retrieve those preferences when the user returns to the site. \n\nHere is an example of how the `fetcher` function can be used:\n\n```\nconst preferences = await fetcher('userPreferences')\nif (preferences) {\n // do something with the preferences\n} else {\n // handle case where preferences have not been set\n}\n```",
- "questions": "1. What is `localForage` and how is it being used in this code?\n `localForage` is a library for offline storage in web browsers, and it is being used to retrieve an item with a given key from the storage.\n\n2. What type of data is expected to be returned from the `fetcher` function?\n The `fetcher` function is expected to return a JSON-parsed object, or `undefined` if the requested item is not found in the storage.\n\n3. Is there any error handling in this code?\n Yes, there is error handling in this code. If an error occurs during the retrieval of the item, it will be logged to the console using `console.error`.",
- "checksum": "4e7604e379abd9e37cb248566fe9c0df"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/local-storage/fetcher.json b/.autodoc/docs/json/core/src/services/local-storage/fetcher.json
deleted file mode 100644
index 211ab84c8..000000000
--- a/.autodoc/docs/json/core/src/services/local-storage/fetcher.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "fetcher.ts",
- "filePath": "core/src/services/local-storage/fetcher.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/local-storage/fetcher.ts",
- "summary": "The code provided is a simple local storage fetcher function that exports as a default. The purpose of this function is to retrieve data from the local storage of the browser based on a given key. The function takes in a single parameter, which is the key to be used to retrieve the data from the local storage. \n\nThe function first uses the `localStorage.getItem()` method to retrieve the value associated with the given key from the local storage. If the value is not found, the function returns `undefined`. However, if the value is found, the function uses the `JSON.parse()` method to parse the value from a string to a JavaScript object and returns the parsed object.\n\nThis function can be used in a larger project that requires data to be stored and retrieved from the local storage of the browser. For example, if a web application requires user preferences to be saved and retrieved across sessions, this function can be used to store and retrieve the preferences from the local storage. \n\nHere is an example of how this function can be used:\n\n```\nimport fetcher from 'zoo/fetcher'\n\n// Store user preferences\nconst preferences = {\n theme: 'dark',\n language: 'en'\n}\nlocalStorage.setItem('preferences', JSON.stringify(preferences))\n\n// Retrieve user preferences using the fetcher function\nconst retrievedPreferences = await fetcher('preferences')\nconsole.log(retrievedPreferences) // { theme: 'dark', language: 'en' }\n``` \n\nIn this example, the `fetcher` function is used to retrieve the user preferences that were previously stored in the local storage. The preferences are stored as a JavaScript object, but they need to be converted to a string using `JSON.stringify()` before being stored in the local storage. The `fetcher` function is then used to retrieve the preferences by passing in the key `'preferences'`. The retrieved preferences are then logged to the console.",
- "questions": "1. What is the purpose of this code?\n Answer: This code exports an asynchronous function called `fetcher` that retrieves a value from local storage and returns it as a parsed JSON object.\n\n2. What happens if the specified key does not exist in local storage?\n Answer: If the specified key does not exist in local storage, the function returns `undefined`.\n\n3. Is this code part of a larger project or library?\n Answer: Yes, the code is part of the `swr` library and is located in an example file in the `storage-tab-sync` directory.",
- "checksum": "09fbfe57ad37ea25e8ee6fbc58f7372e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/redis/index.json b/.autodoc/docs/json/core/src/services/redis/index.json
deleted file mode 100644
index f22febb66..000000000
--- a/.autodoc/docs/json/core/src/services/redis/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/services/redis/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/redis/index.ts",
- "summary": "This code imports the Redis library from the 'ioredis' package and creates a new Redis client instance using the URL specified in the environment variable 'REDIS_URL'. The Redis client instance is then exported as the default export of this module.\n\nRedis is an in-memory data structure store that can be used as a database, cache, and message broker. This code allows other modules in the 'zoo' project to use the Redis client instance to store and retrieve data from Redis.\n\nFor example, if a module in the 'zoo' project needs to store user session data, it can import the Redis client instance from this module and use the set() method to store the session data with a unique key:\n\n```\nimport redis from './redis'\n\nconst sessionId = 'abc123'\nconst sessionData = { userId: 123, isLoggedIn: true }\n\nredis.set(sessionId, JSON.stringify(sessionData))\n```\n\nLater, the module can retrieve the session data using the get() method:\n\n```\nconst sessionDataString = await redis.get(sessionId)\nconst sessionData = JSON.parse(sessionDataString)\n``` \n\nOverall, this code provides a simple and efficient way for modules in the 'zoo' project to use Redis as a data store.",
- "questions": "1. **What is the purpose of this code?**\\\nA smart developer might wonder what this code does and how it fits into the overall functionality of the `zoo` project. Based on the code, it appears to be importing the Redis library and creating a new Redis instance using the `REDIS_URL` environment variable, and then exporting that instance.\n\n2. **What is the Redis library and why is it being used in this project?**\\\nA smart developer might be familiar with Redis but may not know why it is being used in this specific project. Redis is an in-memory data structure store that can be used as a database, cache, and message broker. It's possible that this project is using Redis for one or more of these purposes.\n\n3. **What is the significance of exporting the Redis instance?**\\\nA smart developer might wonder why the Redis instance is being exported. Exporting the instance makes it available for use in other parts of the `zoo` project. This could be useful if other modules or files need to interact with Redis or if the Redis instance needs to be shared across multiple parts of the project.",
- "checksum": "8102ee2b17b7ef16fe08c1eee5501b9b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/web3/fetcher.json b/.autodoc/docs/json/core/src/services/web3/fetcher.json
deleted file mode 100644
index 277d10ce8..000000000
--- a/.autodoc/docs/json/core/src/services/web3/fetcher.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "fetcher.ts",
- "filePath": "core/src/services/web3/fetcher.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/web3/fetcher.ts",
- "summary": "The `fetcher` function is a placeholder function that does not contain any code. It is likely that this function was created as a placeholder for future development or as a reference for other developers to know where to add code for fetching data from an external source. \n\nIn the larger project, this function may be used as a starting point for implementing data fetching functionality. For example, if the project requires data from an API, the `fetcher` function can be modified to make a request to the API and return the response. \n\nHere is an example of how the `fetcher` function can be modified to fetch data from an API using the `fetch` function:\n\n```\nexport async function fetcher(url) {\n const response = await fetch(url);\n const data = await response.json();\n return data;\n}\n```\n\nThis modified `fetcher` function takes a `url` parameter and uses the `fetch` function to make a request to the specified URL. The response is then parsed as JSON and returned as a JavaScript object. \n\nOverall, the `fetcher` function serves as a starting point for implementing data fetching functionality in the larger project.",
- "questions": "1. What is the purpose of the `fetcher` function?\n - The code does not provide any information about the purpose of the `fetcher` function. It would be helpful to have comments or documentation explaining what this function does.\n\n2. Are there any parameters or return values for the `fetcher` function?\n - The code does not show any parameters or return values for the `fetcher` function. It would be useful to know if this function takes any arguments or returns any data.\n\n3. Is this function used anywhere else in the `zoo` project?\n - The code snippet only shows the `fetcher` function in isolation, so it is unclear if this function is used elsewhere in the `zoo` project. It would be helpful to know if this function is called from other parts of the codebase.",
- "checksum": "c257b00736d44b1aa4a04894acf81ae4"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/zerion/constants.json b/.autodoc/docs/json/core/src/services/zerion/constants.json
deleted file mode 100644
index c5e2be27a..000000000
--- a/.autodoc/docs/json/core/src/services/zerion/constants.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "constants.ts",
- "filePath": "core/src/services/zerion/constants.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/zerion/constants.ts",
- "summary": "The code above defines two constants, `ZERION_API` and `ZERION_API_KEY`, which are likely used to connect to the Zerion API. The `ZERION_API` constant is a WebSocket Secure (wss) URL that points to the Zerion API endpoint. The `ZERION_API_KEY` constant is an API key that is used to authenticate the connection to the Zerion API. \n\nIn the larger project, this code may be used to establish a connection to the Zerion API, which is a platform that provides access to decentralized finance (DeFi) data. The API can be used to retrieve data on various DeFi protocols, such as Uniswap, Compound, and Aave. By connecting to the Zerion API, the project can retrieve data on these protocols and use it to display information to users or perform other actions.\n\nHere is an example of how this code may be used in the larger project:\n\n```javascript\nimport { ZERION_API, ZERION_API_KEY } from 'zoo';\n\nconst socket = new WebSocket(ZERION_API);\nsocket.onopen = () => {\n socket.send(`auth:${ZERION_API_KEY}`);\n // send other messages to the API to retrieve data\n};\n```\n\nIn this example, the `WebSocket` constructor is used to create a new WebSocket connection to the Zerion API endpoint. Once the connection is established, the `onopen` event is triggered, which sends an authentication message to the API using the `ZERION_API_KEY` constant. From here, the project can send other messages to the API to retrieve data on DeFi protocols.",
- "questions": "1. What is the purpose of this code and how is it used within the zoo project?\n- This code exports two constants, `ZERION_API` and `ZERION_API_KEY`, which likely serve as API endpoints or keys for interacting with the Zerion API. A smart developer may want to know how these constants are used within the zoo project and what functionality they enable.\n\n2. Is the `ZERION_API` endpoint secure and how is data transmitted over it?\n- The `ZERION_API` endpoint uses the `wss` protocol, which stands for \"WebSocket Secure\". This suggests that data transmitted over the endpoint is encrypted and secure. However, a smart developer may want to confirm this and ensure that sensitive data is not being transmitted in plain text.\n\n3. Are there any potential security vulnerabilities associated with the `ZERION_API_KEY` constant?\n- The `ZERION_API_KEY` constant appears to be a sensitive API key used to authenticate requests to the Zerion API. A smart developer may want to ensure that this key is not exposed in any public-facing code or configuration files, as this could potentially lead to unauthorized access to the API and its associated data.",
- "checksum": "17d21da06347460d3f525ab85b311ebe"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/zerion/fetchers.json b/.autodoc/docs/json/core/src/services/zerion/fetchers.json
deleted file mode 100644
index 49df38c8f..000000000
--- a/.autodoc/docs/json/core/src/services/zerion/fetchers.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "fetchers.ts",
- "filePath": "core/src/services/zerion/fetchers.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/zerion/fetchers.ts",
- "summary": "The code is a module that exports a function called `getAssets` that fetches asset data from the Zerion API. The function takes an account address as an argument and returns an array of assets associated with that account. \n\nThe `getAssets` function uses a `fetcher` function to make a WebSocket connection to the Zerion API. The `fetcher` function takes an array of queries as an argument and returns a Promise that resolves with the data returned by the API. \n\nThe `fetcher` function first creates a WebSocket connection to the Zerion API using the `WebSocket` constructor. It then sends a series of queries to the API using the `send` method of the WebSocket object. The queries are sent in two parts: a `40` message that opens a query and a `42` message that sends the query payload. \n\nThe `fetcher` function listens for messages from the API using the `addEventListener` method of the WebSocket object. When a `40` message is received, the function sends the corresponding `42` message with the query payload. When a `42` message is received, the function adds the data to the `data` object and checks if all queries have been completed. If all queries have been completed, the function closes the WebSocket connection and resolves the Promise with the `data` object. \n\nThe `getAssets` function creates an array of queries to fetch asset data for the specified account. The queries are sent to the `fetcher` function, which returns an object containing asset data for each query. The `getAssets` function then maps over the object keys to extract the asset data and reduce the data into a single array. The resulting array contains objects with asset information, including the asset name, quantity, and network. \n\nThis code can be used in a larger project to fetch asset data for a user's account. The `getAssets` function can be called with a user's account address to retrieve their asset data. The resulting data can be used to display the user's assets in a UI or to perform other operations on the assets. \n\nExample usage:\n\n```\nimport { getAssets } from 'zoo'\n\nconst account = '0x123456789abcdef'\nconst assets = await getAssets(account)\n\nconsole.log(assets)\n// [\n// { name: 'Asset 1', quantity: 10, network: 'Mainnet' },\n// { name: 'Asset 2', quantity: 5, network: 'Matic' },\n// { name: 'Asset 3', quantity: 2, network: 'BSC' },\n// ...\n// ]\n```",
- "questions": "1. What is the purpose of the `fetcher` function?\n- The `fetcher` function is used to fetch asset data from the Zerion API using a WebSocket connection.\n\n2. What is the purpose of the `getAssets` function?\n- The `getAssets` function uses the `fetcher` function to retrieve asset data for a given account on multiple networks (Mainnet, Matic, and BSC) and returns an array of asset objects.\n\n3. What external dependencies does this code rely on?\n- This code relies on the `lodash` library for the `uniq` function and the `@lingui/macro` library for the `t` function.",
- "checksum": "7f6dcd0b3460fbcb63fbca998201647e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/services/zerion/hooks.json b/.autodoc/docs/json/core/src/services/zerion/hooks.json
deleted file mode 100644
index 8494eebca..000000000
--- a/.autodoc/docs/json/core/src/services/zerion/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/services/zerion/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/services/zerion/hooks.ts",
- "summary": "The code above is a TypeScript module that exports a function called `useAssets`. This function utilizes the `useSWR` hook from the `swr` library and the `useActiveWeb3React` hook from a custom `hooks` module. The purpose of this function is to fetch and return a user's assets from the `getAssets` function in the `fetchers` module.\n\nThe `useAssets` function takes an optional `swrConfig` parameter, which is a configuration object for the `useSWR` hook. If no configuration is provided, the default `useSWR` configuration is used. The function then calls the `useActiveWeb3React` hook to retrieve the current user's account information. If there is an account, the function calls `getAssets` with the account as a parameter and passes the result to the `useSWR` hook. The `useSWR` hook then caches the result and returns it to the `useAssets` function.\n\nThis function can be used in a larger project to retrieve a user's assets and display them in a user interface. For example, a decentralized exchange application could use this function to display a user's token balances and other assets. Here is an example of how this function could be used in a React component:\n\n```\nimport { useAssets } from './path/to/useAssets'\n\nfunction AssetList() {\n const assets = useAssets()\n\n if (!assets) {\n return \n
\n ))}\n Pool ID: {pool.id}
\nAssets: {pool.pair}
\nAllocation: {pool.allocPoint}
\nBalance: {pool.balance}
\nLoading...
\n }\n\n return (\n - \n {assets.map(asset => (\n
- {asset.name}: {asset.balance} \n ))}\n
\n
\n )\n}\n```",
- "questions": "1. What does this code do?\n- This code exports a React component called `Updater` that listens for changes in the block number of a specified blockchain and updates the block number in the Redux store.\n\n2. What are the dependencies of this code?\n- This code depends on several React hooks (`useCallback`, `useEffect`, `useState`) and custom hooks (`useActiveWeb3React`, `useDebounce`, `useIsWindowVisible`) from other files in the project. It also imports an action creator function (`updateBlockNumber`) from another file.\n\n3. What is the purpose of the `useDebounce` hook in this code?\n- The `useDebounce` hook is used to debounce the state updates of the `Updater` component. This means that the state updates will only be propagated to the Redux store after a certain amount of time has passed since the last update, which can help reduce unnecessary re-renders and improve performance.",
- "checksum": "c0432fa0ebee6ca359ddf08281faf2a1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/bentobox/hooks.json b/.autodoc/docs/json/core/src/state/bentobox/hooks.json
deleted file mode 100644
index 585a93420..000000000
--- a/.autodoc/docs/json/core/src/state/bentobox/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/state/bentobox/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/bentobox/hooks.ts",
- "summary": "The code is a TypeScript module that exports three functions: `useBentoBalances`, `useBentoBalance`, and `useBentoMasterContractAllowed`. The module imports several dependencies, including `@zoolabs/zdk`, `react`, `@ethersproject/bignumber`, and `@ethersproject/address`. \n\nThe `useBentoBalances` function returns an array of `BentoBalance` objects. Each `BentoBalance` object represents a token balance in the BentoBox smart contract. The function retrieves the user's account and the chain ID from the `useActiveWeb3React` hook. It then uses the `useAllTokens` hook to get a list of all tokens and the `useBoringHelperContract` hook to get the BoringHelper smart contract instance. The function calls the `getBalances` and `getUIInfo` methods of the BoringHelper contract to retrieve the user's token balances and the exchange rates of the tokens in USD. The function then calculates the USD value of each token balance and returns an array of `BentoBalance` objects that have a non-zero balance or BentoBox balance.\n\nThe `useBentoBalance` function returns an object that represents the user's balance of a specific token in the BentoBox smart contract. The function takes a `tokenAddress` parameter and retrieves the user's account from the `useActiveWeb3React` hook. It then uses the `useBoringHelperContract`, `useBentoBoxContract`, and `useContract` hooks to get the BoringHelper, BentoBox, and token smart contract instances, respectively. The function calls the `getBalances` method of the BoringHelper contract to retrieve the user's token balance in the BentoBox contract. The function then calculates the user's balance of the token in the BentoBox contract and returns an object that has the balance value and the number of decimals.\n\nThe `useBentoMasterContractAllowed` function returns a boolean value that indicates whether the user has approved a master contract to interact with the BentoBox smart contract. The function takes `masterContract` and `user` parameters and uses the `useBentoBoxContract` hook to get the BentoBox smart contract instance. The function calls the `masterContractApproved` method of the BentoBox contract to check if the user has approved the master contract to interact with the BentoBox contract. The function returns `true` if the user has approved the master contract, `false` if the user has not approved the master contract, and `undefined` if the function is still loading. \n\nThese functions are used to retrieve and display the user's token balances and BentoBox balances in the Zoo project. The `useBentoBalances` function is used to display the user's token balances in the BentoBox contract, while the `useBentoBalance` function is used to display the user's balance of a specific token in the BentoBox contract. The `useBentoMasterContractAllowed` function is used to check if the user has approved a master contract to interact with the BentoBox contract. These functions are essential for the Zoo project to provide users with accurate and up-to-date information about their token balances and BentoBox balances.",
- "questions": "1. What is the purpose of the `useBentoBalances` function?\n- The `useBentoBalances` function returns an array of `BentoBalance` objects that represent the balances of all tokens held in the user's BentoBox. \n\n2. What is the `useBentoBalance` function used for?\n- The `useBentoBalance` function returns the balance of a specific token held in the user's BentoBox, given the token's address. \n\n3. What is the `useBentoMasterContractAllowed` function used for?\n- The `useBentoMasterContractAllowed` function checks whether a given master contract is approved by the user to interact with their BentoBox. It returns a boolean value indicating whether the approval is granted or not.",
- "checksum": "132040d8d7a26b1e6e38a4e82c5d812f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/bridge/action.json b/.autodoc/docs/json/core/src/state/bridge/action.json
deleted file mode 100644
index 019643fa0..000000000
--- a/.autodoc/docs/json/core/src/state/bridge/action.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "action.ts",
- "filePath": "core/src/state/bridge/action.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/bridge/action.ts",
- "summary": "This code is a module that exports several Redux actions for a project called zoo. Redux is a state management library for JavaScript applications. The actions in this module are used to update the state of the application in response to user interactions with a swapping feature. \n\nThe `createAction` function is imported from the `@reduxjs/toolkit` package and is used to create Redux actions. Each action has a unique type and a payload that can be used to update the state of the application. \n\nThe `fetchTokens` action is used to fetch tokens from different blockchain networks. The payload is an object that maps each chain ID to an array of tokens. The `fetchBalances` action is used to fetch the balances of tokens for each chain ID. The payload is an object that maps each chain ID to an array of balances. \n\nThe `updateCurrentTrade` action is used to update the current trade being made by the user. The payload is an object that contains the `from` and `to` tokens. The `updateCurrentSelectSide` action is used to update the current side of the trade being selected by the user. The payload is a string that can be either `\"from\"` or `\"to\"`. \n\nThe `updateCurrentAmount` action is used to update the current amount of tokens being swapped. The payload is an object that contains the token being swapped and the amount. The `updateCurrentBalances` action is used to update the current balances of tokens for each chain ID. The payload is an object that contains the token being updated and the new balance. \n\nFinally, the `updateActiveChains` action is used to update the active chains for the swapping feature. The payload is an object that contains the selected chains. \n\nOverall, this module provides a set of Redux actions that can be used to manage the state of the swapping feature in the zoo project. Here is an example of how one of these actions can be used:\n\n```\nimport { useDispatch } from \"react-redux\";\nimport { updateCurrentAmount } from \"zoo\";\n\nfunction MyComponent() {\n const dispatch = useDispatch();\n\n function handleAmountChange(token, amount) {\n dispatch(updateCurrentAmount({ token, amount }));\n }\n\n return (\n // render component\n );\n}\n```",
- "questions": "1. What is the purpose of the `createAction` function being imported from \"@reduxjs/toolkit\"?\n- The `createAction` function is used to create Redux actions with a specific type and payload.\n\n2. What is the significance of the `Field` enum?\n- The `Field` enum defines two constants, \"INPUT\" and \"OUTPUT\", which are used to identify the input and output fields in the swap feature.\n\n3. What is the relationship between the `fetchTokens` and `fetchBalances` actions?\n- Both `fetchTokens` and `fetchBalances` actions are used to fetch data related to tokens and balances, but `fetchTokens` fetches token data for all supported chains while `fetchBalances` fetches balance data for a specific chain.",
- "checksum": "180b42fa429ea36507014b979cb3a937"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/bridge/reducer.json b/.autodoc/docs/json/core/src/state/bridge/reducer.json
deleted file mode 100644
index db3d257bc..000000000
--- a/.autodoc/docs/json/core/src/state/bridge/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/bridge/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/bridge/reducer.ts",
- "summary": "This code defines a Redux reducer for a project called \"Swap\". The reducer manages the state of the Swap application, which allows users to swap tokens on different blockchain networks. \n\nThe `SwapState` interface defines the shape of the state object, which includes properties such as `loading`, `tokens`, `currentTrade`, `error`, `currentSelectSide`, `currentAmount`, `balances`, and `activeChains`. These properties represent various aspects of the application's state, such as whether data is currently being loaded, which tokens are available for swapping, the current trade being executed, any errors that occur, and the current balances and amounts being swapped.\n\nThe `initialState` object defines the initial state of the application, which includes default values for each of the state properties. For example, the `currentAmount` property is initialized with a default value of `{ to: 0, from: 0.1 }`, which represents the amount of tokens being swapped from and to the selected tokens.\n\nThe `createReducer` function from the `@reduxjs/toolkit` library is used to create the reducer function. The `builder` argument is used to define the reducer's behavior for each action type. For example, the `addCase` method is used to define how the reducer should update the state in response to the `loading` action, which sets the `loading` property to the value of the `action.payload`.\n\nOverall, this code defines the state management for the Swap application, which allows users to swap tokens on different blockchain networks. The reducer manages the state of the application, including loading data, updating token and balance information, and executing trades. The reducer can be used in conjunction with other parts of the application, such as UI components and middleware, to create a fully functional Swap application.",
- "questions": "1. What is the purpose of this code?\n- This code defines the initial state and a reducer function for a Redux store related to a swapping feature for tokens on different chains.\n\n2. What are the types of data that this code is handling?\n- This code is handling various types of data such as tokens, balances, errors, and chain IDs, which are defined in the imported `types` module.\n\n3. What actions can trigger updates to the state in this code?\n- There are several actions defined in the imported `action` module that can trigger updates to the state, such as `loading`, `fetchTokens`, `updateCurrentTrade`, `updateError`, `updateCurrentSelectSide`, `updateCurrentAmount`, `fetchBalances`, `updateCurrentBalances`, and `updateActiveChains`. These actions are handled by the reducer function defined in this code.",
- "checksum": "ae098e397fe3551be87b953d814580b6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/bridge/types.json b/.autodoc/docs/json/core/src/state/bridge/types.json
deleted file mode 100644
index 522252e05..000000000
--- a/.autodoc/docs/json/core/src/state/bridge/types.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "types.ts",
- "filePath": "core/src/state/bridge/types.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/bridge/types.ts",
- "summary": "This file contains a set of interfaces that define the structure of various objects used in the zoo project. \n\nThe `Proposal` interface defines the structure of a proposal object, which includes information such as the proposal type, status, and description, as well as the votes and vote count associated with the proposal. This interface also includes information about the token being used in the proposal, such as its address, decimal value, and IPFS hash.\n\nThe `Token` interface defines the structure of a token object, which includes information such as the token's address, decimal value, name, and symbol. This interface also includes a boolean value indicating whether the token is compliant with the EIP-2612 standard, as well as a URI for the token's logo.\n\nThe `CurrentTrade` interface defines the structure of a trade object, which includes information about the tokens being traded, such as their addresses and decimal values.\n\nThe `TokenList` interface defines the structure of a token list object, which includes information about a list of tokens, such as the name of the list, the timestamp of its creation, and the version of the list. This interface also includes an array of `Token` objects, as well as optional keywords, tags, and a URI for the list's logo.\n\nThe `Version` interface defines the structure of a version object, which includes information about the major, minor, and patch versions of a software release.\n\nThe `Tags` interface defines the structure of a tags object, which includes information about a set of tags associated with a token list.\n\nThe `Balance` interface defines the structure of a balance object, which includes information about the balance of a particular token for a given user.\n\nThe `MoralisError` interface defines the structure of an error object that may be returned by the Moralis API, which is used in the zoo project. This interface includes information such as the error code, description, and any metadata associated with the error.\n\nThe `MetaError` interface defines the structure of a metadata object associated with a `MoralisError`.\n\nFinally, the `TokenSelect` and `ChainSelect` interfaces define the structure of objects used to select tokens and chains, respectively, in the zoo project.\n\nOverall, these interfaces provide a standardized way of defining the structure of various objects used in the zoo project, which can help to ensure consistency and interoperability across different parts of the project. For example, the `Proposal` interface can be used to define the structure of proposal objects in both the front-end and back-end components of the project, allowing for easier communication and data sharing between these components.",
- "questions": "1. What is the purpose of the `BigNumber` import and how is it used in this code?\n- The `BigNumber` import is used to represent large numbers in a precise manner. It is used in the `Proposal` interface to define the `votes` and `voteCount` properties as arrays of `BigNumber` objects.\n\n2. What is the difference between the `Token` and `TokenList` interfaces?\n- The `Token` interface defines the properties of a single token, while the `TokenList` interface defines a list of tokens along with metadata such as name, version, and keywords.\n\n3. What is the `MoralisError` interface used for?\n- The `MoralisError` interface defines the structure of an error object that can be returned by the Moralis API. It includes properties such as `statusCode`, `error`, `description`, and `meta` to provide information about the error.",
- "checksum": "225c060a10bbc4ada5eea7cff41dc3e3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/burn/actions.json b/.autodoc/docs/json/core/src/state/burn/actions.json
deleted file mode 100644
index 2057f0e64..000000000
--- a/.autodoc/docs/json/core/src/state/burn/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/burn/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/burn/actions.ts",
- "summary": "This code is a module that exports a single function called `typeInput`. The function is created using the `createAction` function from the `@reduxjs/toolkit` library. The `typeInput` function takes an object with two properties as its argument: `field` and `typedValue`. The `field` property is an enum that defines four possible values: `LIQUIDITY_PERCENT`, `LIQUIDITY`, `CURRENCY_A`, and `CURRENCY_B`. The `typedValue` property is a string that represents the user's input.\n\nThe purpose of this code is to create an action that can be dispatched to a Redux store. The action represents the user typing input into a form field. The `field` property specifies which field the user is typing into, and the `typedValue` property contains the user's input.\n\nThis code is likely used in a larger project that uses Redux for state management. The `typeInput` function is likely dispatched when the user types input into a form field. The Redux store would then update its state based on the action that was dispatched.\n\nHere is an example of how this code might be used in a React component:\n\n```\nimport { useDispatch } from 'react-redux';\nimport { typeInput, Field } from './zoo';\n\nfunction MyComponent() {\n const dispatch = useDispatch();\n\n function handleInputChange(field, value) {\n dispatch(typeInput({ field, typedValue: value }));\n }\n\n return (\n \n handleInputChange(Field.CURRENCY_A, e.target.value)} />\n
\n );\n}\n```\n\nIn this example, the `handleInputChange` function is called whenever the user types input into the text field. It dispatches the `typeInput` action with the `CURRENCY_A` field and the user's input as arguments. The Redux store would then update its state based on this action.",
- "questions": "1. What is the purpose of the `Field` enum?\n - The `Field` enum is used to define the different fields that can be updated in the `typeInput` action.\n\n2. What is the `typeInput` action used for?\n - The `typeInput` action is used to update the value of a specific field (defined by the `Field` enum) with a new typed value.\n\n3. What library is being used for the `createAction` function?\n - The `createAction` function is being imported from the `@reduxjs/toolkit` library.",
- "checksum": "2504337b95c13a7437e262a4d50d8f6b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/burn/hooks.json b/.autodoc/docs/json/core/src/state/burn/hooks.json
deleted file mode 100644
index 2a435f6e4..000000000
--- a/.autodoc/docs/json/core/src/state/burn/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/state/burn/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/burn/hooks.ts",
- "summary": "The code is a module that exports two React hooks: `useDerivedBurnInfo` and `useBurnActionHandlers`. These hooks are used to manage the state of a burn action in a decentralized exchange (DEX) application. \n\nThe `useDerivedBurnInfo` hook takes two arguments, `currencyA` and `currencyB`, which are instances of the `Currency` class from the `@zoolabs/zdk` library. It returns an object with four properties: `pair`, `parsedAmounts`, `error`, and `userLiquidity`. \n\nThe `pair` property is an instance of the `Pair` class from the `@zoolabs/zdk` library, which represents a pair of tokens in the DEX. The `parsedAmounts` property is an object that contains four properties: `LIQUIDITY_PERCENT`, `LIQUIDITY`, `CURRENCY_A`, and `CURRENCY_B`. These properties represent the parsed amounts of liquidity, token A, and token B that the user wants to burn. The `error` property is a string that represents any error that occurred during the parsing of the user input. The `userLiquidity` property is an instance of the `CurrencyAmount` class from the `@zoolabs/zdk` library, which represents the amount of liquidity tokens that the user has in their wallet.\n\nThe `useBurnActionHandlers` hook returns an object with one property: `onUserInput`. This property is a callback function that takes two arguments, `field` and `typedValue`, and dispatches an action to update the state of the burn action in the Redux store.\n\nThe `useDerivedBurnInfo` hook uses several other hooks to derive its state. The `useActiveWeb3React` hook is used to get the current Ethereum account and chain ID. The `useLingui` hook is used to get the current language for localization. The `useTokenBalances` hook is used to get the token balances for the current account. The `useTotalSupply` hook is used to get the total supply of the liquidity token for the current pair. The `useV2Pair` hook is used to get the pair instance for the current pair of tokens.\n\nThe `useDerivedBurnInfo` hook calculates the parsed amounts of liquidity, token A, and token B based on the user input and the current state of the DEX. It also calculates any errors that occurred during the parsing of the user input.\n\nThe `useBurnActionHandlers` hook dispatches an action to update the state of the burn action in the Redux store based on the user input.\n\nOverall, these hooks are used to manage the state of a burn action in a DEX application. They use several other hooks to derive their state and dispatch actions to update the Redux store.",
- "questions": "1. What is the purpose of the `useDerivedBurnInfo` function?\n- The `useDerivedBurnInfo` function is used to derive information related to burning tokens in a liquidity pool, including the liquidity pair, parsed amounts, error messages, and user liquidity.\n\n2. What is the significance of the `Field` enum?\n- The `Field` enum is used to identify the different fields that can be updated by the user when burning tokens in a liquidity pool, including liquidity percent, liquidity amount, currency A amount, and currency B amount.\n\n3. What is the role of the `useBurnActionHandlers` function?\n- The `useBurnActionHandlers` function returns an object with a single function `onUserInput`, which is used to dispatch an action to update the `typedValue` of a specific `Field` when the user inputs a new value.",
- "checksum": "d2e17d719cf0260f1616a48c81c3e390"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/burn/reducer.json b/.autodoc/docs/json/core/src/state/burn/reducer.json
deleted file mode 100644
index 492865b58..000000000
--- a/.autodoc/docs/json/core/src/state/burn/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/burn/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/burn/reducer.ts",
- "summary": "This code is a TypeScript module that exports a Redux reducer function for the `BurnState` slice of the store in the larger project. The `BurnState` interface defines the shape of the state object, which has two properties: `independentField` and `typedValue`. The `initialState` object sets the initial values for these properties.\n\nThe `createReducer` function from the `@reduxjs/toolkit` package is used to create the reducer function. It takes the initial state object and a callback function that defines how the state should be updated in response to actions. The callback function is created using the `builder` object, which has a method `addCase` that takes an action type and a reducer function. The reducer function takes the current state and the action payload as arguments, and returns the new state object.\n\nIn this case, the action type is `typeInput`, which is presumably dispatched when the user types into an input field. The payload of the action is an object with two properties: `field` and `typedValue`. The reducer function updates the `independentField` and `typedValue` properties of the state object with the corresponding values from the action payload.\n\nThis reducer function can be used in conjunction with other reducer functions to create the overall Redux store for the project. For example, the `BurnState` slice of the store might be used to manage user input for a form that allows the user to burn tokens. The `independentField` property might represent the type of token being burned, and the `typedValue` property might represent the amount of tokens being burned.\n\nHere is an example of how this reducer function might be used in a Redux store:\n\n```typescript\nimport { configureStore } from '@reduxjs/toolkit'\nimport burnReducer from './burnReducer'\n\nconst store = configureStore({\n reducer: {\n burn: burnReducer,\n // other reducers...\n },\n})\n\nexport default store\n```\n\nThis code creates a Redux store with the `burn` slice of the state managed by the `burnReducer` function. Other slices of the state can be managed by other reducer functions. The `store` object can be used to dispatch actions and retrieve the current state of the store.",
- "questions": "1. What is the purpose of the `createReducer` function from `@reduxjs/toolkit` being imported?\n- The `createReducer` function is used to create a Redux reducer function that can handle actions and update the state of the application accordingly.\n\n2. What is the `BurnState` interface used for?\n- The `BurnState` interface defines the shape of the state object for the `zoo` project's \"burn\" feature, which includes an `independentField` property of type `Field` and a `typedValue` property of type `string`.\n\n3. What action is being handled in the reducer function?\n- The reducer function is handling the `typeInput` action, which takes in a `field` and `typedValue` payload and updates the `independentField` and `typedValue` properties of the state object accordingly.",
- "checksum": "ccdb5f0079b86abf6d355d97ea578b7b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/claim/hooks.json b/.autodoc/docs/json/core/src/state/claim/hooks.json
deleted file mode 100644
index 353a74956..000000000
--- a/.autodoc/docs/json/core/src/state/claim/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/state/claim/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/claim/hooks.ts",
- "summary": "The code in this file is part of the larger zoo project and contains functions that allow users to claim SUSHI tokens from a Merkle distributor contract. The code imports various libraries and hooks from the project, including `@zoolabs/zdk`, `@ethersproject/address`, `react`, and others. \n\nThe `fetchClaim` function takes an Ethereum address and a chain ID as input and returns a promise that resolves to the user's claim data or null if the address is invalid. The function fetches the Merkle root from a constant file and uses it to retrieve the claim data from the distributor contract. The claim data includes the user's index, amount, and proof. The function caches the promise for each address and chain ID combination to avoid redundant requests.\n\nThe `useUserClaimData` hook takes an Ethereum address as input and returns the user's claim data or null if the data is not available. The hook uses the `fetchClaim` function to fetch the claim data and stores it in state. The hook updates the state whenever the address or chain ID changes.\n\nThe `useUserHasAvailableClaim` hook takes an Ethereum address as input and returns a boolean indicating whether the user has an available claim. The hook uses the `useUserClaimData` hook to retrieve the user's claim data and the `useMerkleDistributorContract` hook to retrieve the distributor contract. The hook uses the `useSingleCallResult` hook to check whether the user has claimed their tokens.\n\nThe `useUserUnclaimedAmount` hook takes an Ethereum address as input and returns the user's unclaimed SUSHI tokens. The hook uses the `useUserClaimData` and `useUserHasAvailableClaim` hooks to retrieve the user's claim data and check whether the user has an available claim. The hook uses the `SUSHI` token from the project's configuration file to calculate the amount of unclaimed tokens.\n\nThe `useClaimCallback` hook takes an Ethereum address as input and returns a function that allows the user to claim their SUSHI tokens. The hook uses the `useActiveWeb3React`, `useUserClaimData`, `useUserUnclaimedAmount`, `useTransactionAdder`, and `useMerkleDistributorContract` hooks to retrieve the user's claim data, unclaimed tokens, and the distributor contract. The hook estimates the gas limit for the claim transaction and adds the transaction to the project's transaction list.\n\nOverall, this file contains functions and hooks that allow users to claim SUSHI tokens from a Merkle distributor contract. These functions and hooks are used in other parts of the project to provide users with information about their claims and allow them to claim their tokens.",
- "questions": "1. What is the purpose of the `fetchClaim` function?\n- The `fetchClaim` function fetches the claim data for a given address and chain ID from a merkle root and returns it as a promise.\n\n2. What is the purpose of the `useUserHasAvailableClaim` function?\n- The `useUserHasAvailableClaim` function checks if a user is in the merkle root blob and has not yet claimed UNI.\n\n3. What is the purpose of the `useClaimCallback` function?\n- The `useClaimCallback` function returns a callback function that can be used to claim SUSHI for a user with unclaimed rewards.",
- "checksum": "05365141a66d4be67d02cdf70947eb3b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/create/actions.json b/.autodoc/docs/json/core/src/state/create/actions.json
deleted file mode 100644
index a794c7528..000000000
--- a/.autodoc/docs/json/core/src/state/create/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/create/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/create/actions.ts",
- "summary": "This code defines several Redux actions related to currency selection and input in a project called zoo. The `createAction` function is imported from the `@reduxjs/toolkit` library, which simplifies the process of creating Redux actions and reducers.\n\nThe `Field` enum defines two possible values for the `field` property that is used in several of the actions: `COLLATERAL` and `ASSET`. These likely refer to different types of assets that can be traded or managed within the larger project.\n\nThe `selectCurrency` action takes an object with two properties: `field` and `currencyId`. This action is likely dispatched when a user selects a currency from a dropdown or other UI element. The `field` property indicates whether the selected currency is for collateral or an asset, and the `currencyId` property is a string identifier for the selected currency.\n\nThe `switchCurrencies` action takes no arguments and is likely dispatched when a user clicks a button to swap the selected currencies. This action may trigger a UI update to reflect the new currency selections.\n\nThe `typeInput` action takes an object with two properties: `field` and `typedValue`. This action is likely dispatched when a user types a value into an input field related to a particular currency. The `field` property indicates which currency the input is for, and the `typedValue` property is the string value that the user has typed.\n\nThe `replaceCreateState` action takes an object with several optional properties: `field`, `typedValue`, `collateralId`, and `assetId`. This action is likely dispatched when a user submits a form or completes some other action related to creating a new asset or trade. The `field` and `typedValue` properties likely correspond to the user's input for the asset or trade, while the `collateralId` and `assetId` properties may be used to specify the selected currencies for the asset or trade.\n\nOverall, these actions likely form part of a larger Redux store that manages the state of the zoo project's currency-related functionality. Other parts of the project may dispatch these actions or listen for changes to the store in order to update the UI or perform other actions. For example, a component that displays a list of available currencies may listen for changes to the `selectCurrency` action in order to update its display.",
- "questions": "1. What is the purpose of the `createAction` function being imported from `@reduxjs/toolkit`?\n - The `createAction` function is used to create Redux actions with a specific type and payload structure.\n2. What is the significance of the `Field` enum and how is it used in the code?\n - The `Field` enum defines two possible values for the `field` property in the payloads of the `selectCurrency`, `typeInput`, and `replaceCreateState` actions. It is used to ensure that the correct field is being targeted by these actions.\n3. What is the difference between the `replaceCreateState` action and the other actions defined in the code?\n - The `replaceCreateState` action has a more complex payload structure than the other actions, as it includes optional `collateralId` and `assetId` properties. It is used to completely replace the state of the `create` slice of the Redux store with a new state object that includes the specified values.",
- "checksum": "842e216d7570664ffbc125ea353ea4b7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/create/hook.json b/.autodoc/docs/json/core/src/state/create/hook.json
deleted file mode 100644
index b7932527e..000000000
--- a/.autodoc/docs/json/core/src/state/create/hook.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hook.ts",
- "filePath": "core/src/state/create/hook.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/create/hook.ts",
- "summary": "The code is a module that exports three React hooks that can be used in the larger project. The module imports several functions and objects from other modules in the project. \n\nThe first hook, `useCreateState`, returns the `create` state from the Redux store. This hook can be used to access the current state of the create feature in the project. \n\nThe second hook, `useCreateActionHandlers`, returns an object with three functions that dispatch Redux actions to update the `create` state. The `onCurrencySelection` function takes a `Field` and a `Currency` object and dispatches a `selectCurrency` action with the selected currency and field. The `onSwitchTokens` function dispatches a `switchCurrencies` action to switch the selected collateral and asset tokens. The `onUserInput` function takes a `Field` and a string value and dispatches a `typeInput` action with the typed value and field. These functions can be used to handle user input in the create feature. \n\nThe third hook, `useDerivedCreateInfo`, returns an object with the selected collateral and asset currencies and an input error message. This hook uses other hooks from the project to derive the selected currencies from the `create` state and check for input errors. If there is no account connected, the input error is set to 'Connect Wallet'. If there is no selected collateral or asset currency, the input error is set to 'Select a collateral token' or 'Select an asset token', respectively. This hook can be used to display the selected currencies and input errors in the create feature. \n\nOverall, this module provides hooks that can be used to access and update the `create` state and derive information from it. These hooks can be used in the larger project to implement the create feature and handle user input. \n\nExample usage:\n\n```\nimport { useCreateState, useCreateActionHandlers, useDerivedCreateInfo } from './createHooks'\n\nfunction CreateFeature() {\n const { currencies, inputError } = useDerivedCreateInfo()\n const { onCurrencySelection, onSwitchTokens, onUserInput } = useCreateActionHandlers()\n const { independentField } = useCreateState()\n\n // render the create feature UI with the selected currencies and input error\n // handle user input with the action handlers\n}\n```",
- "questions": "1. What is the purpose of this code file?\n- This code file contains functions related to creating and handling trade orders in the zoo project.\n\n2. What external libraries or dependencies are being used in this code?\n- The code imports various functions and types from external libraries such as '@zoolabs/zdk', '@lingui/macro', and 'react'.\n\n3. What is the purpose of the `useDerivedCreateInfo` function?\n- The `useDerivedCreateInfo` function returns an object containing information about the selected collateral and asset currencies for a trade order, as well as any input errors. It uses various hooks and functions to derive this information from the current state of the application.",
- "checksum": "5ad53ab1ce51c4429a5a7fefea07a46d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/create/reducer.json b/.autodoc/docs/json/core/src/state/create/reducer.json
deleted file mode 100644
index 3d79d1526..000000000
--- a/.autodoc/docs/json/core/src/state/create/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/create/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/create/reducer.ts",
- "summary": "This code defines a Redux reducer for managing the state of a form used to create a new asset. The state is represented by an object of type `CreateState`, which has four properties: `independentField`, `typedValue`, `collateral`, and `asset`. The `independentField` property is an enum value indicating which field in the form is currently being edited independently of the other field. The `typedValue` property is a string representing the user's input in the currently active field. The `collateral` and `asset` properties are objects with a single property `currencyId`, which is a string representing the ID of the currency selected for that field.\n\nThe reducer handles four types of actions: `replaceCreateState`, `selectCurrency`, `switchCurrencies`, and `typeInput`. The `replaceCreateState` action is dispatched when the user submits the form, and its payload contains the values of all four form fields. The reducer updates the state to reflect these values. The `selectCurrency` action is dispatched when the user selects a currency from a dropdown menu in one of the form fields. The reducer updates the state to reflect the new currency selection. If the user selects the same currency for both fields, the reducer swaps the order of the fields. The `switchCurrencies` action is dispatched when the user clicks a button to swap the currencies between the two fields. The reducer updates the state to reflect this change. The `typeInput` action is dispatched when the user types a value into one of the form fields. The reducer updates the state to reflect the new value.\n\nThis reducer is used in conjunction with other reducers and middleware to manage the overall state of the application. For example, the state managed by this reducer might be used to populate a preview of the new asset on the screen, or to enable/disable a \"submit\" button based on whether all required fields have been filled out. Here is an example of how this reducer might be used in a React component:\n\n```jsx\nimport { useDispatch, useSelector } from 'react-redux'\nimport { CreateState, selectCurrency, switchCurrencies, typeInput } from './zoo'\n\nfunction CreateAssetForm() {\n const dispatch = useDispatch()\n const createAssetState = useSelector((state: { createAsset: CreateState }) => state.createAsset)\n\n function handleCurrencySelect(field: Field, currencyId: string) {\n dispatch(selectCurrency({ field, currencyId }))\n }\n\n function handleSwitchCurrencies() {\n dispatch(switchCurrencies())\n }\n\n function handleTypeInput(field: Field, typedValue: string) {\n dispatch(typeInput({ field, typedValue }))\n }\n\n return (\n \n )\n}\n```",
- "questions": "1. What is the purpose of the `CreateState` interface and what fields does it contain?\n- The `CreateState` interface defines the shape of the state object for the `zoo` project's create feature. It contains fields for `independentField`, `typedValue`, `collateral`, and `asset`, each with their own `currencyId` property.\n\n2. What is the purpose of the `createReducer` function and how is it used in this code?\n- The `createReducer` function is used to create a Redux reducer function for the `zoo` project's create feature. It takes an initial state object and a builder function that defines how the state should be updated in response to different actions.\n\n3. What is the purpose of the `switchCurrencies` case in the reducer and what does it do?\n- The `switchCurrencies` case in the reducer is used to handle the action of switching the `collateral` and `asset` currencies in the `zoo` project's create feature. It updates the state object by swapping the `currencyId` properties of the `collateral` and `asset` fields, and also updates the `independentField` property to reflect the new active field.",
- "checksum": "0cde081eb632b8db6d6c77c561eeaffa"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/drop/action.json b/.autodoc/docs/json/core/src/state/drop/action.json
deleted file mode 100644
index 23b1f6f59..000000000
--- a/.autodoc/docs/json/core/src/state/drop/action.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "action.ts",
- "filePath": "core/src/state/drop/action.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/drop/action.ts",
- "summary": "This code is a module that exports a single function called `addDrops`. The function is created using the `createAction` method from the `@reduxjs/toolkit` library. The function takes an array of `Drop` objects as its argument and returns an action object with a type of \"zoo/addDrops\" and a payload of the array of `Drop` objects.\n\nThe purpose of this code is to provide a Redux action creator for adding drops to the zoo. The `Drop` type is likely defined elsewhere in the project and represents some kind of object that can be added to the zoo. The `addDrops` action can be dispatched by a Redux store to update the state of the zoo with the new drops.\n\nHere is an example of how this code might be used in a larger project:\n\n```typescript\nimport { useDispatch } from \"react-redux\";\nimport { addDrops } from \"zoo\";\n\nfunction AddDropsButton({ drops }: { drops: Drop[] }) {\n const dispatch = useDispatch();\n\n function handleClick() {\n dispatch(addDrops(drops));\n }\n\n return ;\n}\n```\n\nIn this example, a React component called `AddDropsButton` is defined. The component takes an array of `Drop` objects as a prop and renders a button. When the button is clicked, the `addDrops` action is dispatched with the array of drops as its payload. The Redux store will then update the state of the zoo with the new drops.",
- "questions": "1. What is the purpose of the `createAction` function from \"@reduxjs/toolkit\" being imported?\n- The `createAction` function is used to create an action creator function that returns an action object with a specific type and payload.\n\n2. What is the significance of the \"zoo/addDrops\" string being passed as an argument to the `createAction` function?\n- The \"zoo/addDrops\" string is used as the type of the action object that is returned by the action creator function. It identifies the specific action being dispatched.\n\n3. What is the `Drop` type being imported from \"types\" and how is it used in this code?\n- The `Drop` type is being imported from a module named \"types\". It is used as the generic type argument for the `createAction` function, specifying the type of the payload that the action creator function will accept.",
- "checksum": "2efdd555fc48432c848109892d339fa6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/drop/hooks.json b/.autodoc/docs/json/core/src/state/drop/hooks.json
deleted file mode 100644
index 29c1cd917..000000000
--- a/.autodoc/docs/json/core/src/state/drop/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.tsx",
- "filePath": "core/src/state/drop/hooks.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/state/drop/hooks.tsx",
- "summary": "The code is a module that exports two functions: `getMetaData` and `useGetDrops`. \n\nThe `getMetaData` function is an asynchronous function that takes a metadataURI and an optional `from` parameter. It uses the `axios` library to make a GET request to the specified URI and returns the response data. If there is an error, it logs the error message along with the `from` and `metadataURI` parameters to the console.\n\nThe `useGetDrops` function is a React hook that returns a memoized callback function. It uses several other hooks and functions from the `hooks`, `functions`, and `state` modules. When the callback function is called, it retrieves information about all the drops from the `zooKeeper` contract and maps over them to retrieve information about each egg in the drop. It then uses the `getMetaData` function to retrieve metadata for each egg and creates an `AvailableEgg` object for each egg. Finally, it creates a `Drop` object for each drop and dispatches an `addDrops` action to the Redux store with an array of `Drop` objects. \n\nThis function is used to retrieve information about all the drops and eggs in the Zoo project and store it in the Redux store. This information can then be used by other components in the project to display information about drops and eggs to the user. \n\nExample usage:\n\n```\nimport { useGetDrops } from 'path/to/zoo';\n\nfunction MyComponent() {\n const getDrops = useGetDrops();\n\n useEffect(() => {\n getDrops();\n }, [getDrops]);\n\n // rest of component code\n}\n```",
- "questions": "1. What is the purpose of the `useGetDrops` function?\n- The `useGetDrops` function is used to retrieve information about drops and their associated eggs from the blockchain and IPFS, and then dispatches the information to the Redux store.\n\n2. What is the purpose of the `getMetaData` function?\n- The `getMetaData` function is used to retrieve metadata associated with an egg from IPFS, given its metadata URI.\n\n3. What is the purpose of the `convertIpfsUrl` function?\n- The `convertIpfsUrl` function is used to convert an IPFS URI to a URL that can be used to retrieve data from IPFS.",
- "checksum": "b6c86b78aa062bff281585881ffa071a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/drop/reducer.json b/.autodoc/docs/json/core/src/state/drop/reducer.json
deleted file mode 100644
index 968a0c8f7..000000000
--- a/.autodoc/docs/json/core/src/state/drop/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/drop/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/drop/reducer.ts",
- "summary": "This code is a Redux reducer function that handles the state updates for the \"drops\" feature in the larger zoo project. The \"drops\" feature likely refers to the eggs or other items that animals in the zoo may produce or drop. \n\nThe code imports the \"addDrops\" action from another file, which is likely dispatched when a new drop is added to the zoo. It also imports the \"createReducer\" function from the \"@reduxjs/toolkit\" library, which simplifies the process of creating Redux reducers.\n\nThe reducer function initializes the state with an empty array for the \"drops\" property. When the \"addDrops\" action is dispatched, the reducer updates the state by setting the \"drops\" property to the payload of the action. The payload is likely an array of new drops that were added to the zoo.\n\nHere is an example of how this reducer function may be used in the larger zoo project:\n\n```javascript\nimport { createStore } from \"redux\";\nimport dropsReducer from \"./reducers/drops\";\n\nconst store = createStore(dropsReducer);\n\n// Dispatch an action to add new drops to the zoo\nstore.dispatch({\n type: \"addDrops\",\n payload: [\n { type: Drop.CHICKEN_EGG, animal: \"chicken\" },\n { type: Drop.COW_MILK, animal: \"cow\" },\n ],\n});\n\n// Get the current state of the drops feature\nconst dropsState = store.getState().drops;\nconsole.log(dropsState); // [{ type: \"chicken_egg\", animal: \"chicken\" }, { type: \"cow_milk\", animal: \"cow\" }]\n```\n\nIn this example, the \"createStore\" function from the Redux library is used to create a store with the \"dropsReducer\" function as the root reducer. An action is then dispatched to add two new drops to the zoo, and the current state of the drops feature is logged to the console.",
- "questions": "1. What is the purpose of the `addDrops` function imported from \"./action\"?\n - The `addDrops` function is likely an action creator that creates an action object with a payload of drops to be added to the state.\n\n2. What is the `AvailableEgg` type imported from \"types\"?\n - The `AvailableEgg` type is likely a custom type defined in a separate file that specifies the shape of an object representing an available egg.\n\n3. What does the `createReducer` function from \"@reduxjs/toolkit\" do?\n - The `createReducer` function is a utility function provided by the Redux Toolkit that simplifies the process of creating a Redux reducer by allowing the developer to define reducer logic using a \"builder\" syntax.",
- "checksum": "420f9b70e1ec97a58dccd48bb053fb51"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/global/actions.json b/.autodoc/docs/json/core/src/state/global/actions.json
deleted file mode 100644
index ad1fa8696..000000000
--- a/.autodoc/docs/json/core/src/state/global/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/global/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/global/actions.ts",
- "summary": "The code above is a TypeScript module that imports a function called `createAction` from the `@reduxjs/toolkit` library. It also exports a function called `updateVersion` that takes no arguments and returns `void`. \n\nThe purpose of this code is to create an action that can be dispatched to update the version of the application. This action is fired once when the app reloads but before the app renders. It allows any updates to be applied to store data loaded from localStorage. \n\nIn the context of the larger project, this code is likely used in conjunction with a Redux store to manage the state of the application. When the app is reloaded, the `updateVersion` action is dispatched to update the version of the application and apply any necessary updates to the store data. \n\nHere is an example of how this code might be used in a Redux store:\n\n```typescript\nimport { configureStore } from '@reduxjs/toolkit'\nimport { updateVersion } from './path/to/updateVersion'\n\nconst store = configureStore({\n reducer: {\n // reducers go here\n },\n preloadedState: {\n // initial state goes here\n },\n})\n\nstore.dispatch(updateVersion())\n```\n\nIn this example, the `updateVersion` action is dispatched when the store is created to ensure that any necessary updates are applied to the store data. \n\nOverall, this code plays an important role in managing the state of the application and ensuring that the store data is up-to-date.",
- "questions": "1. What is the purpose of the `createAction` function from `@reduxjs/toolkit` being imported?\n- The `createAction` function is used to create an action creator function that returns an action object with a type and payload.\n\n2. When is the `updateVersion` action creator function fired?\n- The `updateVersion` action creator function is fired once when the app reloads but before the app renders. It allows any updates to be applied to store data loaded from localStorage.\n\n3. What is the payload type of the `updateVersion` action creator function?\n- The `updateVersion` action creator function does not have a payload type as it is defined with `void`. This means that it does not expect any payload to be passed when the action is dispatched.",
- "checksum": "9cfd83b0e2fe5d277f4d9d6266271b8d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/hooks.json b/.autodoc/docs/json/core/src/state/hooks.json
deleted file mode 100644
index 1bd94ee31..000000000
--- a/.autodoc/docs/json/core/src/state/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/state/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/hooks.ts",
- "summary": "This code is a module that exports two hooks, `useAppDispatch` and `useAppSelector`, which are used to interact with the Redux store in the larger project. \n\nThe `useAppDispatch` hook returns a reference to the `dispatch` function provided by the Redux store. This function is used to dispatch actions to the store, which in turn trigger updates to the application state. The `AppDispatch` type is a generic type that is defined in another file, and it specifies the type of the `dispatch` function. \n\nHere is an example of how `useAppDispatch` can be used in a component:\n\n```\nimport { useAppDispatch } from 'path/to/zoo'\n\nconst MyComponent = () => {\n const dispatch = useAppDispatch()\n\n const handleClick = () => {\n dispatch({ type: 'INCREMENT' })\n }\n\n return (\n \n )\n}\n```\n\nIn this example, `useAppDispatch` is used to get a reference to the `dispatch` function, which is then used to dispatch an action when the button is clicked. \n\nThe `useAppSelector` hook returns a function that can be used to select data from the Redux store. The `AppState` type is a generic type that is defined in another file, and it specifies the type of the application state. \n\nHere is an example of how `useAppSelector` can be used in a component:\n\n```\nimport { useAppSelector } from 'path/to/zoo'\n\nconst MyComponent = () => {\n const count = useAppSelector(state => state.count)\n\n return (\n \n Count: {count}\n
\n )\n}\n```\n\nIn this example, `useAppSelector` is used to select the `count` property from the application state, which is then rendered in the component. \n\nOverall, this module provides two hooks that simplify the process of interacting with the Redux store in the larger project.",
- "questions": "1. What is the purpose of the `AppDispatch` and `AppState` imports?\n - `AppDispatch` and `AppState` are likely types/interfaces defined in another file that are used to provide type safety for the `useAppDispatch` and `useAppSelector` hooks.\n\n2. What is the difference between `useAppDispatch` and `useAppSelector`?\n - `useAppDispatch` returns a function that can be used to dispatch actions to the Redux store, while `useAppSelector` returns a selector function that can be used to retrieve data from the store.\n\n3. Why is `TypedUseSelectorHook` used instead of `useSelector` directly?\n - `TypedUseSelectorHook` is used to provide type safety for the `useAppSelector` hook by specifying the type of the Redux store state that it should be used with. This helps prevent errors caused by using the wrong type of state.",
- "checksum": "868599b19058ef6078eb9585b61e6cea"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/actions.json b/.autodoc/docs/json/core/src/state/inari/actions.json
deleted file mode 100644
index d36817532..000000000
--- a/.autodoc/docs/json/core/src/state/inari/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/inari/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/actions.ts",
- "summary": "This code is a module that exports three Redux actions: `setStrategy`, `setZapIn`, and `setValues`. These actions are used to update the state of the `inari` slice of the Redux store in the larger project. \n\nThe `setStrategy` action takes a `Strategy` object as its payload and updates the `strategy` property of the `inari` slice in the Redux store. The `Strategy` type is likely defined in the `types` module that is imported at the top of this file. An example usage of this action could be:\n\n```\nimport { setStrategy } from 'zoo'\n\nconst myStrategy = { name: 'aggressive', riskLevel: 'high' }\ndispatch(setStrategy(myStrategy))\n```\n\nThe `setZapIn` action takes a boolean value as its payload and updates the `zapIn` property of the `inari` slice in the Redux store. This property likely controls whether or not a certain feature is enabled in the larger project. An example usage of this action could be:\n\n```\nimport { setZapIn } from 'zoo'\n\ndispatch(setZapIn(true))\n```\n\nThe `setValues` action takes an object with two string properties (`inputValue` and `outputValue`) as its payload and updates the `inputValue` and `outputValue` properties of the `inari` slice in the Redux store. This action is likely used to update the values of certain inputs and outputs in the larger project. An example usage of this action could be:\n\n```\nimport { setValues } from 'zoo'\n\nconst newValues = { inputValue: 'hello', outputValue: 'world' }\ndispatch(setValues(newValues))\n```\n\nOverall, this module provides a simple interface for updating the state of the `inari` slice in the Redux store, which is likely used to control various features and inputs/outputs in the larger project.",
- "questions": "1. What is the purpose of the `createAction` function from `@reduxjs/toolkit`?\n- `createAction` is a function from the `@reduxjs/toolkit` library that creates an action creator function for Redux. It takes a type parameter that defines the type of the action payload.\n\n2. What is the `Strategy` type from the `types` module used for?\n- The `Strategy` type is used as the payload type for the `setStrategy` action creator. It likely represents some kind of strategy object or configuration.\n\n3. What is the purpose of the `setZapIn` and `setValues` action creators?\n- `setZapIn` and `setValues` are action creators that likely update some state related to input values or settings in the `inari` slice of the Redux store. The former takes a boolean payload, while the latter takes an object with two string properties.",
- "checksum": "4bcc5deb5df41f7189dae2760dcd5486"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/hooks.json b/.autodoc/docs/json/core/src/state/inari/hooks.json
deleted file mode 100644
index da2c804c3..000000000
--- a/.autodoc/docs/json/core/src/state/inari/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.tsx",
- "filePath": "core/src/state/inari/hooks.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/hooks.tsx",
- "summary": "The code is a collection of React hooks that are used to manage the state of the Inari DEX (decentralized exchange) in the larger Zoo project. The Inari DEX is a platform that allows users to swap tokens on different blockchains. \n\nThe `useInariState` hook is used to retrieve the current state of the Inari DEX from the Redux store. The `useDerivedInariState` hook is used to derive a new state object from the `useInariState` hook. This is necessary because the `Token` class used in the `tokens` property of the state object is not serializable and cannot be stored in the Redux store. The `useSelectedInariStrategy` hook is used to retrieve the currently selected strategy from the Inari state object. Finally, the `useInariStrategies` hook is used to register all the available strategies for the Inari DEX.\n\nThe `useDerivedInariState` hook uses the `useMemo` hook to create two new `Token` objects from the `inputToken` and `outputToken` properties of the `tokens` object in the Inari state. These `Token` objects are then used to parse the `inputValue` and `outputValue` properties of the Inari state object using the `tryParseAmount` function from the `functions` module. The resulting derived state object is returned by the hook.\n\nThe `useInariStrategies` hook is used to register all the available strategies for the Inari DEX. It uses the `useStakeSushiToBentoStrategy`, `useStakeSushiToCreamStrategy`, and `useStakeSushiToAaveStrategy` hooks to create instances of the different strategies. These instances are then stored in an object and returned by the hook.\n\nOverall, these hooks are used to manage the state of the Inari DEX in the Zoo project. They allow developers to easily retrieve and derive state information, as well as register and retrieve available strategies. Here is an example of how the `useInariState` hook can be used in a component:\n\n```\nimport { useInariState } from './path/to/inari/hooks';\n\nfunction MyComponent() {\n const inariState = useInariState();\n\n // Use inariState to render component\n}\n```",
- "questions": "1. What is the purpose of the `useDerivedInariState` hook?\n- The `useDerivedInariState` hook is used to derive complex state values from the `useInariState` hook, which is a Redux selector. It creates new instances of `Token` objects based on the input and output tokens, and parses the input and output values using the `tryParseAmount` function.\n\n2. Why are the strategy hooks not used in the `useDerivedInariState` hook?\n- The strategy hooks are not used in the `useDerivedInariState` hook to avoid an infinite loop. Since the `useDerivedInariState` hook is called every time the state changes, using the strategy hooks could cause an infinite loop of state updates.\n\n3. What is the purpose of the `useInariStrategies` hook?\n- The `useInariStrategies` hook is used to register all available strategies for the Inari state. It creates an object with each strategy as a property, using the strategy ID as the key.",
- "checksum": "0ec3cae4b20f774f9251542ef5ccd665"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/reducer.json b/.autodoc/docs/json/core/src/state/inari/reducer.json
deleted file mode 100644
index bde56dee6..000000000
--- a/.autodoc/docs/json/core/src/state/inari/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/inari/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/reducer.ts",
- "summary": "This code defines a Redux reducer for the InariState slice of the store in the larger project. The InariState represents the state of the Inari DEX, which allows users to swap tokens between different protocols. The reducer handles three actions: setStrategy, setZapIn, and setValues.\n\nThe setStrategy action updates the state with a new strategy object, which contains information about the tokens being swapped and the exchange rate. The reducer updates the state by merging the new strategy object with the existing state, and then updating the general and tokens properties to reflect the new strategy. If the zapIn property is true, the input token and symbol are set to the strategy's input token and symbol, and the output token and symbol are set to the strategy's output token and symbol. Otherwise, the input and output tokens and symbols are swapped. Finally, the inputValue and outputValue properties are reset to empty strings.\n\nThe setZapIn action toggles the zapIn property of the state, which determines whether the user is swapping tokens in or out of the Inari DEX. The reducer updates the state by swapping the input and output symbols and tokens in the general and tokens properties, and swapping the inputValue and outputValue properties.\n\nThe setValues action updates the inputValue and outputValue properties of the state with the user's input and output amounts.\n\nOverall, this reducer is a critical part of the Inari DEX functionality, as it handles the state changes required for swapping tokens between different protocols. It can be used in conjunction with other reducers and actions to build a complete trading interface for the Inari DEX. Here is an example of how this reducer might be used in a React component:\n\n```\nimport { useDispatch, useSelector } from 'react-redux';\nimport { setStrategy, setZapIn, setValues } from './actions';\nimport { InariState } from './types';\n\nfunction InariSwap() {\n const dispatch = useDispatch();\n const inariState = useSelector((state: { inari: InariState }) => state.inari);\n\n const handleStrategyChange = (strategy: any) => {\n dispatch(setStrategy(strategy));\n };\n\n const handleZapInToggle = () => {\n dispatch(setZapIn(!inariState.zapIn));\n };\n\n const handleValuesChange = (inputValue: string, outputValue: string) => {\n dispatch(setValues({ inputValue, outputValue }));\n };\n\n return (\n \n \n handleValuesChange(e.target.value, inariState.outputValue)} />\n handleValuesChange(inariState.inputValue, e.target.value)} />\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code defines the initial state and reducers for the InariState slice of the Redux store for the zoo project. It handles setting the strategy, zap in, and input/output values for the stakeSushiToBentoStrategy.\n\n2. What are the dependencies of this code?\n- This code imports functions and types from other files in the `zoo` project, including `actions.ts`, `types.ts`, and `useStakeSushiToBentoStrategy.ts`. It also imports `createReducer` from the `@reduxjs/toolkit` library.\n\n3. What is the expected shape of the `InariState` object?\n- The `InariState` object is expected to have an `id` string, a `zapIn` boolean, `inputValue` and `outputValue` strings, a `general` object with `inputSymbol` and `outputSymbol` strings, and a `tokens` object with `inputToken` and `outputToken` objects. The `tokens` object is defined by the `tokenDefinitions` array imported from `useStakeSushiToBentoStrategy.ts`.",
- "checksum": "1ef885e4d859e3cb0585c3f562c5d761"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/strategies/useBaseStrategy.json b/.autodoc/docs/json/core/src/state/inari/strategies/useBaseStrategy.json
deleted file mode 100644
index 29b9d9829..000000000
--- a/.autodoc/docs/json/core/src/state/inari/strategies/useBaseStrategy.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useBaseStrategy.ts",
- "filePath": "core/src/state/inari/strategies/useBaseStrategy.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/strategies/useBaseStrategy.ts",
- "summary": "The `useBaseStrategy` function is a React hook that provides a base implementation for a strategy used in the Inari DEX. The function takes an object with three properties: `id`, `general`, and `tokenDefinitions`. The `id` is a string that identifies the strategy, `general` is an object that contains general information about the strategy, and `tokenDefinitions` is an object that defines the input and output tokens for the strategy.\n\nThe hook returns an object that implements the `BaseStrategyHook` interface. This interface extends the `Strategy` interface and adds several properties and methods that are specific to the base strategy. The `execute` method is a function that executes the strategy with a given input value. The `approveCallback` property is an array that contains the approval state, a function to approve the transaction, and the input value. The `getStrategy` method returns an object that contains the `id`, `general`, and `tokenDefinitions` properties. The `calculateOutputFromInput` method is a function that calculates the output value based on the input value. The `balances` property is an object that contains the input and output token balances. The `setBalances` method is a function that sets the input and output token balances.\n\nThe `useBaseStrategy` hook uses several other hooks and functions to implement the base strategy. The `useActiveWeb3React` hook provides the current web3 context. The `useDerivedInariState` hook provides the input value, whether the strategy is zapping in or out, and the input and output tokens. The `useInariContract` hook provides the Inari contract instance. The `useTransactionAdder` hook provides a function to add a transaction to the transaction list. The `useApproveCallback` hook provides a function to approve the transaction. The `useSushiPerXSushi` hook provides the exchange rate between Sushi and xSushi. The `e10` function converts a number to its exponential form. The `tryParseAmount` function parses a string to a `CurrencyAmount` object. The `BentoPermit` type is an object that contains the permit data for the BentoBox contract.\n\nThe `useBaseStrategy` hook is used as a base implementation for other strategies in the Inari DEX. The other strategies can override the `execute` and `calculateOutputFromInput` methods to implement their own logic. The `balances` property can be used to load the input and output token balances asynchronously. The `setBalances` method can be used to set the input and output token balances. The `approveCallback` property can be used to approve the transaction before executing the strategy. The `getStrategy` method can be used to get the strategy information.",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code defines a hook called `useBaseStrategy` which provides a set of functions and state variables for creating a strategy for swapping tokens on the Inari DEX. It solves the problem of having to write repetitive code for each strategy by providing a base implementation that can be extended.\n\n2. What external dependencies does this code have?\n- This code depends on several external packages and modules, including `@zoolabs/zdk`, `react`, `useCallback`, `useMemo`, `useState`, and several custom hooks defined in the `../../../hooks` directory.\n\n3. What are some examples of how this code might be used in a larger project?\n- This code might be used in a larger project that involves swapping tokens on the Inari DEX. Developers could use this hook as a starting point for creating custom strategies that implement different token swapping algorithms. They could also use this hook to create a UI for interacting with the Inari DEX, displaying balances, and executing trades.",
- "checksum": "f968cedb5e234b6132b4059f508b79e1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToAaveStrategy.json b/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToAaveStrategy.json
deleted file mode 100644
index f4b0f752d..000000000
--- a/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToAaveStrategy.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useStakeSushiToAaveStrategy.ts",
- "filePath": "core/src/state/inari/strategies/useStakeSushiToAaveStrategy.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/strategies/useStakeSushiToAaveStrategy.ts",
- "summary": "The code is a React hook that provides a strategy for staking SUSHI tokens to Aave. The hook is called `useStakeSushiToAaveStrategy` and it returns a `StrategyHook` object. The `StrategyHook` object contains a set of functions and data that can be used to interact with the strategy.\n\nThe `useStakeSushiToAaveStrategy` hook uses other hooks and functions to implement the strategy. It uses the `useBaseStrategy` hook to get the base strategy object, which contains the common functions and data for all strategies. It also uses the `useTokenBalances` hook to get the SUSHI and AXSUSHI token balances for the current user's account.\n\nThe `GENERAL` function returns an object that contains general information about the strategy, such as the name, steps, zap method, and description. The `tokenDefinitions` object contains the input and output token definitions for the strategy.\n\nThe `useEffect` hook is used to update the token balances when they change. The `setBalances` function is used to set the input and output token balances for the strategy.\n\nThe `useMemo` hook is used to memoize the `GENERAL` function and the `StrategyHook` object. This improves performance by avoiding unnecessary re-renders.\n\nOverall, this code provides a reusable strategy for staking SUSHI tokens to Aave. It can be used in other parts of the project to provide a seamless user experience for staking SUSHI tokens. For example, it could be used in a staking pool UI to allow users to stake their SUSHI tokens with a single click.",
- "questions": "1. What is the purpose of this code?\n - This code defines a strategy for staking SUSHI tokens and depositing them into Aave in one click, using xSUSHI in Aave (aXSUSHI) as collateral for borrowing or lending.\n2. What are the dependencies of this code?\n - This code depends on several external packages and modules, including `@zoolabs/zdk`, `@lingui/core`, `@lingui/macro`, `@lingui/react`, `react`, and various custom hooks and types defined in other files within the `zoo` project.\n3. What is the expected output of this code?\n - The expected output of this code is a custom React hook called `useStakeSushiToAaveStrategy`, which returns an object containing various properties and methods related to the SUSHI → Aave staking strategy, including the `setBalances` method and the `general` and `tokenDefinitions` objects.",
- "checksum": "76220234e0e34bb8f5ac2bec70815615"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToBentoStrategy.json b/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToBentoStrategy.json
deleted file mode 100644
index cf5f77e83..000000000
--- a/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToBentoStrategy.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useStakeSushiToBentoStrategy.ts",
- "filePath": "core/src/state/inari/strategies/useStakeSushiToBentoStrategy.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/strategies/useStakeSushiToBentoStrategy.ts",
- "summary": "The code is a React hook that defines a strategy for staking SUSHI tokens and depositing them into BentoBox, a smart contract-based lending platform. The strategy is designed to be used in a larger project called zoo, which is not described in this code.\n\nThe code imports several modules from different packages, including `@zoolabs/zdk`, `@lingui/core`, and `@lingui/react`. It also imports several functions and hooks from other files in the project, such as `useBaseStrategy` and `useBentoBoxTrait`.\n\nThe code defines two constants: `GENERAL` and `tokenDefinitions`. `GENERAL` is an object that contains general information about the strategy, such as its name, steps, and description. `tokenDefinitions` is an object that defines the input and output tokens for the strategy, including their chain ID, address, decimals, and symbol.\n\nThe code defines a React hook called `useStakeSushiToBentoStrategy`. This hook uses several other hooks, such as `useLingui`, `useActiveWeb3React`, `useTokenBalances`, and `useBentoBalance`, to retrieve information about the user's account, token balances, and BentoBox balances. It also uses the `useBaseStrategy` and `useBentoBoxTrait` hooks to define the base strategy and add the BentoBox trait to it.\n\nThe `useStakeSushiToBentoStrategy` hook returns an object that contains the `setBalances` function and the `strategy` object. The `setBalances` function is used to set the input and output token balances for the strategy, based on the user's token balances and BentoBox balances. The `strategy` object contains several functions that are used to execute the strategy, such as `approveInputToken`, `deposit`, and `withdraw`.\n\nOverall, this code defines a strategy for staking SUSHI tokens and depositing them into BentoBox, using a combination of React hooks and smart contracts. The strategy is designed to be used in a larger project called zoo, which is not described in this code.",
- "questions": "1. What is the purpose of this code?\n - This code defines a strategy for staking SUSHI tokens and depositing them into BentoBox, a yield aggregator. It also includes definitions for the input and output tokens and a hook for implementing the strategy.\n\n2. What dependencies does this code have?\n - This code imports various modules from '@zoolabs/zdk', '../../../config/tokens', 'react', '@lingui/core', and '../../../functions', as well as several custom hooks from '../../../hooks', '../../bentobox/hooks', and '../../wallet/hooks'.\n\n3. What is the role of the useStakeSushiToBentoStrategy hook?\n - The useStakeSushiToBentoStrategy hook is responsible for implementing the SUSHI to BentoBox staking strategy. It uses the useBaseStrategy hook to define the strategy and the useBentoBoxTrait hook to add in BentoBox-specific functionality. It also retrieves token balances using the useTokenBalances and useBentoBalance hooks and sets them using the setBalances function.",
- "checksum": "ad4a3ad77495278a313215a90a156b39"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToCreamStrategy.json b/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToCreamStrategy.json
deleted file mode 100644
index dccd2ea5c..000000000
--- a/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToCreamStrategy.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useStakeSushiToCreamStrategy.ts",
- "filePath": "core/src/state/inari/strategies/useStakeSushiToCreamStrategy.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/strategies/useStakeSushiToCreamStrategy.ts",
- "summary": "This code defines a custom hook called `useStakeSushiToCreamStrategy` that returns an object with properties and methods used to execute a specific strategy for swapping SUSHI for xSUSHI and depositing it into Cream. The hook is used in a larger project called `zoo`.\n\nThe hook imports several dependencies, including tokens from a configuration file, types, and hooks from the `zoo` project, and functions from external libraries. It also defines two constants: `GENERAL` and `tokenDefinitions`. `GENERAL` is an object that contains general information about the strategy, such as its name, steps, and description. `tokenDefinitions` is an object that defines the input and output tokens for the strategy, including their chain ID, address, decimals, and symbol.\n\nThe `useStakeSushiToCreamStrategy` hook uses several hooks from the `zoo` project, including `useActiveWeb3React`, `useDerivedInariState`, `useZenkoContract`, `useInariContract`, `useTokenBalances`, and `useBaseStrategy`. It also defines several variables and functions, including `approveAmount`, `cTokenAmountRef`, `approveCallback`, `general`, `toCTokenAmount`, `preExecute`, and `execute`.\n\nThe `useStakeSushiToCreamStrategy` hook is used to execute a specific strategy for swapping SUSHI for xSUSHI and depositing it into Cream. The strategy involves staking SUSHI for xSUSHI and depositing it into Cream in one click. xSUSHI in Cream (crXSUSHI) can be lent or used as collateral for borrowing. The strategy is executed by calling the `execute` method of the returned object from the hook.\n\nThe `useStakeSushiToCreamStrategy` hook can be used in the larger `zoo` project to provide a way for users to swap SUSHI for xSUSHI and deposit it into Cream. The hook can be used in conjunction with other hooks and components to create a user interface for executing the strategy. For example, the `useDerivedInariState` hook can be used to get the input value and whether the user is zapping in or out, and the `useTokenBalances` hook can be used to get the user's token balances. The `useStakeSushiToCreamStrategy` hook can then be used to execute the strategy and update the user's token balances.",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n- This code defines a strategy for staking SUSHI for xSUSHI and depositing it into Cream in one click, allowing xSUSHI to be lent or used as collateral for borrowing.\n\n2. What external dependencies does this code have?\n- This code imports various tokens and libraries from external packages, including `@zoolabs/zdk`, `@lingui/core`, `@lingui/macro`, and `react`.\n\n3. What are some of the key functions and hooks used in this code?\n- This code uses several custom hooks, including `useActiveWeb3React`, `useApproveCallback`, `useInariContract`, `useZenkoContract`, `useDerivedInariState`, `useBaseStrategy`, and `useTokenBalances`. It also defines a `preExecute` function for transforming xSUSHI to crXSUSHI and a `toCTokenAmount` function for converting between token amounts.",
- "checksum": "db5fe1748a854622f74d046b81d14b38"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToCreamToBentoStrategy.json b/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToCreamToBentoStrategy.json
deleted file mode 100644
index 8d91639e6..000000000
--- a/.autodoc/docs/json/core/src/state/inari/strategies/useStakeSushiToCreamToBentoStrategy.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useStakeSushiToCreamToBentoStrategy.ts",
- "filePath": "core/src/state/inari/strategies/useStakeSushiToCreamToBentoStrategy.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/strategies/useStakeSushiToCreamToBentoStrategy.ts",
- "summary": "This code defines a custom hook called `useStakeSushiToCreamToBentoStrategy` that returns a `StrategyHook` object. This hook is used to stake SUSHI tokens for xSUSHI into Cream and deposit crXSUSHI into BentoBox in one click. \n\nThe `StrategyHook` object returned by this hook includes a `setBalances` function and a `calculateOutputFromInput` function. The `setBalances` function sets the input and output token balances for the strategy. The `calculateOutputFromInput` function calculates the output token amount based on the input token amount and the current exchange rate.\n\nThe `GENERAL` function returns an object that contains general information about the strategy, such as the name, steps, zap method, and description. The `tokenDefinitions` object defines the input and output tokens for the strategy.\n\nThe hook uses several other hooks and functions to implement the strategy. The `useActiveWeb3React` hook is used to get the current account. The `useZenkoContract` hook is used to get the Zenko contract instance. The `useTokenBalances` hook is used to get the SUSHI token balance for the current account. The `useSushiPerXSushi` hook is used to get the current exchange rate between SUSHI and xSUSHI. The `useBentoBalance` hook is used to get the crXSUSHI balance in BentoBox for the current account. The `useBaseStrategy` hook is used to get the base strategy object. The `useBentoBoxTrait` hook is used to add the BentoBox trait to the strategy.\n\nThe `calculateOutputFromInput` function uses the exchange rate and the Zenko contract to calculate the output token amount based on the input token amount. If `zapIn` is true, it calculates the crXSUSHI amount based on the SUSHI amount. If `zapIn` is false, it calculates the SUSHI amount based on the crXSUSHI amount.\n\nOverall, this code defines a custom hook that implements a specific strategy for staking SUSHI tokens for xSUSHI into Cream and depositing crXSUSHI into BentoBox in one click. This hook can be used in the larger project to provide a convenient way for users to execute this strategy.",
- "questions": "1. What is the purpose of this code?\n- This code defines a strategy for staking SUSHI for xSUSHI into Cream and depositing crXSUSHI into BentoBox in one click.\n\n2. What tokens are involved in this strategy?\n- The input token is SUSHI and the output token is crXSUSHI.\n\n3. What hooks and functions are being used in this code?\n- The code is using several hooks including `useActiveWeb3React`, `useZenkoContract`, `useCallback`, `useEffect`, `useMemo`, `useLingui`, `useSushiPerXSushi`, `useTokenBalances`, and `useBentoBalance`. It is also using several functions including `e10` and `tryParseAmount`.",
- "checksum": "b83929f2c30e3fa37c6c1b059876c1bc"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/inari/traits/useBentoBoxTrait.json b/.autodoc/docs/json/core/src/state/inari/traits/useBentoBoxTrait.json
deleted file mode 100644
index d31e53a52..000000000
--- a/.autodoc/docs/json/core/src/state/inari/traits/useBentoBoxTrait.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useBentoBoxTrait.ts",
- "filePath": "core/src/state/inari/traits/useBentoBoxTrait.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/inari/traits/useBentoBoxTrait.ts",
- "summary": "The code defines a hook called `useBentoBoxTrait` that is used to add a trait to strategies that have BentoBox as their output. The trait is used to handle approvals for spending tokens when unzapping. The hook returns an object that includes the trait and overrides some of the properties of the `BaseStrategyHook` object.\n\nThe hook imports several other hooks and interfaces from different files in the project. It also imports `CurrencyAmount` and `Token` from the `@zoolabs/zdk` library.\n\nThe `useBentoBoxTrait` hook takes a `BaseStrategyHook` object as an argument and returns a `BaseStrategyWithBentoBoxTraitHook` object. The returned object includes the `BaseTrait` object and overrides the `approveCallback` and `bentoApproveCallback` properties of the `BaseStrategyHook` object.\n\nThe `batchExecute` function is defined inside the hook and is used to batch execute transactions with permit if one is provided or else execute normally. The function takes a `CurrencyAmount{user.name}
\n}\n```",
- "questions": "1. What is the purpose of the `persistConfig` object?\n \n The `persistConfig` object is used to configure the `redux-persist` library, which allows for persisting the Redux store to local storage. It specifies the key to use for the persisted data, which keys to whitelist, and the storage engine to use.\n\n2. What is the purpose of the `makeStore` function?\n \n The `makeStore` function creates a new Redux store using the `configureStore` function from the `@reduxjs/toolkit` library. It uses the persisted reducer created by `persistReducer` and applies middleware to the store.\n\n3. What is the purpose of the `getOrCreateStore` function?\n \n The `getOrCreateStore` function returns the existing Redux store if it exists, or creates a new one if it doesn't. It also merges any preloaded state with the current state in the store, and resets the store if necessary. This function is used to ensure that there is only one Redux store instance in the client.",
- "checksum": "eca692210b27581d3f39d20f16ced264"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/limit-order/actions.json b/.autodoc/docs/json/core/src/state/limit-order/actions.json
deleted file mode 100644
index d90ee48ac..000000000
--- a/.autodoc/docs/json/core/src/state/limit-order/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/limit-order/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/limit-order/actions.ts",
- "summary": "This file contains a set of Redux actions that are used in the larger project called \"zoo\". Redux is a state management library that is commonly used in React applications. The purpose of this file is to define a set of actions that can be dispatched to update the state of the application.\n\nThe first thing that is imported is the `createAction` function from the `@reduxjs/toolkit` package. This function is used to create a new Redux action. An action is a plain JavaScript object that describes a change that should be made to the state of the application. Actions are dispatched to the Redux store, which then updates the state of the application accordingly.\n\nThe file then defines a set of actions using the `createAction` function. Each action has a unique name and a payload that can be used to update the state of the application. For example, the `setLimitPrice` action takes a string or null value as its payload and updates the limit price of a limit order. The `replaceLimitOrderState` action takes a complex object as its payload and updates multiple fields of a limit order.\n\nIn addition to the actions, the file also defines an enum called `Field`. This enum is used to specify which field of a limit order is being updated. The `Field` enum has two possible values: `INPUT` and `OUTPUT`.\n\nThese actions can be used in the larger project to update the state of the application in response to user interactions. For example, when a user types in a new limit price for a limit order, the `setLimitPrice` action can be dispatched with the new value as its payload. This will update the state of the application and cause the UI to re-render with the new limit price displayed.\n\nHere is an example of how the `setLimitPrice` action can be used in a React component:\n\n```\nimport { useDispatch } from 'react-redux';\nimport { setLimitPrice } from './path/to/limit-order-actions';\n\nfunction LimitOrderForm() {\n const dispatch = useDispatch();\n\n function handleLimitPriceChange(event) {\n const newLimitPrice = event.target.value;\n dispatch(setLimitPrice(newLimitPrice));\n }\n\n return (\n \n );\n}\n```\n\nIn this example, the `setLimitPrice` action is imported from the `limit-order-actions` module and used to update the limit price of a limit order when the user types in a new value in the input field. The `useDispatch` hook is used to get a reference to the Redux store's `dispatch` function, which is then used to dispatch the `setLimitPrice` action with the new value as its payload.",
- "questions": "1. What is the purpose of the `createAction` function being imported from `@reduxjs/toolkit`?\n - The `createAction` function is used to create Redux actions with a specified type and payload.\n2. What is the `Field` enum used for?\n - The `Field` enum defines two constants, `INPUT` and `OUTPUT`, which are used to specify the input and output fields in the `replaceLimitOrderState` action.\n3. What is the purpose of the `replaceLimitOrderState` action and what payload does it accept?\n - The `replaceLimitOrderState` action is used to replace the entire state of the limit order feature with a new state. It accepts an object payload with various properties such as `independentField`, `typedValue`, `inputCurrencyId`, `outputCurrencyId`, `recipient`, `fromBentoBalance`, `limitPrice`, and `orderExpiration`.",
- "checksum": "cf26f37a0d693c11e7e19f1ed5d4edbb"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/limit-order/hooks.json b/.autodoc/docs/json/core/src/state/limit-order/hooks.json
deleted file mode 100644
index 0fd0bda46..000000000
--- a/.autodoc/docs/json/core/src/state/limit-order/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/state/limit-order/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/limit-order/hooks.ts",
- "summary": "The code is a module that exports several functions and a hook that are used in the larger project called \"zoo\". The module contains functions that handle limit order actions, derive limit order information, and parse URL parameters to swap state. It also exports a hook that returns the current limit order state.\n\nThe `useLimitOrderActionHandlers` function returns an object with four functions that handle different actions related to limit orders. The `onCurrencySelection` function selects a currency for a given field (either input or output) and dispatches a `selectCurrency` action. The `onSwitchTokens` function switches the input and output currencies and dispatches a `switchCurrencies` action. The `onUserInput` function updates the typed value for a given field and dispatches a `typeInput` action. The `onChangeRecipient` function updates the recipient address and dispatches a `setRecipient` action.\n\nThe `useDerivedLimitOrderInfo` hook returns an object with several properties that are derived from the current limit order state. The `currencies` property is an object that contains the input and output currencies. The `parsedAmounts` property is an object that contains the parsed input and output amounts. The `walletBalances` property is an object that contains the wallet balances for the input and output currencies. The `bentoboxBalances` property is an object that contains the BentoBox balances for the input and output currencies. The `inputError` property is a string that contains an error message if there is an error with the input. The `currentPrice` property is the current price for the input and output currencies.\n\nThe `useLimitOrderState` function returns the current limit order state from the Redux store.\n\nThe `queryParametersToSwapState` function parses URL parameters and returns an object that contains the input and output currencies, the typed value, the independent field, the recipient address, the limit price, whether to use the BentoBox balance, and the order expiration.\n\nThe `useDefaultsFromURLSearch` hook sets the default limit order state based on the URL parameters and dispatches a `replaceLimitOrderState` action.\n\nOverall, this module provides functions and a hook that are used to handle limit order actions, derive limit order information, and parse URL parameters to swap state in the larger \"zoo\" project.",
- "questions": "1. What is the purpose of the `useLimitOrderActionHandlers` function?\n- The `useLimitOrderActionHandlers` function returns an object containing functions that handle user actions such as currency selection, token switching, user input, and recipient change for a limit order.\n\n2. What is the `useDerivedLimitOrderInfo` function used for?\n- The `useDerivedLimitOrderInfo` function returns an object containing derived information for a limit order such as selected currencies, parsed amounts, wallet and bentobox balances, input error, and current price.\n\n3. What is the purpose of the `queryParametersToSwapState` function?\n- The `queryParametersToSwapState` function converts query parameters from a URL into a swap state object containing input and output currencies, typed value, independent field, recipient, limit price, and order expiration.",
- "checksum": "b6969ced380bba8469b304cec96ffde6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/limit-order/reducer.json b/.autodoc/docs/json/core/src/state/limit-order/reducer.json
deleted file mode 100644
index 4b7787a78..000000000
--- a/.autodoc/docs/json/core/src/state/limit-order/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/limit-order/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/limit-order/reducer.ts",
- "summary": "This code defines a Redux reducer for managing the state of a limit order form in a decentralized exchange application. The `LimitOrderState` interface defines the shape of the state object, which includes fields for the input and output currencies, the typed value, the limit price, the recipient address, and other related data. The `OrderExpiration` enum defines the possible values for the order expiration time.\n\nThe `initialState` object defines the initial state of the form, with empty values for all fields. The `createReducer` function from the `@reduxjs/toolkit` library is used to create a reducer function that handles various actions dispatched by the application.\n\nThe `replaceLimitOrderState` action is dispatched when the user updates the form with new data. The reducer updates the state with the new values for the input and output currencies, the typed value, the limit price, the recipient address, and other related data. The `setLimitPrice`, `setLimitOrderApprovalPending`, `setOrderExpiration`, `setFromBentoBalance`, `selectCurrency`, `switchCurrencies`, `typeInput`, and `setRecipient` actions are used to update specific fields of the state object in response to user input.\n\nOverall, this code provides a way to manage the state of a limit order form in a decentralized exchange application, allowing users to specify the input and output currencies, the limit price, the recipient address, and other related data. The reducer function can be used in conjunction with other Redux middleware and components to create a fully functional limit order form. \n\nExample usage:\n\n```javascript\nimport { createStore } from 'redux';\nimport limitOrderReducer from './limitOrderReducer';\n\nconst store = createStore(limitOrderReducer);\n\n// Dispatch an action to update the input currency\nstore.dispatch(selectCurrency({ currencyId: 'ETH', field: Field.INPUT }));\n\n// Dispatch an action to update the limit price\nstore.dispatch(setLimitPrice('0.1'));\n\n// Get the current state of the limit order form\nconst state = store.getState();\nconsole.log(state);\n```",
- "questions": "1. What is the purpose of the `LimitOrderState` interface?\n- The `LimitOrderState` interface defines the shape of the state object for the limit order feature, including fields such as `independentField`, `typedValue`, `limitPrice`, `recipient`, and `orderExpiration`.\n\n2. What is the significance of the `OrderExpiration` enum?\n- The `OrderExpiration` enum provides a set of possible values for the `orderExpiration` field in the `LimitOrderState` object, including `never`, `hour`, `day`, `week`, and `month`.\n\n3. What actions can trigger changes to the `LimitOrderState` object?\n- The `LimitOrderState` object can be updated by dispatching actions such as `replaceLimitOrderState`, `setLimitPrice`, `setLimitOrderApprovalPending`, `setOrderExpiration`, `setFromBentoBalance`, `selectCurrency`, `switchCurrencies`, `typeInput`, and `setRecipient`. These actions are defined in the `./actions` module and are handled by the `createReducer` function from the `@reduxjs/toolkit` library.",
- "checksum": "5d8d09eaf18604a2be6a67499564eb60"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/lists/actions.json b/.autodoc/docs/json/core/src/state/lists/actions.json
deleted file mode 100644
index d3e1ebb24..000000000
--- a/.autodoc/docs/json/core/src/state/lists/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/lists/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/lists/actions.ts",
- "summary": "This code defines a set of Redux actions related to managing token lists. The `fetchTokenList` object contains three actions (`pending`, `fulfilled`, and `rejected`) that are dispatched during the process of fetching a token list from a given URL. The `addList` and `removeList` actions allow for adding and removing token lists from the application state. The `enableList` and `disableList` actions are used to select which token lists to search across from the loaded lists. Finally, the `acceptListUpdate` and `rejectVersionUpdate` actions are used for versioning.\n\nThis code is part of a larger project that likely involves managing and displaying token lists in a decentralized exchange or similar application. The `fetchTokenList` actions are likely used when the application needs to retrieve a new token list from a remote source. The `addList` and `removeList` actions are used to manage the set of available token lists in the application. The `enableList` and `disableList` actions are used to filter the set of available tokens based on the selected token lists. Finally, the `acceptListUpdate` and `rejectVersionUpdate` actions are used to manage updates to the token lists, likely to ensure that the application is using the latest version of each list.\n\nHere is an example of how these actions might be used in a Redux store:\n\n```\nimport { combineReducers, configureStore } from '@reduxjs/toolkit'\nimport {\n fetchTokenList,\n addList,\n removeList,\n enableList,\n disableList,\n acceptListUpdate,\n rejectVersionUpdate,\n} from './actions'\n\nconst listsReducer = combineReducers({\n // ... other reducers ...\n tokenLists: (state = [], action) => {\n switch (action.type) {\n case fetchTokenList.fulfilled.type:\n return [...state, action.payload.tokenList]\n case addList.type:\n return [...state, { url: action.payload }]\n case removeList.type:\n return state.filter(list => list.url !== action.payload)\n default:\n return state\n }\n },\n enabledLists: (state = [], action) => {\n switch (action.type) {\n case enableList.type:\n return [...state, action.payload]\n case disableList.type:\n return state.filter(list => list !== action.payload)\n default:\n return state\n }\n },\n version: (state = null, action) => {\n switch (action.type) {\n case acceptListUpdate.type:\n return action.payload.version\n case rejectVersionUpdate.type:\n return state\n default:\n return state\n }\n },\n})\n\nconst store = configureStore({\n reducer: {\n // ... other reducers ...\n lists: listsReducer,\n },\n})\n\n// Fetch a token list\nstore.dispatch(fetchTokenList.pending({ url: 'https://example.com/tokens.json', requestId: 'abc123' }))\n// Add a token list\nstore.dispatch(addList('https://example.com/tokens2.json'))\n// Enable a token list\nstore.dispatch(enableList('https://example.com/tokens.json'))\n// Accept a list update\nstore.dispatch(acceptListUpdate('v2'))\n```",
- "questions": "1. What is the purpose of this code?\n \n This code defines a set of Redux actions related to fetching and managing token lists, as well as versioning updates.\n\n2. What external dependencies does this code rely on?\n \n This code relies on two external dependencies: `@reduxjs/toolkit` and `@uniswap/token-lists`.\n\n3. How are the actions organized and what do they do?\n \n The actions are organized into several categories: fetching token lists, adding/removing lists, enabling/disabling lists, and versioning updates. The actions allow for managing token lists and versioning updates within a Redux store.",
- "checksum": "17d597597e5584a62ce5684a2bb3ab78"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/lists/hooks.json b/.autodoc/docs/json/core/src/state/lists/hooks.json
deleted file mode 100644
index 1a6038013..000000000
--- a/.autodoc/docs/json/core/src/state/lists/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/state/lists/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/lists/hooks.ts",
- "summary": "The code in this file is responsible for managing token lists used in the larger project. It imports the `AppState` from another file, as well as several other dependencies, including `DEFAULT_TOKEN_LIST` and `UNSUPPORTED_TOKEN_LIST`. It also defines several functions that are used to manipulate and combine token lists.\n\nThe `listToTokenMap` function takes a `TokenList` object and returns a `TokenAddressMap` object, which is a nested object that maps token addresses to their corresponding `WrappedTokenInfo` objects and `TokenList` objects. This function is used to create a map of all tokens in a given list, which can then be combined with other maps to create a master list of all tokens.\n\nThe `useCombinedTokenMapFromUrls` function takes an array of URLs and returns a `TokenAddressMap` object that combines all tokens from the lists at those URLs. This function is used to merge tokens contained within lists from URLs.\n\nThe `useActiveListUrls` function returns an array of active list URLs, filtered to exclude any unsupported lists. This function is used to filter out unsupported lists.\n\nThe `useCombinedActiveList` function returns a `TokenAddressMap` object that combines all tokens from the active lists and the default token list. This function is used to get all the tokens from active lists and combine them with local default tokens.\n\nThe `useUnsupportedTokenList` function returns a `TokenAddressMap` object that contains all tokens that are not supported on the interface. This function is used to show warnings and prevent swaps and adds.\n\nFinally, the `useIsListActive` function takes a URL and returns a boolean indicating whether that list is active. This function is used to determine whether a list is active or not.\n\nOverall, this code is responsible for managing token lists and combining them to create a master list of all tokens. It is used throughout the larger project to ensure that all tokens are accounted for and that unsupported tokens are properly handled.",
- "questions": "1. What is the purpose of the `listToTokenMap` function?\n- The `listToTokenMap` function takes a `TokenList` object and returns a `TokenAddressMap` object that maps token addresses to their corresponding `WrappedTokenInfo` and `TokenList` objects.\n\n2. What is the purpose of the `useCombinedTokenMapFromUrls` function?\n- The `useCombinedTokenMapFromUrls` function takes an array of token list URLs and returns a `TokenAddressMap` object that combines the tokens from all the specified lists.\n\n3. What is the purpose of the `useUnsupportedTokenList` function?\n- The `useUnsupportedTokenList` function returns a `TokenAddressMap` object that contains all the tokens that are not supported by the interface, which is used to show warnings and prevent swaps and adds. This includes both hard-coded unsupported tokens and any loaded unsupported tokens.",
- "checksum": "6c5bee04c5eeeb85332e093402780884"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/lists/reducer.json b/.autodoc/docs/json/core/src/state/lists/reducer.json
deleted file mode 100644
index e617a8172..000000000
--- a/.autodoc/docs/json/core/src/state/lists/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/lists/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/lists/reducer.ts",
- "summary": "The code is a module that manages the state of token lists in the Zoo project. It exports a `ListsState` interface that defines the shape of the state object, which has three properties: `byUrl`, `lastInitializedDefaultListOfLists`, and `activeListUrls`. The `byUrl` property is an object that maps a URL string to an object that contains information about the token list at that URL. The `lastInitializedDefaultListOfLists` property is an optional array of strings that contains the default list of lists from the last time the `updateVersion` function was called. The `activeListUrls` property is an array of strings that contains the URLs of the currently active token lists.\n\nThe module exports a default reducer function that uses the `createReducer` function from the `@reduxjs/toolkit` package to create a reducer that handles actions that modify the state. The reducer function uses the `builder` object to define case reducers for each action. The actions are defined in a separate `actions` module that is imported at the top of the file.\n\nThe reducer function handles several actions that modify the `byUrl` property of the state object. The `fetchTokenList` action is dispatched when a token list is being fetched from a URL. The `addList`, `removeList`, `enableList`, and `disableList` actions are dispatched when a token list is added, removed, enabled, or disabled, respectively. The `acceptListUpdate` action is dispatched when a pending update to a token list is accepted.\n\nThe reducer function also handles the `updateVersion` action, which is dispatched when the version of the token lists is updated. This action initializes the state object with the default list of lists and activates the default lists if no lists are currently active.\n\nThe module imports several functions and types from other modules. The `DEFAULT_ACTIVE_LIST_URLS` and `DEFAULT_LIST_OF_LISTS` constants are imported from the `../../config/token-lists` module. The `VersionUpgrade` and `getVersionUpgrade` functions are imported from the `@uniswap/token-lists` module. The `TokenList` type is imported from the `@uniswap/token-lists/dist/types` module. The `createReducer` function is imported from the `@reduxjs/toolkit` module. The `updateVersion` action is imported from the `../global/actions` module.\n\nExample usage:\n\n```typescript\nimport listsReducer, { ListsState } from './lists'\n\nconst initialState: ListsState = {\n byUrl: {},\n activeListUrls: [],\n}\n\nconst store = configureStore({\n reducer: {\n lists: listsReducer,\n },\n preloadedState: {\n lists: initialState,\n },\n})\n\nstore.dispatch(fetchTokenList({ url: 'https://example.com/list.json' }))\n```",
- "questions": "1. What is the purpose of this code?\n- This code manages the state of token lists in the zoo project, including fetching, adding, removing, enabling, and disabling lists.\n\n2. What is the structure of the `ListsState` interface?\n- The `ListsState` interface has a property `byUrl` which is an object with keys as URLs and values as objects containing `current`, `pendingUpdate`, `loadingRequestId`, and `error` properties. It also has a `lastInitializedDefaultListOfLists` property and an `activeListUrls` property.\n\n3. What is the purpose of the `createReducer` function?\n- The `createReducer` function is used to create a Redux reducer function that handles actions and updates the state of the `ListsState` object accordingly. It takes an initial state and a builder function that defines how the state should be updated for each action.",
- "checksum": "94d770b5b3a3d4d1495d39ee6f691a25"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/lists/updater.json b/.autodoc/docs/json/core/src/state/lists/updater.json
deleted file mode 100644
index 2f998737a..000000000
--- a/.autodoc/docs/json/core/src/state/lists/updater.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "updater.ts",
- "filePath": "core/src/state/lists/updater.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/lists/updater.ts",
- "summary": "The `Updater` function in this code is responsible for updating token lists used in the larger project. It imports several functions and hooks from other files in the project, including `getVersionUpgrade` and `minVersionBump` from `@uniswap/token-lists`, and `useCallback` and `useEffect` from `react`. \n\nThe `Updater` function first initializes several variables using the imported hooks, including `lists` and `activeListUrls`. It then defines a `fetchAllListsCallback` function that fetches all lists every 10 minutes, but only after the `library` has been initialized. This function is called using the `useInterval` hook. \n\nThe `Updater` function also defines two `useEffect` hooks. The first one tries to load any lists that are not currently loaded and not currently loading. The second one checks for any lists from unsupported URLs that are loaded and checks them for updates. \n\nFinally, the `Updater` function defines another `useEffect` hook that automatically updates lists if their versions are minor or patch. If the version bump is major, the list is not automatically updated. \n\nOverall, the `Updater` function is an important part of the larger project as it ensures that token lists are up-to-date and that any breaking changes are handled appropriately. It can be used by other parts of the project to ensure that token lists are always current. \n\nExample usage:\n\n```jsx\nimport Updater from './Updater'\n\nfunction App() {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What does this code do?\n- This code defines a React component called `Updater` that updates token lists used in the application. It fetches all loaded lists and active URLs, fetches all lists every 10 minutes, and automatically updates lists if versions are minor/patch.\n\n2. What external dependencies does this code have?\n- This code imports several functions and hooks from external dependencies such as `@uniswap/token-lists`, `react`, and custom hooks defined in other files.\n\n3. What is the purpose of the `useEffect` hook that checks unsupported list URLs?\n- The `useEffect` hook checks unsupported list URLs to see if any lists from those URLs are loaded and not loading, and if so, tries to load them again. This is done in case there are new updates since the last visit.",
- "checksum": "589a89baf4552243735933cb7d3a952e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/lists/wrappedTokenInfo.json b/.autodoc/docs/json/core/src/state/lists/wrappedTokenInfo.json
deleted file mode 100644
index eb4d58614..000000000
--- a/.autodoc/docs/json/core/src/state/lists/wrappedTokenInfo.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "wrappedTokenInfo.ts",
- "filePath": "core/src/state/lists/wrappedTokenInfo.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/lists/wrappedTokenInfo.ts",
- "summary": "This code defines a class called `WrappedTokenInfo` that represents a token on a token list. The `TokenList` is imported from the `@uniswap/token-lists` package, which provides a standardized format for token lists. The `TokenInfo` interface is also imported from this package, which defines the properties of a token on a token list. The `Tags` interface is also imported from this package, which defines the tags that can be associated with a token on a token list.\n\nThe `WrappedTokenInfo` class implements the `Token` interface from the `@zoolabs/zdk` package, which defines the properties and methods of a token. The `Token` interface has properties such as `address`, `chainId`, `decimals`, `name`, `symbol`, and `logoURI`, which are all defined in the `TokenInfo` interface. The `WrappedTokenInfo` class also has a `list` property, which is the token list that the token belongs to.\n\nThe `WrappedTokenInfo` class has a constructor that takes a `TokenInfo` object and a `TokenList` object as arguments. The `TokenInfo` object contains the information about the token, such as its `address`, `chainId`, `decimals`, `name`, `symbol`, and `logoURI`. The `TokenList` object contains the information about the token list, such as its `name`, `logoURI`, and `tags`.\n\nThe `WrappedTokenInfo` class has methods such as `equals`, `sortsBefore`, and `serialize`, which are all defined in the `Token` interface. The `equals` method checks if two tokens are equal by comparing their `chainId` and `address`. The `sortsBefore` method checks if a token should be sorted before another token based on their `address`. The `serialize` method returns the `address` of the token as a string.\n\nThe `WrappedTokenInfo` class also has a `tags` property, which is an array of `TagInfo` objects. The `TagInfo` interface extends the `TagDetails` interface from the `Tags` interface and adds an `id` property. The `tags` property maps the `tagId` values from the `TokenInfo` object to the corresponding `TagInfo` objects from the `TokenList` object.\n\nThis code can be used to create instances of the `WrappedTokenInfo` class from `TokenInfo` objects on a token list. These instances can be used to represent tokens in a decentralized exchange or other applications that use tokens. The `tags` property can be used to get the tags associated with a token on a token list. The `equals`, `sortsBefore`, and `serialize` methods can be used to compare and serialize tokens.",
- "questions": "1. What is the purpose of this code?\n \n This code defines a class `WrappedTokenInfo` that represents a token on a token list. It provides methods to get information about the token such as its name, symbol, and tags.\n\n2. What external dependencies does this code have?\n \n This code imports `Currency` and `Token` from the `@zoolabs/zdk` library, and `Tags` and `TokenInfo` from the `@uniswap/token-lists` library. It also imports the `TokenList` type from the same library, and the `isAddress` function from a local file.\n\n3. What is the purpose of the `tags` property and how is it populated?\n \n The `tags` property is an array of `TagInfo` objects that represent the tags associated with the token. It is populated by mapping over the `tagIds` array in the `tokenInfo` object and looking up the corresponding `TagDetails` object in the `list.tags` object. The resulting `TagInfo` objects have an additional `id` property that is set to the corresponding `tagId`.",
- "checksum": "019d11cfcf5943b0cfff961ffdff8d82"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/mint/actions.json b/.autodoc/docs/json/core/src/state/mint/actions.json
deleted file mode 100644
index 64b1514ca..000000000
--- a/.autodoc/docs/json/core/src/state/mint/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/mint/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/mint/actions.ts",
- "summary": "This code is a module that exports two functions: `typeInput` and `resetMintState`. It also exports an enum called `Field` that defines two constants: `CURRENCY_A` and `CURRENCY_B`. \n\nThe `typeInput` function is created using the `createAction` function from the `@reduxjs/toolkit` library. It takes in an object with three properties: `field`, `typedValue`, and `noLiquidity`. The `field` property is of type `Field`, which is the enum defined in this module. The `typedValue` property is of type `string` and represents the user's input. The `noLiquidity` property is of type `boolean` and is used to indicate whether there is enough liquidity to perform the requested action. \n\nThe purpose of the `typeInput` function is to create an action that can be dispatched to the Redux store. This action represents the user's input when they are trying to mint a new currency. The `field` property indicates which currency the user is trying to mint, and the `typedValue` property represents the amount they want to mint. The `noLiquidity` property is used to indicate whether there is enough liquidity to perform the requested action. \n\nThe `resetMintState` function is also created using the `createAction` function. It takes no arguments and is used to reset the state of the minting process. \n\nIn the larger project, these functions would be used to update the state of the Redux store when the user interacts with the minting feature. For example, when the user types in a value to mint, the `typeInput` function would be called with the appropriate arguments, and an action would be dispatched to the Redux store. This action would then be handled by a reducer, which would update the state of the store accordingly. The `resetMintState` function would be used to reset the state of the store when the user cancels the minting process or when it is completed. \n\nExample usage:\n\n```\nimport { typeInput, resetMintState, Field } from 'zoo'\n\n// Dispatch an action to update the state of the store with the user's input\ndispatch(typeInput({ field: Field.CURRENCY_A, typedValue: '100', noLiquidity: false }))\n\n// Reset the state of the store\ndispatch(resetMintState())\n```",
- "questions": "1. What is the purpose of the `createAction` function from `@reduxjs/toolkit` being imported?\n- The `createAction` function is used to create two Redux actions: `typeInput` and `resetMintState`.\n\n2. What is the purpose of the `Field` enum?\n- The `Field` enum is used to define two currency fields: `CURRENCY_A` and `CURRENCY_B`.\n\n3. What parameters are expected for the `typeInput` action?\n- The `typeInput` action expects an object with three properties: `field` (a value from the `Field` enum), `typedValue` (a string), and `noLiquidity` (a boolean).",
- "checksum": "bd1716cf6cc01fe546c32c7430248e63"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/mint/hooks.json b/.autodoc/docs/json/core/src/state/mint/hooks.json
deleted file mode 100644
index ec737a7c5..000000000
--- a/.autodoc/docs/json/core/src/state/mint/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/state/mint/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/mint/hooks.ts",
- "summary": "The code is a module that exports several functions and a constant. It imports several modules from the project's index file, as well as from external libraries such as `@zoolabs/zdk`, `react`, and `@lingui/macro`. \n\nThe `useMintState` function returns the `mint` state from the Redux store using the `useSelector` hook. The `useMintActionHandlers` function returns two functions that dispatch Redux actions to update the `typedValue` of two input fields (`Field.CURRENCY_A` and `Field.CURRENCY_B`) in the `mint` state. The `useDerivedMintInfo` function returns an object containing various derived information based on the `mint` state and the input currencies (`currencyA` and `currencyB`). \n\nThe `useDerivedMintInfo` function first gets the `independentField`, `typedValue`, and `otherTypedValue` from the `mint` state. It then calculates the `dependentField` based on the `independentField`. It creates an object `currencies` with the input currencies mapped to their respective fields. It uses the `useV2Pair` hook to get the `pairState` and `pair` based on the input currencies. It also gets the `totalSupply` of the liquidity token from the `pair`. \n\nThe function then calculates the `noLiquidity` boolean based on the `pairState`, `totalSupply`, and `pair` variables. It gets the `balances` of the input currencies for the current user's account using the `useCurrencyBalances` hook. It calculates the `independentAmount` and `dependentAmount` based on the `typedValue`, `independentField`, `otherTypedValue`, `dependentField`, and the input currencies. It also calculates the `parsedAmounts` object based on the `independentAmount` and `dependentAmount`. \n\nThe function then calculates the `price` of the input currencies based on the `noLiquidity` boolean, `currencyA`, `currencyB`, and the `pair`. It calculates the `liquidityMinted` based on the `parsedAmounts`, `pair`, and `totalSupply`. It calculates the `poolTokenPercentage` based on the `liquidityMinted` and `totalSupply`. Finally, it calculates the `error` string based on various conditions such as whether the user is connected to a wallet, whether the `pairState` is invalid, and whether the input amounts are valid. \n\nOverall, this module provides several hooks that can be used to get and update the `mint` state in the Redux store, as well as to calculate various derived information based on the input currencies and the `mint` state. These hooks can be used in other parts of the project to implement the minting functionality for a liquidity pool.",
- "questions": "1. What is the purpose of this code file?\n- This code file contains several custom hooks and a function that are used for handling the minting of liquidity in a decentralized exchange.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries such as `@zoolabs/zdk`, `@lingui/macro`, and `react-redux`.\n\n3. What is the role of the `useDerivedMintInfo` hook?\n- The `useDerivedMintInfo` hook is responsible for deriving various information needed for minting liquidity, such as the currencies being used, the pair being traded, the parsed amounts of each currency, the price of the pair, and any errors that may occur during the process.",
- "checksum": "7f0dcfaa27cb6a8e2d68b0db89f39955"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/mint/reducer.json b/.autodoc/docs/json/core/src/state/mint/reducer.json
deleted file mode 100644
index 47b5d7a3f..000000000
--- a/.autodoc/docs/json/core/src/state/mint/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/mint/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/mint/reducer.ts",
- "summary": "This code defines a Redux reducer for the `MintState` slice of the store in the `zoo` project. The `MintState` interface defines the shape of the state object, which has three properties: `independentField`, `typedValue`, and `otherTypedValue`. The `createReducer` function from the `@reduxjs/toolkit` package is used to create the reducer function, which takes an initial state object and a \"builder\" function that defines how the state should be updated in response to different actions.\n\nThe `resetMintState` action resets the state to the initial state, and the `typeInput` action updates the state based on the `field`, `typedValue`, and `noLiquidity` payload properties. If `noLiquidity` is true, it means that there is no liquidity for the selected currency pair, so the user is typing into the field they last typed in. If the `field` matches the current `independentField`, the `typedValue` is updated for that field. Otherwise, the `otherTypedValue` property is updated with the previous `typedValue`, and the `independentField` and `typedValue` properties are updated for the new field.\n\nThis reducer can be used in the `zoo` project to manage the state of the minting feature, which allows users to create new tokens by providing liquidity to a currency pair. The `MintState` slice of the store tracks the user's input for the minting process, including the selected currency pair and the amount of tokens to mint. The `typeInput` action is dispatched whenever the user types into one of the input fields, and the reducer updates the state accordingly. The `resetMintState` action can be dispatched to reset the state when the user cancels the minting process. \n\nExample usage:\n\n```typescript\nimport { createStore } from 'redux'\nimport mintReducer, { MintState, resetMintState, typeInput, Field } from './mintReducer'\n\nconst initialState: MintState = {\n independentField: Field.CURRENCY_A,\n typedValue: '',\n otherTypedValue: '',\n}\n\nconst store = createStore(mintReducer, initialState)\n\nstore.dispatch(typeInput({\n field: Field.CURRENCY_B,\n typedValue: '100',\n noLiquidity: false,\n}))\n\nconsole.log(store.getState())\n// Output: { independentField: Field.CURRENCY_B, typedValue: '100', otherTypedValue: '' }\n\nstore.dispatch(resetMintState())\n\nconsole.log(store.getState())\n// Output: { independentField: Field.CURRENCY_A, typedValue: '', otherTypedValue: '' }\n```",
- "questions": "1. What is the purpose of this code and what problem does it solve?\n - This code is a reducer function for managing state related to a minting feature. It handles resetting the state and updating the state based on user input.\n2. What are the possible values for the `Field` enum and how are they used in this code?\n - The `Field` enum has at least two possible values, `CURRENCY_A` and `CURRENCY_B`, which represent the two fields that the user can input values into. In this code, the `independentField` property of the state is set to one of these values and is updated based on user input.\n3. What is the purpose of the `noLiquidity` parameter and how does it affect the behavior of the `typeInput` case?\n - The `noLiquidity` parameter is a boolean value that indicates whether or not there is liquidity available for the selected currency pair. If there is no liquidity, the behavior of the `typeInput` case is different - it stores the value of the previously typed field in the `otherTypedValue` property of the state.",
- "checksum": "0ea09fc2041a0fde726a9b9e9217c2ef"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/multicall/actions.json b/.autodoc/docs/json/core/src/state/multicall/actions.json
deleted file mode 100644
index f6caa3f96..000000000
--- a/.autodoc/docs/json/core/src/state/multicall/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/multicall/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/multicall/actions.ts",
- "summary": "This code defines a set of actions and an interface for a Redux store related to fetching data from multiple sources in a blockchain network. The `ListenerOptions` interface defines an object with a single property, `blocksPerFetch`, which specifies how often data should be fetched. The `addMulticallListeners` and `removeMulticallListeners` actions take in an object with three properties: `chainId`, which specifies the blockchain network to fetch data from, `calls`, which is an array of `Call` objects that specify the data to fetch, and `options`, which is an object of type `ListenerOptions`. These actions are used to add and remove listeners for fetching data from multiple sources in the blockchain network.\n\nThe `fetchingMulticallResults` action takes in an object with three properties: `chainId`, `calls`, and `fetchingBlockNumber`. This action is dispatched when the data is being fetched from the blockchain network. The `errorFetchingMulticallResults` action takes in an object with the same properties as `fetchingMulticallResults`, but is dispatched when there is an error fetching the data.\n\nThe `updateMulticallResults` action takes in an object with three properties: `chainId`, `blockNumber`, and `results`. This action is dispatched when the data has been successfully fetched from the blockchain network. The `results` property is an object with keys that correspond to the `Call` objects in the `calls` array, and values that are either strings or null.\n\nOverall, this code provides a set of actions and an interface for fetching data from multiple sources in a blockchain network. These actions can be used in a Redux store to manage the state of the data fetching process. For example, the `addMulticallListeners` action can be dispatched when a component mounts to start fetching data, and the `updateMulticallResults` action can be used to update the state of the store with the fetched data. Here is an example of how these actions can be used in a Redux store:\n\n```\nimport { createStore } from 'redux'\nimport { addMulticallListeners, updateMulticallResults } from './path/to/zoo'\n\nconst initialState = {\n data: {}\n}\n\nfunction reducer(state = initialState, action) {\n switch (action.type) {\n case 'multicall/addMulticallListeners':\n // start fetching data\n return state\n case 'multicall/updateMulticallResults':\n // update state with fetched data\n return {\n ...state,\n data: {\n ...state.data,\n [action.chainId]: {\n ...state.data[action.chainId],\n [action.blockNumber]: action.results\n }\n }\n }\n default:\n return state\n }\n}\n\nconst store = createStore(reducer)\n\n// dispatch addMulticallListeners action to start fetching data\nstore.dispatch(addMulticallListeners({\n chainId: 1,\n calls: [{}, {}, {}],\n options: { blocksPerFetch: 1 }\n}))\n\n// dispatch updateMulticallResults action to update state with fetched data\nstore.dispatch(updateMulticallResults({\n chainId: 1,\n blockNumber: 12345,\n results: {\n 'call1': 'result1',\n 'call2': 'result2',\n 'call3': null\n }\n}))\n```",
- "questions": "1. What is the purpose of the `Call` interface in the `import` statement?\n- The `Call` interface is imported from the `utils` module, but its purpose is not clear from this code alone.\n\n2. What is the `multicall` feature and how does it work?\n- The code defines several actions related to `multicall`, but it is not clear what this feature is or how it is implemented.\n\n3. What is the expected format of the `results` object in the `updateMulticallResults` action?\n- The `updateMulticallResults` action takes an object with a `results` property that is an object with string keys and string or null values. It is not clear what these keys and values represent or how they are used.",
- "checksum": "cdc45e19ac7f5b4e1856a3994175ac0d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/multicall/hooks.json b/.autodoc/docs/json/core/src/state/multicall/hooks.json
deleted file mode 100644
index 8a7110d73..000000000
--- a/.autodoc/docs/json/core/src/state/multicall/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/state/multicall/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/multicall/hooks.ts",
- "summary": "The code in this file provides functions and hooks for interacting with smart contracts on the Ethereum blockchain. It imports various utility functions and types from other files and libraries, including `utils`, `@ethersproject/abi`, and `@ethersproject/bignumber`. \n\nThe `useCallsData` function is the lowest-level function for subscribing to contract data. It takes an array of `Call` objects, which contain the address and encoded data for a contract method call, and an optional `ListenerOptions` object. It returns an array of `CallResult` objects, which contain the result data and block number for each call. This function is used by the higher-level hooks `useSingleContractMultipleData`, `useMultipleContractSingleData`, and `useSingleCallResult`.\n\n`useSingleContractMultipleData` is a hook that takes a `Contract` object, a method name, an array of method inputs, and optional `ListenerOptions` and `gasRequired` objects. It returns an array of `CallState` objects, which contain information about the state of each method call. This hook is used when you want to call the same method on a single contract with multiple sets of inputs.\n\n`useMultipleContractSingleData` is a hook that takes an array of contract addresses, a contract interface, a method name, method inputs, and optional `ListenerOptions` and `gasRequired` objects. It returns an array of `CallState` objects, which contain information about the state of each method call. This hook is used when you want to call the same method on multiple contracts with the same inputs.\n\n`useSingleCallResult` is a hook that takes a `Contract` object, a method name, method inputs, and optional `ListenerOptions` and `gasRequired` objects. It returns a single `CallState` object, which contains information about the state of the method call. This hook is used when you want to call a single method on a single contract.\n\nThe `toCallState` function takes a `CallResult` object, a contract interface, a method fragment, and the latest block number, and returns a `CallState` object. This function is used by the higher-level hooks to convert the `CallResult` objects into `CallState` objects.\n\nOverall, this file provides a set of hooks and functions that make it easy to interact with smart contracts on the Ethereum blockchain. These hooks and functions can be used in a larger project to fetch data from contracts and display it in a user interface. Here is an example of how to use the `useSingleCallResult` hook:\n\n```\nimport { useSingleCallResult } from './path/to/zoo'\n\nconst MyComponent = ({ contract }) => {\n const { result, loading, error } = useSingleCallResult(contract, 'balanceOf', ['0x123...'])\n\n if (loading) {\n return Loading...
\n }\n\n if (error) {\n return Error fetching balance
\n }\n\n return Balance: {result?.[0]}
\n}\n```",
- "questions": "1. What is the purpose of the `useCallsData` function?\n- The `useCallsData` function is the lowest level call for subscribing to contract data and returns an array of `CallResult` objects.\n\n2. What is the purpose of the `useSingleContractMultipleData` function?\n- The `useSingleContractMultipleData` function is used to fetch multiple data points from a single contract and returns an array of `CallState` objects.\n\n3. What is the purpose of the `useSingleCallResult` function?\n- The `useSingleCallResult` function is used to fetch a single data point from a single contract and returns a single `CallState` object.",
- "checksum": "fdc7ca6c00c570ca486fe964114d357b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/multicall/reducer.json b/.autodoc/docs/json/core/src/state/multicall/reducer.json
deleted file mode 100644
index 06dca2b7c..000000000
--- a/.autodoc/docs/json/core/src/state/multicall/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/multicall/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/multicall/reducer.ts",
- "summary": "This code defines a Redux reducer for handling the state of a multicall feature in the larger project. The multicall feature allows for batching of multiple Ethereum contract function calls into a single request, which can improve performance and reduce gas costs. \n\nThe `MulticallState` interface defines the shape of the state object, which includes two properties: `callListeners` and `callResults`. `callListeners` is an object that stores the preferences of listeners for each call key and how many listeners there are per each blocks per fetch preference. `callResults` is an object that stores the results of each call key, including the data returned, the block number at which the call was made, and the block number at which the data was fetched. \n\nThe `initialState` object sets the initial state of the reducer, which only includes an empty `callResults` object. \n\nThe `createReducer` function from the `@reduxjs/toolkit` library is used to create the reducer. The `builder` object is used to define the reducer's behavior for each action type. \n\nThe `addMulticallListeners` action adds listeners for multiple contract function calls. It takes in an array of `calls`, a `chainId`, and an object of `options` that includes a `blocksPerFetch` preference. The reducer updates the `callListeners` object to include the new listeners for the specified `chainId` and `callKey`. If the `callKey` or `blocksPerFetch` preference already exists, the listener count is incremented. \n\nThe `removeMulticallListeners` action removes listeners for multiple contract function calls. It takes in an array of `calls`, a `chainId`, and an object of `options` that includes a `blocksPerFetch` preference. The reducer updates the `callListeners` object to remove the specified listeners for the specified `chainId` and `callKey`. If the `callKey` or `blocksPerFetch` preference still has listeners, the listener count is decremented. \n\nThe `fetchingMulticallResults` action updates the `callResults` object to indicate that the specified contract function calls are being fetched. It takes in a `chainId`, a `fetchingBlockNumber`, and an array of `calls`. The reducer updates the `callResults` object to include the specified `fetchingBlockNumber` for each `callKey`. If the `callKey` already has a `fetchingBlockNumber` that is greater than or equal to the specified `fetchingBlockNumber`, the reducer does not update the state. \n\nThe `errorFetchingMulticallResults` action updates the `callResults` object to indicate that there was an error fetching the specified contract function calls. It takes in a `fetchingBlockNumber`, a `chainId`, and an array of `calls`. The reducer updates the `callResults` object to set the `data` property to `null` for each `callKey` that has a `fetchingBlockNumber` equal to the specified `fetchingBlockNumber`. \n\nThe `updateMulticallResults` action updates the `callResults` object with the results of the specified contract function calls. It takes in a `chainId`, an object of `results` that maps `callKey` to data, and a `blockNumber`. The reducer updates the `callResults` object to include the specified `results` and `blockNumber` for each `callKey`. If the `callKey` already has a `blockNumber` that is greater than the specified `blockNumber`, the reducer does not update the state. \n\nOverall, this code provides a way to manage the state of a multicall feature in the larger project. It allows for adding and removing listeners for multiple contract function calls, tracking the results of those calls, and handling errors that may occur during the fetching process. This code can be used in conjunction with other parts of the project to implement the multicall feature and improve performance and gas costs. \n\nExample usage:\n\n```javascript\nimport multicallReducer from './multicallReducer'\nimport { configureStore } from '@reduxjs/toolkit'\n\nconst store = configureStore({\n reducer: {\n multicall: multicallReducer,\n },\n})\n\n// Add listeners for multiple contract function calls\nstore.dispatch(addMulticallListeners({\n calls: [\n { address: '0x123...', data: '0x123...' },\n { address: '0x456...', data: '0x456...' },\n ],\n chainId: 1,\n options: { blocksPerFetch: 5 },\n}))\n\n// Fetch the results of the contract function calls\nstore.dispatch(fetchingMulticallResults({\n chainId: 1,\n fetchingBlockNumber: 12345,\n calls: [\n { address: '0x123...', data: '0x123...' },\n { address: '0x456...', data: '0x456...' },\n ],\n}))\n\n// Update the results of the contract function calls\nstore.dispatch(updateMulticallResults({\n chainId: 1,\n results: {\n '0x123...': '0xabc...',\n '0x456...': '0xdef...',\n },\n blockNumber: 12345,\n}))\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a Redux reducer for handling multicall state, which includes call listeners and call results for different chains.\n\n2. What are the inputs and outputs of the `addMulticallListeners` function?\n- The `addMulticallListeners` function takes in an array of calls, a chain ID, and a blocks per fetch option, and updates the call listeners state accordingly. It does not have any output.\n\n3. What is the purpose of the `updateMulticallResults` case?\n- The `updateMulticallResults` case updates the call results state with the results of a multicall query for a specific chain and block number. It only updates the state for call keys that have not already been updated with a later block number.",
- "checksum": "e4e569f4cbd9457bbeae0343f88485ea"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/multicall/updater.json b/.autodoc/docs/json/core/src/state/multicall/updater.json
deleted file mode 100644
index e7e52d37b..000000000
--- a/.autodoc/docs/json/core/src/state/multicall/updater.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "updater.tsx",
- "filePath": "core/src/state/multicall/updater.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/state/multicall/updater.tsx",
- "summary": "The `Updater` function in this file is responsible for fetching data from a smart contract using the Multicall2 contract. The Multicall2 contract allows multiple calls to be made to a smart contract in a single transaction, which can improve efficiency and reduce gas costs. \n\nThe `Updater` function uses several helper functions to determine which calls need to be made and how often they need to be made. The `activeListeningKeys` function takes in a list of all listeners and the current chain ID and returns a mapping of each call key to the minimum number of blocks per fetch. This determines how often each key must be fetched. The `outdatedListeningKeys` function takes in the current call result state, the listening keys, the chain ID, and the latest block number. It returns the keys that need to be refetched based on how old the data can be in blocks. \n\nThe `Updater` function then uses the `useEffect` hook to fetch the data for the outdated call keys. It chunks the calls into smaller groups and uses the `fetchChunk` function to fetch the data for each group. If any calls fail, the `errorFetchingMulticallResults` function is called to handle the error. If the calls are successful, the `updateMulticallResults` function is called to update the state with the new results. \n\nOverall, this code is an important part of the larger project because it allows for efficient and cost-effective fetching of data from smart contracts. It uses the Multicall2 contract to make multiple calls in a single transaction and determines which calls need to be made and how often they need to be made. This can improve the performance of the application and reduce gas costs. \n\nExample usage:\n\n```\nimport Updater from './Updater'\n\nfunction App() {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `fetchChunk` function?\n - The `fetchChunk` function fetches a chunk of calls from a multicall contract, enforcing a minimum block number constraint.\n2. What is the purpose of the `activeListeningKeys` function?\n - The `activeListeningKeys` function returns each call key mapped to the minimum number of blocks per fetch, based on the current all listeners state and chain ID.\n3. What is the purpose of the `Updater` component?\n - The `Updater` component is responsible for fetching and updating multicall results based on the current call listeners and call results state, as well as the latest block number and chain ID.",
- "checksum": "33d93d6116b9d931680f48207bb554c6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/multicall/utils.json b/.autodoc/docs/json/core/src/state/multicall/utils.json
deleted file mode 100644
index 2039d2948..000000000
--- a/.autodoc/docs/json/core/src/state/multicall/utils.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "utils.ts",
- "filePath": "core/src/state/multicall/utils.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/multicall/utils.ts",
- "summary": "This file contains two functions and an interface related to encoding and decoding Ethereum contract calls. The `Call` interface defines the structure of a contract call, including the address of the contract and the data to be sent with the call. The `toCallKey` function takes a `Call` object and returns a string that can be used as a key for caching the result of the call. The key is constructed by concatenating the contract address and call data, separated by a hyphen. If the `gasRequired` property is present in the `Call` object, it is also included in the key. If `gasRequired` is not a safe integer, an error is thrown.\n\nThe `parseCallKey` function takes a string that was generated by `toCallKey` and returns a `Call` object. The string is split on hyphens, and the resulting array is used to populate the `address` and `callData` properties of the `Call` object. If the array has a length of 3, the third element is parsed as an integer and used to set the `gasRequired` property of the `Call` object. If the array has a length other than 2 or 3, an error is thrown.\n\nThese functions are likely used in the larger project to cache the results of contract calls in order to reduce the number of calls made to the Ethereum network. By using the `toCallKey` function to generate a key based on the contract address and call data, the project can check if the result of a call has already been cached before making a new call. The `parseCallKey` function is used to decode the cached key back into a `Call` object so that the cached result can be returned. \n\nExample usage:\n\n```\nconst call: Call = {\n address: '0x1234567890123456789012345678901234567890',\n callData: '0xabcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789',\n gasRequired: 1000000,\n}\n\nconst key = toCallKey(call)\nconsole.log(key) // '0x1234567890123456789012345678901234567890-0xabcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789-1000000'\n\nconst parsedCall = parseCallKey(key)\nconsole.log(parsedCall) // { address: '0x1234567890123456789012345678901234567890', callData: '0xabcdef0123456789abcdef0123456789abcdef0123456789abcdef0123456789', gasRequired: 1000000 }\n```",
- "questions": "1. What is the purpose of the `Call` interface?\n - The `Call` interface defines the structure of an object that contains an `address` and `callData` property, and optionally a `gasRequired` property.\n\n2. What does the `toCallKey` function do?\n - The `toCallKey` function takes a `Call` object as input and returns a string that concatenates the `address` and `callData` properties. If the `gasRequired` property is present, it is also appended to the string.\n\n3. What is the purpose of the `parseCallKey` function?\n - The `parseCallKey` function takes a string as input and returns a `Call` object that contains the `address` and `callData` properties parsed from the input string. If the input string contains a `gasRequired` value, it is also included in the returned object.",
- "checksum": "cd71ca9b1b6f2d70bd71b621f01f4941"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/network/actions.json b/.autodoc/docs/json/core/src/state/network/actions.json
deleted file mode 100644
index 317efa63f..000000000
--- a/.autodoc/docs/json/core/src/state/network/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/network/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/network/actions.ts",
- "summary": "The code above is a function that updates the gas price of a network using the createAsyncThunk method from the Redux Toolkit library. The gas price is the amount of ether that a user is willing to pay for a transaction to be processed on the Ethereum network. \n\nThe function takes in a library object as a parameter, which is expected to have an eth property that contains a getGasPrice method. This method is used to retrieve the current gas price in wei (the smallest unit of ether). The wei price is then converted to a number and returned as an object with a gasPrice property.\n\nThis function can be used in a larger project that involves interacting with the Ethereum network. For example, it can be used in a dApp (decentralized application) that allows users to perform transactions on the network. The gas price is an important parameter to consider when submitting a transaction, as it determines how quickly the transaction will be processed by the network. By updating the gas price, the function can help ensure that transactions are processed in a timely manner.\n\nHere is an example of how this function can be used in a Redux slice:\n\n```\nimport { updateGasPrice } from './gasPriceSlice'\n\nconst gasPriceSlice = createSlice({\n name: 'gasPrice',\n initialState: { gasPrice: 0 },\n reducers: {},\n extraReducers: (builder) => {\n builder.addCase(updateGasPrice.fulfilled, (state, action) => {\n state.gasPrice = action.payload.gasPrice\n })\n },\n})\n\nexport default gasPriceSlice.reducer\n```\n\nIn this example, the updateGasPrice function is used as an extra reducer in a gasPriceSlice. When the function is fulfilled (i.e. when the gas price is successfully updated), the gasPrice state is updated with the new value. This allows other parts of the application to access the current gas price and use it when submitting transactions to the network.",
- "questions": "1. What is the purpose of the `createAsyncThunk` function and how does it work?\n- `createAsyncThunk` is a function provided by the `@reduxjs/toolkit` library that allows developers to create asynchronous Redux action creators. It takes in a string argument representing the action type and an async function that returns the payload data.\n\n2. What is the `updateGasPrice` action responsible for and how is it triggered?\n- The `updateGasPrice` action is responsible for fetching the current gas price from the Ethereum network using the provided `library` object and returning it as the payload data. It is triggered by dispatching the action to the Redux store.\n\n3. What is the expected data type of the `library` parameter and where is it defined?\n- The `library` parameter is expected to be of type `any` and is not defined within this code file. It is likely defined elsewhere in the project and passed as an argument when dispatching the `updateGasPrice` action.",
- "checksum": "729183bf89ca7e50a9c52a33049d8e04"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/network/hooks.json b/.autodoc/docs/json/core/src/state/network/hooks.json
deleted file mode 100644
index 70e8b2bb6..000000000
--- a/.autodoc/docs/json/core/src/state/network/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/state/network/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/network/hooks.ts",
- "summary": "This code is a custom hook that utilizes the `useSelector` hook from the `react-redux` library to retrieve the current gas price from the `NetworkState` reducer. The `useGasPrice` hook can be used in any component that needs to access the gas price value from the Redux store.\n\nThe `useSelector` hook takes a selector function as its argument, which is used to extract a specific piece of state from the Redux store. In this case, the selector function takes the `NetworkState` object as its argument and returns the `gasPrice` value.\n\nThe `useGasPrice` hook returns the `gasPrice` value, which is either a number or `undefined`. This allows components to handle the case where the gas price has not yet been fetched or is not available.\n\nHere is an example of how this hook can be used in a component:\n\n```\nimport React from 'react'\nimport { useGasPrice } from './useGasPrice'\n\nfunction GasPrice() {\n const gasPrice = useGasPrice()\n\n if (gasPrice === undefined) {\n return Loading gas price...
\n }\n\n return Current gas price: {gasPrice} Gwei
\n}\n```\n\nIn this example, the `GasPrice` component uses the `useGasPrice` hook to retrieve the current gas price from the Redux store. If the gas price is not yet available, the component displays a loading message. Otherwise, it displays the current gas price in Gwei units.\n\nOverall, this code provides a simple and reusable way to access the gas price value from the Redux store in any component that needs it.",
- "questions": "1. What is the purpose of the `useSelector` hook from `react-redux` being used in this code?\n - The `useSelector` hook is used to extract data from the Redux store state, specifically the `gasPrice` value from the `NetworkState` reducer.\n\n2. What is the expected return type of the `useGasPrice` function?\n - The expected return type of the `useGasPrice` function is either a number or `undefined`.\n\n3. What is the `NetworkState` import and how is it used in this code?\n - The `NetworkState` import is likely a custom type or interface defined in the `reducer` file. It is used as the type for the `state` argument in the `useSelector` callback function to ensure type safety when accessing the `gasPrice` value from the Redux store state.",
- "checksum": "f9d20319e65bcc4a4ed014a1c720c266"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/network/reducer.json b/.autodoc/docs/json/core/src/state/network/reducer.json
deleted file mode 100644
index c49e564d4..000000000
--- a/.autodoc/docs/json/core/src/state/network/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/network/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/network/reducer.ts",
- "summary": "This code is a TypeScript module that exports a Redux reducer function for managing the state of a network in a larger project called \"zoo\". The reducer function is created using the `createReducer` function from the `@reduxjs/toolkit` library, which simplifies the process of creating Redux reducers by providing a more concise syntax and built-in immutability handling.\n\nThe `NetworkState` interface defines the shape of the state object managed by the reducer, which in this case includes a single property `gasPrice` of type `number`. The `initialState` constant initializes the state object with a `gasPrice` value of 0.\n\nThe reducer function is defined using the `createReducer` function, which takes the initial state object and a \"builder\" function that defines how the state should be updated in response to different actions. In this case, the builder function uses the `addCase` method to define a single case that responds to the `updateGasPrice.fulfilled` action. When this action is dispatched, the reducer updates the `gasPrice` property of the state object with the value provided in the action payload.\n\nThis reducer function can be used in conjunction with other Redux functionality to manage the state of the network in the larger \"zoo\" project. For example, an action creator function could be defined to dispatch the `updateGasPrice` action with a new gas price value, and a component could use the `useSelector` hook from the `react-redux` library to access the current `gasPrice` value from the state object.\n\nExample usage:\n\n```\nimport { useDispatch, useSelector } from 'react-redux'\nimport { updateGasPrice } from './actions'\nimport { NetworkState } from './reducer'\n\nfunction NetworkComponent() {\n const dispatch = useDispatch()\n const gasPrice = useSelector((state: { network: NetworkState }) => state.network.gasPrice)\n\n function handleGasPriceChange(newPrice: number) {\n dispatch(updateGasPrice(newPrice))\n }\n\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `createReducer` function and how does it work?\n- `createReducer` is a function from the `@reduxjs/toolkit` library that creates a Redux reducer function based on a set of case reducers. It takes an initial state and a builder function that defines the case reducers, which are functions that handle specific actions and update the state accordingly.\n\n2. What is the `updateGasPrice` action and where is it defined?\n- `updateGasPrice` is an action that is imported from a file located at `./actions`. Without seeing the contents of that file, it's unclear what the action does or how it is defined.\n\n3. What is the purpose of the `NetworkState` interface and how is it used?\n- `NetworkState` is an interface that defines the shape of the state object for the `Network` slice of the Redux store. It includes a single property `gasPrice` of type `number`. The interface is used to define the type of the `initialState` object and the `state` parameter in the case reducer function.",
- "checksum": "a111b8127648e9e758d8dbad9e2230b0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/reducer.json b/.autodoc/docs/json/core/src/state/reducer.json
deleted file mode 100644
index e7c400ba0..000000000
--- a/.autodoc/docs/json/core/src/state/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/reducer.ts",
- "summary": "This code is a part of a larger project called \"zoo\" and it imports the `combineReducers` function from the `@reduxjs/toolkit` library. The purpose of this code is to combine all the reducers from different modules of the project into a single reducer that can be used by the Redux store.\n\nThe `combineReducers` function takes an object as an argument, where each key represents a slice of the state and the corresponding value is the reducer function that manages that slice of the state. In this code, the object passed to `combineReducers` contains all the reducers from different modules of the project. Each reducer is imported from a separate file and given a key that represents the slice of the state it manages.\n\nFor example, the `application` reducer manages the state related to the application, such as the current theme, language, and notifications. Similarly, the `user` reducer manages the state related to the user, such as the user's wallet address, balance, and transaction history. The `transactions` reducer manages the state related to the transactions, such as the pending and completed transactions. The `swap`, `mint`, `burn`, and `limitOrder` reducers manage the state related to the corresponding functionalities of the project.\n\nOnce all the reducers are combined using `combineReducers`, the resulting reducer is exported as the default export of this module. This combined reducer can then be used to create the Redux store for the project.\n\nFor example, in another module of the project, we can import this combined reducer and use it to create the Redux store as follows:\n\n```\nimport { createStore } from \"redux\";\nimport rootReducer from \"./path/to/rootReducer\";\n\nconst store = createStore(rootReducer);\n```\n\nIn summary, this code combines all the reducers from different modules of the \"zoo\" project into a single reducer that can be used to create the Redux store. This allows the project to manage its state in a structured and organized way, making it easier to maintain and scale.",
- "questions": "1. What is the purpose of this code?\n - This code is combining multiple reducers from different files into a single reducer using the `combineReducers` function from the `@reduxjs/toolkit` library.\n\n2. What are the different reducers being combined?\n - The different reducers being combined are `application`, `user`, `transactions`, `swap`, `mint`, `burn`, `multicall`, `network`, `lists`, `limitOrder`, `create`, `inari`, `zoo`, `store`, `voting`, `bridge`, and `drop`.\n\n3. What is the significance of the `zoo` reducer?\n - The `zoo` reducer is one of the reducers being combined and it is likely specific to this project. Without more context, it is unclear what its purpose is within the overall application.",
- "checksum": "b6525336aa4b074a882860f5e90c5808"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/stake/hook.json b/.autodoc/docs/json/core/src/state/stake/hook.json
deleted file mode 100644
index 863499d7c..000000000
--- a/.autodoc/docs/json/core/src/state/stake/hook.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hook.ts",
- "filePath": "core/src/state/stake/hook.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/stake/hook.ts",
- "summary": "This file contains two functions that are used to derive stake and unstake information based on typed input values. These functions are exported for use in other parts of the project. \n\nThe `useDerivedStakeInfo` function takes in three parameters: `typedValue`, `stakingToken`, and `userLiquidityUnstaked`. `typedValue` is a string representing the user's input value. `stakingToken` is a `Token` object representing the token being staked. `userLiquidityUnstaked` is a `CurrencyAmount` object representing the amount of unstaked liquidity the user has. \n\nThe function first uses the `tryParseAmount` function to parse the `typedValue` into a `CurrencyAmount` object. If the parsing is successful and the parsed amount is less than or equal to the user's unstaked liquidity, the parsed amount is returned. Otherwise, the function returns `undefined`. \n\nThe function also checks if the user is connected to a wallet and sets an error message accordingly. If the parsed amount is not valid, the error message is set to \"Enter an amount\". The function returns an object containing the parsed amount and error message. \n\nThe `useDerivedUnstakeInfo` function takes in two parameters: `typedValue` and `stakingAmount`. `typedValue` is a string representing the user's input value. `stakingAmount` is a `CurrencyAmount` object representing the amount of liquidity being staked. \n\nThe function first uses the `tryParseAmount` function to parse the `typedValue` into a `CurrencyAmount` object. If the parsing is successful and the parsed amount is less than or equal to the staked liquidity, the parsed amount is returned. Otherwise, the function returns `undefined`. \n\nThe function also checks if the user is connected to a wallet and sets an error message accordingly. If the parsed amount is not valid, the error message is set to \"Enter an amount\". The function returns an object containing the parsed amount and error message. \n\nThese functions are useful for validating user input and deriving stake and unstake information. They can be used in other parts of the project where stake and unstake functionality is required. For example, they could be used in a form where the user enters the amount they want to stake or unstake. The functions would validate the input and return the parsed amount or an error message.",
- "questions": "1. What is the purpose of this code?\n \n This code exports two functions, `useDerivedStakeInfo` and `useDerivedUnstakeInfo`, which are used to derive stake and unstake information respectively based on user input.\n\n2. What external dependencies does this code rely on?\n \n This code relies on several external dependencies, including `@zoolabs/zdk`, `@lingui/macro`, `../../functions`, and `../../hooks/useActiveWeb3React`.\n\n3. What is the expected input and output of the `useDerivedStakeInfo` and `useDerivedUnstakeInfo` functions?\n \n Both functions take a string `typedValue` as input, along with other optional parameters depending on the function. They return an object with two properties: `parsedAmount`, which is a `CurrencyAmountCurrent gas price: {gasPrice}
\n handleGasPriceChange(Number(e.target.value))} />\n\n handleTypeInput(Field.INPUT, e.target.value)} />\n \n \n \n handleSetRecipient(e.target.value)} />\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `SwapState` interface?\n- The `SwapState` interface defines the shape of the state object used in the `zoo` project's swap feature.\n\n2. What is the role of the `createReducer` function from `@reduxjs/toolkit`?\n- The `createReducer` function is used to create a Redux reducer function that handles state updates for the `SwapState` object.\n\n3. What is the significance of the `replaceSwapState` action?\n- The `replaceSwapState` action is used to replace the entire `SwapState` object with a new state object that is passed as the payload. This action is used to update the state when a user types in a new value, selects a new currency, or switches the input/output fields.",
- "checksum": "628ad3dc0eb8073bf3621edd28fd21ca"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/toasts/index.json b/.autodoc/docs/json/core/src/state/toasts/index.json
deleted file mode 100644
index 7e1050ca6..000000000
--- a/.autodoc/docs/json/core/src/state/toasts/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "core/src/state/toasts/index.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/toasts/index.ts",
- "summary": "This code defines a Redux slice for managing a stack of toast notifications. Toast notifications are small messages that appear on the screen to provide feedback to the user. The `ToastsState` type is defined in a separate file and specifies that the `data` property is an array of `Toast` objects. \n\nThe `createSlice` function from the `@reduxjs/toolkit` library is used to create the slice. It takes an object with several properties, including `name`, `initialState`, and `reducers`. The `name` property is a string that identifies the slice in the Redux store. The `initialState` property is an object that specifies the initial state of the slice. In this case, the `data` property is an empty array. The `reducers` property is an object that defines the actions that can be dispatched to modify the state of the slice.\n\nThe `push` reducer adds a new toast to the top of the stack. It takes a `Toast` object as its payload and adds it to the beginning of the `data` array. If a toast with the same `id` already exists in the stack, it is removed before the new toast is added. This ensures that there are no duplicate toasts in the stack.\n\nThe `remove` reducer removes a toast from the stack. It takes a string as its payload, which is the `id` of the toast to be removed. It finds the index of the toast with the matching `id` and removes it from the `data` array.\n\nThe `clear` reducer removes all toasts from the stack. It sets the `data` property to an empty array.\n\nThe `push`, `remove`, and `clear` actions are exported from the module and can be used to dispatch the corresponding reducers. The `default` export is the reducer function itself.\n\nThis code can be used in a larger project to manage toast notifications. Other parts of the application can dispatch the `push` action to add new toasts to the stack, the `remove` action to remove a specific toast, or the `clear` action to remove all toasts. The state of the toast stack can be accessed from the Redux store using the `toasts` slice name. For example, to get the current stack of toasts:\n\n```javascript\nimport { useSelector } from 'react-redux'\n\nconst toasts = useSelector((state) => state.toasts.data)\n```",
- "questions": "1. What is the purpose of the `ToastsState` type?\n - The `ToastsState` type is used to define the initial state of the `toastsSlice` slice, which contains an array of `Toast` objects.\n2. What is the role of the `push` reducer function?\n - The `push` reducer function is used to add a new `Toast` object to the beginning of the `data` array in the `toastsSlice` slice. If a `Toast` with the same `id` already exists in the array, it is removed before the new `Toast` is added.\n3. What is the relationship between the `toastsSlice` slice and the `clear`, `remove`, and `push` actions?\n - The `toastsSlice` slice is created using the `createSlice` function from the `@reduxjs/toolkit` library, and it defines the `clear`, `remove`, and `push` actions as reducers. These actions can be dispatched to modify the state of the `toastsSlice` slice.",
- "checksum": "e56486e21e865337aff038a0ade7c515"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/transactions/actions.json b/.autodoc/docs/json/core/src/state/transactions/actions.json
deleted file mode 100644
index 792d2ad86..000000000
--- a/.autodoc/docs/json/core/src/state/transactions/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/transactions/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/transactions/actions.ts",
- "summary": "This code defines a set of actions and interfaces related to transactions in the Zoo project. The `import` statements at the top of the file bring in the `ChainId` type from the `@zoolabs/zdk` library and the `createAction` function from the `@reduxjs/toolkit` library.\n\nThe `SerializableTransactionReceipt` interface defines the shape of a transaction receipt object that can be serialized and stored in the project's state. It includes properties such as the `to` and `from` addresses, the `transactionHash`, and the `blockNumber`.\n\nThe file then exports four different actions using the `createAction` function. Each action corresponds to a different type of transaction-related event that can occur in the project. \n\nThe `addTransaction` action is used to add a new transaction to the project's state. It takes an object as its payload that includes the `chainId`, `hash`, `from` address, and optional `approval`, `claim`, `summary`, and `archer` properties. These properties provide additional context about the transaction, such as the token being approved or the recipient of a claim.\n\nThe `clearAllTransactions` action is used to clear all transactions from the project's state for a given `chainId`.\n\nThe `finalizeTransaction` action is used to update the project's state with the final details of a transaction, such as the `receipt` object that includes information about the transaction's execution.\n\nThe `checkedTransaction` action is used to update the project's state with the latest block number for a given transaction.\n\nOverall, this code provides a set of actions and interfaces that can be used to manage transactions in the Zoo project. These actions can be dispatched from other parts of the project to update the state and trigger side effects, such as displaying transaction details to the user or triggering additional actions based on the outcome of a transaction. Here is an example of how the `addTransaction` action might be used:\n\n```\nimport { addTransaction } from 'zoo/transactions'\n\nconst transaction = {\n chainId: 1,\n hash: '0x123abc',\n from: '0x456def',\n approval: { tokenAddress: '0x789ghi', spender: '0xabcjkl' },\n summary: 'Approved tokens for spending'\n}\n\ndispatch(addTransaction(transaction))\n```",
- "questions": "1. What is the purpose of the `addTransaction` function?\n - The `addTransaction` function is a Redux action creator that adds a new transaction to the state with various properties such as chainId, hash, from, approval, claim, summary, and archer.\n\n2. What is the `SerializableTransactionReceipt` interface used for?\n - The `SerializableTransactionReceipt` interface defines the structure of a transaction receipt object that contains information such as the sender, recipient, contract address, transaction hash, block number, and status.\n\n3. What is the `checkedTransaction` function used for?\n - The `checkedTransaction` function is a Redux action creator that updates the block number of a transaction with the given hash on the specified chain.",
- "checksum": "d77b0a385b290203dc336f4c07bb83de"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/transactions/hooks.json b/.autodoc/docs/json/core/src/state/transactions/hooks.json
deleted file mode 100644
index eafca9766..000000000
--- a/.autodoc/docs/json/core/src/state/transactions/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.tsx",
- "filePath": "core/src/state/transactions/hooks.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/state/transactions/hooks.tsx",
- "summary": "This file contains several functions and hooks related to managing transactions in a decentralized application. \n\nThe `useTransactionAdder` function is a helper function that takes a transaction response from an ethers library and adds it to the list of transactions. It returns a function that can be called with the transaction response and optional custom data such as a summary, approval, claim, or archer. This function checks if there is an account and chainId available, and if so, dispatches an action to add the transaction to the store.\n\nThe `useAllTransactions` function returns all the transactions for the current chain. It uses the `useActiveWeb3React` hook to get the current chainId and the `useAppSelector` hook to get the transactions from the store. It returns an object with the transaction hash as the key and the transaction details as the value.\n\nThe `useIsTransactionPending` function takes a transaction hash and returns a boolean indicating whether the transaction is pending. It uses the `useAllTransactions` hook to get all the transactions and checks if the transaction hash exists and if there is no receipt for the transaction.\n\nThe `isTransactionRecent` function takes a transaction and returns a boolean indicating whether the transaction happened in the last day. It compares the current time to the time the transaction was added.\n\nThe `useHasPendingApproval` function takes a token address and spender and returns a boolean indicating whether there is a pending approval transaction for the token and spender. It uses the `useAllTransactions` hook to get all the transactions and filters them based on the token address, spender, and recency using the `isTransactionRecent` function.\n\nThe `useUserHasSubmittedClaim` function takes an account and returns an object with a boolean indicating whether the user has submitted a claim and the transaction details for the claim if it exists. It uses the `useAllTransactions` hook to get all the transactions and filters them based on the claim recipient and account.\n\nThe `useTransactionPopups` function returns an object with functions to add error, warning, and transaction popups. It uses the `useAddPopup` and `useTransactionAdder` hooks to add the popups and transactions. It also takes optional callbacks for when a transaction is pending or has a receipt. \n\nOverall, these functions and hooks provide a way to manage transactions in a decentralized application by adding, retrieving, and checking the status of transactions. They can be used in conjunction with other parts of the application to provide feedback to the user and manage state. For example, the `useHasPendingApproval` function can be used to disable a button until the approval transaction is confirmed.",
- "questions": "1. What is the purpose of the `useTransactionAdder` function?\n- The `useTransactionAdder` function is a helper function that takes a transaction response and adds it to the list of transactions.\n2. What does the `useHasPendingApproval` function do?\n- The `useHasPendingApproval` function returns whether a token has a pending approval transaction.\n3. What is the purpose of the `useTransactionPopups` function?\n- The `useTransactionPopups` function is used to add error, warning, and transaction popups to the UI. It takes in optional callbacks for handling pending transactions and transaction receipts.",
- "checksum": "f977f5e0f56e4148a56d0b0596d7057e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/transactions/reducer.json b/.autodoc/docs/json/core/src/state/transactions/reducer.json
deleted file mode 100644
index 6e3553cbd..000000000
--- a/.autodoc/docs/json/core/src/state/transactions/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/transactions/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/transactions/reducer.ts",
- "summary": "This code defines a Redux reducer for managing transaction details in a multi-chain environment. The `TransactionDetails` interface defines the shape of a transaction object, which includes various details such as the transaction hash, approval information, summary, claim recipient, receipt, and timestamps. The `TransactionState` interface defines the shape of the state object, which is a nested object with chain IDs as keys and transaction hashes as sub-keys, with each value being a `TransactionDetails` object.\n\nThe reducer defines four cases using the `createReducer` function from the `@reduxjs/toolkit` package. The `addTransaction` case adds a new transaction to the state object, given the chain ID, sender address, transaction hash, approval information, summary, claim recipient, and Archer details. If the transaction already exists in the state object, an error is thrown. The `clearAllTransactions` case clears all transactions for a given chain ID. The `checkedTransaction` case updates the last checked block number for a given transaction hash and chain ID. The `finalizeTransaction` case updates the transaction receipt and confirmed time for a given transaction hash and chain ID.\n\nThis reducer can be used in a larger project that involves managing transactions across multiple chains, such as a decentralized exchange or a wallet application. For example, when a user initiates a transaction, the `addTransaction` case can be called to add the transaction details to the state object. As the transaction is processed and confirmed, the `checkedTransaction` and `finalizeTransaction` cases can be called to update the transaction details. The `clearAllTransactions` case can be used to clear all transactions for a given chain ID when the user switches to a different network. \n\nExample usage:\n\n```\nimport { addTransaction } from './actions'\nimport transactionReducer from './transactionReducer'\n\nconst store = configureStore({\n reducer: {\n transactions: transactionReducer,\n },\n})\n\nconst chainId = 1\nconst from = '0x123abc'\nconst hash = '0x456def'\nconst approval = { tokenAddress: '0x789ghi', spender: '0xabcjkl' }\nconst summary = 'Transaction summary'\nconst claim = { recipient: '0xdefmno' }\nconst archer = { deadline: 123456789, rawTransaction: '0x123abc', nonce: 1, ethTip: '0.1' }\n\nstore.dispatch(addTransaction({ chainId, from, hash, approval, summary, claim, archer }))\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a Redux reducer for managing transaction details, including adding, checking, and finalizing transactions.\n\n2. What is the `TransactionDetails` interface used for?\n- The `TransactionDetails` interface defines the shape of an object that stores details about a transaction, including its hash, approval, summary, claim, receipt, and other metadata.\n\n3. What is the `archer` property in the `TransactionDetails` interface?\n- The `archer` property is an optional object that stores additional details about a transaction that was submitted via Archer, including the deadline, raw transaction data, nonce, and ETH tip.",
- "checksum": "7444a2fff93812c355cc311619b8c40a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/transactions/updater.json b/.autodoc/docs/json/core/src/state/transactions/updater.json
deleted file mode 100644
index 5036d4038..000000000
--- a/.autodoc/docs/json/core/src/state/transactions/updater.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "updater.tsx",
- "filePath": "core/src/state/transactions/updater.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/state/transactions/updater.tsx",
- "summary": "The `Updater` function in the `zoo` project is responsible for updating the state of transactions in the application. It does this by checking the status of transactions that have been submitted to the blockchain and updating the application state accordingly. \n\nThe `Updater` function imports several functions and hooks from other files in the project. These include `AppDispatch` and `AppState` from the `index` file, `RetryOptions`, `RetryableError`, and `retry` from the `retry` file, `checkedTransaction` and `finalizeTransaction` from the `actions` file, and `useAddPopup` and `useBlockNumber` from the `hooks` file. \n\nThe `Updater` function also imports `useCallback`, `useEffect`, and `useMemo` from the `react` library, and `ChainId` and `updateBlockNumber` from the `zdk` library. \n\nThe `Updater` function defines an interface called `TxInterface` that describes the properties of a transaction object. The `shouldCheck` function takes a `lastBlockNumber` and a `tx` object as arguments and returns a boolean value indicating whether the transaction should be checked. \n\nThe `Updater` function defines two constants: `RETRY_OPTIONS_BY_CHAIN_ID` and `DEFAULT_RETRY_OPTIONS`. These constants are used to set the retry options for fetching transaction receipts. \n\nThe `Updater` function then defines a component that returns `null`. This component uses several hooks to get the current state of the application, including `useActiveWeb3React`, `useBlockNumber`, `useAppDispatch`, and `useAppSelector`. \n\nThe `Updater` function also defines a `getReceipt` function that takes a transaction hash as an argument and returns a promise that resolves to the transaction receipt. This function uses the `retry` function to retry fetching the receipt if it is not available. \n\nThe `Updater` function uses the `useEffect` hook to check the status of transactions and update the application state accordingly. This hook runs whenever the `chainId`, `library`, `transactions`, `lastBlockNumber`, `dispatch`, `addPopup`, or `getReceipt` values change. \n\nOverall, the `Updater` function is an important part of the `zoo` project that ensures that the application state is updated with the latest information about transactions submitted to the blockchain.",
- "questions": "1. What is the purpose of the `shouldCheck` function?\n- The `shouldCheck` function determines whether a transaction should be checked for updates based on its current state and how long it has been pending.\n\n2. What is the significance of the `RETRY_OPTIONS_BY_CHAIN_ID` and `DEFAULT_RETRY_OPTIONS` constants?\n- These constants define the retry options for fetching transaction receipts based on the current chain ID. If the chain ID is not recognized, the default options are used.\n\n3. What is the purpose of the `Updater` component?\n- The `Updater` component is responsible for periodically checking the status of pending transactions and updating the state of the application accordingly. It also handles fetching transaction receipts and displaying popups on confirmation.",
- "checksum": "b529a1889d86f69942ba325a8b57b06e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/user/actions.json b/.autodoc/docs/json/core/src/state/user/actions.json
deleted file mode 100644
index f3143eb18..000000000
--- a/.autodoc/docs/json/core/src/state/user/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.ts",
- "filePath": "core/src/state/user/actions.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/user/actions.ts",
- "summary": "This code defines a set of actions that can be dispatched in a Redux store for the purpose of updating user preferences and settings related to a trading application. The actions are defined using the `createAction` function from the `@reduxjs/toolkit` library, which simplifies the process of creating Redux actions and reducers.\n\nThe actions include updating the user's preferences for dark mode, animation mode, expert mode, and single-hop only mode. They also include updating the user's slippage tolerance and deadline for trades, as well as adding and removing serialized tokens and pairs. Additionally, there are actions for toggling a URL warning and updating various settings related to the use of the Archer trading protocol.\n\nThese actions can be dispatched by components in the application to update the state of the Redux store, which can then be used to render the UI and make decisions about how to handle user interactions. For example, a component that displays the user's current slippage tolerance could subscribe to changes in the `userSlippageTolerance` state and update its display accordingly.\n\nHere is an example of how one of these actions might be dispatched:\n\n```\nimport { updateUserDarkMode } from 'zoo'\n\ndispatch(updateUserDarkMode({ userDarkMode: true }))\n```\n\nThis would dispatch the `updateUserDarkMode` action with a payload indicating that the user has enabled dark mode. The Redux store would then update its state accordingly, and any components that are subscribed to changes in the `userDarkMode` state would be re-rendered with the new value.",
- "questions": "1. What is the purpose of the `SerializedToken` and `SerializedPair` interfaces?\n - The `SerializedToken` and `SerializedPair` interfaces define the structure of objects used to represent tokens and pairs in a serialized format.\n2. What is the significance of the `createAction` function being imported from `@reduxjs/toolkit`?\n - The `createAction` function is a utility provided by the `@reduxjs/toolkit` package for creating Redux actions with a standardized format and payload structure.\n3. What is the purpose of the various `updateUser` and `updateArcher` actions?\n - The `updateUser` actions are used to update various user preferences and settings, while the `updateArcher` actions are specifically related to settings for using the Archer swap service.",
- "checksum": "dd74f3fec0f1976e70daba0603067f54"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/user/reducer.json b/.autodoc/docs/json/core/src/state/user/reducer.json
deleted file mode 100644
index c97d0f4da..000000000
--- a/.autodoc/docs/json/core/src/state/user/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.ts",
- "filePath": "core/src/state/user/reducer.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/user/reducer.ts",
- "summary": "This code defines the Redux store for the user state in the Zoo project. The user state contains information about the user's preferences and settings, such as their choice for dark or light mode, animation mode, expert mode, and slippage tolerance. It also contains information about the tokens and pairs that the user has interacted with, as well as settings related to the Archer network, which is used for faster and more reliable trades.\n\nThe code defines an initial state for the user state, which includes default values for all the fields. It also defines a set of actions that can be dispatched to update the user state. These actions include updating the user's dark mode preference, animation mode, expert mode, slippage tolerance, and deadline for trades. They also include adding and removing serialized tokens and pairs, toggling the URL warning, and updating the Archer network settings.\n\nThe code uses the `createReducer` function from the `@reduxjs/toolkit` library to create a reducer function that handles all the defined actions. The reducer function updates the user state based on the dispatched action and returns the updated state.\n\nOverall, this code provides a central store for all the user-related information in the Zoo project and allows for easy updating of this information through dispatched actions. It can be used in conjunction with other parts of the project to provide a personalized and customizable experience for users. \n\nExample usage:\n\n```javascript\nimport { useDispatch, useSelector } from 'react-redux';\nimport { updateUserDarkMode } from './actions';\n\nfunction App() {\n const dispatch = useDispatch();\n const userDarkMode = useSelector(state => state.user.userDarkMode);\n\n const toggleDarkMode = () => {\n dispatch(updateUserDarkMode(!userDarkMode));\n }\n\n return (\n \n \n
\n );\n}\n```\n\nIn this example, the `useSelector` hook is used to access the `userDarkMode` field from the user state in the Redux store. The `updateUserDarkMode` action is dispatched when the user clicks the \"Toggle Dark Mode\" button, which updates the `userDarkMode` field in the user state. The `className` of the `div` element is set based on the `userDarkMode` field, which allows for easy theming of the app based on the user's preference.",
- "questions": "1. What is the purpose of the `zoo` project and how does this file fit into the overall project?\n- This code file is a reducer for the `UserState` slice of the Redux store in the `zoo` project. The purpose of the `zoo` project is not specified in the code provided.\n\n2. What actions can trigger updates to the `UserState` slice of the Redux store?\n- Updates to the `UserState` slice can be triggered by actions such as `updateUserDarkMode`, `updateUserAnimationMode`, `updateMatchesDarkMode`, `updateUserExpertMode`, `updateUserSlippageTolerance`, `updateUserDeadline`, `updateUserSingleHopOnly`, `addSerializedToken`, `removeSerializedToken`, `addSerializedPair`, `removeSerializedPair`, `toggleURLWarning`, `updateUserArcherUseRelay`, `updateUserArcherGasPrice`, `updateUserArcherETHTip`, `updateUserArcherGasEstimate`, and `updateUserArcherTipManualOverride`.\n\n3. What is the purpose of the `createReducer` function and how is it used in this code file?\n- The `createReducer` function is used to create a Redux reducer function that handles updates to the `UserState` slice of the Redux store. It takes an initial state object and a builder function that defines how the state should be updated in response to different actions. The builder function uses methods like `addCase` to define how the state should be updated for each action.",
- "checksum": "deeda4f88b039f96449193ce2296b925"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/user/updater.json b/.autodoc/docs/json/core/src/state/user/updater.json
deleted file mode 100644
index d09ae0d8b..000000000
--- a/.autodoc/docs/json/core/src/state/user/updater.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "updater.tsx",
- "filePath": "core/src/state/user/updater.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/state/user/updater.tsx",
- "summary": "The code above is a React component that updates the dark mode of the application based on the system's preference. The component is called Updater and it imports the AppDispatch and updateMatchesDarkMode from the actions file. It also imports the useDispatch and useEffect hooks from the react-redux and react libraries respectively.\n\nThe Updater component uses the useEffect hook to keep the dark mode of the application in sync with the system. The useEffect hook takes a function as its first argument and an array of dependencies as its second argument. The function passed to useEffect is executed after the component is mounted and every time the dependencies change. In this case, the only dependency is the dispatch function.\n\nThe function passed to useEffect sets up an event listener for changes in the system's preference for dark mode. It first creates a darkHandler function that takes a MediaQueryListEvent as its argument. The darkHandler function dispatches an action to update the matchesDarkMode property in the store with the value of the match.matches property.\n\nThe function then creates a match variable that uses the window.matchMedia method to check if the system prefers dark mode. The value of match.matches is then dispatched to the store using the updateMatchesDarkMode action.\n\nThe function then checks if the match variable has an addListener method and adds the darkHandler function as a listener if it does. If not, it checks if the match variable has an addEventListener method and adds the darkHandler function as a listener if it does.\n\nFinally, the function returns a cleanup function that removes the event listener when the component is unmounted. The cleanup function checks if the match variable has a removeListener method and removes the darkHandler function as a listener if it does. If not, it checks if the match variable has a removeEventListener method and removes the darkHandler function as a listener if it does.\n\nOverall, the Updater component is a useful tool for keeping the dark mode of the application in sync with the system's preference. It can be used in the larger project to ensure that the application's dark mode is always up to date with the user's system settings. An example of how to use the Updater component in a larger project is shown below:\n\n```jsx\nimport React from 'react';\nimport Updater from './Updater';\n\nfunction App() {\n return (\n Welcome to the Zoo!
\n\n
\n );\n}\n\nexport default App;\n```",
- "questions": "1. What is the purpose of this code?\n- This code is responsible for keeping the dark mode of the application in sync with the system's dark mode.\n\n2. What dependencies are being used in this code?\n- This code is using the `react-redux` and `react` dependencies.\n\n3. What is the significance of the `AppDispatch` type and how is it being used?\n- The `AppDispatch` type is being used to define the type of the `dispatch` function being used in this code. It ensures that the dispatched actions are properly typed and avoids potential errors.",
- "checksum": "1460e91bd3cc8498bb5f4ba97c90a002"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/voting/actions.json b/.autodoc/docs/json/core/src/state/voting/actions.json
deleted file mode 100644
index 8185cba5e..000000000
--- a/.autodoc/docs/json/core/src/state/voting/actions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "actions.tsx",
- "filePath": "core/src/state/voting/actions.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/state/voting/actions.tsx",
- "summary": "This code is a module that exports several Redux actions related to a voting feature in the larger project. The `createAction` function is imported from the `@reduxjs/toolkit` library and is used to create action objects with a specific type string. \n\nThe `loading` action is used to indicate that the voting feature is currently loading. The `addProposals` action is used to add new proposals to the list of available proposals for voting. The `getAllProposals` action is used to retrieve all available proposals for voting. The `voteProposal` action is used to submit a vote for a specific proposal. The `getVotingPower` action is used to retrieve the voting power of a user. The `getVoterAllowance` action is used to retrieve the number of votes a user is allowed to cast.\n\nThese actions can be used in conjunction with a Redux store to manage the state of the voting feature. For example, when the `loading` action is dispatched, the UI can display a loading spinner until the feature is ready. When the `addProposals` action is dispatched, the UI can update to show the new proposals. When the `voteProposal` action is dispatched, the UI can update to show the user's vote and the updated vote count for the proposal.\n\nHere is an example of how these actions can be used in a Redux store:\n\n```\nimport { createSlice } from \"@reduxjs/toolkit\";\nimport * as votingActions from \"./votingActions\";\n\nconst initialState = {\n loading: false,\n proposals: [],\n votingPower: 0,\n voterAllowance: 0,\n};\n\nconst votingSlice = createSlice({\n name: \"voting\",\n initialState,\n reducers: {},\n extraReducers: (builder) => {\n builder\n .addCase(votingActions.loading, (state) => {\n state.loading = true;\n })\n .addCase(votingActions.addProposals, (state, action) => {\n state.proposals = action.payload;\n })\n .addCase(votingActions.getVotingPower, (state, action) => {\n state.votingPower = action.payload;\n })\n .addCase(votingActions.getVoterAllowance, (state, action) => {\n state.voterAllowance = action.payload;\n });\n },\n});\n\nexport default votingSlice.reducer;\n```\n\nIn this example, the `loading`, `addProposals`, `getVotingPower`, and `getVoterAllowance` actions are used to update the state of the voting feature in the Redux store. The `extraReducers` property of the `createSlice` function is used to define how the state should be updated when these actions are dispatched.",
- "questions": "1. What library is being used for creating actions in this code?\n- The code is using the \"@reduxjs/toolkit\" library for creating actions.\n\n2. What is the purpose of each action being created in this code?\n- The actions being created are for loading, adding proposals, getting all proposals, voting on a proposal, getting voting power, and getting voter allowance in a voting system.\n\n3. What type of data is expected to be passed as an argument to the \"addProposals\", \"getAllProposals\", \"voteProposal\", \"getVotingPower\", and \"getVoterAllowance\" actions?\n- The type of data expected to be passed as an argument to these actions is \"any\", meaning any type of data can be passed.",
- "checksum": "5f46347209f14aa2ea107653fee75a97"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/voting/hooks.json b/.autodoc/docs/json/core/src/state/voting/hooks.json
deleted file mode 100644
index bf5a7eed6..000000000
--- a/.autodoc/docs/json/core/src/state/voting/hooks.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hooks.ts",
- "filePath": "core/src/state/voting/hooks.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/state/voting/hooks.ts",
- "summary": "The code is a module that exports three React hooks: `useCreateProposals`, `useHandleVoteProposal`, and `useGetVotingAmount`. These hooks are used to create, vote on, and retrieve voting amounts for proposals respectively. \n\nThe `useCreateProposals` hook is used to create a new proposal. It takes in a `Proposal` object, a callback function, and a success callback function. The `Proposal` object contains the details of the proposal such as the title, description, start and end dates, and choices. The hook then validates the input data and signs the proposal using the user's account and library. It then sends the signed proposal to the IPFS network using the `pinJSONToIPFS` function. If the proposal is successfully added to IPFS, it is then added to the state using the `addProposal` function. \n\nThe `useHandleVoteProposal` hook is used to vote on a proposal. It takes in a `Proposal` object, a vote choice, and an optional success callback function. The hook validates the user's account and vote choice, and then checks if the user has already voted on the proposal. If the user has not voted, it checks if the user has approved the contract to spend their tokens using the `useVotingApproveCallback` hook. If the user has not approved the contract, it prompts the user to approve it. Finally, it calls the `voteProposal` function to submit the vote to the contract.\n\nThe `useGetVotingAmount` hook is used to retrieve the number of approved and disapproved votes for a proposal. It takes in the user's address and the proposal ID, and then calls the `votingAmount` function on the contract to retrieve the voting amounts. It then returns an object containing the number of approved and disapproved votes.\n\nOverall, these hooks are used to manage the creation and voting on proposals in the larger project. They provide an easy-to-use interface for interacting with the contract and IPFS network. Below is an example of how the `useCreateProposals` hook can be used in a React component:\n\n```\nimport { useCreateProposals } from 'zoo';\n\nfunction CreateProposalForm() {\n const createProposal = useCreateProposals();\n\n const handleSubmit = (data) => {\n createProposal(data, () => {\n console.log('Creating proposal...');\n }, () => {\n console.log('Proposal created successfully!');\n });\n };\n\n return (\n \n );\n}\n```",
- "questions": "1. What is the purpose of the `useCreateProposals` function?\n- The `useCreateProposals` function is used to create a new proposal by sending a JSON payload to IPFS and adding the proposal to the state using the `addProposal` hook.\n\n2. What is the purpose of the `pinJSONToIPFS` function?\n- The `pinJSONToIPFS` function is used to send a JSON payload to the Pinata API and return the IPFS hash of the pinned content.\n\n3. What is the purpose of the `useHandleVoteProposal` function?\n- The `useHandleVoteProposal` function is used to handle the voting process for a proposal by calling the `voteProposal` hook and passing in the proposal IPFS hash and the user's vote choice. It also handles the approval process by calling the `approve` function if the user has not yet approved the contract.",
- "checksum": "c416aa7a8b05ad214d35428a4c4742f2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/state/voting/reducer.json b/.autodoc/docs/json/core/src/state/voting/reducer.json
deleted file mode 100644
index 48228843f..000000000
--- a/.autodoc/docs/json/core/src/state/voting/reducer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "reducer.tsx",
- "filePath": "core/src/state/voting/reducer.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/state/voting/reducer.tsx",
- "summary": "This code defines a Redux reducer for managing the state related to voting on proposals in a decentralized application (dApp). The reducer handles actions related to loading, adding, and voting on proposals, as well as getting the user's voting power and voter allowance. \n\nThe `VotingState` interface defines the shape of the state object, which includes a boolean `loading` flag, an array of `proposals`, and the user's `votingPower` and `voterAllowance`. The `initialState` object sets the initial values for these properties.\n\nThe `createReducer` function from the `@reduxjs/toolkit` library is used to create the reducer function. It takes the `initialState` object and a callback function that defines how the state should be updated in response to different actions. \n\nThe `builder` object passed to the callback function is used to define the different cases for updating the state. Each case corresponds to a specific action, and the `addCase` method is used to define the action and the state update that should occur. For example, the `loading` action sets the `loading` property of the state to the value of the `payload` property of the action.\n\nThe `Web3` library is used to convert the user's voting power from wei to ether in the `getVotingPower` case. The `console.log` statement in the `getVoterAllowance` case is likely for debugging purposes and can be removed in production code.\n\nThis reducer can be used in conjunction with other reducers and middleware to manage the overall state of the dApp. For example, it could be combined with a reducer for managing user authentication and a middleware for interacting with a blockchain network. \n\nHere is an example of how this reducer could be used in a React component:\n\n```\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { getAllProposals } from \"./actions\";\nimport { RootState } from \"./store\";\nimport { VotingState } from \"./reducer\";\n\nfunction ProposalList() {\n const dispatch = useDispatch();\n const proposals = useSelectorWelcome to my app
\n- \n {proposals.map((proposal) => (\n
- {proposal.title} \n ))}\n
\n This component uses the primary color from the theme.\n
\n );\n};\n```",
- "questions": "1. What types of components are being imported in the commented out lines at the top of the file?\n- The commented out lines are importing types for Alert, Card, Radio, Toggle, Tooltip, Nav, and Modal components.\n\n2. What is the purpose of the `Theme` interface?\n- The `Theme` interface defines the structure of the theme object, which includes properties for site width, color scheme, breakpoints, spacing, shadows, radii, and z-indices.\n\n3. What are the `dark` and `light` exports, and what do they do?\n- The `dark` and `light` exports are default exports of objects that define the color scheme for the dark and light themes. They are likely used to set the `isDark` property in the `Theme` interface. Additionally, the `lightColors` and `darkColors` exports provide the color values used in the themes.",
- "checksum": "a6deb1756d38f84ee1219f91a113e60c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/theme/light.json b/.autodoc/docs/json/core/src/theme/light.json
deleted file mode 100644
index 768e15b5b..000000000
--- a/.autodoc/docs/json/core/src/theme/light.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "light.ts",
- "filePath": "core/src/theme/light.ts",
- "url": "zoo-labs/zoo/blob/master/core/src/theme/light.ts",
- "summary": "This code defines a light theme for the zoo project using the styled-components library. The DefaultTheme interface from styled-components is imported and used to define the type of the lightTheme object. The lightTheme object is created by spreading the properties of the base object defined in another file and adding additional properties specific to the light theme.\n\nThe lightTheme object has the following properties:\n- isDark: a boolean value set to false to indicate that this is a light theme\n- colors: an object containing color values specific to the light theme, imported from another file\n- alert, card, toggle, nav, modal, radio, and tooltip: commented out properties that could be added to the lightTheme object to customize the styling of specific components in the zoo project.\n\nThis code can be used to provide a consistent look and feel to the zoo project by defining a theme that can be easily applied to all components. For example, a component can be styled using the light theme by wrapping it in a ThemeProvider component from styled-components and passing the lightTheme object as a prop:\n\n```\nimport React from 'react'\nimport { ThemeProvider } from 'styled-components'\nimport lightTheme from './path/to/lightTheme'\n\nconst MyComponent = () => {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `Account` component?\n- The `Account` component is used to display an Ethereum account address and its associated ENS name (if available), along with optional label text.\n\n2. What external libraries or components are being used in this code?\n- The code imports several components and functions from external libraries, including `React`, `next/image`, `react-feather`, and `@lingui/react`. It also imports two custom components, `Copy` and `ExternalLink`, from the `../components/AccountDetails` directory, and uses a custom hook `useENSName` from `../hooks/useENSName`.\n\n3. What is the purpose of the `useActiveWeb3React` hook?\n- The `useActiveWeb3React` hook is used to retrieve the current Ethereum chain ID, active account address, and wallet connector from the user's web3 provider. These values are used to construct links to blockchain explorers and to determine the current user's account address.",
- "checksum": "64e637ba3ac4ab0f06587496e845e8a9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/AskItem.json b/.autodoc/docs/json/core/src/zoo/AskItem.json
deleted file mode 100644
index 9ed662933..000000000
--- a/.autodoc/docs/json/core/src/zoo/AskItem.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AskItem.tsx",
- "filePath": "core/src/zoo/AskItem.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/AskItem.tsx",
- "summary": "The `AskItem` component is a React component that renders an item in a list of asks. An ask is a request to sell a digital asset, such as an NFT (non-fungible token), for a certain amount of cryptocurrency. The component takes in an `ask` object as a prop, which contains information about the ask, such as the amount of cryptocurrency being asked for, the currency being used, and the owner of the asset being sold. \n\nThe component renders the information about the ask in a grid format, with the left column displaying information about the asset being sold and the right column displaying information about the price being asked. The left column displays the name of the asset being sold, as well as a small icon representing the asset. The right column displays the amount of cryptocurrency being asked for, as well as the symbol of the currency being used. \n\nThe component also has several optional props that can be passed in. The `showToken` prop determines whether or not to display the token ID of the asset being sold. The `summary` prop is a string that can be used to provide additional information about the owner of the asset being sold. The `onClick` prop is a function that is called when the user clicks on the \"eye\" icon in the right column, and is typically used to display more information about the ask. \n\nThe component uses several other functions and hooks to retrieve and format the data needed to display the ask. For example, it uses the `useActiveWeb3React` hook to retrieve the current Ethereum chain ID and the user's account address. It also uses the `getContent` function to retrieve the name and type of the asset being sold from its content URI. Finally, it uses the `usePrice` hook to retrieve the current USD value of the cryptocurrency being used in the ask. \n\nOverall, the `AskItem` component is a small but important part of a larger project that allows users to buy and sell digital assets using cryptocurrency. It provides a clear and concise way to display information about an ask, and can be easily customized to fit the needs of different users and use cases.",
- "questions": "1. What is the purpose of the `AskItem` component?\n- The `AskItem` component is used to display information about an \"ask\" object, including the owner, amount, and currency.\n\n2. What external libraries are being used in this file?\n- The file is importing several external libraries, including `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, and `react-timeago`.\n\n3. What is the purpose of the `getUsdAmount` function in the `AskProps` type?\n- The `getUsdAmount` function is an optional prop that can be passed to the `AskItem` component to calculate the USD value of the ask based on the token address and amount.",
- "checksum": "59f45719ea33d4bdb4067204cf8f5ca9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/AskList.json b/.autodoc/docs/json/core/src/zoo/AskList.json
deleted file mode 100644
index 54d81dcfa..000000000
--- a/.autodoc/docs/json/core/src/zoo/AskList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AskList.tsx",
- "filePath": "core/src/zoo/AskList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/AskList.tsx",
- "summary": "The code defines a React component called `AskList` that queries a GraphQL API for a list of \"asks\" and renders them as a list of `AskItem` components. An \"ask\" is a request to sell a digital asset (e.g. an NFT) for a certain amount of currency. \n\nThe `AskList` component takes several props: `where` is an object that can contain filters for the query (e.g. to only show asks for a certain media or owner), `empty` is an optional JSX element to render if there are no asks, and `showToken` is a boolean flag to determine whether to show the token symbol for the currency in addition to the amount.\n\nThe component uses the `useQuery` hook from the `@apollo/client` library to fetch data from the GraphQL API. The query is defined using the `gql` template literal tag and fetches the `id`, `amount`, `createdAtTimestamp`, `currency`, `owner`, and `media` fields for each ask. The `where` object is passed as a variable to the query, with optional filters for `media` and `owner` fields.\n\nThe `usePrice` hook from a `state` module is used to get a function `getUsdAmount` that converts an amount of currency to its equivalent in USD. The `router` hook from the `next/router` module is used to navigate to a new page when an `AskItem` is clicked.\n\nThe `loading`, `error`, and `data` variables returned by `useQuery` are destructured and used to conditionally render the list of `AskItem` components. If there are no asks, the `empty` prop is rendered (or a default message if `empty` is not provided). If there are asks, each one is mapped to an `AskItem` component with the `getUsdAmount` and `onClick` props passed in.\n\nThis component can be used in a larger project to display a list of asks for a particular digital asset marketplace. It can be customized with filters and styling to fit the specific needs of the project. Here is an example usage of the `AskList` component:\n\n```jsx\n\n
\n );\n};\n```\n\nIn this example, the `AssetList` component is used to display a grid of assets owned by a specific user. The `where` prop is used to filter the assets by owner, and the `orderBy` prop is used to sort the assets by creation date in descending order. The `perPage` prop is set to 12, which means that each page will display 12 assets. The `cols` prop is set to 4, which means that each row will display 4 assets. The `showPageNumbers` prop is set to `false`, which means that the page numbers will not be displayed.",
- "questions": "1. What is the purpose of the `AssetList` component?\n- The `AssetList` component is used to display a list of assets with pagination and filtering options.\n\n2. What external libraries are being used in this code?\n- The code is using several external libraries including React, react-morphing-modal, next/link, lodash, @apollo/client, and ethers.\n\n3. What is the purpose of the `useContract` and `useTokenTypes` hooks?\n- It is unclear from this code what the `useContract` and `useTokenTypes` hooks are doing, as they are not used in this file. It is possible that they are custom hooks defined elsewhere in the project.",
- "checksum": "4720999717505003e8e47d95cd46a7d8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/AssetListLegacy.json b/.autodoc/docs/json/core/src/zoo/AssetListLegacy.json
deleted file mode 100644
index 2a1656d0f..000000000
--- a/.autodoc/docs/json/core/src/zoo/AssetListLegacy.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AssetListLegacy.tsx",
- "filePath": "core/src/zoo/AssetListLegacy.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/AssetListLegacy.tsx",
- "summary": "The `AssetList` component is a React component that renders a paginated list of assets. It receives several props, including `tokenType`, `tokenName`, `autoPlay`, `animate`, `large`, `getTriggerProps`, and `onLoadAssets`. \n\nThe component uses the `useContract` hook to get a reference to a smart contract called `Drop`. It then uses the `useEffect` hook to fetch the `firstTokenId` and `totalMinted` values from the contract. Once these values are fetched, the component uses the `getPaginatedAssets` function to calculate the paginated assets to display. The `getPaginatedAssets` function takes in several parameters, including `type`, `firstTokenId`, `totalMinted`, `page`, and `perPage`. It returns an object that contains information about the paginated assets, including the `start` and `end` indices, the `endTokenId`, the `totalPages`, and an array of `assets`.\n\nThe `AssetList` component renders a list of `Asset` components, passing in the appropriate props. It also renders pagination controls that allow the user to navigate between pages of assets. The `previousPage` and `nextPage` functions are used to update the `page` state when the user clicks on the pagination controls.\n\nOverall, the `AssetList` component is a reusable component that can be used to display a paginated list of assets in a React application. It is designed to work with a specific smart contract (`Drop`), but could be adapted to work with other contracts as well. Here is an example of how the `AssetList` component might be used in a larger React application:\n\n```jsx\nimport React, { useState } from 'react'\nimport AssetList from './AssetList'\n\nconst App = () => {\n const [assets, setAssets] = useState([])\n\n const handleLoadAssets = (newAssets) => {\n setAssets(newAssets)\n }\n\n return (\n \n
\n )\n}\n\nexport default App\n``` \n\nIn this example, the `AssetList` component is used to display a paginated list of NFT assets. When the assets are loaded, the `handleLoadAssets` function is called, which updates the `assets` state. The `assets` state is then used to render a list of asset names.",
- "questions": "1. What is the purpose of the `useContract` hook from the `../hooks` module?\n- A smart developer might ask what the `useContract` hook does and what it is used for. This hook is likely used to interact with a smart contract on the blockchain.\n\n2. What is the significance of the `getPaginatedAssets` function?\n- A smart developer might ask what the `getPaginatedAssets` function does and why it is important. This function is used to retrieve a paginated list of assets based on certain parameters such as the type of asset, the first token ID, and the total number of minted assets.\n\n3. What is the purpose of the `AssetList` component and what are its required props?\n- A smart developer might ask what the `AssetList` component does and what props it requires. This component is used to display a list of assets and requires props such as `tokenType`, `tokenName`, and `onLoadAssets` to function properly.",
- "checksum": "6cd8eb4a15dcca8787c135797d3fa5ca"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/AssetModal.json b/.autodoc/docs/json/core/src/zoo/AssetModal.json
deleted file mode 100644
index 5e9816715..000000000
--- a/.autodoc/docs/json/core/src/zoo/AssetModal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AssetModal.tsx",
- "filePath": "core/src/zoo/AssetModal.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/AssetModal.tsx",
- "summary": "The `AssetModal` component is a React component that renders a modal window displaying information about a specific asset. It imports several other components and libraries, including `useRouter` from the Next.js framework, `Modal` from the `react-morphing-modal` library, and several custom components related to bidding and asset ownership.\n\nThe `AssetModal` component takes in a `props` object, which includes a `modalProps` object that is passed to the `Modal` component. The `Modal` component is used to display the asset information in a modal window, and the `modalProps` object is used to configure the modal's appearance and behavior.\n\nThe `AssetModal` component also uses the `useAsset` hook to retrieve information about the asset being displayed. This hook takes in a `tokenId` parameter, which is obtained from the `router.query` object using the `useRouter` hook. The `useAsset` hook returns an object containing various properties related to the asset, such as its current ask price, highest bid, and content URI.\n\nThe `AssetModal` component also includes several other custom components related to bidding and asset ownership, such as `SetBid`, `SetAsk`, `BidList`, and `BidModal`. These components are conditionally rendered based on whether the current user is the owner of the asset or not, and whether certain sections of the modal are currently being displayed or not.\n\nOverall, the `AssetModal` component is a key part of the larger project's user interface, allowing users to view detailed information about specific assets and interact with them through bidding and ownership-related actions. Here is an example of how the `AssetModal` component might be used in the larger project:\n\n```jsx\nimport AssetModal from \"./components/AssetModal\";\n\nfunction App() {\n return (\n \n );\n}\n```\n\nIn this example, the `AssetModal` component is rendered at the bottom of the page, and is used to display detailed information about a specific asset when the user clicks on a link to that asset. The `AssetModal` component is passed any necessary props, such as the `tokenId` of the asset to display, and handles the rest of the logic for displaying the modal window and related components.",
- "questions": "1. What is the purpose of the `useRouter` hook and how is it used in this code?\n- The `useRouter` hook is used to access the Next.js router object and retrieve the `tokenId` parameter from the query string. It is used to set the `tokenId` state variable and open the modal for the corresponding asset.\n\n2. What is the purpose of the `show` state variable and how is it used in this code?\n- The `show` state variable is an object that keeps track of which sections of the modal should be displayed. It is used to conditionally render the `SetAsk`, `HowOffline`, `HowReservations`, and `SetBid` components based on user actions.\n\n3. What is the purpose of the `onClickBid` function and how is it used in this code?\n- The `onClickBid` function is used to set the `modalBid` state variable and toggle the `showBidModal` state variable, which controls whether the `BidModal` component is displayed. It is passed as a prop to the `Asset` component and the `BidList` component to handle bid selection.",
- "checksum": "75a7350357f8b7cbc86f8bbab587992a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/AssetSale.json b/.autodoc/docs/json/core/src/zoo/AssetSale.json
deleted file mode 100644
index 1787d46ff..000000000
--- a/.autodoc/docs/json/core/src/zoo/AssetSale.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AssetSale.tsx",
- "filePath": "core/src/zoo/AssetSale.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/AssetSale.tsx",
- "summary": "The `AssetSale` component is a React component that renders a single asset for sale. It takes in a number of props, including the `dropId`, `name`, `contentURI`, `metadataURI`, `ask`, `formattedAmount`, `usdAmount`, `symbol`, `highest`, `className`, `height`, `width`, `showPrice`, `isOwner`, `autoPlay`, `animate`, `large`, `getUsdAmount`, `onClickBid`, and `onClickTokenType`. \n\nThe component first imports several dependencies, including `React`, `useCallback`, `useEffect`, `useRef`, and `useState` from the `react` package, `Player` from the `react-player` package, `BigintIsh` and `ZERO_ADDRESS` from the `@zoolabs/zdk` package, `getContent` and `useTokenType` from a local `state` module, `Ask`, `Bid`, `GraphBid`, and `HighestBid` from a local `types` module, `useActiveWeb3React` and `useContract` from a local `hooks` module, `EyeIcon` from the `@heroicons/react/solid` package, `shortenAddress` from a local `functions` module, `TimeAgo` from the `react-timeago` package, and `Image` from the `next/image` package.\n\nThe component then defines a type for its props, which includes all of the props listed above, as well as some additional HTML attributes. The component itself is defined as a function that takes in its props as an argument. \n\nWithin the component, several variables are defined using destructuring assignment from the props object, including `account`, `ask`, `highest`, `dropId`, `name`, `showPrice`, `formattedAmount`, `usdAmount`, `symbol`, `getUsdAmount`, and `isOwner`. The `useTokenType` hook is called with `dropId` and `name` as arguments to get information about the token type associated with the asset. The `useState` hook is used to define state variables for `bid` and `tokenType`. The `useContract` hook is called with `\"Drop\"` as an argument to get the contract for the `Drop` smart contract. The `getContent` function is called with `props.contentURI` as an argument to get information about the content associated with the asset. The `shortenAddress` function is used to shorten the address of the highest bidder. \n\nThe component then returns a div that contains the asset for sale. If `props.large` is true and the asset has a video, a `Player` component is rendered with the video as its `url` prop. Otherwise, an `Image` component is rendered with the image as its `src` prop. \n\nBelow the asset, information about the asset is displayed, including its name, the number of tokens that have been minted and sold, and the highest bid (if applicable). If `showPrice` is true and the asset has a formatted amount and symbol, the highest bid is displayed along with the bid amount and the USD amount (if available). If the user is the owner of the asset, an \"Accept Bid\" button is also displayed. \n\nFinally, the component exports the `AssetSale` function as the default export of the module. \n\nOverall, the `AssetSale` component is a reusable component that can be used to display a single asset for sale, along with information about the asset and its current bid status. It can be customized with a variety of props to control its appearance and behavior.",
- "questions": "1. What is the purpose of the `AssetSale` component?\n- The `AssetSale` component is used to display information about an asset for sale, including its name, image or video, sale price, and highest bid.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including React, react-player, @zoolabs/zdk, @heroicons/react, react-timeago, and next/image.\n\n3. What is the role of the `useActiveWeb3React` and `useContract` hooks?\n- The `useActiveWeb3React` hook is used to access the current user's Ethereum account and provider, while the `useContract` hook is used to interact with Ethereum smart contracts.",
- "checksum": "2f2b22ee9b8ba1aec53325afacd524e5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/AssetSaleModal.json b/.autodoc/docs/json/core/src/zoo/AssetSaleModal.json
deleted file mode 100644
index 37a9a0908..000000000
--- a/.autodoc/docs/json/core/src/zoo/AssetSaleModal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "AssetSaleModal.tsx",
- "filePath": "core/src/zoo/AssetSaleModal.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/AssetSaleModal.tsx",
- "summary": "The `AssetModal` component is a React component that renders a modal window for displaying information about a particular asset. It imports several other components and hooks from various files in the project, including `useRouter` and `Modal` from `next/router` and `react-morphing-modal`, respectively. It also imports several custom components such as `AssetSale`, `SetSaleBid`, `LazySetAsk`, `HowReservations`, `HowOffline`, `LazyBidList`, and `LazyBidModal`, which are used to display information about the asset and allow users to interact with it.\n\nThe component takes in a `props` object, which includes a `modalProps` object that contains various properties for configuring the modal window, such as its size and position. The component also defines several state variables using the `useState` hook, including `show`, which is an object that keeps track of which sections of the modal are currently visible, and `showBidModal`, which determines whether the bid modal is currently visible. \n\nThe `AssetModal` component renders a `Modal` component from `react-morphing-modal` that contains two columns. The first column displays information about the asset, including its name, image, price, and highest bid. The second column displays information about bids and allows users to place bids or asks on the asset. If the user is the owner of the asset, they can also set an ask price for the asset. If the user is not the owner, they can place a bid on the asset. \n\nThe component also defines several helper components, including `NoBids` and `NoAsks`, which are displayed if there are no bids or asks for the asset, respectively. \n\nOverall, the `AssetModal` component is an important part of the larger project as it allows users to view and interact with assets in a user-friendly way. It provides a centralized location for displaying information about assets and allows users to place bids and asks on them.",
- "questions": "1. What is the purpose of the `AssetModal` component?\n- The `AssetModal` component is a modal that displays information about a specific asset, including its sale price, bids, and how to place a bid.\n\n2. What is the significance of the `DROP_ID` constant?\n- The `DROP_ID` constant is used to identify the specific drop that the asset belongs to.\n\n3. What is the purpose of the `useActiveWeb3React` hook?\n- The `useActiveWeb3React` hook is used to retrieve the active Web3 provider and account, which is used to determine whether the user is the owner of the asset and whether they can place a bid.",
- "checksum": "d3cb6bd0b933a1b908a9753f340a2d8a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/BidEditable.json b/.autodoc/docs/json/core/src/zoo/BidEditable.json
deleted file mode 100644
index ebe606a58..000000000
--- a/.autodoc/docs/json/core/src/zoo/BidEditable.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BidEditable.tsx",
- "filePath": "core/src/zoo/BidEditable.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/BidEditable.tsx",
- "summary": "The code above is a React component called `BidEditable` that renders a `BidItem` component with a `GraphBid` object as a prop. The purpose of this component is to provide a way to display and edit a bid in a user interface. \n\nThe `GraphBid` type is imported from the `types` module, which suggests that this project may involve some sort of graph data structure. The `BidItem` component is imported from another file in the same directory, and it is likely responsible for rendering the actual bid information.\n\nThe `BidEditable` component is a functional component that takes a `GraphBid` object as a prop and returns a JSX element that renders a `div` with the class name \"BidEditable\" and a `BidItem` component with the `GraphBid` object passed as a prop. \n\nThis component can be used in a larger project by importing it and rendering it wherever a bid needs to be displayed or edited. For example, if there is a page in the project that displays a list of bids, the `BidEditable` component could be used to render each individual bid in the list. \n\nHere is an example of how the `BidEditable` component could be used in a larger project:\n\n```\nimport React from 'react';\nimport BidEditable from './BidEditable';\n\nconst BidList = ({ bids }) => {\n return (\n \n {assets.map((asset, i) => (\n
\n {asset.name}
\n ))}\n \n {bids.map((bid) => (\n
\n );\n};\n\nexport default BidList;\n```\n\nIn this example, the `BidList` component takes an array of `GraphBid` objects as a prop and maps over them to render a `BidEditable` component for each bid. The `key` prop is set to the `id` of each bid to ensure that React can efficiently update the list when changes occur.",
- "questions": "1. What is the purpose of the `GraphBid` type and where is it defined?\n- The `GraphBid` type is imported from the `types` module, but it's unclear what properties or methods it contains and what its purpose is within the `BidEditable` component.\n\n2. What is the `BidItem` component and how is it used within `BidEditable`?\n- It's unclear what the `BidItem` component does and how it's used within the `BidEditable` component. More information is needed to understand the relationship between these two components.\n\n3. Are there any other components or modules that import and use `BidEditable`?\n- It's unclear if `BidEditable` is used by any other components or modules within the `zoo` project. Knowing this information could help understand the overall architecture and functionality of the project.",
- "checksum": "3d66c754a3cc01789b56c1e5cd3dd6f6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/BidItem.json b/.autodoc/docs/json/core/src/zoo/BidItem.json
deleted file mode 100644
index 43e0ca933..000000000
--- a/.autodoc/docs/json/core/src/zoo/BidItem.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BidItem.tsx",
- "filePath": "core/src/zoo/BidItem.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/BidItem.tsx",
- "summary": "The `BidItem` component is a React component that renders a single bid item. It takes in a `bid` object, which contains information about the bid, such as the bidder, the amount, and the currency used. It also takes in some optional props, such as `showToken`, `summary`, and `onClick`, which determine how the bid item is displayed and what actions can be taken on it.\n\nThe component first imports several dependencies, such as icons, currency and token types, and various utility functions. It then defines the `BidProps` type, which specifies the shape of the `bid` object and the optional props. It also defines the `BidItem` component, which takes in the `bid` object and the optional props as props.\n\nInside the component, it first uses the `useActiveWeb3React` hook to get the current chain ID and account. It then initializes some state variables using the `useState` hook, such as `formattedAmount` and `currencyToken`. It also uses the `useEffect` hook to update the `currencyToken` state variable when the chain ID changes.\n\nThe component then renders the bid item using JSX. It conditionally renders different elements based on the `showToken` prop. If `showToken` is true, it displays information about the bid, such as the name of the asset being bid on, the ID of the asset, the bidder's address, and the time the bid was made. If `showToken` is false, it displays information about the bidder, such as the bidder's address and a summary of the bid.\n\nThe component also displays the bid amount and the currency used, as well as an eye icon that can be clicked to view more details about the bid. It formats the bid amount using the `formatCurrencyAmountWithCommas` function and the `currencyToken` state variable. It also calculates the USD value of the bid using the `getUsdAmount` function from the `usePrice` hook.\n\nOverall, the `BidItem` component is a reusable component that can be used to display bid items in various parts of the larger project. It provides a flexible and customizable way to display bid information and allows users to view more details about each bid.",
- "questions": "1. What is the purpose of the `BidItem` component?\n- The `BidItem` component is used to display information about a bid, including the bidder's address, bid amount, and timestamp.\n\n2. What external libraries are being used in this file?\n- The file is importing several external libraries, including `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, and `react-timeago`.\n\n3. What is the purpose of the `getUsdAmount` function passed as a prop to `BidItem`?\n- The `getUsdAmount` function is used to convert a bid amount from the token's native currency to USD. It takes in a token address and amount as arguments and returns the equivalent USD value.",
- "checksum": "f1805eea178b14d2c7c3498018df2e55"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/BidList.json b/.autodoc/docs/json/core/src/zoo/BidList.json
deleted file mode 100644
index 83249b4f5..000000000
--- a/.autodoc/docs/json/core/src/zoo/BidList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BidList.tsx",
- "filePath": "core/src/zoo/BidList.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/BidList.tsx",
- "summary": "The code defines a React component called `BidList` that fetches and displays a list of bids from a GraphQL API. The component takes in several props, including `where`, `empty`, `showToken`, and `onClick`, which are used to filter the bids, display a message when there are no bids, show the token used for the bids, and handle click events respectively.\n\nThe component uses the `useQuery` hook from the `@apollo/client` library to fetch the bids from the GraphQL API. The GraphQL query is defined using the `gql` function and specifies the fields to be returned for each bid, including the bid amount, creation timestamp, currency, bidder, and media. The `where` prop is used to filter the bids based on the media and/or bidder ID. The `fetchPolicy` option is set to `'no-cache'` to ensure that the query is always sent to the server instead of being cached. The `pollInterval` option is set to `10000` to refetch the bids every 10 seconds.\n\nThe fetched bids are stored in the `data` object returned by the `useQuery` hook. If there are bids, the component maps over them and renders a `BidItem` component for each bid. The `getUsdAmount` function is passed to each `BidItem` component to convert the bid amount to USD. If there are no bids, the component either renders the `empty` prop or a default message.\n\nThe `BidList` component is exported as the default export of the module and can be imported and used in other parts of the project. For example, it could be used in a page that displays a list of bids for a particular media item or bidder. Here's an example of how the `BidList` component could be used:\n\n```\nimport BidList from './BidList'\n\nconst MyBidsPage = () => {\n const myBidsFilter = { bidder: 'my-bidder-id' }\n\n return (\n \n No bids yet.
} showToken={true} />\n \n )\n}\n```",
- "questions": "1. What is the purpose of the `usePrice` hook imported from `./state`?\n- The `usePrice` hook is used to get the USD amount of a bid.\n\n2. What is the purpose of the `pollInterval` option passed to `useQuery`?\n- The `pollInterval` option specifies the time interval (in milliseconds) for refetching the query data.\n\n3. What is the purpose of the `BidFilter` type and the `where` prop in `BidListProps`?\n- The `BidFilter` type is used to define the filter options for the `where` prop, which is used to filter the bids returned by the GraphQL query.",
- "checksum": "f97e1399e0d060e7b84912402a521bc8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/BidModal.json b/.autodoc/docs/json/core/src/zoo/BidModal.json
deleted file mode 100644
index 532196c39..000000000
--- a/.autodoc/docs/json/core/src/zoo/BidModal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BidModal.tsx",
- "filePath": "core/src/zoo/BidModal.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/BidModal.tsx",
- "summary": "The `BidModal` component is a React component that renders a modal for displaying information about a bid on a media asset. It takes in three props: `bid`, `isOpen`, and `onClose`. `bid` is an object that contains information about the bid, including the bidder, the owner of the media asset, the currency used for the bid, and the ID of the media asset. `isOpen` is a boolean that determines whether the modal is open or closed, and `onClose` is a function that is called when the modal is closed.\n\nThe component imports several other components and functions from other files in the project. These include `Modal`, `ModalHeader`, `useActiveWeb3React`, `getContent`, `usePrice`, `formatCurrencyAmountWithCommas`, `isSameAddress`, `shortenAddress`, `RemoveBidButton`, `useContract`, `BidItem`, and `AcceptBidButton`.\n\nThe component uses the `useActiveWeb3React` hook to get the current user's account address. It also uses the `useContract` hook to get a reference to the `Market` contract. When the component is mounted, it uses the `bidForTokenBidder` function of the `Market` contract to check whether the bid is offline or not. If the bid is offline, the component sets the `offline` state to `true`.\n\nThe component then extracts various pieces of information from the `bid` object, such as the type and name of the media asset, the ID of the bidder, the ID of the owner, the currency used for the bid, and the ID of the media asset.\n\nThe component defines two callback functions, `isBidder` and `isOwner`, which are used to determine whether the current user is the bidder or the owner of the media asset, respectively.\n\nThe component then renders the modal using the `Modal` component. The modal contains a header with the name of the media asset and a `BidItem` component that displays information about the bid. If the bid is not offline and the current user is the bidder, a message is displayed indicating that the bidder's address will be refunded if the bid is removed.\n\nThe modal also contains two buttons: a \"Remove Bid\" button and an \"Accept Bid\" button. The \"Remove Bid\" button is only displayed if the current user is the bidder, and it allows the user to remove their bid. The \"Accept Bid\" button is only displayed if the current user is the owner of the media asset, and it allows the user to accept the bid.\n\nOverall, the `BidModal` component provides a way for users to view and manage bids on media assets in the project's marketplace. It allows users to remove their own bids and accept bids on their own media assets.",
- "questions": "1. What is the purpose of this code?\n- This code is for a BidModal component that displays bid information and allows the user to remove or accept a bid.\n\n2. What external dependencies does this code have?\n- This code imports several components and functions from other files, including Modal, ModalHeader, useActiveWeb3React, getContent, usePrice, isSameAddress, shortenAddress, RemoveBidButton, AcceptBidButton, and BidItem.\n\n3. What is the significance of the \"offline\" state variable?\n- The \"offline\" state variable is used to determine whether a bid was made offline (i.e. not through the app) and display a message to the bidder if they try to remove the bid.",
- "checksum": "eae45be40a47d7a1bc0aca430a29d9ae"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/CurrencyLogo.json b/.autodoc/docs/json/core/src/zoo/CurrencyLogo.json
deleted file mode 100644
index 002a38d5e..000000000
--- a/.autodoc/docs/json/core/src/zoo/CurrencyLogo.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CurrencyLogo.tsx",
- "filePath": "core/src/zoo/CurrencyLogo.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/CurrencyLogo.tsx",
- "summary": "The code above defines a React component called `CurrencyLogo` that renders an image of a currency symbol. The component takes in three props: `symbol`, `size`, and `className`. The `symbol` prop is required and can be either a `CurrencySymbol` enum value or a string. The `size` prop is optional and defaults to 32. The `className` prop is also optional and can be used to add additional CSS classes to the rendered image.\n\nThe component uses the `CURRENCY_SYMBOL_LOGO` object from the `@zoolabs/zdk` library to determine the URL of the image to be displayed. The `CURRENCY_SYMBOL_LOGO` object maps each currency symbol to its corresponding image URL. If the `symbol` prop matches a key in the `CURRENCY_SYMBOL_LOGO` object, the component will render an `Image` component from the `next/image` library with the appropriate `src`, `alt`, `className`, `width`, and `height` props.\n\nThis component can be used in a larger project that requires displaying currency symbols. For example, a financial application that displays account balances in different currencies could use this component to display the currency symbol next to each balance. Here's an example of how the `CurrencyLogo` component could be used in a React component:\n\n```\nimport CurrencyLogo from \"./CurrencyLogo\";\n\nconst AccountBalance = ({ currency, balance }) => {\n return (\n My Bids
\n\n
\n );\n};\n```\n\nIn this example, the `AccountBalance` component takes in two props: `currency` and `balance`. The `currency` prop is a string representing the currency symbol, and the `balance` prop is a number representing the account balance. The component renders a `CurrencyLogo` component with the `symbol` prop set to the `currency` prop and the `size` prop set to 24. The component also renders a `span` element with the `balance` prop as its text content.",
- "questions": "1. What is the purpose of this code?\n This code defines a component called `CurrencyLogo` that displays an image logo for a given currency symbol.\n\n2. What dependencies does this code have?\n This code imports two dependencies: `next/image` and `@zoolabs/zdk`.\n\n3. What props can be passed to the `CurrencyLogo` component?\n The `CurrencyLogo` component accepts three props: `symbol` (a currency symbol or string), `size` (an optional number for the size of the logo), and `className` (an optional string for additional CSS classes).",
- "checksum": "9f0e66c0f15ef9acc51a10b26c03f39d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/HowOffline.json b/.autodoc/docs/json/core/src/zoo/HowOffline.json
deleted file mode 100644
index b996dafa5..000000000
--- a/.autodoc/docs/json/core/src/zoo/HowOffline.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "HowOffline.tsx",
- "filePath": "core/src/zoo/HowOffline.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/HowOffline.tsx",
- "summary": "The code defines a React component called `HowOffline` that renders a section of text explaining how offline asks work in the context of a smart contract-based marketplace for NFTs. The component takes a single prop called `onClick`, which is a function to be called when the user clicks the \"Ok\" button at the end of the text.\n\nThe text itself explains that an offline ask is a way for a buyer to place a bid on an NFT without sending funds to the smart contract. Instead, the buyer and seller will need to arrange a separate transaction outside of the platform, such as a bank wire transfer. Once the seller has verified receipt of the funds, they can accept the bid, which will transfer ownership of the NFT to the buyer.\n\nThis component is likely to be used as part of a larger user interface for the marketplace, perhaps as a modal or tooltip that appears when the user selects the option to place an offline ask. The `onClick` prop could be used to dismiss the modal or perform some other action in response to the user acknowledging the information presented.\n\nExample usage:\n\n```\nimport HowOffline from './HowOffline';\n\nfunction PlaceOfflineAsk() {\n const handleOkClick = () => {\n // Do something when the user clicks \"Ok\"\n };\n\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n \n This code is a React component that explains how offline asks work in the context of buying and selling NFTs.\n\n2. What is the expected behavior when the \"Ok\" button is clicked?\n \n When the \"Ok\" button is clicked, it will trigger the onClick function that is passed as a prop to the component.\n\n3. How can a buyer send funds for an offline ask?\n \n A buyer can send funds for an offline ask through an \"over the counter\" deal, such as a bank wire transfer, directly to the seller.",
- "checksum": "608057184e7392c0be0f2fad5a715968"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/HowReservations.json b/.autodoc/docs/json/core/src/zoo/HowReservations.json
deleted file mode 100644
index feec53752..000000000
--- a/.autodoc/docs/json/core/src/zoo/HowReservations.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "HowReservations.tsx",
- "filePath": "core/src/zoo/HowReservations.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/HowReservations.tsx",
- "summary": "The code defines a React functional component called `HowReservations`. This component renders a section of text and a button that triggers an `onClick` event. The purpose of this component is to provide information to users about how reservations work in the ZOO network and to prompt them to take action by clicking the \"Ok\" button.\n\nThe component is designed to be used within a larger project that involves the creation and management of non-fungible tokens (NFTs) on the ZOO network. When a user visits the reservation page, they will see this component displayed on the screen. The text explains that users can reserve an NFT to ensure they are part of the ZOO network at launch. If their bid is not accepted, their reservation will be refunded. The \"Ok\" button allows the user to acknowledge this information and proceed with the reservation process.\n\nThe component is written in JSX, which is a syntax extension for JavaScript that allows developers to write HTML-like code within their JavaScript files. The `return` statement in the component defines the structure and content of the rendered HTML. The `onClick` prop is passed to the button element, which allows the parent component to define what happens when the button is clicked.\n\nHere is an example of how this component might be used within a larger project:\n\n```\nimport HowReservations from './HowReservations';\n\nconst ReservationPage = () => {\n const handleOkClick = () => {\n // Handle the user clicking the \"Ok\" button\n };\n\n return (\n Place an Offline Ask
\n...
\n\n
\n );\n};\n```\n\nIn this example, the `ReservationPage` component renders the `HowReservations` component along with other components related to the reservation process. The `handleOkClick` function is defined within the `ReservationPage` component and passed as a prop to the `HowReservations` component. When the user clicks the \"Ok\" button, the `handleOkClick` function will be called, allowing the parent component to handle the event appropriately.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `HowReservations` that displays information about how reservations work for the ZOO network launch and includes a button to close the dialog box.\n\n2. What props does the `HowReservations` component accept?\n- The `HowReservations` component accepts a single prop called `onClick`, which is a function that will be called when the \"Ok\" button is clicked.\n\n3. What styling classes are applied to the elements in this component?\n- The component uses Tailwind CSS classes to style the elements, including `m-auto`, `w-96`, `mb-6`, `text-xl`, `mb-10`, `w-full`, `px-4`, `py-3`, `text-base`, `font-semibold`, `text-center`, `text-white`, `transition`, `duration-200`, `ease-in`, `bg-indigo-600`, `rounded-lg`, `shadow-md`, `hover:bg-indigo-700`, `focus:ring-offset-indigo-200`, and `focus:outline-none`.",
- "checksum": "d0e06c144d0b668a7cf4ea7c66de5d9e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/InfinityLoader.json b/.autodoc/docs/json/core/src/zoo/InfinityLoader.json
deleted file mode 100644
index 51c434668..000000000
--- a/.autodoc/docs/json/core/src/zoo/InfinityLoader.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "InfinityLoader.tsx",
- "filePath": "core/src/zoo/InfinityLoader.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/InfinityLoader.tsx",
- "summary": "The code above defines a React component called `InfinityLoader`. This component is responsible for rendering an animated infinity symbol that can be used as a loading indicator in the larger project. \n\nThe component takes in three props: `alt`, `height`, and `width`. The `alt` prop is used to provide alternative text for the image, which is important for accessibility purposes. The `height` and `width` props are used to set the dimensions of the image. If these props are not provided, the default values of 32 pixels for height and 50 pixels for width will be used.\n\nThe component uses the `Image` component from the `../components/Image` file to render the animated infinity symbol. The `Image` component is likely a custom component that wraps the standard `img` HTML element and provides additional functionality or styling.\n\nTo use the `InfinityLoader` component in the larger project, it can be imported and rendered wherever a loading indicator is needed. For example:\n\n```\nimport { InfinityLoader } from 'zoo';\n\nfunction MyComponent() {\n const [isLoading, setIsLoading] = useState(true);\n\n useEffect(() => {\n // simulate a delay\n setTimeout(() => {\n setIsLoading(false);\n }, 2000);\n }, []);\n\n return (\n Reserve your NFT
\n\n {isLoading ?
\n );\n}\n```\n\nIn this example, the `InfinityLoader` component is used to display a loading indicator while some data is being fetched or processed. Once the data is ready, the `isLoading` state is set to `false` and the `InfinityLoader` component is replaced with a simple \"Loaded!\" message.\n\nOverall, the `InfinityLoader` component is a simple but useful piece of code that can help improve the user experience of the larger project by providing visual feedback during loading operations.",
- "questions": "1. What is the purpose of the `Image` component being imported?\n- The `Image` component is being imported from a file located at `../components/Image`. It is likely used to display images in the application.\n\n2. What is the purpose of the `InfinityLoader` function?\n- The `InfinityLoader` function returns an `Image` component with a specific source and dimensions. It is likely used to display a loading animation in the application.\n\n3. What is the significance of the default values for the `alt`, `height`, and `width` props?\n- The default values for the `alt`, `height`, and `width` props provide fallback values in case these props are not passed in when the `InfinityLoader` component is used. This ensures that the component will still render with appropriate values even if the props are not specified.",
- "checksum": "d056a062928f3c01247c909629a824e4"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/LazyAcceptBidButton.json b/.autodoc/docs/json/core/src/zoo/LazyAcceptBidButton.json
deleted file mode 100644
index 1d34698ec..000000000
--- a/.autodoc/docs/json/core/src/zoo/LazyAcceptBidButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LazyAcceptBidButton.tsx",
- "filePath": "core/src/zoo/LazyAcceptBidButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/LazyAcceptBidButton.tsx",
- "summary": "The code imports several modules including `isNativeCurrency` from `@zoolabs/zdk`, `ethers`, `useCallback`, `useEffect`, `useState`, `useActiveWeb3React`, `useContract`, `useGasPrice`, and `useTransactionPopups`. It also imports `Bid`, `GraphBid`, and `TokenId` from `./types`.\n\nThe code defines a functional component called `LazyAcceptBidButton` that takes in several props including `dropId`, `name`, `bidder`, `onError`, and `onAccept`. The component uses the `useActiveWeb3React` hook to get the current user's account and the `useGasPrice` hook to get the current gas price. It also uses the `useContract` hook to get the `App` and `Market` contracts.\n\nThe component uses the `useEffect` hook to fetch a `marketBid` object from the `Market` contract using the `lazyBidForTokenBidder` method. If the `dropId`, `name`, and `bidder` props are all truthy, the `marketBid` object is used to create a `Bid` object which is stored in the component's state using the `setBid` function.\n\nThe component defines a `acceptBid` function using the `useCallback` hook. This function attempts to accept the bid stored in the component's state by calling the `acceptLazyBid` method on the `App` contract. If the bid is successfully accepted, the `onAccept` function is called with the `dropId` prop. If an error occurs, the `onError` function is called with the error.\n\nFinally, the component returns a button element that calls the `acceptBid` function when clicked.\n\nThis component can be used in a larger project to allow users to accept bids on a particular token. The `LazyAcceptBidButton` component can be passed the necessary props to identify the token and the bidder, and it will handle the logic of fetching the bid and accepting it. This can simplify the code needed to implement this functionality elsewhere in the project. For example:\n\n```\nLoaded!
}\n\n
\n );\n}\n```\n\nIn this example, the `MediaItem` component displays information about a media item, including its name and current bid (if any). It also renders a button that, when clicked, opens the `LazyBidModal` component to display more details about the bid. The `MediaItem` component passes several props to the `LazyBidModal` component, including the `dropId`, `name`, `bid`, `isOpen`, and `onClose` props.",
- "questions": "1. What is the purpose of the `LazyBidModal` component?\n- The `LazyBidModal` component is used to display bid information and allow the user to remove or accept a bid.\n\n2. What external dependencies does this code rely on?\n- This code relies on several external dependencies, including `react`, `react-dom`, and various custom components and hooks defined in other files within the project.\n\n3. What is the significance of the `offline` state variable?\n- The `offline` state variable is used to determine whether the current user is offline or not, and is used to conditionally render a message to the user if they are the bidder and the bid is removed.",
- "checksum": "26b764c837e8145c458be35c2f81c67b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/LazyRemoveBidButton.json b/.autodoc/docs/json/core/src/zoo/LazyRemoveBidButton.json
deleted file mode 100644
index 41d270f0b..000000000
--- a/.autodoc/docs/json/core/src/zoo/LazyRemoveBidButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LazyRemoveBidButton.tsx",
- "filePath": "core/src/zoo/LazyRemoveBidButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/LazyRemoveBidButton.tsx",
- "summary": "The code is a React component called `LazyRemoveBidButton` that provides a button to remove a bid for a given token. It imports several hooks and a type from other files in the project. \n\nThe component takes in several props, including the `dropId` of the token, its `name`, and the `currency` used for the bid. It also takes in optional `onError` and `onRemove` callbacks.\n\nThe component uses the `useActiveWeb3React` hook to get the current user's account, and the `useGasPrice` hook to get the current gas price. It also uses the `useContract` hook to get instances of the `App` and `Media` contracts.\n\nThe `removeBid` function is defined using the `useCallback` hook. It attempts to remove the bid by calling the `removeLazyBid` function on the `App` contract with the given `dropId`, `name`, and `gasPrice`. If the bid was successfully removed, the `onRemove` callback is called with the `dropId`. If an error occurs, the `onError` callback is called with the error.\n\nThe `removeBid` function also adds a transaction popup using the `addTransactionPopup` function from the `useTransactionPopups` hook. This popup displays information about the transaction, including the summary \"Removed Bid for {name}\".\n\nFinally, the component returns a button that calls the `removeBid` function when clicked. The button has a red background and white text, and changes to an indigo background when hovered over.\n\nThis component can be used in a larger project that involves bidding on tokens. It provides a simple way for users to remove their bids, and handles errors and transaction popups. An example usage of this component might look like:\n\n```\n{name}
\n{bid ? `Current bid: ${bid.amount}` : \"No bids yet\"}
\n \n {isModalOpen && (\n\n
\n )\n}\n```\n\nIn the example above, the `PaymentForm` component renders the `SelectCurrency` component and passes in a callback function `handleCurrencySelect` to the `onSelect` prop. When a user selects a currency, the `handleCurrencySelect` function is called with the selected currency as an argument, and logs the selected currency symbol to the console. The `PaymentForm` component can then use the selected currency to calculate payment amounts or perform other payment-related tasks.",
- "questions": "1. What is the purpose of the `SelectCurrency` component?\n - The `SelectCurrency` component is used to display a list of supported payment currencies and allow the user to select one.\n2. Where does the `getSupportedPaymentCurrencies` function come from?\n - The `getSupportedPaymentCurrencies` function is imported from a file located at `../config/currencies`.\n3. What is the role of the `CurrencyLogo` component?\n - The `CurrencyLogo` component is used to display the logo or icon associated with each currency symbol.",
- "checksum": "d8e6f5943151fe3f3e0c4a2d8dc54035"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/SetAsk.json b/.autodoc/docs/json/core/src/zoo/SetAsk.json
deleted file mode 100644
index 0906340f5..000000000
--- a/.autodoc/docs/json/core/src/zoo/SetAsk.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SetAsk.tsx",
- "filePath": "core/src/zoo/SetAsk.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/SetAsk.tsx",
- "summary": "The `SetAsk` component is a React component that allows users to set an asking price for a particular asset in the Zoo project. The component imports several dependencies, including `Currency`, `Token`, and `ZERO_ADDRESS` from the `@zoolabs/zdk` library, as well as various other components and hooks from the project.\n\nThe component takes a `tokenId` prop, which is used to retrieve information about the asset being priced. It then uses the `useAsset` hook to retrieve the current asking price (`ask`), the currency token being used (`currencyToken`), and the type of asset (`type`). The component also initializes several pieces of state, including the current value of the input field (`value`), whether the user is offline (`offline`), the currently selected currency token (`selectedCurrencyToken`), and whether the currency selection dropdown is currently visible (`showSelectCurrency`).\n\nThe component renders a form that allows the user to input a new asking price for the asset. The form includes an input field that accepts numeric input, as well as a button that allows the user to select a currency token. When the user selects a currency token, the `onSelectCurrency` function is called, which updates the `selectedCurrencyToken` state and hides the currency selection dropdown.\n\nWhen the user submits the form, the `SetAskButton` component is called with several props, including the `tokenType`, `tokenId`, `amount`, `currencyToken`, and `offline` values. This component is responsible for actually setting the new asking price for the asset.\n\nOverall, the `SetAsk` component provides a simple and intuitive interface for users to set asking prices for Zoo assets. It leverages several other components and hooks from the project to provide a seamless user experience.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `SetAsk` that allows users to set an asking price for a particular asset represented by a `tokenId`.\n\n2. What external dependencies does this code rely on?\n- This code imports various modules from external packages such as `@zoolabs/zdk`, `ethers`, and `@headlessui/react`. It also imports several functions and hooks from local files.\n\n3. What is the role of the `useEffect` hook in this code?\n- The `useEffect` hook is used to update the component's state when the `ask` or `currencyToken` values change. Specifically, it sets the `selectedCurrencyToken`, `value`, and `offline` state variables based on the current `ask` and `currencyToken` values.",
- "checksum": "7d852e8caded8bb199211d6ffe9a3e62"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/SetAskButton.json b/.autodoc/docs/json/core/src/zoo/SetAskButton.json
deleted file mode 100644
index 05837a538..000000000
--- a/.autodoc/docs/json/core/src/zoo/SetAskButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SetAskButton.tsx",
- "filePath": "core/src/zoo/SetAskButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/SetAskButton.tsx",
- "summary": "The code is a React component called `SetAskButton` that allows a user to set an asking price for a specific token. The component takes in several props including `tokenId`, `tokenType`, `amount`, `currencyToken`, and `offline`. \n\nThe component uses several hooks including `useActiveWeb3React`, `useGasPrice`, `useContract`, and `useTransactionPopups`. These hooks allow the component to interact with the Ethereum blockchain and display transaction popups to the user.\n\nWhen the user clicks the \"Set Ask\" button, the `setAsk` function is called. This function first checks if an `amount` has been provided. If an `amount` has been provided, it creates an `Ask` object with the `currency` and `amount` properties. The `amount` property is converted to the appropriate units using the `ethers.utils.parseUnits` function. \n\nThe `media.setAsk` function is then called with the `tokenId`, `ask`, and `from` and `gasPrice` options. This function sets the asking price for the specified token on the blockchain. If the transaction is successful, a transaction popup is displayed to the user.\n\nIf an error occurs during the transaction, an error popup is displayed to the user.\n\nOverall, this component allows users to set an asking price for a specific token on the Ethereum blockchain. It is likely used in a larger project that involves buying and selling tokens. Here is an example of how the component might be used in a larger project:\n\n```\nimport { SetAskButton } from \"./components/SetAskButton\";\n\nconst MyToken = () => {\n const tokenId = 123;\n const tokenType = \"MyToken\";\n const amount = 1;\n const currencyToken = { address: \"0x123\", decimals: 18 };\n const offline = false;\n\n return (\n Payment Form
\n\n
\n );\n};\n```",
- "questions": "1. What is the purpose of the `SetAskButton` component?\n- The `SetAskButton` component is used to set an asking price for a specific token.\n\n2. What libraries and hooks are being imported and used in this code?\n- The code imports `Currency` from `@zoolabs/zdk`, `ethers` from `ethers`, and `useCallback`, `useActiveWeb3React`, and `useContract` from custom `../hooks`. It also imports `useGasPrice` and `useTransactionPopups` from custom `../state/network/hooks` and `../state/transactions/hooks`, respectively. These hooks are used to interact with the Ethereum network and manage transactions.\n\n3. What happens if the `amount` parameter is not provided?\n- If the `amount` parameter is not provided, a message is logged to the console with the text \"@todo - amount required message\". It is unclear what this message is intended to do or how it is implemented.",
- "checksum": "6fb580d742b06afe00e4f5de2d386edf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/SetBid.json b/.autodoc/docs/json/core/src/zoo/SetBid.json
deleted file mode 100644
index bdf053039..000000000
--- a/.autodoc/docs/json/core/src/zoo/SetBid.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SetBid.tsx",
- "filePath": "core/src/zoo/SetBid.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/SetBid.tsx",
- "summary": "The `SetBid` component is a React component that allows a user to set a bid for a specific token. It imports various dependencies such as `useEffect`, `useState`, `CurrencyAmount`, `i18n`, `t`, `shortenAddress`, `shortenString`, `ApprovalState`, `useActiveWeb3React`, `useApproveCallback`, `useContract`, `useAsset`, `InfinityLoader`, `SetBidButton`, `Dots`, and `getExplorerLink`. \n\nThe component takes in two props: `tokenId` and `children`. The `tokenId` prop is used to identify the token for which the user is setting a bid. The `children` prop is used to render any child components that are passed to the `SetBid` component.\n\nThe `SetBid` component uses the `useActiveWeb3React` hook to get the current user's account and chain ID. It then uses the `useAsset` hook to get information about the token with the specified `tokenId`. This includes the `ask` price, `currencyToken`, `formattedAmount`, `formattedBalance`, `symbol`, and `type`. \n\nThe component then uses the `useApproveCallback` hook to check if the user has approved the contract to spend their `currencyToken`. If the user has not approved the contract, the component displays a button that allows the user to approve the contract. If the user has approved the contract or if the `currencyToken` is a native token, the component displays a button that allows the user to set a bid for the specified token.\n\nThe component also displays the user's account address and `formattedBalance` of the `currencyToken`. If the `formattedBalance` is zero, the component displays a message indicating that the user has insufficient balance. If the `approvalState` is pending, the component displays a loading button. If there is a pending transaction, the component displays a link to the transaction on the blockchain explorer.\n\nOverall, the `SetBid` component is a reusable component that can be used to allow users to set bids for tokens in a decentralized marketplace. It handles the approval process for spending `currencyToken` and provides a user-friendly interface for setting bids.",
- "questions": "1. What is the purpose of this code and what does it do?\n- This code is a React component called `SetBid` that handles the process of setting a bid for a specific token. It retrieves information about the token and the user's account using various hooks, and allows the user to approve the bid and submit it to the market contract.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including `react`, `@zoolabs/zdk`, `@lingui/core`, `@lingui/macro`, and `react-icons`.\n\n3. What are some potential issues or edge cases that a developer should be aware of when using this code?\n- One potential issue is that the `SetBid` component assumes that the `Market` contract is available and has been initialized using the `useContract` hook. If the contract is not available or has not been initialized correctly, the component may not function as expected. Additionally, the component assumes that the user has sufficient funds and approval to make the bid, so it may not handle cases where the user does not have enough funds or has not approved the necessary tokens.",
- "checksum": "c72f011f37737cc13ce1877e33d47bec"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/src/zoo/SetBidButton.json b/.autodoc/docs/json/core/src/zoo/SetBidButton.json
deleted file mode 100644
index 77ec6961d..000000000
--- a/.autodoc/docs/json/core/src/zoo/SetBidButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SetBidButton.tsx",
- "filePath": "core/src/zoo/SetBidButton.tsx",
- "url": "zoo-labs/zoo/blob/master/core/src/zoo/SetBidButton.tsx",
- "summary": "The code defines a React component called `SetBidButton` that represents a button for placing a bid on a particular token. The component takes in several props, including the details of the ask (the current highest bid), the ID and type of the token being bid on, the bid amount, and the currency being used. \n\nWhen the button is clicked, the `setBid` function is called. This function first checks that an amount has been specified for the bid, and if not, displays a message indicating that an amount is required. It then creates a `Bid` object containing the details of the bid, including the bidder's address, the bid amount, the currency being used, and other metadata. \n\nThe function then determines whether the currency being used is a native currency (e.g. Ether) or a token, and calls the appropriate contract function (`setBid` on the `App` contract for native currencies, and `setBid` on the `Media` contract for tokens) to place the bid. It passes in the necessary parameters, including the token ID, the `Bid` object, the bidder's address, and the gas price. \n\nIf the bid is successfully placed, the function adds a transaction popup to the UI indicating that the bid was placed. If there is an error, it adds an error popup instead. \n\nThe `SetBidButton` component is likely used in a larger project that involves buying and selling tokens on a marketplace. It provides a simple and reusable way to place a bid on a token, abstracting away the details of interacting with the contracts and handling transaction popups. \n\nExample usage:\n\n```\n{tokenType}
\nToken ID: {tokenId}
\nAmount: {amount}
\n\n This is a styled component\n
\n```",
- "questions": "1. What is the purpose of the `linearBorderGradients` property in the `variants` object?\n- The `linearBorderGradients` property is used to specify the variants for the `linearBorderGradients` plugin, which allows for the creation of linear border gradients. The specified variants are `responsive`, `hover`, and `dark`.\n\n2. What is the purpose of the `plugin` function in the `plugins` array?\n- The `plugin` function is used to define a custom plugin for Tailwind CSS. In this case, it adds a utility class called `.header-border-b` that applies a linear gradient to the bottom border of an element.\n\n3. What is the purpose of the `minHeight` property in the `theme` object?\n- The `minHeight` property is used to specify minimum height values for elements. It includes values such as `empty` for a height of 128px, `cardContent` for a height of 230px, and `nftContainer` for a height of 503px.",
- "checksum": "ccd180843e78335bc950aa1b86dc5690"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/core/tsconfig.json b/.autodoc/docs/json/core/tsconfig.json
deleted file mode 100644
index 7c3bd8af5..000000000
--- a/.autodoc/docs/json/core/tsconfig.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "tsconfig.json",
- "filePath": "core/tsconfig.json",
- "url": "zoo-labs/zoo/blob/master/core/tsconfig.json",
- "summary": "This code is a configuration file for the TypeScript compiler. It specifies the options and settings that the compiler should use when compiling TypeScript code into JavaScript. \n\nThe `compilerOptions` object contains various settings that affect how the compiler operates. Some notable options include:\n- `target`: specifies the version of ECMAScript that the compiled JavaScript should be compatible with. In this case, it is set to ES5.\n- `lib`: specifies the libraries that should be included in the compilation process. In this case, it includes the DOM and iterable libraries, as well as the esnext library.\n- `allowJs`: allows JavaScript files to be included in the compilation process.\n- `module`: specifies the module format that should be used in the compiled JavaScript. In this case, it is set to ES modules.\n- `moduleResolution`: specifies how module dependencies should be resolved. In this case, it is set to Node.js-style module resolution.\n- `resolveJsonModule`: allows JSON files to be imported as modules.\n- `jsx`: specifies how JSX syntax should be handled. In this case, it is set to preserve, which means that the JSX syntax will be left intact in the compiled JavaScript.\n- `baseUrl`: specifies the base directory for resolving non-relative module names.\n\nThe `include` and `exclude` arrays specify which files should be included or excluded from the compilation process. In this case, it includes all TypeScript and TypeScript React files in the project, as well as some specific JavaScript files. It excludes the `node_modules` directory.\n\nOverall, this configuration file ensures that the TypeScript compiler is set up to compile the project's TypeScript and JavaScript files into ES5-compatible JavaScript modules, with support for various libraries and module formats. It also specifies which files should be included or excluded from the compilation process. This file is an important part of the project's build process, as it ensures that the code is compiled correctly and consistently.",
- "questions": "1. What is the purpose of this code file?\n- This code file is a configuration file for the TypeScript compiler for the zoo project.\n\n2. What version of ECMAScript is being targeted?\n- The \"target\" property is set to \"es5\".\n\n3. What files are included and excluded from compilation?\n- The \"include\" property specifies which files should be compiled, while the \"exclude\" property specifies which files should be ignored. In this case, all TypeScript and TypeScript React files are included, while the \"node_modules\" directory is excluded. Additionally, there are specific files included in the \"include\" property, such as \"next-env.d.ts\", \"src/animation/index.js\", \"src/pages/_error.js\", and \"src/pages/_error.ts\".",
- "checksum": "0267740b2858e30c747a88cf69504394"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/commitlint.config.json b/.autodoc/docs/json/foundation/commitlint.config.json
deleted file mode 100644
index 623745a85..000000000
--- a/.autodoc/docs/json/foundation/commitlint.config.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "commitlint.config.js",
- "filePath": "foundation/commitlint.config.js",
- "url": "zoo-labs/zoo/blob/master/foundation/commitlint.config.js",
- "summary": "This code exports an object that contains configuration options for the commitlint library. Commitlint is a tool that checks commit messages to ensure they follow a certain format. The configuration options in this file specify the rules that commitlint should use when checking commit messages.\n\nThe `extends` property specifies that this configuration file extends the `config-conventional` configuration provided by commitlint. This means that the rules defined in `config-conventional` will be applied, and any additional rules defined in this file will override or add to those rules.\n\nThe `rules` property is an object that contains the specific rules to be applied. The `type-enum` rule specifies that the `type` field in a commit message must be one of the values listed in the array. The values in the array correspond to different types of changes that can be made in a commit, such as `feat` for a new feature, `fix` for a bug fix, `docs` for documentation changes, and so on.\n\nThe `// TODO Add Scope Enum Here` comment indicates that there is a rule that is currently commented out, but could be added later. This rule would specify that the `scope` field in a commit message must be one of a list of predefined values.\n\nOverall, this code ensures that commit messages in the project follow a consistent format, making it easier to understand the changes made in each commit. Here is an example of a valid commit message that would pass the rules defined in this file:\n\n```\nfeat: Add new animal to zoo\n```\n\nAnd here is an example of an invalid commit message that would fail the `type-enum` rule:\n\n```\nbugfix: Fix typo in animal name\n```\n\nIn summary, this code is an important part of the project's development process, as it helps maintain consistency and clarity in commit messages.",
- "questions": "1. What is the purpose of this code?\n This code exports an object that extends a conventional commit linting configuration and defines rules for commit message types.\n\n2. What is the significance of the `type-enum` rule?\n The `type-enum` rule enforces that commit messages must have one of the specified types, such as `feat`, `fix`, `docs`, etc.\n\n3. What is the purpose of the commented out `scope-enum` rule?\n The `scope-enum` rule is currently commented out, but it appears to be intended to enforce that commit messages must have a valid scope value.",
- "checksum": "97f897ee963606eed0fe2e8a63f4247b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/jest.config.json b/.autodoc/docs/json/foundation/jest.config.json
deleted file mode 100644
index 275deac4a..000000000
--- a/.autodoc/docs/json/foundation/jest.config.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "jest.config.js",
- "filePath": "foundation/jest.config.js",
- "url": "zoo-labs/zoo/blob/master/foundation/jest.config.js",
- "summary": "This code is responsible for creating a Jest configuration for testing a Next.js application. Jest is a popular JavaScript testing framework that is widely used in the industry. The `nextJest` function is imported from the `next/jest` package, which is a wrapper around Jest that provides additional functionality specific to Next.js applications.\n\nThe `createJestConfig` function is created by calling `nextJest` with an options object that specifies the directory where the Next.js application is located. This allows Jest to load the `next.config.js` and `.env` files in the test environment. The resulting `createJestConfig` function is then customized by adding additional configuration options to the Jest configuration object.\n\nThe `customJestConfig` object contains several configuration options that are specific to the project being tested. For example, the `setupFilesAfterEnv` option specifies a list of setup files that should be run before each test is executed. The `moduleDirectories` option specifies the directories that Jest should search for modules when resolving imports. The `testEnvironment` option specifies the environment in which the tests should be run.\n\nThe `moduleNameMapper` option is used to map module names to file paths. This is useful for resolving absolute imports and module path aliases. For example, the `^@/(.*)$` regular expression matches any import that starts with `@/` and captures the rest of the path. The `\n \n Welcome to My Web App
\nThis is a great app that does amazing things.
\n \n\n```\n\nIn this example, the `link` element with `rel=\"manifest\"` specifies the location of the metadata file, and the `link` element with `rel=\"icon\"` specifies the location of a favicon that can be used to represent the application in the browser's UI. \n\nOverall, this code is an important part of a web application's infrastructure, as it provides information that can be used to optimize the user experience and make the application more accessible and user-friendly.", - "questions": "1. What is the purpose of this code?\n This code is a JSON file that defines the name, icons, theme color, background color, and display settings for a web application.\n\n2. What are the dimensions of the icons?\n The icons have two different sizes: 192x192 and 512x512.\n\n3. What does the \"display\" property mean?\n The \"display\" property is set to \"standalone\", which means that the web application should be launched in a standalone mode, without any browser UI elements.", - "checksum": "026fb70eda306d2efab048bf1363d02c" -} \ No newline at end of file diff --git a/.autodoc/docs/json/foundation/public/robots.json b/.autodoc/docs/json/foundation/public/robots.json deleted file mode 100644 index 4cb2dae56..000000000 --- a/.autodoc/docs/json/foundation/public/robots.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "robots.txt", - "filePath": "foundation/public/robots.txt", - "url": "zoo-labs/zoo/blob/master/foundation/public/robots.txt", - "summary": "This code is a robots.txt file that is used to communicate with web crawlers or robots that visit a website. The purpose of this file is to provide instructions to these robots on which pages or sections of the website they are allowed to access and index. \n\nThe first line of the code, \"User-agent: *\", specifies that the following instructions apply to all robots that visit the website. The next line, \"Allow: /\", allows all robots to access all pages and sections of the website. \n\nThe following lines specify the host and sitemap of the website. The \"Host\" line specifies the URL of the website that the robots should visit. The \"Sitemap\" line specifies the location of the sitemap file, which contains a list of all the pages on the website that the robots should index. \n\nThis code is important for search engine optimization (SEO) as it helps ensure that the website is properly indexed by search engines. By providing clear instructions to robots on which pages to index, the website can improve its search engine rankings and visibility. \n\nAn example of how this code may be used in the larger project is if the zoo website has multiple sections or pages that are not meant to be indexed by search engines, such as administrative pages or pages with sensitive information. The robots.txt file can be used to block these pages from being indexed, ensuring that they remain private and secure. \n\nOverall, the robots.txt file is a crucial component of any website's SEO strategy, and this code provides clear instructions to robots on how to properly index the zoo website.", - "questions": "1. **What is the purpose of this code?**\\\nA smart developer might wonder what this code is for and how it fits into the overall project. Based on the content, it appears to be a robots.txt file that specifies which pages of the website can be crawled by search engines.\n\n2. **What does the \"User-agent\" and \"Allow\" directives mean?**\\\nA smart developer might be curious about the meaning of the \"User-agent\" and \"Allow\" directives in the code. The \"User-agent\" directive specifies which search engine robots are allowed to access the site, while the \"Allow\" directive specifies which pages or directories are allowed to be crawled.\n\n3. **Why is the \"Host\" and \"Sitemap\" specified in the code?**\\\nA smart developer might question why the \"Host\" and \"Sitemap\" are specified in the code. The \"Host\" directive specifies the domain name of the website, while the \"Sitemap\" directive specifies the location of the sitemap file that contains a list of all the pages on the website. This information is useful for search engines to properly index the site.", - "checksum": "f9b9239bf9955cc5f58709d2c00d3418" -} \ No newline at end of file diff --git a/.autodoc/docs/json/foundation/public/sitemap-0.json b/.autodoc/docs/json/foundation/public/sitemap-0.json deleted file mode 100644 index c83659a42..000000000 --- a/.autodoc/docs/json/foundation/public/sitemap-0.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "sitemap-0.xml", - "filePath": "foundation/public/sitemap-0.xml", - "url": "zoo-labs/zoo/blob/master/foundation/public/sitemap-0.xml", - "summary": "This code is an XML sitemap file that provides information about the URLs of a website to search engines. The sitemap is a list of URLs that are organized in a specific format to help search engines crawl and index the website more efficiently. \n\nThe file starts with an XML declaration that specifies the version and encoding of the document. The root element of the document is `urlset`, which is defined by the `http://www.sitemaps.org/schemas/sitemap/0.9` namespace. The `urlset` element contains a list of `url` elements, each of which represents a URL on the website. \n\nEach `url` element contains a `loc` element that specifies the URL of the page, a `changefreq` element that indicates how frequently the page is likely to change, a `priority` element that indicates the relative priority of the page compared to other pages on the site, and a `lastmod` element that specifies the date and time the page was last modified. \n\nThis sitemap file can be used by search engines to discover and index the pages on the website more efficiently. It can also be used by website owners to monitor the crawling and indexing of their site. \n\nFor example, a website owner can submit the sitemap file to Google Search Console to monitor the indexing status of their site. They can also use the sitemap to identify any crawl errors or indexing issues that may be preventing their site from appearing in search results. \n\nOverall, this sitemap file is an important component of a website's SEO strategy, as it helps search engines discover and index the pages on the site more efficiently.", - "questions": "1. What is the purpose of this code?\n \n This code is an XML sitemap that lists the URLs of various pages on the website `https://tsnext-tw.thcl.dev` along with some metadata such as the last modification date and priority.\n\n2. What is the significance of the `changefreq`, `priority`, and `lastmod` elements?\n \n The `changefreq` element indicates how frequently the page is likely to change, the `priority` element indicates the relative importance of the page compared to other pages on the site, and the `lastmod` element indicates the date and time when the page was last modified.\n\n3. Is there any reason why some URLs have additional path components (e.g. `/animals/Carousel`) while others do not?\n \n It's possible that the additional path components correspond to different sections or categories of the website, but without more context it's difficult to say for sure.", - "checksum": "86fe2f0c85b136c94e79af6331c78fcc" -} \ No newline at end of file diff --git a/.autodoc/docs/json/foundation/public/sitemap.json b/.autodoc/docs/json/foundation/public/sitemap.json deleted file mode 100644 index d0bcf0e7e..000000000 --- a/.autodoc/docs/json/foundation/public/sitemap.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "sitemap.xml", - "filePath": "foundation/public/sitemap.xml", - "url": "zoo-labs/zoo/blob/master/foundation/public/sitemap.xml", - "summary": "This code is an XML file that contains a sitemap index for a website. The sitemap index is a list of all the sitemaps for the website, which are XML files that contain information about the website's pages and how they are organized. \n\nThe XML file starts with a declaration that specifies the version of XML being used and the character encoding. The sitemap index is then defined using the \"sitemapindex\" tag, which is part of the sitemap schema. The schema defines the structure and elements that can be used in a sitemap or sitemap index.\n\nWithin the sitemap index, there is a single sitemap defined using the \"sitemap\" tag. The \"loc\" element within the sitemap tag specifies the URL of the sitemap file. In this case, the URL is \"https://tsnext-tw.thcl.dev/sitemap-0.xml\". \n\nThis code is important for search engine optimization (SEO) because it helps search engines like Google understand the structure of the website and how its pages are organized. By providing a sitemap index, the website owner can ensure that all of their pages are being indexed by search engines and that the search engines are able to find the most important pages on the site. \n\nIn the larger project, this code would be used in conjunction with other sitemap files to provide a comprehensive list of all the pages on the website. The sitemap files would be generated automatically by a tool or plugin that crawls the website and extracts information about each page. The sitemap index would then be submitted to search engines like Google using the Google Search Console, which would help the website get indexed more quickly and accurately. \n\nExample usage:\n\n```xml\n\n\n
\n Slide 1
\n\n
\n Slide 2
\n\n
\n Slide 3
\n\n \n {/* header content */}\n \n \n \n \n
\n );\n}\n\nexport default HomePage;\n```\n\nIn this example, the `HomePage` component imports and renders the `Aiding` component as part of its `main` content. This allows the `HomePage` component to reuse the `Aiding` component's code and styling without having to duplicate it.",
- "questions": "1. What is the purpose of this code?\n \n This code defines a React component called `Aiding` that returns a JSX element representing a section of content related to a project called \"Aiding Species with Digital Twins\" for a zoo website.\n\n2. What libraries or frameworks are being used in this code?\n \n This code is using React, as evidenced by the use of JSX syntax and the `export default` statement at the end of the file. It is also using Tailwind CSS classes to style the HTML elements.\n\n3. What is the expected output of this code?\n \n The expected output of this code is a styled HTML section with a black background, containing a centered heading, two paragraphs of text, and some responsive layout adjustments based on screen size. This section is likely to be displayed on a webpage related to the zoo's digital initiatives.",
- "checksum": "a19c6d261c190f2163f83dd57de09b08"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/Campaign.json b/.autodoc/docs/json/foundation/src/components/Campaign.json
deleted file mode 100644
index 45ce7c629..000000000
--- a/.autodoc/docs/json/foundation/src/components/Campaign.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Campaign.tsx",
- "filePath": "foundation/src/components/Campaign.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/Campaign.tsx",
- "summary": "The code above defines a React component called Campaign. This component is responsible for rendering a section of the Zoo website that encourages users to create their own fundraising campaigns to support the animals at the zoo. \n\nThe component returns a div element with a black background, containing several child elements. The first child element is a paragraph that encourages users to bring their community to the Zoo foundation. The second child element is a heading that invites users to create their own campaign. The third child element is a paragraph that explains how users can raise funds for the animals by leveraging their network. \n\nThe final child element is a Link component from the Next.js library. This component renders a hyperlink that says \"Learn More\". When the user clicks on this link, they will be directed to a different page on the Zoo website where they can learn more about creating a fundraising campaign. \n\nThis Campaign component is likely used in the larger Zoo project as a way to encourage user engagement and fundraising. By providing users with the tools and resources they need to create their own campaigns, the Zoo can tap into the power of social networks to raise awareness and funds for their cause. \n\nHere is an example of how this Campaign component might be used in a larger React application:\n\n```\nimport Campaign from './Campaign';\n\nfunction HomePage() {\n return (\n \n
\n );\n}\n\nexport default HomePage;\n```\n\nIn this example, the Campaign component is imported and rendered within a larger HomePage component. This allows the Zoo to showcase their fundraising campaign on their homepage and encourage users to get involved.",
- "questions": "1. What is the purpose of this code?\n - This code is defining a React component called `Campaign` that renders a section of a webpage with text and a button that links to more information.\n\n2. What is the role of the `Link` component from the `next/link` library?\n - The `Link` component is used to create a clickable link that navigates to a different page or section of the same page. In this code, it is used to create a button that links to more information.\n\n3. What is the significance of the CSS classes used in this code?\n - The CSS classes are used to style the elements of the webpage. They define properties such as font size, color, padding, and border. The classes are written using a syntax called Tailwind CSS, which provides pre-defined styles that can be easily applied to elements.",
- "checksum": "62eadd5b0b05198cb5fc41c6879d515f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/Collecting.json b/.autodoc/docs/json/foundation/src/components/Collecting.json
deleted file mode 100644
index a92265f03..000000000
--- a/.autodoc/docs/json/foundation/src/components/Collecting.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Collecting.tsx",
- "filePath": "foundation/src/components/Collecting.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/Collecting.tsx",
- "summary": "The code defines a React functional component called `Collecting`. This component renders a section of the web page related to collecting digital collectibles. The section has a black background and contains a heading, an image, and two links. \n\nThe heading is centered and has white text. It reads \"Start Collecting\" and is displayed in a larger font size on larger screens. \n\nThe image is displayed below the heading and is centered. It is a digital image of a collectible card and is loaded from the `/images/collecting.png` file. The image is displayed at a width of 3/5 of its container and has a fixed height of 800 pixels. \n\nBelow the image, there are two links displayed side by side on larger screens and stacked vertically on smaller screens. The links are styled as text with an arrow icon to the right. The first link has the text \"View Endangered Cards\" and is not currently linked to any URL. The second link has the text \"Shop Digital Collectibles\" and is linked to the `/collect` URL. \n\nThis component can be used in the larger project to display a section of the web page related to collecting digital collectibles. It can be imported and rendered within another component or page using the following code:\n\n```\nimport Collecting from 'path/to/Collecting';\n\nfunction MyPage() {\n return (\n Welcome to the Zoo!
\nCheck out our latest fundraising campaign:
\n\n
\n );\n}\n``` \n\nThis will render the `Collecting` component within the `MyPage` component, allowing the user to view and interact with the collectibles section of the page.",
- "questions": "1. What is the purpose of the `Link` and `Image` imports?\n- The `Link` import is used to create clickable links to other pages, while the `Image` import is used to display an image on the page.\n\n2. What is the significance of the `max-md` class in the code?\n- The `max-md` class is used to apply styles only to screens with a maximum width of the medium breakpoint, which is typically around 768px.\n\n3. Why are there SVG paths in the `Link` components?\n- The SVG paths are used to display an arrow icon next to the link text, indicating that the link will take the user to another page.",
- "checksum": "31523a46cae9216cfe876b7c9c642f11"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/Comment.json b/.autodoc/docs/json/foundation/src/components/Comment.json
deleted file mode 100644
index a94072223..000000000
--- a/.autodoc/docs/json/foundation/src/components/Comment.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Comment.tsx",
- "filePath": "foundation/src/components/Comment.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/Comment.tsx",
- "summary": "The `Comment` function in this code file is responsible for rendering a section of the zoo website that displays various statistics related to animal conservation. The function defines an array of objects called `comments`, where each object represents a different statistic. Each object has four properties: `title`, `comment`, `link`, and `href`. \n\nThe `title` property is a string that represents the statistic being displayed. The `comment` property is a string that provides additional information about the statistic. The `link` property is a string that represents the text of a hyperlink that is displayed below the `comment`. Finally, the `href` property is a string that represents the URL that the hyperlink should point to.\n\nThe `Comment` function then returns a JSX element that renders the `comments` array. The array is mapped over using the `map` function, which returns a new array of JSX elements. For each object in the `comments` array, a new `div` element is created that displays the `title`, `comment`, and `link` properties. The `href` property is used to create a `Link` component from the `next/link` library, which wraps the hyperlink text and arrow icon. \n\nOverall, this code file is responsible for rendering a section of the zoo website that displays various statistics related to animal conservation. The `Comment` function takes an array of objects that represent these statistics and returns a JSX element that renders them in a visually appealing way. This code can be used in the larger project to provide users with important information about animal conservation and encourage them to take action to protect endangered species. \n\nExample usage:\n\n```\nimport Comment from './Comment';\n\nfunction HomePage() {\n return (\n \n
\n );\n}\n\nexport default HomePage;\n```",
- "questions": "1. What is the purpose of the `Link` import from 'next/link'?\n - The `Link` import is used to create links to other pages within the application.\n\n2. What is the purpose of the `comments` array?\n - The `comments` array contains objects with information about various animal-related issues, including statistics and links to relevant pages.\n\n3. What is the purpose of the `fill-rule` and `clip-rule` attributes in the SVG path?\n - The `fill-rule` and `clip-rule` attributes are used to define how the interior of the SVG path should be filled and how the path should be clipped, respectively.",
- "checksum": "58251c77f2c4bea54ca9807ee13e62c8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/Donation.json b/.autodoc/docs/json/foundation/src/components/Donation.json
deleted file mode 100644
index 60c87411b..000000000
--- a/.autodoc/docs/json/foundation/src/components/Donation.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Donation.tsx",
- "filePath": "foundation/src/components/Donation.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/Donation.tsx",
- "summary": "The `Donation` function in this code file is responsible for rendering a donation page for the zoo project. The page displays three donation options with different amounts and descriptions of how the funds will be used. The first two options are fixed amounts of $50 and $100, respectively, while the third option allows the user to enter a custom donation amount. \n\nThe function uses an array of objects called `comments` to store the donation options. Each object has three properties: `title`, `comment`, and `type`. The `title` property stores the donation amount, the `comment` property provides a description of how the funds will be used, and the `type` property specifies whether the donation is a fixed amount or a custom amount. \n\nThe function then maps over the `comments` array to render each donation option as a separate `div` element. Each `div` contains the `title` and `comment` properties of the corresponding object from the `comments` array. If the `type` property of the object is `'normal'`, the `div` also contains a `Link` component that allows the user to navigate to a donation page. If the `type` property is `'custom'`, the `div` contains an input field that allows the user to enter a custom donation amount. \n\nThe function uses various CSS classes to style the donation page, including `text-gray-300`, `text-white`, `text-center`, `max-md`, `xl`, `md`, `lg`, `py-16`, `pb-10`, `w-full`, `border`, `rounded-xl`, and `cursor-pointer`. \n\nOverall, this code file provides a simple and user-friendly way for zoo visitors to make donations to support the zoo's conservation efforts. The `Donation` function can be imported and used in other parts of the zoo project to create a donation page or component. \n\nExample usage:\n\n```\nimport Donation from './Donation';\n\nfunction App() {\n return (\n Welcome to the Zoo!
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `Donation` function?\n- The `Donation` function is responsible for rendering a donation page with different donation options.\n\n2. What is the structure of the `comments` array and how is it used in the code?\n- The `comments` array is an array of objects that contain information about different donation options, including the title, comment, and type. It is used to dynamically render each donation option on the page.\n\n3. What is the difference between the `normal` and `custom` types of donation options?\n- The `normal` type of donation option has a fixed donation amount and includes a \"Donate\" button that redirects the user to a donation page. The `custom` type of donation option allows the user to enter a custom donation amount and includes an input field for the user to enter their desired amount.",
- "checksum": "af4530f7fb356f2a5ef33abd8edb5adf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/Footer.json b/.autodoc/docs/json/foundation/src/components/Footer.json
deleted file mode 100644
index ac0bd50d7..000000000
--- a/.autodoc/docs/json/foundation/src/components/Footer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Footer.tsx",
- "filePath": "foundation/src/components/Footer.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/Footer.tsx",
- "summary": "The `Footer` component is responsible for rendering the footer section of the website. It contains two sections, one for larger screens and one for smaller screens. The larger screen section contains five columns, each with a different set of links. The first column contains links to the Zoo Foundation's social media pages, including Twitter, Telegram, Instagram, Discord, Medium, and YouTube. The second column contains links to pages about the Zoo Foundation, including the About page, Get Involved page, Donation page, Volunteer page, and Initiatives page. The third column contains links to pages about different animals, including the Red Wolf, Nubian Giraffe, Amur Leopard, and Sumatran Elephant. The fourth column contains links to pages about other animals, including the Javan Rhino, Pygmy Hippo, and Siberian Tiger. The fifth column contains links to the Zoo Foundation's Terms of Use, the zoolabs.io website, and the foundation's email address.\n\nThe smaller screen section contains fewer links and is more condensed. It contains links to the Home page, About page, Get Involved page, Collect page, and Donation page. It also contains links to the Zoo Foundation's social media pages.\n\nThis component can be used in the larger project by importing it into other components and rendering it at the bottom of the page. For example, a `Layout` component could import the `Footer` component and render it after the main content of the page. This would ensure that the footer is consistent across all pages of the website.\n\nExample usage:\n\n```\nimport Footer from './Footer';\n\nfunction Layout(props) {\n return (\n \n {props.children} \n \n
\n );\n}\n\nexport default Layout;\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `Footer` that renders the footer section of a website called Zoo Foundation.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several icons from the `react-icons` library and a `Link` component from the `next/link` library.\n\n3. What is the layout and content of the footer section?\n- The footer section is divided into two parts: a visible section for larger screens and a hidden section for smaller screens. Both sections contain links to various pages on the website, as well as links to the Zoo Foundation's social media accounts. The visible section also includes the Zoo Labs logo and links to the website's home page and donation page, while the hidden section includes links to the website's privacy policy and terms of service.",
- "checksum": "a109033618302024181f5b601284f791"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/InvolvedContent.json b/.autodoc/docs/json/foundation/src/components/InvolvedContent.json
deleted file mode 100644
index e0c10727f..000000000
--- a/.autodoc/docs/json/foundation/src/components/InvolvedContent.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "InvolvedContent.tsx",
- "filePath": "foundation/src/components/InvolvedContent.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/InvolvedContent.tsx",
- "summary": "The `InvolvedContent` function in the `zoo` project is a React component that renders a section of content related to getting involved with the zoo. The component takes in several props, including `title`, `content1`, `content2`, `image`, `direction`, and `type`. \n\nThe `title` prop is a string that represents the main heading of the section, while `content1` and `content2` are strings that represent the body content. The `image` prop is a string that represents the URL of an image to be displayed alongside the content. The `direction` prop is a string that determines the layout of the content and image, while the `type` prop is a string that determines which set of buttons to display.\n\nThe component returns a div that contains the content and image, with the layout determined by the `direction` prop. The content is styled with various classes that determine the font size, color, and spacing. The image is displayed using the `next/image` component, which optimizes the image for performance and responsiveness.\n\nThe buttons displayed at the bottom of the content are determined by the `type` prop. If `type` is equal to 2, then two buttons are displayed: one for donating and one for volunteering. If `type` is not equal to 2, then three buttons are displayed: one for volunteering, one for donating, and one for learning more. The buttons are styled with various classes that determine the font size, color, and spacing.\n\nOverall, the `InvolvedContent` component is a reusable component that can be used to display content related to getting involved with the zoo. It provides flexibility in terms of layout and button options, and uses the `next/image` component for optimized image display. \n\nExample usage:\n\n```\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code is for rendering a newsletter subscription form with an image and input fields for name and email.\n\n2. What is the role of the `Image` component imported from `next/image`?\n- The `Image` component is used to display an image with optimized performance and automatic optimization for different screen sizes.\n\n3. What is the significance of the CSS classes used in this code?\n- The CSS classes are used for styling the elements in the newsletter form, including the background color, text color, font size, input fields, and spacing between elements. The classes also have responsive variations for different screen sizes.",
- "checksum": "39a46290984b8673776d213dbcdf25ca"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/NextImage.json b/.autodoc/docs/json/foundation/src/components/NextImage.json
deleted file mode 100644
index 682fe74cd..000000000
--- a/.autodoc/docs/json/foundation/src/components/NextImage.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "NextImage.tsx",
- "filePath": "foundation/src/components/NextImage.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/NextImage.tsx",
- "summary": "The code is a React component that wraps the Next.js Image component to provide additional functionality. The NextImage component accepts several props, including useSkeleton, imgClassName, blurClassName, alt, width, height, and ImageProps. The useSkeleton prop is a boolean that determines whether or not to add a background with a pulse animation. The imgClassName prop is a string that specifies the class name for the image. The blurClassName prop is a string that specifies the class name for the blur effect. The alt prop is a string that specifies the alt text for the image. The width and height props specify the dimensions of the image. The ImageProps prop is an object that contains additional props for the Next.js Image component.\n\nThe NextImage component renders a figure element that contains the Next.js Image component. If the width prop is not set, the figure element is given a width style that is equal to the width of the image. The Image component is given a className that is a combination of the imgClassName and blurClassName props. If the useSkeleton prop is true, the className also includes the animate-pulse class. The Image component is passed the src, width, height, alt, and rest props. The onLoadingComplete prop is used to set the status state to complete when the image has finished loading.\n\nThis component can be used in a larger project to display images with additional functionality, such as a loading animation or a blur effect. Here is an example of how the NextImage component can be used:\n\n```\nimport NextImage from '@/components/NextImage';\n\nfunction MyComponent() {\n return (\n Welcome to the Zoo!
\nLearn about our mission and subscribe to our newsletter:
\n\n
\n );\n}\n```\n\nIn this example, the NextImage component is used to display an image with a width and height of 500 pixels. The useSkeleton prop is set to true, which adds a background with a pulse animation. The imgClassName prop is set to \"my-image\", and the blurClassName prop is set to \"my-blur\". These class names can be used to style the image and the blur effect.",
- "questions": "1. What is the purpose of the `useSkeleton` prop?\n- The `useSkeleton` prop is used to add a background with pulse animation to the image, but should not be used if the image is transparent.\n\n2. What is the purpose of the `widthIsSet` variable?\n- The `widthIsSet` variable is used to check if the `className` prop includes the `w-` class, which is used to set the width of the image.\n\n3. What is the purpose of the `onLoadingComplete` prop?\n- The `onLoadingComplete` prop is used to set the status of the image to 'complete' once the image has finished loading.",
- "checksum": "fe71c89d86210300378bdaa557250e83"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/Ourefforts.json b/.autodoc/docs/json/foundation/src/components/Ourefforts.json
deleted file mode 100644
index 5039f0ad4..000000000
--- a/.autodoc/docs/json/foundation/src/components/Ourefforts.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Ourefforts.tsx",
- "filePath": "foundation/src/components/Ourefforts.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/Ourefforts.tsx",
- "summary": "The `Ourefforts` function is a React component that renders a section of the zoo project's website. The purpose of this section is to showcase the conservation efforts that the zoo is undertaking to protect endangered species. The component imports the `Image` component from the `next/image` library, which is used to display icons for each conservation effort.\n\nThe component defines an array of objects called `efforts`, where each object represents a conservation effort. Each object has a `title` property, which is a string that describes the conservation effort, a `content` property, which is a string that provides more details about the effort, and an `icon` property, which is a string that specifies the path to the icon image for the effort.\n\nThe `efforts` array is then mapped over to create a grid of cards, where each card displays the icon, title, and content for a conservation effort. The `Image` component is used to display the icon for each effort, and the `title` and `content` properties are used to populate the text content of each card.\n\nThe component also includes some CSS classes to style the cards and their contents. The cards are displayed in a grid layout, with two columns on larger screens and one column on smaller screens. The text content of each card is displayed in a flexbox layout, with the title and content displayed in separate paragraphs.\n\nThis component can be used in the larger zoo project to showcase the conservation efforts that the zoo is undertaking. It provides a visually appealing and informative way to communicate the zoo's commitment to protecting endangered species. Here is an example of how this component might be used in the larger project:\n\n```\nimport Ourefforts from './Ourefforts';\n\nfunction ConservationPage() {\n return (\n \n
\n );\n}\n\nexport default ConservationPage;\n```\n\nIn this example, the `ConservationPage` component renders a heading and the `Ourefforts` component, which displays the conservation efforts. This page could be linked to from the zoo's homepage or navigation menu to provide visitors with more information about the zoo's conservation efforts.",
- "questions": "1. What is the purpose of the `Image` import from 'next/image'?\n - The `Image` import is used to display images in the component, with optimized performance and automatic optimization of image sizes and formats.\n\n2. What is the purpose of the `efforts` array?\n - The `efforts` array contains information about the conservation efforts for different endangered species, including their titles, descriptions, and icons.\n\n3. What is the purpose of the `className` attributes in the JSX code?\n - The `className` attributes are used to apply CSS classes to the HTML elements in the component, for styling and layout purposes.",
- "checksum": "c3d7c267a0bf5b409eda6196f74ec50d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/Principles.json b/.autodoc/docs/json/foundation/src/components/Principles.json
deleted file mode 100644
index 1ae9bcff6..000000000
--- a/.autodoc/docs/json/foundation/src/components/Principles.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Principles.tsx",
- "filePath": "foundation/src/components/Principles.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/Principles.tsx",
- "summary": "The code above defines a React component called Principles that renders a section of the Zoo website. The purpose of this component is to display the principles that drive the Zoo's mission and encourage visitors to donate, get involved, or learn more about the organization.\n\nThe component is composed of a div element with a black background and a height of 52 pixels on larger screens and 28 pixels on smaller screens. Inside this div, there is another div element with a white background that contains the content of the section. The content is centered horizontally and vertically and has a maximum width of 16 pixels on smaller screens.\n\nThe content of the section consists of a title, five paragraphs, and three links. The title is centered and has a white color. It is displayed in a larger font size on larger screens and a smaller font size on smaller screens. The title has an underline that is achieved by wrapping the \"us\" word in an HTML u tag.\n\nThe five paragraphs describe the principles that drive the Zoo's mission. Each paragraph has a white color and a font size that varies depending on the screen size. The first paragraph is bold and describes the Zoo's commitment to wildlife conservation. The second paragraph describes the Zoo's goal of inspiring positive action through education. The third paragraph highlights the Zoo's use of innovative technology. The fourth paragraph emphasizes the importance of engaging communities for species protection. The fifth and final paragraph describes the Zoo's mission to foster human-nature coexistence.\n\nThe three links at the bottom of the section encourage visitors to donate, get involved, or learn more about the Zoo. Each link is wrapped in a Next.js Link component that provides client-side navigation without a full page refresh. The links have different styles depending on their background color, text color, and border color. The first link is white with a black border and black text on hover. The second link is black with a white border and white text on hover. The third link is black with a white border and white text on hover, but it is only displayed on smaller screens.\n\nOverall, the Principles component is an important part of the Zoo website that communicates the organization's mission and encourages visitors to take action. It is a well-designed and responsive section that adapts to different screen sizes and provides an easy way to navigate to other parts of the website.",
- "questions": "1. What is the purpose of this code?\n \n This code defines a React component called Principles that renders a section of the zoo website that displays the principles that drive the organization, along with links to donate, get involved, and learn more.\n\n2. What technologies or libraries are being used in this code?\n \n This code uses the React library and the Next.js framework, as well as the Link component from Next.js to create the links in the component.\n\n3. What is the expected behavior of the links in this component?\n \n The links in this component are expected to navigate the user to different pages on the zoo website when clicked. The \"Donate\" and \"Get Involved\" links are visible on all screen sizes, while the \"Learn More\" link is only visible on smaller screens.",
- "checksum": "49b2418f29662694f5dddb11db33b229"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/Safeguard.json b/.autodoc/docs/json/foundation/src/components/Safeguard.json
deleted file mode 100644
index 4fdf3c121..000000000
--- a/.autodoc/docs/json/foundation/src/components/Safeguard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Safeguard.tsx",
- "filePath": "foundation/src/components/Safeguard.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/Safeguard.tsx",
- "summary": "The `Safeguard` function in this code file is responsible for rendering a section of the zoo website that highlights the conservation efforts of the zoo. The function returns a JSX element that contains a header, a short video link, and four sections of text that describe the conservation efforts of the zoo. \n\nThe `contents` array contains four objects, each with a `title` and `content` property. These properties are used to dynamically render the four sections of text on the page. The `map` function is used to iterate over the `contents` array and create a new `div` element for each object in the array. The `title` property is used to render a header for each section, and the `content` property is used to render a paragraph of text that describes the conservation effort.\n\nThe `Link` component from the `next/link` library is used to create a hyperlink to a short video about the zoo's conservation efforts. The `svg` element is used to render an arrow icon next to the hyperlink.\n\nOverall, this code file is a small part of a larger project that aims to showcase the conservation efforts of the zoo. The `Safeguard` function is likely used in conjunction with other functions and components to create a cohesive website that informs visitors about the zoo's mission and values. \n\nExample usage:\n\n```jsx\nimport Safeguard from './Safeguard';\n\nfunction App() {\n return (\n Conservation Efforts
\n\n
\n );\n}\n\nexport default App;\n```",
- "questions": "1. What is the purpose of the `Link` import from 'next/link'?\n - The purpose of the `Link` import is not clear from this code alone, but it is likely used to create a hyperlink to another page or resource within the application.\n\n2. What is the purpose of the `contents` array?\n - The `contents` array appears to be used to store information about different activities related to wildlife conservation, which are then displayed on the page.\n\n3. What is the purpose of the `max-md` class name used throughout the code?\n - The `max-md` class name is likely used to apply specific styling to elements when the screen size is below a certain threshold, such as on mobile devices.",
- "checksum": "3a077f5e56fbafd7963328acabb77fbe"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/Seo.json b/.autodoc/docs/json/foundation/src/components/Seo.json
deleted file mode 100644
index e189fb8fd..000000000
--- a/.autodoc/docs/json/foundation/src/components/Seo.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Seo.tsx",
- "filePath": "foundation/src/components/Seo.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/Seo.tsx",
- "summary": "The code is a React component that generates meta tags for search engine optimization (SEO) and social media sharing. The component is called Seo and takes in props that can override the default meta tags. The default meta tags are defined in the constant defaultMeta. \n\nThe component uses the Head component from the Next.js library to add the meta tags to the HTML head section. The useRouter hook is used to get the current URL path. \n\nThe meta tags include the title, description, URL, and image for the website. The Open Graph protocol is used to provide additional metadata for social media sharing. Twitter-specific meta tags are also included. \n\nThe component also includes links to various favicon images and a manifest file for progressive web apps. \n\nThe Seo component can be used in any page of the Zoo project to provide consistent and customizable meta tags. For example, a page about a specific animal in the zoo can use the Seo component to set the title to the animal's name and the image to a photo of the animal. \n\nHere is an example of how the Seo component can be used:\n\n```\nimport Seo from '../components/Seo';\n\nfunction AnimalPage({ animal }) {\n return (\n <>\n {animal.name}
\n{animal.description}
\n\n {isLoading ? (\n
\n );\n}\n```\n\nIn this example, the `App` component fetches some data from an API and renders it in a list. While the data is being fetched, the `Skeleton` component is rendered instead, with a height of 50 pixels. Once the data is loaded, the `Skeleton` component is replaced with the actual list of items. This provides a smooth and seamless user experience, as the user can see that something is happening while the data is being fetched.",
- "questions": "1. What is the purpose of this code?\n This code defines a React component called Skeleton that renders a shimmering effect using CSS.\n\n2. What is the significance of the `clsxm` function?\n The `clsxm` function is likely a utility function that combines multiple class names into a single string, which is used to set the `className` prop of the `div` element.\n\n3. What is the purpose of the `backgroundImage` and `backgroundSize` styles?\n These styles are used to create the shimmering effect by animating a gradient background image that moves from left to right. The `backgroundSize` value of `700px 100%` ensures that the gradient is wide enough to cover the entire element.",
- "checksum": "d481236e657446d65da70b101bfd9988"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/Volunteer.json b/.autodoc/docs/json/foundation/src/components/Volunteer.json
deleted file mode 100644
index 597abb187..000000000
--- a/.autodoc/docs/json/foundation/src/components/Volunteer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Volunteer.tsx",
- "filePath": "foundation/src/components/Volunteer.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/Volunteer.tsx",
- "summary": "The code above is a React component that renders a volunteer form on a webpage. The purpose of this component is to allow users to input their name and email address to express interest in volunteering for the zoo project. \n\nThe component is written in JSX, which is a syntax extension for JavaScript that allows developers to write HTML-like code in their JavaScript files. The component imports the `Image` component from the `next/image` library, which is used to display an image on the webpage. \n\nThe `Volunteer` function returns a div element that contains two child div elements. The first child div element contains a form that prompts users to input their name and email address. The form includes two input fields and a button that users can click to submit their information. The second child div element contains an image that is displayed on the right side of the form. \n\nThe form is styled using CSS classes that are defined in the `tailwindcss` library. The classes are used to set the background color, font size, and padding of the form elements. \n\nThis component can be used in the larger project to encourage users to get involved with the zoo project by volunteering their time and skills. The component can be added to a webpage using the `import` statement and the `Volunteer` component can be rendered using the `ReactDOM.render()` method. \n\nExample usage:\n\n```\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Volunteer from './Volunteer';\n\nReactDOM.render(\n - \n {data.map(item => (\n
- {item.name} \n ))}\n
\n
\n );\n}\n\nexport default AnimalPage;\n```\n\nIn this example, the `AnimalPage` component is responsible for rendering a page that displays information about a specific animal. The `Detail` component is used to display a detailed view of the animal, which includes an image and links to allow the user to take action to support the animal. By using the `Detail` component in this way, the `AnimalPage` component can provide a consistent and informative experience for users who want to learn more about the animals in the zoo.",
- "questions": "1. What is the purpose of the `Detail` function?\n- The `Detail` function is a React component that returns JSX code for rendering a page with information about the Red Wolf and options for volunteering, donating, and learning more.\n\n2. What is the significance of the `max-md` class name used throughout the code?\n- The `max-md` class name is used to apply styles that only take effect when the screen size is smaller than or equal to the maximum width specified for medium-sized devices.\n\n3. How are the `Link` components used in this code?\n- The `Link` components are used to create clickable links that navigate to different pages or sections within the same page. They are styled with CSS classes and contain SVG icons as well as text labels.",
- "checksum": "1d98b1a838eb5c9b24143f71842f7559"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/animal/Item.json b/.autodoc/docs/json/foundation/src/components/animal/Item.json
deleted file mode 100644
index 63e4fe860..000000000
--- a/.autodoc/docs/json/foundation/src/components/animal/Item.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Item.tsx",
- "filePath": "foundation/src/components/animal/Item.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/animal/Item.tsx",
- "summary": "The code above is a React component that renders a list of animals with their images and links to their respective pages. The component receives a list of animals as a prop, and if the list is undefined, it uses a default list of animals. \n\nThe component uses the `Link` and `Image` components from the Next.js library to create links and images for each animal. It then maps over the list of animals and renders a div for each animal with its image and link. \n\nThe component also uses CSS classes to style the layout of the animals' images and links. The `grid` class creates a grid layout with three columns on medium and large screens and one column on small screens. The `border`, `rounded-xl`, and `space-y-8` classes create a border, rounded corners, and vertical spacing between the animals' images and links. \n\nThis component can be used in a larger project that displays a list of animals, such as a zoo website. The component can be imported and used in a page or another component that needs to display a list of animals. For example, the following code imports the `Item` component and uses it to display a list of animals:\n\n```\nimport Item from '../components/Item';\n\nfunction AnimalsPage() {\n const animals = [\n {\n title: \"African Lion\",\n img: \"/images/lion.png\",\n href: \"/animals/african_lion\"\n },\n {\n title: \"Bengal Tiger\",\n img: \"/images/tiger.png\",\n href: \"/animals/bengal_tiger\"\n },\n {\n title: \"Giant Panda\",\n img: \"/images/panda.png\",\n href: \"/animals/giant_panda\"\n }\n ];\n\n return (\n {animal.name}
\n\n
\n );\n}\n\nexport default AnimalsPage;\n```\n\nIn this example, the `AnimalsPage` component defines a list of animals and passes it to the `Item` component as a prop. The `Item` component then renders the list of animals with their images and links.",
- "questions": "1. What is the purpose of the `Item` function and what does it return?\n \n The `Item` function takes in a list of animal objects and returns a JSX element that displays the animals' images, titles, and links to their respective pages.\n\n2. What is the purpose of the `Link` and `Image` components imported from the `next` library?\n \n The `Link` component is used to create clickable links to the animal pages, while the `Image` component is used to display the animal images.\n\n3. What is the purpose of the `animals` constant and how is it used in the code?\n \n The `animals` constant is an array of animal objects that is used to populate the list of animals to be displayed. If a list of animals is not provided as a prop to the `Item` function, the `animals` constant is used as a default.",
- "checksum": "0ad4b5606cd77fbd872cae00134fc08a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/buttons/Button.json b/.autodoc/docs/json/foundation/src/components/buttons/Button.json
deleted file mode 100644
index fc0173b6c..000000000
--- a/.autodoc/docs/json/foundation/src/components/buttons/Button.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Button.tsx",
- "filePath": "foundation/src/components/buttons/Button.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/buttons/Button.tsx",
- "summary": "The `Button` component is a reusable React component that renders a button element with customizable styles and optional icons. It takes in several props, including `isLoading`, `isDarkBg`, `variant`, `size`, `leftIcon`, `rightIcon`, `leftIconClassName`, and `rightIconClassName`. \n\nThe `isLoading` prop is a boolean that determines whether the button should display a loading spinner. The `isDarkBg` prop is a boolean that determines whether the button should have a dark background. The `variant` prop is a string that determines the color scheme of the button and can be one of `primary`, `outline`, `ghost`, `light`, or `dark`. The `size` prop is a string that determines the size of the button and can be one of `sm` or `base`. The `leftIcon` and `rightIcon` props are React components that render icons to the left or right of the button text, respectively. The `leftIconClassName` and `rightIconClassName` props are strings that can be used to add additional classes to the icon elements.\n\nThe `Button` component uses the `clsxm` library to generate a dynamic class string based on the props passed in. This class string is used to apply the appropriate styles to the button element. The styles are defined using Tailwind CSS classes and are organized into regions based on the `size` and `variant` props. \n\nIf the `isLoading` prop is `true`, the button will display a loading spinner in the center of the button. The spinner is an instance of the `ImSpinner2` component from the `react-icons/im` library. The color of the spinner is determined by the `variant` prop.\n\nIf the `leftIcon` or `rightIcon` props are provided, the corresponding icon will be rendered to the left or right of the button text, respectively. The size of the icon is determined by the `size` prop, and additional classes can be added using the `leftIconClassName` and `rightIconClassName` props.\n\nOverall, the `Button` component provides a flexible and customizable way to render buttons with consistent styles throughout a React application. Here is an example of how the `Button` component can be used:\n\n```jsx\nimport Button from './Button';\n\nfunction MyComponent() {\n return (\n Animals
\n\n \n \n \n
\n );\n}\n```",
- "questions": "1. What are the available variants and sizes for the Button component?\n- The available variants for the Button component are 'primary', 'outline', 'ghost', 'light', and 'dark', while the available sizes are 'sm' and 'base'.\n2. What are the props that can be passed to the Button component?\n- The props that can be passed to the Button component are isLoading, isDarkBg, variant, size, leftIcon, rightIcon, leftIconClassName, rightIconClassName, and all the props that can be passed to a regular HTML button element.\n3. What is the purpose of the clsxm library used in this code?\n- The clsxm library is used to conditionally concatenate class names based on the values of the props passed to the Button component. This allows for dynamic styling of the button based on its props.",
- "checksum": "c571d6e2096f702014fa4abac0942371"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/buttons/IconButton.json b/.autodoc/docs/json/foundation/src/components/buttons/IconButton.json
deleted file mode 100644
index ce8757280..000000000
--- a/.autodoc/docs/json/foundation/src/components/buttons/IconButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "IconButton.tsx",
- "filePath": "foundation/src/components/buttons/IconButton.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/buttons/IconButton.tsx",
- "summary": "The `IconButton` component is a reusable button component that can be used throughout the project. It is built using React and the `react-icons` library. The component accepts several props, including `isLoading`, `isDarkBg`, `variant`, `icon`, and `iconClassName`. \n\nThe `variant` prop determines the appearance of the button and can be one of five values: `primary`, `outline`, `ghost`, `light`, or `dark`. The `isDarkBg` prop is a boolean that determines whether the button is on a dark background. The `icon` prop is an icon from the `react-icons` library that will be displayed on the button. The `iconClassName` prop is an optional class name that can be applied to the icon.\n\nThe `IconButton` component renders a `button` element with the appropriate classes based on the props passed to it. The `clsxm` function is used to conditionally apply classes based on the `variant` and `isDarkBg` props. The `isLoading` prop is used to disable the button and display a spinner while the button is loading. \n\nIf the `isLoading` prop is `true`, the button is disabled and a spinner is displayed in the center of the button. The spinner is an instance of the `ImSpinner2` icon from the `react-icons/im` library. The color of the spinner is determined by the `variant` prop.\n\nIf the `icon` prop is provided, the icon is displayed to the left of the button text. The `iconClassName` prop can be used to apply additional classes to the icon.\n\nOverall, the `IconButton` component provides a flexible and reusable button component that can be customized to fit the needs of the project. It can be used in a variety of contexts, such as forms, modals, and navigation menus. \n\nExample usage:\n\n```jsx\nimport IconButton from './path/to/IconButton';\n\nfunction MyComponent() {\n return (\n \n \n Click me\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports a React component called `IconButton` that renders a button with an icon and different variants based on the `variant` prop.\n\n2. What props can be passed to the `IconButton` component?\n- The `IconButton` component accepts the following props: `isLoading`, `isDarkBg`, `variant`, `icon`, `iconClassName`, and all the props that can be passed to a regular HTML button element.\n\n3. What are the different variants available for the `IconButton` component?\n- The `IconButton` component has five different variants: `primary`, `outline`, `ghost`, `light`, and `dark`. Each variant has its own set of styles that can be customized using the `variant` prop.",
- "checksum": "86ca4fd366a1ba7dfa55689f1d6c065f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/buttons/TextButton.json b/.autodoc/docs/json/foundation/src/components/buttons/TextButton.json
deleted file mode 100644
index e0a504ca1..000000000
--- a/.autodoc/docs/json/foundation/src/components/buttons/TextButton.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TextButton.tsx",
- "filePath": "foundation/src/components/buttons/TextButton.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/buttons/TextButton.tsx",
- "summary": "The code defines a React component called `TextButton` that renders a button element with customizable styling. The component accepts several props, including `variant`, which determines the color scheme of the button. The available variants are `'primary'` and `'basic'`. \n\nThe component uses the `clsxm` library to conditionally apply CSS classes to the button element based on the `variant` prop and other props like `disabled` and `className`. The CSS classes define the appearance of the button, including its font weight, text color, and background color. \n\nThe `TextButton` component is exported as the default export of the module, which means it can be imported and used in other parts of the project. For example, a component that needs to render a button with a specific color scheme could import `TextButton` and pass the desired `variant` prop. \n\nHere's an example of how `TextButton` could be used in another component:\n\n```\nimport TextButton from '@/components/TextButton';\n\nfunction MyComponent() {\n return (\n \n Click me! \n Cancel \n
\n );\n}\n```\n\nIn this example, `MyComponent` renders two `TextButton` components with different `variant` props. The first button has a primary color scheme, while the second button has a basic color scheme.",
- "questions": "1. What is the purpose of the `clsxm` function being imported from `@/lib/clsxm`?\n - The smart developer might ask what the `clsxm` function does and how it is used in the code. The answer is that `clsxm` is a utility function used to concatenate class names together for use in the `className` attribute of the `button` element.\n\n2. What are the possible values for the `variant` prop and how do they affect the appearance of the button?\n - The smart developer might ask what the `variant` prop does and what values it can take. The answer is that `variant` is an optional prop that can take either `'primary'` or `'basic'` as its value, and it affects the color and text styles of the button.\n\n3. Why is the `buttonDisabled` prop being used instead of the `disabled` prop?\n - The smart developer might ask why the `buttonDisabled` prop is being used instead of the `disabled` prop, which is a standard prop for disabling form elements. The answer is that `buttonDisabled` is used to avoid a naming conflict with the `disabled` attribute of the `button` element, which is used to disable the button.",
- "checksum": "34ef59594efa8618aef8c5081da270ae"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/intro/Intro.json b/.autodoc/docs/json/foundation/src/components/intro/Intro.json
deleted file mode 100644
index 652fac909..000000000
--- a/.autodoc/docs/json/foundation/src/components/intro/Intro.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Intro.tsx",
- "filePath": "foundation/src/components/intro/Intro.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/intro/Intro.tsx",
- "summary": "The `Intro` function in this code file is responsible for rendering the introductory section of a web page. It takes in three props: `breadcrumbs`, `title`, and `comment`. The `breadcrumbs` prop is a string that represents the navigation path to the current page. The `title` prop is a string that represents the main title of the page. The `comment` prop is an optional string that represents a short description of the page.\n\nThe function returns a JSX element that contains the introductory section of the page. The section has a black background and is divided into two parts: one for larger screens and one for smaller screens. The larger screen section contains a video of a giraffe and some text, while the smaller screen section contains an image of a jungle and some text.\n\nThe video in the larger screen section is set to autoplay and loop. It is sourced from a file called `Giraffe_teen.webm`. The text in the section is divided into three parts: the `breadcrumbs` prop, the `title` prop, and the `comment` prop. The `breadcrumbs` and `title` props are displayed as headings, while the `comment` prop is displayed as a paragraph. There is also a horizontal line that separates the `comment` prop from the rest of the text.\n\nThe image in the smaller screen section is sourced from a file called `intro_bg.png`. It is displayed on the right side of the section and takes up most of the available space. The text in the section is similar to the text in the larger screen section, but it is arranged differently. The `breadcrumbs` prop is displayed above the `title` prop, and the `comment` prop is displayed below the `title` prop.\n\nThis function is likely used in the larger project to provide a consistent and visually appealing introduction to each page. By passing in different values for the `breadcrumbs`, `title`, and `comment` props, the function can be used to create unique introductory sections for each page. For example, on a page about lions, the `title` prop might be \"Lions\" and the `comment` prop might be \"Learn about the king of the jungle and how you can help protect them\". The `breadcrumbs` prop might be \"Home > Animals > Lions\". This would create an introductory section that is specific to the lion page and provides useful information to the user.",
- "questions": "1. What is the purpose of the `Intro` function and what are its required and optional parameters?\n \n The `Intro` function is a React component that returns JSX for rendering an introductory section of the website. It requires `breadcrumbs` and `title` parameters, and has an optional `comment` parameter.\n\n2. What is the purpose of the `Image` component from the `next/image` library and how is it used in this code?\n \n The `Image` component is used to display an image with optimized loading and resizing. In this code, it is used to display an image with the source `/images/intro_bg.png` and dimensions of 1000x1000 pixels.\n\n3. What is the purpose of the `max-md` class and how is it used in this code?\n \n The `max-md` class is used to apply styles that only take effect when the screen width is less than or equal to the `md` breakpoint. It is used to adjust the layout and font sizes of certain elements for smaller screens.",
- "checksum": "e58023fa86782073a25bf02bdcacee56"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/layout/Header.json b/.autodoc/docs/json/foundation/src/components/layout/Header.json
deleted file mode 100644
index 09e29d660..000000000
--- a/.autodoc/docs/json/foundation/src/components/layout/Header.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Header.tsx",
- "filePath": "foundation/src/components/layout/Header.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/layout/Header.tsx",
- "summary": "This code defines a React component called `Header` that renders a navigation bar at the top of a web page. The navigation bar consists of a logo or home link on the left and a list of links on the right. The links are defined in an array called `links`, which contains objects with `href` and `label` properties. The `href` property specifies the URL that the link should point to, while the `label` property specifies the text that should be displayed for the link.\n\nThe `Header` component uses the `UnstyledLink` component from the `@/components/links/UnstyledLink` module to render the links. The `UnstyledLink` component is a custom component that wraps the standard `a` tag and provides some additional styling and functionality. The `UnstyledLink` component takes two props: `href` and `className`. The `href` prop specifies the URL that the link should point to, while the `className` prop specifies the CSS class that should be applied to the link.\n\nThe `Header` component maps over the `links` array using the `Array.map()` method to render each link as an `li` element with an `UnstyledLink` component inside. The `key` prop is set to a unique string that combines the `href` and `label` properties of each link object. This is necessary to help React identify each list item when the component is updated.\n\nThe `Header` component is exported as the default export of the module, which means that it can be imported and used in other modules like this:\n\n```javascript\nimport Header from '@/components/Header';\n\nfunction App() {\n return (\n \n \n {/* rest of the app */}\n \n
\n );\n}\n```\n\nBy importing and rendering the `Header` component in another module, the navigation bar will be displayed at the top of the web page. The `Header` component can be customized by changing the `links` array or by passing additional props to the `UnstyledLink` component.",
- "questions": "1. What is the purpose of the `UnstyledLink` component and where is it defined?\n- The `UnstyledLink` component is used to create links without any default styling. It is defined in a file located at `@/components/links/UnstyledLink`.\n\n2. What is the purpose of the `Header` component and where is it used?\n- The `Header` component is used to render a sticky header with a logo and navigation links. It is likely used at the top of a website or application.\n\n3. What is the purpose of the `links` array and how is it used?\n- The `links` array contains objects with `href` and `label` properties that define the links to be displayed in the header. It is used to dynamically render the navigation links using the `map` function.",
- "checksum": "109dc0ad64ad35221201a088712f1a6b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/layout/Layout.json b/.autodoc/docs/json/foundation/src/components/layout/Layout.json
deleted file mode 100644
index fa9aed90a..000000000
--- a/.autodoc/docs/json/foundation/src/components/layout/Layout.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Layout.tsx",
- "filePath": "foundation/src/components/layout/Layout.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/layout/Layout.tsx",
- "summary": "The code above is a React functional component that exports a default function called `Layout`. The purpose of this component is to provide a layout structure for other components in the project. It takes in a single prop called `children`, which is of type `React.ReactNode`. This prop is used to render the content that will be displayed within the layout.\n\nThe component is written using TypeScript, which is a superset of JavaScript that adds static type checking to the language. The `React.ReactNode` type is used to ensure that only valid React nodes can be passed as children to the `Layout` component.\n\nThe component returns a JSX expression that wraps the `children` prop within an empty fragment. This is done to avoid adding any additional markup to the DOM that could interfere with the layout of the child components.\n\nThe `Layout` component can be used in other components by importing it and wrapping the content that needs to be displayed within the layout with it. For example:\n\n```\nimport Layout from './Layout';\n\nfunction MyComponent() {\n return (\n Hello World!
\nThis is my component.
\n\n
\n );\n}\n```\n\nIn this example, the `UnderlineLink` component is used to render a link to the products page. The `href` prop is passed to the `UnderlineLink` component, which passes it down to the `UnstyledLink` component. The link text \"products\" is passed as a child to the `UnderlineLink` component.",
- "questions": "1. What is the purpose of the `clsxm` library being imported?\n - `clsxm` is likely being used to generate a class string based on the provided arguments, which is then used to apply multiple CSS classes to the `UnstyledLink` component.\n\n2. What is the `UnderlineLink` component and how is it different from `UnstyledLink`?\n - `UnderlineLink` is a custom component that extends `UnstyledLink` and adds additional CSS classes to create an animated underline effect on hover and focus. It also accepts a `className` prop to allow for further customization.\n\n3. Why is `React.forwardRef` being used in the definition of `UnderlineLink`?\n - `React.forwardRef` is being used to forward the `ref` prop from `UnderlineLink` to the underlying `UnstyledLink` component, allowing the parent component to access and manipulate the DOM node directly if needed.",
- "checksum": "08815547d0bf0cfaf355feda270a8351"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/components/links/UnstyledLink.json b/.autodoc/docs/json/foundation/src/components/links/UnstyledLink.json
deleted file mode 100644
index b984b4b71..000000000
--- a/.autodoc/docs/json/foundation/src/components/links/UnstyledLink.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "UnstyledLink.tsx",
- "filePath": "foundation/src/components/links/UnstyledLink.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/components/links/UnstyledLink.tsx",
- "summary": "The code defines a React component called `UnstyledLink` that can be used to create links in a web application. The component takes in several props, including `href`, `children`, `openNewTab`, `className`, and `nextLinkProps`. \n\nThe `href` prop is a required string that specifies the URL that the link should point to. The `children` prop is also required and specifies the content of the link. The `openNewTab` prop is an optional boolean that specifies whether the link should open in a new tab or not. The `className` prop is an optional string that specifies additional CSS classes to apply to the link. Finally, the `nextLinkProps` prop is an optional object that contains any additional props that should be passed to the `Link` component from the Next.js framework.\n\nThe `UnstyledLink` component uses the `React.forwardRef` method to forward any refs passed to it to the underlying `a` or `Link` element. The component then checks whether the `openNewTab` prop is set to `true` or not. If it is not set or if the `href` prop starts with a `/` or `#`, the component renders a `Link` element from the Next.js framework. Otherwise, the component renders a regular `a` element with the `target='_blank'` attribute set to open the link in a new tab.\n\nThe `UnstyledLink` component is useful in a larger web application because it provides a consistent way to create links that can be styled and customized as needed. By default, the component uses the `Link` component from the Next.js framework, which provides client-side navigation and other benefits. However, if a link needs to open in a new tab, the `UnstyledLink` component can handle that as well. \n\nHere is an example of how the `UnstyledLink` component can be used in a React component:\n\n```\nimport UnstyledLink from '@/components/UnstyledLink';\n\nfunction MyComponent() {\n return (\n Check out our
\n About Us \n External Link \n
\n );\n}\n```\n\nIn this example, the `MyComponent` component renders two links using the `UnstyledLink` component. The first link points to a page within the application and uses the default behavior of the `Link` component. The second link points to an external website and opens in a new tab because the `openNewTab` prop is set to `true`.",
- "questions": "1. What is the purpose of this code?\n This code defines a React component called `UnstyledLink` that conditionally renders either a `Link` component from the `next/link` library or a regular `a` tag with `target='_blank'` if the `openNewTab` prop is set to `true`.\n\n2. What are the required props for using this component?\n The required props for using this component are `href` and `children`, which specify the URL and content of the link, respectively. The `href` prop must be a string.\n\n3. What is the purpose of the `nextLinkProps` prop?\n The `nextLinkProps` prop is an optional object that can be used to pass additional props to the `Link` component when it is rendered. Any props that are valid for the `Link` component can be passed in this object, except for the `href` prop, which is already specified by the `href` prop of the `UnstyledLink` component.",
- "checksum": "c80ebbdc1a754e3844838e813aa4aaed"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/constant/env.json b/.autodoc/docs/json/foundation/src/constant/env.json
deleted file mode 100644
index b3ad2bc8c..000000000
--- a/.autodoc/docs/json/foundation/src/constant/env.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "env.ts",
- "filePath": "foundation/src/constant/env.ts",
- "url": "zoo-labs/zoo/blob/master/foundation/src/constant/env.ts",
- "summary": "The code above defines three constants that are used to determine the environment in which the code is running. The first constant, `isProd`, checks if the `NODE_ENV` environment variable is set to `'production'`. If it is, then `isProd` is set to `true`. Otherwise, it is set to `false`. This constant can be used to determine if the code is running in a production environment or not.\n\nThe second constant, `isLocal`, checks if the `NODE_ENV` environment variable is set to `'development'`. If it is, then `isLocal` is set to `true`. Otherwise, it is set to `false`. This constant can be used to determine if the code is running in a local development environment or not.\n\nThe third constant, `showLogger`, is a bit more complex. It first checks if `isLocal` is `true`. If it is, then `showLogger` is set to `true`. This means that the logger will be shown in the console when running the code locally. If `isLocal` is `false`, then `showLogger` checks if the `NEXT_PUBLIC_SHOW_LOGGER` environment variable is set to `'true'`. If it is, then `showLogger` is set to `true`. Otherwise, it is set to `false`. This constant can be used to determine if the logger should be shown or not.\n\nOverall, this code is used to determine the environment in which the code is running and whether or not the logger should be shown. This information can be used to configure the code differently depending on the environment. For example, if the code is running in a production environment, certain features may be disabled or optimized for performance. If the code is running locally, the logger may be shown to aid in debugging. \n\nExample usage:\n\n```javascript\nif (isProd) {\n // disable certain features for production environment\n}\n\nif (isLocal) {\n // enable additional debugging features for local development\n}\n\nif (showLogger) {\n console.log('Logger enabled');\n}\n```",
- "questions": "1. What is the purpose of this code?\n This code exports three constants related to the environment: `isProd` checks if the environment is production, `isLocal` checks if the environment is development, and `showLogger` determines whether to show a logger based on the environment and a public variable.\n\n2. What is the significance of `process.env.NODE_ENV` and `process.env.NEXT_PUBLIC_SHOW_LOGGER`?\n `process.env.NODE_ENV` is a built-in Node.js variable that indicates the current environment (e.g. development, production). `process.env.NEXT_PUBLIC_SHOW_LOGGER` is a public variable that can be set to `true` or `false` to control whether to show a logger.\n\n3. What is the purpose of the `??` operator in the `showLogger` constant?\n The `??` operator is a nullish coalescing operator that returns the left-hand side if it is not `null` or `undefined`, otherwise it returns the right-hand side. In this case, it returns `false` if `process.env.NEXT_PUBLIC_SHOW_LOGGER` is `null` or `undefined`.",
- "checksum": "f999ac3c1458176b34a793dfdd5da5d1"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/lib/clsxm.json b/.autodoc/docs/json/foundation/src/lib/clsxm.json
deleted file mode 100644
index e3a18dfb5..000000000
--- a/.autodoc/docs/json/foundation/src/lib/clsxm.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "clsxm.ts",
- "filePath": "foundation/src/lib/clsxm.ts",
- "url": "zoo-labs/zoo/blob/master/foundation/src/lib/clsxm.ts",
- "summary": "The code above is a function called `clsxm` that merges classes using two external libraries: `clsx` and `tailwind-merge`. The purpose of this function is to provide a way to merge classes with the full feature of `clsx` while also using `tailwind-merge` to merge classes with Tailwind CSS.\n\nThe `clsx` library is used to generate a string of classes based on the input provided. It can handle various types of input, such as strings, arrays, and objects, and it can also handle conditional classes. The `tailwind-merge` library is used to merge classes based on the Tailwind CSS utility classes.\n\nThe `clsxm` function takes in an array of `ClassValue` types, which can be any type that `clsx` can handle. It then passes this array to `clsx` to generate a string of classes. This string is then passed to `tailwind-merge` to merge any classes that match the Tailwind CSS utility classes. Finally, the merged classes are returned as a string.\n\nThis function can be used in the larger project to simplify the process of merging classes. Instead of manually merging classes using `clsx` and `tailwind-merge`, developers can simply call the `clsxm` function and pass in the classes they want to merge. This can save time and reduce the chance of errors.\n\nExample usage:\n\n```\nimport clsxm from 'path/to/clsxm';\n\nconst classes = clsxm('text-red-500', { 'font-bold': true }, 'bg-gray-200');\n// classes = 'text-red-500 font-bold bg-gray-200'\n```\n\nIn the example above, the `clsxm` function is used to merge three classes: `text-red-500`, `{ 'font-bold': true }`, and `bg-gray-200`. The resulting string of classes is `'text-red-500 font-bold bg-gray-200'`.",
- "questions": "1. What is the purpose of the `clsx` and `tailwind-merge` libraries being imported?\n- `clsx` is a library that allows for conditional joining of class names, while `tailwind-merge` is a library that merges Tailwind CSS classes together. \n\n2. What is the purpose of the `clsxm` function?\n- The `clsxm` function takes in any number of class values and merges them together using `clsx` and `tailwind-merge`, allowing for more flexible and powerful class merging capabilities.\n\n3. Are there any potential drawbacks or limitations to using this `clsxm` function?\n- Without knowing the specific use case and implementation of this function, it is difficult to determine any potential drawbacks or limitations. However, it is important to note that using multiple class merging libraries together may result in increased bundle size and potential conflicts between the libraries.",
- "checksum": "8647a0e87be0f53d26ac070312c6d33d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/lib/helper.json b/.autodoc/docs/json/foundation/src/lib/helper.json
deleted file mode 100644
index de87ace92..000000000
--- a/.autodoc/docs/json/foundation/src/lib/helper.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "helper.ts",
- "filePath": "foundation/src/lib/helper.ts",
- "url": "zoo-labs/zoo/blob/master/foundation/src/lib/helper.ts",
- "summary": "The code in this file provides three functions that can be used in a larger project. The first function, `openGraph`, generates an Open Graph (OG) image for a website. The function takes in an object with four properties: `siteName`, `description`, `templateTitle`, and `logo`. The `siteName` and `description` properties are required, while the other two are optional. The function returns a URL that can be used to generate the OG image. \n\nHere is an example of how to use the `openGraph` function:\n\n```\nconst ogUrl = openGraph({\n siteName: 'My Website',\n description: 'This is a description of my website',\n templateTitle: 'My Template',\n logo: 'https://example.com/logo.png'\n});\n\n// ogUrl will be a string containing the URL for the OG image\n```\n\nThe second and third functions, `getFromLocalStorage` and `getFromSessionStorage`, respectively, retrieve a value from either local or session storage. Both functions take in a `key` parameter and return the value associated with that key in the storage. If the storage is not available (e.g. if `window` or `sessionStorage` is undefined), the functions return `null`.\n\nHere is an example of how to use the `getFromLocalStorage` function:\n\n```\nconst myValue = getFromLocalStorage('myKey');\n\n// myValue will be either the value associated with 'myKey' in local storage or null\n```\n\nOverall, these functions can be used to add functionality to a larger project. The `openGraph` function can be used to generate OG images for a website, while the `getFromLocalStorage` and `getFromSessionStorage` functions can be used to retrieve values from storage.",
- "questions": "1. What is the purpose of the `openGraph` function?\n - The `openGraph` function generates an Open Graph URL based on the provided parameters such as site name, description, logo, and template title.\n\n2. What is the purpose of the `getFromLocalStorage` function?\n - The `getFromLocalStorage` function retrieves a value from the local storage of the browser based on the provided key.\n\n3. What is the purpose of the `getFromSessionStorage` function?\n - The `getFromSessionStorage` function retrieves a value from the session storage of the browser based on the provided key.",
- "checksum": "42c3876db1df874acd35e68317875e58"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/lib/logger.json b/.autodoc/docs/json/foundation/src/lib/logger.json
deleted file mode 100644
index 83e2f0625..000000000
--- a/.autodoc/docs/json/foundation/src/lib/logger.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "logger.ts",
- "filePath": "foundation/src/lib/logger.ts",
- "url": "zoo-labs/zoo/blob/master/foundation/src/lib/logger.ts",
- "summary": "The code above is a logger function that is used to log information during development. It is designed to only log information when the `showLogger` constant is set to true. This function takes two parameters: `object` and `comment`. The `object` parameter is the object that needs to be logged, while the `comment` parameter is an optional string that can be used to provide additional information about the log.\n\nThe logger function uses the `console.log()` method to output the log information. The log information is formatted using a template literal that includes the `typeof window` check to ensure that the function works in both the browser and server environments. The log information includes the path name of the current page, the comment (if provided), and the object that needs to be logged.\n\nThis logger function is useful in the larger project because it allows developers to log information during development without cluttering the console with unnecessary logs. By setting the `showLogger` constant to true, developers can easily see the information they need to debug the application. Here is an example of how this logger function can be used in the larger project:\n\n```\nimport logger from '@/utils/logger';\n\nfunction myFunction() {\n const myObject = { name: 'John', age: 30 };\n logger(myObject, 'This is my object');\n}\n```\n\nIn the example above, the `myFunction()` function creates an object called `myObject` and passes it to the `logger()` function along with a comment. If the `showLogger` constant is set to true, the logger function will output the log information to the console. This information can be used to debug the application and identify any issues that may be present.",
- "questions": "1. What is the purpose of the `showLogger` constant and where is it defined?\n- `showLogger` is used to determine whether or not to log information and is likely defined in the `env` module. \n\n2. What is the significance of the `lg` snippet mentioned in the `comment` parameter?\n- The `lg` snippet is likely a shorthand for a comment template used by the developer to quickly generate comments for logging purposes. \n\n3. What is the purpose of the `%c` and `color` parameters in the `console.log` statement?\n- The `%c` parameter is used to apply CSS styles to the logged text, and the `color` parameter sets the color of the text to a specific shade of blue.",
- "checksum": "5e928aaf4b93005a81a480a5a532e3f8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/404.json b/.autodoc/docs/json/foundation/src/pages/404.json
deleted file mode 100644
index 6e62a2945..000000000
--- a/.autodoc/docs/json/foundation/src/pages/404.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "404.tsx",
- "filePath": "foundation/src/pages/404.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/404.tsx",
- "summary": "This code defines a React component called `NotFoundPage` that renders a custom 404 error page for a web application. The component imports several other components and icons from the project's codebase, including `Layout`, `ArrowLink`, and `Seo`, as well as the `RiAlarmWarningFill` icon from the `react-icons/ri` library.\n\nWhen the `NotFoundPage` component is rendered, it returns a JSX template that includes the imported components and icon. The `Layout` component provides a consistent layout for the page, while the `Seo` component sets the page's metadata, including the title. The `ArrowLink` component renders a link to the home page of the application.\n\nThe main content of the page is contained within a `section` element with a white background. The content is centered vertically and horizontally using flexbox, and includes the `RiAlarmWarningFill` icon, which is animated to flicker and has a red color. The icon is followed by a heading that reads \"Page Not Found\" in large text, and a link to the home page of the application.\n\nThis component can be used in a larger web application to provide a custom 404 error page that matches the application's branding and design. The `NotFoundPage` component can be imported and used in a routing system to handle requests for pages that do not exist. For example, in a Next.js application, the `NotFoundPage` component could be used as the fallback page for undefined routes by defining a custom 404 page in the `pages/404.js` file:\n\n```javascript\nimport NotFoundPage from '@/components/NotFoundPage';\n\nexport default function Custom404() {\n return \n
\n );\n}\n\nexport default HomePage;\n```\n\n```tsx\n// MyApp.tsx\nimport { AppProps } from 'next/app';\nimport HomePage from './HomePage';\n\nimport '@/styles/globals.css';\nimport '@/styles/colors.css';\nimport 'slick-carousel/slick/slick.css';\nimport 'slick-carousel/slick/slick-theme.css';\n\nfunction MyApp({ Component, pageProps }: AppProps) {\n return {title}
\nWelcome to the homepage!
\n\n
\n );\n}\n\nexport default App;\n```",
- "questions": "1. What is the purpose of this code?\n- This code is for a carousel component that displays images of different animals and some text.\n\n2. What libraries or frameworks are being used in this code?\n- This code is using Next.js, React-Slick, and Next/Image.\n\n3. What is the future upgrade mentioned in the code?\n- The future upgrade mentioned in the code is an AI chat feature that will be available for all Zoo Animals.",
- "checksum": "6ef184bbd213c027e77ae80505eedef4"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/animals/Content.json b/.autodoc/docs/json/foundation/src/pages/animals/Content.json
deleted file mode 100644
index 64fcf4797..000000000
--- a/.autodoc/docs/json/foundation/src/pages/animals/Content.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Content.tsx",
- "filePath": "foundation/src/pages/animals/Content.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/animals/Content.tsx",
- "summary": "The `Content` function in this file is responsible for rendering a component that displays a title and content in a specific layout. The function takes in two parameters, `title` and `content`, both of which are strings. The `title` parameter is used to display the title of the content, while the `content` parameter is used to display the actual content.\n\nThe component is rendered using JSX, which is a syntax extension for JavaScript that allows for the creation of HTML-like elements. The component is wrapped in a `div` element with a class of `bg-black` and `md:px-64`, which sets the background color to black and adds padding to the left and right sides of the component on medium-sized screens and above.\n\nInside the `div` element, there is another `div` element with a class of `flex` and `max-md:flex-col max-md:px-4 justify-between py-20`. This sets the layout of the component to a flexbox with a column layout on screens smaller than medium-sized screens and adds padding to the left and right sides of the component on screens smaller than medium-sized screens. It also adds space between the title and content using `justify-between` and adds padding to the top and bottom of the component using `py-20`.\n\nInside the second `div` element, there are two `div` elements. The first `div` element has a class of `relative md:w-1/2 max-md:w-full md:pr-32 max-md:pb-8` and is used to display the title. It is positioned relative to its normal position and has a width of half the screen on medium-sized screens and above. It also adds padding to the right side of the component on medium-sized screens and below and padding to the bottom of the component on screens smaller than medium-sized screens.\n\nThe second `div` element has a class of `w-1/2 max-md:w-full flex justify-between space-x-16` and is used to display the content. It has a width of half the screen on medium-sized screens and above and is a flexbox with space between the elements using `justify-between`. It also adds space between the elements using `space-x-16`.\n\nInside the second `div` element, there is a `p` element with a class of `flex-1 text-white text-xl md:columns-2 gap-12`. This sets the text color to white, the font size to extra large, and adds two columns on medium-sized screens and above. It also adds space between the columns using `gap-12`. The `span` element inside the `p` element uses the `dangerouslySetInnerHTML` prop to render the `content` parameter as HTML.\n\nFinally, the `Content` function is exported as the default export of the file, which allows it to be imported and used in other files in the project. For example, in another file in the project, the `Content` component could be imported and used like this:\n\n```\nimport Content from './path/to/Content';\n\nfunction MyComponent() {\n return (\n \n My content\" />\n
\n );\n}\n```\n\nThis would render the `Content` component with a title of \"My Title\" and content of \"My content
\".", - "questions": "1. What is the purpose of this code?\n - This code defines a React component called `Content` that takes in a `title` and `content` as props and returns a styled div with the `title` displayed in a large font and the `content` displayed in a smaller font with HTML formatting.\n\n2. What styling classes are being used in this code?\n - The code uses several Tailwind CSS classes for styling, including `bg-black`, `md:px-64`, `max-md:flex-col`, `max-md:px-4`, `py-20`, `relative`, `md:w-1/2`, `max-md:w-full`, `md:pr-32`, `max-md:pb-8`, `text-white`, `text-4xl`, `w-1/2`, `flex`, `justify-between`, `space-x-16`, `flex-1`, `text-xl`, and `md:columns-2`.\n\n3. What is the purpose of the `dangerouslySetInnerHTML` prop?\n - The `dangerouslySetInnerHTML` prop is used to render the `content` prop as HTML, which allows for the use of HTML tags and formatting within the `content` string. However, it is important to note that using this prop can pose a security risk if the `content` string is not properly sanitized.", - "checksum": "b0c5d51f97ec0aeb46a7712cd02deecd" -} \ No newline at end of file diff --git a/.autodoc/docs/json/foundation/src/pages/animals/Header.json b/.autodoc/docs/json/foundation/src/pages/animals/Header.json deleted file mode 100644 index 1b4332445..000000000 --- a/.autodoc/docs/json/foundation/src/pages/animals/Header.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "Header.tsx", - "filePath": "foundation/src/pages/animals/Header.tsx", - "url": "zoo-labs/zoo/blob/master/foundation/src/pages/animals/Header.tsx", - "summary": "The `Header` function in this code file is a React component that renders a header section for a website. The header includes an image that flips when clicked, a title, a description, and two links for purchasing and adding items to a cart. The header also includes a navigation bar for mobile devices that displays links to different animal pages.\n\nThe `useState` hook is used to create a state variable `flip` that is initially set to `false`. This variable is used to determine whether the image should be flipped or not. When the image is clicked, the `setFlip` function is called with the opposite value of `flip`, which causes the image to flip.\n\nThe `ReactCardFlip` component is used to create a flipping effect for the image. It takes two `Image` components as children, each with a different image source. When the `isFlipped` prop is set to `true`, the second `Image` component is displayed, and when it is set to `false`, the first `Image` component is displayed.\n\nThe `Link` components are used to create two buttons for purchasing and adding items to a cart. They are styled with different colors and borders to differentiate them. The `href` prop is set to `#` for both links, indicating that they are not functional in this code file.\n\nThe navigation bar for mobile devices is created using `Link` components that link to different animal pages. The `className` prop is used to style the links with white text and a black background. The `active` class is added to the second link to indicate the current page.\n\nThis `Header` component can be used in a larger project as a reusable header section for different pages. The image, title, and description can be customized for each page, and the links can be made functional by adding appropriate URLs. The navigation bar can also be customized with different links and styles. Here is an example of how this component can be used in a larger project:\n\n```\nimport Header from './Header';\n\nfunction HomePage() {\n return (\n\n
\n );\n}\n\nexport default HomePage;\n```",
- "questions": "1. What is the purpose of the `ReactCardFlip` component and how does it work?\n - The `ReactCardFlip` component is used to flip between two images of an Amur Leopard trading card. It works by toggling the `isFlipped` state between `true` and `false` when the user clicks on a button, which triggers the flip animation.\n2. What is the significance of the `max-md` class name used throughout the code?\n - The `max-md` class name is used to apply styles that only affect screen sizes up to a certain width (in this case, the maximum width for medium-sized screens). This allows for responsive design that adapts to different screen sizes.\n3. What is the purpose of the `Link` components and how do they work?\n - The `Link` components are used to create clickable links to other pages within the website. They work by using the `href` prop to specify the URL of the destination page, and the `className` prop to apply styling to the link. When clicked, the link will navigate to the specified page.",
- "checksum": "0948b29d084a061d6765cfd480efe3c6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/animals/[animal].json b/.autodoc/docs/json/foundation/src/pages/animals/[animal].json
deleted file mode 100644
index 7b4274b1e..000000000
--- a/.autodoc/docs/json/foundation/src/pages/animals/[animal].json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "[animal].tsx",
- "filePath": "foundation/src/pages/animals/[animal].tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/animals/[animal].tsx",
- "summary": "This code defines the homepage of the zoo project using React. It imports various components from the project's file structure and renders them in a specific order to create the homepage. \n\nThe `Layout` component is imported from `@/components/layout/Layout` and is used to define the overall structure of the page. The `Seo` component is imported from `@/components/Seo` and is used to define the search engine optimization settings for the page. The `Navbar` component is imported from `@/components/Navbar` and is used to create the navigation bar at the top of the page. \n\nThe `Header` component is imported from `@/pages/animals/Header` and is used to create the header section of the page. The `Avatars` component is imported from `@/components/animal/Item` and is used to display a list of animal avatars. The `Content` component is imported from `@/pages/animals/Content` and is used to display information about the Amur leopard. The `Carousel` component is imported from `@/pages/animals/Carousel` and is used to display a carousel of images of various animals. \n\nThe `Aiding` component is imported from `@/components/Aiding` and is used to display information about how to aid the zoo. The `Newsletter` component is imported from `@/components/Newsletter` and is used to display a newsletter subscription form. The `Footer` component is imported from `@/components/Footer` and is used to create the footer section of the page. \n\nThe `HomePage` function is the main function that defines the structure of the page. It defines an array of animal avatars and passes it to the `Avatars` component as a prop. It also passes a title and content to the `Content` component as props. The content includes HTML tags for formatting. \n\nOverall, this code creates the homepage of the zoo project using various components that are imported from the project's file structure. It displays information about the Amur leopard, a carousel of animal images, and various sections for aiding the zoo and subscribing to a newsletter. It can be used as a starting point for creating other pages in the project. \n\nExample usage: \n\n```jsx\nimport HomePage from '@/pages/HomePage';\n\nfunction App() {\n return (\n Welcome to the Zoo!
\nExplore our collection of rare and endangered animals.
\n\n
\n );\n}\n```",
- "questions": "1. What components are being imported in this file?\n- The file is importing various components from different directories such as Layout, Seo, Navbar, StartCollecting, Newsletter, Footer, Header, Animal_Item, Animals, Donation, Volunteer, Campaign, Aiding, TradingCard, CardList, Support, Avatars, Content, and Carousel.\n\n2. What is the purpose of the `avatars` constant?\n- The `avatars` constant is an array of objects that contain information about different types of leopards such as their title, image, and href. It is used to display these avatars on the page using the `Avatars` component.\n\n3. What is the content being displayed on the page?\n- The page displays information about the Amur leopard, including its speed, agility, and behavior. It also includes a carousel of images and information about how to aid in the conservation of this species.",
- "checksum": "bad48751b64af99983f14dbfc8642099"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/api/hello.json b/.autodoc/docs/json/foundation/src/pages/api/hello.json
deleted file mode 100644
index 22d8ab90d..000000000
--- a/.autodoc/docs/json/foundation/src/pages/api/hello.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "hello.ts",
- "filePath": "foundation/src/pages/api/hello.ts",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/api/hello.ts",
- "summary": "This code is a simple Next.js API route that returns a JSON response with a name property set to 'Bambang'. The purpose of this code is to provide a basic example of how to create an API route using Next.js. \n\nThe code imports the NextApiRequest and NextApiResponse types from the 'next' module. These types are used to define the types of the req and res parameters in the hello function. The req parameter is an instance of the NextApiRequest type, which represents the incoming HTTP request. The res parameter is an instance of the NextApiResponse type, which represents the outgoing HTTP response.\n\nThe hello function is the main function of this code. It takes in the req and res parameters and uses the res parameter to send a JSON response with a name property set to 'Bambang'. The res.status(200) method sets the HTTP status code of the response to 200, which means the request was successful. The .json() method serializes the response object to JSON and sends it as the response body.\n\nThis code can be used as a starting point for creating more complex API routes in a larger project. For example, if the project required an API route to retrieve data from a database, the hello function could be modified to query the database and return the results as a JSON response. \n\nHere is an example of how this code could be used in a larger project:\n\n```javascript\nimport { NextApiRequest, NextApiResponse } from 'next';\n\nexport default function getData(req: NextApiRequest, res: NextApiResponse) {\n // Query the database to get the data\n const data = queryDatabase();\n\n // Send the data as a JSON response\n res.status(200).json(data);\n}\n```\n\nIn this example, the getData function queries the database to get some data and sends it as a JSON response using the res.status(200).json() methods. This function could be used as an API route in a larger project to retrieve data from a database.",
- "questions": "1. What is the purpose of this API route?\n This API route is a simple example that returns a JSON response with a name property set to 'Bambang'.\n\n2. What is the expected input for this API route?\n This API route does not expect any input as it does not use the `req` parameter.\n\n3. What is the expected output format for this API route?\n The expected output format for this API route is a JSON object with a single property named 'name' set to a string value. The HTTP status code returned is 200.",
- "checksum": "60081382ed28709cd1f2d1126e79b9b6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/collect/CardList.json b/.autodoc/docs/json/foundation/src/pages/collect/CardList.json
deleted file mode 100644
index a2a34b974..000000000
--- a/.autodoc/docs/json/foundation/src/pages/collect/CardList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CardList.tsx",
- "filePath": "foundation/src/pages/collect/CardList.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/collect/CardList.tsx",
- "summary": "The `CardList` function in the `zoo` project is responsible for rendering a list of trading cards on a webpage. The function imports the `Image` component from the `next/image` library, which is used to display the images of the trading cards. \n\nThe function defines an array called `cardlist` that contains objects with the `img` property set to the file path of each trading card image. The function then returns a JSX element that contains a `div` with a black background color. Inside this `div`, there is another `div` with a grid layout that displays the trading cards in a 3-column layout. \n\nThe `map` method is used to iterate over the `cardlist` array and render an `Image` component for each trading card. The `src` attribute of the `Image` component is set to the `img` property of each object in the `cardlist` array. The `width` and `height` attributes are set to 800 pixels, which is the size of the trading card images. \n\nThis function can be used in the larger `zoo` project to display a collection of trading cards on a webpage. The `cardlist` array can be updated with new trading cards, and the `CardList` function will automatically render the updated list of cards. \n\nExample usage of the `CardList` function:\n\n```\nimport CardList from './CardList';\n\nfunction TradingCardsPage() {\n return (\n \n
\n );\n}\n\nexport default TradingCardsPage;\n```\n\nIn this example, the `TradingCardsPage` component renders a heading and the `CardList` component to display a collection of trading cards.",
- "questions": "1. What is the purpose of this code?\n This code defines a component called `CardList` that renders a grid of trading card images using the Next.js `Image` component.\n\n2. Where are the trading card images sourced from?\n The trading card images are sourced from the `/images` directory, but it is unclear where this directory is located relative to the `zoo` project.\n\n3. Why are there duplicate entries in the `cardlist` array?\n It is unclear why there are duplicate entries for the `img` property in the `cardlist` array. This may be intentional or a mistake that needs to be corrected.",
- "checksum": "fe69e9081c187f75a1e6ac5e5ade3f1d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/collect/Header.json b/.autodoc/docs/json/foundation/src/pages/collect/Header.json
deleted file mode 100644
index 12e6e981d..000000000
--- a/.autodoc/docs/json/foundation/src/pages/collect/Header.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Header.tsx",
- "filePath": "foundation/src/pages/collect/Header.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/collect/Header.tsx",
- "summary": "The `Header` function in this code file is responsible for rendering the header section of the zoo website. It imports two components from the Next.js library, `Link` and `Image`, which are used to create links to different animal pages and display an image of an elephant, respectively. \n\nThe header is contained within a `div` element with a black background color. The header is divided into two sections, which are aligned vertically on smaller screens and horizontally on larger screens. The first section contains a heading that reads \"Animals we support.\" The heading is styled with white text and is responsive, changing size based on the screen size. The second section contains an image of an elephant and a list of links to different animal pages. \n\nThe list of links is created using the `Link` component from Next.js. Each link is styled with white text and has a hover effect. When clicked, the link takes the user to a different page on the website that contains information about the animal. The links are hardcoded in the `Header` function, but they could be generated dynamically based on data from a database or API. \n\nThe `Image` component is used to display an image of an elephant on the right side of the header. The image is responsive and changes size based on the screen size. The `src` attribute specifies the path to the image file, which is located in the `public/images` directory. The `width` and `height` attributes specify the dimensions of the image in pixels. \n\nOverall, the `Header` function is an important component of the zoo website that provides users with easy access to information about different animals. It is responsive and visually appealing, with a black background, white text, and an image of an elephant. The links to different animal pages are hardcoded, but could be generated dynamically based on data from a database or API.",
- "questions": "1. What is the purpose of this code?\n - This code is for rendering the header section of a web page related to a project called zoo. It includes a title and links to different animal pages.\n\n2. What is the role of the `next/link` and `next/image` modules?\n - The `next/link` module is used to create links to different animal pages, while the `next/image` module is used to display an image of a collectible elephant.\n\n3. What is the significance of the class names used in the code?\n - The class names are used for styling the elements using CSS. They are used to specify the layout, font size, padding, margin, and other visual properties of the header and the links.",
- "checksum": "8587d028d5476518fb9a303642b2812d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/collect/Support.json b/.autodoc/docs/json/foundation/src/pages/collect/Support.json
deleted file mode 100644
index 9c56be7f9..000000000
--- a/.autodoc/docs/json/foundation/src/pages/collect/Support.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Support.tsx",
- "filePath": "foundation/src/pages/collect/Support.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/collect/Support.tsx",
- "summary": "The `Support` function in the `zoo` project returns a JSX element that renders a section of the project's website. The purpose of this section is to inform visitors about the project's mission to support endangered species through the sale of digital collectibles. \n\nThe JSX element returned by the `Support` function contains a `div` element with a black background and padding. Inside this `div`, there is another `div` element with a flexbox layout and padding. The `flex` class is used to arrange the child elements of this `div` in a row on larger screens and in a column on smaller screens. \n\nThe `h1` element inside the second `div` contains the main heading of the section, which is displayed in white text and has varying font sizes depending on the screen size. The `p` elements contain paragraphs of text that describe the project's mission and how it works. These paragraphs are also displayed in white text and have varying font sizes depending on the screen size. \n\nThe `Support` function is exported as the default export of the module, which means that it can be imported and used in other parts of the project. For example, if another component needs to display the `Support` section on a different page of the website, it can import the `Support` function and render it as a child element. \n\nHere is an example of how the `Support` function can be used in another component:\n\n```\nimport Support from './Support';\n\nfunction HomePage() {\n return (\n My Trading Cards
\n\n
\n );\n}\n\nexport default HomePage;\n```\n\nIn this example, the `HomePage` component imports the `Support` function from the `Support.js` module and renders it as a child element inside a `div` element. This will display the `Support` section below the main heading of the page.",
- "questions": "1. What is the purpose of this code?\n \n This code defines a React component called `Support` that returns a JSX element representing a section of a webpage related to supporting endangered species through digital collectibles.\n\n2. What libraries or frameworks are being used in this code?\n \n This code is using React, as evidenced by the use of JSX syntax and the `export default` statement at the end of the file. It is also using Tailwind CSS classes to style the HTML elements.\n\n3. What is the expected output of this code?\n \n The expected output of this code is a section of a webpage with a black background, containing a heading and three paragraphs of text in white font. The text describes the purpose and benefits of purchasing digital collectibles to support endangered species, and encourages the reader to take action. The layout of the text is responsive, with different styles applied depending on the screen size.",
- "checksum": "b7ae5f506c363eeca385b49f97d0d6bd"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/collect/TradingCard.json b/.autodoc/docs/json/foundation/src/pages/collect/TradingCard.json
deleted file mode 100644
index 9857a15e6..000000000
--- a/.autodoc/docs/json/foundation/src/pages/collect/TradingCard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TradingCard.tsx",
- "filePath": "foundation/src/pages/collect/TradingCard.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/collect/TradingCard.tsx",
- "summary": "The `TradingCard` function in this file is responsible for rendering a trading card component on a web page. The component includes an image of a trading card, a title, and a description. The purpose of this component is to provide users with a visual representation of the trading cards available on the website and encourage them to explore and learn more about the animals featured on the cards.\n\nThe component is built using the Next.js framework and includes two imported modules: `Image` and `Link`. The `Image` module is used to display the image of the trading card, while the `Link` module is used to create a link to the page where users can view all of the trading cards available on the website.\n\nThe component is structured using HTML-like syntax, with the `className` attribute used to apply CSS classes to the various elements. The `div` element with the class `bg-black` sets the background color of the component to black, while the `h1` element with the class `text-white` sets the color of the text to white.\n\nThe `Image` component is used to display the image of the trading card. The `src` attribute specifies the path to the image file, while the `width` and `height` attributes set the dimensions of the image. The `alt` attribute is left blank, indicating that the image is purely decorative and does not require an alternative text description.\n\nThe `Link` component is used to create a link to the page where users can view all of the trading cards available on the website. The `href` attribute specifies the URL of the page, while the `className` attribute applies CSS classes to the link. The link includes a text label and an SVG icon, which are styled using CSS.\n\nOverall, the `TradingCard` component is a simple but effective way to showcase the trading cards available on the website and encourage users to explore and learn more about the animals featured on the cards. It can be easily integrated into the larger project by importing and rendering the component wherever trading cards are displayed. For example:\n\n```\nimport TradingCard from './TradingCard';\n\nfunction TradingCardPage() {\n return (\n Welcome to the Zoo Project
\n\n
\n );\n}\n\nexport default TradingCardPage;\n```",
- "questions": "1. What is the purpose of this code?\n- This code is for a TradingCard component that displays an image of a trading card and some text, with a link to view all cards.\n\n2. What libraries or frameworks are being used in this code?\n- This code is using the Next.js framework and the Image and Link components from the Next.js library.\n\n3. What is the expected output of this code?\n- The expected output of this code is a TradingCard component that displays an image of a trading card, some text, and a link to view all cards. The component is styled with some responsive design using CSS classes.",
- "checksum": "f67246944c2b2c23fc00a392ba6d4047"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/collect/index.json b/.autodoc/docs/json/foundation/src/pages/collect/index.json
deleted file mode 100644
index 787acc22c..000000000
--- a/.autodoc/docs/json/foundation/src/pages/collect/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "foundation/src/pages/collect/index.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/collect/index.tsx",
- "summary": "This code defines the `HomePage` component for the `zoo` project. The component is a functional component that returns a JSX expression. The purpose of this component is to render the entire home page of the `zoo` website. \n\nThe `HomePage` component imports various components from the `@/components` and `@/pages` directories. These components include `Layout`, `Seo`, `Navbar`, `Header`, `Aiding`, `TradingCard`, `CardList`, `Support`, `Animal_Item`, `Animals`, `Donation`, `Volunteer`, `StartCollecting`, `Campaign`, `Newsletter`, and `Footer`. \n\nThe `Layout` component is a higher-order component that wraps the entire page content. The `Seo` component is responsible for setting the meta tags for the page. The `Navbar` component renders the navigation bar for the website. The `Header` component renders the header section of the home page. The `Aiding`, `TradingCard`, `CardList`, and `Support` components render various sections of the home page related to collecting and trading cards. The `Animal_Item` and `Animals` components render the details of individual animals and a list of animals, respectively. The `Donation` and `Volunteer` components render sections related to donations and volunteering. The `StartCollecting` component renders a section that encourages users to start collecting cards. The `Campaign` component renders a section related to ongoing campaigns. The `Newsletter` component renders a section for subscribing to the newsletter. The `Footer` component renders the footer section of the home page.\n\nThis `HomePage` component is used as the main entry point for the home page of the `zoo` website. It imports and renders all the necessary components to display the entire home page. \n\nExample usage:\n```jsx\nimport HomePage from '@/pages/HomePage';\n\nfunction App() {\n return (\n Trading Cards
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `Layout` component being imported?\n- The `Layout` component is likely responsible for providing a consistent layout structure for the entire application.\n\n2. What is the difference between the `Animal_Item` and `Animals` components?\n- Without further context, it is unclear what the difference is between these two components. It is possible that `Animal_Item` is responsible for rendering a single animal detail, while `Animals` is responsible for rendering a list of animals.\n\n3. What is the purpose of the `TradingCard`, `CardList`, and `Support` components?\n- Without further context, it is unclear what the purpose of these components is. It is possible that they are related to a feature for collecting or trading animal-themed cards.",
- "checksum": "931b509bcec4a52e3f4dfae3f639c49a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/donation/Header.json b/.autodoc/docs/json/foundation/src/pages/donation/Header.json
deleted file mode 100644
index 519a5be7c..000000000
--- a/.autodoc/docs/json/foundation/src/pages/donation/Header.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Header.tsx",
- "filePath": "foundation/src/pages/donation/Header.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/donation/Header.tsx",
- "summary": "The `Header` function in this code file is a React component that renders a donation header for the Zoo Labs Foundation website. The component imports the `useState` hook from React and the `Image` component from the `next/image` library. It also imports the `Switch` component from the `react-switch` library.\n\nThe `Header` function returns a JSX element that contains the donation header. The header is divided into two sections: the left section contains the donation form and the right section contains an image. The left section is further divided into four parts: a title, a heading, a paragraph, and a donation form.\n\nThe title is a short statement that reads \"End the road to extinction\". The heading is a call to action that reads \"Donate to the Zoo Labs Foundation\". The paragraph is a description of the foundation's mission and purpose. The donation form contains three elements: a switch, an input field, and a button.\n\nThe switch is a toggle button that allows the user to switch between a one-time donation and a monthly donation. The input field allows the user to enter the amount they wish to donate. The button is a call to action that reads \"Donate Now\".\n\nThe right section contains an image that is floated to the right. The image is a visual representation of the foundation's mission and purpose.\n\nThe `Header` function exports the component so that it can be used in other parts of the Zoo Labs Foundation website. For example, the component can be imported into the homepage of the website and rendered as a header at the top of the page.\n\nHere is an example of how the `Header` component can be used in a React application:\n\n```\nimport React from 'react';\nimport Header from './Header';\n\nfunction App() {\n return (\n \n
\n );\n}\n\nexport default App;\n```",
- "questions": "1. What is the purpose of the `Switch` component and how does it work?\n - The `Switch` component is used to toggle between monthly and one-time donations. It works by calling the `handleChange` function when it is toggled, which updates the `checked` state variable.\n2. What is the purpose of the `Image` component and how is it positioned on the page?\n - The `Image` component is used to display an image of a donation header. It is positioned on the right side of the page using the `float-right` class.\n3. What is the purpose of the `useState` hook and how is it used in this code?\n - The `useState` hook is used to create a state variable called `checked` and a function called `setChecked` to update it. It is used to keep track of whether the monthly donation switch is toggled on or off.",
- "checksum": "0652f3e8e98806d0532f789d85f971b3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/donation/index.json b/.autodoc/docs/json/foundation/src/pages/donation/index.json
deleted file mode 100644
index 3b93eca88..000000000
--- a/.autodoc/docs/json/foundation/src/pages/donation/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "foundation/src/pages/donation/index.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/donation/index.tsx",
- "summary": "This code is a React component that renders the homepage of a website. It imports several components from the project's source code and uses them to build the page layout. \n\nThe `Layout` component is the top-level container for the page, and it wraps all the other components. The `Seo` component is responsible for setting the metadata for the page, such as the title and description. The `Navbar` component is the website's navigation menu, and it provides links to other pages on the site. The `Header` component is a custom component that displays a banner image and some text. The `StartCollecting` component is a form that allows users to donate money to the website. The `Campaign` component displays information about the website's current fundraising campaign. The `Newsletter` component is a form that allows users to sign up for the website's newsletter. Finally, the `Footer` component contains links to social media and other information about the website.\n\nThis component is likely used as the main entry point for the website, and it is responsible for rendering the content that users see when they first visit the site. Other components and pages may be linked to from this page, but this component is the starting point for the user's journey through the site.\n\nHere is an example of how this component might be used in a larger project:\n\n```jsx\nimport * as React from 'react';\nimport { BrowserRouter as Router, Switch, Route } from 'react-router-dom';\n\nimport HomePage from '@/pages/HomePage';\nimport AboutPage from '@/pages/AboutPage';\nimport ContactPage from '@/pages/ContactPage';\n\nexport default function App() {\n return (\n Welcome to the Zoo Labs Foundation website!
\n\n
\n );\n}\n```\n\nThis will render the `Header` component at the top of the `MyPage` component.\n\nOverall, this code demonstrates how React components can be used to create reusable UI elements that can be composed together to build complex web pages. The use of the Next.js `Image` component also shows how images can be optimized for performance and accessibility in a Next.js project.",
- "questions": "1. What is the purpose of the `Image` import from 'next/image'?\n - The `Image` import is used to display an image on the webpage with optimized performance and accessibility.\n\n2. What is the significance of the `className` attributes used in the `div` and `h1` tags?\n - The `className` attributes are used to apply CSS styles to the corresponding HTML elements.\n\n3. What is the purpose of the `export default Header` statement at the end of the code?\n - The `export default` statement is used to export the `Header` function as the default export of this module, allowing it to be imported and used in other parts of the project.",
- "checksum": "55c1eb34dd98d2a5985743e141a0a6b4"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/getinvolved/index.json b/.autodoc/docs/json/foundation/src/pages/getinvolved/index.json
deleted file mode 100644
index 8b5e9259c..000000000
--- a/.autodoc/docs/json/foundation/src/pages/getinvolved/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "foundation/src/pages/getinvolved/index.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/getinvolved/index.tsx",
- "summary": "This code defines the homepage of the Zoo project, a website dedicated to conservation efforts for endangered species. The code imports various React components from the project's components directory and renders them within a Layout component. \n\nThe rendered components include a Navbar, Seo, Header, InvolvedContent, Comments, Donation, Volunteer, StartCollecting, Campaign, Newsletter, and Footer. These components provide information about the Zoo's conservation programs, on-the-ground activities, animal rescue efforts, data collection, legal policies, and opportunities for involvement through volunteering, donating, and collecting.\n\nThe InvolvedContent component is used multiple times to display information about the Zoo's various initiatives. It takes in props such as an image, title, and content and renders them in a specific layout based on the type and direction props. The Comments component allows users to leave comments on the page, while the Donation and Volunteer components provide ways for users to contribute to the Zoo's efforts.\n\nOverall, this code defines the structure and content of the Zoo project's homepage, providing users with information about the organization's conservation efforts and ways to get involved. It can be used as a starting point for further development of the project's website and can be customized to fit the specific needs of the organization. \n\nExample usage:\n```\nimport HomePage from '@/pages/HomePage';\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What components are being imported and used in this code?\n- The code is importing and using various components such as Layout, Seo, Navbar, Header, InvolvedContent, Comments, Donation, Volunteer, StartCollecting, Campaign, Newsletter, and Footer.\n\n2. What is the purpose of this code?\n- This code is rendering a homepage for the Zoo Labs Foundation website, which includes various sections such as information about their conservation programs, on-ground activities, rescuing animals, collecting data, legal avenues, and ways to get involved through volunteering, donating, and signing up for their newsletter.\n\n3. What is the significance of the \"type\" and \"direction\" props being passed to the InvolvedContent component?\n- The \"type\" prop is used to determine the layout of the InvolvedContent component, with a value of 1 indicating a left-aligned layout and a value of 2 indicating a right-aligned layout. The \"direction\" prop is used to determine the order in which the image and content are displayed, with a value of 1 indicating that the image is displayed before the content and a value of 2 indicating that the content is displayed before the image.",
- "checksum": "0964dc44ad8507ee8660dad171ca2e43"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/index.json b/.autodoc/docs/json/foundation/src/pages/index.json
deleted file mode 100644
index 2a6abfb79..000000000
--- a/.autodoc/docs/json/foundation/src/pages/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "foundation/src/pages/index.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/index.tsx",
- "summary": "This code defines the `HomePage` component for the `zoo` project. The component is a functional component that returns a JSX element. The `HomePage` component is composed of several other components imported from the `@/components` directory. \n\nThe `Layout` component is the top-level component that wraps all the other components. It provides a consistent layout for the entire page. The `Seo` component is used to set the metadata for the page, such as the title and description. The `Navbar` component is the navigation bar that appears at the top of the page. \n\nThe `Intro` component is used to display an introduction to the page. It takes in several props, including `breadcrumbs`, `title`, and `comment`, which are used to customize the content of the component. The `Comment` component is a section for user comments. The `Principles` component displays the guiding principles of the `zoo` project. The `Donation` component is used to solicit donations from users. \n\nThe `AnimalDetail` component is used to display detailed information about a specific animal. It is wrapped in a `div` with a black background. The `AnimalItems` component displays a list of animals with brief descriptions. The `Safeguard` component displays information about how the `zoo` project is safeguarding wildlife. The `StartCollecting` component is used to encourage users to start collecting donations. The `Newsletter` component is used to encourage users to sign up for the `zoo` project's newsletter. The `Footer` component is the footer that appears at the bottom of the page. \n\nOverall, the `HomePage` component is the main landing page for the `zoo` project. It provides an overview of the project's mission, principles, and activities. It also provides users with opportunities to donate, learn more about specific animals, and sign up for the newsletter. The component is composed of several smaller components that are used to display specific types of content. \n\nExample usage:\n\n```jsx\nimport HomePage from '@/pages/HomePage';\n\nfunction App() {\n return (\n \n
\n );\n}\n```",
- "questions": "1. What components are being imported and used in this file?\n- The file is importing and using various components such as Layout, Intro, Seo, Navbar, Comment, Principles, Donation, AnimalDetail, AnimalItems, Safeguard, StartCollecting, Newsletter, and Footer.\n\n2. What is the purpose of the HomePage function?\n- The HomePage function is the default export of the file and it returns a JSX element that renders the imported components in a specific order to create the homepage of the website.\n\n3. What is the significance of the \"breadcrumbs\" and \"comment\" props passed to the Intro component?\n- The \"breadcrumbs\" prop is used to display the hierarchy of the website and the \"comment\" prop is used to display a short description of the foundation's mission. These props are used to provide context and information to the user about the website and its purpose.",
- "checksum": "50e47466719ce8f9096429793f74a6ba"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/foundation/src/pages/terms/index.json b/.autodoc/docs/json/foundation/src/pages/terms/index.json
deleted file mode 100644
index 0921634fd..000000000
--- a/.autodoc/docs/json/foundation/src/pages/terms/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "foundation/src/pages/terms/index.tsx",
- "url": "zoo-labs/zoo/blob/master/foundation/src/pages/terms/index.tsx",
- "summary": "This code defines the homepage of the Zoo Labs Foundation website. The purpose of this code is to display the Privacy Policy of the organization. The code imports several components from the `@/components` directory, including `Layout`, `Seo`, `Navbar`, `Newsletter`, and `Footer`. These components are used to structure the page and provide additional functionality, such as search engine optimization and email newsletter subscription.\n\nThe `HomePage` function returns a JSX element that contains the imported components and the Privacy Policy content. The content is structured using HTML tags and CSS classes to define the layout and styling of the page. The Privacy Policy content is divided into sections that explain how the organization collects, uses, and protects personal information. The content also includes information about user rights and choices, as well as contact information for the organization.\n\nThis code can be used as a template for other pages on the Zoo Labs Foundation website. By importing and using the `Layout`, `Seo`, `Navbar`, `Newsletter`, and `Footer` components, other pages can be structured and styled consistently with the homepage. The Privacy Policy content can also be modified to create other legal documents, such as Terms of Service or a CCPA Privacy Notice for California Residents.\n\nHere is an example of how this code can be used to create a Terms of Service page:\n\n```\nimport * as React from 'react';\n\nimport Layout from '@/components/layout/Layout';\nimport Seo from '@/components/Seo';\nimport Navbar from '@/components/Navbar';\nimport Newsletter from '@/components/Newsletter';\nimport Footer from '@/components/Footer';\n\nexport default function TermsOfServicePage() {\n return (\n \n
\n Terms of Service
\n\n This is the Terms of Service page for Zoo Labs Foundation. By using our website or services, you agree to the terms of this agreement. We may update this agreement from time to time, so please review it periodically to stay informed about any changes.
\n 1. Acceptance of Terms
\nBy using our website or services, you agree to the terms of this agreement. If you do not agree to these terms, you should not use our website or services.
\n2. Use of Website and Services
\nYou may use our website and services only for lawful purposes and in accordance with these terms. You agree not to use our website or services:
\n(a) In any way that violates any applicable federal, state, local, or international law or regulation.
\n(b) To engage in any conduct that restricts or inhibits anyone's use or enjoyment of the website or services, or which, as determined by us, may harm Zoo Labs Foundation or users of the website or services or expose them to liability.
\n(c) To impersonate or attempt to impersonate Zoo Labs Foundation, a Zoo Labs Foundation employee, another user, or any other person or entity.
\n(d) To engage in any other conduct that restricts or inhibits anyone's use or enjoyment of the website or services, or which, as determined by us, may harm Zoo Labs Foundation or users of the website or services or expose them to liability.
\n3. Intellectual Property
\nThe website and its entire contents, features, and functionality (including but not limited to all information, software, text, displays, images, video, and audio, and the design, selection, and arrangement thereof), are owned by Zoo Labs Foundation, its licensors, or other providers of such material and are protected by United States and international copyright, trademark, patent, trade secret, and other intellectual property or proprietary rights laws.
\n4. Disclaimer of Warranties
\nYOUR USE OF THE WEBSITE, ITS CONTENT, AND ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE IS AT YOUR OWN RISK. THE WEBSITE, ITS CONTENT, AND ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE ARE PROVIDED ON AN \"AS IS\" AND \"AS AVAILABLE\" BASIS, WITHOUT ANY WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED. NEITHER ZOO LABS FOUNDATION NOR ANY PERSON ASSOCIATED WITH ZOO LABS FOUNDATION MAKES ANY WARRANTY OR REPRESENTATION WITH RESPECT TO THE COMPLETENESS, SECURITY, RELIABILITY, QUALITY, ACCURACY, OR AVAILABILITY OF THE WEBSITE. WITHOUT LIMITING THE FOREGOING, NEITHER ZOO LABS FOUNDATION NOR ANYONE ASSOCIATED WITH ZOO LABS FOUNDATION REPRESENTS OR WARRANTS THAT THE WEBSITE, ITS CONTENT, OR ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE WILL BE ACCURATE, RELIABLE, ERROR-FREE, OR UNINTERRUPTED, THAT DEFECTS WILL BE CORRECTED, THAT OUR SITE OR THE SERVER THAT MAKES IT AVAILABLE ARE FREE OF VIRUSES OR OTHER HARMFUL COMPONENTS, OR THAT THE WEBSITE OR ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE WILL OTHERWISE MEET YOUR NEEDS OR EXPECTATIONS.
\n5. Limitation of Liability
\nIN NO EVENT WILL ZOO LABS FOUNDATION, ITS AFFILIATES, OR THEIR LICENSORS, SERVICE PROVIDERS, EMPLOYEES, AGENTS, OFFICERS, OR DIRECTORS BE LIABLE FOR DAMAGES OF ANY KIND, UNDER ANY LEGAL THEORY, ARISING OUT OF OR IN CONNECTION WITH YOUR USE, OR INABILITY TO USE, THE WEBSITE, ANY WEBSITES LINKED TO IT, ANY CONTENT ON THE WEBSITE OR SUCH OTHER WEBSITES, INCLUDING ANY DIRECT, INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, INCLUDING BUT NOT LIMITED TO, PERSONAL INJURY, PAIN AND SUFFERING, EMOTIONAL DISTRESS, LOSS OF REVENUE, LOSS OF PROFITS, LOSS OF BUSINESS OR ANTICIPATED SAVINGS, LOSS OF USE, LOSS OF GOODWILL, LOSS OF DATA, AND WHETHER CAUSED BY TORT (INCLUDING NEGLIGENCE), BREACH OF CONTRACT, OR OTHERWISE, EVEN IF FORESEEABLE.
\n6. Indemnification
\nYou agree to defend, indemnify, and hold harmless Zoo Labs Foundation, its affiliates, licensors, and service providers, and its and their respective officers, directors, employees, contractors, agents, licensors, suppliers, successors, and assigns from and against any claims, liabilities, damages, judgments, awards, losses, costs, expenses, or fees (including reasonable attorneys' fees) arising out of or relating to your violation of these terms or your use of the website or services, including, but not limited to, any use of the website's content, services, and products other than as expressly authorized in these terms or your use of any information obtained from the website.
\n7. Governing Law and Jurisdiction
\nAll matters relating to the website and these terms and any dispute or claim arising therefrom or related thereto (in each case, including non-contractual disputes or claims), shall be governed by and construed in accordance with the internal laws of the State of California without giving effect to any choice or conflict of law provision or rule (whether of the State of California or any other jurisdiction). Any legal suit, action, or proceeding arising out of, or related to, these terms or the website shall be instituted exclusively in the federal courts of the United States or the courts of the State of California in each case located in the City and County of San Francisco although we retain the right to bring any suit, action, or proceeding against you for breach of these terms in your country of residence or any other relevant country. You waive any and all objections to the exercise of jurisdiction over you by such courts and to venue in such courts.
\n8. Changes to These Terms
\nWe may revise and update these terms from time to time in our sole discretion. All changes are effective immediately when we post them, and apply to all access to and use of the website thereafter. Your continued use of the website following the posting of revised terms means that you accept and agree to the changes. You are expected to check this page from time to time so you are aware of any changes, as they are binding on you.
\n9. Contact Us
\nIf you have any questions, concerns, or requests regarding these terms or our privacy practices, please contact us at:\nZoo Labs Foundation
\n\nhello@zoo.ngo
\n415-373-2496
\n\nWe will make every effort to respond to your inquiries and address any concerns as quickly as possible.
\n\n
Welcome to my web page!
\nThis is some sample text.
\n \n\n```\n\nIn this example, the font file is preloaded using the `link` element with the `rel` attribute set to \"preload\". This tells the browser to fetch the font file as soon as possible, but not to block the rendering of the page. The `as` attribute is set to \"font\" to indicate that this is a font file, and the `type` attribute is set to \"font/woff2\" to specify the file type. The `crossorigin` attribute is included to allow the font file to be loaded from a different domain if necessary.\n\nOverall, this code is a small but important part of a larger project that aims to optimize the performance of a web page by reducing the number of requests made to the server. By specifying a cache control directive for the font file, the browser can store it locally and avoid requesting it from the server on subsequent page loads, resulting in faster page load times and a better user experience.", - "questions": "1. What is the purpose of this code?\n This code defines a JSON object with a single header that specifies the cache control settings for a font file.\n\n2. Where is this code used in the project?\n It is unclear where this code is used in the project without additional context.\n\n3. Are there any other headers or files that have cache control settings defined?\n It is unclear if there are any other headers or files with cache control settings defined without additional context or inspection of other files in the project.", - "checksum": "78b14238e33d0b5e0c796bf8659b7960" -} \ No newline at end of file diff --git a/.autodoc/docs/json/lab/gulpfile.json b/.autodoc/docs/json/lab/gulpfile.json deleted file mode 100644 index 7d99159f4..000000000 --- a/.autodoc/docs/json/lab/gulpfile.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "gulpfile.js", - "filePath": "lab/gulpfile.js", - "url": "zoo-labs/zoo/blob/master/lab/gulpfile.js", - "summary": "This code is a Gulp task that compiles Less files into CSS, applies PostCSS plugins, and minifies the resulting CSS using the csso plugin. The compiled CSS is then saved to the `public` directory. \n\nThe task starts by requiring the necessary dependencies: `gulp`, `gulp-less`, `gulp-postcss`, `gulp-debug`, `gulp-csso`, `autoprefixer`, and `less-plugin-npm-import`. \n\nThe `gulp.task` function defines a new task called `less`. This task takes all Less files in the `src/themes` directory that end with `-theme.less` and compiles them into CSS. The `debug` function is used to log the names of the Less files being processed. \n\nThe `gulpless` function is used to compile the Less files into CSS. The `javascriptEnabled` option is set to `true` to enable JavaScript evaluation in Less files. The `less-plugin-npm-import` plugin is used to allow importing of Less files from installed npm packages using the `~` prefix. \n\nThe resulting CSS is then piped through the `postcss` function, which applies the `autoprefixer` plugin to add vendor prefixes to CSS rules. \n\nFinally, the `csso` function is used to minify the CSS. The `debug` option is set to `true` to log the size reduction achieved by the minification. \n\nThe resulting CSS is saved to the `public` directory using the `gulp.dest` function. \n\nThis task can be used as part of a larger build process for a web application that uses Less for styling. It allows developers to write Less code and have it automatically compiled and minified into CSS that is ready for production use. \n\nExample usage:\n\n```\n// gulpfile.js\n\nconst gulp = require('gulp');\nconst lessTask = require('./zoo/less-task');\n\ngulp.task('build', gulp.series(lessTask));\n```\n\nThis code defines a `build` task that runs the `less` task defined in the `less-task.js` file located in the `zoo` directory. When the `build` task is run, all Less files in the `src/themes` directory are compiled and minified into CSS and saved to the `public` directory.", - "questions": "1. What is the purpose of this code?\n This code is a Gulp task that compiles Less files into CSS, applies PostCSS plugins, and minifies the resulting CSS before outputting it to a `public` directory.\n\n2. What are the dependencies required for this code to run?\n This code requires several dependencies to run, including `gulp`, `gulp-less`, `gulp-postcss`, `gulp-debug`, `gulp-csso`, `autoprefixer`, and `less-plugin-npm-import`.\n\n3. What is the input and output of this code?\n The input of this code is any Less files located in the `src/themes` directory that match the pattern `*-theme.less`. The output of this code is minified CSS files that are output to the `public` directory.", - "checksum": "a3c62c455d3b001f2bba7c4bc16270f4" -} \ No newline at end of file diff --git a/.autodoc/docs/json/lab/public/index.json b/.autodoc/docs/json/lab/public/index.json deleted file mode 100644 index 029c5a8d4..000000000 --- a/.autodoc/docs/json/lab/public/index.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "index.html", - "filePath": "lab/public/index.html", - "url": "zoo-labs/zoo/blob/master/lab/public/index.html", - "summary": "This code is an HTML template file for a web application called \"Lab\". The file contains metadata and links to various resources that are used by the web application. The purpose of this file is to provide a basic structure for the web application and to ensure that all necessary resources are included.\n\nThe file starts with a DOCTYPE declaration that specifies the version of HTML being used. The next section contains the head element, which includes various meta tags that provide information about the web application, such as the character set, viewport settings, and theme color. The head element also includes links to the favicon and apple-touch-icon, which are small images that are used to represent the web application in the browser and on mobile devices.\n\nThe next section of the file includes a link to the manifest.json file, which provides metadata about the web application that is used when it is installed on a user's device. The manifest.json file includes information such as the name of the web application, its icons, and its start URL.\n\nThe body element of the file contains a div element with an id of \"root\". This is where the content of the web application will be rendered. The file also includes a noscript element that displays a message if JavaScript is not enabled in the user's browser.\n\nFinally, the file includes a comment that provides instructions for starting the development server and building the web application for production.\n\nOverall, this file is an essential part of the web application and provides a basic structure and necessary resources for the application to function properly. Developers can use this file as a starting point for building their web application and customize it as needed. For example, they can add additional meta tags, links to external resources, and modify the content of the body element to create a unique user interface.", - "questions": "1. What is the purpose of this HTML file?\n \n This HTML file serves as a template for a web app created using scaffold-eth, with metadata for mobile devices and desktops, and a title of \"Lab\".\n\n2. What is the significance of the %PUBLIC_URL% placeholder in the code?\n \n The %PUBLIC_URL% placeholder is used to reference files inside the `public` folder during the build, and will be replaced with the URL of the `public` folder. This allows for correct referencing of files with client-side routing and a non-root public URL.\n\n3. What are the recommended commands for development and production of this web app?\n \n The recommended commands for development are `npm start` or `yarn start`, and for production are `npm run build` or `yarn build`.", - "checksum": "9e542d2c2949f0c657ef1ac3337d0d2d" -} \ No newline at end of file diff --git a/.autodoc/docs/json/lab/public/manifest.json b/.autodoc/docs/json/lab/public/manifest.json deleted file mode 100644 index 5b3e67a96..000000000 --- a/.autodoc/docs/json/lab/public/manifest.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "manifest.json", - "filePath": "lab/public/manifest.json", - "url": "zoo-labs/zoo/blob/master/lab/public/manifest.json", - "summary": "This code is a JSON object that defines the configuration for a web application. Specifically, it sets the metadata for the application's icons, name, start URL, display mode, and theme and background colors. \n\nThe `short_name` and `name` properties define the name of the application, with the former being a shorter version that may be used in places where space is limited. The `icons` property is an array of objects that define the icons for the application, with each object specifying the source file, size, and type. This allows the application to have different icons for different devices and contexts. \n\nThe `start_url` property specifies the URL that the application should load when it is launched. In this case, it is set to \".\" which means the application will load the index.html file in the root directory. \n\nThe `display` property specifies the display mode for the application, with \"standalone\" meaning that the application should be launched in its own window without any browser UI. This is useful for creating web applications that look and feel like native applications. \n\nThe `theme_color` and `background_color` properties define the colors for the application's theme and background, respectively. These colors can be used to customize the appearance of the application and provide a consistent look and feel across different devices and platforms. \n\nOverall, this code is an important part of the configuration for a web application and helps to ensure that the application looks and behaves consistently across different devices and contexts. Here is an example of how this code might be used in an HTML file:\n\n```html\n\n\n \n \n \nWelcome to My App
\nThis is a web application that uses the latest web technologies.
\n \n\n```\n\nIn this example, the `link` element specifies the location of the `manifest.json` file that contains the configuration for the application. This allows the browser to load the correct icons and other metadata for the application.", - "questions": "1. What is the purpose of this code?\n This code is a JSON file that defines the metadata for a web application, including its name, icons, start URL, and display settings.\n\n2. What is the significance of the different icon sizes and types?\n The different icon sizes and types allow the web application to be displayed properly on different devices and platforms, such as desktops, mobile devices, and browsers.\n\n3. What is the difference between \"display\" and \"background_color\"?\n \"Display\" refers to how the web application should be displayed to the user, such as in a standalone window or as part of a browser tab. \"Background_color\" refers to the color of the background of the web application.", - "checksum": "39ebd33361817aea509cbac2cf419033" -} \ No newline at end of file diff --git a/.autodoc/docs/json/lab/public/robots.json b/.autodoc/docs/json/lab/public/robots.json deleted file mode 100644 index 4bceb8c33..000000000 --- a/.autodoc/docs/json/lab/public/robots.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "robots.txt", - "filePath": "lab/public/robots.txt", - "url": "zoo-labs/zoo/blob/master/lab/public/robots.txt", - "summary": "This code is a standard robots.txt file that is used to communicate with web crawlers and search engines about which pages or sections of a website should be crawled and indexed. The file starts with a comment that provides a link to the official documentation for the robots.txt protocol.\n\nThe first line of the file specifies the user-agent that the following rules apply to. In this case, the wildcard symbol (*) is used to indicate that the rules apply to all user-agents. \n\nThe following lines contain the rules for the web crawlers and search engines. Each rule consists of a directive and a value. The most common directives are \"Disallow\" and \"Allow\". The \"Disallow\" directive tells the web crawler not to crawl a specific page or section of the website, while the \"Allow\" directive tells the web crawler that it is allowed to crawl a specific page or section of the website.\n\nIn this specific file, there are no rules specified, which means that all pages and sections of the website are allowed to be crawled by any web crawler or search engine.\n\nThis file is an important part of any website as it helps to ensure that search engines are able to crawl and index the website correctly. Without a robots.txt file, search engines may crawl and index pages that should not be visible to the public, such as admin pages or pages with sensitive information.\n\nAn example of how this file can be used in the larger project is to specify rules for specific user-agents. For example, if there is a web crawler that is causing issues with the website, the robots.txt file can be updated to disallow that specific user-agent from crawling the website. This can help to improve the performance and security of the website.", - "questions": "1. What is the purpose of this code and how does it relate to the overall functionality of the zoo project?\n - This code is the contents of a `robots.txt` file, which is used to instruct web crawlers on which pages of a website they are allowed to access. It is important for the SEO and security of the website, but does not directly relate to the functionality of the zoo project.\n \n2. Why is the `User-agent: *` line included and what does it mean?\n - The `User-agent: *` line specifies that the following rules apply to all web crawlers. This means that any crawler that accesses the website will be subject to the rules outlined in the `robots.txt` file.\n \n3. Are there any other rules or directives that could be included in this `robots.txt` file?\n - Yes, there are several other directives that can be included in a `robots.txt` file, such as `Disallow` to block specific pages or directories, `Allow` to override a `Disallow` directive, and `Sitemap` to specify the location of the website's sitemap. However, it is up to the website owner to determine which directives are necessary for their specific website.", - "checksum": "c7397796d19d876ede3a9fc669bf6a60" -} \ No newline at end of file diff --git a/.autodoc/docs/json/lab/scripts/create_contracts.json b/.autodoc/docs/json/lab/scripts/create_contracts.json deleted file mode 100644 index 8093e952f..000000000 --- a/.autodoc/docs/json/lab/scripts/create_contracts.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "create_contracts.js", - "filePath": "lab/scripts/create_contracts.js", - "url": "zoo-labs/zoo/blob/master/lab/scripts/create_contracts.js", - "summary": "This code checks if a file called \"hardhat_contracts.json\" exists in the \"./src/contracts/\" directory. If the file does not exist, the code creates an empty JSON object and writes it to the file. \n\nThis code is likely used in a larger project to ensure that a specific file exists and is properly formatted before other parts of the project attempt to read from or write to it. The file \"hardhat_contracts.json\" may contain important information or configurations for the project, and this code ensures that it is present and ready to be used. \n\nHere is an example of how this code may be used in a larger project:\n\n```javascript\nconst fs = require(\"fs\");\n\nfunction readContracts() {\n let contracts = {};\n\n if (fs.existsSync(\"./src/contracts/hardhat_contracts.json\")) {\n try {\n contracts = JSON.parse(fs.readFileSync(\"./src/contracts/hardhat_contracts.json\"));\n } catch (error) {\n console.log(error);\n }\n } else {\n console.log(\"src/contracts/hardhat_contracts.json not found.\");\n }\n\n return contracts;\n}\n\nfunction writeContracts(contracts) {\n try {\n fs.writeFileSync(\"./src/contracts/hardhat_contracts.json\", JSON.stringify(contracts));\n console.log(\"src/contracts/hardhat_contracts.json updated.\");\n } catch (error) {\n console.log(error);\n }\n}\n\nlet contracts = readContracts();\n\n// Do something with contracts...\n\nwriteContracts(contracts);\n```\n\nIn this example, the `readContracts` function first checks if the \"hardhat_contracts.json\" file exists and is properly formatted. If it is, the function reads the contents of the file and returns it as a JSON object. If the file does not exist or is not properly formatted, the function returns an empty object.\n\nThe `writeContracts` function takes a JSON object as an argument and writes it to the \"hardhat_contracts.json\" file. \n\nThe `contracts` variable is initialized by calling `readContracts`, and then some operation is performed on it. Finally, the updated `contracts` object is written back to the \"hardhat_contracts.json\" file by calling `writeContracts`. \n\nOverall, this code ensures that the \"hardhat_contracts.json\" file exists and is properly formatted, allowing other parts of the project to safely read from and write to it.", - "questions": "1. What is the purpose of this code?\n This code checks if a file called \"hardhat_contracts.json\" exists in the \"./src/contracts/\" directory, and if it doesn't, it creates an empty JSON file with that name.\n\n2. What happens if there is an error while writing the file?\n If there is an error while writing the file, the error message will be logged to the console.\n\n3. What is the expected output of this code?\n If the file doesn't exist and is successfully created, the message \"src/contracts/hardhat_contracts.json created.\" will be logged to the console. If the file already exists, nothing will happen. If there is an error while writing the file, the error message will be logged to the console.", - "checksum": "ed362f0bc90380f5609b8a97282eb4df" -} \ No newline at end of file diff --git a/.autodoc/docs/json/lab/scripts/ipfs.json b/.autodoc/docs/json/lab/scripts/ipfs.json deleted file mode 100644 index a594f5040..000000000 --- a/.autodoc/docs/json/lab/scripts/ipfs.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "ipfs.js", - "filePath": "lab/scripts/ipfs.js", - "url": "zoo-labs/zoo/blob/master/lab/scripts/ipfs.js", - "summary": "This code is a script that deploys a web application to the InterPlanetary File System (IPFS) and publishes it to the IPNS (InterPlanetary Name System). IPFS is a distributed file system that allows users to store and access files in a decentralized manner. IPNS is a naming system built on top of IPFS that allows users to create human-readable names for IPFS content.\n\nThe script uses the ipfs-http-client library to interact with the IPFS network. It also uses the chalk and readline libraries for console output formatting. The script defines the IPFS gateway and IPNS gateway URLs, as well as the options for adding files to IPFS.\n\nThe `pushDirectoryToIPFS` function takes a path to a directory and recursively adds its contents to IPFS using the `ipfs.add` method. The function returns the response from IPFS, which includes the content identifier (CID) of the added content.\n\nThe `publishHashToIPNS` function takes an IPFS hash (CID) and publishes it to IPNS using the `ipfs.name.publish` method. The function returns the response from IPFS, which includes the IPNS name.\n\nThe `nodeMayAllowPublish` function checks if the IPFS node allows publishing IPNS names. It does this by comparing the node's host URL to a blacklist of known nodes that do not allow IPNS publishing.\n\nThe `deploy` function deploys the web application to IPFS and publishes it to IPNS. It first adds the contents of the `./build` directory to IPFS using `pushDirectoryToIPFS`. If the add operation fails, the function returns false. Otherwise, it publishes the IPFS hash to IPNS using `publishHashToIPNS` if the IPFS node allows it. Finally, the function outputs the IPFS and IPNS URLs for accessing the deployed application.\n\nTo use this script, the user needs to have an IPFS node running. They can then run the script to deploy their web application to IPFS and publish it to IPNS. The script can be integrated into a larger project as part of a continuous deployment pipeline to automatically deploy new versions of the application to IPFS and IPNS.", - "questions": "1. What is the purpose of this code?\n \n This code is used to deploy an application to IPFS (InterPlanetary File System) and publish it to IPNS (InterPlanetary Name System) for easy access.\n\n2. What are the dependencies of this code?\n \n This code depends on the `ipfs-http-client`, `chalk`, and `readline` packages.\n\n3. What is the difference between IPFS and IPNS?\n \n IPFS is a distributed file system that allows users to store and access files in a decentralized manner, while IPNS is a naming system that allows users to assign human-readable names to IPFS content. IPNS names can be updated to point to new content, while IPFS content is immutable.", - "checksum": "441044fd027ef487351330aff7c75d6a" -} \ No newline at end of file diff --git a/.autodoc/docs/json/lab/scripts/s3.json b/.autodoc/docs/json/lab/scripts/s3.json deleted file mode 100644 index a81a80f14..000000000 --- a/.autodoc/docs/json/lab/scripts/s3.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "s3.js", - "filePath": "lab/scripts/s3.js", - "url": "zoo-labs/zoo/blob/master/lab/scripts/s3.js", - "summary": "This code is responsible for creating an AWS S3 bucket and uploading a directory to it. The code first imports the necessary dependencies, including the `s3-folder-upload` package and the `fs` module. It then sets the name of the directory to be uploaded to the `build` directory and the name of the S3 bucket to be created to `testbucket.xyz`. \n\nThe code then checks if a bucket name has been set and exits the process if it has not. It also reads the AWS credentials from a file called `aws.json` and sets the bucket name in the credentials object. \n\nThe code then creates an S3 service object and uses it to create a new bucket with the specified name. It also sets the bucket's website configuration to use `index.html` as the index document and `index.html` as the error document. \n\nOnce the bucket is created, the code uploads the contents of the `build` directory to the bucket using the `s3FolderUpload` function from the `s3-folder-upload` package. \n\nThis code can be used as part of a larger project to automate the deployment of a static website to an S3 bucket. By running this code, developers can create a new bucket and upload the contents of the `build` directory to it with a single command. \n\nExample usage:\n\n```\n// Import the code from the file\nconst deployToS3 = require('./path/to/s3.js');\n\n// Call the function to create the bucket and upload the directory\ndeployToS3();\n```", - "questions": "1. What is the purpose of this code?\n \n This code is used to create an S3 bucket and upload a directory to it.\n\n2. What is the significance of the `aws.json` file?\n \n The `aws.json` file contains the AWS credentials required to access the S3 bucket. It is read by the code to authenticate the user.\n\n3. What are the options available for the `s3FolderUpload` method?\n \n The `s3FolderUpload` method takes an optional `options` parameter that can be used to configure the upload process. The available options are `useFoldersForFileTypes` and `useIAMRoleCredentials`.", - "checksum": "2284ef8ee65a266d9281066dcc09faf3" -} \ No newline at end of file diff --git a/.autodoc/docs/json/lab/scripts/watch.json b/.autodoc/docs/json/lab/scripts/watch.json deleted file mode 100644 index 67b595f49..000000000 --- a/.autodoc/docs/json/lab/scripts/watch.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "watch.js", - "filePath": "lab/scripts/watch.js", - "url": "zoo-labs/zoo/blob/master/lab/scripts/watch.js", - "summary": "The code above is a Node.js script that watches for changes in a specific directory and runs a command to compile and generate new files whenever a change is detected. The purpose of this script is to automate the process of compiling and generating files, which can be time-consuming and error-prone if done manually.\n\nThe script uses two Node.js modules: `node-watch` and `child_process`. `node-watch` is used to watch for changes in the `./src/themes` directory, while `child_process` is used to execute the command to compile and generate files.\n\nThe `run` function is responsible for executing the command to compile and generate files. It uses the `exec` method from the `child_process` module to run the command `npx gulp less`. This command is used to compile `.less` files into `.css` files using the Gulp task runner. The function also logs the output of the command to the console.\n\nThe `watch` function is used to watch for changes in the `./src/themes` directory. Whenever a change is detected, the function logs the name of the file that was changed to the console and calls the `run` function to compile and generate new files.\n\nFinally, the script calls the `run` function once at the beginning to compile and generate files for the first time.\n\nThis script can be used in a larger project to automate the process of compiling and generating files whenever changes are made to the source files. For example, in a web development project, this script can be used to compile `.less` files into `.css` files whenever changes are made to the `.less` files. This can save time and reduce errors by automating a repetitive and error-prone task.", - "questions": "1. What does this code do?\n This code sets up a watch on the `./src/themes` directory and runs a Gulp task to compile LESS files whenever a change is detected in that directory.\n\n2. What dependencies does this code have?\n This code requires the `node-watch` and `child_process` modules to be installed.\n\n3. What command should be run to start this code?\n This code can be started by running the file with Node.js (`node filename.js`) or by incorporating it into a larger Node.js project.", - "checksum": "ff45a02977f7eca60453e9fbd557fe0d" -} \ No newline at end of file diff --git a/.autodoc/docs/json/lab/src/App.json b/.autodoc/docs/json/lab/src/App.json deleted file mode 100644 index eac20a6b8..000000000 --- a/.autodoc/docs/json/lab/src/App.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "App.css", - "filePath": "lab/src/App.css", - "url": "zoo-labs/zoo/blob/master/lab/src/App.css", - "summary": "The code provided is a CSS file that defines the styling for the `.App` class. The purpose of this code is to center the text within any HTML element that has the `.App` class applied to it. This code can be used in conjunction with HTML and JavaScript to create a user interface for a web application. \n\nFor example, if we have an HTML file with the following code:\n\n```\n\n
\n```\n\nThe CSS code provided will center the text within the `div` element that has the `.App` class applied to it. This will result in the text \"Welcome to the Zoo!\" and \"Explore our collection of animals.\" being centered horizontally within the `div` element.\n\nThis code can be further customized by adding additional CSS rules to the `.App` class or by creating new classes and applying them to different HTML elements. For example, we could add a background color to the `.App` class to give the `div` element a colored background:\n\n```\n.App {\n text-align: center;\n background-color: #f2f2f2;\n}\n```\n\nOverall, this code is a small but important part of a larger project that involves creating a user interface for a web application. By defining the styling for different HTML elements, we can create a visually appealing and user-friendly interface for users to interact with.",
- "questions": "1. What is the purpose of this code?\n \n This code sets the text alignment to center for the `.App` class.\n\n2. Where is this code being used in the project?\n \n It is not clear where this code is being used in the project. It could be used in a CSS file or in a JavaScript file that manipulates the CSS.\n\n3. Are there any other CSS properties being applied to `.App`?\n \n It is not clear from this code snippet if there are any other CSS properties being applied to `.App`. Additional code would need to be examined to determine this.",
- "checksum": "fe261a8d2e18e872ddf33256c3dc0057"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/components/Account.json b/.autodoc/docs/json/lab/src/components/Account.json
deleted file mode 100644
index b7c1e5a4c..000000000
--- a/.autodoc/docs/json/lab/src/components/Account.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Account.jsx",
- "filePath": "lab/src/components/Account.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/components/Account.jsx",
- "summary": "The `Account` component is a React component that displays an Ethereum account's address, balance, and wallet. It also allows users to log in to existing accounts and log out. \n\nThe component takes in several props, including `address`, `userSigner`, `localProvider`, `mainnetProvider`, `price`, `minimized`, `web3Modal`, `loadWeb3Modal`, `logoutOfWeb3Modal`, and `blockExplorer`. \n\nThe `address` prop is the Ethereum address to display the balance for. The `userSigner` prop is the signer for the user's wallet. The `localProvider` prop is the provider for the local network. The `mainnetProvider` prop is the provider for the main Ethereum network. The `price` prop is the price of ether to convert the balance to dollars. The `minimized` prop is a boolean that determines whether the component should be minimized or not. The `web3Modal`, `loadWeb3Modal`, and `logoutOfWeb3Modal` props are used to log in and log out of existing accounts. The `blockExplorer` prop is the URL for the block explorer to use. \n\nThe component uses the `useThemeSwitcher` hook to get the current theme. It then displays the address, balance, and wallet if the component is not minimized. If the component is minimized, it displays nothing. \n\nThe component also displays buttons to log in and log out of existing accounts if the `web3Modal` prop is provided. If the `web3Modal` has a cached provider, it displays a \"logout\" button. If the `web3Modal` does not have a cached provider, it displays a \"connect\" button. \n\nOverall, the `Account` component is a useful component for displaying Ethereum account information and allowing users to log in and log out of existing accounts. It can be used in a larger project to display account information and provide account management functionality. \n\nExample usage:\n\n```\nWelcome to the Zoo!
\nExplore our collection of animals.
\n\n
\n );\n}\n\nexport default UserAvatar;\n```\n\nIn this example, the `UserAvatar` component renders a blockie image and a user name for a given Ethereum address. The `Blockie` component is used to generate the blockie image, with the `address` prop passed in from the `UserAvatar` props and additional props for size and scale. The resulting component can be used throughout the project to visually identify users by their Ethereum addresses.",
- "questions": "1. What is the purpose of the \"react-blockies\" library?\n - The \"react-blockies\" library is used to provide a blockie image for an address.\n\n2. What happens if the \"props.address\" is not provided or is not a string?\n - If \"props.address\" is not provided or is not a string, the function will return an empty span element.\n\n3. What is the purpose of the spread operator in the return statement?\n - The spread operator is used to pass all the remaining props to the \"Blockies\" component.",
- "checksum": "bb1f64e508e8f334472a505d0bfcb50b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/components/BytesStringInput.json b/.autodoc/docs/json/lab/src/components/BytesStringInput.json
deleted file mode 100644
index 1c5337808..000000000
--- a/.autodoc/docs/json/lab/src/components/BytesStringInput.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BytesStringInput.jsx",
- "filePath": "lab/src/components/BytesStringInput.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/components/BytesStringInput.jsx",
- "summary": "The `BytesStringInput` component is a React component that displays an input field with options to convert between a string and a bytes32 value. It is imported from the `antd` library and uses the `useState` and `useEffect` hooks from React. It also uses the `utils` and `constants` objects from the `ethers` library.\n\nThe component takes in several props, including `value`, `placeholder`, `autoFocus`, and `onChange`. The `value` prop specifies the initial string value, while the `placeholder` prop specifies the placeholder text for the input field. The `autoFocus` prop specifies whether the input field should be focused automatically when the component is mounted. The `onChange` prop is a callback function that is called whenever the input value changes.\n\nThe component has two modes: \"STRING\" and \"BYTES32\". The current mode is stored in the `mode` state variable, which is initialized to \"STRING\". The current value is stored in the `value` state variable, which is initialized to `constants.HashZero`. The displayed value is stored in the `display` state variable, which is initially undefined.\n\nThe component renders an `Input` component from the `antd` library, with the `placeholder`, `autoFocus`, `value`, and `onChange` props set to the corresponding state variables. It also renders an `addonAfter` prop, which is a button that toggles between the \"STRING\" and \"BYTES32\" modes. The `addonAfter` prop is set to the result of calling the `option` function with the appropriate title (\"STRING 🔀\" or \"BYTES32 🔀\").\n\nThe `option` function returns a `div` element that displays the given title and toggles the mode when clicked. If the mode is \"STRING\", it converts the current value to bytes32 if necessary and sets the `display` state variable to the result. If the mode is \"BYTES32\", it converts the current value to a string if necessary and sets the `display` state variable to the result.\n\nThe `useEffect` hook is used to update the `display` state variable when the `currentValue` changes. If the `currentValue` is falsy, it sets the `display` state variable to an empty string.\n\nThe `onChange` callback function is called whenever the input value changes. If the mode is \"STRING\", it formats the input value as a bytes32 string using the `utils.formatBytes32String` function and sets the `value` and `display` state variables to the result. If the mode is \"BYTES32\", it sets the `value` and `display` state variables to the input value.\n\nOverall, the `BytesStringInput` component provides a convenient way to convert between string and bytes32 values in a React application. It can be used in various parts of the larger project where such conversions are needed. For example, it could be used in a form where the user needs to enter a bytes32 value, or in a table where bytes32 values need to be displayed as strings.",
- "questions": "1. What is the purpose of this code?\n \n This code displays an input field that allows the user to convert between a string and a bytes32 value.\n\n2. What are the features of this code?\n \n The code allows the user to specify an initial string value, provides a placeholder for the input, and allows the input change to be controlled by the onChange function.\n\n3. What is the significance of the constants.HashZero value?\n \n The constants.HashZero value is used as the default value for the bytes32 value if no other value is provided.",
- "checksum": "dc975d625f0bbd5935a5dd2f5f588070"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/components/Contract/DisplayVariable.json b/.autodoc/docs/json/lab/src/components/Contract/DisplayVariable.json
deleted file mode 100644
index 7e14488a6..000000000
--- a/.autodoc/docs/json/lab/src/components/Contract/DisplayVariable.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "DisplayVariable.jsx",
- "filePath": "lab/src/components/Contract/DisplayVariable.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/components/Contract/DisplayVariable.jsx",
- "summary": "The `DisplayVariable` component is a React component that displays the value of a smart contract function and provides a way to refresh the value. It takes in several props, including `contractFunction`, which is a function that returns the value of a smart contract function, `functionInfo`, which contains information about the smart contract function, `refreshRequired`, which is a boolean that indicates whether the component needs to be refreshed, and `triggerRefresh`, which is a function that triggers a refresh of the component.\n\nThe component uses the `useState` hook to store the value of the smart contract function, and the `useCallback` hook to define a function that refreshes the value of the smart contract function. The `useEffect` hook is used to call the refresh function when the component mounts, when the `refreshRequired` prop changes, or when the `contractFunction` prop changes.\n\nThe component renders a row with three columns. The first column displays the name of the smart contract function, the second column displays the value of the smart contract function, and the third column displays a refresh button. The `tryToDisplay` function is used to format the value of the smart contract function for display.\n\nThis component can be used in a larger project that interacts with a smart contract. It provides a simple way to display the value of a smart contract function and refresh it when necessary. Here is an example of how this component could be used:\n\n```\nimport DisplayVariable from \"./DisplayVariable\";\n\nconst MyComponent = ({ myContract }) => {\n const [refreshRequired, setRefreshRequired] = useState(false);\n\n const refresh = () => {\n setRefreshRequired(true);\n };\n\n return (\n \n
\n );\n};\n```\n\nIn this example, `MyComponent` displays the value of a smart contract function called `getMyValue` and provides a refresh button. The `refresh` function updates the `refreshRequired` state, which triggers a refresh of the `DisplayVariable` component.",
- "questions": "1. What is the purpose of the `tryToDisplay` function imported from `./utils`?\n - The `tryToDisplay` function is used to format the display of the `variable` state value in the returned JSX.\n2. What is the purpose of the `refreshRequired` and `triggerRefresh` props passed to the component?\n - The `refreshRequired` prop is used to trigger a refresh of the displayed variable when it changes, and the `triggerRefresh` prop is a function that sets the `refreshRequired` state value to `true`.\n3. What is the purpose of the `Divider` component from `antd` used in the returned JSX?\n - The `Divider` component is used to visually separate the displayed variable from other components on the page.",
- "checksum": "34c5b73284c61e81cda6a8c16c4bca90"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/components/Contract/FunctionForm.json b/.autodoc/docs/json/lab/src/components/Contract/FunctionForm.json
deleted file mode 100644
index fc493de92..000000000
--- a/.autodoc/docs/json/lab/src/components/Contract/FunctionForm.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "FunctionForm.jsx",
- "filePath": "lab/src/components/Contract/FunctionForm.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/components/Contract/FunctionForm.jsx",
- "summary": "The `FunctionForm` component is a React component that renders a form for interacting with a smart contract function. It takes in several props, including `contractFunction`, which is the function to be called, `functionInfo`, which contains information about the function, `provider`, which is the Ethereum provider to use, `gasPrice`, which is the gas price to use for the transaction, and `triggerRefresh`, which is a function to trigger a refresh of the component.\n\nThe component uses the Ant Design library to render the form elements, including `Input`, `Button`, `Col`, `Row`, and `Divider`. It also uses the `react-blockies` library to render a blockie for an Ethereum address.\n\nThe form is dynamically generated based on the inputs of the function. For each input, an `Input` element is rendered with a suffix that provides additional functionality based on the type of the input. For example, if the input is of type `bytes32`, a button is rendered that allows the user to convert the input to a bytes32 string. If the input is of type `uint256`, a button is rendered that allows the user to convert the input to wei.\n\nIf the function is payable, an additional `Input` element is rendered for the transaction value.\n\nWhen the user clicks the button to call the function, the component constructs the arguments for the function based on the values in the form inputs, and then calls the function using the `contractFunction` and `tx` functions. If the function is a read-only function, the result is displayed in the form. If the function is a transaction, the transaction is sent and the user is prompted to confirm the transaction in their wallet.\n\nOverall, the `FunctionForm` component provides a convenient way for users to interact with smart contract functions in a user-friendly way. It abstracts away many of the details of interacting with the Ethereum network and provides a simple interface for users to input values and call functions.",
- "questions": "1. What is the purpose of the `Transactor` function and how is it used in this code?\n- The `Transactor` function is used to create a transaction object that can be used to send transactions to the Ethereum network. It takes in the `provider` and `gasPrice` as arguments and returns a function that can be used to send transactions.\n2. What is the purpose of the `tryToDisplay` function and where is it used in this code?\n- The `tryToDisplay` function is used to convert the return value of a contract function into a human-readable format. It is used in the `onClick` event of the button to display the return value of the contract function.\n3. What is the purpose of the `inputs` array and how is it populated?\n- The `inputs` array is used to store the input fields for the contract function. It is populated by mapping over the `functionInfo.inputs` array and creating an input field for each input. The input fields are then pushed into the `inputs` array.",
- "checksum": "142d3e22b8cddf6b0c903caa44679dad"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/components/Contract/index.json b/.autodoc/docs/json/lab/src/components/Contract/index.json
deleted file mode 100644
index 8c7342f32..000000000
--- a/.autodoc/docs/json/lab/src/components/Contract/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.jsx",
- "filePath": "lab/src/components/Contract/index.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/components/Contract/index.jsx",
- "summary": "The `Contract` component is a React component that displays information about a smart contract. It takes in several props, including `customContract`, `account`, `gasPrice`, `signer`, `provider`, `name`, `show`, `price`, `blockExplorer`, and `chainId`. \n\nThe component first uses the `useContractLoader` hook to load all contracts available on the specified `provider` and `chainId`. If a `customContract` is provided, it uses that instead. It then checks if the contract is deployed at the specified address using the `useContractExistsAtAddress` hook.\n\nThe component then filters the contract's functions to only display those that are of type \"function\" and are not excluded by the `show` prop. If a function is queryable (i.e. has no inputs), it displays the return value using the `DisplayVariable` component. If a function has inputs, it displays a form using the `FunctionForm` component to allow users to provide these inputs.\n\nFinally, the component renders a `Card` from the `antd` library that displays the contract's name, address, and account information. If the contract is deployed, it displays the contract functions. Otherwise, it displays a loading message that instructs the user to run `yarn run chain` and `yarn run deploy` to deploy the contract.\n\nThis component can be used to display information about any smart contract in a React application. For example, it could be used in a decentralized application to display information about a user's deployed smart contracts or to allow users to interact with a specific smart contract. \n\nExample usage:\n\n```\n\n {\n setAmount(value);\n }}\n />\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `useState` hooks in this code?\n- The `useState` hooks are used to manage the state of `mode`, `display`, and `value` variables in the component.\n\n2. How does the code handle conversion between USD and ETH?\n- The code provides an option to convert between USD and ETH by clicking on the displayed currency symbol. When the currency is changed, the `display` state is updated with the converted value if it exists.\n\n3. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to update the `display` state when the `currentValue` changes. If `currentValue` is undefined, the `display` state is set to an empty string.",
- "checksum": "e8e8a4d06c392f9a6a8609533f9b1b28"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/components/Faucet.json b/.autodoc/docs/json/lab/src/components/Faucet.json
deleted file mode 100644
index 86da921a9..000000000
--- a/.autodoc/docs/json/lab/src/components/Faucet.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Faucet.jsx",
- "filePath": "lab/src/components/Faucet.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/components/Faucet.jsx",
- "summary": "The `Faucet` component is a React component that displays a local faucet to send ETH to a given address. It also provides a wallet to convert between USD and ETH. The component imports several dependencies, including `@ant-design/icons`, `antd`, `eth-hooks`, `react`, `react-blockies`, and `../helpers`. \n\nThe component takes in several props, including `price`, `localProvider`, `ensProvider`, and `placeholder`. The `price` prop is used to provide the price of ether and convert between USD and ETH in a wallet. The `localProvider` prop is used to send ETH to a given address. The `ensProvider` prop is used to replace the address with an ENS name (e.g. \"0xa870\" => \"user.eth\") or to enter an ENS name directly instead of an address. The `placeholder` prop is used to provide a placeholder value for the input.\n\nThe component uses the `useState` hook to manage the `address` and `faucetAddress` state variables. It uses the `useEffect` hook to get the faucet address from the local provider. It then uses the `useCallback` hook to update the address when a new value is entered. \n\nThe component also uses the `Transactor` helper function from `../helpers` to send ETH to the given address. It renders an `Input` component with a `prefix` of a `Blockies` component that displays a blocky representation of the address. It also renders a `Tooltip` component with a `Button` component that sends ETH to the given address and a `Wallet` component that displays the wallet. \n\nOverall, the `Faucet` component provides a simple way to send ETH to a given address and manage a wallet. It is designed to be used as a reusable component in a larger project. \n\nExample usage:\n\n```\nCurrent amount: {amount} ETH
\nCurrent value: ${amount * price}
\n\n
\n );\n}\n\nexport default HomePage;\n```\n\nIn this example, the `Header` component is imported and used at the top of the `HomePage` component to display the consistent header for the page. The `HomePage` component also includes a heading and paragraph to provide content specific to the page. \n\nOverall, the `Header` component provides a reusable and consistent header for pages within the `zoo` project, enhancing the user experience and branding of the project.",
- "questions": "1. What is the purpose of the `PageHeader` component from the `antd` library?\n- The `PageHeader` component is used to display a header on a page.\n\n2. Why is the `Header` function exported as the default export?\n- The `Header` function is exported as the default export to allow other files to import and use it as needed.\n\n3. Why is there an anchor tag wrapping the `PageHeader` component?\n- The anchor tag is used to create a link to the `https://github.com/zoo-labs/savage` URL, which will open in a new tab when clicked.",
- "checksum": "845ad6bd87eb503cb1b4a73e0c2a6d7a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/components/Provider.json b/.autodoc/docs/json/lab/src/components/Provider.json
deleted file mode 100644
index 38cd68f3d..000000000
--- a/.autodoc/docs/json/lab/src/components/Provider.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Provider.jsx",
- "filePath": "lab/src/components/Provider.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/components/Provider.jsx",
- "summary": "The `Provider` component in this file is responsible for rendering a button that displays information about an Ethereum provider. The component takes in a `provider` prop, which is an object that represents an Ethereum provider. The component uses the `eth-hooks` library to get the current block number and to poll the provider for network and signer information.\n\nWhen the component is first rendered, it sets the initial state for `showMore`, `status`, `network`, `signer`, and `address`. It then uses the `usePoller` hook to poll the provider every 1377 milliseconds for network and signer information. If the provider has a `getNetwork` function, the component calls it to get the current network information. If the network has a `chainId` greater than 0, the component sets the `status` state to \"success\". Otherwise, it sets the `status` state to \"warning\". If the provider has a `getSigner` function, the component calls it to get the current signer information. It then sets the `signer` state to the new signer and the `address` state to the new signer's address.\n\nIf the `provider` prop is undefined or does not have a `getNetwork` function, or if the `network` state or `network.chainId` is undefined, the component returns a button that displays the `props.name` and a `Badge` component with the `status` state. If the `showMore` state is true, the component also displays the `network.chainId` and `network.name`.\n\nIf the `signer` state is defined and the `address` state is truthy, the component also displays the `address` using the `Address` component.\n\nOverall, this component is useful for displaying information about an Ethereum provider and can be used in a larger project to help users understand the current state of the provider. For example, it could be used in a dApp to display information about the user's connected wallet and network. Here is an example usage of the `Provider` component:\n\n```jsx\nimport { ethers } from \"ethers\";\nimport Provider from \"./Provider\";\n\nfunction App() {\n const [provider, setProvider] = useState();\n\n useEffect(() => {\n const newProvider = new ethers.providers.Web3Provider(window.ethereum);\n setProvider(newProvider);\n }, []);\n\n return (\n Welcome to the Zoo!
\nExplore our collection of animals and exhibits.
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `Provider` component?\n- The `Provider` component is used to display information about a blockchain provider, including its network and signer address.\n\n2. What external libraries or packages are being used in this code?\n- The code is importing `Badge`, `Button`, `useBlockNumber`, and `usePoller` from the `antd` and `eth-hooks` libraries.\n\n3. What is the significance of the `1377` argument passed to the `usePoller` hook?\n- The `1377` argument is the interval in milliseconds at which the `usePoller` hook will execute the provided callback function. In this case, it will execute the callback function every 1377 milliseconds (or approximately every 1.4 seconds).",
- "checksum": "0416f56bad64ec74efb6fb25b9d323c5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/components/Ramp.json b/.autodoc/docs/json/lab/src/components/Ramp.json
deleted file mode 100644
index 8beafbe9f..000000000
--- a/.autodoc/docs/json/lab/src/components/Ramp.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Ramp.jsx",
- "filePath": "lab/src/components/Ramp.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/components/Ramp.jsx",
- "summary": "The `Ramp` component is a React component that displays the current price of Ethereum (ETH) and provides options to buy ETH through various services or get testnet ETH. The component uses the `RampInstantSDK` to open Ramp directly in the application. \n\nTo use the `Ramp` component, you can import it and include it in your React application like this:\n\n```\nMy dApp
\n {provider && (\n\n
\n );\n}\n```",
- "questions": "1. What library is being used for the switch component?\n - The `Switch` component is being imported from the `antd` library.\n \n2. What is the purpose of the `useEffect` hook?\n - The `useEffect` hook is used to update the `localStorage` value for the current theme whenever it changes.\n\n3. Why is there a commented out section of code?\n - The commented out code is used to avoid a flicker when the theme is changed, but it is not currently being used in the code.",
- "checksum": "6ab4f347cfe2aa82cd5d99db2cef7d00"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/components/Timeline.json b/.autodoc/docs/json/lab/src/components/Timeline.json
deleted file mode 100644
index 106a12672..000000000
--- a/.autodoc/docs/json/lab/src/components/Timeline.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Timeline.jsx",
- "filePath": "lab/src/components/Timeline.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/components/Timeline.jsx",
- "summary": "The code in this file is a React component that displays a timeline for the usage of the scaffold-eth tool. The timeline consists of several items, each represented by a dot and a description. The purpose of this component is to provide a visual guide for users of the scaffold-eth tool, showing them the steps they need to take to get started with the tool and build something on Ethereum.\n\nThe component uses the Ant Design library to create a Timeline component, which is styled to display the items on the right side of the timeline. Each item is represented by a Timeline.Item component, which contains a dot and a Text component that displays the description of the item. The dot is represented by an icon from the Ant Design library, and the Text component contains the description of the item, which may include links to external resources.\n\nThe component takes several props, which are used to conditionally render some of the items in the timeline. For example, the props `chainIsUp`, `hasOwner`, `isNotSmoort`, `hasEther`, `contractHasEther`, and `amOwnerOfContract` are used to conditionally delete some of the items in the timeline, depending on whether certain conditions are met. This allows the component to provide a customized timeline for each user, based on their specific needs and progress.\n\nOverall, this component is a useful tool for users of the scaffold-eth tool, providing them with a clear and concise guide to the steps they need to take to get started with the tool and build something on Ethereum. Here is an example of how this component might be used in a larger project:\n\n```\nimport React from \"react\";\nimport TimelineDisplay from \"./TimelineDisplay\";\n\nfunction App() {\n return (\n Welcome to the Zoo!
\n\n
\n );\n}\n\nexport default App;\n``` \n\nIn this example, the TimelineDisplay component is rendered inside an App component, which is the main component of the larger project. The TimelineDisplay component is passed several props, which are used to customize the timeline based on the user's progress. The component is displayed on the page, providing the user with a clear and concise guide to the steps they need to take to get started with the scaffold-eth tool and build something on Ethereum.",
- "questions": "1. What is the purpose of this code?\n- This code displays a timeline for scaffold-eth usage.\n\n2. What external libraries or dependencies does this code use?\n- This code uses the following external libraries: \"@ant-design/icons\", \"antd\", \"react\", and \"react-blockies\".\n\n3. What is the significance of the different colored dots in the timeline?\n- The different colored dots in the timeline represent the status of certain tasks, with green indicating completion and blue indicating that the task still needs to be done.",
- "checksum": "367d8417e48f0274fbcbf80acc86d403"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/components/TokenBalance.json b/.autodoc/docs/json/lab/src/components/TokenBalance.json
deleted file mode 100644
index 08ed55690..000000000
--- a/.autodoc/docs/json/lab/src/components/TokenBalance.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TokenBalance.jsx",
- "filePath": "lab/src/components/TokenBalance.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/components/TokenBalance.jsx",
- "summary": "The `TokenBalance` function in the `zoo` project is a React component that displays the balance of a specified token. The component takes in several props, including the name and address of the token contract, as well as an optional balance and dollar multiplier. \n\nThe function first uses the `useTokenBalance` hook from the `eth-hooks` library to retrieve the current balance of the token. It then converts the balance to a float and formats it to two decimal places. If a balance prop is provided, it uses that instead of the retrieved balance. \n\nIf a dollar multiplier prop is provided and the component is in dollar mode (which is the default), it multiplies the balance by the dollar multiplier and formats it to two decimal places with a dollar sign. Otherwise, it simply displays the balance with four decimal places. \n\nThe component returns a span element that displays the token balance along with an optional image prop. The span element is also clickable, toggling between dollar mode and regular mode when clicked. \n\nThis component can be used in the larger project to display the balance of a specific token in a user's wallet or in a trading interface. It provides a simple and customizable way to display token balances with the option to toggle between different display modes. \n\nExample usage:\n\n```\nWelcome to My Ethereum App
\n\n
\n );\n}\n```\n\nIn the example above, the `useBalance` hook is used to retrieve the balance of an Ethereum address and display it in a React component. The `provider` and `address` props are passed to the hook to retrieve the balance. The balance is then displayed in the component using the `balance` variable returned by the hook.",
- "questions": "1. What does this code do?\n \n This code is a custom React hook called `useBalance` that takes in a provider and an address and returns the balance in ETH corresponding to the given address. It also has the ability to change the provider to access balances on different chains and can update the balance on every new block if no pollTime is passed.\n\n2. What is the purpose of the `useCallback` hook in this code?\n \n The `useCallback` hook is used to memoize the `pollBalance` function so that it only gets recreated when the `provider` or `address` values change. This helps to optimize performance by preventing unnecessary re-renders.\n\n3. What is the purpose of the `usePoller` hook in this code?\n \n The `usePoller` hook is used to poll the balance at a specified interval (`pollTime`) and update the balance state accordingly. It only runs if a `pollTime` value greater than 0 is passed in and if both the `provider` and `address` values are truthy.",
- "checksum": "6fac1b6651bc29559a32129fdcf60355"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/BurnerSigner.json b/.autodoc/docs/json/lab/src/hooks/BurnerSigner.json
deleted file mode 100644
index 9481c8cca..000000000
--- a/.autodoc/docs/json/lab/src/hooks/BurnerSigner.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "BurnerSigner.js",
- "filePath": "lab/src/hooks/BurnerSigner.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/BurnerSigner.js",
- "summary": "The code is a custom React hook called `useBurnerSigner` that generates and manages a private key for a wallet. It uses the `useState` and `useEffect` hooks from the React library to manage state and side effects respectively. The `ethers` library is used to create and manage the wallet.\n\nThe hook takes a `provider` parameter, which is an Ethereum provider that is used to connect to the blockchain. The hook returns a `signer` object that is used to sign transactions on the blockchain.\n\nThe hook first checks if there is a stored private key in the browser's local storage. If there is no stored key, a new key is generated using the `ethers` library and stored in the local storage. If there is a stored key, it is retrieved from the local storage.\n\nThe hook then creates a new wallet using the stored private key and connects it to the provided `provider`. The resulting `signer` object is set as the state of the hook and returned.\n\nThis hook can be used in a larger project that requires a private key to sign transactions on the Ethereum blockchain. It abstracts away the complexity of managing a private key and provides a simple interface to access the `signer` object. Here is an example of how the hook can be used in a React component:\n\n```\nimport useBurnerSigner from './useBurnerSigner';\n\nfunction MyComponent({ provider }) {\n const signer = useBurnerSigner(provider);\n\n async function handleTransaction() {\n const tx = await signer.sendTransaction({\n to: '0x123...',\n value: ethers.utils.parseEther('1.0')\n });\n console.log(tx.hash);\n }\n\n return (\n \n );\n}\n```\n\nIn this example, the `useBurnerSigner` hook is used to get a `signer` object that is used to send a transaction to an Ethereum address. The `handleTransaction` function uses the `signer` object to send a transaction and logs the transaction hash to the console.",
- "questions": "1. What is the purpose of this code and how is it used in the zoo project?\n- This code exports a custom hook called `useBurnerSigner` that returns a signer object. It is likely used to authenticate transactions on the Ethereum blockchain in the zoo project.\n\n2. What external libraries or dependencies does this code rely on?\n- This code relies on the `react` and `ethers` libraries. \n\n3. What is the significance of the `metaPrivateKey` key and how is it used?\n- The `metaPrivateKey` key is used to store a private key in local storage. If the key is not found, a new key is generated and stored. The private key is used to create a new wallet object, which is then connected to the provider to create a signer object.",
- "checksum": "26b597e0c985a9a03e845b47eec892a0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/ContractExistsAtAddress.json b/.autodoc/docs/json/lab/src/hooks/ContractExistsAtAddress.json
deleted file mode 100644
index 01de48f1d..000000000
--- a/.autodoc/docs/json/lab/src/hooks/ContractExistsAtAddress.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ContractExistsAtAddress.js",
- "filePath": "lab/src/hooks/ContractExistsAtAddress.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/ContractExistsAtAddress.js",
- "summary": "## Code Explanation: `useContractExistsAtAddress`\n\nThe `useContractExistsAtAddress` function is a custom React hook that checks whether a smart contract exists on the blockchain. It takes two parameters: `provider` and `contractAddress`. `provider` is an object that represents the Ethereum provider (e.g. `localProvider`, `mainnetProvider`, etc.) and `contractAddress` is the address of the smart contract that we want to check.\n\nThe function uses the `useState` hook to create a state variable called `contractIsDeployed` and initializes it to `false`. This variable will be used to store the result of the contract existence check.\n\nThe function also uses the `useEffect` hook to perform the contract existence check. The `useEffect` hook is called whenever the `provider` or `contractAddress` parameters change. Inside the hook, the function first checks if the `contractAddress` is a valid Ethereum address using the `isAddress` function from the `ethers` library. If the address is invalid, the function returns `false`.\n\nIf the address is valid, the function uses the `getCode` method of the `provider` object to retrieve the bytecode stored at the `contractAddress`. If the bytecode is not equal to `0x0`, then a contract exists at that address and the `contractIsDeployed` state variable is set to `true`.\n\nFinally, the function returns the `contractIsDeployed` state variable.\n\n## How to Use\n\nTo use the `useContractExistsAtAddress` hook, you can import it from the `zoo` module and call it in your React component. Here's an example:\n\n```javascript\nimport useContractExistsAtAddress from 'zoo';\n\nfunction MyComponent({ provider, contractAddress }) {\n const contractIsDeployed = useContractExistsAtAddress(provider, contractAddress);\n\n // Use the contractIsDeployed variable to conditionally render content\n return (\n Address: {address}
\nBalance: {balance}
\n\n {contractIsDeployed ?
\n );\n}\n```\n\nIn this example, we pass in the `provider` and `contractAddress` variables as props to the `MyComponent` function. We then call the `useContractExistsAtAddress` hook with these variables to get the `contractIsDeployed` result. We can then use this result to conditionally render content based on whether the contract exists or not.",
- "questions": "1. What is the purpose of the `ethers` and `react` imports?\n- The `ethers` import is used to access the `getCode` function to check if a contract exists at a given address, while the `react` import is used to define a custom React hook.\n \n2. How does the `useContractExistsAtAddress` function determine if a contract is deployed?\n- The function checks the bytecode stored at the provided contract address using the `getCode` function from the `provider` object. If the bytecode is not equal to \"0x0\", then a contract is deployed at that address.\n \n3. Can this function be used to check for contract existence on different blockchain networks?\n- Yes, the function can be used to check for contract existence on different blockchain networks by changing the `provider` object passed as an argument to the function. For example, passing a `mainnetProvider` object would check for contract existence on the Ethereum mainnet.",
- "checksum": "0b26dfdaf2a3b1c5f0e6a4eca67573d8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/ContractLoader.json b/.autodoc/docs/json/lab/src/hooks/ContractLoader.json
deleted file mode 100644
index c6e030eb6..000000000
--- a/.autodoc/docs/json/lab/src/hooks/ContractLoader.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ContractLoader.js",
- "filePath": "lab/src/hooks/ContractLoader.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/ContractLoader.js",
- "summary": "The `useContractLoader` function is responsible for loading local contracts and providing options to read values from contracts or write transactions into them. This function is designed to be used in a React application and utilizes the `useEffect` and `useState` hooks from the React library. \n\nThe function takes two parameters: `providerOrSigner` and `config`. `providerOrSigner` is an object that represents the Ethereum provider or signer that will be used to interact with the contracts. `config` is an optional object that can be used to configure the function's behavior. \n\nThe function first checks to see if `providerOrSigner` has a signer or not. If it does, it uses the signer's provider. If not, it uses the providerOrSigner object as both the provider and signer. It then gets the network ID from the provider and uses it to determine which contracts to load. \n\nThe function looks for two files: `contracts.json` and `external_contracts.js`. `contracts.json` contains a list of contracts that were deployed using Hardhat, while `external_contracts.js` contains a list of contracts that were deployed externally. The function combines the contracts from both files and creates a new object that maps contract names to contract instances. \n\nIf `config.customAddresses` is defined, the function uses the custom addresses specified in the configuration object instead of the addresses specified in the contract files. \n\nThe function returns the contracts object, which can be used to interact with the loaded contracts. \n\nHere is an example of how to use this function:\n\n```\nimport { useContractLoader } from 'zoo';\n\nfunction MyComponent() {\n const contracts = useContractLoader(providerOrSigner);\n\n // read a value from a contract\n const purpose = useContractReader(contracts, 'MyContract', 'purpose');\n\n // write a transaction to a contract\n const tx = useTransactor(contracts);\n tx(contracts.MyContract.setPurpose(newPurpose));\n\n // ...\n}\n```",
- "questions": "1. What is the purpose of this code?\n \n This code loads local contracts and provides options to read values from contracts or write transactions into them.\n\n2. How can I use this code?\n \n You can use this code by importing the `useContractLoader` function and passing in a provider or signer as the first argument. You can also pass in a configuration object as the second argument to customize the behavior of the function.\n\n3. What are some of the features of this code?\n \n This code provides options to read values from contracts using a local provider and write transactions into contracts using a user provider. It also includes examples of how to use the `ContractReader.js` and `Transactor.js` hooks to interact with contracts. Additionally, the configuration object can be used to hardcode the chainId, hardhat network name, custom contract addresses, and external contracts.",
- "checksum": "53038ba5195888cb6c5d0eccedd2b452"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/ContractReader.json b/.autodoc/docs/json/lab/src/hooks/ContractReader.json
deleted file mode 100644
index d49891032..000000000
--- a/.autodoc/docs/json/lab/src/hooks/ContractReader.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ContractReader.js",
- "filePath": "lab/src/hooks/ContractReader.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/ContractReader.js",
- "summary": "## Code Explanation\n\nThe `useContractReader` function is a custom React hook that enables the user to read values from smart contracts and keep track of them in the local React states. The function takes in several parameters, including the `contracts` object, which contains the loaded contracts, the `contractName`, which specifies the name of the contract, the `functionName`, which specifies the name of the variable in the contract, and the `args` array, which contains the arguments required by the function.\n\nThe function also takes in a `pollTime` parameter, which specifies the time interval for updating the value. If no `pollTime` is specified, the function will update on every new block. The `formatter` parameter is an optional function that can be used to format the value returned by the contract function. The `onChange` parameter is a callback function that is called whenever the value changes.\n\nThe function uses the `useState` hook to create a state variable `value` that holds the current value of the contract variable. It also creates a state variable `tried` that is used to keep track of whether the function has been called at least once.\n\nThe function uses the `useEffect` hook to call the `onChange` function whenever the `value` changes. It also uses the `useOnBlock` and `usePoller` hooks to update the `value` at regular intervals. The `useOnBlock` hook is used to update the `value` whenever a new block is mined, while the `usePoller` hook is used to update the `value` at regular intervals specified by the `pollTime` parameter.\n\nIf the `tried` variable is false and the `contracts` object is not null, the function calls the `updateValue` function to update the `value` variable.\n\n## Example Usage\n\n```javascript\nimport useContractReader from \"./useContractReader\";\n\nconst MyComponent = ({ readContracts }) => {\n const purpose = useContractReader(readContracts, \"MyContract\", \"purpose\");\n return Contract is deployed!
:Contract is not deployed.
}\n{purpose}
;\n};\n```\n\nIn the above example, the `useContractReader` hook is used to read the value of the `purpose` variable from the `MyContract` contract. The `readContracts` object is passed as a parameter to the hook, which contains the loaded contracts. The `purpose` variable is then displayed in the component.",
- "questions": "1. What is the purpose of this code?\n \n This code enables reading values from contracts and keeping track of them in local React states.\n\n2. How can a developer use this code?\n \n A developer can use this code by calling the `useContractReader` function and passing in the necessary parameters such as `readContracts`, `contractName`, `functionName`, `args`, `pollTime`, `formatter`, and `onChange`.\n\n3. What are the features of this code?\n \n The features of this code include providing `readContracts` by loading contracts, specifying the name of the contract and the variable in the contract to keep track of, passing an `args` array if the function requires, passing `pollTime` to specify the time interval for updates, and using a `formatter` to format the value returned by the contract function. Additionally, the `onChange` function can be used to trigger an action when the value changes.",
- "checksum": "d124b5e9660dcfc899648d653dba04eb"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/Debounce.json b/.autodoc/docs/json/lab/src/hooks/Debounce.json
deleted file mode 100644
index 861831680..000000000
--- a/.autodoc/docs/json/lab/src/hooks/Debounce.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Debounce.js",
- "filePath": "lab/src/hooks/Debounce.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/Debounce.js",
- "summary": "The `useDebounce` function is a custom React hook that allows for the debouncing of a value. Debouncing is a technique used to limit the number of times a function is called by delaying its execution until a certain amount of time has passed since the last time it was called. This is useful in scenarios where a function is called frequently, such as in response to user input, but the function's execution is resource-intensive and should be limited to prevent performance issues.\n\nThe `useDebounce` function takes two parameters: `value` and `delay`. `value` is the value that needs to be debounced, and `delay` is the amount of time in milliseconds that needs to pass before the debounced value is updated. The function returns the debounced value.\n\nThe function uses the `useState` and `useEffect` hooks from React. `useState` is used to create a state variable called `debouncedValue`, which is initialized with the `value` parameter. `useEffect` is used to set up a timer that updates the `debouncedValue` state variable after the specified `delay` has passed since the last update to the `value` parameter. The `useEffect` hook also returns a cleanup function that clears the timer when the component unmounts or when the `value` parameter changes.\n\nThis custom hook can be used in a variety of scenarios where debouncing is needed, such as in search bars or auto-complete fields. Here is an example of how to use the `useDebounce` hook in a search bar component:\n\n```\nimport React, { useState } from \"react\";\nimport useDebounce from \"./useDebounce\";\n\nfunction SearchBar() {\n const [searchTerm, setSearchTerm] = useState(\"\");\n const debouncedSearchTerm = useDebounce(searchTerm, 500);\n\n function handleSearch(event) {\n setSearchTerm(event.target.value);\n }\n\n // Perform search using debounced search term\n // ...\n\n return (\n \n );\n}\n```\n\nIn this example, the `searchTerm` state variable is updated on every change to the search bar input. However, the actual search is performed using the `debouncedSearchTerm` variable, which is updated only after 500 milliseconds have passed since the last update to `searchTerm`. This prevents the search function from being called too frequently and improves performance.",
- "questions": "1. What is the purpose of this code?\n This code defines a custom React hook called `useDebounce` that returns a debounced value of the input `value` after a specified `delay`.\n\n2. What are the parameters of the `useDebounce` function?\n The `useDebounce` function takes two parameters: `value` (the input value to be debounced) and `delay` (the time in milliseconds to wait before returning the debounced value).\n\n3. How does the `useDebounce` hook work?\n The `useDebounce` hook uses the `useState` and `useEffect` hooks from React to maintain the current `debouncedValue` state and update it after the specified `delay`. It returns the `debouncedValue` after each update.",
- "checksum": "90cdcb1a759ec9a4f20ed130770fdbc6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/EventListener.json b/.autodoc/docs/json/lab/src/hooks/EventListener.json
deleted file mode 100644
index b609b6fe0..000000000
--- a/.autodoc/docs/json/lab/src/hooks/EventListener.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "EventListener.js",
- "filePath": "lab/src/hooks/EventListener.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/EventListener.js",
- "summary": "## Code Explanation: useEventListener\n\nThe `useEventListener` function is a custom React hook that enables the user to keep track of events. It is designed to be used in conjunction with the `readContracts` function and the `ContractLoader.js` file. \n\n### Features\n\nThe `useEventListener` function has several features that make it useful for tracking events:\n\n- Provide `readContracts` by loading contracts (see more on `ContractLoader.js`)\n- Specify the name of the contract, in this case it is \"YourContract\"\n- Specify the name of the event in the contract, in this case we keep track of \"SetPurpose\" event\n- Specify the provider\n\n### Usage\n\nTo use the `useEventListener` function, you need to pass in the following parameters:\n\n- `contracts`: an object containing the contracts you want to track events for\n- `contractName`: the name of the contract you want to track events for\n- `eventName`: the name of the event you want to track\n- `provider`: the provider you want to use to track events\n- `startBlock`: the block number from which you want to start tracking events\n- `args`: optional arguments to pass to the event listener\n\nHere is an example of how to use the `useEventListener` function:\n\n```javascript\nconst setPurposeEvents = useEventListener(readContracts, \"YourContract\", \"SetPurpose\", localProvider, 1);\n```\n\nThis will track the \"SetPurpose\" event for the \"YourContract\" contract using the `localProvider` provider, starting from block number 1.\n\n### Implementation\n\nThe `useEventListener` function uses the `useState` and `useEffect` hooks to keep track of updates to the event listener. \n\nWhen the component mounts, the function checks if the `provider` and `startBlock` parameters are defined. If they are, it resets the events block to the specified start block. \n\nNext, the function checks if the `contracts` object and the `contractName` parameter are defined. If they are, it adds an event listener to the specified contract and event name. When the event is triggered, the function extracts the block number and event arguments and adds them to the `updates` state using the `setUpdates` function.\n\nFinally, the function returns the `updates` state, which contains an array of all the updates to the event listener.\n\nOverall, the `useEventListener` function is a useful tool for tracking events in a React application. It is flexible and can be used with a variety of providers and contracts.",
- "questions": "1. What is the purpose of this code?\n \n This code enables the user to keep track of events and provides a hook called `useEventListener` to do so.\n\n2. How do I use this code in my project?\n \n To use this code, you can import the `useEventListener` hook and pass in the required parameters such as `readContracts`, `contractName`, `eventName`, `provider`, and `startBlock`.\n\n3. What are the features of this code?\n \n This code provides the ability to load contracts, specify the name of the contract and event, and specify the provider. It also allows the user to reset the events block and remove listeners.",
- "checksum": "cbdf8eef711c46ac789b9fb17dc79ba5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/ExchangePrice.json b/.autodoc/docs/json/lab/src/hooks/ExchangePrice.json
deleted file mode 100644
index 4a416bf27..000000000
--- a/.autodoc/docs/json/lab/src/hooks/ExchangePrice.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ExchangePrice.js",
- "filePath": "lab/src/hooks/ExchangePrice.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/ExchangePrice.js",
- "summary": "The code is a custom React hook that fetches the current price of a token on the Uniswap decentralized exchange. It uses the Uniswap SDK to interact with the exchange and the `eth-hooks` library to poll for the price at a specified interval. \n\nThe hook takes three arguments: `targetNetwork`, `mainnetProvider`, and `pollTime`. `targetNetwork` is an object that contains the current price of the token, or `null` if the price is not available. `mainnetProvider` is a web3 provider that is used to interact with the Ethereum network. `pollTime` is an optional argument that specifies the interval at which the price should be polled. If it is not provided, the default value of 9777 milliseconds is used.\n\nThe hook returns the current price of the token as a floating-point number. If the price is not available, it returns 0.\n\nThe `pollPrice` function is called by the `usePoller` hook at the specified interval. It first checks if `mainnetProvider` is defined, and if not, it returns 0. If `targetNetwork.price` is defined, it sets the price to that value. Otherwise, it creates a new `Token` object for the token with the specified address and decimal places. It then fetches the pair data for the token and WETH using the `Fetcher` object from the Uniswap SDK. It creates a new `Route` object using the pair data and the WETH token, and sets the price to the mid price of the route.\n\nThis hook can be used in a larger project to display the current price of a token on the Uniswap exchange. It can be used in conjunction with other hooks and components to build a custom dashboard or trading interface. For example, it could be used to display the current price of a token in a chart or table, or to trigger a trade when the price reaches a certain threshold. \n\nExample usage:\n\n```\nimport useExchangePrice from './useExchangePrice';\n\nfunction MyComponent() {\n const price = useExchangePrice({ price: 1.23 }, mainnetProvider, 5000);\n\n return (\n \n
\n );\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code is a custom hook called `useExchangePrice` that fetches the current price of a token on Uniswap and returns it.\n\n2. What dependencies are required for this code to work?\n- This code requires the \"@uniswap/sdk\" and \"eth-hooks\" packages to be imported, as well as the \"react\" package for the useState hook.\n\n3. What parameters does the `useExchangePrice` function take?\n- The `useExchangePrice` function takes three parameters: `targetNetwork` (an object containing the current network and price of the token), `mainnetProvider` (a provider for the Ethereum mainnet), and `pollTime` (an optional parameter for the polling interval in milliseconds).",
- "checksum": "157d6da30b0d58b5e9c703e0856fdc17"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/GasPrice.json b/.autodoc/docs/json/lab/src/hooks/GasPrice.json
deleted file mode 100644
index 3d6b81516..000000000
--- a/.autodoc/docs/json/lab/src/hooks/GasPrice.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "GasPrice.js",
- "filePath": "lab/src/hooks/GasPrice.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/GasPrice.js",
- "summary": "The code is a custom React hook called `useGasPrice` that fetches the current gas price for a specified Ethereum network and speed. Gas price is the amount of Ether required to execute a transaction on the Ethereum network. The hook uses the `axios` library to make an HTTP GET request to the Eth Gas Station API to retrieve the current gas prices. \n\nThe `useGasPrice` hook takes two arguments: `targetNetwork` and `speed`. `targetNetwork` is an object that contains information about the Ethereum network, including the current gas price. If `targetNetwork` has a `gasPrice` property, the hook sets the gas price to that value. If not, the hook makes an HTTP GET request to the Eth Gas Station API to retrieve the current gas prices. \n\nThe `speed` argument is an optional parameter that specifies the speed at which the transaction should be executed. If `speed` is not provided, the hook defaults to \"fast\". The hook then multiplies the gas price by 100000000 to convert it to wei, the smallest unit of Ether. \n\nThe `loadGasPrice` function is an asynchronous function that is called by the `usePoller` hook every 39999 milliseconds (approximately 40 seconds). `loadGasPrice` checks if the `targetNetwork` object has a `gasPrice` property. If it does, the hook sets the gas price to that value. If not, the hook makes an HTTP GET request to the Eth Gas Station API to retrieve the current gas prices. If the device is online, the hook retrieves the gas prices and sets the new gas price if it is different from the current gas price. If there is an error, the hook logs the error to the console. \n\nThe `usePoller` hook is a custom hook that takes two arguments: a function to be called and a delay in milliseconds. The `usePoller` hook calls the specified function every `delay` milliseconds. In this case, the `loadGasPrice` function is called every 39999 milliseconds to retrieve the current gas prices. \n\nThe `useGasPrice` hook returns the current gas price, which can be used in other parts of the project to estimate the cost of executing a transaction on the Ethereum network. \n\nExample usage:\n\n```\nimport useGasPrice from \"./useGasPrice\";\n\nfunction MyComponent() {\n const gasPrice = useGasPrice({ gasPrice: 20000000000 }, \"fast\");\n // gasPrice is the current gas price in wei\n // use gasPrice to estimate the cost of executing a transaction on the Ethereum network\n return (\n Current price: {price}
\n\n
\n );\n}\n```",
- "questions": "1. What does this code do?\n- This code exports a custom React hook called `useGasPrice` that fetches the current gas price for a specified Ethereum network and speed using the EthGasStation API.\n\n2. What parameters does the `useGasPrice` hook take?\n- The `useGasPrice` hook takes two parameters: `targetNetwork` (an object representing the target Ethereum network) and `speed` (a string representing the desired speed of the gas price).\n\n3. What is the purpose of the `usePoller` hook in this code?\n- The `usePoller` hook is used to repeatedly call the `loadGasPrice` function every 39999 milliseconds (or approximately 40 seconds) to update the gas price in real-time.",
- "checksum": "c4686321f204dc40deeba281284f9631"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/LocalStorage.json b/.autodoc/docs/json/lab/src/hooks/LocalStorage.json
deleted file mode 100644
index 97123b8e3..000000000
--- a/.autodoc/docs/json/lab/src/hooks/LocalStorage.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LocalStorage.js",
- "filePath": "lab/src/hooks/LocalStorage.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/LocalStorage.js",
- "summary": "The code defines a custom React hook called `useLocalStorage` that allows for storing and retrieving data from the browser's local storage. The hook takes three arguments: `key`, `initialValue`, and `ttl`. \n\nThe `key` argument is a string that serves as the identifier for the data being stored. The `initialValue` argument is the default value that will be returned if no data is found in local storage for the given key. The `ttl` argument is an optional time-to-live value that specifies the number of milliseconds that the data should be considered valid for. If the data is retrieved from local storage and its `expiry` time has passed, the hook will return the `initialValue` and remove the expired data from local storage.\n\nThe hook uses the `useState` hook from React to manage the state of the stored value. The initial state is set using a function that attempts to retrieve the data from local storage using the provided `key`. If the data is found, it is parsed from JSON and returned. If the parsed data is an object with `expiry` and `value` properties, the hook checks if the data has expired based on the current time and the `ttl` value. If the data has expired, the hook removes it from local storage and returns the `initialValue`. Otherwise, the `value` property is returned.\n\nThe hook returns an array with two values: the current stored value and a function to update the stored value. The update function takes a new value and saves it to local storage using the provided `key`. If the `ttl` argument is provided, the function creates an object with the `value` and `expiry` properties and saves it to local storage. Otherwise, it saves the value directly.\n\nThis hook can be used in a larger React project to store and retrieve data from local storage. For example, it could be used to store user preferences or settings that persist across sessions. Here is an example usage of the hook:\n\n```\nimport useLocalStorage from './useLocalStorage';\n\nfunction App() {\n const [count, setCount] = useLocalStorage('count', 0, 60000);\n\n function handleClick() {\n setCount(count + 1);\n }\n\n return (\n Current gas price: {gasPrice} wei
\n\n
\n );\n}\n```\n\nIn this example, the `count` value is stored in local storage with the key `'count'`. The initial value is `0` and the `ttl` is set to `60000` milliseconds (1 minute). The `setCount` function updates the stored value and persists it to local storage. The `handleClick` function increments the `count` value when the button is clicked.",
- "questions": "1. What does this code do?\n- This code exports a custom hook called `useLocalStorage` that allows for storing and retrieving data from local storage in a React component.\n\n2. What is the purpose of the `ttl` parameter?\n- The `ttl` parameter stands for \"time to live\" and is an optional parameter that specifies the number of milliseconds that the stored value should be considered valid. If the stored value has expired, it will be deleted from local storage and the initial value will be returned.\n\n3. What happens if an error occurs while trying to retrieve or store data in local storage?\n- If an error occurs while trying to retrieve or store data in local storage, the hook will log the error to the console and return the initial value.",
- "checksum": "06393f45642b7dfbbf1ea0cc4173b998"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/LookupAddress.json b/.autodoc/docs/json/lab/src/hooks/LookupAddress.json
deleted file mode 100644
index 5ecde87a6..000000000
--- a/.autodoc/docs/json/lab/src/hooks/LookupAddress.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "LookupAddress.js",
- "filePath": "lab/src/hooks/LookupAddress.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/LookupAddress.js",
- "summary": "The code in this file is a React hook that allows a user to get the Ethereum Name Service (ENS) name from a given address and provider. The code imports the `utils` module from the `ethers` library and the `useEffect` and `useState` hooks from the `react` library. \n\nThe `lookupAddress` function takes in a provider and an address as arguments. It first checks if the address is valid using the `isAddress` method from the `utils` module. If the address is valid, it looks up the ENS name associated with the address using the `lookupAddress` method from the provider. It then resolves the ENS name to an address using the `resolveName` method from the provider. If the resolved address matches the original address, it returns the ENS name. Otherwise, it returns the original address. If the address is not valid, it returns 0.\n\nThe `useLookupAddress` function takes in a provider and an address as arguments. It uses the `useState` hook to set the initial state of the ENS name to the address. It then uses the `useEffect` hook to check if the ENS name is already cached in `localStorage`. If it is, it sets the ENS name to the cached value. If it is not, it calls the `lookupAddress` function to get the ENS name and sets the state to the returned value. It also caches the ENS name in `localStorage` with a timestamp of 6 hours. \n\nTo use this hook, a user can import it into their React component and call it with the provider and address as arguments. For example:\n\n```\nimport useLookupAddress from './path/to/useLookupAddress';\n\nconst MyComponent = ({ provider, address }) => {\n const ensName = useLookupAddress(provider, address);\n\n return (\n Count: {count}
\n \n\n
\n );\n};\n```\n\nThis hook provides a convenient way for users to get the ENS name associated with an Ethereum address, which can be useful in various Ethereum applications.",
- "questions": "1. What is the purpose of the `lookupAddress` function?\n \n The `lookupAddress` function takes a provider and an address as input and returns the corresponding ENS name for the address, if available. It also ensures that the reported ENS name resolves to the given address.\n\n2. What is the purpose of the `useLookupAddress` function?\n \n The `useLookupAddress` function is a custom React hook that takes a provider and an address as input and returns the corresponding ENS name for the address, if available. It also caches the ENS name in local storage to avoid unnecessary lookups.\n\n3. What is the purpose of the commented out `useLocalStorage` line?\n \n The `useLocalStorage` line is a custom hook that is not used in the code. It is commented out because there were synchronization issues with it, and the developer decided to write directly to local storage instead.",
- "checksum": "d75def916464402a75aa329420121634"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/Nonce.json b/.autodoc/docs/json/lab/src/hooks/Nonce.json
deleted file mode 100644
index 753617d88..000000000
--- a/.autodoc/docs/json/lab/src/hooks/Nonce.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Nonce.js",
- "filePath": "lab/src/hooks/Nonce.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/Nonce.js",
- "summary": "The code above is a custom React hook called `useNonce` that is used to retrieve the nonce of a given Ethereum address. The nonce is a unique number that is used to prevent replay attacks on transactions. \n\nThe hook takes in two parameters: `mainnetProvider` and `address`. `mainnetProvider` is an instance of a web3 provider that is connected to the Ethereum mainnet, while `address` is the Ethereum address for which the nonce is being retrieved. \n\nThe hook uses the `useState` hook from React to create a state variable called `nonce` and initialize it to 0. The `useState` hook returns an array with two elements: the current state value and a function to update the state value. In this case, `nonce` is the current state value and `setNonce` is the function to update it. \n\nThe `Nonce` function is defined inside the `useNonce` hook and is called immediately after it is defined. The `Nonce` function is an async function that retrieves the nonce for the given address using the `getTransactionCount` method of the `mainnetProvider`. The `getTransactionCount` method returns the number of transactions sent from the given address. \n\nIf the `address` parameter is truthy (i.e., not null or undefined), the `getNonce` function is called to retrieve the nonce and update the `nonce` state variable using the `setNonce` function. \n\nFinally, the `useNonce` hook returns the `nonce` state variable, which can be used in other parts of the application to sign transactions with the correct nonce. \n\nHere is an example of how the `useNonce` hook can be used in a React component:\n\n```\nimport useNonce from './useNonce';\n\nfunction MyComponent({ mainnetProvider, address }) {\n const nonce = useNonce(mainnetProvider, address);\n\n // Use the nonce to sign a transaction\n const signedTx = signTransaction({ nonce, ...otherTxData });\n\n return (\n Address: {address}
\nENS Name: {ensName}
\n\n
\n );\n}\n```\n\nOverall, the `useNonce` hook is a useful utility function for any Ethereum application that needs to sign transactions with the correct nonce.",
- "questions": "1. What is the purpose of this code and how is it used in the zoo project?\n This code defines a custom hook called `useNonce` that retrieves the transaction count for a given address on the Ethereum mainnet using a provided provider. It is likely used in the zoo project to interact with the Ethereum blockchain.\n\n2. What is the significance of the `useState` hook being used in this code?\n The `useState` hook is used to define a state variable called `nonce` and a function called `setNonce` that can be used to update the value of `nonce`. This allows the `useNonce` hook to store and update the nonce value over time.\n\n3. Why is the `getNonce` function defined as an async function and what does it do?\n The `getNonce` function is defined as an async function because it needs to wait for the `mainnetProvider.getTransactionCount` function to return a value before it can update the `nonce` state variable using `setNonce`. It retrieves the transaction count for the provided address on the Ethereum mainnet.",
- "checksum": "40ce930428d8bc7235e80d5040d7d586"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/OnBlock.json b/.autodoc/docs/json/lab/src/hooks/OnBlock.json
deleted file mode 100644
index b29b86ed2..000000000
--- a/.autodoc/docs/json/lab/src/hooks/OnBlock.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "OnBlock.js",
- "filePath": "lab/src/hooks/OnBlock.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/OnBlock.js",
- "summary": "The code is a custom React hook called `useOnBlock` that is designed to help call a function regularly in time intervals. The hook takes in three parameters: `provider`, `fn`, and `args`. \n\nThe `provider` parameter is an object that is used to listen for events. The `fn` parameter is the function that will be called at regular intervals. The `args` parameter is an optional array of arguments that will be passed to the function when it is called.\n\nThe hook uses the `useRef` and `useEffect` hooks from React to keep track of the latest function and to turn on the listener if both the function and provider are present. The `useRef` hook is used to store the latest function in a mutable reference that persists across renders. The `useEffect` hook is used to update the reference to the latest function whenever it changes.\n\nWhen the function and provider are present, the hook sets up a listener for the \"block\" event on the provider object. The listener function is called whenever a new block is added to the blockchain. If the `DEBUG` flag is set to true, the function logs the block number, the function being called, the arguments being passed, and the provider's listeners. \n\nThe listener function then checks if there are any arguments to be passed to the function. If there are, it calls the saved function with the arguments. If there are no arguments, it simply calls the saved function.\n\nThis hook can be used in a larger project to listen for events on a blockchain and call a function at regular intervals. For example, it could be used to update the UI with the latest block number or to fetch new data from a blockchain API. \n\nHere is an example of how the `useOnBlock` hook could be used in a React component:\n\n```\nimport { useState } from \"react\";\nimport useOnBlock from \"./useOnBlock\";\n\nfunction MyComponent({ provider }) {\n const [blockNumber, setBlockNumber] = useState(0);\n\n useOnBlock(provider, () => {\n setBlockNumber(blockNumber + 1);\n });\n\n return (\n Nonce: {nonce}
\nSigned transaction: {signedTx}
\n\n
\n );\n}\n```\n\nIn this example, the `MyComponent` component takes in a `provider` object as a prop. The component uses the `useState` hook to keep track of the current block number. The `useOnBlock` hook is used to listen for new blocks on the `provider` object and update the block number in the component's state. The updated block number is then displayed in the component's UI.",
- "questions": "1. What is the purpose of this code?\n This code is a custom React hook called `useOnBlock` that sets up a listener for Ethereum block events and calls a provided function at regular intervals.\n\n2. What is the significance of the `DEBUG` constant?\n The `DEBUG` constant is used to toggle console logging of block events, the provided function, and the provider's listeners. It is set to `false` by default.\n\n3. What happens if either the `fn` or `provider` arguments are not provided?\n If either the `fn` or `provider` arguments are not provided, the listener will not be turned on and the hook will not do anything.",
- "checksum": "8cd581f062e65dd579c28e529a740ec6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/Poller.json b/.autodoc/docs/json/lab/src/hooks/Poller.json
deleted file mode 100644
index b4fc5c79c..000000000
--- a/.autodoc/docs/json/lab/src/hooks/Poller.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Poller.js",
- "filePath": "lab/src/hooks/Poller.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/Poller.js",
- "summary": "The code above is a custom React hook called `usePoller` that allows a function to be called regularly at specified time intervals. This hook takes in three parameters: `fn`, `delay`, and `extraWatch`. \n\nThe `fn` parameter is the function that will be called at each interval. The `delay` parameter is the time interval in milliseconds between each call of the function. The `extraWatch` parameter is an optional parameter that can be used to trigger the function to run again if it changes.\n\nThe hook uses the `useEffect` and `useRef` hooks from React. The `useRef` hook is used to store the latest version of the `fn` parameter. The `useEffect` hook is used to update the stored `fn` parameter whenever it changes. \n\nThe hook then sets up an interval using the `setInterval` function. The `setInterval` function takes in the `tick` function and the `delay` parameter. The `tick` function simply calls the stored `fn` parameter. The `useEffect` hook also returns a cleanup function that clears the interval using the `clearInterval` function.\n\nFinally, the hook runs the `fn` function at the start using another `useEffect` hook. This hook is triggered whenever the `extraWatch` parameter changes.\n\nThis hook can be used in a larger project to regularly call a function, such as updating data from an API or refreshing a component. Here is an example of how to use this hook:\n\n```\nimport React, { useState } from \"react\";\nimport usePoller from \"./usePoller\";\n\nfunction App() {\n const [count, setCount] = useState(0);\n\n usePoller(() => {\n setCount(count + 1);\n }, 1000);\n\n return (\n Current block number: {blockNumber}
\n\n
\n );\n}\n\nexport default App;\n```\n\nIn this example, the `usePoller` hook is used to update the `count` state variable every second. The `setCount` function is called inside the `usePoller` hook to update the state. The updated `count` value is then displayed in the component.",
- "questions": "1. What does this code do?\n This code exports a custom React hook called `usePoller` that takes in a function, a delay time, and an extra watch value as arguments. It sets up an interval to call the function regularly at the specified delay time, and also runs the function at the start and whenever the extra watch value changes.\n\n2. What is the purpose of the `useRef` hook in this code?\n The `useRef` hook is used to create a mutable reference to the latest version of the function passed in as an argument to `usePoller`. This reference is then used in the interval setup to ensure that the latest version of the function is always called.\n\n3. Why is there an `eslint-disable-next-line` comment in this code?\n The `eslint-disable-next-line` comment is used to disable the eslint rule that requires a `return` statement in the second `useEffect` hook. This is because the `return` statement is conditionally executed based on the value of `delay`, and eslint cannot determine this at compile time.",
- "checksum": "edf350734efcb7cdb610ee4b66334922"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/ResolveName.json b/.autodoc/docs/json/lab/src/hooks/ResolveName.json
deleted file mode 100644
index f17551698..000000000
--- a/.autodoc/docs/json/lab/src/hooks/ResolveName.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ResolveName.js",
- "filePath": "lab/src/hooks/ResolveName.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/ResolveName.js",
- "summary": "The code in this file provides a custom React hook called `useResolveName` that can be used to get the address corresponding to a given ENS name using a specified Ethereum provider. The hook takes two parameters: `provider`, which is the Ethereum provider to use for resolving the ENS name, and `ensName`, which is the ENS name to resolve.\n\nThe hook uses the `useState` and `useEffect` hooks from the React library to manage state and side effects. Specifically, it initializes the `address` state to the Ethereum constant `AddressZero`, which represents the null address, and then uses the `useEffect` hook to asynchronously resolve the ENS name and update the `address` state when the `provider` or `ensName` parameters change.\n\nThe hook returns the resolved `address` state, which can be used in other parts of the application to interact with the Ethereum network using the resolved address.\n\nThis code is useful in the larger project because it provides a simple and reusable way to resolve ENS names to Ethereum addresses using a specified provider. For example, it could be used in a decentralized application to look up the address of a user's ENS name and then interact with their Ethereum account on the network. Here is an example usage of the hook:\n\n```\nimport { ethers } from \"ethers\";\nimport useResolveName from \"./useResolveName\";\n\nconst MyComponent = () => {\n const mainnetProvider = new ethers.providers.InfuraProvider(\"mainnet\");\n const addressFromENS = useResolveName(mainnetProvider, \"austingriffith.eth\");\n\n // Use the resolved address in the component\n return Count: {count}
\nResolved address: {addressFromENS}
;\n};\n```",
- "questions": "1. What is the purpose of the `ethers` library being imported?\n- The `ethers` library is being used to access the `constants` object which contains the `AddressZero` constant.\n\n2. How does the `useResolveName` function work?\n- The `useResolveName` function takes in a provider and an ENS name as arguments, and returns the corresponding address for the given ENS name using the `resolveName` method of the provider.\n\n3. What is the expected output of using the `useResolveName` function?\n- The expected output of using the `useResolveName` function is the address corresponding to the given ENS name.",
- "checksum": "73c899552a11224dc0c2c142c3953de0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/TokenList.json b/.autodoc/docs/json/lab/src/hooks/TokenList.json
deleted file mode 100644
index 4c5033aa9..000000000
--- a/.autodoc/docs/json/lab/src/hooks/TokenList.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TokenList.js",
- "filePath": "lab/src/hooks/TokenList.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/TokenList.js",
- "summary": "# `useTokenList` function\n\nThe `useTokenList` function is a custom React hook that retrieves a token list from a specified URI and returns an array of tokens. A token list is a JSON file that contains information about tokens, such as their name, symbol, and contract address. The function takes two optional parameters: `tokenListUri` and `chainId`.\n\n## How to use\n\nTo use the `useTokenList` function, import it into a React component and call it. By default, it returns the Uniswap token list. You can also pass a custom token list URI as the first parameter to retrieve a different token list. If you pass a `chainId` as the second parameter, the function will filter the token list to only include tokens that belong to that chain.\n\n```javascript\nimport useTokenList from './useTokenList';\n\nconst MyComponent = () => {\n const tokenList = useTokenList(); // returns Uniswap tokens\n const customTokenList = useTokenList('https://mycustomtokenlist.com', 1); // returns tokens for chainId 1\n // ...\n};\n```\n\n## Features\n\n- Retrieves a token list from a specified URI\n- Returns an array of tokens\n- Optional `chainId` parameter to filter tokens by chainId\n\n## Implementation\n\nThe `useTokenList` function uses the `useState` and `useEffect` hooks from React. It initializes a state variable `tokenList` as an empty array and sets the default token list URI to the Uniswap token list. When the component mounts or the `tokenListUri` parameter changes, the function calls an asynchronous `getTokenList` function that fetches the token list from the specified URI. If the `chainId` parameter is passed, the function filters the token list to only include tokens that belong to that chain. Finally, the function sets the `tokenList` state variable to an array of tokens extracted from the token list JSON.",
- "questions": "1. What is the purpose of this code?\n \n This code defines a custom React hook called `useTokenList` that fetches a tokenlist and returns an array of tokens from it. The tokenlist URI and chainId can be optionally specified as parameters.\n\n2. What is the format of the tokenlist that this code fetches?\n\n The code expects the tokenlist to be in JSON format, with an array of objects containing information about each token. The relevant information for this code is the `tokens` property of the JSON object.\n\n3. What happens if the user is offline when this code is executed?\n\n If the user is offline, the code will not attempt to fetch the tokenlist and will not update the state of the `tokenList` variable.",
- "checksum": "1dc20f0454b70d5209f61fce03e29abe"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/UserSigner.json b/.autodoc/docs/json/lab/src/hooks/UserSigner.json
deleted file mode 100644
index 84932e43e..000000000
--- a/.autodoc/docs/json/lab/src/hooks/UserSigner.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "UserSigner.js",
- "filePath": "lab/src/hooks/UserSigner.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/UserSigner.js",
- "summary": "The `useUserSigner` function is a custom React hook that returns a signer object for a user. A signer is an object that can sign Ethereum transactions and messages. The function takes two arguments: `injectedProvider` and `localProvider`. The `injectedProvider` is a provider object that is injected into the browser by a wallet like Metamask. The `localProvider` is a provider object that is created by the application itself, using a library like ethers.js.\n\nThe function first initializes a state variable `signer` using the `useState` hook. It also calls another custom hook `useBurnerSigner` with the `localProvider` argument. The `useBurnerSigner` hook returns a burner signer object that can be used for testing purposes.\n\nThe function then uses the `useMemo` hook to memoize the `signer` state variable. If `injectedProvider` is truthy, it gets the signer object from the provider and sets it as the `signer` state. If `localProvider` is falsy, it sets the `signer` state to `undefined`. If neither `injectedProvider` nor `localProvider` is truthy, it sets the `signer` state to the burner signer object returned by `useBurnerSigner`.\n\nThe function returns the `signer` state variable. This hook can be used in a React component to get the signer object for the user. For example:\n\n```\nimport { useWeb3React } from \"@web3-react/core\";\nimport useUserSigner from \"./useUserSigner\";\n\nfunction MyComponent() {\n const { library } = useWeb3React();\n const signer = useUserSigner(library.getSigner(), library);\n\n // Use the signer object to sign transactions or messages\n}\n```\n\nIn this example, the `useWeb3React` hook is used to get the `library` object, which is a provider object injected by the Web3 React library. The `library.getSigner()` method returns the signer object for the current user. The `library` object is also passed as the `localProvider` argument to `useUserSigner`. The `signer` object returned by `useUserSigner` can then be used to sign transactions or messages.",
- "questions": "1. What is the purpose of the `useMemo` hook in this code?\n - The `useMemo` hook is used to memoize the function that sets the signer based on the provider, so that it only runs when the dependencies (`injectedProvider`, `localProvider`, and `burnerSigner`) change.\n2. What is the `useBurnerSigner` function and how is it used in this code?\n - The `useBurnerSigner` function is imported from another file and is used to get a burner signer from the local provider. It is used in the `useUserSigner` function to set the signer to the burner signer if no injected provider is available.\n3. What are the possible values that can be returned by the `useUserSigner` function?\n - The `useUserSigner` function returns the signer, which can be either an injected signer (if `injectedProvider` is available), a burner signer (if no `injectedProvider` is available and `localProvider` is available), or `undefined` (if no `injectedProvider` or `localProvider` is available).",
- "checksum": "a7503f3a1aca3db58448f0115e94f13e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/hooks/index.json b/.autodoc/docs/json/lab/src/hooks/index.json
deleted file mode 100644
index 9aff0e5e9..000000000
--- a/.autodoc/docs/json/lab/src/hooks/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.js",
- "filePath": "lab/src/hooks/index.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/hooks/index.js",
- "summary": "This code exports a series of custom React hooks from various files within the `zoo` project. These hooks are designed to provide functionality for interacting with Ethereum smart contracts and other blockchain-related tasks.\n\nFor example, the `useContractLoader` hook can be used to load a smart contract from its address on the blockchain, while the `useContractReader` hook can be used to read data from a smart contract. The `useGasPrice` hook provides the current gas price for transactions on the Ethereum network, and the `useResolveName` hook can be used to resolve an Ethereum address to its corresponding ENS name.\n\nThese hooks can be imported and used in other parts of the `zoo` project to simplify the process of interacting with the blockchain. For example, a component that needs to read data from a smart contract can use the `useContractReader` hook to do so without having to write custom code to interact with the contract.\n\nHere is an example of how the `useGasPrice` hook could be used in a React component:\n\n```\nimport { useGasPrice } from 'zoo';\n\nfunction GasPriceDisplay() {\n const gasPrice = useGasPrice();\n\n return (\n \n Current gas price: {gasPrice} wei\n
\n );\n}\n```\n\nOverall, this code provides a set of reusable hooks that can be used throughout the `zoo` project to simplify interactions with the Ethereum blockchain.",
- "questions": "1. What is the purpose of this code file?\n- This code file exports various custom hooks from different files within the `zoo` project.\n\n2. What are some examples of the custom hooks being exported?\n- Some examples of the custom hooks being exported include `useBalance`, `useContractLoader`, `useLocalStorage`, and `useUserSigner`.\n\n3. How can a developer use these custom hooks in their own code?\n- A developer can import the desired custom hook from this file and use it in their own code by calling the hook function and passing in any necessary parameters.",
- "checksum": "7235d9b54c2ae4c1eec3da52673942cf"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/index.json b/.autodoc/docs/json/lab/src/index.json
deleted file mode 100644
index ec4a7df84..000000000
--- a/.autodoc/docs/json/lab/src/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.jsx",
- "filePath": "lab/src/index.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/index.jsx",
- "summary": "This code sets up the environment for a React application that interacts with a GraphQL subgraph. It imports necessary dependencies from external libraries such as Apollo Client and React CSS Theme Switcher. \n\nThe `themes` object contains two properties, `dark` and `light`, which are URLs to CSS files for the respective themes. These themes can be switched using the `ThemeSwitcherProvider` component from the React CSS Theme Switcher library. The `prevTheme` variable retrieves the previously selected theme from local storage, or defaults to \"light\" if no theme has been selected before.\n\nThe `subgraphUri` variable is the URL to the GraphQL subgraph that the application will interact with. This URL is specific to the project and may need to be changed depending on the subgraph being used.\n\nThe `client` variable creates a new instance of the Apollo Client with the `subgraphUri` and an `InMemoryCache`. This client will be used to make GraphQL queries to the subgraph.\n\nFinally, the `ReactDOM.render()` method renders the `App` component wrapped in the `ApolloProvider` and `ThemeSwitcherProvider` components. The `ApolloProvider` component provides the `client` instance to the `App` component, allowing it to make GraphQL queries. The `ThemeSwitcherProvider` component provides the theme switching functionality to the `App` component.\n\nOverall, this code sets up the environment for a React application that interacts with a GraphQL subgraph and provides theme switching functionality. It can be used as a starting point for building a frontend for a dApp that uses a subgraph to query data from the blockchain. \n\nExample usage:\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\nimport { ApolloClient, ApolloProvider, InMemoryCache } from \"@apollo/client\";\nimport { ThemeSwitcherProvider } from \"react-css-theme-switcher\";\nimport \"./index.css\";\n\nconst themes = {\n dark: `${process.env.PUBLIC_URL}/dark-theme.css`,\n light: `${process.env.PUBLIC_URL}/light-theme.css`,\n};\n\nconst prevTheme = window.localStorage.getItem(\"theme\");\n\nconst subgraphUri = \"http://localhost:8000/subgraphs/name/scaffold-eth/your-contract\";\n\nconst client = new ApolloClient({\n uri: subgraphUri,\n cache: new InMemoryCache(),\n});\n\nReactDOM.render(\n \n
\n```",
- "questions": "1. What is the purpose of the imported LESS files?\n - The imported LESS files are used to style the components of the `antd` library, which is likely being used in the `zoo` project.\n\n2. Why are there shared variables commented out?\n - The shared variables are likely commented out because they have been extracted to their own file for easier management and organization.\n\n3. What is the purpose of the `.highlight` class?\n - The `.highlight` class is used to apply a specific background color to elements that need to be highlighted in the UI.",
- "checksum": "2cbaddea9d40e9b66f325be586979f74"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/views/ExampleUI.json b/.autodoc/docs/json/lab/src/views/ExampleUI.json
deleted file mode 100644
index 1201dcc05..000000000
--- a/.autodoc/docs/json/lab/src/views/ExampleUI.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ExampleUI.jsx",
- "filePath": "lab/src/views/ExampleUI.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/views/ExampleUI.jsx",
- "summary": "The code is a React component that provides a user interface for interacting with a smart contract. The component receives several props, including the contract's address, provider, and read and write contracts. The UI displays the current purpose of the contract and allows the user to set a new purpose by entering text into an input field and clicking a button. When the button is clicked, the component calls the setPurpose function on the write contract with the new purpose as an argument. The component also displays the user's address, balance, and contract address, as well as several example buttons that demonstrate how to send value and call functions on the contract. \n\nThe UI also includes a section for displaying events emitted by the contract. This section is commented out by default, but can be uncommented by adding an emit statement to the setPurpose function in the contract. Finally, the UI includes several example components from the ant.design library, such as buttons, sliders, and date pickers. \n\nThis component can be used as a starting point for building a more complex UI for a smart contract. Developers can modify the component to display additional contract data, add new functions for interacting with the contract, or replace the example components with custom components. \n\nExample usage:\n\n```jsx\nimport ExampleUI from \"./ExampleUI\";\n\nfunction App() {\n const [purpose, setPurpose] = useState(\"\");\n const [setPurposeEvents, setSetPurposeEvents] = useState([]);\n const [address, setAddress] = useState(\"\");\n const [mainnetProvider, setMainnetProvider] = useState(\"\");\n const [localProvider, setLocalProvider] = useState(\"\");\n const [yourLocalBalance, setYourLocalBalance] = useState(\"\");\n const [price, setPrice] = useState(\"\");\n const [tx, setTx] = useState(\"\");\n const [readContracts, setReadContracts] = useState(\"\");\n const [writeContracts, setWriteContracts] = useState(\"\");\n\n // set values for props\n\n return (\n This text is highlighted
\n\n
\n );\n}\n```",
- "questions": "1. What is the purpose of the `useTokenList` hook and where does it get its data from?\n- The `useTokenList` hook returns an array of tokens and gets its data from the tokenlist located at `https://raw.githubusercontent.com/SetProtocol/uniswap-tokenlist/main/set.tokenlist.json`.\n2. What is the purpose of the `AddressInput` component and what props does it take?\n- The `AddressInput` component is a web3 specific component used for inputting addresses and takes a prop called `ensProvider` which is used for resolving ENS names.\n3. What is the purpose of the `usePrice` hook and what value does it return?\n- The `usePrice` hook is used to load the current price and returns the value of `price`.",
- "checksum": "49bbf7635ac3aeeaa03e04efccc4c593"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/views/Subgraph.json b/.autodoc/docs/json/lab/src/views/Subgraph.json
deleted file mode 100644
index fb826ca9c..000000000
--- a/.autodoc/docs/json/lab/src/views/Subgraph.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Subgraph.jsx",
- "filePath": "lab/src/views/Subgraph.jsx",
- "url": "zoo-labs/zoo/blob/master/lab/src/views/Subgraph.jsx",
- "summary": "The `Subgraph` component is a React component that renders a UI for interacting with a subgraph. A subgraph is a tool provided by The Graph that allows developers to index and query data from a blockchain. The component imports several dependencies, including `@apollo/client`, `antd`, and `graphiql`, and defines a function called `graphQLFetcher` that fetches data from the subgraph using the `fetch` API. \n\nThe component then defines a GraphQL query called `EXAMPLE_GRAPHQL` that retrieves data from the subgraph, including the `id`, `purpose`, `createdAt`, and `sender` fields. The query is then passed to the `gql` function from `@apollo/client` to create a GraphQL document called `EXAMPLE_GQL`. The `useQuery` hook from `@apollo/client` is then used to execute the query and retrieve the data. The `loading` and `data` variables are destructured from the result of the `useQuery` hook.\n\nThe component also defines a table called `purposeColumns` that specifies the columns to be displayed in the UI. The table includes columns for the `purpose`, `sender`, and `createdAt` fields. The `render` function for the `sender` column uses the `Address` component from `../components` to display the `id` field of the `sender` object.\n\nThe component defines a state variable called `newPurpose` using the `useState` hook. The `newPurpose` variable is initialized to the string \"loading...\". The component also defines a `deployWarning` variable that displays a warning message if the subgraph has not been deployed.\n\nThe component renders a UI that includes several sections of text that provide instructions for deploying and using a subgraph. The UI also includes an input field and a button that allow the user to set the `purpose` field of a contract. The `tx` function is passed to the component as a prop and is used to call the `setPurpose` function on the contract. \n\nThe UI also includes a table that displays the data retrieved from the subgraph, as well as a GraphiQL editor that allows the user to execute GraphQL queries against the subgraph. If the `data` variable is null, the UI displays either a loading message or the `deployWarning` message.\n\nOverall, the `Subgraph` component provides a simple UI for interacting with a subgraph and retrieving data from a blockchain. The component can be used as part of a larger project that requires indexing and querying blockchain data.",
- "questions": "1. What is the purpose of the `Subgraph` component?\n- The `Subgraph` component is used to display data from a GraphQL subgraph and provides functionality to set a new purpose value.\n2. What external libraries are being used in this code?\n- The code is using several external libraries including `@apollo/client`, `antd`, `graphiql`, and `isomorphic-fetch`.\n3. What is the purpose of the `highlight` object?\n- The `highlight` object is used to style a highlighted section of text in the component's rendered output. However, it is currently commented out and not being used.",
- "checksum": "ca9a333e00733be181e15f7da796954d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/lab/src/views/index.json b/.autodoc/docs/json/lab/src/views/index.json
deleted file mode 100644
index 21d2c59fa..000000000
--- a/.autodoc/docs/json/lab/src/views/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.js",
- "filePath": "lab/src/views/index.js",
- "url": "zoo-labs/zoo/blob/master/lab/src/views/index.js",
- "summary": "This code exports three modules from the `zoo` project: `ExampleUI`, `Hints`, and `Subgraph`. \n\n`ExampleUI` is likely a user interface component that provides an example of how to use a particular feature or functionality within the larger `zoo` project. It may contain buttons, input fields, or other interactive elements that allow the user to interact with the feature in question. \n\n`Hints` is likely a module that provides hints or suggestions to the user on how to use the `zoo` project. This could be in the form of tooltips, pop-ups, or other types of notifications that appear when the user hovers over or clicks on certain elements within the project. \n\n`Subgraph` is likely a module that provides a subgraph of the larger `zoo` project. This could be a smaller, more focused view of a particular feature or functionality within the project, allowing the user to more easily understand and interact with that feature. \n\nOverall, this code is important for the `zoo` project because it allows other parts of the project to easily import and use these three modules. For example, if another component within the project needs to display an example of how to use a particular feature, it can simply import `ExampleUI` and use it within its own code. \n\nExample usage:\n\n```\nimport { ExampleUI, Hints, Subgraph } from 'zoo';\n\n// Use ExampleUI component\nChild components go here
\n \n \n
\n )\n}\n```\n\nIn this example, the `MyVideoPlayer` component renders a video element and the `MediaPlayButton` component. The `mediaRef` prop of the `MediaPlayButton` component is set to the `videoRef` object, which is a reference to the video element. This allows the `MediaPlayButton` component to control the play/pause behavior of the video element.",
- "questions": "1. What does this code do?\n- This code exports a React component called `MediaPlayButton` that renders a button with a play/pause icon. When clicked, it plays or pauses an audio or video element passed as a prop.\n\n2. What external libraries does this code use?\n- This code uses two external libraries: `@fortawesome/react-fontawesome` and `@fortawesome/free-solid-svg-icons`. These libraries provide the FontAwesomeIcon component and the faPlay/faPause icons used in the button.\n\n3. What is the purpose of the `useEffect` hook in this code?\n- The `useEffect` hook is used to set up event listeners on the media element passed as a prop. When the media starts playing, it sets the `playing` state to true, and when it pauses, it sets the `playing` state to false. The hook also cleans up the event listeners when the component unmounts.",
- "checksum": "a4aea07a9fa9edf70fe15d5173568ad0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/components/TokenMedia/TokenFallback.json b/.autodoc/docs/json/ui/src/components/TokenMedia/TokenFallback.json
deleted file mode 100644
index 175ae28a5..000000000
--- a/.autodoc/docs/json/ui/src/components/TokenMedia/TokenFallback.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TokenFallback.tsx",
- "filePath": "ui/src/components/TokenMedia/TokenFallback.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/components/TokenMedia/TokenFallback.tsx",
- "summary": "The `TokenFallback` component is a React functional component that renders a fallback UI for when content is not available for a given token. It takes in several props, including `style`, `className`, `token`, `chainId`, and `onRefreshClicked`. \n\nThe component first uses the `useReservoirClient` hook to get the current client instance, and then uses the `chainId` prop to determine which chain to use. If `chainId` is not provided, it defaults to the current chain. \n\nThe component then renders a `Flex` container with `justify`, `align`, and `direction` props set to center the child elements. The `gap` and `aspectRatio` CSS properties are also set on the container. \n\nInside the container, the component conditionally renders an `img` element if the `token` prop has a `collection` object with an `image` property. The image is displayed with a width and height of 64 pixels, and a border radius of 8 pixels. \n\nNext, a `Text` component is rendered with the text \"No Content Available\". The `style` prop is set to \"body2\", and the `textAlign` CSS property is set to center the text. \n\nFinally, a `Button` component is rendered with the text \"Refresh\". When clicked, the `onRefreshClicked` prop is called, and a POST request is made to the Reservoir API to refresh the token. The request includes the `token` ID in the request body, and the `Content-Type` header is set to \"application/json\". \n\nThis component can be used in the larger project as a fallback UI for when content is not available for a given token. It provides a way for users to refresh the token content if it becomes stale. \n\nExample usage:\n\n```\nimport TokenFallback from './TokenFallback'\n\nfunction MyComponent() {\n return (\n \n console.log('Refresh clicked')}\n />\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `TokenFallback` component?\n- The `TokenFallback` component is a fallback UI for when there is no content available for a token.\n\n2. What is the `useReservoirClient` hook and where is it defined?\n- The `useReservoirClient` hook is defined in the `../../hooks` module and is used to retrieve the Reservoir client instance.\n\n3. What is the `paths` object imported from `@reservoir0x/reservoir-sdk` used for?\n- The `paths` object is used to define the types for the request and response parameters for the `/tokens/refresh/v1` endpoint.",
- "checksum": "ab3cdd2b75aab4ec9eaff6a777bce9f6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/components/TokenMedia/index.json b/.autodoc/docs/json/ui/src/components/TokenMedia/index.json
deleted file mode 100644
index 1963902be..000000000
--- a/.autodoc/docs/json/ui/src/components/TokenMedia/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.tsx",
- "filePath": "ui/src/components/TokenMedia/index.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/components/TokenMedia/index.tsx",
- "summary": "The `TokenMedia` component is a React functional component that renders different types of media based on the type of token passed to it. The component takes in a `token` object, which is an object that contains information about the token, such as its media type, image, and collection. The component also takes in a `preview` boolean, which determines whether the media should be displayed as a preview or not. \n\nThe `TokenMedia` component uses the `useTokens` and `useModelViewer` hooks to retrieve data about the token and to render the 3D model viewer, respectively. The component also uses the `ThemeContext` context to retrieve the theme of the application and set the border radius of the media element. \n\nThe `TokenMedia` component renders different types of media based on the `mediaType` of the token. If the `mediaType` is an image, the component renders an `img` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is a video, the component renders a `video` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is an audio file, the component renders an `audio` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is a 3D model, the component renders a `model-viewer` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is an HTML file, the component renders an `iframe` element with the `src` attribute set to the `media` property of the token. \n\nIf the `mediaType` is not recognized or if there is an error loading the media, the component renders a fallback element. The fallback element can be customized by passing a `fallback` function to the component. \n\nThe `TokenMedia` component also provides options to customize the style and behavior of the media elements. These options include `style`, `className`, `modelViewerOptions`, `videoOptions`, `audioOptions`, `iframeOptions`, `onError`, and `onRefreshToken`. \n\nOverall, the `TokenMedia` component is a versatile component that can render different types of media based on the type of token passed to it. It provides options to customize the style and behavior of the media elements and can be used in a larger project to display media associated with tokens. \n\nExample usage:\n\n```jsx\nimport TokenMedia from './TokenMedia'\n\nconst token = {\n media: 'https://example.com/video.mp4',\n image: 'https://example.com/image.png',\n collection: 'example-collection',\n tokenId: 'example-token',\n}\n\nfunction App() {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `extractMediaType` function?\n- The `extractMediaType` function takes a token object and returns the media type of the token (e.g. mp4, mp3, png, etc.) based on the file extension of the media URL.\n\n2. What are the different types of media that this component can render?\n- The component can render images (png, jpeg, jpg, gif), videos (mp4), audio (mp3, wav), 3D models (gltf, glb), HTML, SVG, and other media types.\n\n3. What is the purpose of the `fallback` prop?\n- The `fallback` prop is a function that takes the media type of the token as an argument and returns a fallback element to render if there is an error loading the media. If no fallback function is provided, a default `TokenFallback` component is rendered.",
- "checksum": "e4816a1789961b1e639f2cac44532e3b"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/components/cart/CartCheckoutModal.json b/.autodoc/docs/json/ui/src/components/cart/CartCheckoutModal.json
deleted file mode 100644
index 9ed991f06..000000000
--- a/.autodoc/docs/json/ui/src/components/cart/CartCheckoutModal.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "CartCheckoutModal.tsx",
- "filePath": "ui/src/components/cart/CartCheckoutModal.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/components/cart/CartCheckoutModal.tsx",
- "summary": "The `CartCheckoutModal` component is a React component that renders a modal for the checkout process of a shopping cart. It receives several props that contain information about the items in the cart, the total price, the currency, the chain, and the transaction status. \n\nThe component uses several other components and libraries to render the modal, including `DialogPrimitive`, `framer-motion`, `@stitches/react`, and `@fortawesome/react-fontawesome`. It also uses several custom components from the project, such as `TokenCheckout`, `SigninStep`, and `ApprovalCollapsible`.\n\nThe modal has several states depending on the transaction status. If the status is `Approving`, the modal shows a list of items to be approved, and the user is prompted to sign in to their wallet. If the status is `Finalizing`, the modal shows a message indicating that the transaction is being finalized on the blockchain. If the status is `Complete`, the modal shows a message indicating whether the transaction was successful or not, and provides a link to view the transaction on the blockchain.\n\nThe component also uses several hooks to retrieve data and manage state, such as `useContext`, `useState`, `useEffect`, and custom hooks like `useCoinConversion`. \n\nOverall, the `CartCheckoutModal` component is an important part of the shopping cart feature of the project, providing a user-friendly interface for the checkout process and integrating with various blockchain-related libraries and services. \n\nExample usage:\n\n```jsx\n\n
\n )}\n Total price: {totalPrice}
\n- \n {items.map(item => (\n
- {item.name} \n ))}\n
\n View cart} />\n
\n )\n}\n```\n\nIn this example, three `CartToast` components are rendered with different `kind` and `message` props. The third toast also includes a link to the cart page. \n\nOverall, the `CartToast` component is a simple and flexible way to display feedback messages to the user in a consistent and customizable way.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `CartToast` that displays a message with an optional link and an icon based on the type of message (success, error, or warning).\n\n2. What external dependencies does this code rely on?\n- This code relies on the `react`, `@fortawesome/react-fontawesome`, and `@fortawesome/free-solid-svg-icons` packages.\n\n3. What are the available props for the `CartToast` component?\n- The available props for the `CartToast` component are `kind` (string, optional), `message` (string, required), and `link` (ReactNode, optional). The `kind` prop can be one of three values: `'success'`, `'error'`, or `'warning'`. If `kind` is not provided, it defaults to `'success'`.",
- "checksum": "bdf3937539fea2149ce408ce5845ca61"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/constants/wrappedContractNames.json b/.autodoc/docs/json/ui/src/constants/wrappedContractNames.json
deleted file mode 100644
index d90c80336..000000000
--- a/.autodoc/docs/json/ui/src/constants/wrappedContractNames.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "wrappedContractNames.ts",
- "filePath": "ui/src/constants/wrappedContractNames.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/constants/wrappedContractNames.ts",
- "summary": "The code above defines a constant variable called `wrappedContractNames` which is a Record object that maps numbers to strings. The purpose of this code is to provide a mapping between the network IDs of various Ethereum-based blockchains and the names of the wrapped tokens used on those networks. \n\nThe keys of the `wrappedContractNames` object are the network IDs, and the values are the names of the wrapped tokens used on those networks. For example, the network ID 1 is associated with the wrapped Ether token (WETH), while the network ID 137 is associated with the wrapped Matic token (WMATIC). \n\nThis code is likely used in other parts of the larger project to facilitate the use of wrapped tokens across different Ethereum-based blockchains. For example, if a user wants to interact with a smart contract on the Polygon network (network ID 137), they would need to use WMATIC instead of WETH. By referencing the `wrappedContractNames` object, the project can easily determine which wrapped token to use for a given network ID. \n\nHere is an example of how this code might be used in another part of the project:\n\n```\nimport wrappedContractNames from 'zoo'\n\nconst networkId = 137\nconst wrappedTokenName = wrappedContractNames[networkId]\n\n// Use wrappedTokenName to interact with smart contracts on the Polygon network\n``` \n\nIn this example, the `wrappedContractNames` object is imported from the `zoo` module. The code then retrieves the name of the wrapped token associated with the Polygon network (network ID 137) by accessing the `wrappedContractNames` object with the network ID as the key. The resulting `wrappedTokenName` variable can then be used to interact with smart contracts on the Polygon network.",
- "questions": "1. **What is the purpose of this code?**\\\nA smart developer might ask what this code is used for and how it fits into the overall functionality of the `zoo` project. Based on the code, it appears to be defining a mapping of contract names to contract numbers for various tokens.\n\n2. **What is the significance of the numbers used as keys in the `wrappedContractNames` object?**\\\nA smart developer might ask why specific numbers were chosen as keys in the `wrappedContractNames` object. Based on the code, it seems that each number corresponds to a specific blockchain or network.\n\n3. **What is the reason for exporting `wrappedContractNames` as the default export?**\\\nA smart developer might ask why `wrappedContractNames` is being exported as the default export of the `zoo` module. Based on the code, it seems that this mapping of contract names to contract numbers is a fundamental piece of data that may be used throughout the `zoo` project.",
- "checksum": "aa8e66419ac5dd4fae742b841ff7027e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/constants/wrappedContracts.json b/.autodoc/docs/json/ui/src/constants/wrappedContracts.json
deleted file mode 100644
index d54451c0b..000000000
--- a/.autodoc/docs/json/ui/src/constants/wrappedContracts.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "wrappedContracts.ts",
- "filePath": "ui/src/constants/wrappedContracts.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/constants/wrappedContracts.ts",
- "summary": "This code defines a constant variable called `wrappedContracts` which is a Record object that maps numbers to Ethereum contract addresses. The numbers represent different Ethereum networks, with 1 being the main Ethereum network, 5 being the Goerli test network, 10 being the Optimism network, 137 being the Polygon network, and 42161 being the Arbitrum network. The corresponding contract addresses are for wrapped versions of various tokens, which are tokens that have been \"wrapped\" to be compatible with a different network or protocol.\n\nThis code is likely used in the larger project to provide a centralized location for storing the contract addresses of wrapped tokens on different networks. Other parts of the project can import this file and use the `wrappedContracts` object to interact with the wrapped tokens on the appropriate network. For example, if a user wants to trade a wrapped token on the Polygon network, the code can reference the contract address stored in `wrappedContracts[137]` to interact with that token.\n\nHere is an example of how this code could be used in a larger project:\n\n```\nimport wrappedContracts from './zoo/wrappedContracts'\n\nconst polygonWrappedTokenAddress = wrappedContracts[137]\n// Use the polygonWrappedTokenAddress to interact with the wrapped token on the Polygon network\n```",
- "questions": "1. What is the purpose of this code?\n - This code defines a constant object `wrappedContracts` that maps network IDs to contract addresses.\n\n2. What is the data type of `wrappedContracts` and what does it represent?\n - `wrappedContracts` is a `Record` type with keys of type `number` and values of type `string`. It represents a mapping of network IDs to contract addresses.\n\n3. Where is this code being used/imported?\n - It is being exported as a default export from the `zoo` module, so it can be imported and used in other parts of the project that depend on it.",
- "checksum": "39d05677185d06ae305005eb9f49ea94"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/index.json b/.autodoc/docs/json/ui/src/hooks/index.json
deleted file mode 100644
index 9bee02e8c..000000000
--- a/.autodoc/docs/json/ui/src/hooks/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "ui/src/hooks/index.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/index.ts",
- "summary": "This code exports a variety of custom React hooks from the `zoo` project. React hooks are a way to reuse stateful logic across components in a React application. \n\nThe exported hooks can be divided into two categories: public and internal. Public hooks are intended to be used by other developers who are consuming the `zoo` project, while internal hooks are used within the `zoo` project itself.\n\nThe public hooks include `useCollections`, `useTokens`, `useListings`, and others. These hooks likely provide functionality related to interacting with collections, tokens, and listings within the `zoo` project. For example, `useCollections` may provide a way to fetch and manage collections of tokens within the project.\n\nThe internal hooks include `useCopyToClipboard`, `useMediaQuery`, `useTimeSince`, and others. These hooks are likely used within the `zoo` project to provide common functionality across components. For example, `useCopyToClipboard` may provide a way to copy text to the clipboard, which could be used in multiple components within the project.\n\nOverall, this code provides a way for developers to reuse common stateful logic across components within the `zoo` project. By exporting these hooks, other developers can easily consume and integrate them into their own components. For example, a developer working on a new feature within the `zoo` project may use the `useCollections` hook to fetch and manage collections of tokens within their component.",
- "questions": "1. What is the purpose of this file?\n- This file exports various custom hooks from the `zoo` project, both for internal and external use.\n\n2. What are some examples of functionality provided by the exported hooks?\n- The exported hooks include functionality such as accessing collections, tokens, listings, and bids, as well as media queries, time formatting, and pre-approval checks.\n\n3. Are there any dependencies or requirements for using these hooks?\n- It is unclear from this code whether there are any dependencies or requirements for using these hooks, as the implementation of each hook is contained in its respective file.",
- "checksum": "82f29a5c52d23df7ec0c18bc274d2655"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useAttributes.json b/.autodoc/docs/json/ui/src/hooks/useAttributes.json
deleted file mode 100644
index 7bbcb409b..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useAttributes.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useAttributes.ts",
- "filePath": "ui/src/hooks/useAttributes.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useAttributes.ts",
- "summary": "The code is a React hook that fetches data from a Reservoir API endpoint and returns the response along with some additional metadata. The hook takes in three optional parameters: `collection`, `chainId`, and `swrOptions`. \n\nThe `collection` parameter is a string that specifies the name of the collection to fetch data from. If `collection` is not provided, the `path` variable will be set to `null`. \n\nThe `chainId` parameter is an integer that specifies the ID of the chain to fetch data from. If `chainId` is not provided, the `chain` variable will be set to the current chain of the Reservoir client. \n\nThe `swrOptions` parameter is an object that contains options for the `useSWR` hook, which is used to fetch the data. \n\nThe hook first gets the Reservoir client using the `useReservoirClient` hook. It then constructs the API endpoint URL using the `collection` and `chain` variables. If `collection` is not provided, the `pathname` variable will be set to `null`. \n\nThe `path` variable is then constructed using the `pathname` variable and the `URL` constructor. If `collection` is not provided, `path` will be set to `null`. \n\nThe `useSWR` hook is then called with the `path` variable, along with the Reservoir API key and version. The `revalidateOnMount` option is set to `true` by default, and any additional options passed in through `swrOptions` are merged with the default options. \n\nThe hook then returns an object containing the response data, the `attributes` array from the response data, the `mutate` function for updating the data, any errors that occurred during the fetch, and a boolean indicating whether the hook is currently fetching data. \n\nThis hook can be used in a larger project to fetch data from a Reservoir API endpoint and use that data to render components or update state. For example, the `attributes` array returned by the hook could be mapped over to render a list of attributes for a given collection. \n\nExample usage:\n\n```\nimport useReservoirAttributes from './useReservoirAttributes'\n\nfunction MyComponent() {\n const { data, error, isValidating } = useReservoirAttributes('myCollection', 1)\n\n if (error) {\n return Error: {error.message}
\n }\n\n if (!data) {\n return Loading...
\n }\n\n return (\n - \n {data.map((attribute) => (\n
- {attribute.name} \n ))}\n
\n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `Cart` and `CartContext` imports?\n- The `Cart` and `CartContext` imports are likely part of a larger context system for managing a shopping cart in an e-commerce application.\n\n2. What is the `useSyncExternalStore` hook doing?\n- The `useSyncExternalStore` hook is likely syncing the local state of the `cart` object with an external data source, such as a server or database.\n\n3. What is the purpose of the `selector` argument in the `useCart` function?\n- The `selector` argument is likely a function that selects specific data from the `Cart` object, allowing the returned object to only expose the necessary data and methods for the component using the hook.",
- "checksum": "a9b20761b86506a8d3f378e9220c047d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useChainCurrency.json b/.autodoc/docs/json/ui/src/hooks/useChainCurrency.json
deleted file mode 100644
index 4151dc391..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useChainCurrency.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useChainCurrency.ts",
- "filePath": "ui/src/hooks/useChainCurrency.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useChainCurrency.ts",
- "summary": "The code is a utility function that is used to retrieve the native currency of a given blockchain network. The function takes an optional parameter `chainId` which is the unique identifier of the blockchain network. If the `chainId` is not provided, the function retrieves the current chain from the `reservoir-sdk` library. \n\nThe function then searches for the chain with the given `chainId` in the list of chains provided by the `useNetwork()` hook from the `wagmi` library. If the chain is not found, the function returns the native currency of the first chain in the list. \n\nIf the chain is found, the function checks if the chain is an Ethereum chain by checking if the chain id is in the list of Ethereum chain ids. If the chain is an Ethereum chain or if the chain does not have a native currency, the function returns the default Ethereum currency object with the name 'Ethereum', symbol 'ETH', and 18 decimals. If the chain is not an Ethereum chain and has a native currency, the function returns the native currency object of the chain.\n\nThis function can be used in a larger project to retrieve the native currency of a given blockchain network. For example, if a user wants to display the native currency of a selected blockchain network in a user interface, this function can be used to retrieve the currency information and display it to the user. \n\nExample usage:\n\n```\nimport getChainCurrency from 'zoo'\n\nconst chainId = 1 // Example chain id\nconst currency = getChainCurrency(chainId)\n\nconsole.log(currency) // { name: 'Ethereum', symbol: 'ETH', decimals: 18, address: '0x0000000000000000000000000000000000000000', chainId: 1 }\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports a function `getChainCurrency` that returns the native currency of a specified or current chain, and a default function that calls `getChainCurrency` with the current network's chains.\n\n2. What external libraries or dependencies does this code use?\n- This code imports `@reservoir0x/reservoir-sdk`, `ethers`, and `wagmi`.\n\n3. What is the expected input and output of the `getChainCurrency` function?\n- The `getChainCurrency` function expects an array of `Chain` objects and an optional `chainId` number as input, and returns an object with properties `name`, `symbol`, `decimals`, `address`, and `chainId`. If the specified chain is not found or does not have a native currency, it returns the default Ethereum currency object.",
- "checksum": "71fd5830cace1cd641aac80e88c3af14"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useCoinConversion.json b/.autodoc/docs/json/ui/src/hooks/useCoinConversion.json
deleted file mode 100644
index 37ed16f89..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useCoinConversion.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useCoinConversion.ts",
- "filePath": "ui/src/hooks/useCoinConversion.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useCoinConversion.ts",
- "summary": "This code is a function that retrieves the current price of a cryptocurrency from the CoinGecko API. It uses the React library and the SWR library to handle data fetching and caching. The function takes in three optional parameters: `vs_currency`, `symbols`, and `id`. \n\nThe `vs_currency` parameter specifies the currency in which the price should be returned (e.g. USD, EUR). The `symbols` parameter specifies the cryptocurrency symbol(s) for which the price should be returned (e.g. BTC, ETH). If multiple symbols are provided, they should be separated by commas. The `id` parameter specifies the cryptocurrency ID(s) for which the price should be returned. If `id` is not provided, it will be derived from the `symbols` parameter using a mapping provided in the `coinIds` property of the `coinGecko` object in the `ProviderOptionsContext`.\n\nThe function first retrieves the `coinGecko` object from the `ProviderOptionsContext` using the `useContext` hook. It then creates a base URL for the API request using the `createBaseUrl` function. If a proxy is specified in the `coinGecko` object, it will be used in the URL. Otherwise, if an API key is specified, it will be included in the URL. If neither a proxy nor an API key is specified, the default CoinGecko API URL will be used.\n\nIf multiple symbols are provided, the `id` parameter is derived by mapping each symbol to its corresponding ID in the `coinIds` property of the `coinGecko` object and joining them with commas. If only one symbol is provided, the `id` parameter is derived from the `coinIds` property of the `coinGecko` object.\n\nThe function then uses the `useSWR` hook to fetch the data from the API. If `vs_currency` is provided, the API request URL will include the `vs_currency`, `symbols`, and `id` parameters. Otherwise, the URL will be `null`. The `refreshInterval` option is set to 5 minutes to refresh the data periodically.\n\nFinally, if the data is successfully retrieved and contains a `current_price` property, the function returns the `current_price`. Otherwise, it returns `null`.\n\nThis function can be used in a larger project to display the current price of a cryptocurrency in a user interface. For example, it could be used in a dashboard that displays real-time cryptocurrency prices. Here is an example usage of the function:\n\n```\nimport useCurrentPrice from './useCurrentPrice'\n\nfunction CryptoPrice({ symbol }) {\n const price = useCurrentPrice('USD', symbol)\n return Shopping Cart
\n- \n {data.items.map((item) => (\n
- \n {item.name} - {item.price}\n \n \n ))}\n
Total: {data.total}
\n \n{symbol}: {price}
\n}\n\nfunction CryptoDashboard() {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n This code is a function that retrieves current prices for cryptocurrencies using the CoinGecko API and returns the price of the first coin in the response data.\n\n2. What parameters does the function take?\n The function takes three optional parameters: `vs_currency` (a string representing the currency to convert the price to), `symbols` (a string or comma-separated list of cryptocurrency symbols), and `id` (a string representing the cryptocurrency ID).\n\n3. What is the role of the `useSWR` hook in this code?\n The `useSWR` hook is used to fetch data from the CoinGecko API and cache the response. It takes a URL as its first argument and an options object as its third argument, which includes a `refreshInterval` property that determines how often the data should be refreshed.",
- "checksum": "b2fdff730e8d624628755642ff4a7fa0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useCollectionActivity.json b/.autodoc/docs/json/ui/src/hooks/useCollectionActivity.json
deleted file mode 100644
index 75575f6ab..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useCollectionActivity.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useCollectionActivity.ts",
- "filePath": "ui/src/hooks/useCollectionActivity.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useCollectionActivity.ts",
- "summary": "This code exports a function that retrieves collection activity data from a Reservoir API endpoint. The function takes in three optional parameters: `options`, `swrOptions`, and `chainId`. \n\n`options` is an object that contains query parameters for the API request. If `options` is not provided or does not contain any of the required parameters (`collection`, `collectionsSetId`, or `community`), the function returns null. Otherwise, the function constructs a URL for the API request using the `baseApiUrl` property of the Reservoir client and the provided query parameters. \n\n`swrOptions` is an object that contains configuration options for the SWR library, which is used to handle caching and revalidation of the API response. By default, the function revalidates the API response on mount and does not revalidate the first page. \n\n`chainId` is an optional parameter that specifies the ID of the Reservoir chain to use for the API request. If `chainId` is provided, the function searches for the corresponding chain in the Reservoir client's `chains` array. Otherwise, the function uses the current chain of the Reservoir client. \n\nThe function then calls the `useInfiniteApi` hook from the `./` module, passing in a callback function that constructs the API request URL and returns an array containing the URL, Reservoir API key, and client version. The `useInfiniteApi` hook handles fetching and caching the API response, and returns an object containing the response data and metadata. \n\nFinally, the function extracts the `activities` array from the response data and returns an object containing the `activities` array and the response metadata. \n\nThis function can be used to retrieve collection activity data from a Reservoir API endpoint in a React application. For example, the function could be called in a `useEffect` hook to fetch and display the collection activity data when a component mounts. \n\nExample usage:\n\n```\nimport useCollectionActivity from './useCollectionActivity'\n\nfunction CollectionActivity() {\n const { data, error } = useCollectionActivity({ collection: 'myCollection' })\n\n if (error) {\n return Error: {error.message}
\n }\n\n return (\n - \n {data.map(activity => (\n
- {activity.title} \n ))}\n
Error: {error.message}
\n if (!data) return Loading...
\n\n return (\n \n {data.map(collection => (\n
\n )\n}\n```",
- "questions": "1. What does this code do?\n- This code exports a function that retrieves collections data from a Reservoir API endpoint using SWR and returns it in a paginated format.\n\n2. What are the parameters of the exported function and what do they do?\n- The function takes in three optional parameters: `options`, `swrOptions`, and `chainId`. `options` is an object that contains query parameters for the API request. `swrOptions` is an object that contains options for the SWR hook. `chainId` is an optional parameter that specifies the ID of the chain to use for the API request.\n \n3. What is the purpose of the `useInfiniteApi` and `useReservoirClient` hooks?\n- The `useInfiniteApi` hook is used to fetch data from the Reservoir API endpoint in a paginated format. The `useReservoirClient` hook is used to retrieve the Reservoir client instance, which is used to get the base API URL and API key for the API request.",
- "checksum": "3ac03a50ddd4a61be099678341588e66"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useCopyToClipboard.json b/.autodoc/docs/json/ui/src/hooks/useCopyToClipboard.json
deleted file mode 100644
index c4d2a842a..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useCopyToClipboard.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useCopyToClipboard.ts",
- "filePath": "ui/src/hooks/useCopyToClipboard.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useCopyToClipboard.ts",
- "summary": "The code above defines a custom React hook called `useCopyToClipboard`. This hook is designed to allow users to copy text to their clipboard and provides a visual cue to indicate that the copy was successful. \n\nThe hook takes an optional parameter called `successTime` which is set to 1000 milliseconds (1 second) by default. This parameter determines how long the visual cue indicating a successful copy will be displayed. \n\nThe hook uses the `useState` hook from React to create a state variable called `copied` which is initially set to `false`. The `copy` function is defined within the hook and takes an optional parameter called `content` which is the text to be copied to the clipboard. \n\nThe `copy` function uses the `navigator.clipboard.writeText` method to write the `content` to the clipboard. If the `copied` state variable is `false`, the `setCopied` function is called to update the state variable to `true`. A `setTimeout` function is then used to set the `copied` state variable back to `false` after the `successTime` has elapsed. \n\nThe `useCopyToClipboard` hook returns an object with two properties: `copy` and `copied`. The `copy` property is a reference to the `copy` function defined within the hook. The `copied` property is a boolean value that indicates whether or not the text has been successfully copied to the clipboard. \n\nThis hook can be used in a larger project to provide users with an easy way to copy text to their clipboard. For example, it could be used in a form where users need to copy a generated password or a shareable link. \n\nHere is an example of how the `useCopyToClipboard` hook could be used in a React component:\n\n```\nimport React from 'react'\nimport useCopyToClipboard from './useCopyToClipboard'\n\nconst MyComponent = () => {\n const { copy, copied } = useCopyToClipboard()\n\n const handleCopy = () => {\n copy('Text to be copied to clipboard')\n }\n\n return (\n {collection.name}
\n ))}\n \n \n \n {copied &&
\n )\n}\n\nexport default MyComponent\n``` \n\nIn this example, the `useCopyToClipboard` hook is called and the `copy` function is passed the text to be copied to the clipboard. The `copied` state variable is used to conditionally render a message indicating that the text has been successfully copied to the clipboard.",
- "questions": "1. What does this code do?\n This code exports a custom hook called `useCopyToClipboard` that allows users to copy content to their clipboard and sets a `copied` state to true for a specified amount of time.\n\n2. What is the purpose of the `successTime` parameter?\n The `successTime` parameter is an optional parameter that specifies the amount of time in milliseconds that the `copied` state should remain true after content has been successfully copied to the clipboard.\n\n3. What is the purpose of the `useState` hook?\n The `useState` hook is used to create a state variable called `copied` that is initially set to `false`. This state variable is used to determine whether or not content has been successfully copied to the clipboard and to set the `copied` property of the returned object.",
- "checksum": "5a1670334838685c8ee32dcc68f9902a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useDynamicTokens.json b/.autodoc/docs/json/ui/src/hooks/useDynamicTokens.json
deleted file mode 100644
index 90b8100a0..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useDynamicTokens.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useDynamicTokens.ts",
- "filePath": "ui/src/hooks/useDynamicTokens.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useDynamicTokens.ts",
- "summary": "The code is a function that returns a modified version of the `useTokens` hook from the `./` module. The `useTokens` hook is used to fetch token data from a remote API and return it to the calling component. The modified version of the hook adds dynamic pricing information to the token data based on the contents of the user's shopping cart.\n\nThe function takes three optional parameters: `options`, `swrOptions`, and `chainId`. `options` is an object that can be used to configure the behavior of the `useTokens` hook. `swrOptions` is an object that can be used to configure the behavior of the `swr` library, which is used by the `useTokens` hook to cache the token data. `chainId` is an optional parameter that specifies the ID of the blockchain network to use when fetching token data.\n\nThe function first calls the original `useTokens` hook to fetch the token data. It then uses the `useCart` hook to fetch the user's shopping cart data. The shopping cart data is used to modify the token data in two ways: first, it adds an `isInCart` property to each token object that indicates whether the token is already in the user's cart; second, it modifies the `floorAsk` price of each token object to reflect the user's position in any dynamic pricing pools that the token is a part of.\n\nThe modified token data is returned to the calling component along with the original `useTokens` hook's return values and the `useCart` hook's cart actions. The calling component can use this data to display token information to the user and allow them to add or remove tokens from their cart.\n\nHere is an example of how the modified `useTokens` hook might be used in a larger project:\n\n```jsx\nimport useDynamicTokens from './zoo'\n\nfunction TokenList() {\n const { data: tokens, addToCart } = useDynamicTokens()\n\n return (\n Text copied to clipboard!
}\n- \n {tokens.map((token) => (\n
- \n
{token.name}
\n{token.description}
\nPrice: {token.market.floorAsk.price.amount}
\n {token.isInCart ? (\n \n ) : (\n \n )}\n \n ))}\n
\n
\n )\n}\n\nexport default MyComponent\n```\n\nIn the example above, `MyComponent` takes an `initialCount` prop that is used as the default value for the state. `useFallbackState` is used to create the state value, and `setCount` is used to update the state when the button is clicked. \n\nOverall, `useFallbackState` is a simple but useful hook that can help ensure that a component always has a valid state value to work with.",
- "questions": "1. What is the purpose of this code?\n This code defines a custom React hook called `useFallbackState` that can be used to set and manage state in a component.\n\n2. What is the `useStateType` type used for?\n The `useStateType` type is used to define the type of the state that is managed by the `useFallbackState` hook. It is a tuple that contains the current state value and a function to update the state.\n\n3. How does the `useFallbackState` hook work?\n The `useFallbackState` hook takes in a default value and an optional `useStateType` tuple. If the `useStateType` tuple is provided, it is returned as is. Otherwise, the hook initializes a new state using the default value and returns it. This allows components to use a fallback state if a custom state is not provided.",
- "checksum": "2d5ed662b69287df3096aa0724398732"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useInfiniteApi.json b/.autodoc/docs/json/ui/src/hooks/useInfiniteApi.json
deleted file mode 100644
index 5e77f98b4..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useInfiniteApi.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useInfiniteApi.ts",
- "filePath": "ui/src/hooks/useInfiniteApi.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useInfiniteApi.ts",
- "summary": "This code exports a custom hook that uses the `useSWRInfinite` hook from the `swr` library to fetch data in a paginated manner. The hook takes in three arguments: `getKey`, `options`, and `limit`. \n\n`getKey` is a function that takes in two arguments: `pageIndex` and `previousPageData`. It returns an array of parameters that will be used to fetch the data for the current page. `pageIndex` is the index of the current page, starting from 0. `previousPageData` is an array of the data from the previous page. \n\n`options` is an object that contains configuration options for the `useSWRInfinite` hook. \n\n`limit` is an optional argument that specifies the maximum number of items to fetch per page. \n\nThe hook returns an object that contains the same properties as the `useSWRInfinite` hook, as well as additional properties: `hasNextPage`, `isFetchingInitialData`, `isFetchingPage`, `resetCache`, and `fetchNextPage`. \n\n`hasNextPage` is a boolean that indicates whether there are more pages to fetch. It is determined by checking if the current page has the maximum number of items specified by `limit`, or if the current page has a continuation token. \n\n`isFetchingInitialData` is a boolean that indicates whether the initial data is being fetched. \n\n`isFetchingPage` is a boolean that indicates whether the current page is being fetched. \n\n`resetCache` is a function that resets the cache and clears the list of fetched keys. \n\n`fetchNextPage` is a function that fetches the next page of data. It can only be called if `hasNextPage` is true and `isFetchingPage` is false. \n\nThis hook can be used in a larger project to fetch data in a paginated manner and display it to the user. For example, it can be used to fetch a list of items from an API and display them in a table with pagination. \n\nExample usage:\n\n```\nimport usePaginatedData from './usePaginatedData'\n\nfunction MyComponent() {\n const { data, error, hasNextPage, isFetchingInitialData, isFetchingPage, fetchNextPage, resetCache } = usePaginatedData(\n (pageIndex, previousPageData) => {\n // return an array of parameters to fetch the data for the current page\n },\n {\n // configuration options for the useSWRInfinite hook\n },\n 10 // fetch 10 items per page\n )\n\n if (error) return Count: {count}
\n \nError
\n if (!data) return Loading...
\n\n return (\n \n {data.map(item => (\n // render each item\n ))}\n {hasNextPage && (\n \n )}\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `useSWRInfinite` hook and how is it used in this code?\n- The `useSWRInfinite` hook is used to fetch data in a paginated manner. It takes a function that returns the data for a given page index and previous page data, and returns an object with properties like `data`, `error`, `size`, `setSize`, etc.\n\n2. What is the significance of the `limit` parameter in the function signature?\n- The `limit` parameter is an optional parameter that specifies the maximum number of items to be returned per page. It is used to determine whether there are more pages to fetch based on the length of the collections array in the last page of data.\n\n3. What is the purpose of the `resetCache` function and how is it used?\n- The `resetCache` function is used to reset the cache of the `useSWRInfinite` hook and clear the list of keys that have been fetched so far. It is called when the user wants to start fetching data from the beginning, and it returns a promise that resolves when the cache has been reset.",
- "checksum": "5118efcb7c27334e5096d9ed66257c9a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useListingPreapprovalCheck.json b/.autodoc/docs/json/ui/src/hooks/useListingPreapprovalCheck.json
deleted file mode 100644
index b873a4816..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useListingPreapprovalCheck.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useListingPreapprovalCheck.ts",
- "filePath": "ui/src/hooks/useListingPreapprovalCheck.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useListingPreapprovalCheck.ts",
- "summary": "The code is a React hook that lists a token on multiple marketplaces. It takes in an array of `Marketplace` objects, a `tokenId` string, and a `collectionId` string as arguments. The `Marketplace` object has an `orderbook` property and an `orderKind` property. The `tokenId` and `collectionId` are used to create a token string. \n\nThe hook uses the `useEffect` hook to listen for changes in the `client`, `signer`, `tokenId`, `collectionId`, and `marketplaces` variables. If all of these variables are defined and the `marketplaces` array is not empty, the hook creates an array of `Listings` objects using the `marketplaces` array. Each `Listing` object has a `token` property that is set to the token string created from the `tokenId` and `collectionId` arguments, a `weiPrice` property that is set to a fixed value of 100000000000000000, an `orderbook` property that is set to the `orderbook` property of the corresponding `Marketplace` object, and an `orderKind` property that is set to the `orderKind` property of the corresponding `Marketplace` object.\n\nThe hook then calls the `listToken` method of the `client.actions` object with the `listings` array, `signer`, and `precheck` set to `true`. The `listToken` method returns a promise that resolves to an array of `Execute` objects. The hook then searches for the first `Execute` object that has a `kind` property set to `'transaction'` and an `items` property that is not empty. If such an object is found, the hook sets the `unapprovedMarketplaces` state to an array of `Marketplace` objects that have not been approved for listing on the corresponding marketplaces. The hook then sets the `isFetching` state to `false`. If no such object is found, the hook checks if the `unapprovedMarketplaces` state is not empty and sets it to an empty array if it is not. The hook then sets the `isFetching` state to `false`.\n\nIf any of the `client`, `signer`, `tokenId`, `collectionId`, or `marketplaces` variables change and the `unapprovedMarketplaces` state is not empty, the hook sets the `unapprovedMarketplaces` state to an empty array.\n\nThe hook returns an object with a `data` property set to the `unapprovedMarketplaces` state and an `isFetching` property set to the `isFetching` state.\n\nThis hook can be used in a larger project to list a token on multiple marketplaces and keep track of the marketplaces that have not been approved for listing. The `unapprovedMarketplaces` state can be used to display a list of marketplaces that need approval, and the `isFetching` state can be used to display a loading spinner while the token is being listed. \n\nExample usage:\n\n```\nimport useListToken from './useListToken'\nimport { marketplaces } from './marketplaces'\n\nfunction MyComponent({ tokenId, collectionId }) {\n const { data: unapprovedMarketplaces, isFetching } = useListToken(marketplaces, tokenId, collectionId)\n\n return (\n \n {isFetching &&
\n )\n}\n```",
- "questions": "1. What does this code do?\nThe code exports a function that takes in an array of marketplaces, a tokenId, and a collectionId as arguments. It then uses these arguments to create listings and list a token on the marketplaces. The function returns an object with the unapproved marketplaces and a boolean indicating whether the function is currently fetching data.\n\n2. What external dependencies does this code rely on?\nThe code relies on several external dependencies, including React, a custom hook called useReservoirClient, a custom type called Marketplace, a custom type called Listings, a custom hook called useSigner, and a library called @reservoir0x/reservoir-sdk.\n\n3. What is the purpose of the useEffect hook in this code?\nThe useEffect hook is used to trigger the listing of a token on the marketplaces when certain dependencies change. These dependencies include the signer, the client, the tokenId, the collectionId, and the marketplaces array. When these dependencies change, the useEffect hook creates listings for the token on each marketplace and then lists the token on the marketplaces. The hook also sets the unapprovedMarketplaces state based on the response from the listing API.",
- "checksum": "e6b975f675913c1e8160b5867b377a41"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useListings.json b/.autodoc/docs/json/ui/src/hooks/useListings.json
deleted file mode 100644
index 88158739f..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useListings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useListings.ts",
- "filePath": "ui/src/hooks/useListings.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useListings.ts",
- "summary": "This code exports a function that retrieves a list of asks (sell orders) from a Reservoir API endpoint. The function takes in three parameters: `options`, `swrOptions`, and `enabled`, as well as an optional `chainId`. \n\n`options` is an object that contains query parameters to be sent with the API request. `swrOptions` is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. `enabled` is a boolean that determines whether the API request should be made or not. `chainId` is an optional parameter that specifies which blockchain network to make the API request on.\n\nThe function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines which blockchain network to make the API request on based on the `chainId` parameter. If `chainId` is not specified, it defaults to the current chain of the Reservoir client.\n\nThe function then uses the `useInfiniteApi` hook to make the API request. This hook takes in a function that generates the API request URL and returns an array containing the URL, API key, and client version. The function also handles pagination by passing in a `pageIndex` parameter and `previousPageData` object. If pagination is not enabled or there is no more data to fetch, the function returns null.\n\nThe API response is then flattened and the `orders` property of each page is extracted into a single array of listings. This array is returned along with the SWR response object.\n\nThis function can be used to retrieve a list of asks from the Reservoir API and display them in a UI component. The `options` parameter can be used to filter the results based on various criteria, such as token ID or price. The `swrOptions` parameter can be used to customize the caching and revalidation behavior of the response. The `enabled` parameter can be used to conditionally fetch data based on user input or other factors. The `chainId` parameter can be used to fetch data from a specific blockchain network.",
- "questions": "1. What is the purpose of the `useReservoirClient` function and how is it used in this code?\n- A smart developer might ask what the `useReservoirClient` function does and how it is used in this code. \n- `useReservoirClient` is a custom hook that returns a client object with methods for interacting with a Reservoir API. It is used to retrieve the current chain and base API URL for the client.\n\n2. What is the `useInfiniteApi` function and how is it used in this code?\n- A smart developer might ask what the `useInfiniteApi` function does and how it is used in this code. \n- `useInfiniteApi` is a custom hook that fetches data from an API endpoint using SWR (React's data fetching library). It is used to fetch data for the `Asks` type and `AsksQuery` type.\n\n3. What is the purpose of the `listings` variable and how is it generated?\n- A smart developer might ask what the `listings` variable is used for and how it is generated. \n- `listings` is an array of orders retrieved from the API endpoint. It is generated by flattening the `orders` array from each page of data returned by the `useInfiniteApi` hook. If there is no data, it defaults to an empty array.",
- "checksum": "4bc98a933651d0ebf28272ee29f25d25"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useMarketplaces.json b/.autodoc/docs/json/ui/src/hooks/useMarketplaces.json
deleted file mode 100644
index d71b8f7b6..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useMarketplaces.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useMarketplaces.ts",
- "filePath": "ui/src/hooks/useMarketplaces.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useMarketplaces.ts",
- "summary": "The code is a React hook that fetches and processes data about marketplaces that support a given collection. The hook takes in four optional parameters: `collectionId`, `listingEnabledOnly`, `royaltyBps`, and `chainId`. It returns a tuple containing an array of `Marketplace` objects and a function to update that array.\n\nThe `Marketplace` type is defined as an intersection of the first element of the `marketplaces` array in the response schema and an object with three additional properties: `isSelected`, `price`, and `truePrice`. The `isSelected` property is a boolean that indicates whether the marketplace is currently selected. The `price` and `truePrice` properties are numbers or strings that represent the price of the item in the marketplace and the true price after fees, respectively. The `fee` property is an object with two properties: `bps` and `percent`, which represent the fee in basis points and percentage, respectively.\n\nThe hook uses the `useReservoirClient` hook from another file to get a client object that contains information about the Reservoir API. It then uses the `useSWR` hook to fetch data about the supported marketplaces for the given collection. If `collectionId` is not provided, the hook returns an empty array.\n\nOnce the data is fetched, the hook processes it by filtering out marketplaces that do not have listing enabled or have an orderbook of 'x2y2' (an internal Reservoir orderbook). It then updates the `Marketplace` objects in the array by setting their `price`, `truePrice`, and `isSelected` properties, and calculating their fees based on the orderbook and `royaltyBps` parameters. If the orderbook is 'reservoir', the hook also sets the `name`, `domain`, and `imageUrl` properties based on local data obtained from the `getLocalMarketplaceData` function.\n\nFinally, the hook returns the updated `marketplaces` array and a function to update it. This hook can be used in a larger project to display a list of marketplaces that support a given collection and allow the user to select a marketplace to purchase the item. The `listingEnabledOnly` parameter can be used to filter out marketplaces that do not have listing enabled, and the `royaltyBps` parameter can be used to calculate the fees for marketplaces that use the OpenSea orderbook. The `chainId` parameter can be used to specify the chain to use for fetching the data.",
- "questions": "1. What is the purpose of the `useSWR` hook and how is it used in this code?\n- The `useSWR` hook is used for data fetching and caching. It takes a key and a fetcher function as arguments, and returns the data and a revalidation function. In this code, it is used to fetch data from a supported marketplaces API endpoint for a given collection.\n\n2. What is the significance of the `Marketplace` type and how is it used in this code?\n- The `Marketplace` type is a custom type that extends a schema from the `@reservoir0x/reservoir-sdk` library. It adds additional properties such as `isSelected`, `price`, `truePrice`, and `fee`. It is used to define the shape of the data returned from the API endpoint and to manipulate and update the data in the `useEffect` hook.\n\n3. What is the purpose of the `getLocalMarketplaceData` function and how is it used in this code?\n- The `getLocalMarketplaceData` function is a custom function that retrieves data from a local JSON file. It is used to update the `name`, `domain`, `fee`, and `imageUrl` properties of a `Marketplace` object if the `orderbook` property is equal to `'reservoir'`. This allows for customization of the marketplace data based on the local environment.",
- "checksum": "57963f352ee8c214e9c479d892c77310"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useMediaQuery.json b/.autodoc/docs/json/ui/src/hooks/useMediaQuery.json
deleted file mode 100644
index de2b46f45..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useMediaQuery.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useMediaQuery.ts",
- "filePath": "ui/src/hooks/useMediaQuery.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useMediaQuery.ts",
- "summary": "The code defines a custom React hook called `useMediaQuery` that allows developers to check if a given CSS media query matches the current viewport. The hook takes a single argument, `query`, which is a string representing the media query to be evaluated.\n\nThe hook uses the `useState` and `useEffect` hooks from React to manage state and side effects. The `useState` hook initializes a boolean value `matches` to `false`. The `useEffect` hook is used to subscribe to changes in the media query and update the `matches` state accordingly.\n\nInside the `useEffect` hook, the `window.matchMedia` method is used to create a new `MediaQueryList` object that represents the given `query`. The `matches` property of the `MediaQueryList` object is then compared to the current value of `matches` state. If they are different, the `setMatches` function is called to update the state.\n\nA listener function is also defined that updates the `matches` state whenever the `change` event is fired on the `MediaQueryList` object. This listener is added to the `MediaQueryList` object using the `addEventListener` method. Finally, the `useEffect` hook returns a cleanup function that removes the listener using the `removeEventListener` method.\n\nThe `useMediaQuery` hook is intended to be used in other React components to conditionally render content based on the result of the media query. For example, a component could use the hook to determine if the viewport is wide enough to display a sidebar, and only render the sidebar if the media query matches.\n\nHere is an example usage of the `useMediaQuery` hook:\n\n```\nimport useMediaQuery from './useMediaQuery'\n\nconst MyComponent = () => {\n const isWide = useMediaQuery('(min-width: 768px)')\n\n return (\n \n
\n )}\n Unapproved Marketplaces:
\n- \n {unapprovedMarketplaces.map((marketplace) => (\n
- {marketplace.name} \n ))}\n
\n {isWide ?
\n )\n}\n```\n\nIn this example, the `MyComponent` component uses the `useMediaQuery` hook to check if the viewport width is at least 768 pixels. If it is, the `Sidebar` component is rendered, otherwise it is not. The `Content` component is always rendered.",
- "questions": "1. What is the purpose of this code?\n This code defines a custom React hook called `useMediaQuery` that returns a boolean value indicating whether a given media query matches the current viewport.\n\n2. How does this code handle changes to the media query?\n The code sets up a listener for changes to the media query using `addEventListener` and updates the `matches` state using `setMatches` whenever the query matches change.\n\n3. What dependencies does this code have?\n This code imports `useEffect` and `useState` from the `react` library, indicating that it is intended to be used within a React application.",
- "checksum": "1015610f10f24440eb94edb86f17b1b2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useModelViewer.json b/.autodoc/docs/json/ui/src/hooks/useModelViewer.json
deleted file mode 100644
index 19f21ac77..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useModelViewer.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useModelViewer.ts",
- "filePath": "ui/src/hooks/useModelViewer.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useModelViewer.ts",
- "summary": "This code defines a custom React hook called `useModelViewer` that enables the use of the Google Model Viewer library in a React application. The hook takes a boolean `enabled` parameter that determines whether or not to enable the Model Viewer functionality. \n\nThe `useEffect` hook is used to manage the lifecycle of the Model Viewer library. When the `enabled` parameter is true and the `modelViewerInjected` flag is false, the `importScript` function is called to dynamically load the Model Viewer library from the specified URL. The `importScript` function creates a new `script` element and appends it to the `body` of the HTML document. \n\nThe `importScript` function checks for the existence of the `document` object before creating the `script` element to avoid errors in non-browser environments. The `script` element is set to load asynchronously and its `type` attribute is set to `'module'` to indicate that it is an ES6 module. \n\nOnce the Model Viewer library is loaded, the `modelViewerInjected` flag is set to true to prevent unnecessary re-loading of the library. The `useEffect` hook is dependent on the `enabled` parameter, so any changes to this parameter will trigger the hook to re-run and potentially load or unload the Model Viewer library. \n\nThis hook can be used in a larger React project to enable the display of 3D models using the Google Model Viewer library. For example, a product catalog website could use this hook to display interactive 3D models of products to customers. \n\nExample usage:\n\n```\nimport React, { useState } from 'react'\nimport useModelViewer from './useModelViewer'\n\nconst ProductDetail = ({ product }) => {\n const [modelViewerEnabled, setModelViewerEnabled] = useState(false)\n useModelViewer(modelViewerEnabled)\n\n return (\n \n
\n )\n}\n```\n\nIn this example, the `useModelViewer` hook is used to enable or disable the Model Viewer library based on the state of the `modelViewerEnabled` variable. When the user clicks the button, the `modelViewerEnabled` state is toggled and the Model Viewer library is either loaded or unloaded. If the library is enabled, a `model-viewer` element is rendered with the URL of the 3D model and alt text.",
- "questions": "1. What is the purpose of this code?\n This code defines a custom React hook called `useModelViewer` that conditionally injects a script for the Google Model Viewer library into the document if the hook is enabled.\n\n2. What is the significance of the `modelViewerInjected` variable?\n The `modelViewerInjected` variable is used to ensure that the script for the Google Model Viewer library is only injected once, even if the `useModelViewer` hook is called multiple times.\n\n3. What is the `importScript` function doing?\n The `importScript` function creates a new `script` element with the specified `src` URL and appends it to the `body` of the document. The `type` attribute is set to `'module'` to indicate that the script is a JavaScript module.",
- "checksum": "a05dd98467725e6ca02b733b8b2537a2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useMutationObservable.json b/.autodoc/docs/json/ui/src/hooks/useMutationObservable.json
deleted file mode 100644
index cbfe338f2..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useMutationObservable.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useMutationObservable.ts",
- "filePath": "ui/src/hooks/useMutationObservable.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useMutationObservable.ts",
- "summary": "The code above defines a custom React hook called `useMutationObservable`. This hook is used to observe changes to a specified DOM element and execute a callback function when a change occurs. \n\nThe hook takes three arguments: `callback`, `el`, and `options`. The `callback` argument is a function that will be executed when a mutation occurs. The `el` argument is an optional parameter that specifies the DOM element to observe. The `options` argument is also optional and is used to configure the `MutationObserver` instance that will be created.\n\nThe hook uses the `useState` and `useEffect` hooks from React. The `useState` hook is used to store the `MutationObserver` instance, while the `useEffect` hook is used to create and manage the `MutationObserver` instance.\n\nWhen the hook is called, it first checks if the `observer` state variable is already set. If it is, the existing observer is disconnected. This is done to ensure that only one observer is active at a time.\n\nNext, the hook checks if the `el` argument is defined and if the `MutationObserver` API is available in the current environment. If either of these conditions is not met, the hook returns early and does not create an observer.\n\nIf the `el` argument is defined and the `MutationObserver` API is available, a new `MutationObserver` instance is created with the specified `callback` function and `options`. The observer is then attached to the specified `el` element using the `observe` method. Finally, the observer instance is stored in the `observer` state variable using the `setObserver` function.\n\nThe `useEffect` hook also returns a cleanup function that is used to disconnect the observer when the component using the hook is unmounted.\n\nThis hook can be used in a larger project to monitor changes to specific DOM elements and trigger actions based on those changes. For example, it could be used to detect changes to a form input and update the state of a parent component accordingly. Here is an example usage of the hook:\n\n```\nimport useMutationObservable from './useMutationObservable'\n\nconst MyComponent = () => {\n const [value, setValue] = useState('')\n\n const handleMutation = () => {\n // Update state based on mutation\n }\n\n const inputRef = useRef(null)\n\n useMutationObservable(handleMutation, inputRef.current, { attributes: true })\n\n return (\n setValue(e.target.value)} ref={inputRef} />\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n This code defines a custom React hook called `useMutationObservable` which sets up a `MutationObserver` to watch for changes to a specified DOM element and calls a callback function when changes occur.\n\n2. What arguments does the `useMutationObservable` function take?\n The `useMutationObservable` function takes three optional arguments: a `MutationCallback` function to be called when changes occur, an optional `HTMLElement` to observe for changes, and optional `MutationObserverInit` options to configure the observer.\n\n3. What does the `useEffect` hook do in this code?\n The `useEffect` hook sets up and tears down the `MutationObserver` based on changes to the `el`, `callback`, and `options` inputs. It also returns a cleanup function to disconnect the observer when the component unmounts.",
- "checksum": "df95869b8284a1705443af813851fe76"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useOnChainRoyalties.json b/.autodoc/docs/json/ui/src/hooks/useOnChainRoyalties.json
deleted file mode 100644
index 6fb869ec8..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useOnChainRoyalties.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useOnChainRoyalties.ts",
- "filePath": "ui/src/hooks/useOnChainRoyalties.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useOnChainRoyalties.ts",
- "summary": "The code is a React hook that retrieves royalty information for a given NFT (non-fungible token) from the Manifold smart contract. The hook takes in several props, including the contract address, token ID, value, and chain ID. \n\nThe code first imports necessary dependencies, including the `wagmi` library for interacting with Ethereum, `ethers` for working with Ethereum data types, and a custom hook called `useChainCurrency` for retrieving the currency used on the specified blockchain. \n\nThe `MANIFOLD_ABI` constant defines the ABI (application binary interface) for the Manifold smart contract, which includes a single function called `getRoyaltyView`. This function takes in the token address, token ID, and value, and returns two arrays: one containing the addresses of the royalty recipients, and another containing the corresponding amounts of royalties to be paid to each recipient. \n\nThe hook then determines the correct Manifold contract address based on the specified chain ID, and retrieves the currency used on the blockchain using the `useChainCurrency` hook. If a value is not provided, the default value of 1 is used. \n\nFinally, the hook calls the `useContractRead` hook from the `wagmi` library, passing in the necessary arguments to retrieve the royalty information from the Manifold contract. The `enabled` prop is used to determine whether the hook should be executed, based on whether all required props are present. The `cacheTime` prop specifies how long the result should be cached before being refreshed. \n\nThis hook can be used in a larger project to display royalty information for a given NFT, such as the percentage of royalties that will be paid to each recipient. An example usage of this hook might look like:\n\n```\nimport useRoyaltyInfo from './useRoyaltyInfo'\n\nfunction NFTDetails({ contract, tokenId }) {\n const royaltyInfo = useRoyaltyInfo({ contract, tokenId, enabled: true })\n\n return (\n {product.name}
\n \n {modelViewerEnabled && (\n\n
\n )\n}\n```\n\nThis component would display the royalty information for the specified NFT, including the addresses of the royalty recipients and the corresponding percentages of royalties to be paid to each recipient.",
- "questions": "1. What is the purpose of this code?\n- This code is a React hook that reads data from a smart contract on the Ethereum blockchain. Specifically, it retrieves royalty information for a given NFT (non-fungible token) and returns the recipients and amounts of the royalties.\n\n2. What external dependencies does this code have?\n- This code imports several modules from the 'wagmi' and 'ethers' libraries, as well as a custom hook called 'useChainCurrency' from a local file. It also relies on the Ethereum blockchain to retrieve data from a smart contract.\n\n3. What are the possible values for the 'chainId' parameter?\n- The 'chainId' parameter is an integer that specifies which Ethereum network to interact with. The possible values are 1 (mainnet), 5 (goerli testnet), and 137 (Polygon/Matic network).",
- "checksum": "9a84489e562d38a536fa673b1b80d04a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useOwnerListings.json b/.autodoc/docs/json/ui/src/hooks/useOwnerListings.json
deleted file mode 100644
index c4e647881..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useOwnerListings.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useOwnerListings.ts",
- "filePath": "ui/src/hooks/useOwnerListings.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useOwnerListings.ts",
- "summary": "The code in this file is a function that exports a hook for retrieving listings from a decentralized exchange. The function takes in three optional parameters: a query object, SWR configuration options, and a chain ID. \n\nThe function first imports the `useListings` hook from another file in the same directory and the `useAccount` hook from the `wagmi` library. It also imports the `paths` object from the `@reservoir0x/reservoir-sdk` library and the `SWRConfiguration` type from the `swr` library. \n\nThe function then defines a `queryOptions` object with a `maker` property set to the user's address retrieved from the `useAccount` hook. If a `query` parameter is passed in, the function merges it with the `queryOptions` object using the spread operator. \n\nFinally, the function returns the result of calling the `useListings` hook with the `queryOptions`, `swrOptions`, and a boolean indicating whether the user's address is defined. The `chainId` parameter is also passed to the `useListings` hook. \n\nThis hook can be used in a larger project to retrieve listings from a decentralized exchange and display them to the user. Here is an example of how the hook can be used:\n\n```\nimport useExchangeListings from './useExchangeListings'\n\nfunction ExchangeListings() {\n const { data, error } = useExchangeListings()\n\n if (error) return Royalty Information
\n {royaltyInfo.loading &&Loading...
}\n {royaltyInfo.error &&Error: {royaltyInfo.error.message}
}\n {royaltyInfo.data && (\n- \n {royaltyInfo.data.recipients.map((recipient, i) => (\n
- \n {recipient}: {royaltyInfo.data.amounts[i]}%\n \n ))}\n
Error: {error.message}
\n if (!data) return Loading...
\n\n return (\n - \n {data.map(listing => (\n
- {listing.name} \n ))}\n
\n
\n )\n}\n\nexport default Post\n```\n\nIn this example, the `TimeSince` component is used to display the time elapsed since the post was made. The `timestamp` prop is passed to the component to calculate the relative time.",
- "questions": "1. What does this code do?\n This code exports a function that takes in a timestamp and returns a string representing the time since that timestamp in relative time (e.g. \"2 hours ago\").\n\n2. What libraries are being used in this code?\n This code imports two libraries: `react` and `dayjs`. It also imports a specific plugin from `dayjs` called `relativeTime`.\n\n3. What is the purpose of the `useEffect` hook in this code?\n The `useEffect` hook is used to update the `timeSince` state variable whenever the `timestamp` prop changes. If `timestamp` is not provided, `timeSince` is set to an empty string.",
- "checksum": "0a746858b591d09bd29789c18a6ae092"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useTokenActivity.json b/.autodoc/docs/json/ui/src/hooks/useTokenActivity.json
deleted file mode 100644
index cb62d397b..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useTokenActivity.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useTokenActivity.ts",
- "filePath": "ui/src/hooks/useTokenActivity.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useTokenActivity.ts",
- "summary": "This code exports a function that retrieves activity data for a given token from a Reservoir API endpoint. The function takes in a token string, an optional query object, SWRInfiniteConfiguration options, and an optional chainId number. \n\nThe function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines the chain to use based on the provided chainId or the current chain of the client. \n\nThe function then uses the `useInfiniteApi` hook from the `./` module to fetch the activity data. This hook takes in a function that generates the URL and parameters for the API request based on the current page index and previous page data. The function also sets the API key and version from the client. The `useInfiniteApi` hook returns an object with the response data and methods for fetching additional pages of data.\n\nThe function then flattens the activity data from the response into a single array and returns an object that includes the response object and the flattened activity data.\n\nThis function can be used to retrieve activity data for a specific token in a Reservoir API. The optional query object can be used to filter the results. The SWRInfiniteConfiguration options can be used to configure the caching behavior of the `useInfiniteApi` hook. The chainId parameter can be used to specify a specific chain to use for the API request. \n\nExample usage:\n\n```\nimport useTokenActivity from './useTokenActivity'\n\nfunction MyComponent() {\n const { data, error, size, setSize } = useTokenActivity('myToken')\n\n if (error) return Posted {
This is a post
\nError: {error.message}
\n if (!data) return Loading...
\n\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `useInfiniteApi` hook being used in this code?\n- The `useInfiniteApi` hook is being used to fetch data from an API endpoint in a paginated manner, allowing for infinite scrolling.\n\n2. What is the significance of the `TokenActivityQuery` and `TokenActivityResponse` types?\n- The `TokenActivityQuery` and `TokenActivityResponse` types are used to define the structure of the query parameters and response data for the `/tokens/{token}/activity/v4` endpoint.\n\n3. What is the purpose of the `setParams` function being used in this code?\n- The `setParams` function is being used to set the query parameters for the API endpoint URL based on the `TokenActivityQuery` object, which is then used to fetch the data.",
- "checksum": "6253f0b746db8eca252711375538e55f"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useTokenOpensea.json b/.autodoc/docs/json/ui/src/hooks/useTokenOpensea.json
deleted file mode 100644
index 42dfe3ee1..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useTokenOpensea.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useTokenOpensea.ts",
- "filePath": "ui/src/hooks/useTokenOpensea.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useTokenOpensea.ts",
- "summary": "The code is a TypeScript module that exports a function that fetches data from the OpenSea API using the useSWR library. The function takes in three parameters: `contract`, `tokenId`, and `swrOptions`. `contract` is a string that represents the contract address of the token, `tokenId` is a number or string that represents the ID of the token, and `swrOptions` is an optional object that contains configuration options for the useSWR hook.\n\nThe function constructs a URL using the `contract` and `tokenId` parameters and passes it to the useSWR hook as a key. The useSWR hook fetches the data from the OpenSea API using the provided URL and returns an object that contains the response data, a `mutate` function to update the data, an `error` object if there was an error fetching the data, and a boolean `isValidating` flag that indicates whether the hook is currently fetching data.\n\nThe response data is of type `OpenSeaTokenResponse`, which is an object that contains information about the token, including whether it supports the Wyvern protocol and information about the payment tokens associated with the token's collection.\n\nThis function can be used in the larger project to fetch data about tokens from the OpenSea API. For example, if the project has a feature that displays information about a specific token, this function can be used to fetch the data for that token and display it to the user. Here is an example of how the function can be used:\n\n```\nimport useOpenSeaToken from './path/to/openSeaToken'\n\nfunction TokenDetails({ contract, tokenId }) {\n const { response, error, isValidating } = useOpenSeaToken(contract, tokenId)\n\n if (error) {\n return - \n {data.map((activity) => (\n
- {activity.description} \n ))}\n
Error fetching token data
\n }\n\n if (isValidating) {\n return Loading token data...
\n }\n\n return (\n \n
\n )\n}\n```\n\nThis example component uses the `useOpenSeaToken` function to fetch data about a token with the specified `contract` and `tokenId`. It displays the name and description of the token's collection, as well as a list of the payment tokens associated with the collection. If there is an error fetching the data, it displays an error message, and if the data is still being fetched, it displays a loading message.",
- "questions": "1. What is the purpose of this code?\n This code is a function that fetches data from the OpenSea API for a given contract and token ID using the `useSWR` hook.\n\n2. What is the expected input for this function?\n The function takes in two optional parameters: `contract` (a string representing the contract address) and `tokenId` (a number or string representing the token ID). It also takes in an optional `swrOptions` object for configuring the `useSWR` hook.\n\n3. What is the expected output of this function?\n The function returns an object with four properties: `response` (the data fetched from the API), `mutate` (a function for updating the data), `error` (an error object if there was an error fetching the data), and `isValidating` (a boolean indicating whether the data is currently being fetched).",
- "checksum": "f5a9c1dd84f83fdac8d802ef202e2a65"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useTokenOpenseaBanned.json b/.autodoc/docs/json/ui/src/hooks/useTokenOpenseaBanned.json
deleted file mode 100644
index 1c927aed9..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useTokenOpenseaBanned.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useTokenOpenseaBanned.ts",
- "filePath": "ui/src/hooks/useTokenOpenseaBanned.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useTokenOpenseaBanned.ts",
- "summary": "This code is a React hook that checks whether a given token is banned on the OpenSea marketplace. The hook takes in two optional parameters: `contract`, which is a string representing the contract address of the token, and `tokenId`, which is a number or string representing the ID of the token. \n\nThe hook uses the `useState` and `useEffect` hooks from React to manage state and perform side effects. Specifically, it initializes a boolean state variable `isBanned` to `false`, and then uses the `useEffect` hook to perform an API call to the `isOpenSeaBanned` function from the `@reservoir0x/reservoir-sdk` library. This function takes in an array of token IDs and returns a Promise that resolves to an object mapping each token ID to a boolean value indicating whether it is banned on OpenSea. \n\nIf `contract` and `tokenId` are both provided, the hook constructs a token string in the format `contract:tokenId` and passes it to `isOpenSeaBanned`. It then updates the `isBanned` state variable based on the result of the API call. If there is an error with the API call, the hook logs the error to the console and sets `isBanned` to `false`. If `contract` and `tokenId` are not both provided, the hook simply sets `isBanned` to `false`.\n\nThe hook returns the `isBanned` state variable, which can be used in the larger project to conditionally render components or perform other logic based on whether a token is banned on OpenSea. For example, a developer could use this hook to prevent users from attempting to buy or sell banned tokens on their marketplace. \n\nExample usage:\n\n```\nimport useOpenSeaBanned from './useOpenSeaBanned'\n\nfunction MyComponent({ contract, tokenId }) {\n const isBanned = useOpenSeaBanned(contract, tokenId)\n\n if (isBanned) {\n return {response.collection.name}
\n{response.collection.description}
\n- \n {response.collection.payment_tokens.map((token) => (\n
- \n {token.name} ({token.symbol})\n \n ))}\n
This token is banned on OpenSea.
\n } else {\n returnThis token is not banned on OpenSea.
\n }\n}\n```", - "questions": "1. What is the purpose of this code?\n This code is a React hook that checks if a given token on a given contract is banned on OpenSea.\n\n2. What is the '@reservoir0x/reservoir-sdk' package used for?\n The '@reservoir0x/reservoir-sdk' package is used to check if a given token is banned on OpenSea.\n\n3. What happens if either the contract or tokenId parameters are not provided?\n If either the contract or tokenId parameters are not provided, the hook will return false for isBanned.", - "checksum": "8176c4ffed07435e86e51d6bbab67085" -} \ No newline at end of file diff --git a/.autodoc/docs/json/ui/src/hooks/useTokens.json b/.autodoc/docs/json/ui/src/hooks/useTokens.json deleted file mode 100644 index 694fd2403..000000000 --- a/.autodoc/docs/json/ui/src/hooks/useTokens.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "useTokens.ts", - "filePath": "ui/src/hooks/useTokens.ts", - "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useTokens.ts", - "summary": "This code exports a function that retrieves token details from a Reservoir API endpoint. The function takes in three optional parameters: `options`, `swrOptions`, and `chainId`. \n\n`options` is an object that contains query parameters to be sent with the API request. If `options` is not provided or is falsey, the function returns null. \n\n`swrOptions` is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. The default options are set to revalidate on mount and not on the first page. \n\n`chainId` is an optional parameter that specifies the ID of the chain to use for the API request. If `chainId` is provided, the function searches for the chain with the matching ID in the client's list of chains. If `chainId` is not provided, the function uses the current chain from the client. \n\nThe function then calls `useInfiniteApi` from the `./` module, passing in a callback function and the `swrOptions` object. The callback function takes in two parameters: `pageIndex` and `previousPageData`. `pageIndex` is the index of the current page being fetched, and `previousPageData` is the data from the previous page. \n\nThe callback function constructs the API endpoint URL using the `chain` object and the `/tokens/v6` endpoint path. It then sets the query parameters using the `options` object and the `setParams` function from the `@reservoir0x/reservoir-sdk` module. If `normalizeRoyalties` is not specified in the query parameters and the client has a `normalizeRoyalties` property, the function sets `normalizeRoyalties` to the client's value. \n\nIf `previousPageData` is truthy and has a `continuation` property, the function sets the `continuation` query parameter to the value of `previousPageData.continuation`. This allows the function to fetch subsequent pages of data. If `previousPageData` is falsy and `pageIndex` is greater than 0, the function returns null. \n\nThe callback function then returns an array containing the constructed URL, the chain's API key, and the client's version. This array is used by `useInfiniteApi` to make the API request. \n\nThe function then extracts the `tokens` array from the API response data and returns an object containing the `response` object from `useInfiniteApi` and the `tokens` array. \n\nThis function can be used to fetch token details from the Reservoir API and handle pagination of the response data using the SWR library. An example usage of this function might look like:\n\n```\nimport useTokens from './useTokens'\n\nfunction TokenList() {\n const { data, error, size, setSize } = useTokens({ limit: 10 })\n\n if (error) returnError fetching tokens
\n if (!data) return Loading...
\n\n return (\n \n {data.map((token) => (\n
\n )\n}\n```",
- "questions": "1. What does this code do?\n- This code exports a function that retrieves token details from a Reservoir API endpoint using SWR for infinite scrolling.\n\n2. What are the input parameters for the exported function?\n- The exported function takes in three optional parameters: `options` for query parameters, `swrOptions` for SWR configuration, and `chainId` for the chain ID to use.\n\n3. What is the purpose of the `response` variable?\n- The `response` variable is used to fetch data from the Reservoir API endpoint using the `useInfiniteApi` hook from the `./` module. It also handles pagination and sets query parameters for the API request.",
- "checksum": "a496eb63860f71cc90a5ada3c4d63c31"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useUserCollections.json b/.autodoc/docs/json/ui/src/hooks/useUserCollections.json
deleted file mode 100644
index 4abc90be1..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useUserCollections.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useUserCollections.ts",
- "filePath": "ui/src/hooks/useUserCollections.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useUserCollections.ts",
- "summary": "This code exports a function that retrieves collections belonging to a specified user from a Reservoir API endpoint. The function takes in four optional parameters: `user`, `options`, `swrOptions`, and `chainId`. \n\nThe `user` parameter is a string that specifies the user whose collections are to be retrieved. The `options` parameter is an object that contains query parameters to be included in the API request. The `swrOptions` parameter is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. The `chainId` parameter is an optional number that specifies the ID of the Reservoir chain to use for the API request.\n\nThe function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines the Reservoir chain to use for the API request based on the `chainId` parameter or the current chain of the client. \n\nThe function then uses the `useInfiniteApi` hook to make the API request. This hook takes in a function that generates the URL and query parameters for the API request based on the current page index and previous page data. The function also checks if a `user` parameter has been provided and returns `null` if it has not. \n\nThe API request URL is generated using the `URL` constructor and the `baseApiUrl` property of the Reservoir chain. The query parameters are generated using the `offset` and `limit` properties of the `options` parameter or default values if they are not provided. The `setParams` function from the `@reservoir0x/reservoir-sdk` library is used to set the query parameters on the URL. \n\nThe `useInfiniteApi` hook returns an object that contains the API response data and metadata. The `collections` property of the response data is flattened into a single array using the `flatMap` method. The function then returns an object that includes the flattened `collections` array and the other properties of the API response metadata.\n\nThis function can be used to retrieve collections belonging to a specified user from a Reservoir API endpoint. It can be called with the `user` parameter to retrieve the collections for a specific user, or without the `user` parameter to return `null`. The `options` parameter can be used to specify query parameters for the API request, such as the `limit` parameter to control the number of collections returned per page. The `swrOptions` parameter can be used to configure the caching and revalidation behavior of the API response. The `chainId` parameter can be used to specify the Reservoir chain to use for the API request if it is different from the current chain of the client.",
- "questions": "1. What is the purpose of the `useInfiniteApi` hook being used in this code?\n- The `useInfiniteApi` hook is being used to fetch data from an API endpoint in a paginated manner, allowing for infinite scrolling.\n\n2. What is the significance of the `UserCollections` and `UserCollectionsQuery` types?\n- The `UserCollections` type represents the schema of the response data that is expected from the API endpoint being called, while the `UserCollectionsQuery` type represents the query parameters that can be passed to the API endpoint.\n\n3. What is the purpose of the `chainId` parameter and how is it used in the code?\n- The `chainId` parameter is an optional parameter that specifies the ID of a blockchain network. It is used to construct the base URL for the API endpoint being called, and is also used to retrieve the API key for the specified network from the `client` object.",
- "checksum": "26970007a35f80de9afdd04ead34f372"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useUserTokens.json b/.autodoc/docs/json/ui/src/hooks/useUserTokens.json
deleted file mode 100644
index 1a3cbbfec..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useUserTokens.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useUserTokens.ts",
- "filePath": "ui/src/hooks/useUserTokens.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useUserTokens.ts",
- "summary": "This code exports a default function that retrieves a list of tokens for a given user from a Reservoir API endpoint. The function takes in four parameters: `user`, `options`, `swrOptions`, and `chainId`. \n\nThe `user` parameter is a string that represents the user whose tokens are being retrieved. The `options` parameter is an optional object that contains query parameters to be included in the API request. The `swrOptions` parameter is an optional object that contains configuration options for the SWR library, which is used to cache and manage the API response. The `chainId` parameter is an optional number that represents the ID of the blockchain network to use for the API request.\n\nThe function first retrieves the Reservoir client object using the `useReservoirClient` hook. It then determines the blockchain network to use based on the `chainId` parameter or the current network of the client object. \n\nThe function then uses the `useInfiniteApi` hook from the `./` module to make the API request. This hook takes in a callback function that is called each time a new page of data is requested. The callback function constructs the API endpoint URL using the `user` parameter and the `chain` object, and sets the query parameters using the `options` object. If there is previous page data available, the callback function adds the `continuation` parameter to the query to retrieve the next page of data. The callback function also sets the `normalizeRoyalties` parameter in the query if it is not already set and the client object has a `normalizeRoyalties` property.\n\nThe `useInfiniteApi` hook returns an object that contains the API response data, including an array of token objects. The function extracts this array from the response and returns it along with the other properties of the response object.\n\nThis function can be used in the larger project to retrieve a list of tokens for a given user from the Reservoir API. The function can be called with the `user` parameter and optionally with the `options`, `swrOptions`, and `chainId` parameters to customize the API request and response caching behavior. The returned token array can then be used to display the user's tokens in the application.",
- "questions": "1. What is the purpose of this code and what does it do?\n \n This code exports a function that retrieves user tokens from a Reservoir API endpoint. It uses the Reservoir SDK and SWR library to handle API requests and pagination.\n\n2. What parameters does the exported function take and what are their types?\n \n The exported function takes four parameters: `user` (string or undefined), `options` (UserTokenQuery or false), `swrOptions` (SWRInfiniteConfiguration), and `chainId` (number or undefined). \n\n3. What is the structure of the response data returned by the exported function?\n \n The response data returned by the exported function is an object that includes the data returned by the Reservoir API endpoint. The `data` property of the response object is an array of user tokens, and the other properties of the response object are metadata related to the API request and pagination.",
- "checksum": "7d175f6d2b230f72f658be3b03d3d32d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useUserTopBids.json b/.autodoc/docs/json/ui/src/hooks/useUserTopBids.json
deleted file mode 100644
index 3d65e4a4b..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useUserTopBids.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useUserTopBids.ts",
- "filePath": "ui/src/hooks/useUserTopBids.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useUserTopBids.ts",
- "summary": "This code exports a function that retrieves a user's top bids from a Reservoir API endpoint. The function takes in four optional parameters: `user`, `options`, `swrOptions`, and `chainId`. \n\nThe `user` parameter is a string that specifies the user whose top bids are being retrieved. The `options` parameter is an object that contains additional query parameters to be included in the API request. The `swrOptions` parameter is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. The `chainId` parameter is an optional number that specifies the ID of the blockchain network to use for the API request.\n\nThe function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines the chain to use for the API request based on the `chainId` parameter or the current chain of the client. \n\nThe function then uses the `useInfiniteApi` hook to make the API request. This hook takes in a function that generates the URL and query parameters for the API request based on the current page index and previous page data. The function also handles setting the `normalizeRoyalties` query parameter based on the client's settings. The `useInfiniteApi` hook returns an object that contains the API response data and metadata.\n\nFinally, the function extracts the `topBids` data from the API response and returns it along with the metadata from the `useInfiniteApi` hook.\n\nThis function can be used in the larger project to retrieve a user's top bids from the Reservoir API and display them in the user interface. The function can be called with the desired user ID and any additional query parameters, and the resulting data can be displayed using the metadata returned by the `useInfiniteApi` hook. For example:\n\n```\nimport useTopBids from './useTopBids'\n\nfunction TopBids({ user }) {\n const { data, size, setSize } = useTopBids(user)\n\n return (\n {token.name}
\n ))}\n \n \n {data.map((bid) => (\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports a function that retrieves a user's top bids from a Reservoir API endpoint and returns them in a paginated format using SWR.\n\n2. What are the input parameters for the exported function?\n- The function takes in four optional parameters: `user` (string), `options` (object), `swrOptions` (object), and `chainId` (number).\n\n3. What is the expected output of the exported function?\n- The function returns an object that includes the paginated data retrieved from the Reservoir API endpoint, as well as additional metadata provided by the SWR library. The data is flattened into an array of bids.",
- "checksum": "18e1ad468a9b076bbf43cd6b30c022b7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useUsersActivity.json b/.autodoc/docs/json/ui/src/hooks/useUsersActivity.json
deleted file mode 100644
index 03b08308c..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useUsersActivity.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useUsersActivity.ts",
- "filePath": "ui/src/hooks/useUsersActivity.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useUsersActivity.ts",
- "summary": "This code exports a function that retrieves user activity data from a Reservoir API endpoint. The function takes in optional parameters for filtering the data and pagination options, as well as a Reservoir client object and a chain ID. \n\nThe function first retrieves the Reservoir client object using the `useReservoirClient` hook. It then determines the chain to use for the API request based on the provided chain ID or the current chain of the client. \n\nThe function then uses the `useInfiniteApi` hook to make the API request and handle pagination. It constructs the API endpoint URL and query parameters based on the provided options and pagination data. It then returns an array containing the URL, API key, and client version to be used in the API request. \n\nFinally, the function maps over the API response data to extract the activity data and returns it along with the pagination data from the `useInfiniteApi` hook. \n\nThis function can be used in the larger project to retrieve user activity data from the Reservoir API and display it in the UI. For example, it could be used to display a user's recent activity on their profile page or to show a feed of recent activity across the platform. \n\nExample usage:\n\n```\nimport useUserActivity from './useUserActivity'\n\nfunction UserProfile({ userId }) {\n const { data: activities, isLoading, isError } = useUserActivity(userId)\n\n if (isLoading) {\n return {bid.amount}
\n ))}\n \n Loading...
\n }\n\n if (isError) {\n return Error loading user activity.
\n }\n\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of the `useInfiniteApi` hook being imported from the `./` module?\n- The smart developer might wonder what the `useInfiniteApi` hook does and how it is implemented within the `zoo` project.\n\n2. What is the expected format of the response data from the API endpoint `/users/activity/v5`?\n- The smart developer might want to know what the `UsersActivityResponse` type represents and how it is used within the `useInfiniteApi` hook.\n\n3. What is the purpose of the `chainId` parameter and how is it used within the function?\n- The smart developer might be curious about the `chainId` parameter and how it is used to determine the `chain` variable, which is then used to construct the API endpoint URL.",
- "checksum": "01b67d17d1f68ed7078f341b776192be"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useWrappedBalance.json b/.autodoc/docs/json/ui/src/hooks/useWrappedBalance.json
deleted file mode 100644
index a43915919..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useWrappedBalance.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useWrappedBalance.ts",
- "filePath": "ui/src/hooks/useWrappedBalance.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useWrappedBalance.ts",
- "summary": "This code is a function that retrieves the balance of a specific token on the current blockchain network. The function imports a list of wrapped contract addresses from a separate file and uses the `useBalance` function from the `wagmi` library to retrieve the balance of the specified token. \n\nTo use this function, the user must provide parameters to the `useBalance` function, which are passed to the function as an argument to this function. The function then calls the `useZooClient` function to retrieve the current blockchain network and uses it to determine the contract address of the specified token. If the current network is not in the list of wrapped contract addresses, the function defaults to the mainnet contract address. \n\nThe function then calls the `useBalance` function with the specified parameters and the determined contract address. The function returns an object containing the balance of the specified token and the contract address used to retrieve the balance. \n\nHere is an example of how this function can be used:\n\n```\nimport useTokenBalance from './useTokenBalance'\n\nconst params = {\n account: '0x1234567890abcdef',\n decimals: 18,\n}\n\nconst tokenBalance = useTokenBalance(params)\n\nconsole.log(tokenBalance.balance) // prints the balance of the specified token\nconsole.log(tokenBalance.contractAddress) // prints the contract address used to retrieve the balance\n```\n\nOverall, this function is a useful tool for retrieving the balance of a specific token on the current blockchain network. It can be used in conjunction with other functions in the `zoo` project to provide users with information about their token holdings.",
- "questions": "1. What is the purpose of the `wrappedContracts` constant imported from `../constants/wrappedContracts`?\n- `wrappedContracts` is likely a mapping of chain IDs to contract addresses for wrapped tokens, used to determine the contract address based on the current chain.\n\n2. What is the `useBalance` function being imported from `wagmi`, and what are the possible parameters that can be passed to it?\n- `useBalance` is likely a function provided by the `wagmi` library for retrieving the balance of a given token. The possible parameters that can be passed to it are not clear from this code snippet.\n\n3. What is the expected return value of this function?\n- This function is expected to return an object with two properties: `balance`, which is the balance of the specified token, and `contractAddress`, which is the contract address of the specified token on the current chain.",
- "checksum": "bf24ae9ef9446277421ded664a2f2829"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/hooks/useZooClient.json b/.autodoc/docs/json/ui/src/hooks/useZooClient.json
deleted file mode 100644
index 89cce4252..000000000
--- a/.autodoc/docs/json/ui/src/hooks/useZooClient.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "useZooClient.ts",
- "filePath": "ui/src/hooks/useZooClient.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/hooks/useZooClient.ts",
- "summary": "The code above is a React functional component that exports a function that returns the context object of the `ZooClientProvider`. The `ZooClientProvider` is a higher-order component that provides the context for the `ZooClient` component and its children. \n\nThe `useContext` hook is used to access the context object provided by the `ZooClientProvider`. The `useContext` hook takes the `ZooClientContext` object as an argument and returns the current context value for that context. \n\nThis code can be used in the larger project to provide access to the `ZooClient` context object in any component that needs it. For example, if a component needs to access the `ZooClient` context object to retrieve data or perform an action, it can simply import this function and call it to get the context object. \n\nHere is an example of how this code can be used in a component:\n\n```\nimport React from 'react'\nimport getZooClientContext from './getZooClientContext'\n\nfunction MyComponent() {\n const zooClientContext = getZooClientContext()\n\n // Use the zooClientContext object to retrieve data or perform an action\n\n return (\n // JSX for the component\n )\n}\n\nexport default MyComponent\n```\n\nIn this example, the `getZooClientContext` function is imported and called to get the `zooClientContext` object. The `zooClientContext` object can then be used in the component to retrieve data or perform an action. \n\nOverall, this code provides a simple and reusable way to access the `ZooClient` context object in any component that needs it.",
- "questions": "1. What is `ZooClientContext` and where is it defined?\n- `ZooClientContext` is likely a context object defined in `ZooClientProvider` located in the parent directory. \n\n2. What is the purpose of this code?\n- This code exports a function that returns the value of `ZooClientContext` using the `useContext` hook from React. \n\n3. How is this code intended to be used in the project?\n- This code is likely used to provide access to the `ZooClientContext` throughout the project by importing and calling the exported function.",
- "checksum": "8a2b59ba5ac8ea32a9888bd037f37f8e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/img/EthIconGlyph.json b/.autodoc/docs/json/ui/src/img/EthIconGlyph.json
deleted file mode 100644
index 954b4be89..000000000
--- a/.autodoc/docs/json/ui/src/img/EthIconGlyph.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "EthIconGlyph.tsx",
- "filePath": "ui/src/img/EthIconGlyph.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/img/EthIconGlyph.tsx",
- "summary": "This code exports a React component that renders an SVG image. The SVG image consists of two polygons, one on top of the other, forming a shape that resembles a house. The polygons are defined using the `path` element, which takes a `d` attribute that specifies the shape of the polygon using a series of commands. The `fill` attribute is set to black, which fills the shape with black color.\n\nThe component takes no props and returns the SVG image. It sets the width to \"auto\" and the height to \"100%\", which means the image will scale to fit its container. The `viewBox` attribute defines the position and size of the viewport, which is the visible area of the SVG image. In this case, the viewport starts at x=5, y=0 and has a width of 15 and a height of 24.\n\nThis component can be used in a larger project as a decorative element, such as a logo or an icon. It can be imported and rendered like any other React component. For example:\n\n```\nimport React from 'react';\nimport HouseIcon from './HouseIcon';\n\nconst MyComponent = () => {\n return (\n User Activity
\n- \n {activities.map((activity) => (\n
- {activity.description} \n ))}\n
\n
\n );\n};\n```\n\nThis code imports the `HouseIcon` component from the file where it is defined and renders it inside a `div` element. The resulting output will be a heading followed by the SVG image of the house.",
- "questions": "1. What is the purpose of this code?\n- This code exports a React component that renders an SVG image.\n\n2. What does the viewBox attribute do?\n- The viewBox attribute defines the position and dimensions of the SVG image's viewport.\n\n3. Can the color of the SVG image be changed?\n- Yes, the fill attribute can be changed to any valid CSS color value to change the color of the SVG image.",
- "checksum": "213a7eefbce90a36584085b5f4e92034"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/img/EthIconGray.json b/.autodoc/docs/json/ui/src/img/EthIconGray.json
deleted file mode 100644
index 9b5e5bc00..000000000
--- a/.autodoc/docs/json/ui/src/img/EthIconGray.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "EthIconGray.tsx",
- "filePath": "ui/src/img/EthIconGray.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/img/EthIconGray.tsx",
- "summary": "This code exports a React component that renders an SVG image. The image consists of six paths that form a shape resembling a hexagon with two of its sides cut off. The hexagon is divided into three sections, each with a different color. The top section is colored dark gray (#343434), the bottom section is colored light gray (#8C8C8C), and the middle section is divided into four smaller sections, two of which are colored black (#141414) and two of which are colored dark brown (#393939 and #3C3C3B). \n\nThe SVG has a viewBox of \"5 0 15 24\", meaning that the image is 15 units wide and 24 units tall, and its top-left corner is located at (5,0) in the SVG coordinate system. The SVG also has a clipPath that defines a rectangular area with the same dimensions as the SVG and fills it with white. This clipPath is applied to the group of paths that form the hexagon, effectively masking them so that they only appear within the rectangular area defined by the clipPath.\n\nThis component can be used in a larger project as a decorative element or icon. It can be imported and rendered like any other React component, for example:\n\n```\nimport HexagonIcon from './path/to/HexagonIcon'\n\nfunction MyComponent() {\n return (\n Welcome to my house
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports an SVG component that renders a specific image.\n\n2. What is the significance of the viewBox attribute in the SVG element?\n- The viewBox attribute defines the position and dimensions of the SVG viewport.\n\n3. What is the purpose of the clipPath element and its child rect element?\n- The clipPath element defines a clipping path that restricts the visible area of the SVG image, and the rect element inside it specifies the dimensions of the clipping path.",
- "checksum": "348243a23b839f7443150f90f64d3d6a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/img/EthIconPurple.json b/.autodoc/docs/json/ui/src/img/EthIconPurple.json
deleted file mode 100644
index 6b0e408df..000000000
--- a/.autodoc/docs/json/ui/src/img/EthIconPurple.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "EthIconPurple.tsx",
- "filePath": "ui/src/img/EthIconPurple.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/img/EthIconPurple.tsx",
- "summary": "This code exports a React component that renders an SVG image of a flag. The flag is composed of five paths, each with a different fill color. The dimensions of the SVG are set to \"auto\" for the width and \"100%\" for the height, which means the SVG will scale to fit its container element. The viewBox attribute defines the position and dimensions of the SVG's viewport, which is set to (5, 0, 15, 24). \n\nThe first path element fills the top left corner of the flag with a light blue color (#8A92B2). The second path element fills the top right and bottom left corners of the flag with a darker blue color (#62688F). The third path element fills the center of the flag with a dark blue color (#454A75). The fourth path element fills the bottom left corner of the flag with the same light blue color as the first path element. The fifth path element fills the bottom right corner of the flag with the same darker blue color as the second path element.\n\nThis component can be used in a larger project as a decorative element or icon. It can be imported and rendered in any React component that needs to display a flag. For example:\n\n```\nimport React from 'react';\nimport Flag from './Flag';\n\nconst CountryInfo = ({ country }) => {\n return (\n Welcome to my app!
\nHere's a cool hexagon icon:
\n\n
\n );\n};\n\nexport default CountryInfo;\n```\n\nIn this example, the `CountryInfo` component displays information about a country and renders the `Flag` component as a decorative element. The `Flag` component can be customized with CSS styles or additional props to change its appearance or behavior.",
- "questions": "1. What is the purpose of this code?\n \n This code exports a React component that renders an SVG image of a shape resembling a flag.\n\n2. What are the dimensions of the SVG image?\n \n The SVG image has a variable width and a height of 100%. The viewBox attribute specifies the dimensions of the visible area as 5 units from the left, 0 units from the top, 15 units wide, and 24 units tall.\n\n3. What do the different path elements represent?\n \n The different path elements represent different parts of the flag shape, with different fill colors. The first path element represents the top left corner of the flag, the second path element represents the bottom left and top right corners of the flag, the third path element represents the center of the flag, and the last two path elements represent the bottom right corner of the flag.",
- "checksum": "7efbc441768ff5a311047490d8072718"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/img/WEthIcon.json b/.autodoc/docs/json/ui/src/img/WEthIcon.json
deleted file mode 100644
index 2ffdff490..000000000
--- a/.autodoc/docs/json/ui/src/img/WEthIcon.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "WEthIcon.tsx",
- "filePath": "ui/src/img/WEthIcon.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/img/WEthIcon.tsx",
- "summary": "This code exports a React component that renders an SVG image of a stylized arrow. The arrow is composed of six path elements, each with a different fill color. The arrow is oriented vertically and has a triangular shape with a wider base at the bottom. The SVG element has a dynamic width and a fixed height of 100% of its container. The viewBox attribute defines the coordinate system used to draw the paths, and the xmlns attribute specifies the XML namespace for SVG elements.\n\nThis component can be used in a larger project as a visual element to indicate direction or movement. It can be styled and positioned using CSS to fit the design of the application. Here is an example of how to use this component in a React application:\n\n```\nimport React from 'react';\nimport Arrow from './Arrow';\n\nconst App = () => (\n {country.name}
\nCapital: {country.capital}
\nPopulation: {country.population}
\n\n
\n);\n\nexport default App;\n```\n\nIn this example, the Arrow component is imported and rendered inside a div element. The resulting output will be the arrow image displayed below the heading.",
- "questions": "1. What is the purpose of this code?\n- This code exports a React component that renders an SVG image of a stylized arrow.\n\n2. What are the dimensions of the SVG image?\n- The SVG image has a variable width and a fixed height of 100%, and a viewBox of \"0 0 15 24\".\n\n3. What do the different path elements represent?\n- The different path elements represent different parts of the arrow image, each with a different fill color.",
- "checksum": "54fba36ee3e144f69878229a42a9d676"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/img/WethApproval.json b/.autodoc/docs/json/ui/src/img/WethApproval.json
deleted file mode 100644
index 21cedfe59..000000000
--- a/.autodoc/docs/json/ui/src/img/WethApproval.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "WethApproval.tsx",
- "filePath": "ui/src/img/WethApproval.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/img/WethApproval.tsx",
- "summary": "This code exports a React component that renders an SVG image of a polygonal shape resembling a bird. The SVG image has a width and height of 56 units and a viewbox of 0 0 56 56. The image is composed of several paths and a rectangle, each with a different fill color.\n\nThe rectangle has a width and height of 56 units and rounded corners with a radius of 8 units. It is filled with a light gray color with an opacity of 0.2, giving it a translucent appearance.\n\nThe paths are used to create the shape of the bird. The first path starts at the top of the bird's head and goes down to the left wing. It is filled with a dark pink color. The second path starts at the left wing and goes down to the tail. It is filled with a darker shade of pink. The third path starts at the tail and goes up to the right wing. It is filled with the same dark pink color as the second path. The fourth path starts at the right wing and goes up to the top of the bird's head, completing the shape. It is filled with a dark red color.\n\nThis component can be used in a larger project as a decorative element or icon. It can be imported and rendered in any React component that needs to display an image of a bird. For example, it can be used in a nature-themed website or app, or in a game that involves birds. Here is an example of how to use this component in a React component:\n\n```\nimport BirdIcon from './path/to/bird-icon'\n\nfunction MyComponent() {\n return (\n Welcome to my app
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports an SVG component that renders a specific design of a zoo-related icon.\n\n2. What dependencies are required for this code to work?\n- This code requires React and SVGProps from the 'react' library.\n\n3. Can the size and colors of the icon be customized?\n- Yes, the size of the icon can be customized by changing the width and height values in the SVG element. The colors of the icon can also be customized by changing the fill values of the different path and rect elements.",
- "checksum": "8a90ada57437c06e6a99c93e41d421db"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/index.json b/.autodoc/docs/json/ui/src/index.json
deleted file mode 100644
index 631dbf2f4..000000000
--- a/.autodoc/docs/json/ui/src/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "ui/src/index.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/index.ts",
- "summary": "This code exports various modules, hooks, themes, and components that are part of the larger project called \"zoo\". \n\nThe \"Providers\" section exports two providers: \"ReservoirKitProvider\" and \"ReservoirClientProvider\". These providers are likely used to provide data and functionality to other parts of the project. \n\nThe \"Hooks\" section exports a variety of hooks that can be used throughout the project. These hooks include \"useCollections\", \"useTokens\", \"useBids\", and many others. Hooks are a way to reuse stateful logic across components in React, so these hooks likely provide some common functionality that is used throughout the project. \n\nThe \"Themes\" section exports two themes: \"lightTheme\" and \"darkTheme\". These themes likely define the color scheme and styling for various components in the project. \n\nThe \"Components\" section exports a variety of components that can be used throughout the project. These components include modals for buying, bidding, and listing items, as well as components for displaying token media and managing a user's cart. \n\nOverall, this code exports a variety of modules, hooks, themes, and components that are likely used throughout the larger \"zoo\" project. Developers working on the project can import and use these exports as needed to build out the functionality and user interface of the project. \n\nExample usage:\n\n```\nimport { useCollections } from 'zoo';\n\nfunction MyComponent() {\n const { collections, loading, error } = useCollections();\n\n if (loading) {\n return Welcome to the Bird Game!
\nCan you spot the bird in this image?
\nLoading collections...
;\n }\n\n if (error) {\n return Error loading collections: {error.message}
;\n }\n\n return (\n \n {collections.map(collection => (\n
\n );\n}\n```\n\nIn this example, the \"useCollections\" hook is imported from the \"zoo\" project and used to fetch and display a user's collections. The hook returns an object with the collections, loading state, and any errors that occurred during the fetch. The collections are then mapped over and displayed in the component.",
- "questions": "1. What is the purpose of the `types/parcel.d.ts` file being referenced at the top of the code?\n - The `types/parcel.d.ts` file is being referenced to provide type definitions for the code in this file.\n2. What is the `ReservoirKitProvider` and `ReservoirClientProvider` being exported for?\n - The `ReservoirKitProvider` and `ReservoirClientProvider` are being exported as providers for the `ReservoirKit` library.\n3. What is the purpose of the various modal components being exported?\n - The various modal components being exported are used for different actions related to buying, bidding, and listing tokens in the `ReservoirKit` library.",
- "checksum": "b9d0e99325a68ff9005cf0fe9287561e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/lib/defaultExpirationOptions.json b/.autodoc/docs/json/ui/src/lib/defaultExpirationOptions.json
deleted file mode 100644
index 83d4c8784..000000000
--- a/.autodoc/docs/json/ui/src/lib/defaultExpirationOptions.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "defaultExpirationOptions.ts",
- "filePath": "ui/src/lib/defaultExpirationOptions.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/lib/defaultExpirationOptions.ts",
- "summary": "This code defines an array of `ExpirationOption` objects and exports it as the default export of the module. Each `ExpirationOption` object represents a different expiration time option that can be selected by a user in the larger project. \n\nEach `ExpirationOption` object has four properties: `text`, `value`, `relativeTime`, and `relativeTimeUnit`. The `text` property is a string that represents the display text for the option. The `value` property is a string that represents the value of the option. The `relativeTime` property is a number that represents the relative time for the option. The `relativeTimeUnit` property is a string that represents the unit of time for the option.\n\nFor example, the first `ExpirationOption` object represents an option for a 1 hour expiration time. The `text` property is \"1 Hour\", the `value` property is \"hour\", the `relativeTime` property is 1, and the `relativeTimeUnit` property is \"h\". \n\nThis code can be used in the larger project to provide users with a list of expiration time options to choose from. The `expirationOptions` array can be imported into other modules and used to populate a dropdown menu or other UI element. For example, the following code could be used to create a dropdown menu of expiration time options:\n\n```\nimport expirationOptions from './path/to/expirationOptions'\n\nconst dropdown = document.createElement('select')\n\nexpirationOptions.forEach(option => {\n const optionElement = document.createElement('option')\n optionElement.value = option.value\n optionElement.text = option.text\n dropdown.appendChild(optionElement)\n})\n\ndocument.body.appendChild(dropdown)\n```\n\nThis code creates a `select` element and populates it with `option` elements for each `ExpirationOption` object in the `expirationOptions` array. The `value` and `text` properties of each `option` element are set to the corresponding properties of the `ExpirationOption` object. The resulting dropdown menu can be appended to the `body` of the document or another element in the UI.",
- "questions": "1. What is the purpose of the `ExpirationOption` type?\n- The `ExpirationOption` type is likely used to define the structure of objects that represent different expiration options.\n\n2. What is the significance of the `relativeTime` and `relativeTimeUnit` properties?\n- The `relativeTime` property represents the amount of time for the expiration option, while the `relativeTimeUnit` property represents the unit of time (e.g. hours, days, weeks, months).\n\n3. How is this module intended to be used in the `zoo` project?\n- It is unclear from this code alone how this module is intended to be used in the `zoo` project, but it likely provides a list of expiration options that can be used in some part of the project's functionality.",
- "checksum": "1e09794efd3c24245dba78450df5a02e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/lib/getLocalMarketplaceData.json b/.autodoc/docs/json/ui/src/lib/getLocalMarketplaceData.json
deleted file mode 100644
index 108cf658f..000000000
--- a/.autodoc/docs/json/ui/src/lib/getLocalMarketplaceData.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "getLocalMarketplaceData.ts",
- "filePath": "ui/src/lib/getLocalMarketplaceData.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/lib/getLocalMarketplaceData.ts",
- "summary": "The code is a JavaScript module that exports a function. The function retrieves metadata from the current web page and returns an object containing the page title and icon. The metadata is retrieved using the Reservoir SDK, which is imported from the '@reservoir0x/reservoir-sdk' module.\n\nThe function first calls the `getClient()` function from the Reservoir SDK to get a client object. It then looks for a meta tag with the property 'reservoir:title' and retrieves its content attribute. If the title is not found, it checks if the client object exists and has a 'source' property. If so, it uses the 'source' property as the title. If the title is still not found, it uses the hostname of the current location as the title.\n\nNext, the function looks for a meta tag with the property 'reservoir:icon' and retrieves its content attribute. If the icon is not found, it looks for a link tag with a rel attribute containing the word 'icon' and retrieves its href attribute.\n\nFinally, the function returns an object containing the title and icon. This function can be used in a larger project to retrieve metadata from web pages and display it in a user interface. For example, a web browser extension could use this function to display the title and icon of the current web page in a popup window. \n\nExample usage:\n\n```\nimport getPageMetadata from './getPageMetadata'\n\nconst metadata = getPageMetadata()\n\nconsole.log(metadata.title) // prints the title of the current web page\nconsole.log(metadata.icon) // prints the icon of the current web page\n```",
- "questions": "1. What is the purpose of the `getClient` function from `@reservoir0x/reservoir-sdk` being imported?\n- The `getClient` function is used to get a client object from the Reservoir SDK.\n\n2. What is the purpose of the code that sets the `title` variable?\n- The code sets the `title` variable to the value of the `reservoir:title` meta tag content attribute, or the `client.source` property, or the hostname of the current location.\n\n3. What is the purpose of the code that sets the `icon` variable?\n- The code sets the `icon` variable to the value of the `reservoir:icon` meta tag content attribute, or the `href` attribute of the `link` tag with a `rel` attribute containing the word \"icon\".",
- "checksum": "52d35f701cbe8ea87e0c5e8a6a22d1c0"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/lib/numbers.json b/.autodoc/docs/json/ui/src/lib/numbers.json
deleted file mode 100644
index 778756972..000000000
--- a/.autodoc/docs/json/ui/src/lib/numbers.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "numbers.ts",
- "filePath": "ui/src/lib/numbers.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/lib/numbers.ts",
- "summary": "The `zoo` project contains a module that provides functions for formatting Ethereum (ETH) values into human-readable formats. The module exports three functions: `formatBN`, `formatNumber`, and `toFixed`.\n\nThe `formatBN` function takes an ETH amount, a maximum number of decimal digits, and an optional number of decimals as arguments. It returns the ETH value as a string or `-` if the amount is `null` or `undefined`. The function first checks if the amount is `null` or `undefined` and returns `-` if it is. It then converts the amount to a number and formats it using the `Intl.NumberFormat` API. The function uses the `utils.formatUnits` function from the `ethers` library to convert the amount to a number if it is not already a number. The function also checks if the browser is Safari and applies a workaround for a bug in the `Intl.NumberFormat` API that affects the fraction part of the formatted value. The function returns the formatted value as a string.\n\nThe `formatNumber` function takes an ETH amount and a maximum number of decimal digits as arguments. It returns the ETH value as a string or `-` if the amount is `null` or `undefined`. The function uses the `Intl.NumberFormat` API to format the amount with the specified number of decimal digits. The function returns the formatted value as a string.\n\nThe `toFixed` function takes a number and a number of decimal digits as arguments. It returns the number as a string with the specified number of decimal digits. The function uses a regular expression to match the number of decimal digits and returns the matched value or the original number if no match is found.\n\nThese functions can be used in the `zoo` project or in other projects that require formatting of ETH values. For example, the `formatBN` function can be used to format ETH values in a user interface that displays ETH balances or transaction amounts. The `formatNumber` function can be used to format ETH values in a chart or graph that displays historical ETH prices. The `toFixed` function can be used to format ETH values in a smart contract that requires a fixed number of decimal digits.",
- "questions": "1. What is the purpose of the `formatBN` function?\n- The `formatBN` function is used to convert ETH values to human-readable formats with a specified number of decimal digits.\n\n2. Why is there a check for Safari browser in the code?\n- There is a check for Safari browser in the code because Safari has a few bugs with the fraction part of `formatToParts`, sometimes rounding when unnecessary and when the amount is in the thousands not properly representing the value in compact display. \n\n3. What is the purpose of the `truncateFractionAndFormat` function?\n- The `truncateFractionAndFormat` function is used to truncate the fraction part of a number to a specified number of digits and format the number as a string. It is used in the `formatBN` function to format the parts of the number returned by `formatToParts`.",
- "checksum": "4ba44d7f8404a2c27ba539788c2df6f9"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/lib/optimizeImage.json b/.autodoc/docs/json/ui/src/lib/optimizeImage.json
deleted file mode 100644
index 37ad20462..000000000
--- a/.autodoc/docs/json/ui/src/lib/optimizeImage.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "optimizeImage.ts",
- "filePath": "ui/src/lib/optimizeImage.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/lib/optimizeImage.ts",
- "summary": "The `optimizeImage` function in the `zoo` project takes in two parameters: `imageHref` and `width`. The `imageHref` parameter is a string that represents the URL of an image. The `width` parameter is a number that represents the desired width of the image.\n\nThe purpose of this function is to optimize the image by resizing it to the desired width. The function first checks if the `imageHref` parameter is defined. If it is not defined, the function returns an empty string. If it is defined, the function creates a new `URL` object from the `imageHref` parameter.\n\nThe function then checks if the host of the URL is `lh3.googleusercontent.com`. If it is, the function checks if the `imageHref` parameter includes either `=s` or `=w`. If it does, the function splits the `imageHref` parameter at the `=` character and replaces the value after the `=` with the desired width. If it does not include `=s` or `=w`, the function simply appends `=w` followed by the desired width to the `imageHref` parameter.\n\nIf the host of the URL is not `lh3.googleusercontent.com`, the function simply returns the `imageHref` parameter.\n\nThis function can be used in the larger `zoo` project to optimize images by resizing them to the desired width. For example, if there is a gallery of images in the project and the images are too large, this function can be used to resize them to a more appropriate size. \n\nExample usage:\n\n```\nimport optimizeImage from './optimizeImage'\n\nconst imageHref = 'https://example.com/image.jpg'\nconst width = 500\n\nconst optimizedImage = optimizeImage(imageHref, width)\n\nconsole.log(optimizedImage) // 'https://example.com/image.jpg=w500'\n```",
- "questions": "1. What is the purpose of this function?\n This function takes in an image URL and a width value, and returns a new URL with the specified width parameter added to the query string.\n\n2. What type of input does this function expect for the imageHref parameter?\n This function expects a string or undefined value for the imageHref parameter.\n\n3. What is the significance of the URL host being 'lh3.googleusercontent.com'?\n If the URL host is 'lh3.googleusercontent.com', the function will check if the imageHref already includes a width or size parameter in the query string. If it does, the function will replace it with the new width value. If it does not, the function will add the width parameter to the query string.",
- "checksum": "688f7ffe0ae2297bc8be413972a286ef"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/lib/swr.json b/.autodoc/docs/json/ui/src/lib/swr.json
deleted file mode 100644
index 35164f765..000000000
--- a/.autodoc/docs/json/ui/src/lib/swr.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "swr.ts",
- "filePath": "ui/src/lib/swr.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/lib/swr.ts",
- "summary": "The code in this file is responsible for defining default headers and a default fetcher function for use in the larger project. It also defines default options for the SWRConfig component from the 'swr' library. \n\nThe `defaultHeaders` function takes two optional parameters, `apiKey` and `clientVersion`, and returns an object containing default headers for use in HTTP requests. The function sets the `x-rkui-version` header to the version number from the project's package.json file. If an `apiKey` parameter is provided, the function sets the `x-api-key` header to the value of the parameter. If a `clientVersion` parameter is provided, the function sets the `x-rkc-version` header to the value of the parameter. \n\nThe `defaultFetcher` function takes a single parameter, `params`, which can be either a string or an array of strings. If `params` is an array, the function extracts the first three elements and assigns them to `resource`, `apiKey`, and `clientVersion`, respectively. If `params` is a string, the function assigns it to `resource`. The function then calls `defaultHeaders` with `apiKey` and `clientVersion` as arguments to get the default headers for the request. The function then uses `fetch` to make the HTTP request with the specified `resource` and `headers`. If the response has a `deprecation` header set to `true`, the function logs a warning to the console. The function then returns the response body as a JSON object. If an error occurs during the request, the function throws the error. \n\nThe `swrDefaultOptions` object defines default options for the `SWRConfig` component from the 'swr' library. The object sets the `fetcher` option to the `defaultFetcher` function defined in this file, and sets `revalidateOnFocus` to `false`. \n\nThis code can be used in the larger project to provide default headers and a default fetcher function for HTTP requests. The `defaultHeaders` function can be used to set default headers for all requests, or modified to set headers for specific types of requests. The `defaultFetcher` function can be used to make HTTP requests with the default headers, or modified to handle specific types of requests. The `swrDefaultOptions` object can be passed as a prop to the `SWRConfig` component to set default options for data fetching with the 'swr' library. \n\nExample usage:\n\n```\nimport { defaultHeaders, defaultFetcher, swrDefaultOptions } from 'path/to/zoo'\n\n// Set default headers for all requests\nconst headers = defaultHeaders('my-api-key', '1.0.0')\n\n// Make a GET request with default headers\nconst response = await defaultFetcher('https://example.com/api/data', headers)\n\n// Pass default options to SWRConfig component\n{collection.name}
\n ))}\n This is the content of my modal.
\n \n \n )\n}\n```", - "questions": "1. What is the purpose of this code?\n- This code defines a React component called `Modal` that renders a dialog box with a title, content, and optional back button and loading spinner.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several modules from external libraries, including `react`, `@radix-ui/react-dialog`, and `@fortawesome/react-fontawesome`.\n\n3. What props can be passed to the `Modal` component?\n- The `Modal` component accepts several props, including `title`, `children`, `size`, `onBack`, `loading`, and various props related to the behavior of the dialog box, such as `open` and `onOpenChange`.", - "checksum": "7a8ecd36368bb0e00108cdbe70469bcf" -} \ No newline at end of file diff --git a/.autodoc/docs/json/ui/src/modal/Progress.json b/.autodoc/docs/json/ui/src/modal/Progress.json deleted file mode 100644 index 75d97a10b..000000000 --- a/.autodoc/docs/json/ui/src/modal/Progress.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "fileName": "Progress.tsx", - "filePath": "ui/src/modal/Progress.tsx", - "url": "zoo-labs/zoo/blob/master/ui/src/modal/Progress.tsx", - "summary": "The `Progress` component in the `zoo` project is a React functional component that renders a progress indicator with a title, an icon, and a link to a block explorer. The component takes three props: `title`, `txHash`, and `blockExplorerBaseUrl`. \n\nThe `title` prop is a string that represents the title of the progress indicator. The `txHash` prop is an optional string that represents the transaction hash of the progress indicator. If `txHash` is provided, the component renders a cube icon; otherwise, it renders a wallet icon. The `blockExplorerBaseUrl` prop is an optional string that represents the base URL of the block explorer. \n\nThe component uses the `useNetwork` hook from the `wagmi` library to get the active chain. It then renders a `Flex` component with a column direction and some styles for alignment and spacing. The `Flex` component contains a `Text` component that renders the `title` prop, a `Box` component that renders the icon based on the `txHash` prop, and an `Anchor` component that renders the link to the block explorer. \n\nThe `Box` component uses the `FontAwesomeIcon` component from the `@fortawesome/react-fontawesome` library to render the cube or wallet icon. The `Anchor` component uses the `activeChain` variable to get the name of the default block explorer for the active chain. If `txHash` is not provided, the `Anchor` component is hidden using the `visibility` CSS property.\n\nThis component can be used in the larger `zoo` project to show the progress of a transaction or an operation. For example, it can be used in a dashboard to show the progress of a deposit or a withdrawal. The `title` prop can be used to describe the operation, the `txHash` prop can be used to show the transaction hash, and the `blockExplorerBaseUrl` prop can be used to link to the block explorer. \n\nHere is an example of how to use the `Progress` component in a React component:\n\n```\nimport Progress from './Progress'\n\nconst MyComponent = () => {\n const txHash = '0x1234567890abcdef'\n const blockExplorerBaseUrl = 'https://etherscan.io/'\n\n return (\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports a React component called `Progress` that displays a title, an icon (either a cube or a wallet), and a link to a block explorer website.\n\n2. What are the required props for the `Progress` component?\n- The required prop is `title`, which is a string. The optional props are `txHash`, which is a string, and `blockExplorerBaseUrl`, which is a string.\n\n3. What external libraries or dependencies does this code use?\n- This code imports several components from a custom library called `primitives`, as well as two icons from `@fortawesome/free-solid-svg-icons` and `@fortawesome/react-fontawesome`. It also imports a hook called `useNetwork` from `wagmi`.",
- "checksum": "839eeb9fad00ad11f6f3751c4ae759f3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/ProgressBar.json b/.autodoc/docs/json/ui/src/modal/ProgressBar.json
deleted file mode 100644
index 8fe10cfcd..000000000
--- a/.autodoc/docs/json/ui/src/modal/ProgressBar.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ProgressBar.tsx",
- "filePath": "ui/src/modal/ProgressBar.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/ProgressBar.tsx",
- "summary": "The code defines a React functional component called `ProgressBar` that renders a progress bar with a number of segments equal to the `max` prop. The `value` prop determines how many segments are filled with a gradient color, while the remaining segments are unfilled. The component uses the `Flex` primitive from a `primitives` module to create a horizontal layout for the progress bar segments.\n\nThe `ProgressBar` component takes in two props: `value` and `max`. `value` is a number that represents the progress of the bar, while `max` is the total number of segments in the bar. The component also accepts any additional props that can be passed to the `Flex` primitive.\n\nThe component uses the `Array` constructor to create an array of length `max`, and then maps over it to create `max` number of `Flex` components. Each `Flex` component represents a segment of the progress bar. The `key` prop is set to the index of the segment in the array.\n\nThe `css` prop is used to style each `Flex` component. The `height` is set to 4 pixels, and the `borderRadius` is set to a large value to create a rounded rectangle shape. The `flex` property is set to 1 to allow the segments to fill the available space. The `background` property is set to a linear gradient that transitions from a `$neutralBorderHover` color to an `$accentSolid` color. The `backgroundSize` is set to 200% to allow the gradient to fill the entire segment. The `backgroundPosition` is set to `left` for segments that are filled, and `right` for segments that are unfilled. The `transition` property is set to `all 0.5s ease` to create a smooth animation when the progress changes.\n\nThe `ProgressBar` component can be used in a larger project to display progress for various tasks, such as file uploads, form submissions, or loading data. It can be customized by passing additional props to the `Flex` component, such as `justifyContent` or `alignItems`, to change the layout of the progress bar. Here is an example of how the `ProgressBar` component can be used:\n\n```\nimport ProgressBar from './ProgressBar'\n\nfunction UploadForm() {\n const [progress, setProgress] = useState(0)\n\n function handleUpload() {\n // code to upload file\n // update progress as file is uploaded\n setProgress(progress + 1)\n }\n\n return (\n \n )\n}\n```",
- "questions": "1. What does this code do?\n This code exports a React component called `ProgressBar` that renders a progress bar with a number of segments equal to the `max` prop and a number of filled segments equal to the `value` prop.\n\n2. What are the required props for this component?\n The required props for this component are `value`, which is a number representing the number of filled segments, and `max`, which is a number representing the total number of segments.\n\n3. What is the purpose of the `Flex` component being imported?\n The `Flex` component is being imported from a file located at `../primitives` and is used to create a flexbox container for the progress bar segments.",
- "checksum": "598bd5709cf49fd8ffc21460af29aad6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/QuantitySelector.json b/.autodoc/docs/json/ui/src/modal/QuantitySelector.json
deleted file mode 100644
index f8b7cb529..000000000
--- a/.autodoc/docs/json/ui/src/modal/QuantitySelector.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "QuantitySelector.tsx",
- "filePath": "ui/src/modal/QuantitySelector.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/QuantitySelector.tsx",
- "summary": "The `QuantitySelector` component is a reusable React component that provides a user interface for selecting a quantity within a given range. It takes in several props, including `max`, `min`, `quantity`, and `setQuantity`, which are used to determine the range of valid quantities and to update the selected quantity. \n\nThe component is composed of three main elements: two buttons for incrementing and decrementing the quantity, and an input field for displaying and editing the current quantity. The buttons are styled using the `QuantityButton` component, which is a styled version of the `Button` component from the `../primitives` directory. The input field is styled using the `QuantityInput` component, which is a styled version of the `input` HTML element.\n\nThe `QuantitySelector` component uses the `PseudoInput` component to group the buttons and input field together and apply additional styling. The `PseudoInput` component is a custom component that wraps the `div` HTML element and applies some additional styles to make it look like an input field.\n\nWhen the user clicks on the increment or decrement buttons, the `setQuantity` function is called with the new quantity value. The `onChange` and `onBlur` event handlers on the input field are used to update the quantity when the user types in a new value or leaves the input field. If the user enters an invalid value, such as a value outside of the valid range or a non-numeric value, the quantity is not updated.\n\nOverall, the `QuantitySelector` component provides a simple and reusable way to allow users to select a quantity within a given range. It can be used in a variety of contexts, such as in an e-commerce application for selecting the quantity of a product to purchase. \n\nExample usage:\n\n```\nimport QuantitySelector from './QuantitySelector'\n\nfunction ProductPage() {\n const [quantity, setQuantity] = useState(1)\n\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports a React component called `QuantitySelector` that renders a quantity selector UI element with buttons to increment and decrement the quantity and an input field to display and edit the quantity.\n\n2. What are the required props for the `QuantitySelector` component?\n- The `QuantitySelector` component requires four props: `max` (number), `min` (number), `quantity` (number), and `setQuantity` (function that takes a number as argument and returns void). It also accepts an optional `css` prop for custom styling.\n\n3. What external libraries or components are used in this code?\n- This code imports several components and libraries: `React` and `CSSProperties` from the `react` package, `Button` from a custom `../primitives` module, `PseudoInput` from another custom `../primitives/PseudoInput` module, `styled` from a custom `../../stitches.config` module, and `FontAwesomeIcon`, `faMinus`, and `faPlus` from the `@fortawesome/react-fontawesome` and `@fortawesome/free-solid-svg-icons` packages.",
- "checksum": "b8a536bb7ac3535e8e4dbbfa3ff0e1fa"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/SigninStep.json b/.autodoc/docs/json/ui/src/modal/SigninStep.json
deleted file mode 100644
index fa24de525..000000000
--- a/.autodoc/docs/json/ui/src/modal/SigninStep.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SigninStep.tsx",
- "filePath": "ui/src/modal/SigninStep.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/SigninStep.tsx",
- "summary": "The code above defines a React functional component called `SigninStep` that renders a sign-in step for the Blur application. The component imports the `FontAwesomeIcon` and `Flex` components from external libraries and the `Text` component from an internal library called `primitives`. It also imports the `faPenNib` icon from the `@fortawesome/free-solid-svg-icons` library and the `CSS` type from the `@stitches/react` library.\n\nThe `SigninStep` component takes a single prop called `css` of type `CSS`, which is used to style the component. The component renders a `Flex` container with a column direction, centered content, and a neutral text color. The container includes two `Text` components that display the sign-in message and a description of the approval process. Finally, the component renders a `FontAwesomeIcon` component that displays the `faPenNib` icon.\n\nThis component can be used in the larger project as a step in the sign-in process for the Blur application. It provides a simple and visually appealing interface for users to sign in and complete the approval process. The `css` prop allows for customization of the component's styling to fit the overall design of the application.\n\nExample usage:\n\n```jsx\nimport SigninStep from './SigninStep'\n\nfunction SigninPage() {\n return (\n Product Name
\nPrice: $10.00
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this component?\n - This component is a sign-in step for the Blur application, which displays a title, subtitle, and an icon.\n\n2. What libraries and dependencies are being used in this code?\n - This code is using the `@fortawesome/react-fontawesome`, `@fortawesome/free-solid-svg-icons`, `@stitches/react`, and `react` libraries.\n\n3. What are the props that can be passed to this component?\n - The only prop that can be passed to this component is `css`, which is of type `CSS`.",
- "checksum": "0b95cca0ba5f67d192fbaddad81e18d2"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/Stat.json b/.autodoc/docs/json/ui/src/modal/Stat.json
deleted file mode 100644
index e80a9c3ef..000000000
--- a/.autodoc/docs/json/ui/src/modal/Stat.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Stat.tsx",
- "filePath": "ui/src/modal/Stat.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/Stat.tsx",
- "summary": "The code defines a React component called `Stat` that renders a statistic with a label and a value. The component takes several props, including `label` (a string or React element), `value` (a string, number, or null), `symbol` (an optional string), `asNative` (a boolean indicating whether the value is a native cryptocurrency), `asWrapped` (a boolean indicating whether the value is a wrapped cryptocurrency), and `address` (an optional string representing the cryptocurrency address). \n\nThe component renders a `Flex` container with a light gray background, rounded corners, and padding. The container has two child elements: a `Flex` container for the label and a value element. The label is rendered as a child of the `Flex` container with some spacing. The value element is conditionally rendered based on the `asNative` and `asWrapped` props. If `asNative` is true and `asWrapped` is false, the `FormatCryptoCurrency` component is used to format the value as a native cryptocurrency. If `asWrapped` is true and `asNative` is false, the `FormatWrappedCurrency` component is used to format the value as a wrapped cryptocurrency. If neither `asNative` nor `asWrapped` is true, the value is rendered as a `Text` element with a default style and an optional ellipsis if the value is too long.\n\nThe `Stat` component also has a static `toString` method that returns a CSS class name that can be used to style the component. \n\nThis component can be used in a larger project to display various statistics related to cryptocurrencies. The `asNative` and `asWrapped` props allow the component to handle different types of cryptocurrencies, while the `symbol` and `address` props provide additional context for the value. The `Stat` component can be used multiple times in a single page or application to display different statistics. For example, it could be used to display the total value of a user's cryptocurrency holdings, the price of a specific cryptocurrency, or the amount of a cryptocurrency that has been staked. \n\nExample usage:\n\n```\n\n {tokens.map((token) => (\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a React functional component called `TokenLineItem` that renders a token with its details and an optional error message if it is not tradable on OpenSea.\n\n2. What are the required props for this component?\n- The only required prop for this component is `price`, which is a number representing the price of the token.\n\n3. What are some optional props that can be passed to this component?\n- Some optional props that can be passed to this component include `tokenDetails`, `collection`, `usdConversion`, `isSuspicious`, `isUnavailable`, `warning`, `currency`, `expires`, `sourceImg`, `css`, `showRoyalties`, and `quantity`. These props are used to customize the appearance and behavior of the token and its details.",
- "checksum": "6858e80dd1403eb6795f56de26d37432"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/TokenPrimitive.json b/.autodoc/docs/json/ui/src/modal/TokenPrimitive.json
deleted file mode 100644
index 04ae306ff..000000000
--- a/.autodoc/docs/json/ui/src/modal/TokenPrimitive.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TokenPrimitive.tsx",
- "filePath": "ui/src/modal/TokenPrimitive.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/TokenPrimitive.tsx",
- "summary": "The `TokenPrimitive` component is a React functional component that renders a token item or collection. It receives a set of props that define the item or collection to be rendered, such as `img`, `name`, `collection`, `currencyContract`, `currencyDecimals`, `currencySymbol`, `source`, `price`, `usdPrice`, `expires`, `warning`, `isOffer`, `isUnavailable`, `priceSubtitle`, `royaltiesBps`, and `quantity`. \n\nThe component uses the `styled` function from the `stitches.config` module to create a styled `img` component. It then renders a set of `Box`, `Flex`, `Text`, `Grid`, `FormatCurrency`, and `FormatCryptoCurrency` components from the `primitives` module, which are used to structure and format the content of the token item or collection. Additionally, the component renders an `InfoTooltip` component from the `primitives` module, which displays a tooltip with information about the creator royalties.\n\nThe `TokenPrimitive` component renders the token item or collection by first rendering a `Flex` component that displays the item or collection name and price subtitle. It then renders another `Flex` component that displays the item or collection image, name, collection, quantity, and expiration date. The component also renders a `Grid` component that displays the item or collection source, price, USD price, and warning. \n\nThe `TokenPrimitive` component is used in the larger project to display token items and collections in various parts of the application, such as in search results, user profiles, and marketplaces. For example, the component can be used to display a user's token collection in their profile page, or to display search results for a specific token item. \n\nExample usage:\n\n```jsx\nimport TokenPrimitive from './TokenPrimitive'\n\nconst token = {\n img: 'https://example.com/token.jpg',\n name: 'Token Name',\n collection: 'Token Collection',\n currencyContract: '0x1234567890abcdef',\n currencyDecimals: 18,\n currencySymbol: 'ETH',\n source: 'https://example.com/source.png',\n price: 1.23,\n usdPrice: 100.00,\n expires: '2022-01-01',\n warning: 'This token is not for sale',\n isOffer: false,\n isUnavailable: false,\n priceSubtitle: 'Token Price',\n royaltiesBps: 100,\n quantity: 10,\n}\n\nconst App = () => {\n return (\n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code file?\n- This code file defines a React functional component called `TokenPrimitive` that renders a token with various properties such as name, image, price, and source.\n\n2. What external dependencies does this code file use?\n- This code file imports several components and utilities from other files in the project, including `styled` from `stitches.config`, `Box`, `Flex`, `Text`, `Grid`, `FormatCurrency`, `FormatCryptoCurrency`, and `InfoTooltip` from `../primitives`.\n\n3. What props can be passed to the `TokenPrimitive` component?\n- The `TokenPrimitive` component accepts several optional props, including `img`, `name`, `collection`, `currencyContract`, `currencyDecimals`, `currencySymbol`, `source`, `price`, `usdPrice`, `expires`, `warning`, `isOffer`, `isUnavailable`, `priceSubtitle`, `royaltiesBps`, and `quantity`.",
- "checksum": "d41dd1b6e2f65b10a02524a2a7bda299"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/TransactionProgress.json b/.autodoc/docs/json/ui/src/modal/TransactionProgress.json
deleted file mode 100644
index eb6f1bf0a..000000000
--- a/.autodoc/docs/json/ui/src/modal/TransactionProgress.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TransactionProgress.tsx",
- "filePath": "ui/src/modal/TransactionProgress.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/TransactionProgress.tsx",
- "summary": "The `TransactionProgress` component is a React functional component that displays a progress bar for a transaction. It takes in two props: `fromImg`, which is a string representing the image source of the sender, and `toImgs`, which is an array of strings representing the image sources of the recipients. The component is built using the `Flex` and `Box` primitives from the `../primitives` module, which are used to create a flexible layout for the progress bar.\n\nThe `Img` component is a styled component that renders an image with a fixed width and height, a border radius of 4, and object-fit set to cover. It is used to display the sender and recipient images in the progress bar. The `ProgressDot` component is another styled component that renders a small circle with a border radius of 50%, a width and height of 5, and a background color. It is used to display the progress dots in the progress bar.\n\nThe `loadingStart`, `loadingMiddle`, and `loadingEnd` keyframes are CSS animations that define the animation for the progress dots. They use the `$neutralSolid` and `$accentText` colors from the `stitches.config` module to create a pulsing effect on the dots.\n\nThe `TransactionProgress` component renders a `Flex` container with the `fromImg` image on the left, the progress dots in the middle, and the `toImgs` images on the right. The progress dots are rendered using the `ProgressDot` component with the `loadingStart`, `loadingMiddle`, and `loadingEnd` animations applied to them. The `toImgs` images are rendered using the `Img` component in a loop.\n\nThis component can be used in a larger project to display the progress of a transaction, such as a payment or transfer of funds. It provides a visual representation of the transaction progress and can be customized with different images and colors to match the project's branding. Here is an example of how the `TransactionProgress` component can be used:\n\n```\n\n
\n )\n}\n```\n\nIn this example, the `TokenStatsHeader` component is used in the `App` component to render the header section for a token or collection. The `token` and `collection` objects are passed as props to the `TokenStatsHeader` component.",
- "questions": "1. What are the dependencies of this file?\n- This file imports `useTokens` and `useCollections` from a file located two directories up, and `React`, `FC`, and `styled` from other packages.\n\n2. What is the purpose of the `TokenStatsHeader` component?\n- The `TokenStatsHeader` component takes in a `token` and a `collection` as props and returns a styled box containing information about either the token or the collection.\n\n3. What is the purpose of the `optimizeImage` function?\n- The `optimizeImage` function takes in an image URL and a size and returns a new URL with the size appended to it, which is used to display the image in the `Img` component.",
- "checksum": "0fcdfe8f146737d22d3e75576766fb60"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/bid/TokenStatsItem.json b/.autodoc/docs/json/ui/src/modal/bid/TokenStatsItem.json
deleted file mode 100644
index 3ba0f25c2..000000000
--- a/.autodoc/docs/json/ui/src/modal/bid/TokenStatsItem.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TokenStatsItem.tsx",
- "filePath": "ui/src/modal/bid/TokenStatsItem.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/bid/TokenStatsItem.tsx",
- "summary": "The `TokenStatsItem` component is a React functional component that renders a single item in a list of tokens. It takes two props: `token` and `collection`. The `token` prop is an optional object that contains information about the token being displayed, while the `collection` prop is a required object that contains information about the collection that the token belongs to.\n\nThe component uses the `optimizeImage` function from the `lib/optimizeImage` module to optimize the image that is displayed for the token. If the `token` prop is defined and contains an `image` property, that image is used. Otherwise, the `image` property of the `collection` prop is used. The `optimizeImage` function resizes the image to a maximum width of 600 pixels.\n\nThe component renders a `Box` component from the `primitives` module, which contains a `Text` component that displays the word \"Item\" as a subtitle. Below that, an `Img` component is rendered, which displays the optimized image for the token. If the image is not available, the `Img` component is hidden. The `Img` component is styled to have a width of 100% on small screens, and a fixed height and width of 150 pixels on larger screens.\n\nBelow the image, a `Text` component is rendered that displays the name of the token. If the `token` prop is defined and contains a `name` property, that name is used. Otherwise, the `tokenId` property of the `token` prop is used. The `Text` component is styled to have a font size of \"h6\" and to be ellipsified if it overflows its container.\n\nFinally, a `Box` component is rendered that contains a `Text` component that displays the name of the collection that the token belongs to. The `Text` component is styled to have a font size of \"subtitle2\" and to be ellipsified if it overflows its container.\n\nThis component is likely used in a larger project that displays a list of tokens and their associated information. The `TokenStatsItem` component is responsible for rendering a single item in that list, and is likely used in a loop to render multiple items. The component is designed to be responsive, with the image and text sizes adjusting based on the screen size.",
- "questions": "1. What are the dependencies of this file?\n- This file imports `useTokens` and `useCollections` from a file located two levels up in the directory, as well as `Box` and `Text` from a file located one level up in the directory. It also imports `React` and `FC` from the `react` library, and `styled` from a file located in the `stitches.config` directory.\n\n2. What is the purpose of the `optimizeImage` function?\n- The `optimizeImage` function takes an image URL and a size parameter, and returns a new URL that points to an optimized version of the image with the specified size. This is used to ensure that images are not too large and do not slow down the rendering of the page.\n\n3. What is the expected shape of the `Props` object?\n- The `Props` object is expected to have two properties: `token`, which is an optional object that has a `token` property that is also optional, and `collection`, which is a required object. The `token` object is expected to have a `name` and `tokenId` property, and the `collection` object is expected to have a `name` property.",
- "checksum": "de9b14727747ad1becaa03e29763be01"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/bid/TransactionBidDetails.json b/.autodoc/docs/json/ui/src/modal/bid/TransactionBidDetails.json
deleted file mode 100644
index 83f0b1d17..000000000
--- a/.autodoc/docs/json/ui/src/modal/bid/TransactionBidDetails.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TransactionBidDetails.tsx",
- "filePath": "ui/src/modal/bid/TransactionBidDetails.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/bid/TransactionBidDetails.tsx",
- "summary": "The `TransactionBidDetails` component is a React functional component that renders a section of a user interface for displaying details about a bid on a token. It takes in three props: `token`, `collection`, and `bidData`. \n\nThe `token` prop is an object that contains information about the token being bid on. The `collection` prop is an object that contains information about the collection that the token belongs to. The `bidData` prop is an object that contains information about the bid, including the offer price, the currency used for the bid, and the expiration time of the bid.\n\nThe component uses several other components and hooks from the project to render the UI. The `TokenStatsHeader` component is used to display information about the token and collection at the top of the section. The `SelectedAttribute` component is used to display information about the attribute of the token being bid on. The `FormatWrappedCurrency` component is used to format the offer price of the bid.\n\nThe `useState` hook is used to manage the state of the `value` variable, which is used to store the formatted offer price of the bid. The `useTimeSince` hook is used to calculate the time since the bid expiration time.\n\nThe component renders a `Flex` container that contains the `TokenStatsHeader` component and a `Box` container. The `Box` container contains the `SelectedAttribute` component and a `Flex` container that displays the offer price and expiration time of the bid. The `Flex` container uses the `FormatWrappedCurrency` component to display the offer price and the `useTimeSince` hook to display the expiration time.\n\nThis component can be used in a larger project to display details about a bid on a token. It can be used in conjunction with other components and hooks from the project to create a complete user interface for buying and selling tokens. For example, it could be used in a bidding interface that allows users to bid on tokens in a collection.",
- "questions": "1. What are the required props for the `TransactionBidDetails` component?\n- The required props for the `TransactionBidDetails` component are `collection` of type `NonNullable\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `CurrencySelector` that renders a dropdown menu for selecting a cryptocurrency.\n\n2. What are the required props for this component?\n- The required props are `currencies`, an array of `Currency` objects, and `currency` and `setCurrency`, which represent the currently selected currency and a function for updating it, respectively.\n\n3. What external dependencies does this code rely on?\n- This code relies on the `@stitches/react` library for CSS styling and the `../../primitives` and `../../types/Currency` modules for other components and types, respectively.",
- "checksum": "55b670cf1d3ee0e343a929f2a6df7c90"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/list/ListingStat.json b/.autodoc/docs/json/ui/src/modal/list/ListingStat.json
deleted file mode 100644
index d9de473ee..000000000
--- a/.autodoc/docs/json/ui/src/modal/list/ListingStat.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ListingStat.tsx",
- "filePath": "ui/src/modal/list/ListingStat.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/list/ListingStat.tsx",
- "summary": "This code defines a React component called `ListingStat` that renders a single listing in a marketplace. The component takes in several props, including the listing object, the URL of an image for the marketplace, and a currency object. \n\nThe component renders a `Flex` container with a column direction, which contains two child elements: a `Flex` container with a row direction, and a `Text` element. The row container contains two child elements: a `FormatCryptoCurrency` component, which formats the price of the listing in the specified currency, and an `Img` element, which displays the marketplace image. The `Text` element displays the expiration time of the listing, or \"No Expiration\" if there is no expiration time.\n\nThe `styled` function from the `stitches.config` module is used to create a styled `Img` element with a fixed width and height. The `useTimeSince` hook from the `hooks` module is used to calculate the time since the listing's expiration time, if it exists.\n\nThe `ListingStat` component is exported as the default export of the module. The `toString` method is also defined on the component, which returns a CSS class name that can be used to style the component.\n\nThis component can be used in a larger project to display individual listings in a marketplace, with the price, expiration time, and marketplace image. It can be used in conjunction with other components to build a larger marketplace UI. For example, it could be used in a list view of all marketplace listings, or in a modal that displays more detailed information about a single listing. \n\nHere is an example of how the `ListingStat` component could be used in a larger React application:\n\n```\nimport React from 'react';\nimport ListingStat from './ListingStat';\n\nfunction Marketplace() {\n const listings = [\n {\n id: 1,\n weiPrice: 1000000000000000000,\n expirationTime: Date.now() + 86400000,\n },\n {\n id: 2,\n weiPrice: 500000000000000000,\n expirationTime: null,\n },\n ];\n\n return (\n Selected currency: {selectedCurrency.symbol}
\n\n {listings.map((listing) => (\n
\n );\n}\n```\n\nThis example defines a `Marketplace` component that renders a list of `ListingStat` components, passing in sample data for the listings, marketplace image, and currency. The `key` prop is used to ensure that each `ListingStat` component has a unique identifier.",
- "questions": "1. What is the purpose of this code and what does it do?\n This code defines a React component called `ListingStat` that renders a listing with a price and expiration time, along with an image. It uses various imported components and hooks to achieve this.\n\n2. What props does the `ListingStat` component expect and what are their types?\n The `ListingStat` component expects three props: `listing` of type `Listings[0]`, `marketImg` of type `string`, and `currency` of type `Currency`. `Listings` and `Currency` are imported types from other files.\n\n3. What is the significance of the `ListingStat.toString` method?\n The `ListingStat.toString` method returns a CSS class name that can be used to style the component. This is useful for styling components with CSS-in-JS libraries like `styled-components` or `stitches`.",
- "checksum": "090869fbf1b464771f6415a0a5cb87bd"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/list/MarketplacePriceInput.json b/.autodoc/docs/json/ui/src/modal/list/MarketplacePriceInput.json
deleted file mode 100644
index c67787060..000000000
--- a/.autodoc/docs/json/ui/src/modal/list/MarketplacePriceInput.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "MarketplacePriceInput.tsx",
- "filePath": "ui/src/modal/list/MarketplacePriceInput.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/list/MarketplacePriceInput.tsx",
- "summary": "The `MarketplacePriceInput` component is a React component that renders an input field for a marketplace listing price. It takes in several props, including the marketplace object, the collection object, the currency object, an array of currencies, and several callback functions. \n\nThe component calculates the profit of the listing based on the marketplace fee, the collection royalties, the true price of the listing, and the quantity of the listing. It then renders the input field, the currency selector, and the profit and USD price of the listing. \n\nThe component also conditionally renders the marketplace image, the currency icon and symbol, and the currency selector based on the `nativeOnly` and `currencies` props. If `nativeOnly` is true and there is more than one currency in the `currencies` array, the component renders the `CurrencySelector` component. Otherwise, it renders the currency icon and symbol. \n\nThis component can be used in a larger project that involves creating a marketplace for buying and selling items. It can be used to allow users to input the listing price for their items and to calculate the profit and USD price of the listing. The component can also be customized to fit the design and functionality of the larger project. \n\nExample usage:\n\n```\nimport MarketplacePriceInput from './MarketplacePriceInput'\n\nconst MyComponent = () => {\n const marketplace = { /* marketplace object */ }\n const collection = { /* collection object */ }\n const currency = { /* currency object */ }\n const currencies = [ /* array of currencies */ ]\n\n const handleCurrencyChange = (currency) => {\n // handle currency change\n }\n\n const handlePriceChange = (e) => {\n // handle price change\n }\n\n const handlePriceBlur = (e) => {\n // handle price blur\n }\n\n return (\n \n {marketplaces.map((marketplace) => (\n handleSelection(marketplace)}\n />\n ))}\n
\n )\n}\n\nexport default MarketplaceList\n```\n\nIn this example, the `MarketplaceList` component renders a list of marketplaces using the `MarketplaceToggle` component. The `marketplaces` array contains information about each marketplace, including its name, image URL, and fee percentage. The `selectedMarketplaces` state variable is an array that keeps track of which marketplaces are currently selected.\n\nThe `handleSelection` function is called when the user clicks on a toggle switch. If the selected marketplace is already in the `selectedMarketplaces` array, it is removed. Otherwise, it is added to the array.\n\nOverall, the `MarketplaceToggle` component is a reusable component that can be used to render a toggle switch for a marketplace in a larger project. It is flexible and can be customized to fit the specific needs of the project.",
- "questions": "1. What is the purpose of this code?\n This code defines a React component called `MarketplaceToggle` that renders a toggle switch for a marketplace with its name, image, and fee percentage.\n\n2. What are the props expected by the `MarketplaceToggle` component?\n The `MarketplaceToggle` component expects two props: `marketplace`, which is an object containing information about the marketplace being toggled, and `onSelection`, which is a function that gets called when the toggle switch is clicked.\n\n3. What are the dependencies of this code?\n This code depends on the `React` library and several components from a custom `primitives` library, as well as a custom `useMarketplaces` hook that provides information about marketplaces.",
- "checksum": "d50a38338eef3a20e2b0735bc21370e8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/list/Token.json b/.autodoc/docs/json/ui/src/modal/list/Token.json
deleted file mode 100644
index 5bdeb0600..000000000
--- a/.autodoc/docs/json/ui/src/modal/list/Token.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Token.tsx",
- "filePath": "ui/src/modal/list/Token.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/list/Token.tsx",
- "summary": "The `Token` component is a React functional component that renders a single NFT (non-fungible token) item. It receives two optional props: `token` and `collection`. The `token` prop is an object that contains information about the NFT, such as its name, image, and collection. The `collection` prop is an object that contains information about the collection that the NFT belongs to, such as its name and image.\n\nThe component first uses the `optimizeImage` function from the `lib` directory to optimize the image of the NFT. This function takes an image URL and a maximum width as arguments and returns a new URL that points to an optimized version of the image. The optimized image is then used as the source of an `Img` component, which is a styled `img` HTML element.\n\nThe `Token` component then renders a `Box` component that contains the `Img` component, the name of the NFT, and the name of the collection that the NFT belongs to. The `Box` component is styled to have a fixed width of 120 pixels and a margin of 4 pixels on the right side. On screens with a width of 600 pixels or more (using the `@bp1` media query), the `Box` component has a width of 100% and no margin.\n\nThe name of the NFT is rendered as an `h6` HTML element with ellipsis overflow and a flex property of 1, which allows it to take up the remaining horizontal space in the `Box` component. If the `token` prop is not provided or does not contain a name, the component renders the NFT's `tokenId` instead.\n\nThe name of the collection is rendered as a `Text` component with a `subtitle2` style and ellipsis overflow. If the `token` prop is not provided or does not contain a collection name, the component does not render anything.\n\nThis component can be used in a larger project that displays a collection of NFTs, such as a marketplace or a gallery. It can be used to render a grid of NFT items, each with its own name and image. The `Token` component can be customized by passing different `token` and `collection` props, or by modifying its styles using the `styled` function from the `stitches.config` file. For example, the `Img` component can be styled to have a different border radius or object fit.",
- "questions": "1. What are the dependencies of this file?\n- The file imports `useTokens` and `useCollections` from a file located two directories up, and `React`, `FC`, and `styled` from other packages.\n\n2. What is the purpose of the `optimizeImage` function?\n- The `optimizeImage` function takes an image URL and a size and returns a new URL that points to an optimized version of the image with the specified size.\n\n3. What is the purpose of the `Token` component?\n- The `Token` component takes a `token` and a `collection` as props and renders an image, a name, and a collection name for the token. It also uses the `optimizeImage` function to optimize the image URL.",
- "checksum": "ee092a310d6a901df46e78ff3d512802"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/list/TokenListingDetails.json b/.autodoc/docs/json/ui/src/modal/list/TokenListingDetails.json
deleted file mode 100644
index a434f03f0..000000000
--- a/.autodoc/docs/json/ui/src/modal/list/TokenListingDetails.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "TokenListingDetails.tsx",
- "filePath": "ui/src/modal/list/TokenListingDetails.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/list/TokenListingDetails.tsx",
- "summary": "The `TokenListingDetails` component is a React functional component that renders a token and its associated listing data. It takes in several props, including a `token` object, a `collection` object, an array of `listingData`, and a `currency` object. \n\nThe `Token` component is imported from a file called `Token` and is used to render the token. The `ListingStat` component is imported from a file called `ListingStat` and is used to render the listing data. \n\nThe component is wrapped in a `Flex` component from a file called `Flex` and a `Box` component from a file called `Box`. These components are used to create a flexible layout that adjusts based on the screen size. \n\nThe `TokenListingDetails` component maps over the `listingData` array and renders a `ListingStat` component for each item in the array. The `ListingStat` component takes in several props, including a `listing` object, a `marketImg` string, and a `currency` object. \n\nThe `TokenListingDetails` component is exported as the default export of the file. This allows other files to import and use the component in their own React components. \n\nThis component is likely used in a larger project that involves displaying tokens and their associated listing data. It could be used in a marketplace application where users can buy and sell tokens. \n\nExample usage:\n\n```\nimport TokenListingDetails from './TokenListingDetails'\n\nfunction App() {\n const token = { /* token object */ }\n const collection = { /* collection object */ }\n const listingData = [ /* array of listing data objects */ ]\n const currency = { /* currency object */ }\n\n return (\n \n
\n )\n}\n```\n\nIn this example, `MyComponent` renders an `ItemToggle` component and either an `ItemList` or a `CurrencyConverter` component, depending on the value of `isItemsToggled`. The `currency` prop is passed down from the `useChainCurrency` hook. The `isItemsToggled` and `setIsItemsToggled` props are used to manage the state of the toggle group.",
- "questions": "1. What is the purpose of the `ItemToggle` component?\n- The `ItemToggle` component is a toggle group that allows the user to switch between displaying items or currency.\n\n2. What is the significance of the `useChainCurrency` hook?\n- The `useChainCurrency` hook is used to retrieve the currency data for the current chain.\n\n3. What is the expected behavior when the user clicks on one of the toggle buttons?\n- When the user clicks on one of the toggle buttons, the `isItemsToggled` state is updated to reflect the user's selection. If the user selects \"items\", `isItemsToggled` is set to `true`, otherwise it is set to `false`.",
- "checksum": "342205285599ca56b355a02ed5e322c3"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/modal/sweep/SweepItem.json b/.autodoc/docs/json/ui/src/modal/sweep/SweepItem.json
deleted file mode 100644
index ceb3e1edb..000000000
--- a/.autodoc/docs/json/ui/src/modal/sweep/SweepItem.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "SweepItem.tsx",
- "filePath": "ui/src/modal/sweep/SweepItem.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/modal/sweep/SweepItem.tsx",
- "summary": "The code defines a React functional component called `SweepItem`. This component takes in four props: `name`, `image`, `amount`, and `currency`. The `name` prop is a string that represents the name of the item being swept. The `image` prop is a string that represents the URL of the image of the item being swept. The `amount` prop is a number that represents the amount of the item being swept. The `currency` prop is an object that is returned from the `useChainCurrency` hook.\n\nThe purpose of this component is to display a single item that is being swept. The item is displayed as a small card with the item's image, name, and amount. The card is wrapped in a tooltip that displays the item's name when the user hovers over the card.\n\nThe component uses several other components from the `primitives` module, including `Flex`, `FormatCryptoCurrency`, `Img`, and `Text`. The `Flex` component is used to create a container for the card that allows for flexible layout. The `Img` component is used to display the item's image. The `Text` component is used to display the item's name in the tooltip. The `FormatCryptoCurrency` component is used to format the item's amount as a cryptocurrency value.\n\nThe `SweepItem` component is likely used in a larger project that involves sweeping multiple items. It could be used in a wallet application that allows users to sweep multiple types of cryptocurrencies into their wallet. The component could be reused for each type of cryptocurrency being swept, with the `name`, `image`, `amount`, and `currency` props being passed in for each type.",
- "questions": "1. What is the purpose of the `useChainCurrency` hook and how is it used in this code?\n- The `useChainCurrency` hook is used to retrieve information about a specific cryptocurrency chain, and it is passed as a prop to the `SweepItem` component.\n2. What is the expected format of the `image` prop and how is it used in this code?\n- The `image` prop is expected to be a string representing the URL of an image, and it is used as the `src` attribute of an `Img` component.\n3. What is the purpose of the `Tooltip` component and how is it configured in this code?\n- The `Tooltip` component is used to display a tooltip when the user hovers over the `Flex` component. It is configured to display the `name` prop as the content of the tooltip, and to position the tooltip above the `Flex` component with a small offset.",
- "checksum": "58b3696ef5985e06af6437449cad5971"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/Anchor.json b/.autodoc/docs/json/ui/src/primitives/Anchor.json
deleted file mode 100644
index 97c7c704a..000000000
--- a/.autodoc/docs/json/ui/src/primitives/Anchor.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Anchor.tsx",
- "filePath": "ui/src/primitives/Anchor.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/Anchor.tsx",
- "summary": "This code exports a styled anchor component that can be used in a React project. The component is defined using the `styled` function from the `stitches.config` module, which allows for the creation of custom styles for HTML elements. The resulting `StyledAnchor` component has several variants that can be used to customize its appearance, including color and font weight.\n\nThe `StyledAnchor` component is defined with default styles that include a transparent background, a pointer cursor, and a font size of 16 pixels. The font family is set to `$body`, which is a variable defined in the `stitches.config` module. The color and text decoration are set to `inherit`, which means they will inherit the styles of the parent element.\n\nThe `StyledAnchor` component also has a `$$focusColor` variable that is defined as `$colors$neutralTextContrast`. This variable is used to set the color of the component when it is in focus. When the component is in focus, it will have a border radius of 4 pixels and a box shadow that is 2 pixels wide and the color of `$$focusColor`.\n\nThe `StyledAnchor` component has three color variants: `primary`, `gray`, and `error`. The `primary` variant has a color of `$accentText` and changes to `$accentSolidHover` when hovered over. The `gray` variant has a color of `$neutralText` and changes to `$accentText` when hovered over. The `error` variant has a color of `$errorAccent`.\n\nThe `StyledAnchor` component also has two weight variants: `heavy` and `medium`. The `heavy` variant has a font weight of 700, while the `medium` variant has a font weight of 500.\n\nFinally, the `StyledAnchor` component is exported using the `forwardRef` function from React. This allows the component to forward a ref to its child component, which can be useful for accessing the DOM node of the child component. The `StyledAnchor` component takes in a `children` prop and any other props that are passed to it, and renders an anchor element with the `StyledAnchor` styles applied to it.\n\nOverall, this code provides a customizable anchor component that can be used in a React project. The component has several variants that can be used to customize its appearance, and it can forward a ref to its child component if needed. Here is an example of how the `StyledAnchor` component could be used in a React project:\n\n```\nimport React from 'react'\nimport StyledAnchor from './StyledAnchor'\n\nfunction MyComponent() {\n return (\n \n Click me! \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports a styled anchor component using React and Stitches CSS-in-JS library.\n\n2. What are the available variants for the styled anchor component?\n- The available variants are `color` and `weight`. `color` has three options: `primary`, `gray`, and `error`. `weight` has two options: `heavy` and `medium`.\n\n3. What is the purpose of the `forwardRef` function in this code?\n- The `forwardRef` function is used to forward the `ref` attribute from the parent component to the `StyledAnchor` component, allowing the parent component to access the `ref` of the `StyledAnchor`.",
- "checksum": "9d70ab440cb1d89d1202f9c7ba73c6f8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/Box.json b/.autodoc/docs/json/ui/src/primitives/Box.json
deleted file mode 100644
index 85e5ccc4c..000000000
--- a/.autodoc/docs/json/ui/src/primitives/Box.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Box.tsx",
- "filePath": "ui/src/primitives/Box.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/Box.tsx",
- "summary": "This code is a styled component that creates a div element with specific CSS properties. The purpose of this code is to provide a reusable styled component that can be used throughout the larger project. \n\nThe `import` statement at the beginning of the code imports the `styled` function from the `stitches.config` file located in a parent directory. This function is used to create a styled component by passing in the HTML element to be styled (in this case, a div) and an object containing CSS properties and their values. \n\nThe CSS properties included in this object are `boxSizing`, `borderStyle`, and `borderWidth`. The `boxSizing` property sets the sizing behavior of the element's box model, while `borderStyle` and `borderWidth` set the style and width of the element's border. \n\nBy exporting this styled component as the default export of this file, it can be easily imported and used in other files within the project. For example, if a component needs a div element with the same styling as defined in this file, it can simply import this component and use it like so:\n\n```\nimport StyledDiv from './path/to/this/file'\n\nfunction MyComponent() {\n return (\n Collapsible content goes here
\n\n
\n )\n}\n```\n\nIn this example, the `DatePicker` component is used to render a date picker. The `value` prop is set to the `date` state variable, and the `onChange` prop is set to a function that updates the `date` state variable when the user selects a new date.",
- "questions": "1. What is the purpose of this code?\n - This code exports a custom input component that wraps around the `Flatpickr` component from the `react-flatpickr` library, and maps the `onChange`, `value`, `defaultValue`, and `options` props from `Flatpickr` to the custom input component.\n\n2. What dependencies are required for this code to work?\n - This code requires the `react`, `react-dom`, and `react-flatpickr` libraries to be installed.\n\n3. What is the expected format for the `options` prop?\n - The `options` prop is an object that can contain any of the options supported by the `Flatpickr` component, with the addition of a `dateFormat` option that is set to `'m/d/Y h:i K'` by default.",
- "checksum": "f4c5eac8621d7fc8612e9986d23999b8"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/Dialog.json b/.autodoc/docs/json/ui/src/primitives/Dialog.json
deleted file mode 100644
index 935f799b3..000000000
--- a/.autodoc/docs/json/ui/src/primitives/Dialog.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Dialog.tsx",
- "filePath": "ui/src/primitives/Dialog.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/Dialog.tsx",
- "summary": "The code is a React component that provides a customizable dialog box that can be used in a larger project. The dialog box is composed of two main components: the `Overlay` and the `Content`. The `Overlay` is a full-screen, semi-transparent background that appears behind the `Content` when the dialog box is open. The `Content` is the actual dialog box that appears on top of the `Overlay`. \n\nThe `Dialog` component is the main component that wraps the `Overlay` and `Content` components. It takes in several props, including `trigger`, `portalProps`, `onOpenChange`, `open`, and `size`. The `trigger` prop is the element that triggers the opening of the dialog box. The `portalProps` prop is an object that contains props that are passed to the `DialogPrimitive.DialogPortal` component. The `onOpenChange` prop is a callback function that is called when the dialog box is opened or closed. The `open` prop is a boolean that determines whether the dialog box is open or closed. The `size` prop is an enum that determines the size of the dialog box. \n\nThe `AnimatedOverlay` and `AnimatedContent` components are higher-order components that wrap the `Overlay` and `Content` components, respectively. They add animation to the opening and closing of the dialog box. The `StyledAnimatedContent` component is a styled version of the `AnimatedContent` component. \n\nThe `useMediaQuery` hook is used to determine whether the screen size is less than or equal to 520px. If the screen size is less than or equal to 520px, the dialog box is displayed differently than if the screen size is greater than 520px. \n\nOverall, this code provides a customizable dialog box that can be used in a larger project. It is flexible and can be used in a variety of contexts. Below is an example of how the `Dialog` component can be used:\n\n```\nimport { Dialog } from './Dialog'\n\nfunction App() {\n const [open, setOpen] = useState(false)\n\n return (\n \n \n Open Dialog}\n onOpenChange={(open) => setOpen(open)}\n open={open}\n size={ModalSize.MD}\n >\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code defines a Dialog component that can be used to create modal dialogs in a React application.\n\n2. What external libraries or dependencies does this code use?\n- This code uses several external libraries and dependencies, including Stitches for styling, Radix UI for dialog components, React for building the UI, and Framer Motion for animations.\n\n3. What props can be passed to the Dialog component?\n- The Dialog component accepts several props, including trigger (the element that triggers the dialog), portalProps (props to pass to the dialog portal), onOpenChange (a callback function that is called when the dialog is opened or closed), open (a boolean indicating whether the dialog is open or closed), and size (an enum indicating the size of the dialog).",
- "checksum": "45818001044040e0fa488b7f6e557cf7"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/ErrorWell.json b/.autodoc/docs/json/ui/src/primitives/ErrorWell.json
deleted file mode 100644
index 34ddeb19e..000000000
--- a/.autodoc/docs/json/ui/src/primitives/ErrorWell.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ErrorWell.tsx",
- "filePath": "ui/src/primitives/ErrorWell.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/ErrorWell.tsx",
- "summary": "The code above defines a React component called `ErrorWell` that renders an error message with an icon. The component takes two props: `message` and `css`. The `message` prop is an optional string that represents the error message to be displayed. If no message is provided, a default message will be displayed. The `css` prop is an object that contains CSS styles to be applied to the component.\n\nThe component is composed of two child components: `Flex` and `Text`. The `Flex` component is a custom component that renders a flexible container with a set of predefined styles. The `Text` component is another custom component that renders text with a set of predefined styles.\n\nThe `ErrorWell` component renders a `Flex` component with the following styles:\n\n- `color: '$errorAccent'`: sets the text color to a predefined error accent color.\n- `p: '$4'`: sets the padding to a predefined value.\n- `gap: '$2'`: sets the gap between child elements to a predefined value.\n- `background: '$wellBackground'`: sets the background color to a predefined well background color.\n- `...css`: applies any additional styles passed in through the `css` prop.\n\nThe `Flex` component has one child element, a `FontAwesomeIcon` component from the `@fortawesome/react-fontawesome` library. This component renders an icon of a circle with an exclamation point inside. The icon is imported from the `@fortawesome/free-solid-svg-icons` library.\n\nThe `Flex` component also has a second child element, a `Text` component. This component renders the error message passed in through the `message` prop, or a default message if no message is provided. The text is styled using the `style` prop with a value of \"body3\" and the `color` prop with a value of \"errorLight\".\n\nThis component can be used in the larger project to display error messages to users in a consistent and visually appealing way. Developers can pass in custom styles through the `css` prop to customize the appearance of the error message. Here is an example of how the component can be used:\n\n```\nDialog Title
\nDialog content goes here.
\n \n\n
\n )\n}\n\nexport default Header\n```\n\nIn this example, the `EthLogo` component is used to display the Ethereum logo next to the application name in the header of the page.",
- "questions": "1. What is the purpose of this code?\n This code defines a React component called `EthLogo` that displays one of three different Ethereum icons based on the current theme.\n\n2. What is the `ThemeContext` and where does it come from?\n The `ThemeContext` is imported from a file called `ReservoirKitProvider` located in the parent directory. It is used to access the current theme of the application.\n\n3. What is the `ReservoirKitThemeContext` and how is it used?\n The `ReservoirKitThemeContext` is imported from a file called `stitches.config` located in the parent directory. It is used to define the type of the `ethIcon` property in the theme object, which is then used to determine which Ethereum icon to display in the `EthLogo` component.",
- "checksum": "f4ae3c5bef2bfd069bfbdfa421bab1a5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/Flex.json b/.autodoc/docs/json/ui/src/primitives/Flex.json
deleted file mode 100644
index cd17659a7..000000000
--- a/.autodoc/docs/json/ui/src/primitives/Flex.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Flex.tsx",
- "filePath": "ui/src/primitives/Flex.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/Flex.tsx",
- "summary": "This code defines a set of CSS properties for a flexible container element using the Stitches library. The `flexCss` object contains properties for `display`, `boxSizing`, `borderStyle`, and `borderWidth`, as well as several variants for `align`, `justify`, `direction`, and `wrap`. These variants allow for different alignment, justification, direction, and wrapping options for the flexible container element.\n\nThe `styled` function from the Stitches library is used to create two styled components: a default `div` element and an `AnimatedFlex` component that uses the `motion` library from Framer Motion. Both components use the `flexCss` object to define their CSS properties.\n\nThis code can be used in the larger project to create flexible container elements with different alignment, justification, direction, and wrapping options. For example, the `AnimatedFlex` component can be used to create animated flexible container elements with the same set of options. Here is an example of how the `AnimatedFlex` component can be used:\n\n```\nimport { AnimatedFlex } from 'zoo'\n\nconst MyComponent = () => {\n return (\n My Ethereum App
\n\n
\n )\n}\n```\n\nThis will display the formatted cryptocurrency amount along with the corresponding icon for Ethereum (ETH).",
- "questions": "1. What is the purpose of the `FormatCryptoCurrency` component?\n- The `FormatCryptoCurrency` component is used to format and display cryptocurrency amounts along with their corresponding icons and symbols.\n\n2. What external libraries or dependencies does this code use?\n- This code imports several external libraries and dependencies, including `FormatCrypto`, `React`, `ethers` from the `constants` module, `CryptoCurrencyIcon`, `useNetwork` from the `wagmi` module, `Tooltip`, and `Anchor`.\n\n3. What is the significance of the `blockExplorerBaseUrl` variable?\n- The `blockExplorerBaseUrl` variable is used to determine the base URL for the block explorer associated with the active blockchain network. If no block explorer is associated with the network, the default URL is set to `https://etherscan.io`.",
- "checksum": "c7b0bf0d225cfc18747f453682a9f40e"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/FormatCurrency.json b/.autodoc/docs/json/ui/src/primitives/FormatCurrency.json
deleted file mode 100644
index 9c4d07305..000000000
--- a/.autodoc/docs/json/ui/src/primitives/FormatCurrency.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "FormatCurrency.tsx",
- "filePath": "ui/src/primitives/FormatCurrency.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/FormatCurrency.tsx",
- "summary": "The `FormatCurrency` component is a React functional component that formats a given amount of money into a currency format. It takes in a `Props` object that contains the `amount` to be formatted, the `currency` to format the amount in, and the `maximumFractionDigits` to be displayed. \n\nThe `FormatCurrency` component uses the `useState` and `useEffect` hooks to manage the state of the formatted value. The `useState` hook initializes the `formattedValue` state to an empty string. The `useEffect` hook is used to update the `formattedValue` state whenever the `amount` or `maximumFractionDigits` props change. \n\nThe `useEffect` hook first checks if the `amount` prop is truthy. If it is, it calculates the lowest possible value based on the `maximumFractionDigits` prop and checks if the `amount` is less than that value. If the `amount` is less than the lowest possible value, the `formattedValue` state is set to `<` concatenated with the formatted lowest possible value. Otherwise, the `amount` is formatted using the `Intl.NumberFormat` constructor and the `formattedValue` state is set to the formatted amount. If the `amount` prop is falsy, the `formattedValue` state is set to an empty string.\n\nFinally, the `FormatCurrency` component returns a `Text` component with the `formattedValue` state as its child. The `Text` component also receives any additional props passed to the `FormatCurrency` component and sets its `style` and `color` props to default values if they are not provided.\n\nThis component can be used in a larger project to format currency values in a consistent and localized way. For example, it can be used to format prices in an e-commerce website or financial application. Here is an example usage of the `FormatCurrency` component:\n\n```\nItem 1
\n Item 2
\n Item 3
\n Item 1
\n Item 2
\n Item 3
\n Item 1
\n Item 2
\n Item 3
\n \n \n
\n )\n}\n```\n\nIn the example above, the `Img` component is used to display an image with the `src` attribute set to `\"https://example.com/image.jpg\"` and the `alt` attribute set to `\"Example Image\"`. If the image fails to load, the `Img` component will display a placeholder icon instead.",
- "questions": "1. What does this code do?\n This code exports a React component called `Img` that renders an image. If the image fails to load, it displays a fallback icon instead.\n\n2. What dependencies does this code have?\n This code imports several dependencies, including `@fortawesome/free-solid-svg-icons`, `@fortawesome/react-fontawesome`, `@stitches/react`, and `react`. It also uses the `useState` and `useEffect` hooks from `react`.\n\n3. What is the purpose of the `useEffect` hook in this code?\n The `useEffect` hook is used to reset the `imageBroken` state to `false` whenever the `src` prop changes. This ensures that the fallback icon is only displayed when the image fails to load, not when the `src` prop is updated.",
- "checksum": "a02e8377184e28798124195b18d88b8c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/InfoTooltip.json b/.autodoc/docs/json/ui/src/primitives/InfoTooltip.json
deleted file mode 100644
index f767d3006..000000000
--- a/.autodoc/docs/json/ui/src/primitives/InfoTooltip.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "InfoTooltip.tsx",
- "filePath": "ui/src/primitives/InfoTooltip.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/InfoTooltip.tsx",
- "summary": "The code above is a React component that renders an information tooltip with an icon. The tooltip is displayed when the user hovers over the icon. The component takes in four props: `side`, `content`, `width`, and `kind`. \n\nThe `side` prop determines the position of the tooltip relative to the icon. It can be set to `top`, `bottom`, `left`, or `right`. The `content` prop is the text that will be displayed in the tooltip. The `width` prop determines the width of the tooltip. The `kind` prop is optional and can be set to either `'info'` or `'error'`. If it is set to `'error'`, the tooltip will be styled with an error accent color.\n\nThe component uses the `Popover` and `Box` components from an external library, as well as the `FontAwesomeIcon` component from the `@fortawesome/react-fontawesome` library. The `Popover` component is responsible for displaying the tooltip when the user hovers over the icon. The `Box` component is used to wrap the icon and apply styles to it. The `FontAwesomeIcon` component renders the icon itself, which is an information circle by default.\n\nThis component can be used in a larger project to provide users with additional information or context about certain elements on the page. For example, it could be used to provide definitions for technical terms or to explain the purpose of certain buttons or links. Here is an example of how the component could be used:\n\n```\nimport InfoTooltip from './InfoTooltip'\n\nconst MyComponent = () => {\n return (\n \n \n \n
\n )\n}\n```\n\nIn this example, an `InfoTooltip` component is added to a button to provide users with information about what the button does. The tooltip will be displayed on the right side of the button when the user hovers over the icon. The text in the tooltip will read \"Click this button to save your changes.\" and the width of the tooltip will be 200 pixels.",
- "questions": "1. What is the purpose of this code?\n- This code defines a React component called `InfoTooltip` that renders a popover with an icon and text content.\n\n2. What are the required and optional props for this component?\n- The required props are `side`, `content`, and `width`, while the optional prop is `kind` which can be either `'info'` or `'error'`.\n\n3. What other components or libraries are being imported and used in this code?\n- This code imports and uses the `FontAwesomeIcon` component from the `@fortawesome/react-fontawesome` library, as well as the `faInfoCircle` icon from the `@fortawesome/free-solid-svg-icons` library. It also imports the `Box`, `Popover`, and `Text` components from an unknown module or library represented by `'.'`.",
- "checksum": "20420228ec07a2580e00c09b632ae2f6"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/Input.json b/.autodoc/docs/json/ui/src/primitives/Input.json
deleted file mode 100644
index 8866ddc94..000000000
--- a/.autodoc/docs/json/ui/src/primitives/Input.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Input.tsx",
- "filePath": "ui/src/primitives/Input.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/Input.tsx",
- "summary": "The `Input` component in this file is a custom input field that can be used in a React application. It is built using the `styled` function from the `stitches.config` file, which allows for the creation of custom styles for HTML elements. \n\nThe `StyledInput` component is created using the `styled` function and is passed an `'input'` string as its first argument. This creates a new component that is an input field with custom styles. The styles include resetting all default styles with `all: 'unset'`, setting the width to `100%`, adding padding, setting the border radius, font family, font size, and text color. The background color is set to `$inputBackground`, which is a variable defined in the `stitches.config` file. The `$$focusColor` variable is also defined in the `stitches.config` file and is used to set the color of the input field when it is in focus. \n\nThe `StyledInput` component also includes styles for the placeholder text and focus state. Additionally, there are styles for removing the up and down arrows on number inputs in webkit browsers and for displaying number inputs as text fields in Firefox. \n\nThe `Input` component is then created using the `forwardRef` function from React. This allows the `ref` to be passed to the `StyledInput` component. The `Input` component also accepts several props, including `icon`, `containerCss`, and `iconCss`. The `icon` prop is used to add an icon to the input field, the `containerCss` prop is used to add custom styles to the container of the input field, and the `iconCss` prop is used to add custom styles to the icon. \n\nThe `Input` component is a wrapper around the `StyledInput` component and includes the ability to add an icon to the input field. The `icon` prop is passed to a `Box` component that is absolutely positioned within the container of the input field. The `StyledInput` component is then rendered within a `Flex` component, which allows for the icon and input field to be displayed side by side. \n\nOverall, this file provides a reusable `Input` component that can be used throughout a React application. It includes custom styles for the input field and the ability to add an icon to the input field.",
- "questions": "1. What is the purpose of this code?\n- This code exports a custom input component that can be used in a React application. It includes styling for the input and an optional icon.\n\n2. What external libraries or dependencies does this code use?\n- This code uses the `stitches.config` and `@stitches/react` libraries for styling, as well as the `react` library for building the component.\n\n3. What props can be passed to the `Input` component?\n- The `Input` component accepts props for the input element, as well as additional props for an optional icon and custom styling for the container and icon. These props are passed as an object with the `icon`, `containerCss`, and `iconCss` properties.",
- "checksum": "7ea8c0b43ce0ec8b2aa4455c6ff05f65"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/Loader.json b/.autodoc/docs/json/ui/src/primitives/Loader.json
deleted file mode 100644
index 182ad9723..000000000
--- a/.autodoc/docs/json/ui/src/primitives/Loader.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Loader.tsx",
- "filePath": "ui/src/primitives/Loader.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/Loader.tsx",
- "summary": "This code defines a React component called `Loader` that displays a spinning icon to indicate that content is loading. The component imports several dependencies, including the `faSpinner` icon from the `@fortawesome/free-solid-svg-icons` library, the `styled` function from a `stitches.config` file, and the `motion` and `FontAwesomeIcon` components from the `framer-motion` and `@fortawesome/react-fontawesome` libraries, respectively.\n\nThe `Loader` component is defined as a function that takes in props of type `ComponentPropsWithoutRef\n {isLoading ? (\n
\n )\n}\n\nexport default App\n```\n\nIn this example, the `Loader` component is conditionally rendered based on the value of the `isLoading` state variable. When `isLoading` is `true`, the `Loader` component is displayed, and when `isLoading` is `false`, the fetched data is rendered instead. This provides a visual cue to the user that content is being loaded and prevents them from interacting with the page until the data is ready.",
- "questions": "1. What is the purpose of this code?\n This code defines a Loader component that displays a spinning icon while content is loading.\n\n2. What libraries or frameworks are being used in this code?\n This code imports several libraries including '@fortawesome/free-solid-svg-icons', 'react', '@fortawesome/react-fontawesome', 'framer-motion', and a custom library called 'stitches.config'.\n\n3. What styling is applied to the Loader component?\n The Loader component is styled using the 'stitches.config' library to center the icon horizontally and vertically and set the color to '$neutralText'.",
- "checksum": "a62b3f4443c382d6f0ae1585cab3160a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/Popover.json b/.autodoc/docs/json/ui/src/primitives/Popover.json
deleted file mode 100644
index b5f80af1b..000000000
--- a/.autodoc/docs/json/ui/src/primitives/Popover.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Popover.tsx",
- "filePath": "ui/src/primitives/Popover.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/Popover.tsx",
- "summary": "The code defines a custom React component called `RKPopover` that wraps the `Popover` component from the `@radix-ui/react-popover` library. The `RKPopover` component takes in several props, including `content`, `side`, and `width`, which are used to customize the appearance and behavior of the popover.\n\nThe `RKPopover` component renders a `Popover.Root` component that contains a `Popover.Trigger` and a `Popover.Content`. The `Popover.Trigger` component is a wrapper around the `children` prop, which is passed in as a child of the `RKPopover` component. The `Popover.Content` component contains an `Arrow` component and a `Box` component that wraps the `content` prop.\n\nThe `Arrow` component is a custom styled component that renders a small arrow that points to the `Popover.Trigger` component. The `Box` component is another custom styled component that wraps the `content` prop and applies some styles to it, including padding, a maximum width, and a background color.\n\nThe `RKPopover` component is designed to be used as a customizable popover that can be triggered by clicking on a button or other element. The `content` prop can be used to pass in any React node, such as text, images, or other components, that will be displayed inside the popover. The `side` prop can be used to specify which side of the trigger element the popover should appear on, and the `width` prop can be used to specify the width of the popover.\n\nHere is an example of how the `RKPopover` component might be used in a larger project:\n\n```\nimport React from 'react'\nimport RKPopover from './components/RKPopover'\n\nconst MyComponent = () => {\n return (\n \n {/* Render data here */}\n
\n )}\n \n Hello, world!
} side=\"right\" width=\"200px\">\n \n \n \n )\n}\n```\n\nIn this example, the `RKPopover` component is used to create a popover that appears to the right of a button when it is clicked. The `content` prop is set to a simple `div` element that contains the text \"Hello, world!\", and the `width` prop is set to 200 pixels.",
- "questions": "1. What is the purpose of this code and how is it used in the zoo project?\n This code defines a custom popover component called `RKPopover` that is used to display content in a popover. It is likely used throughout the zoo project wherever a popover is needed.\n\n2. What is the significance of the `styled` function and how is it used in this code?\n The `styled` function is used to create custom styled components for the `Arrow` and `Content` components of the popover. It allows for easy customization of the appearance of these components using CSS-in-JS syntax.\n\n3. What are the available props for the `RKPopover` component and how are they used?\n The available props for the `RKPopover` component include `content`, `side`, and `width`, which are used to specify the content to display in the popover, the side of the trigger element to display the popover on, and the width of the popover, respectively. These props are passed down to the `Popover` components as well as the custom `Box` component used to display the content.",
- "checksum": "633d44e3120927d15df2a1e92c1c8ac5"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/PseudoInput.json b/.autodoc/docs/json/ui/src/primitives/PseudoInput.json
deleted file mode 100644
index b82da6e68..000000000
--- a/.autodoc/docs/json/ui/src/primitives/PseudoInput.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "PseudoInput.tsx",
- "filePath": "ui/src/primitives/PseudoInput.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/PseudoInput.tsx",
- "summary": "The code above is a styled component that creates a PseudoInput element. The purpose of this component is to provide a consistent and customizable input element that can be used throughout the larger project. \n\nThe component is created using the styled function from the Stitches library, which allows for easy creation of custom styles for HTML elements. The first argument passed to the styled function is the HTML element to be styled, in this case a div. The second argument is an object containing the CSS properties and values to be applied to the element.\n\nThe CSS properties applied to the PseudoInput element include resetting all default styles with \"all: unset\", setting the width to \"auto\", adding padding and a border radius, setting the font family, size, and weight, and defining the text and background colors. These styles can be easily customized by modifying the values in the object passed to the styled function.\n\nThe PseudoInput component is then exported as the default export of the module, allowing it to be imported and used in other parts of the project. For example, if a form component needs an input element, it can import the PseudoInput component and use it like so:\n\n```\nimport PseudoInput from './path/to/PseudoInput'\n\nfunction Form() {\n return (\n \n )\n}\n```\n\nOverall, the PseudoInput component provides a reusable and customizable input element that can be used throughout the larger project, helping to maintain consistency and reduce code duplication.",
- "questions": "1. What is the purpose of the `styled` function and where is it imported from?\n - The `styled` function is used to create a styled component and it is imported from the `stitches.config` file located in the parent directory.\n2. What is the significance of the `all: 'unset'` property in the style object?\n - The `all: 'unset'` property resets all CSS properties to their initial values, which ensures that no unwanted styles are inherited by the component.\n3. What is the `$space` variable used for in the `borderRadius` property?\n - The `$space` variable is likely a value defined in the `stitches.config` file and is used to set the border radius to a specific value based on the design system's spacing scale.",
- "checksum": "956a2466fb730a163447afc84ba01b7c"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/ScrollArea.json b/.autodoc/docs/json/ui/src/primitives/ScrollArea.json
deleted file mode 100644
index d4f810f75..000000000
--- a/.autodoc/docs/json/ui/src/primitives/ScrollArea.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ScrollArea.tsx",
- "filePath": "ui/src/primitives/ScrollArea.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/ScrollArea.tsx",
- "summary": "The code defines a custom scrollable area component called `RKScrollArea` using the `@radix-ui/react-scroll-area` package and the `stitches.config` file. The component has a fixed height of 322 pixels, a border radius of `$space$2`, and a box shadow of `0 2px 10px $inputBackground`. It also has a transparent background color and inherits the border radius of its parent element. \n\nThe `RKScrollArea` component has four child components: `ScrollAreaViewport`, `ScrollAreaScrollbar`, `ScrollAreaThumb`, and `ScrollAreaCorner`. The `ScrollAreaViewport` component is the container for the scrollable content. The `ScrollAreaScrollbar` component is the container for the scroll bar and has two orientations: vertical and horizontal. The `ScrollAreaThumb` component is the draggable handle of the scrollbar. The `ScrollAreaCorner` component is the corner where the vertical and horizontal scrollbars meet.\n\nThe `RKScrollArea` component takes in any children components and passes them to the `ScrollAreaViewport` component. The `ScrollAreaScrollbar` component has two `orientation` props: `vertical` and `horizontal`. The `ScrollAreaThumb` component is a child of the `ScrollAreaScrollbar` component and is responsible for the draggable handle of the scrollbar. The `ScrollAreaCorner` component is a child of the `ScrollArea` component and is responsible for the corner where the vertical and horizontal scrollbars meet.\n\nThe `RKScrollArea` component can be used in any part of the project where a custom scrollable area is needed. For example, it can be used in a long list of items where the user needs to scroll through the list. The component can be styled using the `stitches.config` file to match the design of the project. \n\nExample usage:\n\n```\nimport RKScrollArea from './path/to/RKScrollArea'\n\nconst longList = ['item1', 'item2', 'item3', ...]\n\nconst MyComponent = () => {\n return (\n {item}
\n ))}\n \n
\n )\n}\n```\n\nIn this example, the Slider component is used to render a slider that updates the value in state when the user drags the thumb. The current value is displayed in a paragraph element.",
- "questions": "1. What is the purpose of this code?\n This code defines a custom slider component using React and the Radix UI Slider library.\n\n2. What are the styled components used in this code and what are their styles?\n The code defines four styled components: `SliderRoot`, `SliderTrack`, `SliderRange`, and `SliderThumb`. `SliderRoot` sets the overall style of the slider, `SliderTrack` sets the style of the track that the thumb slides on, `SliderRange` sets the style of the range between the start and end points of the thumb, and `SliderThumb` sets the style of the thumb itself.\n\n3. What props can be passed to the `Slider` component?\n The `Slider` component accepts all props that can be passed to the `SliderRoot` component, which is defined as `ComponentPropsWithoutRefValue: {value}
\n\n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n This code defines a custom switch component using React and the Radix UI library.\n\n2. What are the styles applied to the switch component?\n The switch component has a width of 46, a height of 24, a rounded border, and a background color that changes when checked. The thumb of the switch has a width and height of 20, a rounded border, and a background color that also changes when checked. The switch has a focus style that adds a box shadow and a border color.\n\n3. What are the dependencies of this code?\n This code depends on React, the Stitches CSS-in-JS library, and the Radix UI library.",
- "checksum": "ce64c39c0f13efdf06d2308be7ab5a86"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/Text.json b/.autodoc/docs/json/ui/src/primitives/Text.json
deleted file mode 100644
index 2d6768e58..000000000
--- a/.autodoc/docs/json/ui/src/primitives/Text.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "Text.tsx",
- "filePath": "ui/src/primitives/Text.tsx",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/Text.tsx",
- "summary": "This code exports a styled `span` component using the `styled` function from the `stitches.config` module. The purpose of this code is to provide a flexible and customizable way to style text elements in the larger project. \n\nThe component has default styles for `color`, `fontFamily`, `letterSpacing`, and `margin`. It also has two variants: `color` and `style`. \n\nThe `color` variant allows the user to specify the color of the text using a set of predefined options. These options include `base`, `subtle`, `error`, `errorLight`, `accent`, `success`, and `button`. The `style` variant allows the user to specify the style of the text using a set of predefined options. These options include `h2`, `h3`, `h4`, `h5`, `h6`, `subtitle1`, `subtitle2`, `body1`, `body2`, `body3`, and `tiny`. \n\nThe `italic` and `ellipsify` variants allow the user to add additional styles to the text. The `italic` variant takes a boolean value and adds italic styling to the text if `true`. The `ellipsify` variant takes a boolean value and adds ellipsis styling to the text if `true`. \n\nThe `compoundVariants` property allows the user to combine multiple variants together. In this case, it combines the `tiny` style with the `base` color. \n\nThe `defaultVariants` property sets the default values for the `style` and `color` variants. In this case, the default style is `body1` and the default color is `base`. \n\nOverall, this code provides a flexible and customizable way to style text elements in the larger project. Here is an example of how this component can be used to style a `h1` element with the `accent` color and `h2` style:\n\n```\nimport Text from './Text'\n\n\n \n \n \n
\n )\n}\n```",
- "questions": "1. What is the purpose of this code?\n- This code exports a custom Tooltip component that uses the `@radix-ui/react-tooltip` and `@radix-ui/react-popover` libraries to display tooltips and popovers. It also uses the `@react-hookz/web` library to determine if the device is a small screen.\n\n2. What are the props that can be passed to the Tooltip component?\n- The Tooltip component accepts the following props: `children`, `content`, `open`, `defaultOpen`, `onOpenChange`, and `delayDuration`. It also accepts any additional props that can be passed to the `Popover.Content` or `TooltipPrimitive.Content` components.\n\n3. What is the difference between the Tooltip and Popover components?\n- The Tooltip component is used for small devices and displays a tooltip when the user hovers over the trigger element. The Popover component is used for larger devices and displays a popover when the user clicks on the trigger element.",
- "checksum": "c171282b4c2948925867f2d899af5c6d"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/primitives/index.json b/.autodoc/docs/json/ui/src/primitives/index.json
deleted file mode 100644
index 2014afbb8..000000000
--- a/.autodoc/docs/json/ui/src/primitives/index.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "index.ts",
- "filePath": "ui/src/primitives/index.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/primitives/index.ts",
- "summary": "This code exports a series of components from the `zoo` project. These components are used to create a user interface for the larger project. \n\nEach export statement is followed by the name of the component and the file path where it can be found. The components include `Anchor`, `Box`, `Button`, `Flex`, `EthLogo`, `FormatWrappedCurrency`, `FormatCurrency`, `FormatCryptoCurrency`, `Input`, `Text`, `Grid`, `Loader`, `Switch`, `Select`, `Slider`, `Popover`, `ToggleGroup`, `ToggleGroupButton`, `DateInput`, `ErrorWell`, `CryptoCurrencyIcon`, `Tooltip`, and `Img`. \n\nThese components can be imported into other files within the `zoo` project or in other projects that use the `zoo` library. For example, if a developer wants to use the `Button` component in a file, they can import it like this:\n\n```\nimport { Button } from 'zoo';\n```\n\nThen they can use the `Button` component in their code like this:\n\n```\n\n```\n\nOverall, this code serves as a way to organize and export the various components used in the `zoo` project. By exporting them in this way, other developers can easily use these components in their own code without having to manually copy and paste the code for each component.",
- "questions": "1. What is the purpose of this code?\n This code exports various components from different files located in the `zoo` project.\n\n2. What are some examples of the components being exported?\n Some examples of the components being exported include `Anchor`, `Box`, `Button`, `Flex`, `Input`, `Text`, `Grid`, `Loader`, `Switch`, `Select`, `Slider`, `Popover`, `ToggleGroup`, `DateInput`, `ErrorWell`, `CryptoCurrencyIcon`, `Tooltip`, and `Img`.\n\n3. Are there any dependencies required for these components to work?\n It is unclear from this code whether there are any dependencies required for these components to work. Additional information or documentation may be needed to determine this.",
- "checksum": "48219ac24626c21d13478a3efb65aa0a"
-}
\ No newline at end of file
diff --git a/.autodoc/docs/json/ui/src/themes/ReservoirKitTheme.json b/.autodoc/docs/json/ui/src/themes/ReservoirKitTheme.json
deleted file mode 100644
index 316af4d10..000000000
--- a/.autodoc/docs/json/ui/src/themes/ReservoirKitTheme.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "fileName": "ReservoirKitTheme.ts",
- "filePath": "ui/src/themes/ReservoirKitTheme.ts",
- "url": "zoo-labs/zoo/blob/master/ui/src/themes/ReservoirKitTheme.ts",
- "summary": "The code defines interfaces and types for the ReservoirKitTheme and ReservoirKitOverrides objects, as well as a ReservoirKitThemeColors object. The ReservoirKitTheme object contains properties for radii, fonts, colors, and assets. The radii property is an object with a single property, borderRadius, which is a string. The fonts property is an object with properties for body, button, and headline, which are all strings. The colors property is an object of type ReservoirKitThemeColors, which contains a variety of color properties for different parts of the UI. The assets property is an object with a single property, ethIcon, which is a string that can be one of three values: 'glyph', 'gray', or 'purple'.\n\nThe ReservoirKitOverrides type is an object that can contain any of the properties of the ReservoirKitTheme object, allowing for customization of the theme. The ReservoirKitSharedTheme type is a subset of the ReservoirKitTheme type, containing only the fonts and radii properties. The sharedThemeConfig function takes an optional overrides parameter of type ReservoirKitOverrides and returns a ReservoirKitSharedTheme object. The function sets the borderRadius property of the radii object to the value of the borderRadius property of the overrides object, or '4px' if it is not defined. The body, button, and headline properties of the fonts object are set to the values of the font, buttonFont, and headlineFont properties of the overrides object, respectively, or 'sans-serif' if they are not defined.\n\nThis code is part of the larger ReservoirKit project and provides a way to define and customize the theme of the UI. The ReservoirKitTheme object can be used to define the default theme, while the ReservoirKitOverrides object can be used to customize the theme for specific use cases. The sharedThemeConfig function provides a way to generate a ReservoirKitSharedTheme object from an overrides object, which can be used to apply the customized theme to components. For example, the following code could be used to create a customized button component:\n\n```\nimport { sharedThemeConfig } from 'zoo';\n\nconst overrides = {\n borderRadius: '8px',\n font: 'Roboto',\n buttonFont: 'Roboto',\n buttonTextColor: '#FFFFFF',\n buttonTextHoverColor: '#CCCCCC',\n primaryColor: '#FF0000',\n primaryHoverColor: '#CC0000',\n wellBackground: '#FFFFFF',\n textColor: '#000000',\n headerBackground: '#FFFFFF',\n contentBackground: '#FFFFFF',\n footerBackground: '#FFFFFF',\n overlayBackground: '#000000',\n popoverBackground: '#FFFFFF',\n borderColor: '#000000',\n ethIcon: 'purple',\n};\n\nconst sharedTheme = sharedThemeConfig(overrides);\n\nconst Button = () => {\n return (\n My App
-
-
- );
-}
-
-export default App;
-```
-## Questions:
- 1. What is the purpose of the `ConnectButton` component from the `@rainbow-me/rainbowkit` library?
-- The `ConnectButton` component is used to render a custom connect button for a wallet.
-
-2. What is the purpose of the `ConnectWalletButton` component?
-- The `ConnectWalletButton` component is a functional component that renders a custom connect wallet button using the `ConnectButton` component.
-
-3. What happens when the `ConnectWalletButton` is clicked?
-- When the `ConnectWalletButton` is clicked, it opens a connect modal if the `mounted`, `account`, and `chain` variables are truthy. If any of these variables are falsy, the button does not do anything.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/app/components/ErrorTrackingProvider.md b/.autodoc/docs/markdown/app/components/ErrorTrackingProvider.md
deleted file mode 100644
index acffcd7d2..000000000
--- a/.autodoc/docs/markdown/app/components/ErrorTrackingProvider.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/app/components/ErrorTrackingProvider.tsx)
-
-This code is a module that provides error tracking functionality for a React-based project. It imports the Sentry library, which is a popular tool for tracking and reporting errors in web applications. The module defines a React functional component called ErrorTrackingProvider, which takes a single prop called children that represents the child components that will be rendered by this component.
-
-The ErrorTrackingProvider component uses the useAccount hook from the 'wagmi' library to get the current user's address. It then uses the useEffect hook to set up a side effect that will run whenever the address changes. If the SENTRY_DSN environment variable is defined, the component will use the Sentry.setUser method to set the current user's address as the user ID in Sentry. If there is no address, it will set the user to null.
-
-The purpose of this module is to provide a way to track errors that occur in the application and associate them with specific users. By setting the user ID in Sentry, developers can easily see which errors are affecting which users and take appropriate action to fix them. This module can be used as a wrapper around other components in the application to ensure that error tracking is always enabled.
-
-Example usage:
-
-```
-import ErrorTrackingProvider from './ErrorTrackingProvider'
-
-function App() {
- return (
- Welcome to my app
-My app content
- Welcome to My Web App
-This is a sample web app that uses the zoo manifest file.
- - -``` - -In this example, the web app includes a link to the "manifest.json" file, which contains the code we discussed earlier. This allows the web app to use the specified icons and colors, and to be displayed as a standalone app. -## Questions: - 1. What is the purpose of this code? - This code is a JSON object that defines various properties of icons and colors for a web app. - -2. Where is this code used in the project? - It is not clear from this code snippet where it is used in the project. It could be part of a configuration file or a script that generates HTML code. - -3. Are there any dependencies or requirements for this code to work properly? - It is not clear from this code snippet if there are any dependencies or requirements for this code to work properly. It is possible that other parts of the project rely on this code to be present and correctly formatted. \ No newline at end of file diff --git a/.autodoc/docs/markdown/app/sentry.client.config.md b/.autodoc/docs/markdown/app/sentry.client.config.md deleted file mode 100644 index cecdc39c1..000000000 --- a/.autodoc/docs/markdown/app/sentry.client.config.md +++ /dev/null @@ -1,57 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/app/sentry.client.config.ts) - -This file is responsible for configuring the initialization of Sentry on the client side of the zoo project. Sentry is a tool that helps developers monitor and fix errors in their applications. - -The code imports the necessary modules from the `@sentry/nextjs` and `@sentry/integrations` packages. It then calls the `Sentry.init()` method to initialize Sentry with the provided configuration options. - -The `dsn` option specifies the Data Source Name (DSN) for Sentry, which is a unique identifier for the project. This value is retrieved from the `NEXT_PUBLIC_SENTRY_DSN` environment variable. - -The `tracesSampleRate` option determines the percentage of transactions that will be sent to Sentry for performance monitoring. In this case, it is set to 1, meaning that all transactions will be sent. - -The `debug` option controls whether or not debug information will be printed to the console during setup. It is set to false in this case. - -The `replaysOnErrorSampleRate` option determines the percentage of errors that will be recorded for session replay. It is set to 1.0, meaning that all errors will be recorded. - -The `replaysSessionSampleRate` option determines the percentage of sessions that will be recorded for session replay. It is set to 0.1, meaning that only 10% of sessions will be recorded. - -The `integrations` option is an array of integrations that will be used with Sentry. In this case, two integrations are included: `Replay` and `CaptureConsoleIntegration`. The `Replay` integration enables session replay, which allows developers to see a video of a user's session leading up to an error. The `CaptureConsoleIntegration` integration captures console messages of a specified level (in this case, only `error` messages are captured) and sends them to Sentry for monitoring. - -Overall, this file sets up Sentry with the necessary configuration options and integrations to monitor errors and performance in the zoo project. Developers can use Sentry to identify and fix issues in their application, improving the overall user experience. - -Example usage: - -```javascript -import * as Sentry from '@sentry/nextjs' - -// Initialize Sentry with custom configuration options -Sentry.init({ - dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, - tracesSampleRate: 1, - debug: false, - replaysOnErrorSampleRate: 1.0, - replaysSessionSampleRate: 0.1, - integrations: [ - new Sentry.Replay({ - maskAllText: true, - blockAllMedia: true, - }), - new Sentry.CaptureConsoleIntegration({ - levels: ['error'], - }), - ], -}) - -// Log an error to the console -console.error('An error occurred') - -// Sentry will capture the error and send it for monitoring -``` -## Questions: - 1. What is Sentry and how does it work with Next.js? -- Sentry is a tool for error tracking and monitoring. This code initializes Sentry on the client side of a Next.js application, allowing it to capture and report errors that occur in the user's browser. - -2. What is the purpose of the `tracesSampleRate` option? -- The `tracesSampleRate` option determines the percentage of requests that will be traced by Sentry. In this code, it is set to 1, meaning that all requests will be traced. This value should be adjusted in production to avoid excessive data usage. - -3. What is the `CaptureConsoleIntegration` and what does it do? -- The `CaptureConsoleIntegration` is an integration provided by Sentry that captures console messages (such as `console.error()`) and sends them to Sentry for error tracking. In this code, it is configured to only capture `error` messages. \ No newline at end of file diff --git a/.autodoc/docs/markdown/app/sentry.edge.config.md b/.autodoc/docs/markdown/app/sentry.edge.config.md deleted file mode 100644 index 9268608e5..000000000 --- a/.autodoc/docs/markdown/app/sentry.edge.config.md +++ /dev/null @@ -1,41 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/app/sentry.edge.config.ts) - -This code initializes Sentry for edge features in the zoo project. Sentry is a tool that helps developers monitor and fix errors in their applications. The configuration added in this file will be used whenever one of the edge features is loaded. This configuration is also required when running the project locally. - -The code imports the Sentry library using the '@sentry/nextjs' package. It then calls the 'init' method on the Sentry object and passes in an object with configuration options. - -The 'dsn' option is set to the value of the 'NEXT_PUBLIC_SENTRY_DSN' environment variable. This is the Data Source Name (DSN) for the Sentry project, which is used to identify and send error reports to the correct project. - -The 'tracesSampleRate' option is set to 1, which means that all transactions will be sent to Sentry. This option can be adjusted in production to reduce the amount of data sent to Sentry. - -The 'debug' option is set to false, which means that no additional information will be printed to the console during setup. - -Overall, this code ensures that Sentry is properly configured for edge features in the zoo project, allowing developers to monitor and fix errors in their application. - -Example usage: - -``` -import * as Sentry from '@sentry/nextjs' - -Sentry.init({ - dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, - tracesSampleRate: 1, - debug: false, -}) - -// Example code that could potentially throw an error -try { - // some code here -} catch (error) { - Sentry.captureException(error) -} -``` -## Questions: - 1. What is Sentry and why is it being used in this project? - - Sentry is a tool used for error tracking and monitoring. It is being initialized in this project for edge features such as middleware and edge routes. - -2. What is the purpose of the `tracesSampleRate` option and why is it set to 1? - - The `tracesSampleRate` option determines the percentage of requests that will be traced by Sentry. It is set to 1 in this code, meaning that all requests will be traced. - -3. What is the purpose of the `debug` option and why is it set to false? - - The `debug` option is used to print useful information to the console while setting up Sentry. It is set to false in this code, meaning that this information will not be printed. \ No newline at end of file diff --git a/.autodoc/docs/markdown/app/sentry.server.config.md b/.autodoc/docs/markdown/app/sentry.server.config.md deleted file mode 100644 index 378b97289..000000000 --- a/.autodoc/docs/markdown/app/sentry.server.config.md +++ /dev/null @@ -1,59 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/app/sentry.server.config.ts) - -This file is responsible for configuring the initialization of Sentry on the server. Sentry is a tool that helps developers monitor and fix errors in their applications. The code imports the Sentry library from the '@sentry/nextjs' package and initializes it with a configuration object. - -The configuration object contains three properties: -1. dsn: This property is set to the value of the environment variable NEXT_PUBLIC_SENTRY_DSN. This is the Data Source Name (DSN) that Sentry uses to identify the project and send error reports to the correct location. -2. tracesSampleRate: This property is set to 1, which means that all requests will be traced by Sentry. In production, this value should be adjusted to a lower value to reduce the amount of data sent to Sentry and improve performance. Alternatively, the tracesSampler property can be used to provide greater control over which requests are traced. -3. debug: This property is set to false, which means that Sentry will not print any useful information to the console during setup. This can be set to true during development to help with debugging. - -This code is an important part of the larger project because it enables developers to monitor and fix errors in the application. By configuring Sentry on the server, developers can receive real-time notifications of errors and quickly identify and fix issues. - -Here is an example of how this code might be used in a larger project: - -``` -// server.js - -import express from 'express' -import * as Sentry from '@sentry/nextjs' -import { createServer } from 'http' - -const app = express() - -// Initialize Sentry -Sentry.init({ - dsn: process.env.NEXT_PUBLIC_SENTRY_DSN, - tracesSampleRate: 0.5, - debug: true, -}) - -// Add Sentry middleware to the express app -app.use(Sentry.Handlers.requestHandler()) - -// Define routes -app.get('/', (req, res) => { - res.send('Hello World!') -}) - -// Add Sentry error handling middleware to the express app -app.use(Sentry.Handlers.errorHandler()) - -// Create server and listen on port 3000 -const server = createServer(app) -server.listen(3000, () => { - console.log('Server listening on port 3000') -}) -``` - -In this example, the code initializes Sentry with a DSN from an environment variable and sets the tracesSampleRate to 0.5. It then adds Sentry middleware to the express app to handle requests and errors. Finally, it creates a server and listens on port 3000. - -Overall, this code is an essential part of any project that uses Sentry for error monitoring and provides developers with a powerful tool for identifying and fixing issues in their applications. -## Questions: - 1. What is Sentry and why is it being used in this project? - - Sentry is a tool for error tracking and monitoring. It is being used in this project to handle errors that occur on the server and provide useful information for debugging. - -2. What is the purpose of the `tracesSampleRate` option and why is it set to 1? - - The `tracesSampleRate` option determines the percentage of requests that will be traced by Sentry. A value of 1 means that all requests will be traced. This may be adjusted in production to reduce the amount of data collected. - -3. What is the significance of the `debug` option and why is it set to false? - - The `debug` option controls whether or not Sentry will print useful information to the console during setup. It is set to false in this code to prevent cluttering the console with unnecessary information. \ No newline at end of file diff --git a/.autodoc/docs/markdown/app/stitches.config.md b/.autodoc/docs/markdown/app/stitches.config.md deleted file mode 100644 index daebbbf2b..000000000 --- a/.autodoc/docs/markdown/app/stitches.config.md +++ /dev/null @@ -1,34 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/app/stitches.config.ts) - -This code is responsible for creating and configuring the theme for the `zoo` project. It uses the `@stitches/react` library to create a theme object that contains various properties such as colors, fonts, sizes, and media queries. The `createStitches` function is used to create the theme object and also returns several utility functions that can be used to create styles for components. - -The `colors` property of the theme object is defined using the `@radix-ui/colors` library, which provides a set of predefined color scales. These color scales are then combined and aliased to create the final color palette for the project. The `createTheme` function is used to create a dark theme that is a variation of the main theme. - -The `utils` property of the theme object contains various utility functions that can be used to create styles for components. These functions include margin, padding, width, height, and grid-related functions. The `media` property contains various media queries that can be used to create responsive styles for components. - -The `globalCss` function is used to apply a global CSS reset to the project. The `Inter` font from Google Fonts is also imported and used as the default font for the project. - -Overall, this code provides a centralized way to manage the theme for the `zoo` project. It allows for easy customization of the color palette and provides utility functions that can be used to create consistent styles for components. Here is an example of how the `styled` function can be used to create a styled component using the theme: - -``` -import { styled } from 'zoo' - -const Button = styled('button', { - backgroundColor: '$primary1', - color: '$whiteA11', - padding: '$2', - borderRadius: '$radii', - '&:hover': { - backgroundColor: '$primary2', - }, -}) -``` -## Questions: - 1. What is the purpose of the `createStitches` function and what does it return? -- The `createStitches` function is used to create a styling system for the project using the `@stitches/react` library. It returns an object with several properties including `createTheme`, `keyframes`, `styled`, `globalCss`, and `getCssText`. - -2. What is the purpose of the `utils` object within the `createStitches` function? -- The `utils` object contains utility functions that can be used to generate CSS properties for margin, padding, dimensions, and grid. These functions can be used within the `styled` function to create custom styles. - -3. What is the purpose of the `darkTheme` object and how is it different from the default theme? -- The `darkTheme` object is an alternative theme that can be used for dark mode. It contains different color values for the same color aliases used in the default theme, as well as some additional color values for accent and panel styling. \ No newline at end of file diff --git a/.autodoc/docs/markdown/app/tsconfig.md b/.autodoc/docs/markdown/app/tsconfig.md deleted file mode 100644 index 98b58b8ac..000000000 --- a/.autodoc/docs/markdown/app/tsconfig.md +++ /dev/null @@ -1,27 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/app/tsconfig.json) - -This code is a configuration file for the TypeScript compiler. It specifies the compiler options and the files to be included or excluded from the compilation process. - -The "compilerOptions" object contains various settings for the compiler, such as the target version of ECMAScript to compile to, the libraries to include, whether to allow JavaScript files to be compiled, and whether to enforce strict type checking. - -The "include" and "exclude" arrays specify the files to be included or excluded from the compilation process. In this case, the "include" array includes all TypeScript and TypeScript React files in the project, while the "exclude" array excludes the "node_modules" directory. - -This configuration file is an important part of the TypeScript project, as it ensures that the TypeScript code is compiled correctly and efficiently. It can be used in conjunction with other tools and frameworks to build and deploy TypeScript applications. - -For example, in a Node.js project, this configuration file can be used with the "tsc" command to compile TypeScript files into JavaScript files that can be executed by Node.js. - -``` -// Example usage of the TypeScript compiler with this configuration file -tsc -``` - -Overall, this code is a crucial part of the TypeScript project and ensures that the TypeScript code is compiled correctly and efficiently. -## Questions: - 1. What is the purpose of this code file? - - This code file is a configuration file for TypeScript compiler options for the project called zoo. - -2. What version of ECMAScript is being targeted? - - The code is targeting ECMAScript 5. - -3. What files are being included and excluded in the compilation process? - - The code includes all TypeScript and TypeScript React files with the extensions `.ts` and `.tsx`, as well as a file called `next-env.d.ts`. It excludes the `node_modules` directory. \ No newline at end of file diff --git a/.autodoc/docs/markdown/app/types/ExpirationOption.md b/.autodoc/docs/markdown/app/types/ExpirationOption.md deleted file mode 100644 index ccf51a28c..000000000 --- a/.autodoc/docs/markdown/app/types/ExpirationOption.md +++ /dev/null @@ -1,43 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/app/types/ExpirationOption.ts) - -This code defines a TypeScript type called `ExpirationOption`. This type is used to represent an option for an expiration date in the larger project. - -The `ExpirationOption` type has four properties: `text`, `value`, `relativeTime`, and `relativeTimeUnit`. The `text` property is a string that represents the text that will be displayed for the expiration option. The `value` property is a string that represents the value that will be sent to the server when the expiration option is selected. The `relativeTime` property is a number or null that represents the relative time for the expiration option. The `relativeTimeUnit` property is a `ManipulateType` or null that represents the unit of time for the relative time. - -This type can be used in the larger project to represent expiration options for various features such as subscriptions, memberships, or trial periods. For example, if the project has a subscription feature, the `ExpirationOption` type can be used to represent the different subscription plans available to the user. Each subscription plan can have its own `text`, `value`, `relativeTime`, and `relativeTimeUnit` properties. - -Here is an example of how the `ExpirationOption` type can be used in the larger project: - -``` -const subscriptionOptions: ExpirationOption[] = [ - { - text: 'Monthly Subscription', - value: 'monthly', - relativeTime: 1, - relativeTimeUnit: 'month' - }, - { - text: 'Annual Subscription', - value: 'annual', - relativeTime: 1, - relativeTimeUnit: 'year' - }, - { - text: 'Lifetime Subscription', - value: 'lifetime', - relativeTime: null, - relativeTimeUnit: null - } -] -``` - -In this example, an array of `ExpirationOption` objects is defined to represent the different subscription options available to the user. The first two options have a relative time of 1 month or 1 year, while the third option represents a lifetime subscription with no expiration. -## Questions: - 1. What is the purpose of the `ExpirationOption` type? - - The `ExpirationOption` type is used to represent an option for an expiration date, including its text, value, relative time, and relative time unit. - -2. What is the `ManipulateType` import used for? - - The `ManipulateType` import is used to define the type of the `relativeTimeUnit` property in the `ExpirationOption` type. - -3. What library is the `ManipulateType` import from? - - The `ManipulateType` import is from the `dayjs` library, which is likely used for working with dates and times in the project. \ No newline at end of file diff --git a/.autodoc/docs/markdown/app/types/reservoir.d.md b/.autodoc/docs/markdown/app/types/reservoir.d.md deleted file mode 100644 index 208a8c16a..000000000 --- a/.autodoc/docs/markdown/app/types/reservoir.d.md +++ /dev/null @@ -1,34 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/app/types/reservoir.d.ts) - -The code defines a type called `ArrayItemTypes` which takes in a generic type `T` that extends an array of any type. The type `infer` is used to extract the type of the array elements and assign it to the type variable `U`. The conditional type `T extends (infer U)[] ? U : never` checks if `T` is an array and if so, returns the type `U` (i.e., the type of the array elements). If `T` is not an array, it returns `never`. - -This type can be useful in a larger project where there is a need to extract the type of elements from an array. For example, consider a function that takes in an array of numbers and returns the sum of the elements. Instead of explicitly defining the type of the array elements as `number`, the `ArrayItemTypes` type can be used to extract the type of the elements dynamically. - -```typescript -function sumArray
-
-
-
-
-
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `addParam` function?
- - The `addParam` function adds a parameter with a given name and value to the URL string, and handles cases where multiple parameters with the same name and different values already exist in the URL.
-
-2. What is the purpose of the `removeParam` function?
- - The `removeParam` function removes a parameter with a given name and value from the URL string, and handles cases where multiple parameters with the same name and different values exist in the URL.
-
-3. What is the purpose of the `clearAllAttributes` function?
- - The `clearAllAttributes` function deletes all parameters with names that start with "attributes[" and end with "]" from the URL string.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/app/utils/till.md b/.autodoc/docs/markdown/app/utils/till.md
deleted file mode 100644
index c0a8d94ae..000000000
--- a/.autodoc/docs/markdown/app/utils/till.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/app/utils/till.ts)
-
-This code is a utility module for working with dates and times in the larger zoo project. It imports the dayjs library, which is a lightweight alternative to Moment.js for parsing, validating, manipulating, and formatting dates and times in JavaScript. The module extends dayjs with the relativeTime plugin, which allows for the calculation of human-readable relative time strings like "2 hours ago" or "in 5 minutes".
-
-The module exports two constants and one function. The first constant, DATE_REGEX, is a regular expression that matches a date and time string in the format "YYYY-MM-DD HH:MM:SS". This can be used to extract date and time information from raw strings in other parts of the project.
-
-The second constant is not exported, but is used internally by the timeTill function. It is a string template that formats the output of the fromNow method of dayjs to only include the relative time value (e.g. "2 hours").
-
-The timeTill function takes a single argument, a string representing a date and time in the format "YYYY-MM-DD HH:MM:SS". It uses dayjs to parse the string into a date object, and then calculates the relative time between that date and the current time using the fromNow method. The function returns a human-readable string indicating the time remaining until the target time, in the format "X hours" or "Y minutes", etc.
-
-Here is an example of how this module might be used in the larger zoo project:
-
-```javascript
-import { timeTill, DATE_REGEX } from 'zoo/date-utils'
-
-const rawString = 'The event starts at 2022-01-01 12:00:00'
-const match = rawString.match(DATE_REGEX)
-const targetTime = match ? match[0] : undefined
-
-if (targetTime) {
- const timeRemaining = timeTill(targetTime)
- console.log(`The event starts in ${timeRemaining}.`)
-} else {
- console.log('Could not find a valid date and time in the string.')
-}
-```
-
-In this example, we use the DATE_REGEX constant to extract a date and time string from a raw string. We then pass that string to the timeTill function to calculate the relative time until the target time. Finally, we log a message to the console indicating how much time is left until the event starts.
-## Questions:
- 1. What is the purpose of the `dayjs` library and how is it being used in this code?
- - The `dayjs` library is being used to manipulate and format dates and times. It is being imported and extended with the `relativeTime` plugin, which allows for the calculation of relative time differences.
-2. What is the expected format of the `timeString` parameter in the `timeTill` function?
- - The `timeString` parameter is expected to be in the format "YYYY-MM-DD HH:MM:SS".
-3. What is the output format of the `timeTill` function?
- - The `timeTill` function returns a human-readable string indicating the time remaining until the target time, using the `fromNow` method of the `dayjs` library. The output format is a string with a number and a unit of time (e.g. "2 hours", "5 minutes", etc.).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/app/utils/titleCase.md b/.autodoc/docs/markdown/app/utils/titleCase.md
deleted file mode 100644
index cd9a569f4..000000000
--- a/.autodoc/docs/markdown/app/utils/titleCase.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/app/utils/titleCase.ts)
-
-The `titleCase` function in the `zoo` project is designed to convert a given word to title case format. Title case is a writing style where the first letter of each word is capitalized, except for certain small words like "and", "the", and "of". This function takes a single parameter, `word`, which is the word to be converted to title case.
-
-The function uses a regular expression to match all words in the input string and then applies a callback function to each match. The callback function takes the matched word and returns a modified version of it in title case format. The modified version is created by capitalizing the first letter of the word using the `toUpperCase()` method and then converting the rest of the word to lowercase using the `toLowerCase()` method.
-
-This function can be used in a variety of ways within the larger `zoo` project. For example, it could be used to format animal names or exhibit titles in a consistent and professional manner. It could also be used to format user input in forms or search queries to ensure that the input is correctly formatted and matches the expected format.
-
-Here is an example of how to use the `titleCase` function:
-
-```typescript
-import titleCase from './titleCase';
-
-const animalName = 'giraffe';
-const formattedName = titleCase(animalName);
-console.log(formattedName); // Output: "Giraffe"
-```
-
-In this example, the `titleCase` function is imported from the `titleCase.ts` file and used to format the `animalName` variable. The resulting `formattedName` variable is then logged to the console, which outputs "Giraffe".
-## Questions:
- 1. What does the `titleCase` function do?
- - The `titleCase` function takes a string input and converts it to title case format, where the first letter of each word is capitalized and the rest are in lowercase.
-2. What is the input parameter for the `titleCase` function?
- - The input parameter for the `titleCase` function is a string called `word`.
-3. What regular expression is used in the `replace` method of the `titleCase` function?
- - The regular expression used in the `replace` method of the `titleCase` function is `/\w\S*/g`, which matches any word character followed by zero or more non-space characters.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/app/utils/truncate.md b/.autodoc/docs/markdown/app/utils/truncate.md
deleted file mode 100644
index 249fde2eb..000000000
--- a/.autodoc/docs/markdown/app/utils/truncate.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/app/utils/truncate.ts)
-
-The code above provides two functions that are used to truncate Ethereum addresses and ENS names. The purpose of these functions is to ensure that the addresses and names do not overflow when displayed on a user interface.
-
-The `truncateAddress` function takes an Ethereum address as its first argument and an optional `shrinkIndicator` as its second argument. The function then returns a truncated version of the address with the middle characters removed. The `slice` method is used to remove the middle characters of the address. The first four characters of the address are concatenated with the `shrinkIndicator` (if provided) and the last four characters of the address. If no `shrinkIndicator` is provided, an ellipsis (`…`) is used as the default indicator.
-
-The `truncateEns` function takes an ENS name as its first argument and an optional `shrinkIndicator` as its second argument. The function returns a truncated version of the ENS name if and only if the name is longer than 24 characters. The `slice` method is used to remove the middle characters of the name. The first 20 characters of the name are concatenated with the `shrinkIndicator` (if provided) and the last three characters of the name. If no `shrinkIndicator` is provided, an ellipsis (`…`) is used as the default indicator. If the name is shorter than or equal to 24 characters, the function returns the original name without any truncation.
-
-These functions can be used in a larger project to ensure that Ethereum addresses and ENS names are displayed in a user-friendly way. For example, a web3 application that displays Ethereum addresses and ENS names could use these functions to ensure that the addresses and names fit within a certain space on the user interface.
-
-Example usage of `truncateAddress`:
-```
-const address = '0x1234567890123456789012345678901234567890'
-const truncatedAddress = truncateAddress(address)
-console.log(truncatedAddress) // '0x12...7890'
-```
-
-Example usage of `truncateEns`:
-```
-const ensName = 'myverylongensname.eth'
-const truncatedEnsName = truncateEns(ensName)
-console.log(truncatedEnsName) // 'myvery...eth'
-```
-## Questions:
- 1. What is the purpose of the `truncateAddress` function?
-
- The `truncateAddress` function takes an Ethereum address and a visual indicator and returns a shortened version of the address with the middle characters removed, to prevent overflow.
-
-2. What is the purpose of the `truncateEns` function?
-
- The `truncateEns` function takes an ENS name and a visual indicator and returns a shortened version of the name with the middle characters removed, but only if the name is longer than 24 characters and would otherwise overflow.
-
-3. What is the purpose of the `shrinkInidicator` parameter?
-
- The `shrinkInidicator` parameter is a visual indicator that is used to show that the address or name has been truncated. If it is not provided, the default indicator of '…' is used.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/app/utils/wrappedContracts.md b/.autodoc/docs/markdown/app/utils/wrappedContracts.md
deleted file mode 100644
index c26d83533..000000000
--- a/.autodoc/docs/markdown/app/utils/wrappedContracts.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/app/utils/wrappedContracts.ts)
-
-This code defines a constant variable called `wrappedContracts` which is a Record object that maps numbers to Ethereum contract addresses. The keys of the Record object are numbers that represent the Ethereum network ID, and the values are the corresponding contract addresses for that network.
-
-This code is likely used in a larger project that interacts with Ethereum smart contracts. The purpose of this code is to provide a convenient way to access the contract addresses for different Ethereum networks. By using this Record object, developers can easily retrieve the contract address for a specific network ID without having to hardcode the address in their code.
-
-For example, if a developer wants to interact with a contract on the Ethereum mainnet, they can use the `wrappedContracts` object to retrieve the contract address like this:
-
-```
-import wrappedContracts from 'zoo'
-
-const mainnetAddress = wrappedContracts[1]
-```
-
-This will set the `mainnetAddress` variable to the contract address for the Ethereum mainnet. Similarly, if the developer wants to interact with a contract on the Polygon network, they can retrieve the contract address like this:
-
-```
-const polygonAddress = wrappedContracts[137]
-```
-
-Overall, this code provides a simple and flexible way to manage contract addresses for different Ethereum networks in a larger project.
-## Questions:
- 1. What is the purpose of this code?
- - This code defines a constant object `wrappedContracts` that maps network IDs to contract addresses.
-
-2. What is the data type of `wrappedContracts`?
- - The data type of `wrappedContracts` is `RecordWelcome to my website
-Check out our latest products!
- --
-
- Product 1 -
- Product 2 -
- Product 3 -
Endangered Animals
--
-
-
-
Sumatran Elephant
-
- Scientific Name: Elephas Maximus Sumatranus
-Sumatran elephants feed on a variety of plants and deposit seeds wherever they go, contributing to a healthy forest ecosystem. They also share their lush forest habitat with other endangered species.
-
-
-
` tag. The "image" property is used to display a picture of the animal using an `![]()
` tag. The "head" property is used to display the scientific name of the animal in a `
` tag. The "desc" property is used to display a brief description of the animal in another `
` tag. By using the data from the JSON object, the webpage can provide valuable information about endangered animals to users. -## Questions: - 1. What is the purpose of this code? -- This code defines a list of animals in a zoo, along with their images and descriptions. - -2. What information is included in the animal descriptions? -- The animal descriptions include the scientific name of the species, as well as information about their habitat, diet, and conservation status. - -3. Are there any other types of data that could be included for each animal? -- Depending on the needs of the project, additional data such as the animal's lifespan, behavior, or physical characteristics could be included for each animal. \ No newline at end of file diff --git a/.autodoc/docs/markdown/core/src/animation/index.md b/.autodoc/docs/markdown/core/src/animation/index.md deleted file mode 100644 index 2b448e413..000000000 --- a/.autodoc/docs/markdown/core/src/animation/index.md +++ /dev/null @@ -1,29 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/core/src/animation/index.tsx) - -This code is a collection of functions that use the GreenSock Animation Platform (GSAP) library to create various fade-in animations triggered by scrolling. The `import` statements at the beginning of the file bring in the necessary modules from the GSAP library, including the `ScrollTrigger` plugin. The `registerPlugin` method is then called to register the `ScrollTrigger` plugin with GSAP. - -The `fadeInOnScroll` function takes an HTML element as a parameter and returns a GSAP animation that fades in the element when it enters the viewport during scrolling. The `duration` parameter sets the length of the animation, and the `y` parameter determines the distance the element moves vertically as it fades in. The `scrollTrigger` object specifies the trigger element, the point at which the animation should start (`start: "top 90%"`), and the toggle actions that should occur when the element enters and leaves the viewport. - -The `fadeInFromRight` and `fadeInFromLeft` functions are similar to `fadeInOnScroll`, but they animate the element sliding in from the right or left side of the screen, respectively. The `x` parameter determines the distance the element moves horizontally as it fades in. - -The `fadeInFromRightFast` and `fadeInFromLeftFast` functions are similar to their non-"Fast" counterparts, but they have shorter animation durations and use a different easing function (`Power4.easeInOut`) for a snappier animation. - -The `fadeInOnScrollAndStagger` function is similar to `fadeInOnScroll`, but it also applies a stagger effect to the animation, causing the elements to fade in one after another with a slight delay. The `trigger` parameter specifies the element that triggers the animation, and the `end` parameter specifies the point at which the animation should end. - -These functions can be used in a larger project to add visual interest and interactivity to a webpage. For example, they could be used to animate the appearance of images or text as the user scrolls down the page. Here is an example of how the `fadeInOnScroll` function could be used to fade in an HTML element with the ID "myElement" when it enters the viewport during scrolling: - -``` -import { fadeInOnScroll } from "zoo"; - -const myElement = document.querySelector("#myElement"); -fadeInOnScroll(myElement); -``` -## Questions: - 1. What is the purpose of the `gsap` and `ScrollTrigger` imports? -- The `gsap` and `ScrollTrigger` imports are used for animation and scroll-triggered animation respectively. - -2. What do the `fadeInFromRight`, `fadeInFromRightFast`, `fadeInFromLeft`, and `fadeInFromLeftFast` functions do? -- These functions animate an element's opacity and position (either from the left or right) when it enters the viewport during scrolling. - -3. What is the purpose of the `stagger` property in the `fadeInOnScrollAndStagger` function? -- The `stagger` property is used to apply a staggered animation effect to multiple elements, with a specified delay between each element's animation. \ No newline at end of file diff --git a/.autodoc/docs/markdown/core/src/animation/loading-circle.md b/.autodoc/docs/markdown/core/src/animation/loading-circle.md deleted file mode 100644 index 6704003f5..000000000 --- a/.autodoc/docs/markdown/core/src/animation/loading-circle.md +++ /dev/null @@ -1,26 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/core/src/animation/loading-circle.json) - -The code is a JSON file that defines an animation project called "347-loader-18". The project has a single composition called "Watermark" that contains two layers. The first layer is an empty layer called "comp_0" that has no content. The second layer is a shape layer called "Shape Layer 9" that contains an animated ellipse with a stroke and fill. - -The stroke and fill colors of the ellipse are controlled by two color effects called "Primary" and "Secondary" respectively. These effects are linked to color controls that can be adjusted to change the colors of the ellipse. The stroke width of the ellipse is controlled by a slider effect called "Stroke". The size of the ellipse is fixed at 57x57 pixels, but its position and scale can be adjusted using the "Axis" and "Scale" effects respectively. - -The purpose of this code is to define an animated loading icon that can be used in a larger project. The loading icon can be customized by adjusting the color, stroke width, position, and scale of the ellipse. The code can be imported into an animation software like Adobe After Effects to create the actual animation. - -Here is an example of how the color of the ellipse can be changed using the "Primary" effect: - -``` -var primaryColor = [1, 0, 0]; // set primary color to red -var primaryEffect = thisComp.layer('Color & Stroke Change').effect('Primary')('Color'); -primaryEffect.setValue(primaryColor); -``` - -This code sets the primary color of the ellipse to red by getting a reference to the "Primary" effect and calling its `setValue()` method with an array of RGB values. -## Questions: - 1. What is the purpose of this code? -- This code appears to be defining the properties and animations for a shape layer in an Adobe After Effects project. - -2. What effects or controls are being applied to the shape layer? -- The shape layer has a "Color & Stroke Change" effect applied to it, which includes controls for primary and secondary colors, stroke width, and scale. - -3. What is the significance of the "NULL 2" and "NULL" layers? -- These layers appear to be null objects used to control the position, scale, and rotation of the shape layer. "NULL 2" is used to control the position and scale, while "NULL" is used to control the rotation. \ No newline at end of file diff --git a/.autodoc/docs/markdown/core/src/bootstrap.md b/.autodoc/docs/markdown/core/src/bootstrap.md deleted file mode 100644 index a2f485e21..000000000 --- a/.autodoc/docs/markdown/core/src/bootstrap.md +++ /dev/null @@ -1,26 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/core/src/bootstrap.ts) - -This code file contains a set of functions and extensions to existing classes that are used in the larger zoo project. - -The first section of the code imports various dependencies, including `BigNumber` and `Fraction` from the `@ethersproject/bignumber` package, as well as `React` and `Zero` from other packages. It also imports a function called `parseUnits` from `@ethersproject/units`. - -The next section of the code checks if the code is running in a browser environment and in development mode. If so, it imports and runs a package called `why-did-you-render`, which is used for debugging and optimizing React components. - -The remaining code defines several extensions to the `BigNumber` and `String` classes. - -The `mulDiv` function extends the `BigNumber` class and takes two arguments, `multiplier` and `divisor`, both of which are `BigNumberish` types. It returns a new `BigNumber` that is the result of multiplying the original `BigNumber` by the `multiplier` and dividing by the `divisor`. If the `divisor` is zero or negative, it returns `Zero`. - -The `toFraction` function also extends the `BigNumber` class and takes an optional argument `decimals`, which defaults to 18. It returns a new `Fraction` object that represents the `BigNumber` as a fraction with the specified number of decimal places. - -The `toFixed` function extends the `BigNumber` class and takes two optional arguments, `decimals` and `maxFractions`, both of which default to 18 and 8, respectively. It returns a string representation of the `BigNumber` with the specified number of decimal places and maximum number of fractions. - -The `toBigNumber` function extends the `String` class and takes an argument `decimals`. It attempts to parse the string as a `BigNumber` with the specified number of decimal places using the `parseUnits` function. If parsing fails, it returns `BigNumber.from(0)`. - -These extensions to the `BigNumber` and `String` classes provide additional functionality that is used throughout the zoo project. For example, the `mulDiv` function is used to calculate the price of tokens in various trading pairs, while the `toFraction` and `toFixed` functions are used to format token amounts and prices for display. The `toBigNumber` function is used to convert user input from strings to `BigNumber` objects. -## Questions: - 1. What is the purpose of the `Fraction` entity and how is it used in this code? - - The `Fraction` entity is imported from `./entities/Fraction` and is used to convert a `BigNumber` to a fraction with a specified number of decimals. -2. What is the significance of the `mulDiv` function added to the `BigNumber` prototype? - - The `mulDiv` function multiplies a `BigNumber` by a multiplier and divides it by a divisor, returning the result as a `BigNumber`. If the divisor is zero or negative, it returns `Zero`. -3. Why is the `whyDidYouRender` library being used in this code, and what options are being passed to it? - - The `whyDidYouRender` library is being used to track unnecessary re-renders in development mode. The options being passed to it include tracking all pure components, tracking hooks, logging owner reasons, and collapsing groups. \ No newline at end of file diff --git a/.autodoc/docs/markdown/core/src/components/AccountDetails/Copy.md b/.autodoc/docs/markdown/core/src/components/AccountDetails/Copy.md deleted file mode 100644 index 3498a0afb..000000000 --- a/.autodoc/docs/markdown/core/src/components/AccountDetails/Copy.md +++ /dev/null @@ -1,24 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AccountDetails/Copy.tsx) - -The `CopyHelper` component is a reusable React component that provides a UI for copying text to the clipboard. It is designed to be used in other parts of the `zoo` project where copying text is required. - -The component imports two icons from the `@heroicons/react/outline` package: `CheckCircleIcon` and `ClipboardCopyIcon`. It also imports the `useCopyClipboard` hook from a custom `useCopyClipboard` module, the `classNames` function from a custom `functions` module, and the `Typography` component from a custom `Typography` module. Additionally, it imports the `useLingui` hook and `t` function from the `@lingui/react` and `@lingui/macro` packages respectively. - -The `CopyHelper` component takes three props: `className`, `toCopy`, and `children`. `className` is an optional string that can be used to add additional CSS classes to the component. `toCopy` is a required string that represents the text to be copied to the clipboard. `children` is an optional prop that can be used to pass in additional React components to be rendered alongside the copy icon. - -The component uses the `useCopyClipboard` hook to manage the state of whether or not the text has been copied to the clipboard. It also uses the `useLingui` hook to provide internationalization support for the "Copied" text that is displayed when the text is successfully copied. - -The component renders a `div` element with a `classNames` function that combines the default classes with any additional classes passed in via the `className` prop. The `onClick` event is set to call the `setCopied` function with the `toCopy` prop as an argument when the component is clicked. - -If the text has been successfully copied, the component renders a `div` element with the "Copied" text and a `CheckCircleIcon`. If the text has not been copied, the component renders a `div` element with any additional components passed in via the `children` prop and a `ClipboardCopyIcon`. - -Overall, the `CopyHelper` component provides a simple and reusable UI for copying text to the clipboard, with support for internationalization and customization via the `className` and `children` props. An example usage of this component would be in a form where a user needs to copy a generated code or URL to the clipboard. -## Questions: - 1. What does this code do? - - This code exports a React component called `CopyHelper` that provides a UI for copying text to the clipboard and displaying a success message upon successful copy. - -2. What dependencies does this code rely on? - - This code relies on several external dependencies, including `@heroicons/react/outline`, `react`, `useCopyClipboard`, `../../functions`, `../Typography`, `@lingui/react`, and `@lingui/macro`. - -3. What props does the `CopyHelper` component accept? - - The `CopyHelper` component accepts three props: `className` (optional), `toCopy` (required), and `children` (optional). The `toCopy` prop specifies the text to be copied to the clipboard, and the `children` prop is used to render any additional content alongside the copy icon. \ No newline at end of file diff --git a/.autodoc/docs/markdown/core/src/components/AccountDetails/Transaction.md b/.autodoc/docs/markdown/core/src/components/AccountDetails/Transaction.md deleted file mode 100644 index 914fabaa1..000000000 --- a/.autodoc/docs/markdown/core/src/components/AccountDetails/Transaction.md +++ /dev/null @@ -1,22 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AccountDetails/Transaction.tsx) - -The `Transaction` component is a React functional component that displays information about a transaction on the Ethereum blockchain. It imports several dependencies from various packages, including `@zoolabs/zdk`, `@heroicons/react/outline`, and `@lingui/react`. - -The component takes a single prop, `hash`, which is the hash of the transaction to display. It then uses several hooks to retrieve information about the transaction from the Redux store, including `useActiveWeb3React` and `useAllTransactions`. - -The component then renders a div that displays the transaction summary and status. The summary is either the transaction hash or a user-defined summary if one exists. The status is displayed as an icon, with different icons representing pending, successful, cancelled, or failed transactions. - -If the transaction was submitted using the Archer network, additional information is displayed, including the nonce and tip amount. If the transaction is pending, the component also displays a countdown timer indicating how long until the transaction expires. If the transaction has expired, the component displays an "Expired" message. - -Finally, if the transaction is pending, the component allows the user to cancel the transaction by clicking a "Cancel" button. This sends a request to the Archer network to cancel the transaction, and updates the transaction status in the Redux store. - -This component is likely used in other parts of the project to display information about transactions, such as in a transaction history or on a confirmation page after submitting a transaction. -## Questions: - 1. What is the purpose of the `Transaction` component? -- The `Transaction` component is used to display information about a transaction, including its status, summary, and deadline. - -2. What is the `calculateSecondsUntilDeadline` function used for? -- The `calculateSecondsUntilDeadline` function is used to calculate the number of seconds until a transaction's deadline, which is used to determine whether the transaction has expired. - -3. What is the `cancelPending` function used for? -- The `cancelPending` function is used to cancel a pending transaction by sending a request to the Archer Relay API with the transaction's raw data and authorization headers. If the cancellation is successful, the transaction is marked as cancelled in the application state. \ No newline at end of file diff --git a/.autodoc/docs/markdown/core/src/components/AccountDetails/index.md b/.autodoc/docs/markdown/core/src/components/AccountDetails/index.md deleted file mode 100644 index 6c9864515..000000000 --- a/.autodoc/docs/markdown/core/src/components/AccountDetails/index.md +++ /dev/null @@ -1,44 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AccountDetails/index.tsx) - -The code is a React component that renders the account details of a user's wallet. It imports various dependencies such as React, Image, and Button from different modules. It also imports some functions and constants from other files such as `getExplorerLink` and `SUPPORTED_WALLETS`. - -The component takes in several props such as `toggleWalletModal`, `pendingTransactions`, `confirmedTransactions`, `ENSName`, and `openOptions`. It then uses these props to render the account details of the user's wallet. - -The component first uses the `useActiveWeb3React` hook to get the current chain ID, account, and connector of the user's wallet. It then uses the `useSelector` hook to get the user's ZOO balance from the Redux store. - -The component then defines several functions such as `formatConnectorName` and `getStatusIcon` that are used to format and display the user's wallet connector and status icon. - -The component then renders the user's account details such as their wallet address, balance, and recent transactions. It also provides buttons to disconnect the wallet, change the wallet, view the wallet on an explorer, and copy the wallet address. - -The component also defines a `WalletIcon` component that renders the icon of the user's wallet connector. It also defines a `renderTransactions` function that renders the user's recent transactions. - -Overall, this component is an important part of the larger project as it provides users with a way to view and manage their wallet details and transactions. It can be used in various parts of the project such as the wallet modal and the dashboard. - -Example usage: - -```jsx -import AccountDetails from "./components/AccountDetails"; - -function App() { - return ( -
- console.log("Toggle wallet modal")}
- pendingTransactions={["0x123abc", "0x456def"]}
- confirmedTransactions={["0x789ghi"]}
- ENSName="mywallet.eth"
- openOptions={() => console.log("Open wallet options")}
- />
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `AccountDetails` component?
-- The `AccountDetails` component is responsible for rendering the account details of the user, including their wallet balance, recent transactions, and wallet connector information.
-
-2. What libraries and hooks are being used in this file?
-- This file is using several libraries and hooks, including React, Next.js, Lingui, and Feather icons. It is also using custom hooks such as `useActiveWeb3React` and `useDispatch`, as well as Redux for state management.
-
-3. What is the purpose of the `WalletIcon` component?
-- The `WalletIcon` component is a reusable component that renders an image of a wallet icon along with any children components passed to it. It is used in the `getStatusIcon` function to display the appropriate wallet icon based on the user's wallet connector.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/AddressInputPanel/index.md b/.autodoc/docs/markdown/core/src/components/AddressInputPanel/index.md
deleted file mode 100644
index 121a5c1d9..000000000
--- a/.autodoc/docs/markdown/core/src/components/AddressInputPanel/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AddressInputPanel/index.tsx)
-
-The `AddressInputPanel` component is a React functional component that renders an input field for an Ethereum address. It takes in three props: `id`, `value`, and `onChange`. The `id` prop is an optional string that is used to set the ID of the component's root element. The `value` prop is a string that represents the current value of the input field. The `onChange` prop is a callback function that is called whenever the value of the input field changes.
-
-The component uses the `useLingui` hook from the `@lingui/react` package to provide internationalization support. It also uses the `useENS` hook from a custom `useENS` hook to resolve Ethereum addresses to their corresponding ENS names.
-
-The component renders a div element with a class of `flex flex-row bg-dark-800 rounded items-center h-[68px]`. This div contains two child elements: a div element with a class of `flex justify-between w-full px-5 sm:w-2/5` and a div element with a class of `flex w-full h-full border-2 rounded-r sm:w-3/5 border-dark-800`. The first child element contains two span elements: one with a class of `text-[18px] text-primary` that displays the text "Send to:", and one with a class of `text-sm underline cursor-pointer text-blue` that displays the text "Remove" and calls the `onChange` callback with a value of `null` when clicked. The second child element contains an `Input.Address` component that renders an input field for an Ethereum address.
-
-The component also sets the `error` variable to `true` if the `value` prop is not an empty string and the `loading` and `address` variables returned by the `useENS` hook are both `false`. If `error` is `true`, the component adds a red border to the root div element.
-
-This component can be used in a larger project that requires an input field for Ethereum addresses. It provides internationalization support and ENS resolution, and allows for customization through the `id`, `value`, and `onChange` props. Here is an example of how this component can be used:
-
-```
-import AddressInputPanel from './AddressInputPanel'
-
-function MyComponent() {
- const [address, setAddress] = useState('')
-
- const handleAddressChange = useCallback((value) => {
- setAddress(value)
- }, [])
-
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `AddressInputPanel` that renders an input field for an Ethereum address and uses the ENS (Ethereum Name Service) to resolve the address from a human-readable name.
-
-2. What are the dependencies of this code?
-- This code imports several modules from external packages, including `React`, `@lingui/macro`, `@lingui/react`, and a custom `Input` component. It also uses a custom `useENS` hook defined elsewhere in the project.
-
-3. What props does the `AddressInputPanel` component accept?
-- The `AddressInputPanel` component accepts three props: `id` (an optional string), `value` (a string representing the current value of the input field), and `onChange` (a callback function that is called whenever the input value changes).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Alert/index.md b/.autodoc/docs/markdown/core/src/components/Alert/index.md
deleted file mode 100644
index fe0c7a90a..000000000
--- a/.autodoc/docs/markdown/core/src/components/Alert/index.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Alert/index.tsx)
-
-The code defines an Alert component that can be used to display messages to users. The component takes in several props, including a title, message, type, showIcon, dismissable, show, and setShow. The title and message props are used to display the content of the alert, while the type prop determines the color and icon used to display the alert. The showIcon prop determines whether or not to display the icon associated with the alert type. The dismissable prop determines whether or not the user can dismiss the alert. The show and setShow props are used to control the visibility of the alert.
-
-The component uses the useState hook to manage the visibility of the alert. The defaultShow state is used to determine whether or not to show the alert by default. The setShow prop is used to update the show state when the user dismisses the alert.
-
-The component renders a div with the appropriate color and icon based on the type prop. The title and message props are displayed within the div. If the dismissable prop is true, a button is displayed that allows the user to dismiss the alert. The button updates the show state when clicked.
-
-This component can be used throughout the larger project to display alerts to users. For example, it could be used to display error messages when a user enters invalid input or to display information messages when a user successfully completes an action. Here is an example of how the component could be used:
-
-```
-
- {animals.map(animal => (
-
- );
-};
-```
-
-In this example, an array of animal objects is defined with a `name` and `description` property. The `Zoo` component maps over this array and renders an `AnimalInfo` component for each animal, passing in the `name` and `description` as props. This results in a list of animals with their names, descriptions, and a link to learn more.
-## Questions:
- 1. What is the purpose of the AnimalInfo component?
- The AnimalInfo component is designed to display information about an animal, including a title, content, and a "Learn more" link.
-
-2. What styling classes are applied to the AnimalInfo component?
- The AnimalInfo component has several styling classes applied to it, including "px-2", "py-6", "lg:px-6", "lg:basis-1/3", "lg:bg-black100", and "lg:rounded-3xl". These classes control the padding, background color, and layout of the component.
-
-3. What is the purpose of the "rel" attribute on the "Learn more" link?
- The "rel" attribute on the "Learn more" link is set to "noreferrer", which tells the browser not to send the referrer information when the link is clicked. This can help protect the user's privacy.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/AnimalFamily/index.md b/.autodoc/docs/markdown/core/src/components/AnimalFamily/index.md
deleted file mode 100644
index 1b20ec44f..000000000
--- a/.autodoc/docs/markdown/core/src/components/AnimalFamily/index.md
+++ /dev/null
@@ -1,58 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AnimalFamily/index.tsx)
-
-The code above defines a React component called `AnimalFamily`. This component takes in four props: `image`, `name`, `title`, and `content`. It then returns a JSX element that renders an animal family card with an image, name, and a button to buy an NFT.
-
-The `Image` component is imported from the `next/image` library and is used to display the animal image. The `Link` component is imported from the `next/link` library and is used to wrap the "Buy NFT" button, which links to the `/nft` page.
-
-The `AnimalInfo` component is imported from the `pages/animal-info` file, which is not shown in this code snippet. It is likely that this component contains additional information about the animal family that is displayed when the user clicks on the animal card.
-
-This component is likely used in a larger project that involves displaying information about different animal families. It can be used by passing in different props for each animal family, such as the image URL, name, and any additional information.
-
-Here is an example of how this component can be used in another file:
-
-```
-import AnimalFamily from "zoo/AnimalFamily";
-
-const animalFamilies = [
- {
- image: "lion.jpg",
- name: "Lion Family",
- title: "The King of the Jungle",
- content: "The lion family is known for its strength and courage.",
- },
- {
- image: "elephant.jpg",
- name: "Elephant Family",
- title: "The Gentle Giants",
- content: "The elephant family is known for its intelligence and empathy.",
- },
-];
-
-const Zoo = () => {
- return (
-
- {animalFamilies.map((family) => (
-
- );
-};
-
-export default Zoo;
-```
-
-In this example, the `Zoo` component renders multiple `AnimalFamily` components by mapping over an array of animal families. Each `AnimalFamily` component is passed in the relevant props for that animal family. This allows for easy and dynamic rendering of different animal families in the larger project.
-## Questions:
- 1. What is the purpose of the `AnimalFamily` component?
-- The `AnimalFamily` component is used to display information about an animal, including an image, name, and a link to buy an NFT.
-
-2. What libraries or frameworks are being used in this code?
-- The code is using the `next/image` and `next/link` libraries, as well as a custom `AnimalInfo` component located in the `pages` directory.
-
-3. What is the expected output of this code?
-- The expected output of this code is a styled component that displays an animal image, name, and a link to buy an NFT. The `AnimalInfo` component is also included in the output, but its purpose is not clear from this code snippet alone.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/AnimalInfo/index.md b/.autodoc/docs/markdown/core/src/components/AnimalInfo/index.md
deleted file mode 100644
index f3fbd691c..000000000
--- a/.autodoc/docs/markdown/core/src/components/AnimalInfo/index.md
+++ /dev/null
@@ -1,27 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/AnimalInfo/index.tsx)
-
-The code defines a React component called `AnimalFamilyInfo` that displays information about an animal family. The component takes in four props: `name` (a string representing the name of the animal family), `image` (a string representing the filename of the image to display), `descriptionHead` (a string representing the heading of the description), and `description` (a string representing the description of the animal family).
-
-The component returns a div that contains three child divs. The first child div contains an image of the animal family, which is displayed using the `next/image` component. The second child div contains the name of the animal family, which is displayed as a heading. The third child div contains the description of the animal family, which is displayed as a paragraph of text. The description also includes a link to learn more about the animal family.
-
-The component uses CSS classes to style the different elements of the component. The image is displayed with a black background and rounded corners, while the name and description are displayed with a white background. The description also has a green link to learn more about the animal family.
-
-This component can be used in a larger project that displays information about different animal families. The component can be reused for each animal family, with the `name`, `image`, `descriptionHead`, and `description` props being passed in as needed. For example, the component could be used in a zoo website to display information about different animal families, such as lions, tigers, and bears.
-
-Example usage:
-
-```
-
-
- );
-}
-
-export default App;
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
- - This code is a React component that sets up a Babylon.js scene and renders it on a canvas element. It takes in various props to customize the scene and render loop.
-
-2. What dependencies does this code have?
- - This code imports several modules from the Babylon.js library, including Engine, Scene, SceneLoader, FreeCamera, Vector3, and Color4. It also imports React and useRef from the React library.
-
-3. What props can be passed to this component and what do they do?
- - This component accepts several props, including antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady, and clearColor. These props can be used to customize the Babylon.js scene and render loop, such as setting the antialiasing level, engine options, and scene options, as well as defining callbacks for when the scene is ready and when each frame is rendered. The clearColor prop sets the background color of the scene.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Babylon/index.md b/.autodoc/docs/markdown/core/src/components/Babylon/index.md
deleted file mode 100644
index 4083bfbc8..000000000
--- a/.autodoc/docs/markdown/core/src/components/Babylon/index.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Babylon/index.tsx)
-
-The `BabylonAnim` component is a React component that renders a 3D animal model using the Babylon.js library. The component takes several props that allow customization of the animal model and camera position. The component also has an optional AR mode that can be enabled by setting the `isArAble` prop to `true`.
-
-The `onSceneReady` function is called when the Babylon.js scene is ready. It creates an `ArcRotateCamera` and attaches it to the canvas. It then loads the 3D animal model using the `SceneLoader.ImportMeshAsync` method and sets its position and rotation. It also creates lights and an environment for the scene.
-
-The `onRender` function is called on every frame render and can be used to update the scene. In this case, it calculates the time since the last frame render.
-
-The component returns a `SceneComponent` that renders the Babylon.js scene and a button for AR mode if enabled. The `SceneComponent` takes the `onSceneReady` and `onRender` functions as props.
-
-This component can be used in a larger project that requires 3D models to be rendered using Babylon.js. The component can be customized by passing different props to change the animal model, camera position, and enable AR mode. The `onSceneReady` and `onRender` functions can also be modified to add additional functionality to the scene.
-
-Example usage:
-
-```
-import BabylonAnim from "./BabylonAnim";
-
-function App() {
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `BabylonAnim` component?
-- The `BabylonAnim` component is responsible for rendering a 3D animal model using Babylon.js library and allows for AR functionality.
-
-2. What is the significance of the `useRef` hook being used to create the `animalModel` variable?
-- The `useRef` hook is used to create a reference to the animal model that is loaded asynchronously using `SceneLoader.ImportMeshAsync()`, which allows for manipulation of the model's properties.
-
-3. What is the purpose of the `onRender` function?
-- The `onRender` function is called on every frame render and is used to calculate the time elapsed since the last frame using `scene.getEngine().getDeltaTime()`. However, it is currently not being used for any other purpose.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Back/index.md b/.autodoc/docs/markdown/core/src/components/Back/index.md
deleted file mode 100644
index 35e9bf4d4..000000000
--- a/.autodoc/docs/markdown/core/src/components/Back/index.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Back/index.tsx)
-
-This code defines a React component called `Back` that renders a link to go back to the previous page in the browser history. The component uses the `useLingui` hook from the `@lingui/react` library to enable internationalization (i18n) of the text displayed in the link. The `t` function from the `@lingui/macro` library is used to mark the text for translation. The `useRouter` hook from the `next/router` library is used to access the router object and its `back` method, which navigates to the previous page in the browser history.
-
-The `Back` component is intended to be used in a larger project that uses React and Next.js for server-side rendering. It can be included in any page or component that needs to provide a way for the user to go back to the previous page. The component can be customized by changing the text displayed in the link, as well as the styles applied to the link.
-
-Here is an example of how the `Back` component can be used in a Next.js page:
-
-```
-import Back from '../components/Back'
-
-const MyPage = () => {
- return (
-
-
- )
-}
-
-export default MyPage
-```
-
-In this example, the `Back` component is included at the end of the page content to provide a way for the user to go back to the previous page. When the user clicks on the link, the `router.back` method is called, which navigates to the previous page in the browser history. The text displayed in the link is translated based on the user's language preference, as determined by the `useLingui` hook.
-## Questions:
- 1. What is the purpose of the `useLingui` hook and the `@lingui/macro` package?
-- The `useLingui` hook and `@lingui/macro` package are used for internationalization (i18n) and localization (l10n) of the application's text content.
-
-2. What is the purpose of the `useRouter` hook from the `next/router` package?
-- The `useRouter` hook is used to access the Next.js router object, which allows for programmatic navigation between pages in the application.
-
-3. What is the purpose of the `Back` component and how is it used?
-- The `Back` component is a reusable component that renders a link with a back arrow icon and localized text for "Go Back". It is used to provide a consistent UI element for navigating back to the previous page in the application.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Badge/index.md b/.autodoc/docs/markdown/core/src/components/Badge/index.md
deleted file mode 100644
index 585f13ec2..000000000
--- a/.autodoc/docs/markdown/core/src/components/Badge/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Badge/index.tsx)
-
-This code defines a React component called `Badge` that can be used to display a badge with different colors and sizes. The component takes in three optional props: `color`, `size`, and `children`. The `color` prop can be set to one of four possible values: "default", "blue", "pink", or "gradient". The `size` prop can be set to one of three possible values: "default", "medium", or "large". The `children` prop is used to pass in the content that should be displayed inside the badge.
-
-The `COLOR` object defines the styles for each of the four possible badge colors. The `SIZE` object defines the font size for each of the three possible badge sizes. The `Badge` function takes in the `color`, `size`, and `className` props, and uses them to dynamically apply the appropriate styles to the badge. The `className` prop is used to allow for additional custom styles to be applied to the badge.
-
-This component can be used in a larger project to display badges with different colors and sizes. For example, it could be used to display badges indicating the status of an item (e.g. "new", "popular", "on sale", etc.). Here is an example of how the `Badge` component could be used:
-
-```
-import Badge from "./Badge";
-
-function App() {
- return (
- My Page
-This is my page content.
-
- New
- Popular
- On Sale
-
- );
-}
-```
-
-This would display three badges with different colors, sizes, and content.
-## Questions:
- 1. What are the possible values for `BadgeColor` and `BadgeSize`?
-- `BadgeColor` can be one of "default", "blue", "pink", or "gradient". `BadgeSize` can be one of "default", "medium", or "large".
-
-2. What is the purpose of the `COLOR` and `SIZE` constants?
-- `COLOR` and `SIZE` are objects that define the CSS classes for different badge colors and sizes respectively. These classes are used in the `Badge` component to style the badge.
-
-3. What is the purpose of the `Badge` component and what props does it accept?
-- The `Badge` component is a reusable component that renders a badge with a specified color and size. It accepts `color`, `size`, `children`, and `className` props.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Banner/index.md b/.autodoc/docs/markdown/core/src/components/Banner/index.md
deleted file mode 100644
index 387849ec1..000000000
--- a/.autodoc/docs/markdown/core/src/components/Banner/index.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Banner/index.tsx)
-
-The `Banner` component is a React functional component that displays a banner at the top of the screen. The banner can be of two types: "default" or "network_migration". The default banner displays a link to a BSC Scan page, while the network_migration banner displays a link to migrate the network to get new tokens.
-
-The component imports several other components and hooks from the project, including `XIcon` from `@heroicons/react/outline`, `Copy` from `components/AccountDetails/Copy`, `Typography` from `components/Typography`, `useNetworkMigrationModalToggle` from `state/application/hooks`, and `NetworkMigrationModal` from `modals/NetworkMigrationModal`.
-
-The component uses the `useState` hook to manage the state of the `showBanner` variable, which determines whether the banner is displayed or not. The `toggleNetworkMigrationModal` function is used to toggle the state of the network migration modal.
-
-The component returns a fragment that conditionally renders the banner based on the value of `showBanner` and the `type` prop. If `showBanner` is true and `type` is "network_migration", the component renders a banner with a link to migrate the network. If `showBanner` is true and `type` is "default", the component renders a banner with a link to a BSC Scan page. If `showBanner` is false, the component does not render anything.
-
-The banner is styled using Tailwind CSS classes, and includes an X icon that can be clicked to dismiss the banner. The `NetworkMigrationModal` component is also rendered at the bottom of the banner.
-
-This component can be used in the larger project to display important information or calls to action at the top of the screen. The `type` prop can be used to customize the content of the banner based on the context in which it is used. The `showBanner` state can be controlled by other components or hooks to show or hide the banner based on certain conditions.
-## Questions:
- 1. What is the purpose of the `Banner` component?
-- The `Banner` component is used to display a banner with different content based on the `type` prop passed to it.
-
-2. What is the `useNetworkMigrationModalToggle` hook used for?
-- The `useNetworkMigrationModalToggle` hook is used to toggle the visibility of the `NetworkMigrationModal` component.
-
-3. What is the purpose of the `Copy` component?
-- The `Copy` component is used to copy a URL to the clipboard when clicked, and it also renders a child component with the URL as a link.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Blocklist/index.md b/.autodoc/docs/markdown/core/src/components/Blocklist/index.md
deleted file mode 100644
index 41641686e..000000000
--- a/.autodoc/docs/markdown/core/src/components/Blocklist/index.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Blocklist/index.tsx)
-
-The code above is a React component called `Blocklist` that checks if a user's Ethereum address is blocked. The purpose of this component is to prevent users with blocked addresses from accessing certain parts of the application.
-
-The component imports `React` and `useMemo` from the `react` library, as well as `BLOCKED_ADDRESSES` and `useActiveWeb3React` from other files in the project.
-
-The `Blocklist` component takes in a `children` prop, which is a `ReactNode` type. This prop is used to render the children components of the `Blocklist` component.
-
-The `useActiveWeb3React` hook is used to get the user's Ethereum address from the active Web3 React context. The `useMemo` hook is used to memoize the result of the `Boolean` function that checks if the user's address is in the `BLOCKED_ADDRESSES` array.
-
-If the user's address is in the `BLOCKED_ADDRESSES` array, the `blocked` variable will be `true`, and the component will return a `` element with the text "Blocked address". Otherwise, the component will return the `children` components.
-
-This component can be used in the larger project to prevent users with blocked addresses from accessing certain parts of the application. For example, it can be used to prevent users with known fraudulent addresses from interacting with the application's smart contracts.
-
-Here is an example of how the `Blocklist` component can be used in another component:
-
-```
-import React from 'react'
-import Blocklist from './Blocklist'
-
-export default function MyComponent() {
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `BLOCKED_ADDRESSES` constant?
-- `BLOCKED_ADDRESSES` is a constant that likely contains a list of addresses that are not allowed to access certain parts of the application.
-
-2. What is the `useMemo` hook used for in this code?
-- The `useMemo` hook is used to memoize the result of a function that determines whether the current user's account is in the `BLOCKED_ADDRESSES` list. This can improve performance by avoiding unnecessary re-renders.
-
-3. What does the `Blocklist` component do if the user's account is blocked?
-- If the user's account is in the `BLOCKED_ADDRESSES` list, the `Blocklist` component will render a simple message saying "Blocked address". Otherwise, it will render its children.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/BlogCards/index.md b/.autodoc/docs/markdown/core/src/components/BlogCards/index.md
deleted file mode 100644
index fbd8453ab..000000000
--- a/.autodoc/docs/markdown/core/src/components/BlogCards/index.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/BlogCards/index.tsx)
-
-The code above is a React component that renders a section containing a list of blog articles and a link to the Zoo Medium page. The component takes in an object called `data` as a prop, which is an array of objects representing each blog article.
-
-The `section` element has a class name of `pb-16 px-6 lg:max-w-7xl lg:mx-auto`, which sets the padding and maximum width of the section for different screen sizes. The `div` element inside the section has a class name of `flex flex-col items-center mb-16 lg:grid lg:grid-cols-3 lg:place-items-stretch lg:gap-12`, which sets the layout of the blog articles for different screen sizes.
-
-The `data` array is mapped over using the `map` method, which returns an `Article` component for each object in the array. The `Article` component is imported from the `components/blog/articles` file. The `key` prop is set to the `name` property of each article object to ensure that each component has a unique identifier.
-
-The `div` element after the `map` method is used to render a link to the Zoo Medium page. The link has a class name of `border border-green text-green text-sm md:text-base font-semibold px-8 py-3 md:px-6 lg:px-16 rounded-full hover:cursor-pointer`, which sets the styling of the link. The `href` attribute is set to the Zoo Medium page URL, and the `target` attribute is set to `_blank` to open the link in a new tab. The `rel` attribute is set to `noreferrer` to prevent security risks.
-
-Finally, the `BlogCards` component is exported as the default export of the file. This component can be used in other parts of the Zoo project to render a list of blog articles and a link to the Zoo Medium page.
-
-Example usage:
-
-```
-import BlogCards from "components/blog/cards";
-
-const BlogPage = () => {
- const articles = [
- { name: "Article 1", content: "..." },
- { name: "Article 2", content: "..." },
- { name: "Article 3", content: "..." },
- ];
-
- return (
- 
,
- name: "Cool NFT",
- address: "0x1234567890abcdef",
- price: "1.23",
- days: "5",
- yields: "10%",
- currency: "ETH",
-};
-
-const NftCardPage = () => {
- return (
-
-
- );
-}
-```
-
-In the example above, the Card component is used to display a product card. The product card displays the product image as the background image, the product name as the title, and the product description as the description. The content of the card is a div that displays the product price and an "Add to Cart" button.
-## Questions:
- 1. What is the purpose of the `Header` function and how is it used within the `Card` component?
-
- The `Header` function is a separate component that takes in a `className` and `children` prop and returns a div element with the `className` and `children` passed in. It is used within the `Card` component to render the header of the card if it is provided as a prop.
-
-2. What props can be passed into the `Card` component and what is their purpose?
-
- The `Card` component can receive several props including `header`, `footer`, `backgroundImage`, `title`, `description`, `children`, and `className`. These props are used to customize the content and styling of the card component.
-
-3. What is the purpose of the `classNames` function imported from "../../functions/styling" and how is it used within the `Header` component?
-
- The `classNames` function is used to concatenate multiple class names together into a single string. It is used within the `Header` component to combine the `className` prop passed into the component with the default class names for the header div element.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Carousel/index.md b/.autodoc/docs/markdown/core/src/components/Carousel/index.md
deleted file mode 100644
index 812e8497b..000000000
--- a/.autodoc/docs/markdown/core/src/components/Carousel/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Carousel/index.tsx)
-
-The code above defines a React component called `Carousel` that uses the Swiper library to create a carousel of slides. The `Swiper` component is imported from the `swiper/react` module, along with the `SwiperSlide`, `Pagination`, and `Navigation` components. The `swiper/css`, `swiper/css/pagination`, and `swiper/css/navigation` modules are also imported to provide the necessary CSS styles for the carousel.
-
-The `Carousel` component takes a single prop called `children`, which is expected to be an array of `SwiperSlide` components. These components represent the individual slides in the carousel and can contain any valid React content.
-
-The `Swiper` component is configured with several props that control its behavior. The `slidesPerView` prop determines how many slides are visible at once, while the `spaceBetween` prop sets the distance between each slide. The `slidesPerGroup` prop specifies how many slides should be scrolled at once, and the `loop` prop enables infinite looping of the slides. The `pagination` prop enables pagination for the carousel and accepts an object with various options, such as `clickable` to allow clicking on the pagination bullets. The `navigation` prop enables navigation arrows for the carousel. Finally, the `modules` prop is used to specify which Swiper modules should be loaded, in this case `Pagination` and `Navigation`.
-
-The `Carousel` component returns a div that wraps the `Swiper` component and sets some styling using Tailwind CSS classes. The `Swiper` component is passed the `children` prop, which should be an array of `SwiperSlide` components.
-
-This code can be used in a larger project to create a carousel of images, videos, or any other content that can be displayed in a slide format. The `Carousel` component can be imported and used in any React component that needs a carousel. For example:
-
-```
-import Carousel from './Carousel'
-import Slide from './Slide'
-
-const MyComponent = () => {
- return (
-
-
- )
-}
-```
-
-In this example, the `MyComponent` component imports the `Carousel` and `Slide` components and uses them to create a carousel of three slides, each with an image and a caption. The `Carousel` component takes care of the layout and behavior of the carousel, while the `Slide` component defines the content of each slide.
-## Questions:
- 1. What is the purpose of the `Swiper` library and how is it being used in this code?
- - The `Swiper` library is being used to create a carousel component with pagination and navigation. It is imported and configured with various options such as `slidesPerView`, `spaceBetween`, and `loop`.
-2. What is the purpose of the `Carousel` component and how is it being used?
- - The `Carousel` component is a wrapper around the `Swiper` component that accepts `children` as props. It is being used to render a carousel with the specified options and the child components passed to it.
-3. Why are the `Pagination` and `Navigation` modules being imported separately and passed as props to the `Swiper` component?
- - The `Pagination` and `Navigation` modules are being imported separately and passed as props to the `Swiper` component to enable pagination and navigation functionality. This allows for more modular and customizable usage of the `Swiper` library.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/CartSideNav/index.md b/.autodoc/docs/markdown/core/src/components/CartSideNav/index.md
deleted file mode 100644
index fbdeb805a..000000000
--- a/.autodoc/docs/markdown/core/src/components/CartSideNav/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CartSideNav/index.tsx)
-
-The `CartSideNav` component is a React component that renders a shopping cart side navigation bar. It imports the `useState` hook from the `react` library and the `useAppSelector` hook from a custom `state/hooks` module. It also imports the `CartItem` type from a custom `types/cart` module.
-
-The component renders a shopping cart icon with the number of items in the cart. When the icon is clicked, a dropdown menu appears with a list of items in the cart. Each item in the list displays an image, name, size, color, and quantity. The user can edit the quantity of an item by clicking the edit button and entering a new quantity in the input field that appears. The user can also delete an item from the cart by clicking the delete button.
-
-The `CartSideNav` component uses the `useAppSelector` hook to retrieve the `CartItems` array from the Redux store. The `useState` hook is used to manage the state of the `toggleCart`, `quantity`, and `showInput` variables. The `toggleCart` variable is used to toggle the visibility of the dropdown menu. The `quantity` variable is used to store the new quantity entered by the user. The `showInput` variable is used to toggle the visibility of the quantity input field.
-
-The component returns a JSX fragment that conditionally renders the shopping cart icon and the dropdown menu. The icon and the number of items in the cart are only displayed if there is at least one item in the cart. The dropdown menu is only displayed if the `toggleCart` variable is true.
-
-The dropdown menu is implemented using a `ul` element with a list of `div` elements that display the details of each item in the cart. The `map` method is used to iterate over the `CartItems` array and render a `div` element for each item. The `key` attribute is set to the `index` of each item to improve performance.
-
-Overall, the `CartSideNav` component provides a user-friendly way to view and manage the items in the shopping cart. It can be easily integrated into a larger e-commerce application to improve the user experience.
-## Questions:
- 1. What is the purpose of the `useAppSelector` hook and how is it used in this code?
- - The `useAppSelector` hook is used to extract data from the Redux store and is passed a callback function that takes the store state as an argument. In this code, it is used to extract an array of `CartItem` objects from the store state.
-2. What is the purpose of the `toggleCart` state variable and how is it used in this code?
- - The `toggleCart` state variable is used to toggle the visibility of the cart side navigation when the cart icon is clicked. It is initialized to `false` and toggled using the `setToggleCart` function when the cart icon is clicked.
-3. What is the purpose of the `showInput` state variable and how is it used in this code?
- - The `showInput` state variable is used to toggle the visibility of the quantity input field when the edit button is clicked. It is initialized to `false` and toggled using the `setShowInput` function when the edit button is clicked.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Checkbox/index.md b/.autodoc/docs/markdown/core/src/components/Checkbox/index.md
deleted file mode 100644
index 639f496fb..000000000
--- a/.autodoc/docs/markdown/core/src/components/Checkbox/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Checkbox/index.tsx)
-
-This code defines a React component called `Checkbox` that renders an HTML checkbox input element. The component takes in a `color` prop, which is a string that can be one of three values: "pink", "blue", or "indigo". The `set` prop is a function that is called whenever the checkbox is checked or unchecked, and it takes in a boolean value that represents the new checked state of the checkbox.
-
-The `COLOR` object is used to map each color string to a CSS class that is applied to the checkbox element when it is checked. These classes define the background color and focus ring color of the checkbox.
-
-The `Checkbox` component renders an `input` element with the `type` attribute set to "checkbox". It also sets an `onChange` event handler that calls the `set` function with the new checked state of the checkbox. The `className` prop is used to add additional CSS classes to the checkbox element, and it defaults to an empty string if not provided.
-
-This component can be used in other parts of the project to render a checkbox input element with a specific color and behavior. For example, it could be used in a form to allow the user to select one or more options. Here is an example usage of the `Checkbox` component:
-
-```jsx
-import Checkbox from "./Checkbox";
-
-function MyForm() {
- const [isChecked, setIsChecked] = useState(false);
-
- return (
-
- );
-}
-```
-
-In this example, the `Checkbox` component is used to render a pink checkbox with the label "Option 1". The `setIsChecked` function is called whenever the checkbox is checked or unchecked, and it updates the `isChecked` state variable accordingly.
-## Questions:
- 1. What is the purpose of the `QuestionHelper` and `Settings` imports?
- - It is unclear from this code snippet what the `QuestionHelper` and `Settings` modules are used for. Further investigation into the codebase may be necessary to determine their purpose.
-
-2. What is the significance of the `Color` type and `COLOR` object?
- - The `Color` type is a union of three string literals, and the `COLOR` object maps each of these strings to a CSS class string. It is likely that this code is used to generate checkboxes with different colors based on the `color` prop passed to the `Checkbox` component.
-
-3. What is the purpose of the `set` function in the `CheckboxProps` interface?
- - The `set` function is a callback that is called when the checkbox is checked or unchecked. It is likely that this function is used to update the state of the parent component that renders the `Checkbox`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/CloseIcon/index.md b/.autodoc/docs/markdown/core/src/components/CloseIcon/index.md
deleted file mode 100644
index 887e2ee0a..000000000
--- a/.autodoc/docs/markdown/core/src/components/CloseIcon/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CloseIcon/index.tsx)
-
-The code above defines a React component called `CloseIcon`. This component renders an `X` icon from the `react-feather` library and applies a `cursor-pointer` class to it. The `props` parameter allows for additional props to be passed in and spread onto the `X` element.
-
-This component can be used in a larger project as a reusable icon for closing or dismissing a modal, dialog, or other UI element. For example, in a modal component, the `CloseIcon` component can be used as the close button to dismiss the modal when clicked.
-
-Here is an example of how the `CloseIcon` component can be used in a modal component:
-
-```
-import React from 'react'
-import CloseIcon from './CloseIcon'
-
-const Modal = ({ isOpen, onClose, children }) => {
- return (
-
-
-);
-```
-## Questions:
- 1. What is the purpose of the `Column` and `ColumnCenter` components?
-- The `Column` component is a flex container that vertically centers its children, while the `ColumnCenter` component is a variant of `Column` that horizontally centers its children as well.
-2. What are the possible values for the `gap` and `justify` props in the `AutoColumn` component?
-- The `gap` prop can be set to `"sm"`, `"md"`, `"lg"`, or a custom string value, while the `justify` prop can be set to `"stretch"`, `"center"`, `"start"`, `"end"`, `"flex-start"`, `"flex-end"`, or `"space-between"`.
-3. What is the purpose of the `classNames` function imported from "../../functions"?
-- The `classNames` function is likely a utility function that concatenates multiple class names together with a space separator, allowing for more flexible and dynamic class name generation in the components. However, without seeing the implementation of the `classNames` function, it is difficult to say for certain.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/ComingSoon/index.md b/.autodoc/docs/markdown/core/src/components/ComingSoon/index.md
deleted file mode 100644
index 5616d7353..000000000
--- a/.autodoc/docs/markdown/core/src/components/ComingSoon/index.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ComingSoon/index.tsx)
-
-This code defines a React component called `ComingSoon` that displays a "Coming Soon" message and a link to the home page of the website. The component imports the `React` and `useEffect` modules from the `react` package, as well as the `Link` component from the `next/link` package. It also imports an `fadeInOnScroll` function from an `animation` module.
-
-The `ComingSoon` component renders a div that contains another div with a `flex` layout. The inner div contains a heading that says "Coming Soon" and a link to the home page. The `comingSoonRef` variable is a reference to the inner div, which is used to apply an animation effect when the component is scrolled into view. The `useEffect` hook is used to call the `fadeInOnScroll` function with the `comingSoonRef` reference as an argument when the component is mounted.
-
-This component can be used in a larger project to display a "Coming Soon" message on a page that is not yet ready for public access. The animation effect adds a visual cue to draw attention to the message. The `Link` component can be customized to link to any page on the website, not just the home page. Here is an example of how the `ComingSoon` component can be used in a React application:
-
-```
-import React from "react";
-import ComingSoon from "./ComingSoon";
-
-const MyPage = () => {
- return (
-
-
- );
-}
-```
-
-In the example above, a `Container` component is imported and used to create a container with a maximum width of "lg" and an additional CSS class of "my-container". The `h1` element is rendered within the container.
-## Questions:
- 1. What is the purpose of the `classNames` function imported from "../../functions"?
-- A smart developer might ask what the `classNames` function does and how it is used in this code. The `classNames` function is likely used to concatenate multiple class names together and return a single string that can be used as a value for the `className` prop.
-
-2. What is the significance of the `MAX_WIDTH` object?
-- A smart developer might ask why the `MAX_WIDTH` object is defined and how it is used in this code. The `MAX_WIDTH` object maps different string values to CSS class names that set the maximum width of the container. This object is used to dynamically set the `className` prop of the `div` element based on the `maxWidth` prop passed to the `Container` component.
-
-3. What is the purpose of the `Container` component?
-- A smart developer might ask what the `Container` component does and how it is used in this code. The `Container` component is a reusable component that renders a `div` element with a maximum width based on the `maxWidth` prop passed to it. It also accepts a `className` prop and any additional props that can be spread onto the `div` element.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/CurrencyInputPanel/FiatValue.md b/.autodoc/docs/markdown/core/src/components/CurrencyInputPanel/FiatValue.md
deleted file mode 100644
index e745f89ef..000000000
--- a/.autodoc/docs/markdown/core/src/components/CurrencyInputPanel/FiatValue.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CurrencyInputPanel/FiatValue.tsx)
-
-The code above is a React component that renders a fiat value and a price impact. It imports `Currency`, `CurrencyAmount`, and `Percent` from the `@zoolabs/zdk` library, as well as `React` and `useMemo` from the `react` library, and `t` and `warningSeverity` from other files in the project.
-
-The `FiatValue` component takes two props: `fiatValue` and `priceImpact`. `fiatValue` is a `CurrencyAmount` object that represents a fiat value, or null/undefined if there is no fiat value. `priceImpact` is a `Percent` object that represents the price impact, or undefined if there is no price impact.
-
-The component first uses `useMemo` to compute a `priceImpactClassName` based on the `priceImpact` prop. If `priceImpact` is undefined, `priceImpactClassName` is also undefined. If `priceImpact` is less than 0, `priceImpactClassName` is "text-green". Otherwise, `priceImpactClassName` is computed based on the `severity` of the `priceImpact`, which is determined using the `warningSeverity` function imported from another file. If `severity` is less than 1, `priceImpactClassName` is "text-secondary". If `severity` is less than 3, `priceImpactClassName` is "text-yellow". Otherwise, `priceImpactClassName` is "text-red".
-
-The component then returns a div that contains the fiat value and price impact. If `fiatValue` is not null/undefined, the fiat value is rendered as a string with a dollar sign and commas for thousands separators. If `priceImpact` is not undefined, the price impact is rendered as a string with a percent sign and a class name based on `priceImpactClassName`.
-
-This component can be used in a larger project that involves displaying fiat values and price impacts. It can be imported into other React components and used like any other React component. For example, it could be used in a trading interface to display the fiat value and price impact of a trade.
-
-Example usage:
-
-```
-import { FiatValue } from "./FiatValue";
-
-function TradeSummary({ fiatValue, priceImpact }) {
- return (
- console.log("Panel clicked!")}
- onCurrencySelect={(currency) => console.log(`Selected currency: ${currency.symbol}`)}
- currency={{ symbol: "ETH" }}
- disableCurrencySelect={false}
- otherCurrency={{ symbol: "USDC" }}
- id="currency-select-panel"
- showCommonBases={true}
-/>
-```
-## Questions:
- 1. What is the purpose of this code and where is it used in the project?
-- This code is a React component called `CurrencySelectPanel` that renders a panel for selecting a currency. It is likely used in a part of the project where currency selection is required.
-
-2. What dependencies does this code have and what are they used for?
-- This code has several dependencies including `@heroicons/react`, `@zoolabs/zdk`, and `@lingui/macro`. These dependencies are used for icons, currency-related functionality, and internationalization respectively.
-
-3. What props does the `CurrencySelectPanel` component accept and what are their types?
-- The `CurrencySelectPanel` component accepts several props including `onClick`, `onCurrencySelect`, `currency`, `disableCurrencySelect`, `otherCurrency`, `id`, and `showCommonBases`. Their types are defined in the `CurrencySelectPanelProps` interface and include optional functions, booleans, and currency objects.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/CurrencySwitch/index.md b/.autodoc/docs/markdown/core/src/components/CurrencySwitch/index.md
deleted file mode 100644
index 23689a706..000000000
--- a/.autodoc/docs/markdown/core/src/components/CurrencySwitch/index.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CurrencySwitch/index.tsx)
-
-The code above is a React component that exports a switch button that toggles between two currencies, ZOO and BNB. The switch button is styled using Material UI's `styled` function and is composed of three main parts: the switch base, the switch thumb, and the switch track.
-
-The switch base is the underlying structure of the switch button and is styled to have a width of 80 pixels, a height of 40 pixels, and no padding. The switch thumb is the circular button that moves along the switch track when the switch is toggled. The switch thumb is styled to have a width and height of 32 pixels, a background image of the Zoo logo, and a white background color. The switch track is the bar that the switch thumb moves along when the switch is toggled. The switch track is styled to have a border radius of 20 pixels and a dark background color.
-
-The `CurrencySwitch` component takes two props: `checked` and `checkFunc`. `checked` is a boolean that determines whether the switch is toggled or not, and `checkFunc` is a function that is called when the switch is toggled. The `CurrencySwitch` component renders a `FormGroup` component that contains a `Stack` component with three child components: two `h6` elements that display the currency names and the `UiSwitch` component that is the styled switch button.
-
-This component can be used in a larger project that requires a switch button to toggle between two options. For example, in a cryptocurrency trading app, this switch button can be used to toggle between two currencies that the user wants to trade.
-
-Example usage:
-
-```
-import CurrencySwitch from './CurrencySwitch'
-
-function TradingPage() {
- const [isZooSelected, setIsZooSelected] = useState(true)
-
- const handleCurrencyToggle = () => {
- setIsZooSelected(!isZooSelected)
- }
-
- return (
-
-
-
-```
-## Questions:
- 1. What external libraries or frameworks are being used in this code?
-- The code is importing the `Button` and `Tooltip` components from the `@mui/material` library, and is also using the `React` library.
-
-2. What is the purpose of the `CustomTooltip` component?
-- The `CustomTooltip` component is a custom wrapper around the `Tooltip` component from the `@mui/material` library, which adds some custom styling and behavior to the tooltip.
-
-3. What props can be passed to the `CustomTooltip` component?
-- The `CustomTooltip` component accepts three props: `title` (a string that specifies the tooltip text), `children` (any valid React node that will be wrapped by the tooltip), and `center` (an optional boolean that determines whether the tooltip should be centered above the wrapped content).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Dots/index.md b/.autodoc/docs/markdown/core/src/components/Dots/index.md
deleted file mode 100644
index 2f3aae1db..000000000
--- a/.autodoc/docs/markdown/core/src/components/Dots/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Dots/index.tsx)
-
-The code above defines a React component called `Dots` that renders a span element with a CSS class that adds an animated ellipsis to the end of the text content. The component takes two props: `children` and `className`. The `children` prop is optional and defaults to an empty span element. The `className` prop is also optional and is used to add additional CSS classes to the span element.
-
-The `Dots` component uses the `classNames` function from a file located in the `functions` directory to concatenate the CSS classes passed in the `className` prop with the default CSS classes. The resulting CSS classes are applied to the span element using the `className` attribute.
-
-The CSS classes applied to the span element include `after:inline-block`, which sets the display property to inline-block, `dots`, which sets the font size and color of the text, `after:animate-ellipsis`, which adds an animation that displays three dots in sequence, and `after:w-4` and `after:text-left`, which set the width and text alignment of the ellipsis animation.
-
-This component can be used in the larger project to display a loading indicator or to indicate that content is being loaded asynchronously. For example, the `Dots` component could be used in a button component to indicate that a form is being submitted or in a table component to indicate that data is being fetched from a server.
-
-Here is an example of how the `Dots` component can be used in a React component:
-
-```
-import Dots from "./components/Dots";
-
-function LoadingIndicator() {
- return (
- " in the component declaration?
- "FC" stands for "Function Component" and is a shorthand way of declaring a component that takes props and returns JSX. "React.HTMLAttributes" is a type definition for the props that this component can accept, specifically HTML attributes that can be applied to a div element.
-
-3. What is the purpose of the "classNames" function imported from "../../functions/styling"?
- The "classNames" function is likely a utility function for generating CSS class names based on the arguments passed to it. This can make it easier to apply dynamic or conditional styling to components.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/EndangeredSpecies/index.md b/.autodoc/docs/markdown/core/src/components/EndangeredSpecies/index.md
deleted file mode 100644
index f67f26997..000000000
--- a/.autodoc/docs/markdown/core/src/components/EndangeredSpecies/index.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/EndangeredSpecies/index.tsx)
-
-The code is a React component that renders a UI for a feature called "Endangered Species" in the larger project. The UI consists of a series of cards that describe different actions that can be taken with animal NFTs. The component imports several hooks and functions from other parts of the project to handle interactions with the blockchain and state management.
-
-The component uses the `useActiveWeb3React` hook to get the user's account, library, and chain ID from the active Web3 context. It also uses the `useBuyZoo` hook to get a function that can be called to buy the project's native token, $ZOO. The `useState` hook is used to manage several boolean flags that control the display of different UI elements.
-
-The UI is structured as a series of cards that describe different actions that can be taken with animal NFTs. Each card contains an icon, a title, and a description. The first card describes the overall purpose of the feature and how it relates to non-profit organizations. The remaining cards describe actions that can be taken with animal NFTs, such as hatching, feeding, growing, and breeding. The UI also includes a call-to-action button that triggers the `handleFunds` function when clicked.
-
-The `handleFunds` function is imported from a utility file and takes the user's chain ID and a `buyZoo` function as arguments. It uses the `faucet` hook to get some test tokens and then calls the `buyZoo` function to buy $ZOO tokens with those test tokens. Finally, it dispatches an action to update the user's $ZOO balance.
-
-Overall, this code provides a UI for the "Endangered Species" feature and handles interactions with the blockchain and state management. It can be used as a standalone component or integrated into a larger project. Here is an example of how this component might be used in a larger project:
-
-```jsx
-import React from "react";
-import EndangeredSpecies from "zoo/EndangeredSpecies";
-
-const HomePage = () => {
- return (
-
-
-
- )
-}
-
-export default Header
-```
-
-In this example, the `ThemeSwitcher` component is included in the `Header` component, allowing the user to toggle between light and dark themes from the header of the website.
-## Questions:
- 1. What library is being used for theming and icon rendering?
-- The code is using `next-themes` library for theming and `@fortawesome/react-fontawesome` and `@fortawesome/free-solid-svg-icons` for icon rendering.
-
-2. What is the purpose of the `ThemeSwitcher` component?
-- The `ThemeSwitcher` component is responsible for rendering a button that toggles between light and dark themes when clicked.
-
-3. How is the button's text color determined based on the current theme?
-- The button's text color is determined by checking if the current theme is `'dark'`. If it is, the text color is set to white, otherwise it is set to black.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Header/drop.md b/.autodoc/docs/markdown/core/src/components/Header/drop.md
deleted file mode 100644
index 80541cb04..000000000
--- a/.autodoc/docs/markdown/core/src/components/Header/drop.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Header/drop.tsx)
-
-This code defines a React component called `DropTopBar` that renders a navigation bar for the Zoo project website. The navigation bar includes a logo, links to various pages on the website, a dropdown menu for additional links, a button to open a cart side panel, and a button to connect a wallet. The component imports various dependencies, including `@zoolabs/zdk`, `next/router`, `@headlessui/react`, and `@heroicons/react/outline`.
-
-The `DropTopBar` component takes an object `props` as input, which can include boolean values for `banner`, `isModal`, and `transparent`. These values determine the appearance of the navigation bar.
-
-The component uses various hooks to access data from the Redux store and the Web3 provider. For example, it uses the `useActiveWeb3React` hook to get the user's account, chain ID, library, and connector. It also uses the `useETHBalances` hook to get the user's ETH balance, and the `useZoobalance` hook to get the user's ZOO balance.
-
-The component renders a `Popover` component from `@headlessui/react`, which provides a dropdown menu for additional links. The dropdown menu includes links to the marketplace, chart, community, and learn pages.
-
-The component also renders a `Web3Status` component, which displays the user's wallet connection status and allows the user to connect or disconnect their wallet. When the user is connected to a wallet, the component displays a `NetworkPopup` component, which shows the user's ETH and ZOO balances and allows the user to switch networks.
-
-Finally, the component renders a `CartSideNav` component, which displays the user's cart items in a side panel.
-
-This component is used as the header for various pages on the Zoo project website, providing a consistent navigation experience across the site. For example, it is used on the homepage, marketplace, and community pages.
-## Questions:
- 1. What is the purpose of the `DropTopBar` component?
-- The `DropTopBar` component is a header navigation bar that includes links to various pages, a logo, a wallet connection status, and a shopping cart.
-
-2. What libraries and hooks are being imported and used in this file?
-- The file imports and uses several libraries and hooks, including `@zoolabs/zdk`, `React`, `next/router`, `@headlessui/react`, `@lingui/macro`, `useActiveWeb3React`, `useETHBalances`, `useLingui`, `useZoobalance`, `useAppSelector`, `CartSideNav`, `NetworkModal`, and `NetworkPopup`.
-
-3. What is the purpose of the `More`, `Community`, and `Learn` components?
-- The `More` component is a dropdown menu that includes additional links to various pages. The `Community` and `Learn` components are buttons that link to specific pages related to the project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Icons/close-icon.md b/.autodoc/docs/markdown/core/src/components/Icons/close-icon.md
deleted file mode 100644
index cc485e519..000000000
--- a/.autodoc/docs/markdown/core/src/components/Icons/close-icon.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Icons/close-icon.tsx)
-
-This code defines a React component called `CloseIcon`. The component returns an SVG element that displays a white X inside a circle. The X is created using a `path` element with a specific set of coordinates that form the shape of the X. The `fill` attribute of the `path` element is set to white, which fills the X with white color.
-
-This component can be used in a larger project as an icon for a close button or to indicate that an action will close or cancel something. The component can be imported into another React component and used like any other React component. For example, if we have a `Modal` component that needs a close button, we can import the `CloseIcon` component and use it like this:
-
-```
-import React from "react";
-import CloseIcon from "./CloseIcon";
-
-const Modal = () => {
- return (
-
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component that renders a modal using the Headless UI library.
-
-2. What props does the `HeadlessUIModal` component accept?
-- The `HeadlessUIModal` component accepts three props: `isOpen` (a boolean indicating whether the modal should be open), `onDismiss` (a function to be called when the modal is dismissed), and `children` (optional React nodes to be rendered inside the modal).
-
-3. What is the purpose of the `Transition` and `Dialog` components from the Headless UI library?
-- The `Transition` component is used to animate the modal when it enters and exits the screen, while the `Dialog` component provides the basic structure and behavior of the modal (such as closing when the user clicks outside of it).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Modal/index.md b/.autodoc/docs/markdown/core/src/components/Modal/index.md
deleted file mode 100644
index 250c82ae7..000000000
--- a/.autodoc/docs/markdown/core/src/components/Modal/index.md
+++ /dev/null
@@ -1,52 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Modal/index.tsx)
-
-The `Modal` component in this file is used to create a modal dialog box that can be used in a larger project. The component takes in several props that can be used to customize the modal's appearance and behavior.
-
-The `isOpen` prop is used to determine whether the modal is currently open or closed. The `onDismiss` prop is a callback function that is called when the user clicks outside the modal or presses the escape key.
-
-The `minHeight` and `maxHeight` props are used to set the minimum and maximum height of the modal, respectively. The `padding` prop is used to set the amount of padding around the content of the modal. The `maxWidth` prop is used to set the maximum width of the modal.
-
-The `isMax` prop is used to determine whether the modal should take up the entire screen. The `isFullWidth` prop is used to determine whether the modal should take up the full width of the screen. The `backgroundColor` prop is used to set the background color of the modal.
-
-The `scrollable` prop is used to determine whether the modal should be scrollable if its content exceeds its maximum height. The `transitionProps` prop is an object that can be used to pass additional props to the `Transition` component that is used to animate the modal.
-
-The `Modal` component renders a `Transition` component that is used to animate the modal when it is opened or closed. The `Dialog` component is used to create the actual modal dialog box.
-
-The content of the modal is rendered inside a `div` element with the class `flex flex-col w-full h-full p-6 overflow-y-auto rounded bg-dark-900`. The `minHeight` and `maxHeight` props are used to set the minimum and maximum height of this `div` element.
-
-Overall, this `Modal` component provides a flexible and customizable way to create modal dialog boxes in a larger project. Here is an example of how the `Modal` component can be used:
-
-```
-import Modal from './Modal';
-
-function App() {
- const [isOpen, setIsOpen] = useState(false);
-
- const handleOpenModal = () => {
- setIsOpen(true);
- };
-
- const handleCloseModal = () => {
- setIsOpen(false);
- };
-
- return (
-
- About
-
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a custom NavLink component that wraps around the Next.js Link component and adds an active class to the link when it matches the current URL.
-
-2. What are the required dependencies for this code to work?
-- This code requires the following dependencies to be imported: Link and LinkProps from 'next/link', React and Children from 'react', and useRouter from 'next/router'.
-
-3. How does the isActive variable determine if a link is active?
-- The isActive variable is determined by checking if the current URL matches the href or as props of the NavLink component. If the exact prop is true, it checks for an exact match, otherwise it checks if the current URL starts with the href or as props.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/NewNFTCard/index.md b/.autodoc/docs/markdown/core/src/components/NewNFTCard/index.md
deleted file mode 100644
index 78dcbab4b..000000000
--- a/.autodoc/docs/markdown/core/src/components/NewNFTCard/index.md
+++ /dev/null
@@ -1,51 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/NewNFTCard/index.tsx)
-
-The code is a React component that renders a card displaying information about a specific NFT (non-fungible token) item. The component takes in two props: `nftItem`, which is an object containing information about the NFT, and `onClick`, which is a function that is called when the user clicks on the "View Item" button.
-
-The component first imports several modules, including `dynamic` from the `next/dynamic` package, `getAge` from a `functions` module, `Image` from the `next/image` package, `React`, and `moment`. It then defines an interface for the `IndexProps` object that is passed to the component.
-
-The `NewNFTCard` component renders a div that contains several elements. The first element is a div that displays the NFT's initials in a circle, with the background color of the circle determined by the first letter of the NFT's attributes. The second element is a video or 3D model of the NFT, depending on the value of the `kind` property of the `nftItem` object. If `kind` is 0 or 2, a video is displayed, otherwise a 3D model is displayed using the `ModelViewer` component. The third element displays the age of the NFT and the time since it was created. The fourth element displays the name of the NFT, its ID, and whether it is an "Origin" NFT. The fifth element is a div that displays the ZOO logo and some text. The final element is a div that displays a "View Item" button, which calls the `onClick` function when clicked.
-
-This component can be used in a larger project that involves displaying information about NFTs. It can be used to display a single NFT item, and can be reused multiple times to display multiple NFT items. Here is an example of how the component can be used:
-
-```
-import NewNFTCard from "./NewNFTCard";
-
-const nftItem = {
- id: 1,
- name: "My NFT",
- kind: 0,
- token_uri: "https://example.com/nft.mp4",
- glb_animation_url: "https://example.com/nft.glb",
- usdz_animation_url: "https://example.com/nft.usdz",
- timestamp: 1631234567,
- stage: 1,
- attributes: [
- {
- trait_type: "Type",
- value: ["Egg"],
- },
- ],
-};
-
-function handleClick() {
- console.log("View item clicked");
-}
-
-function App() {
- return (
- Popover content
} show={showPopover}>
-
-
-```
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code defines a `Popover` component that can be used to display content in a pop-up window. It uses the `usePopper` hook from the `react-popper` library to position the pop-up relative to a reference element, and also includes an arrow element that can be positioned using the same hook.
-
-2. What are the required and optional props for the `Popover` component?
-- The `Popover` component requires `content`, `show`, and `children` props. The `content` prop should be a React node that will be displayed in the pop-up, the `show` prop is a boolean that determines whether the pop-up is visible, and the `children` prop is the reference element that the pop-up will be positioned relative to. The `placement` prop is optional and determines the initial placement of the pop-up relative to the reference element.
-
-3. What libraries and hooks are used in this code?
-- This code uses the `react`, `@popperjs/core`, `react-popper`, and `@headlessui/react` libraries. It also uses the `useState` and `useCallback` hooks from React, as well as a custom `useInterval` hook that is not defined in this file.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Popups/PopupItem.md b/.autodoc/docs/markdown/core/src/components/Popups/PopupItem.md
deleted file mode 100644
index a84ef00cf..000000000
--- a/.autodoc/docs/markdown/core/src/components/Popups/PopupItem.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Popups/PopupItem.tsx)
-
-The `PopupItem` component is a React component that renders a popup notification. It takes in three props: `removeAfterMs`, `content`, and `popKey`.
-
-The `removeAfterMs` prop is a number that represents the duration in milliseconds after which the popup should be removed. If it is `null`, the popup will not be removed automatically.
-
-The `content` prop is an object that contains the content of the popup. If the `content` object has a property called `txn`, the component will render a `TransactionPopup` component with the `hash`, `success`, and `summary` properties of the `txn` object.
-
-The `popKey` prop is a string that represents the unique key of the popup.
-
-The component uses the `useRemovePopup` hook to get a function that removes the popup from the state. It then uses the `useCallback` hook to memoize the `removeThisPopup` function, which removes the popup with the `popKey` key.
-
-The component also uses the `useEffect` hook to set a timeout that removes the popup after `removeAfterMs` milliseconds. If `removeAfterMs` is `null`, the effect will not be triggered.
-
-The component renders a div with a class of `mb-4` that contains a div with a class of `relative w-full overflow-hidden rounded bg-dark-700`. Inside this div, there is another div with a class of `flex flex-row p-4` that contains the `popupContent` and a div with a class of `cursor-pointer hover:text-white` that contains an `XIcon` component. The `XIcon` component is used to close the popup when clicked.
-
-If `removeAfterMs` is not `null`, the component also renders an `AnimatedFader` component that fades out the popup after `removeAfterMs` milliseconds.
-
-Overall, the `PopupItem` component is a reusable component that can be used to render popup notifications with different content and durations. Here is an example of how it can be used:
-
-```
-This content is only visible to users with non-blocked addresses
-
-
- );
-};
-```
-## Questions:
- 1. What is the purpose of the `Article` component being imported?
-- The `Article` component is being imported from a module called `components/blog/articles`, but without further context it is unclear what this component does or how it is used in this code.
-
-2. What is the expected shape of the `data` prop being passed to `BlogCards`?
-- The `data` prop is being destructured from the `props` object and passed to the `map` function, but it is unclear what type of data this prop is expected to contain or what properties each object in the array should have.
-
-3. What is the purpose of the link in the second `div` element?
-- The link in the second `div` element points to a Medium page, but it is unclear what relevance this has to the `BlogCards` component or the `data` being passed to it.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Button/index.md b/.autodoc/docs/markdown/core/src/components/Button/index.md
deleted file mode 100644
index 053698990..000000000
--- a/.autodoc/docs/markdown/core/src/components/Button/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Button/index.tsx)
-
-The `Button` component is a reusable React component that renders a button element with customizable styles. It takes in several props, including `color`, `size`, and `variant`, which determine the appearance of the button. The `color` prop specifies the color scheme of the button, with options including blue, pink, gradient, gray, default, red, green, and indigo. The `size` prop determines the size of the button, with options including xs, sm, lg, default, and none. The `variant` prop determines the type of button, with options including outlined, filled, empty, and link.
-
-The `Button` component also includes two additional components, `ButtonConfirmed` and `ButtonError`, which are variations of the `Button` component. `ButtonConfirmed` is used to render a button that is confirmed, with a green outline and a checkmark icon. `ButtonError` is used to render a button that indicates an error, with a red color scheme.
-
-The `Button` component uses the `classNames` function from the `functions` module to dynamically generate class names based on the props passed to the component. These class names are used to apply the appropriate styles to the button element.
-
-Overall, the `Button` component is a flexible and customizable component that can be used throughout the project to render buttons with consistent styles. Here is an example of how the `Button` component can be used:
-
-```
-import Button from "./Button";
-
-function MyComponent() {
- return (
- Blog
-
-
-
- );
-}
-```
-## Questions:
- 1. What are the different types of button variants available in this code?
-- There are four types of button variants available: outlined, filled, empty, and link.
-
-2. What are the different types of button colors available in this code?
-- There are eight types of button colors available: blue, pink, gradient, gray, default, red, green, and indigo.
-
-3. What is the purpose of the `ButtonConfirmed` and `ButtonError` functions?
-- `ButtonConfirmed` and `ButtonError` are functions that return a `Button` component with specific props and styles based on whether the `confirmed` or `error` boolean props are true or false. They are used to render buttons with specific styles for confirmation or error messages.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/BuyEggSection/index.md b/.autodoc/docs/markdown/core/src/components/BuyEggSection/index.md
deleted file mode 100644
index 1e5ff757d..000000000
--- a/.autodoc/docs/markdown/core/src/components/BuyEggSection/index.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/BuyEggSection/index.tsx)
-
-The `BuyEggSection` component is a React functional component that renders a section of the Zoo project's user interface. The section displays a list of available eggs for purchase, which are used to mint NFT animals. The component imports several dependencies, including icons from the Heroicons library, a custom loader component, and a Next.js `Link` component.
-
-The component uses several hooks to manage state and data fetching. The `useGif` hook is used to access the global state of the project's GIF mode. The `useSelector` hook is used to access the `availableEggs` property of the Redux store, which contains an array of egg objects. The `useGetAvailableEggs` hook is used to fetch the available eggs from the project's backend API. Finally, the `useZooKeeper` hook is used to access the current user's zookeeper object.
-
-The component renders a header and a paragraph of text that provide information about the available eggs. If the `isLoadingEggs` state variable is true, the component renders a custom loader component. Otherwise, the component renders a grid of egg objects, each of which contains an animation of the egg and a button that links to the egg's marketplace page.
-
-The egg objects are rendered using the `availableEggs` array, which is mapped over to create a new array of egg components. Each egg component contains a `div` element that displays the egg's animation, which is rendered using a `video` element. The egg component also contains a button that links to the egg's marketplace page.
-
-Overall, the `BuyEggSection` component provides a user-friendly interface for purchasing eggs and minting NFT animals in the Zoo project. The component is designed to be reusable and can be easily integrated into other parts of the project's user interface.
-## Questions:
- 1. What is the purpose of the `useGif` hook and how is it used in this code?
- - The `useGif` hook is imported from a context called `GifContext` and is used to access the `gifMode` property from the context's state.
-2. What is the significance of the `isLoadingEggs` state variable and how is it used?
- - `isLoadingEggs` is a boolean state variable that is used to conditionally render a loading spinner while the `getAvailableEggs` function is fetching data.
-3. What is the purpose of the `CustomLoader` component and when is it rendered?
- - The `CustomLoader` component is a loading spinner that is rendered when `isLoadingEggs` is true, indicating that the `getAvailableEggs` function is fetching data.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/BuyNftCard/index.md b/.autodoc/docs/markdown/core/src/components/BuyNftCard/index.md
deleted file mode 100644
index e658304b5..000000000
--- a/.autodoc/docs/markdown/core/src/components/BuyNftCard/index.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/BuyNftCard/index.tsx)
-
-The code defines a React component called `BuyNftCard` that renders a card displaying information about a non-fungible token (NFT) for sale. The component takes in several props, including an image, name, address, price, days, yields, and currency.
-
-The `image` prop is a React node that represents the image of the NFT. The `name` prop is a string that represents the name of the NFT. The `address` prop is a string that represents the address of the NFT. The `price` prop is a string that represents the price of the NFT. The `days` prop is a string that represents the number of days left for the NFT sale. The `yields` prop is a string that represents the yield of the NFT. The `currency` prop is a string that represents the currency used for the price of the NFT.
-
-The component renders a div that contains the NFT image and information about the NFT. The NFT image is displayed using the `image` prop. The NFT information is displayed using the `name`, `address`, `price`, `days`, `yields`, and `currency` props. The NFT name is displayed using the `name` prop. The NFT address is displayed using the `address` prop. The NFT price and currency are displayed using the `price` and `currency` props. The NFT days left is displayed using the `days` prop. The NFT yield is displayed using the `yields` prop.
-
-The component is exported as the default export of the module, which means it can be imported and used in other parts of the project. For example, if there is a page that displays a list of NFTs for sale, the `BuyNftCard` component can be used to render each NFT card.
-
-Example usage:
-
-```
-import BuyNftCard from "./BuyNftCard";
-
-const nft = {
- image: ,
- name: "Cool NFT",
- address: "0x1234567890abcdef",
- price: "1.23",
- days: "5",
- yields: "10%",
- currency: "ETH",
-};
-
-const NftCardPage = () => {
- return (
-
-
- );
-};
-```
-## Questions:
- 1. What is the purpose of this component?
-- This component is a card component for buying NFTs (non-fungible tokens).
-
-2. What props does this component accept?
-- This component accepts the following props: `image`, `name`, `address`, `days`, `price`, `yields`, and `currency`.
-
-3. What is the default value for the `currency` prop?
-- The default value for the `currency` prop is `"ZOO"`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Card/index.md b/.autodoc/docs/markdown/core/src/components/Card/index.md
deleted file mode 100644
index 1c563e236..000000000
--- a/.autodoc/docs/markdown/core/src/components/Card/index.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Card/index.tsx)
-
-The code above is a React component that exports a Card component. The Card component is a reusable component that can be used to display content in a card format. The component takes in several props, including header, footer, backgroundImage, title, description, children, and className.
-
-The Card component is composed of a Header component and a div that contains the content of the card. The Header component is optional and can be used to display a header at the top of the card. The div that contains the content of the card is styled with a background image, a title, and a description. The background image is optional and can be set using the backgroundImage prop. The title and description are also optional and can be set using the title and description props, respectively.
-
-The Card component can be used in a larger project to display content in a card format. For example, it can be used to display a list of products, a list of blog posts, or a list of events. The Card component can be customized by passing in different props to change the background image, title, and description.
-
-The Header component is a simple component that takes in a className and children prop. The className prop is used to add additional styling to the header, while the children prop is used to render the content of the header. The Header component can be used in other components to display a header.
-
-Below is an example of how the Card component can be used:
-
-```
-import Card from "./Card";
-
-function ProductCard({ product }) {
- return (
-
-
-
- {product.price}
-
-
-
-
- )
-}
-
-export default Modal
-```
-
-In this example, the `CloseIcon` component is used as the close button for the modal. When the `CloseIcon` is clicked, the `onClose` function is called to close the modal. The `children` prop is used to render the content of the modal.
-
-Overall, the `CloseIcon` component is a simple and reusable component that can be used in various UI elements to provide a consistent and recognizable way to close or dismiss them.
-## Questions:
- 1. What is the purpose of this code?
- - This code defines a React component called `CloseIcon` that renders an `X` icon from the `react-feather` library and applies a `cursor-pointer` class to it.
-
-2. What other props can be passed to the `CloseIcon` component?
- - Any additional props passed to the `CloseIcon` component will be spread onto the `X` element, so any valid props for the `X` element from the `react-feather` library can be used.
-
-3. Is the `react-feather` library a required dependency for this code to work?
- - Yes, the `react-feather` library is imported and used in this code, so it must be installed and available in the project for this component to render properly.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Column/index.md b/.autodoc/docs/markdown/core/src/components/Column/index.md
deleted file mode 100644
index bc264f6e3..000000000
--- a/.autodoc/docs/markdown/core/src/components/Column/index.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Column/index.tsx)
-
-This code defines a set of React components for creating flexible and responsive column layouts. The components are designed to be used within a larger project, such as a web application or website, to help structure content and layout elements on a page.
-
-The `Column` component is a basic building block for creating a column layout. It takes in any number of child elements and renders them vertically stacked within a container. The `ColumnCenter` component is a variation of `Column` that centers its child elements horizontally within the container. Both components accept additional CSS classes and HTML attributes as props.
-
-The `AutoColumn` component is a more advanced version of `Column` that uses CSS grid to create a flexible and responsive layout. It allows for more fine-grained control over the spacing and alignment of child elements, and includes props for specifying the size of the gaps between columns and the horizontal alignment of elements within each column.
-
-Overall, these components provide a useful set of tools for creating flexible and responsive column layouts within a React application. They can be used in a variety of contexts, such as displaying lists of items, organizing form fields, or laying out content on a page. Here is an example of how the `Column` component might be used to create a simple layout:
-
-```
-import React from "react";
-import { Column } from "./components/layout";
-
-const MyComponent = () => (
-
-
- My Heading
-Some text goes here.
- -
-
- );
-};
-
-export default MyPage;
-```
-
-In this example, the `ComingSoon` component is used to display a message on the `MyPage` component. When the `MyPage` component is rendered, it will display the "Coming Soon" message below the heading.
-## Questions:
- 1. What is the purpose of the `fadeInOnScroll` function imported from "animation"?
-- The `fadeInOnScroll` function is used to animate the `comingSoonRef` element when it is scrolled into view.
-
-2. What is the significance of the `comingSoonRef` variable being assigned to `React.useRef()`?
-- The `comingSoonRef` variable is used to reference the `div` element that contains the "Coming Soon" text and the link to the home page. It is assigned to `React.useRef()` so that it can be passed to the `fadeInOnScroll` function to trigger the animation.
-
-3. What is the purpose of the `Link` component imported from "next/link"?
-- The `Link` component is used to create a link to the home page of the website. When clicked, it will navigate the user to the home page without causing a full page refresh.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Container/index.md b/.autodoc/docs/markdown/core/src/components/Container/index.md
deleted file mode 100644
index e7c906f39..000000000
--- a/.autodoc/docs/markdown/core/src/components/Container/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Container/index.tsx)
-
-The code above is a React component that exports a container with a maximum width. The component is part of a larger project called "zoo".
-
-The `MAX_WIDTH` object contains CSS classes that define the maximum width of the container. The keys of the object represent the different sizes of the container, and the values are the corresponding CSS classes. The sizes range from "full" to "xs", with "2xl" being the default size.
-
-The `Container` component takes three props: `children`, `maxWidth`, and `className`. The `children` prop is used to render any child components within the container. The `maxWidth` prop is used to set the maximum width of the container. If no `maxWidth` prop is provided, the default value of "2xl" is used. The `className` prop is used to add any additional CSS classes to the container.
-
-The `classNames` function is imported from a file located in the `functions` directory. This function is used to concatenate the CSS classes passed in as props with the CSS classes defined in the `MAX_WIDTH` object.
-
-The `Container` component returns a `div` element with the concatenated CSS classes and any additional props passed in using the spread operator. The `children` prop is rendered within the `div` element.
-
-This component can be used throughout the larger "zoo" project to create containers with a maximum width. Developers can customize the maximum width of the container by passing in a `maxWidth` prop, or they can use the default value of "2xl". They can also add any additional CSS classes to the container using the `className` prop.
-
-Example usage:
-
-```
-import Container from "./path/to/Container";
-
-function App() {
- return (
- Welcome to My Page
-Hello, world!
-
-
- );
-}
-```
-## Questions:
- 1. What external libraries or dependencies are being used in this code?
-- The code is importing from "@zoolabs/zdk", "@lingui/macro", and "../../functions/prices".
-
-2. What is the purpose of the `FiatValue` function and what are its input parameters?
-- The `FiatValue` function takes in two parameters: `fiatValue` which is a nullable `CurrencyAmount` object, and `priceImpact` which is an optional `Percent` object. The purpose of the function is to return a JSX element that displays the `fiatValue` and `priceImpact` in a specific format.
-
-3. What is the purpose of the `priceImpactClassName` variable and how is it determined?
-- The `priceImpactClassName` variable is determined using a `useMemo` hook and is used to determine the CSS class name for the `priceImpact` element. The class name is determined based on the value of `priceImpact` and the `warningSeverity` function from the `../../functions/prices` module.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/CurrencyInputPanel/index.md b/.autodoc/docs/markdown/core/src/components/CurrencyInputPanel/index.md
deleted file mode 100644
index 378fbd6ff..000000000
--- a/.autodoc/docs/markdown/core/src/components/CurrencyInputPanel/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CurrencyInputPanel/index.tsx)
-
-The `CurrencyInputPanel` component is a reusable UI component that provides an input field for users to enter a token amount and select a token from a dropdown menu. It is used in the larger project to allow users to input token amounts for various actions, such as swapping tokens or providing liquidity.
-
-The component imports several dependencies, including `React`, `@zoolabs/zdk`, and various other UI components and hooks. It also defines an interface `CurrencyInputPanelProps` that specifies the props that can be passed to the component.
-
-The component renders a container `div` with a dark background and rounded corners. Within this container, there are two main sections: a token selection section and an input section.
-
-The token selection section displays a token logo, token symbol, and dropdown arrow. If a `Pair` prop is passed to the component, it displays a double token logo instead. If a `Currency` prop is passed, it displays the corresponding token logo. If neither prop is passed, it displays an animation of a hand selecting a coin. The token symbol is displayed next to the logo, and if the user clicks on the section, a dropdown menu appears allowing the user to select a different token. If the `disableCurrencySelect` prop is set to `true`, the dropdown arrow is not displayed and the user cannot select a different token.
-
-The input section displays an input field for the user to enter a token amount, as well as a "Max" button that sets the input field to the user's maximum token balance. If a `Currency` prop is passed, it displays the user's token balance next to the input field. If a `fiatValue` prop is passed, it displays the fiat value of the user's token balance. If the `hideInput` prop is set to `true`, the input section is not displayed.
-
-The component also includes a `CurrencySearchModal` that is displayed when the user clicks on the token selection section. This modal allows the user to search for and select a different token.
-
-Overall, the `CurrencyInputPanel` component provides a flexible and reusable UI component for token input and selection. It can be used in various contexts throughout the larger project to allow users to interact with different tokens.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `CurrencyInputPanel` that renders a UI panel for selecting and inputting a currency amount.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several modules from external libraries, including `@zoolabs/zdk`, `react`, `@heroicons/react/outline`, `lottie-react`, and `@lingui/react`.
-
-3. What props can be passed to the `CurrencyInputPanel` component?
-- The `CurrencyInputPanel` component accepts several optional props, including `value`, `onUserInput`, `onMax`, `showMaxButton`, `label`, `onCurrencySelect`, `currency`, `disableCurrencySelect`, `hideBalance`, `pair`, `hideInput`, `otherCurrency`, `fiatValue`, `priceImpact`, `id`, `showCommonBases`, `renderBalance`, `locked`, and `customBalanceText`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/CurrencyLogo/index.md b/.autodoc/docs/markdown/core/src/components/CurrencyLogo/index.md
deleted file mode 100644
index b2fbbaf2b..000000000
--- a/.autodoc/docs/markdown/core/src/components/CurrencyLogo/index.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CurrencyLogo/index.tsx)
-
-This code defines a React component called `CurrencyLogo` that renders a logo for a given cryptocurrency. The logo is fetched from various sources, including the SushiSwap token icon repository and the TrustWallet asset repository. The component takes a `currency` prop, which is an object that represents the cryptocurrency to display. The `currency` object must have a `symbol` property that represents the currency's ticker symbol, and may also have a `chainId` property that represents the ID of the blockchain on which the currency is issued. If the `currency` object is not provided or is invalid, the component will render a default "unknown" logo.
-
-The `CurrencyLogo` component first calls the `useHttpLocations` hook to fetch the logo URI for the given currency. If the currency is a wrapped token, the component will use the `logoURI` property of the `WrappedTokenInfo` object, or the `logoURI` property of the `tokenInfo` object if the former is not defined. The `useHttpLocations` hook returns an array of possible logo URLs based on the URI, which are then used to fetch the logo image.
-
-If the currency is a native token (e.g. ETH or BNB), the component will use a pre-defined logo URL based on the currency's `chainId`. If the currency is a token other than a wrapped token, the component will call the `getCurrencyLogoUrls` function to generate an array of possible logo URLs based on the currency's `symbol` and `chainId`. The `getCurrencyLogoUrls` function first generates a URL based on the currency's symbol, then generates two additional URLs based on the currency's `chainId` and address. These URLs are then returned as an array.
-
-The `CurrencyLogo` component then generates an array of logo URLs by concatenating the URI locations returned by `useHttpLocations` with the default logo URLs generated by `getCurrencyLogoUrls`. If the currency is a native token, the component will also include the pre-defined logo URL for the currency's `chainId`. If the currency is invalid or not provided, the component will include the "unknown" logo URL.
-
-Finally, the `CurrencyLogo` component renders a `Logo` component with the generated logo URLs, as well as the `width`, `height`, `alt`, `className`, and other props passed to it. The `Logo` component is defined in a separate file and is not included in this code snippet.
-
-This component can be used in various parts of the larger project to display logos for different cryptocurrencies. For example, it could be used in a wallet interface to display the logos of the user's assets, or in a trading interface to display the logos of the tokens being traded. Here is an example usage of the `CurrencyLogo` component:
-
-```jsx
-import { Currency } from "@zoolabs/zdk";
-import CurrencyLogo from "./CurrencyLogo";
-
-function MyComponent() {
- const currency: Currency = { symbol: "ETH", chainId: 1 };
- return Trade Summary
-
-
- )
-}
-```
-
-In the example above, the `TradingPage` component renders the `CurrencySwitch` component and a paragraph that displays the currently selected currency. The `TradingPage` component also has a state variable `isZooSelected` that determines whether the ZOO currency is selected or not. The `handleCurrencyToggle` function is called when the switch button is toggled and updates the `isZooSelected` state variable.
-## Questions:
- 1. What is the purpose of this code?
- This code exports a React component called `CurrencySwitch` that renders a switch with two labels, "ZOO" and "BNB", and an image of a zoo logo.
-
-2. What is the significance of the `styled` function from `@mui/material/styles`?
- The `styled` function is used to create a custom styled component based on the `Switch` component from `@mui/material/Switch`. The custom component is called `UiSwitch` and has specific styles applied to it.
-
-3. What are the props accepted by the `CurrencySwitch` component?
- The `CurrencySwitch` component accepts two props: `checked`, a boolean value that determines whether the switch is checked or not, and `checkFunc`, a function that is called when the switch is toggled.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/CustomLoader/index.md b/.autodoc/docs/markdown/core/src/components/CustomLoader/index.md
deleted file mode 100644
index ee4484aea..000000000
--- a/.autodoc/docs/markdown/core/src/components/CustomLoader/index.md
+++ /dev/null
@@ -1,49 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CustomLoader/index.tsx)
-
-This code defines two React components, `CirclularLoader` and `CustomLoader`, which can be used to display a circular loading animation on a web page.
-
-The `CirclularLoader` component returns a div containing an SVG element that draws a circle with two paths. The first path is filled with a light gray color and represents the outer circle, while the second path is filled with a dark gray color and represents the spinning animation. The `animate-spin` class applied to the SVG element causes the second path to rotate around the center of the circle, creating the loading animation.
-
-The `CustomLoader` component returns a div that centers the `CirclularLoader` component using the `flex` and `justify-center` classes from Tailwind CSS. This component can be used as a wrapper around other content that needs to be loaded asynchronously, providing a visual cue to the user that the content is being loaded.
-
-To use these components in a React project, they can be imported from the `zoo` module and rendered in the desired location within the component tree. For example, to display the `CustomLoader` component while fetching data from an API, the following code could be used:
-
-```
-import React, { useState, useEffect } from "react";
-import CustomLoader from "zoo";
-
-const MyComponent = () => {
- const [data, setData] = useState(null);
- const [isLoading, setIsLoading] = useState(true);
-
- useEffect(() => {
- fetch("https://api.example.com/data")
- .then((response) => response.json())
- .then((data) => {
- setData(data);
- setIsLoading(false);
- });
- }, []);
-
- return (
- Trading Page
-{isZooSelected ? 'ZOO' : 'BNB'} selected
-
- {isLoading ? (
-
- );
-};
-```
-
-In this example, the `useState` hook is used to manage the state of the `data` and `isLoading` variables. The `useEffect` hook is used to fetch data from an API when the component mounts, and sets the `data` and `isLoading` states accordingly. The `CustomLoader` component is rendered while the data is being fetched, and the fetched data is rendered when it becomes available.
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a custom loader component that displays a circular spinner animation.
-
-2. What is the significance of the two paths in the SVG element?
-- The first path is filled with gray color and represents the outer circle of the spinner, while the second path is filled with a darker gray color and represents the rotating part of the spinner.
-
-3. Why is the viewBox attribute set to "3 3 18 18" in the SVG element?
-- The viewBox attribute defines the position and dimensions of the SVG viewport. In this case, it is set to "3 3 18 18" to center the spinner within the viewport and to ensure that it is visible.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/CustomTooltip/index.md b/.autodoc/docs/markdown/core/src/components/CustomTooltip/index.md
deleted file mode 100644
index f6d18b6b9..000000000
--- a/.autodoc/docs/markdown/core/src/components/CustomTooltip/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/CustomTooltip/index.tsx)
-
-This code defines a React component called `CustomTooltip` that wraps the `Tooltip` component from the Material-UI library. The purpose of this component is to provide a customizable tooltip that can be used throughout the larger project.
-
-The `CustomTooltip` component takes in three props: `title`, `children`, and `center`. The `title` prop is a string that represents the text that will be displayed in the tooltip. The `children` prop is any valid React component that will be wrapped by the tooltip. The `center` prop is an optional boolean that determines whether the tooltip should be centered above the wrapped component or aligned to the left of it.
-
-The `CustomTooltip` component returns a `Tooltip` component with customized styles and placement based on the props passed in. The `PopperProps` prop is used to customize the styles of the tooltip. In this case, the tooltip has a black background, white text, and a box shadow. The `title` prop is set to the `title` prop passed in to the `CustomTooltip` component. The `placement` prop is set to either "top" or "top-start" based on the `center` prop passed in.
-
-An example of how this component could be used in the larger project is to provide additional information or context when hovering over certain elements. For example, if there is a button that performs a specific action, a tooltip could be added to explain what that action does. The `CustomTooltip` component allows for customization of the tooltip's appearance and placement, making it a versatile tool for providing additional information throughout the project.
-
-Example usage:
-
-```
-{/* Render data here */}
- )}
-
-
- );
-}
-```
-
-In the example above, the `LoadingIndicator` component renders a div element with the `Dots` component and a span element with the text "Loading...". The `Dots` component adds an animated ellipsis to the end of the text content, indicating that content is being loaded.
-## Questions:
- 1. What is the purpose of the `classNames` function being imported from "../../functions"?
-- The `classNames` function is likely used to concatenate and conditionally apply CSS classes to the `span` element in the `Dots` component.
-
-2. What is the purpose of the `style jsx` block?
-- The `style jsx` block is used to define a CSS style that will be scoped to the `Dots` component.
-
-3. What is the purpose of the `after` pseudo-element being used in the `className` prop?
-- The `after` pseudo-element is being used to add a period after the `span` element, which is styled to look like animated ellipsis.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/DoubleGlowShadow/index.md b/.autodoc/docs/markdown/core/src/components/DoubleGlowShadow/index.md
deleted file mode 100644
index 52e76771c..000000000
--- a/.autodoc/docs/markdown/core/src/components/DoubleGlowShadow/index.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/DoubleGlowShadow/index.tsx)
-
-The `DoubleGlowShadow` component is a React functional component that conditionally renders a double glow shadow effect around its children. The component imports the `isMobile` function from the `react-device-detect` library and the `FC` type from the `react` library. It also imports the `classNames` function from a `functions` module located in a parent directory.
-
-The `DoubleGlowShadow` component takes in two props: `className` and `children`. The `className` prop is optional and is used to add additional CSS classes to the component. The `children` prop is also optional and represents the children components that will be wrapped by the `DoubleGlowShadow` component.
-
-The component first checks if the `isMobile` function returns `true`. If it does, the component returns a div with a class of `shadow-swap` that wraps the `children` prop. This div does not have any shadow effects.
-
-If the `isMobile` function returns `false`, the component returns a div that has three child divs. The first and second child divs are positioned absolutely and have a background color of blue and pink respectively. They are positioned on opposite sides of the parent div and have a width of 3/5 of the parent div's width. They also have a rounded border and a z-index of 0. These two divs create the double glow effect.
-
-The third child div is positioned relatively and has a CSS filter of `drop-shadow`. This creates a shadow effect around the `children` prop. The `children` prop is wrapped by this div.
-
-The `DoubleGlowShadow` component can be used in a larger project to add a double glow shadow effect around components. It can be used to highlight important components or to add a visual effect to a page. Here is an example of how the component can be used:
-
-```
-import DoubleGlowShadow from "./components/DoubleGlowShadow";
-
-function App() {
- return (
-
-
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `react-device-detect` library being imported?
-- The `react-device-detect` library is being used to check if the user is on a mobile device or not.
-
-2. What is the purpose of the `DoubleGlowShadow` component?
-- The `DoubleGlowShadow` component is used to add a double glow shadow effect to its child components. If the user is on a mobile device, it will display a different shadow effect.
-
-3. What is the purpose of the `classNames` function being imported from "../../functions"?
-- The `classNames` function is being used to concatenate multiple class names together for the `className` prop of the `div` element being returned by the `DoubleGlowShadow` component.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/DoubleLogo/index.md b/.autodoc/docs/markdown/core/src/components/DoubleLogo/index.md
deleted file mode 100644
index 643924782..000000000
--- a/.autodoc/docs/markdown/core/src/components/DoubleLogo/index.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/DoubleLogo/index.tsx)
-
-The code above defines a React component called `DoubleCurrencyLogo`. This component is responsible for rendering two currency logos side by side. It takes in several props, including `currency0` and `currency1`, which are both of type `Currency`. These props represent the two currencies that the component will display logos for. The `size` prop determines the size of the logos, and the `className` and `logoClassName` props are used to apply custom CSS classes to the component and the logos themselves, respectively.
-
-The component returns a `div` element that contains two `CurrencyLogo` components. These components are imported from the `CurrencyLogo` file located in the `../CurrencyLogo` directory. The `CurrencyLogo` component takes in several props, including `className`, `currency`, and `size`. The `className` prop is used to apply custom CSS classes to the logo, while the `currency` prop is used to determine which currency the logo should represent. The `size` prop determines the size of the logo.
-
-The `DoubleCurrencyLogo` component uses the `classNames` function from the `functions` file located in the `../../functions` directory to apply custom CSS classes to the `div` element that contains the logos. This function takes in any number of arguments, which can be either strings or objects. If an argument is a string, it will be added to the class list as-is. If an argument is an object, its keys will be used as class names if their corresponding values are truthy.
-
-This component can be used in the larger project to display two currency logos side by side, which may be useful in various contexts such as a trading platform or a wallet application. Here is an example of how this component might be used:
-
-```
-Hello World
-
- {data.length === 0 ? (
- No data available
- ) : (
- // Render data
- )}
-
- );
-};
-```
-## Questions:
- 1. What is the purpose of this component?
- This component is called "Empty" and it renders a div with some default styling and any children passed to it. It is likely used to display an empty state for a component or page.
-
-2. What is the significance of the "FC" and "React.HTMLAttributes
-
- );
-};
-
-export default HomePage;
-```
-## Questions:
- 1. What is the purpose of this component and what does it render?
-- This component is called `EndangeredSpecies` and it renders a section of a web page that displays information about a game involving NFT animals. It also includes a button to buy $ZOO currency.
-
-2. What libraries and hooks are being imported and used in this code?
-- This code imports and uses React, useState, Image, useDispatch, useSelector, useBuyZoo, useActiveWeb3React, useFaucet, getZooBalance, and handleFunds.
-
-3. What is the purpose of the `handleFunds` function and how is it used in this code?
-- The `handleFunds` function is imported from a utility file called `handleFunds` and it is used as a callback function for the `onClick` event of the "Buy $ZOO" button. It takes in the `chainId` and `buyZoo` variables as arguments and executes a transaction to buy $ZOO currency.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/ExpertModePanel/index.md b/.autodoc/docs/markdown/core/src/components/ExpertModePanel/index.md
deleted file mode 100644
index acc554262..000000000
--- a/.autodoc/docs/markdown/core/src/components/ExpertModePanel/index.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ExpertModePanel/index.tsx)
-
-The code defines a React component called `ExpertModePanel` that renders a panel with a title and a close button. The component takes three props: `active`, a boolean that determines whether the panel is visible or not; `onClose`, a function that is called when the close button is clicked; and `children`, which is used to render the content of the panel.
-
-The component uses the `useLingui` hook from the `@lingui/react` library to provide internationalization support. The `i18n` object returned by the hook is used to translate the text "Expert Mode" using the `t` macro from the `@lingui/macro` library.
-
-If the `active` prop is `false`, the component simply renders its children. Otherwise, it renders a div with two nested divs: one for the title and close button, and one for the content. The title div has a fixed height and a dark background color, and contains the translated text and a close button that calls the `onClose` function when clicked. The content div has a border and a darker background color, and contains the `children` passed to the component.
-
-This component can be used in a larger project to provide a customizable panel that can be shown or hidden based on a boolean value. The `ExpertModePanel` component can be imported and used in other React components like this:
-
-```jsx
-import ExpertModePanel from './ExpertModePanel';
-
-function MyComponent() {
- const [expertMode, setExpertMode] = useState(false);
-
- return (
- Welcome to the Zoo!
-
-
- setExpertMode(false)}>
-
-
- );
-}
-```
-
-In this example, the `MyComponent` function defines a state variable `expertMode` that determines whether the `ExpertModePanel` is visible or not. When the "Show expert mode" button is clicked, the `expertMode` state is set to `true`, which causes the `ExpertModePanel` to be rendered with its content. When the close button is clicked, the `expertMode` state is set to `false`, which hides the panel.
-## Questions:
- 1. What is the purpose of the `ExpertModePanel` component?
-
- The `ExpertModePanel` component is a React component that renders a panel for expert mode with a title, close button, and content.
-
-2. What is the role of the `useLingui` hook in this code?
-
- The `useLingui` hook is used to access the i18n object, which provides internationalization support for the component. It is used to translate the text content of the component.
-
-3. What is the significance of the `FC` type in the component definition?
-
- The `FC` type is a shorthand for the `FunctionComponent` type, which is a type of React component that takes props as input and returns JSX as output. It is used to define the type of the `ExpertModePanel` component.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/ExternalLink/index.md b/.autodoc/docs/markdown/core/src/components/ExternalLink/index.md
deleted file mode 100644
index f28b1116b..000000000
--- a/.autodoc/docs/markdown/core/src/components/ExternalLink/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ExternalLink/index.tsx)
-
-The `ExternalLink` component in this file is a reusable React component that renders an anchor tag (``) with some additional functionality. It takes in several props, including `href` (the URL to link to), `target` (the target window or frame to open the link in), `rel` (the relationship between the current document and the linked document), `color` (the color scheme to use for the link), `startIcon` and `endIcon` (optional icons to display before or after the link text), and any other props that can be passed to an anchor tag.
-
-When the link is clicked, the `handleClick` function is called. If the link is set to open in a new tab (`target="_blank"`) or if the user is holding down the Ctrl or Command key, the link is opened normally and an outbound link event is tracked using the `ReactGA` library. If the link is set to open in the same tab (`target="_self"`) and the user is not holding down any modifier keys, the default behavior of the anchor tag is prevented, an outbound link event is tracked using `ReactGA`, and the page is redirected to the linked URL.
-
-The `COLOR` object defines two color schemes for the link: `default` and `blue`. These color schemes are used to set the text color and opacity of the link based on whether it is being hovered over or focused on.
-
-This component can be used throughout the larger project to create links that track outbound link events using `ReactGA`. It provides a consistent and customizable way to render external links with additional functionality. Here's an example of how it could be used:
-
-```jsx
-import ExternalLink from "./path/to/ExternalLink";
-
-function MyComponent() {
- return (
- This is the content of the expert mode panel.
-
-
- Click me!
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a React component called `ExternalLink` that renders an anchor element with some additional functionality for tracking outbound link clicks using ReactGA.
-
-2. What dependencies does this code have?
-- This code imports `React`, `ReactGA`, and `classNames` from external packages.
-
-3. What props can be passed to the `ExternalLink` component?
-- The `ExternalLink` component accepts several props, including `target`, `href`, `children`, `rel`, `className`, `color`, `startIcon`, and `endIcon`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/ExternalLinkIcon/index.md b/.autodoc/docs/markdown/core/src/components/ExternalLinkIcon/index.md
deleted file mode 100644
index 3a19558f9..000000000
--- a/.autodoc/docs/markdown/core/src/components/ExternalLinkIcon/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ExternalLinkIcon/index.tsx)
-
-The code above is a React component that renders an external link icon with some additional functionality. The component takes in several props, including the `target` attribute, `href` attribute, and `rel` attribute. The `target` attribute specifies where to open the linked document, while the `href` attribute specifies the URL of the linked document. The `rel` attribute specifies the relationship between the current document and the linked document.
-
-The component also uses the `ReactGA` library to track outbound link clicks. When the link is clicked, the `handleClick` function is called. If the link is set to open in a new tab (`target="_blank"`) or if the user is holding down the `ctrl` or `meta` key, the link is opened in a new tab and a GA event is tracked. If the link is not set to open in a new tab, the default behavior is prevented, a GA event is tracked, and the user is redirected to the linked document.
-
-The component returns an anchor tag with the appropriate attributes and event handlers. The `ExternalLink` component from the `react-feather` library is also rendered within the anchor tag to display the external link icon.
-
-This component can be used throughout the larger project to render external links with consistent styling and tracking functionality. For example, it could be used in a navigation menu to link to external resources or in a list of related links at the bottom of a page. Here is an example usage of the component:
-
-```
-
- Total:
- );
-}
-```
-
-In this example, the `FormattedCurrencyAmount` component is used to format the `currencyAmount` object with 2 significant digits for display in a shopping cart total.
-## Questions:
- 1. What is the purpose of the `@zoolabs/zdk` import?
-- The `@zoolabs/zdk` import is used to import the `Currency`, `CurrencyAmount`, `Fraction`, and `JSBI` modules from the `zdk` library.
-
-2. What is the significance of the `CURRENCY_AMOUNT_MIN` constant?
-- The `CURRENCY_AMOUNT_MIN` constant represents the minimum amount of currency that can be displayed and is set to 1/1000000th of the currency unit.
-
-3. What does the `FormattedCurrencyAmount` function do?
-- The `FormattedCurrencyAmount` function takes in a `currencyAmount` object and an optional `significantDigits` parameter and returns a formatted string representation of the currency amount. If the amount is equal to 0, it returns "0". If the amount is greater than the `CURRENCY_AMOUNT_MIN`, it returns the amount formatted to the specified number of significant digits. Otherwise, it returns a string indicating that the amount is less than the minimum displayable amount.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Gas/index.md b/.autodoc/docs/markdown/core/src/components/Gas/index.md
deleted file mode 100644
index f830d2e80..000000000
--- a/.autodoc/docs/markdown/core/src/components/Gas/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Gas/index.tsx)
-
-This code is a React component that fetches gas price data from the Ethereum Gas Station API using the useSWR library. The component is named Gas and it is exported as the default export of the module.
-
-The component uses the useLingui hook from the @lingui/react library to enable internationalization of the text displayed in the component. The i18n object returned by useLingui is destructured from the hook's return value.
-
-The useSWR hook is used to fetch data from the Ethereum Gas Station API. The first argument to useSWR is the URL to fetch data from. The second argument is a function that fetches the data and returns it as a JSON object. The SWRResponse type is used to define the shape of the data returned by the API and the error object returned in case of an error.
-
-If there is an error while fetching the data, the component returns a div element with the text "failed to load" translated to the current language using the i18n object. If the data is still being fetched, the component returns a div element with the text "loading..." translated to the current language using the i18n object. If the data has been fetched successfully, the component returns a div element with the average gas price divided by 10.
-
-This component can be used in a larger project to display the current average gas price on the Ethereum network. The component can be imported and rendered in any React component that needs to display the gas price. For example, the component can be used in a dashboard that displays various metrics related to the Ethereum network.
-
-Example usage:
-
-```
-import React from 'react';
-import Gas from './Gas';
-
-function Dashboard() {
- return (
-
-
- );
-}
-
-export default Dashboard;
-```
-## Questions:
- 1. What is the purpose of the `useSWR` hook and how is it used in this code?
- - The `useSWR` hook is used to fetch data from an external API and cache the response. In this code, it is used to fetch gas price data from the `ethgasstation.info` API and return the average gas price divided by 10.
-
-2. What is the `useLingui` hook and how is it used in this code?
- - The `useLingui` hook is used for internationalization (i18n) and localization of text in the application. In this code, it is used to translate the text displayed in the `div` elements when the data is loading or fails to load.
-
-3. What is the purpose of the `Gas` component and how is it used in the `zoo` project?
- - The `Gas` component is responsible for fetching and displaying gas price data from an external API. It can be used in the `zoo` project to display gas prices for transactions or other relevant information.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/GradientDot/index.md b/.autodoc/docs/markdown/core/src/components/GradientDot/index.md
deleted file mode 100644
index b74f0b85e..000000000
--- a/.autodoc/docs/markdown/core/src/components/GradientDot/index.md
+++ /dev/null
@@ -1,16 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/GradientDot/index.tsx)
-
-This code defines a set of functions and a React component that are used to generate color gradients based on a percentage value. The `gradientColor` function takes a percentage value as input and returns a color code that corresponds to a specific color gradient. The color gradients are defined using a set of if statements that check the percentage value against a range of values. If the percentage value falls within a specific range, the function returns a corresponding color code. If the percentage value is outside of the defined ranges, the function returns a default color code.
-
-The `gradientColorAsc` function is similar to `gradientColor`, but it returns a color gradient that is reversed. The `GradientDot` component is a React component that takes a percentage value as input and renders a small dot with a background color that corresponds to the percentage value. The `desc` prop is used to determine whether the color gradient should be descending or ascending. If `desc` is true, the `gradientColor` function is used to generate the color gradient. If `desc` is false, the `gradientColorAsc` function is used instead.
-
-This code can be used in a larger project to generate color gradients for various UI elements based on a percentage value. For example, it could be used to generate a color gradient for a progress bar or a chart that displays data as a percentage. The `GradientDot` component could be used to display a small dot next to a percentage value to indicate the progress of a task or process. Overall, this code provides a simple and flexible way to generate color gradients based on a percentage value.
-## Questions:
- 1. What is the purpose of the `gradientColor` and `gradientColorAsc` functions?
- - The `gradientColor` and `gradientColorAsc` functions return a color code based on the input percentage value. The color codes returned are used to create a gradient dot in the `GradientDot` component.
-
-2. What is the `GradientDot` component used for?
- - The `GradientDot` component is used to display a small dot with a color gradient based on the input percentage value. It takes in a `percent` prop and an optional `desc` prop to determine the color gradient direction.
-
-3. What is the expected input type for the `percent` prop in the `GradientDot` component?
- - The expected input type for the `percent` prop in the `GradientDot` component is `any`, but it is immediately converted to a float using `parseFloat` in the `gradientColor` and `gradientColorAsc` functions.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Header/Community.md b/.autodoc/docs/markdown/core/src/components/Header/Community.md
deleted file mode 100644
index 537d10398..000000000
--- a/.autodoc/docs/markdown/core/src/components/Header/Community.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Header/Community.tsx)
-
-The code is a React component that renders a dropdown menu for the "Learn" section of a website called "Zoo". The dropdown menu is implemented using the `Menu` and `Transition` components from the `@headlessui/react` library. The menu is triggered by a button labeled "Learn" with a chevron icon next to it. When the button is clicked, the menu items are displayed in a dropdown list.
-
-The menu items are implemented as links to different pages on the Zoo website or external resources. The links are implemented using the `Link` component from the `next/link` library or the `a` tag with a `href` attribute. The menu items include links to pages such as "Our Animals", "Whitepaper", "About", "Reward Calculator", "FAQs", and "Zoo Foundation". There is also a link to an external resource called "Buy Guide" and a link to an internal page called "DAO".
-
-The menu items are styled using CSS classes from the Tailwind CSS library. The menu items have a black background with white text, and the active menu item has a darker background color. The menu items are also rounded and have a shadow effect.
-
-This component can be used in the larger Zoo project to provide a consistent and easy-to-use navigation menu for the "Learn" section of the website. The component can be easily customized by adding or removing menu items or changing the styling. For example, if the Zoo website adds a new page to the "Learn" section, a new menu item can be added to the component by adding a new `Menu.Item` element with a `Link` or `a` tag. Similarly, if the Zoo website changes its color scheme, the CSS classes can be updated to reflect the new design.
-
-Example usage:
-
-```jsx
-import Learn from "./Learn";
-
-function App() {
- return (
- Dashboard
-Current gas price:
-
-
-
-
- {/* rest of the page */}
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `Learn` component?
-- The `Learn` component is responsible for rendering a dropdown menu with links to various pages on the website.
-
-2. What is the purpose of the `Menu` and `Transition` components?
-- The `Menu` component is used to create a dropdown menu, while the `Transition` component is used to animate the opening and closing of the menu.
-
-3. What is the significance of the `z-999` class in the `Menu.Items` component?
-- The `z-999` class sets the z-index of the dropdown menu to 999, ensuring that it appears on top of other elements on the page.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Header/Learn.md b/.autodoc/docs/markdown/core/src/components/Header/Learn.md
deleted file mode 100644
index 6a8afcffe..000000000
--- a/.autodoc/docs/markdown/core/src/components/Header/Learn.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Header/Learn.tsx)
-
-This code defines a React component called `Community` that renders a dropdown menu with links to various social media platforms. The menu is implemented using the `Menu` and `Transition` components from the `@headlessui/react` library. The dropdown menu is triggered by a button labeled "Community" with a chevron icon to indicate that it can be expanded. When the button is clicked, the menu expands to show a list of links to social media platforms such as Discord, Telegram, Instagram, Twitter, and Medium. The links are implemented using the `Menu.Item` component and are styled to change color when hovered over or clicked.
-
-This component can be used in a larger project to provide users with easy access to the project's social media pages. It can be easily customized by adding or removing links to social media platforms as needed. For example, if the project has a Reddit page, a link to that page can be added to the menu by creating a new `Menu.Item` component and setting the `href` attribute to the URL of the Reddit page.
-
-Here is an example of how the `Community` component can be used in a larger project:
-
-```jsx
-import Community from "./Community";
-
-function App() {
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `Menu` and `Transition` components from the "@headlessui/react" library?
-- The `Menu` component creates a dropdown menu, while the `Transition` component provides animation effects when the menu is opened or closed.
-
-2. What is the purpose of the `Link` component from the "next/link" library?
-- The `Link` component is used to create a hyperlink to another page within the Next.js application.
-
-3. What is the purpose of the `Community` function?
-- The `Community` function returns a dropdown menu with links to various social media platforms and communication channels related to the "zoo" project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Header/MarketPlace.md b/.autodoc/docs/markdown/core/src/components/Header/MarketPlace.md
deleted file mode 100644
index 0c9cd8961..000000000
--- a/.autodoc/docs/markdown/core/src/components/Header/MarketPlace.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Header/MarketPlace.tsx)
-
-This code defines a React component called `Marketplace` that renders a dropdown menu with links to different pages within the larger project. The dropdown menu is implemented using the `Menu` and `Transition` components from the `@headlessui/react` library. The `ChevronDownIcon` component from the `@heroicons/react` library is also used to display a downward-pointing arrow next to the menu label.
-
-When the user clicks on the menu label ("Marketplace"), the dropdown menu is displayed with three links: "All NFTs", "Pools", and "Egg Drop" (which is currently commented out). Each link is implemented as a `Menu.Item` component that wraps a `Link` component from the `next/link` library. The `active` prop passed to each `Menu.Item` component is used to determine whether the link is currently selected, and the corresponding CSS classes are applied to style the link accordingly.
-
-The `Marketplace` component is designed to be used as a reusable UI element within the larger project, wherever a dropdown menu with links to different pages is needed. For example, it could be used in a navigation bar or sidebar component to allow users to quickly navigate to different sections of the project. Here is an example of how the `Marketplace` component could be used in a navigation bar:
-
-```jsx
-import Marketplace from "./Marketplace";
-
-export default function NavigationBar() {
- return (
-
- );
-}
-```
-
-In this example, the `Marketplace` component is used to render a "Marketplace" dropdown menu in the navigation bar, along with a "Sign In" button. The `flex` and `items-center` classes are used to horizontally align the two elements. The `py-4` and `px-8` classes are used to add padding to the navigation bar. The `bg-black` and `text-white` classes are used to set the background and text colors, respectively.
-## Questions:
- 1. What is the purpose of the `Menu` and `Transition` components from the "@headlessui/react" library?
-- The `Menu` component creates a dropdown menu, while the `Transition` component provides animation effects when the menu is opened or closed.
-
-2. What is the significance of the `Fragment` component being used in the `Transition` component?
-- The `Fragment` component is used to group multiple child components without adding extra nodes to the DOM, which can improve performance.
-
-3. Why are there commented out lines of code for a "Egg Drop" menu item?
-- It is unclear why the "Egg Drop" menu item is commented out, but it may have been temporarily removed or is not yet implemented.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Header/ThemeSwitcher.md b/.autodoc/docs/markdown/core/src/components/Header/ThemeSwitcher.md
deleted file mode 100644
index 091555e67..000000000
--- a/.autodoc/docs/markdown/core/src/components/Header/ThemeSwitcher.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Header/ThemeSwitcher.tsx)
-
-The `ThemeSwitcher` component is responsible for toggling between light and dark themes in the `zoo` project. It imports the `useTheme` hook from the `next-themes` library, which provides the current theme and a function to set the theme. It also imports two icons from the `@fortawesome/free-solid-svg-icons` library, which are used to represent the moon and sun for the dark and light themes respectively.
-
-The component renders a `Button` component with a conditional class name and style based on the current theme. The class name is set to `text-white` if the theme is dark and `text-black` if the theme is light. The style sets the width and height of the button to 44 pixels and centers its content.
-
-When the button is clicked, the `onClick` function is called, which toggles the theme by calling the `setTheme` function with either `'light'` or `'dark'` as an argument. The icon displayed on the button also changes based on the current theme. If the theme is dark, the moon icon is displayed, and if the theme is light, the sun icon is displayed.
-
-This component can be used in any part of the `zoo` project where a theme switcher is needed. For example, it could be included in a navigation bar or a settings page. Here is an example of how the `ThemeSwitcher` component could be used in a `Header` component:
-
-```
-import ThemeSwitcher from './ThemeSwitcher'
-
-const Header = () => {
- return (
- Welcome to the Zoo Project!
-Check out our social media pages for the latest updates.
-
-
- );
-};
-
-export default Modal;
-```
-
-In this example, the `CloseIcon` component is used inside a `button` element to create a close button for the modal. When the button is clicked, the modal can be closed. The `CloseIcon` component can be customized by passing props to it, such as `width` and `height`, to adjust its size. Overall, this code provides a simple and reusable component for displaying a close icon in a React project.
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a React component called `CloseIcon` which renders an SVG icon of a close button.
-
-2. What props can be passed to the `CloseIcon` component?
-- The `CloseIcon` component accepts any props that can be passed to an SVG element, as indicated by the spread operator `{...props}`. However, the code does not specify any required or default props.
-
-3. What is the significance of the `fill` attribute in the `path` element?
-- The `fill` attribute sets the color to fill the interior of the SVG path. In this case, it is set to white (`#fff`).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Icons/facebook-icon.md b/.autodoc/docs/markdown/core/src/components/Icons/facebook-icon.md
deleted file mode 100644
index c4a737e8a..000000000
--- a/.autodoc/docs/markdown/core/src/components/Icons/facebook-icon.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Icons/facebook-icon.tsx)
-
-This code defines a React component called `FacebookIcon` that renders an SVG icon of the Facebook logo. The component takes in several props, including `width`, `height`, `color`, and `className`, which can be used to customize the appearance of the icon. The `IconProps` type is imported from the `react-feather` library, which suggests that this component may be used in conjunction with other icons from that library.
-
-The SVG icon itself consists of two `path` elements that define the shape of the logo. The first `path` element creates a circle with a radius of 6.667 units, which serves as the background of the logo. The second `path` element creates the actual "f" shape of the logo, which is centered within the circle.
-
-This component can be used in a larger project to display the Facebook logo in various contexts, such as in a social media sharing widget or as part of a user's profile information. Here is an example of how the `FacebookIcon` component could be used in a React component:
-
-```
-import React from "react";
-import FacebookIcon from "./FacebookIcon";
-
-const SocialMediaButton = ({ platform, url }) => {
- let icon;
- if (platform === "facebook") {
- icon = Modal Title
-Modal content goes here
- -
-
-);
-
-export default BuildingListItem;
-```
-
-In this example, the `BuildingListItem` component displays information about a building, including its name and address. The `BuildingIcon` component is used to display an icon representing the building. The `color` prop is set to `#f00`, which will make the icon red. The `BuildingIcon` component is imported from the module that defines the icon.
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a React component that renders an SVG icon.
-
-2. What library or package is being used in this code?
-- This code imports the `React` and `IconProps` modules from the `react` and `react-feather` packages, respectively.
-
-3. What does the SVG icon look like?
-- The SVG icon consists of two paths that form a shape resembling a zoo entrance gate. The first path creates the outline of the gate, while the second path creates the shape of an animal inside the gate.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Icons/menu-icon.md b/.autodoc/docs/markdown/core/src/components/Icons/menu-icon.md
deleted file mode 100644
index 3a2376ed8..000000000
--- a/.autodoc/docs/markdown/core/src/components/Icons/menu-icon.md
+++ /dev/null
@@ -1,46 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Icons/menu-icon.tsx)
-
-This code defines a React component called `MenuIcon`. The component returns an SVG element that displays three horizontal lines, which are commonly used to represent a menu icon. The SVG element has a width and height of 24 pixels and is filled with no color. The `path` element within the SVG element defines the shape of the icon using three horizontal lines, each starting at the left edge of the SVG and spanning its width. The `stroke` attribute sets the color of the lines to white, and the `strokeWidth` attribute sets their thickness to 2 pixels. The `strokeLinecap` and `strokeLinejoin` attributes set the style of the line endings and corners to be rounded.
-
-This component can be used in a larger project as a reusable menu icon that can be easily added to any part of the UI. For example, it can be used as a button to toggle a navigation menu on and off. Here is an example of how the `MenuIcon` component can be used in a React component:
-
-```
-import React from "react";
-import MenuIcon from "./MenuIcon";
-
-const Navigation = () => {
- const [isOpen, setIsOpen] = React.useState(false);
-
- const toggleMenu = () => {
- setIsOpen(!isOpen);
- };
-
- return (
-
- );
-};
-
-export default Navigation;
-```
-
-In this example, the `MenuIcon` component is used as the icon for a button that toggles a navigation menu on and off. The `isOpen` state variable is used to determine whether the menu is currently open or closed. When the button is clicked, the `toggleMenu` function is called, which toggles the value of `isOpen`. If `isOpen` is true, the menu is displayed as an unordered list of links. If `isOpen` is false, the menu is hidden.
-## Questions:
- 1. What does this code do?
- This code exports a React component called MenuIcon that renders an SVG icon with three horizontal lines.
-
-2. What is the purpose of the "props" parameter in the MenuIcon function?
- The "props" parameter is used to pass any additional props to the SVG element, such as className or onClick.
-
-3. Why is the stroke color set to "#fff" and the strokeWidth set to 2?
- The stroke color is set to white (#fff) and the strokeWidth is set to 2 to create a visible contrast against the background and make the icon more prominent.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Icons/twitter-icon.md b/.autodoc/docs/markdown/core/src/components/Icons/twitter-icon.md
deleted file mode 100644
index a2d7cd194..000000000
--- a/.autodoc/docs/markdown/core/src/components/Icons/twitter-icon.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Icons/twitter-icon.tsx)
-
-The code defines a React component called `TwitterIcon` that renders an SVG icon of the Twitter logo. The component takes in several props, including `width`, `height`, `color`, and `className`, which are used to customize the appearance of the icon. The `IconProps` type is imported from the `react-feather` library, which suggests that this component may be used in conjunction with other icons from that library.
-
-The SVG path data for the Twitter logo is defined within the `path` element of the SVG. The `fill` attribute of the `path` element is set to the `color` prop passed into the component, which allows the icon to be rendered in different colors.
-
-This component can be used in a larger project to display a Twitter icon wherever it is needed. For example, it could be used in a social media sharing component to allow users to share content on Twitter. Here is an example of how the `TwitterIcon` component could be used in a React component:
-
-```
-import React from "react";
-import TwitterIcon from "./TwitterIcon";
-
-const ShareOnTwitterButton = () => {
- return (
-
- );
-};
-```
-
-In this example, the `TwitterIcon` component is used within a button element to create a "Share on Twitter" button. The `color` prop is set to the Twitter brand color (#1DA1F2) to match the Twitter logo.
-## Questions:
- 1. What library is being used to render the icon?
-- The `react-feather` library is being used to render the icon.
-
-2. What is the purpose of the `...rest` parameter in the `TwitterIcon` function?
-- The `...rest` parameter is used to capture any additional props that are passed to the component and pass them down to the underlying `svg` element.
-
-3. What is the significance of the values assigned to the `width`, `height`, and `color` props?
-- The `width` and `height` props determine the size of the icon, while the `color` prop determines the color of the icon. These values can be overridden when the component is used.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Image/index.md b/.autodoc/docs/markdown/core/src/components/Image/index.md
deleted file mode 100644
index cbaa2534d..000000000
--- a/.autodoc/docs/markdown/core/src/components/Image/index.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Image/index.tsx)
-
-This code exports a React component called `Image` that wraps the `NextImage` component from the `next/image` package. The `Image` component is used to display images in the application. It accepts several props, including `src`, `width`, `height`, `layout`, `loader`, and `style`.
-
-The `Image` component uses a `useBlur` flag to determine whether to display a blurred placeholder image while the actual image is loading. If the `height` and `width` props are both greater than or equal to 40, the blurred placeholder image is displayed. Otherwise, an empty placeholder is used.
-
-The `loader` prop is used to specify the image loader function. By default, the `cloudinaryLoader` function from the `cloudinary` module is used. However, the `loader` prop can be used to override this default and provide a custom image loader function.
-
-The `cloudinaryLoader` function is not defined in this file, but it is imported from the `cloudinary` module. This function is used to generate a URL for the image using the Cloudinary image service.
-
-The `normalize` function is used to remove the leading slash from the `src` prop, if it exists. This is necessary because the Cloudflare loader function expects the `src` prop to be a relative path without a leading slash.
-
-The `cloudFlareLoader` function is used to generate a URL for the image using the Cloudflare image service. This function takes the `src`, `width`, and `quality` props as arguments and returns a URL that includes these parameters.
-
-The `shimmer` function generates an SVG placeholder image with a shimmer effect. This function takes the `width` and `height` props as arguments and returns an SVG string.
-
-Overall, this code provides a flexible and customizable way to display images in the application. The `Image` component can be used with different image loaders and can display a blurred placeholder image while the actual image is loading.
-## Questions:
- 1. What is the purpose of the `cloudinaryLoader` function imported from `../../functions/cloudinary`?
-- This code does not provide information on the purpose of the `cloudinaryLoader` function.
-
-2. What is the purpose of the `normalize` function?
-- The `normalize` function is used to remove the leading slash from the `src` parameter if it exists.
-
-3. What is the purpose of the `shimmer` function?
-- The `shimmer` function returns an SVG string that is used as a placeholder image while the actual image is being loaded. The SVG string is animated to create a shimmer effect.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Input/Address/index.md b/.autodoc/docs/markdown/core/src/components/Input/Address/index.md
deleted file mode 100644
index 1ac6d9244..000000000
--- a/.autodoc/docs/markdown/core/src/components/Input/Address/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Input/Address/index.tsx)
-
-The `AddressInput` component is a React functional component that renders an input field for a user to enter a wallet address or ENS name. It is part of a larger project called `zoo`.
-
-The component takes in several props, including `value`, `onUserInput`, `placeholder`, `className`, `align`, and `fontSize`. The `value` prop is the current value of the input field, while `onUserInput` is a callback function that is called whenever the user types into the input field. The `placeholder` prop is the text that is displayed in the input field when it is empty. The `className` prop is a string of CSS classes that are applied to the input field. The `align` prop specifies whether the text in the input field should be aligned to the left or right. The `fontSize` prop specifies the font size of the text in the input field.
-
-The component uses the `useENS` hook to resolve the ENS name entered by the user into an Ethereum address. The `enforcer` function is called whenever the user types into the input field. It checks that the input is a number between 0 and 100 and calls the `onUserInput` callback with the input if it passes the check.
-
-The component renders an `input` element with various props and styles. The `value` prop is set to the `value` prop passed into the component. The `onChange` prop is set to the `enforcer` function. The `inputMode`, `title`, `autoComplete`, `autoCorrect`, `autoCapitalize`, and `spellCheck` props are set to various values to provide a good user experience. The `placeholder` prop is set to the `placeholder` prop passed into the component. The `pattern` prop is set to a regular expression that matches Ethereum addresses. The `className` prop is set to a combination of the `className` prop passed into the component and some additional classes based on the `align` prop. The `style` prop is set to an object with a `fontSize` property based on the `fontSize` prop.
-
-The `AddressInput` component is exported as the default export of the module.
-## Questions:
- 1. What is the purpose of the `useENS` hook being imported from `../../../hooks/useENS`?
-- The `useENS` hook is used to retrieve the ENS name and address of the value passed to the `AddressInput` component.
-
-2. What is the purpose of the `enforcer` function?
-- The `enforcer` function is used to validate and enforce input restrictions on the `AddressInput` component. It checks if the input is a number less than or equal to 100 and passes it to the `onUserInput` function.
-
-3. What is the purpose of the `align` prop being passed to the `AddressInput` component?
-- The `align` prop is used to specify the alignment of the text in the input field, either "right" or "left".
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Input/Numeric/index.md b/.autodoc/docs/markdown/core/src/components/Input/Numeric/index.md
deleted file mode 100644
index 3d1e6afef..000000000
--- a/.autodoc/docs/markdown/core/src/components/Input/Numeric/index.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Input/Numeric/index.tsx)
-
-This code exports a React component called `Input` that renders an HTML input element. The component is designed to be used for numerical input, and includes several options and restrictions to enforce this.
-
-The `Input` component takes several props, including `value`, `onUserInput`, `placeholder`, and `className`. The `value` prop is the current value of the input, and `onUserInput` is a callback function that is called whenever the user types into the input. The `placeholder` prop is the text that is displayed in the input when it is empty, and `className` is a string of CSS classes that can be used to style the input.
-
-The `Input` component enforces several restrictions on the input. It only allows numerical input, and replaces commas with periods to ensure that the input uses the correct decimal separator. It also sets several HTML attributes on the input, including `inputMode`, `title`, `autoComplete`, `autoCorrect`, `type`, `pattern`, `placeholder`, `min`, `minLength`, `maxLength`, and `spellCheck`. These attributes ensure that the input is properly formatted and validated.
-
-The `Input` component also includes a regular expression called `inputRegex`, which is used to match escaped "." characters in the input. This regular expression is used to ensure that the input only contains valid numerical characters.
-
-Overall, the `Input` component is a useful tool for enforcing numerical input in a React application. It can be used in a variety of contexts, such as in a form for entering prices or quantities. Here is an example of how the `Input` component might be used in a larger React application:
-
-```
-import React, { useState } from "react";
-import Input from "./Input";
-
-function PriceForm() {
- const [price, setPrice] = useState("");
-
- const handlePriceChange = (newPrice) => {
- setPrice(newPrice);
- };
-
- return (
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `Input` component?
-
- The `Input` component is a memoized React component that renders an HTML input element with specific options and properties.
-
-2. What is the purpose of the `enforcer` function?
-
- The `enforcer` function checks if the user input is valid based on a regular expression and calls the `onUserInput` function if it is valid.
-
-3. What is the purpose of the `inputRegex` regular expression?
-
- The `inputRegex` regular expression matches a string that contains digits and escaped periods (i.e., "\\.") in a non-capturing group. It is used to validate user input in the `enforcer` function.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Input/Percent/index.md b/.autodoc/docs/markdown/core/src/components/Input/Percent/index.md
deleted file mode 100644
index 4f8b26300..000000000
--- a/.autodoc/docs/markdown/core/src/components/Input/Percent/index.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Input/Percent/index.tsx)
-
-The `Input` component in this file is a reusable React component that renders an HTML input element. It takes in several props, including `value`, `onUserInput`, `placeholder`, `className`, `align`, and `fontSize`. The `value` prop is the current value of the input, while `onUserInput` is a callback function that is called whenever the user types into the input. The `placeholder` prop is the text that is displayed in the input when it is empty, while `className` and `fontSize` are used to style the input.
-
-The `Input` component enforces several constraints on the user's input. It only allows numeric input, and it limits the length of the input to 3 characters. Additionally, it replaces any commas in the input with periods, since the input is used in a financial context where periods are used as decimal separators. Finally, it only allows input values that are less than or equal to 100.
-
-The `Input` component is memoized using React's `React.memo` function, which means that it will only re-render if its props have changed. This can help improve performance in cases where the component is used frequently and its props are not changing often.
-
-The `Input` component is exported as both a named export (`Input`) and a default export. The named export is used to import the component into other files, while the default export is used to import the component into files that are not TypeScript-aware.
-
-Here is an example of how the `Input` component might be used in a larger project:
-
-```jsx
-import React, { useState } from "react";
-import Input from "./path/to/Input";
-
-function MyComponent() {
- const [value, setValue] = useState("");
-
- const handleUserInput = (input) => {
- setValue(input);
- };
-
- return (
- {building.name}
-{building.address}
-
-
-
- );
-}
-```
-
-In this example, the `MyComponent` function renders an instance of the `Input` component. It passes in a `value` state variable and a `handleUserInput` callback function as props to the `Input` component. Whenever the user types into the input, the `handleUserInput` function is called with the new input value, and the `value` state variable is updated accordingly. The `placeholder`, `className`, `align`, and `fontSize` props are also passed in to customize the appearance of the input.
-## Questions:
- 1. What is the purpose of the `enforcer` function?
-- The `enforcer` function checks if the input value is valid and within a certain range, and if so, calls the `onUserInput` function with the input value.
-
-2. What is the significance of the `inputRegex` variable?
-- The `inputRegex` variable is a regular expression that matches any string that contains only digits (0-9) and escaped "." characters.
-
-3. What is the purpose of the `align` prop?
-- The `align` prop is used to specify the alignment of the text within the input field, and can be set to either "right" or "left".
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Input/index.md b/.autodoc/docs/markdown/core/src/components/Input/index.md
deleted file mode 100644
index aaf94e4f6..000000000
--- a/.autodoc/docs/markdown/core/src/components/Input/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Input/index.tsx)
-
-The code above is a module that exports an object called `Input`. This object contains three properties: `Address`, `Numeric`, and `Percent`. Each of these properties is a reference to a module that is imported from a file located in the `zoo` project.
-
-The `Address` module is likely used to represent a physical address, while the `Numeric` module is likely used to represent numerical values. The `Percent` module is likely used to represent percentages.
-
-By exporting these modules as properties of the `Input` object, other modules within the `zoo` project can easily import and use them. For example, a module that needs to represent a physical address could import the `Address` module like this:
-
-```
-import { Address } from 'zoo/Input'
-```
-
-This code would import the `Address` module from the `Input` object exported by the `zoo` project. The module could then use the `Address` module to represent physical addresses.
-
-Overall, this code is a simple way to organize and export commonly used modules within the `zoo` project. By exporting them as properties of an object, other modules can easily import and use them without having to worry about the specific file paths or module names.
-## Questions:
- 1. What is the purpose of this code?
- This code exports an object called `Input` that contains three modules: `Address`, `Percent`, and `Numeric`.
-
-2. What are the dependencies of this code?
- This code depends on three other modules located in the same directory: `Address.js`, `Numeric.js`, and `Percent.js`.
-
-3. How can this code be used in other parts of the project?
- Other parts of the project can import the `Input` object from this module and use its properties (`Address`, `Percent`, and `Numeric`) as needed. For example: `import { Address } from './zoo/Input'`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/LanguageSwitch/index.md b/.autodoc/docs/markdown/core/src/components/LanguageSwitch/index.md
deleted file mode 100644
index f1509c22b..000000000
--- a/.autodoc/docs/markdown/core/src/components/LanguageSwitch/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/LanguageSwitch/index.tsx)
-
-The `LangSwitcher` component is responsible for rendering a dropdown menu that allows users to switch between different languages on the website. The component is built using the `Menu` and `Transition` components from the `@headlessui/react` library, as well as several other third-party libraries such as `next/router` and `cookie-cutter`.
-
-When the component is rendered, it first retrieves the current locale, available locales, and current URL path using the `useRouter` hook from `next/router`. It then renders a button that displays the current language flag and a chevron icon to indicate that it is a dropdown menu. When the button is clicked, the `Menu` component is activated and displays a list of available languages.
-
-Each language in the list is rendered as a `Menu.Item` component, which contains a link to the current page with the `locale` query parameter set to the corresponding language code. When a language is selected, the `cookie-cutter` library is used to set a cookie with the selected language code, which is then used to set the `locale` query parameter on subsequent page loads.
-
-Overall, the `LangSwitcher` component provides a simple and intuitive way for users to switch between different languages on the website. It can be easily integrated into other components and pages using the `import` statement, as shown below:
-
-```
-import LangSwitcher from './path/to/LangSwitcher'
-
-function MyComponent() {
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code is a React component that renders a language switcher dropdown menu with flags and language names.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including `@headlessui/react`, `@heroicons/react/solid`, `next/link`, `next/image`, `classnames`, `next/router`, and `cookie-cutter`.
-
-3. What is the format of the `LANG_TO_COUNTRY` object?
-- The `LANG_TO_COUNTRY` object maps language codes to their corresponding country names in various languages. The keys are language codes (e.g. "en" for English), and the values are strings representing the country name in that language (e.g. "English" for the "en" key).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/LineGraph/index.md b/.autodoc/docs/markdown/core/src/components/LineGraph/index.md
deleted file mode 100644
index 706a6def0..000000000
--- a/.autodoc/docs/markdown/core/src/components/LineGraph/index.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/LineGraph/index.tsx)
-
-The code is a React component that renders a line graph. The component takes in an array of data points, where each data point is an object with an x and y value. The component also takes in optional stroke and strokeWidth props that determine the color and thickness of the line. The component uses the `@visx/scale` library to create x and y scales based on the data points. The x scale maps the x values of the data points to the width of the graph, and the y scale maps the y values of the data points to the height of the graph. The component then renders an SVG element with a `LinePath` component from the `@visx/shape` library. The `LinePath` component takes in the data points and uses the x and y scales to draw a line connecting the points. If the stroke prop is an object with a `gradient` property, the component also renders a `LinearGradient` component from the `@visx/gradient` library to create a gradient stroke. The component uses the `react-virtualized-auto-sizer` library to automatically resize the graph to fit its container.
-
-This component can be used in a larger project to display time-series data or any other data that can be represented as a line graph. The component is flexible and can be customized with different stroke colors and thicknesses. The component can also be used with a gradient stroke to create a more visually appealing graph. The component is responsive and will automatically resize to fit its container, making it easy to use in different parts of a larger application.
-
-Example usage:
-
-```
-import LineGraph from './LineGraph'
-
-const data = [
- { x: 0, y: 0 },
- { x: 1, y: 1 },
- { x: 2, y: 2 },
- { x: 3, y: 3 },
- { x: 4, y: 4 },
-]
-
-function App() {
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a LineGraph component that renders a line graph using data passed in as props.
-
-2. What external libraries are being used in this code?
-- This code imports several external libraries including `react-virtualized-auto-sizer`, `react`, `@visx/scale`, `@visx/shape`, `lodash`, and `@visx/gradient`.
-
-3. What props does the LineGraph component accept?
-- The LineGraph component accepts a `data` prop which is an array of objects with `x` and `y` properties, a `stroke` prop which can be either an object with a `solid` property or an object with `gradient` property containing `from` and `to` properties, and a `strokeWidth` prop which is a number.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/List/index.md b/.autodoc/docs/markdown/core/src/components/List/index.md
deleted file mode 100644
index f298e57ac..000000000
--- a/.autodoc/docs/markdown/core/src/components/List/index.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/List/index.tsx)
-
-The code above defines two React components, `Item` and `List`, which can be used to display a list of items in a visually appealing way.
-
-The `Item` component takes in an object `item` and an optional string `className` as props. It returns a `li` element with the `item` object as its content. The `className` prop is used to add additional CSS classes to the `li` element, which can be used to customize the appearance of the item.
-
-The `List` component takes in an array of objects `items` and an optional string `className` as props. It returns a `ul` element with each object in the `items` array rendered as an `Item` component. The `key` prop is set to the index of the item in the array to ensure that each item is uniquely identified. The `className` prop is used to add additional CSS classes to the `ul` element, which can be used to customize the appearance of the list.
-
-The `List` component also has a static property `Item` which refers to the `Item` component. This allows the `Item` component to be accessed as a property of the `List` component, which can be useful for organizing related components.
-
-Overall, this code provides a simple and reusable way to display a list of items with customizable styling. It can be used in a variety of contexts within a larger project, such as displaying a list of products on an e-commerce site or a list of articles on a blog.
-
-Example usage:
-
-```
-import List from './List';
-
-const items = [
- { name: 'Item 1', price: 10 },
- { name: 'Item 2', price: 20 },
- { name: 'Item 3', price: 30 },
-];
-
-function App() {
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `classNames` function being imported from "../../functions"?
-- The `classNames` function is likely used to concatenate multiple class names together for the `className` prop of the `li` and `ul` elements.
-
-2. What is the expected shape of the `item` prop passed to the `Item` component?
-- The `item` prop can be of any type since its type is defined as `any` in the `ItemProps` interface.
-
-3. How can the `Item` component be used outside of the `List` component?
-- The `Item` component can be used outside of the `List` component by importing it separately and passing in the required `item` and optional `className` props.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/ListLogo/index.md b/.autodoc/docs/markdown/core/src/components/ListLogo/index.md
deleted file mode 100644
index b384f19cb..000000000
--- a/.autodoc/docs/markdown/core/src/components/ListLogo/index.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ListLogo/index.tsx)
-
-The code above is a React component that renders a logo image. It imports the `Logo` component from a file located at `../Logo` and the `useHttpLocations` hook from a file located at `../../hooks/useHttpLocations`.
-
-The `ListLogo` component takes in four props: `logoURI`, `style`, `size`, and `alt`. `logoURI` is a required string that represents the URI of the logo image. `style` is an optional object that represents the CSS styles to apply to the logo image. `size` is an optional string that represents the width and height of the logo image, with a default value of `'24px'`. `alt` is an optional string that represents the alternative text for the logo image.
-
-The `useHttpLocations` hook is called with `logoURI` as its argument, which returns an array of strings representing the possible locations of the logo image. These locations are then passed as the `srcs` prop to the `Logo` component, along with the other props.
-
-The `Logo` component is responsible for rendering the actual logo image. It takes in the `alt`, `width`, `height`, `srcs`, and `style` props. The `alt` prop is used as the alternative text for the image. The `width` and `height` props are used to set the dimensions of the image. The `srcs` prop is an array of strings representing the possible locations of the image, which are tried in order until a valid image is found. The `style` prop is an object representing the CSS styles to apply to the image.
-
-Overall, this component can be used to easily render a logo image in a React application. It provides flexibility in terms of the size and style of the image, and handles the logic of finding the image at the correct location. An example usage of this component would be:
-
-```
-My Shopping List
-
-
- );
-}
-```
-## Questions:
- 1. What does this code do?
-- This code exports a function called `Loader` that returns an SVG element representing a spinning circle with a customizable size and stroke color.
-
-2. What are the default values for `size` and `stroke`?
-- The default value for `size` is `'16px'` and the default value for `stroke` is `'#FFFFFF'`.
-
-3. What is the purpose of the `...rest` parameter?
-- The `...rest` parameter is used to pass any additional props to the SVG element, allowing for additional customization and styling beyond the `size` and `stroke` parameters.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Logo/bridgeLogo.md b/.autodoc/docs/markdown/core/src/components/Logo/bridgeLogo.md
deleted file mode 100644
index 840c90cd9..000000000
--- a/.autodoc/docs/markdown/core/src/components/Logo/bridgeLogo.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Logo/bridgeLogo.tsx)
-
-The code defines a React component called `Logo` that renders an image. The component takes in several props, including the `src` of the image, its `width` and `height`, an optional `alt` text, a `className`, and a `style` object.
-
-The component first renders a `div` element with a `rounded` class and some styles for width, height, and centering the image. Inside this `div`, an `img` element is rendered with the `src` prop passed in, or a default image if `src` is falsy. The `onError` event is commented out, but it appears to handle cases where the `src` image fails to load. If this happens, the `src` is added to a `BAD_SRCS` object and the component is refreshed.
-
-This component is likely used throughout the larger project to display logos or images. It provides a fallback image if the desired image fails to load, and also adds failed `src` values to a `BAD_SRCS` object for debugging purposes.
-
-Example usage:
-```
-import Logo from "./Logo";
-
-function App() {
- return (
- Loading data...
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `BAD_SRCS` object?
-- The `BAD_SRCS` object is used to keep track of token addresses that have failed to load.
-
-2. What is the purpose of the `Logo` component?
-- The `Logo` component renders an image by sequentially trying a list of URIs, and then eventually a fallback triangle alert.
-
-3. What is the purpose of the `alt` prop in the `LogoProps` type?
-- The `alt` prop is used to provide alternative text for the image in case it cannot be displayed.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Logo/index.md b/.autodoc/docs/markdown/core/src/components/Logo/index.md
deleted file mode 100644
index 1bfafc4e1..000000000
--- a/.autodoc/docs/markdown/core/src/components/Logo/index.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Logo/index.tsx)
-
-The `Logo` component in the `zoo` project is a React functional component that renders an image. It takes in a list of URIs as `srcs`, and sequentially tries each URI until it finds one that works. If none of the URIs work, it displays a fallback image of a triangle alert.
-
-The `Logo` component is used to display logos of tokens in the larger project. It is designed to handle cases where the token logo URI is incorrect or unavailable. The component uses the `Image` component from the `../Image` file to display the image. The `Image` component takes in a `src` prop, which is the URI of the image to be displayed. If the URI is incorrect or unavailable, the `onError` callback is triggered. In the `Logo` component, the `onError` callback updates the `BAD_SRCS` object with the URI that failed, and triggers a state update to re-render the component with the next URI in the list.
-
-The `Logo` component also takes in other props such as `width`, `height`, `style`, `alt`, and `className`. These props are passed down to the `Image` component to customize the image display. The `Logo` component also uses the `cloudinaryLoader` function from the `../../functions/cloudinary` file as the `loader` prop for the `Image` component. The `cloudinaryLoader` function is responsible for loading the image from the cloudinary CDN.
-
-Here is an example usage of the `Logo` component:
-
-```
-import Logo from "./Logo";
-
-const tokenLogoSrcs = [
- "https://example.com/token-logo.png",
- "https://example.com/token-logo-2.png",
- "https://example.com/token-logo-3.png",
-];
-
-const MyComponent = () => {
- return (
-
-
- );
-};
-```
-
-In this example, the `Logo` component is used to display the logo of a token. The `srcs` prop is an array of URIs to try, and the `width` and `height` props set the size of the image. The `alt` prop is used to provide alternative text for the image.
-## Questions:
- 1. What is the purpose of the `Logo` component?
-- The `Logo` component renders an image by sequentially trying a list of URIs and eventually a fallback triangle alert.
-
-2. What is the `BAD_SRCS` object used for?
-- The `BAD_SRCS` object is used to keep track of URIs that have failed to load, so that they can be skipped in future attempts to load the image.
-
-3. What is the `cloudinaryLoader` function used for?
-- The `cloudinaryLoader` function is used as a loader for the `Image` component, which loads the image from a cloudinary URL.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Main/index.md b/.autodoc/docs/markdown/core/src/components/Main/index.md
deleted file mode 100644
index 45425fdf6..000000000
--- a/.autodoc/docs/markdown/core/src/components/Main/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Main/index.tsx)
-
-This code defines a React component called `Main` that renders a main section of a web page. The component takes in several props, including `children`, which is a required prop that represents the content to be rendered inside the main section. The `isModal` prop is optional and is used to indicate whether the main section is being rendered as part of a modal dialog. The `innerClassName` prop is also optional and is used to specify additional CSS classes to be applied to the inner container of the main section. Finally, the `bgColor` prop is optional and is used to specify the background color of the main section, with a default value of "#333".
-
-The `Main` component renders a `main` HTML element with several CSS classes that center the content vertically and horizontally within the main section. The `bgColor` prop is used to set the background color of the main section. The `style` prop is used to set the height of the main section to "max-content", which allows the height of the section to expand to fit its content.
-
-Inside the `main` element, there is a `div` element that contains the `children` prop. The `innerClassName` prop is used to add any additional CSS classes to this `div` element. If the `isModal` prop is not set, the `div` element is also given a top margin of 12 pixels on small screens and 20 pixels on large screens.
-
-This `Main` component can be used in a larger React application to render the main content of a web page or modal dialog. For example, it could be used in a layout component that wraps other components and provides a consistent layout for the entire application. Here is an example of how the `Main` component could be used:
-
-```
-import Main from "./Main";
-
-function App() {
- return (
-
- ...
-
-
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `Main` component?
- - The `Main` component is a functional component that renders a `main` element with flexible and responsive styles, and it accepts children, isModal, innerClassName, and bgColor props.
-
-2. What is the significance of the `bgColor` prop?
- - The `bgColor` prop is an optional prop that sets the background color of the `main` element, and it defaults to a dark gray color.
-
-3. What is the purpose of the `innerClassName` prop?
- - The `innerClassName` prop is an optional prop that sets the class name of the inner `div` element, which wraps the children of the `Main` component. It allows for additional styling or customization of the inner content.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Menu/index.md b/.autodoc/docs/markdown/core/src/components/Menu/index.md
deleted file mode 100644
index 8c5e05d37..000000000
--- a/.autodoc/docs/markdown/core/src/components/Menu/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Menu/index.tsx)
-
-The `Menu` component in this file is responsible for rendering a dropdown menu that displays a list of links to various resources related to the Sushi project. The menu is triggered by clicking on a button that displays an icon of three horizontal lines. When the button is clicked, a popover appears below it, displaying the list of links.
-
-The `Menu` component imports several other components and functions from various libraries and files. These include the `Popover` and `Transition` components from the `@headlessui/react` library, the `ExternalLink` component from another file, and the `classNames` and `t` functions from the `styling` and `macro` files respectively.
-
-The `items` function takes an `i18n` object as an argument and returns an array of objects, each representing a link in the menu. Each object has a `name`, `description`, and `href` property, which correspond to the name of the link, a short description of the resource it points to, and the URL of the resource.
-
-The `Menu` component uses the `useLingui` hook to access the `i18n` object, which is then passed to the `items` function to generate the list of links. The resulting array of link objects is stored in the `solutions` variable.
-
-The `Menu` component returns a `Popover` component, which wraps the button and popover content. The `Popover` component takes a function as a child, which receives an object with an `open` property that indicates whether the popover is currently open or closed. The function returns the button and popover content, which are conditionally rendered based on the value of `open`.
-
-The button is rendered using the `Popover.Button` component and displays an icon of three horizontal lines. The `classNames` function is used to conditionally apply CSS classes to the button based on whether the popover is open or closed.
-
-The popover content is rendered using the `Transition` and `Popover.Panel` components. The `Transition` component provides animation when the popover is opened or closed. The `Popover.Panel` component contains the actual content of the popover, which is a list of links generated by mapping over the `solutions` array and rendering an `ExternalLink` component for each link.
-
-The `ExternalLink` component is responsible for rendering an anchor tag that opens the link in a new tab when clicked. It takes a `href` prop that specifies the URL of the link, and renders the `name` and `description` properties of the link object as the link text.
-
-Overall, the `Menu` component provides a reusable dropdown menu that can be used to display a list of links to various resources related to the Sushi project. It uses several other components and functions to achieve this, including the `Popover`, `Transition`, and `ExternalLink` components, as well as the `classNames` and `t` functions.
-## Questions:
- 1. What is the purpose of this code?
-- This code is a React component that renders a menu with links to various resources related to Sushi, including documentation, development resources, open source projects, tools, and a Discord community.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including "@headlessui/react" for the popover and transition components, "next/image" for rendering the menu icon, "@lingui/core" and "@lingui/react" for internationalization support, and a custom "classNames" function for styling.
-
-3. What is the structure of the data used to generate the menu items?
-- The menu items are generated from an array of objects, where each object represents a single menu item and includes properties for the item's name, description, and href (URL). The array is generated by calling the "items" function and passing in an "i18n" object from the "@lingui/core" library.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Modal/HeadlessUIModal.md b/.autodoc/docs/markdown/core/src/components/Modal/HeadlessUIModal.md
deleted file mode 100644
index 6e7211b9b..000000000
--- a/.autodoc/docs/markdown/core/src/components/Modal/HeadlessUIModal.md
+++ /dev/null
@@ -1,50 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Modal/HeadlessUIModal.tsx)
-
-The `HeadlessUIModal` component is a reusable modal component that can be used in a React project. It is built using the `@headlessui/react` library, which provides a set of completely unstyled, fully accessible UI components that can be used to build custom UIs.
-
-The `HeadlessUIModal` component takes in three props: `isOpen`, `onDismiss`, and `children`. The `isOpen` prop is a boolean that determines whether the modal is open or closed. The `onDismiss` prop is a function that is called when the modal is dismissed. The `children` prop is used to pass in the content that will be displayed inside the modal.
-
-The component uses the `Transition.Root` component from `@headlessui/react` to handle the transition between the open and closed states of the modal. When the `isOpen` prop is `true`, the modal is displayed. When the `isOpen` prop is `false`, the modal is hidden.
-
-The modal itself is built using the `Dialog` component from `@headlessui/react`. The `Dialog` component provides the basic structure for the modal, including the overlay and the content area. The `Dialog` component takes in several props, including `open`, which determines whether the modal is open or closed, and `onClose`, which is called when the modal is closed.
-
-The content of the modal is passed in using the `children` prop. The content is wrapped in a `Transition.Child` component, which handles the transition of the content when the modal is opened or closed.
-
-The `HeadlessUIModal` component is a flexible and reusable component that can be used to display any kind of content in a modal. It is fully accessible and provides a smooth transition between the open and closed states of the modal.
-
-Example usage:
-
-```
-import HeadlessUIModal from './HeadlessUIModal';
-
-function MyComponent() {
- const [isOpen, setIsOpen] = useState(false);
-
- function handleOpenModal() {
- setIsOpen(true);
- }
-
- function handleCloseModal() {
- setIsOpen(false);
- }
-
- return (
- <>
-
- Welcome to my website!
-This is the main content of my website.
-Modal Title
-Modal content goes here.
-
-
-
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a React component called `Modal` that renders a customizable modal dialog box.
-
-2. What are the required props for the `Modal` component?
-- The only required props are `isOpen` and `onDismiss`, which respectively determine whether the modal is visible and what happens when the modal is dismissed.
-
-3. What are some of the optional props that can be passed to the `Modal` component?
-- Some of the optional props include `minHeight`, `maxHeight`, `padding`, `maxWidth`, `isMax`, `isFullWidth`, `backgroundColor`, `scrollable`, and `transitionProps`, which allow for customization of the modal's appearance and behavior.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/ModalHeader/BidModalHeader.md b/.autodoc/docs/markdown/core/src/components/ModalHeader/BidModalHeader.md
deleted file mode 100644
index 7f7c94662..000000000
--- a/.autodoc/docs/markdown/core/src/components/ModalHeader/BidModalHeader.md
+++ /dev/null
@@ -1,14 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ModalHeader/BidModalHeader.tsx)
-
-The code defines a React functional component called `BidModalHeader` that renders a header for a bidding modal. The component takes in three props: `className`, `onBack`, and `showAccount`. `className` is a string that specifies additional CSS classes to apply to the component. `onBack` is a function that is called when the user clicks on a chevron left icon, which is rendered as a circular button. `showAccount` is a boolean that determines whether to show a `Web3Status` component, which displays the user's connected wallet status.
-
-The `useActiveWeb3React` hook is used to retrieve the user's connected wallet account. The `Web3Status` component is only rendered if `showAccount` is true, and it displays the user's wallet status using the `i18n` internationalization library and the `t` macro from the `@lingui/macro` package.
-
-This component can be used in a larger project that involves bidding on items using a blockchain network. The `BidModalHeader` component can be included in a bidding modal that allows users to place bids on items. The component provides a back button and a wallet status indicator, which are useful for navigating the modal and displaying the user's wallet status. The `className` prop can be used to customize the component's appearance, and the `onBack` prop can be used to specify a custom function to handle the back button click event. Overall, this component provides a simple and reusable header for a bidding modal in a blockchain-based application.
-## Questions:
- 1. What is the purpose of the `BidModalHeader` component?
- - The `BidModalHeader` component is used to render the header section of a bidding modal.
-2. What is the role of the `Web3Status` component in this code?
- - The `Web3Status` component is used to display the status of the user's Web3 wallet connection.
-3. What is the significance of the `FC` type in the component declaration?
- - The `FC` type is a shorthand for `FunctionComponent` and indicates that the component is a function component that accepts props.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/ModalHeader/index.md b/.autodoc/docs/markdown/core/src/components/ModalHeader/index.md
deleted file mode 100644
index a5176a76d..000000000
--- a/.autodoc/docs/markdown/core/src/components/ModalHeader/index.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ModalHeader/index.tsx)
-
-The code above is a React component called `ModalHeader` that renders a header for a modal. The component takes in four optional props: `title`, `className`, `onClose`, and `onBack`.
-
-If the `onBack` prop is provided, a `ChevronLeftIcon` is rendered on the left side of the header. When clicked, the `onBack` function is called. If the `title` prop is provided, a `Typography` component is rendered in the center of the header with the provided title. If the `onClose` prop is provided, an `XIcon` is rendered on the right side of the header. When clicked, the `onClose` function is called.
-
-The `ModalHeader` component is useful for creating consistent and reusable headers for modals throughout a project. By passing in different `title`, `onClose`, and `onBack` functions, the header can be customized for different modals.
-
-Here is an example of how the `ModalHeader` component can be used:
-
-```
-import ModalHeader from "./ModalHeader";
-
-function MyModal() {
- const handleBack = () => {
- // handle going back
- };
-
- const handleClose = () => {
- // handle closing modal
- };
-
- return (
- Modal Content
-This is the content of the modal.
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `ModalHeader` that renders a header for a modal with an optional title, back button, and close button.
-
-2. What external dependencies does this code rely on?
-- This code imports two icons from the `@heroicons/react/outline` package and a `Typography` component from a local file.
-
-3. What props can be passed to the `ModalHeader` component?
-- The `ModalHeader` component accepts four optional props: `title` (a string), `className` (a string), `onClose` (a function), and `onBack` (a function).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/ModelViewer/index.md b/.autodoc/docs/markdown/core/src/components/ModelViewer/index.md
deleted file mode 100644
index 0c6b8ff22..000000000
--- a/.autodoc/docs/markdown/core/src/components/ModelViewer/index.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ModelViewer/index.tsx)
-
-The `ModelViewer` component is a React component that renders a 3D model viewer using the `model-viewer` library from Google. The component takes several props, including the paths to the GLB and USDZ files for the 3D model, the zoom level, and a boolean flag for whether to use the USDZ file. The component also includes a list of animal models that can be used as the current 3D model.
-
-The component renders a `div` element that contains the `model-viewer` element, which is created using a template string that includes the props passed to the component. The `model-viewer` element includes several attributes that control its behavior, such as `loading`, `reveal`, `camera-controls`, `auto-rotate`, `autoplay`, and `ar`. These attributes enable features such as automatic rotation, autoplay, and augmented reality (AR) support.
-
-The `useEffect` hook is used to perform any necessary cleanup when the component is unmounted, but it does not currently have any functionality.
-
-The `ModelViewer` component can be used in a larger project to display 3D models of animals or other objects. For example, it could be used in an educational app to teach children about different animals, or in an e-commerce app to allow customers to view products in 3D. The component could be customized by passing different props, such as different 3D models or zoom levels, to suit the needs of the specific use case.
-
-Example usage:
-
-```
-import ModelViewer from "./ModelViewer";
-
-function App() {
- return (
-
- {/* modal content */}
-
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
-
- This code defines a React component called `ModelViewer` that renders a 3D model using the `model-viewer` library. The component takes in several props that allow customization of the model and its behavior.
-
-2. What are the default values for the props of this component?
-
- The default values for the props are as follows:
- - `glb`: "/models/Tiger/TIGER_BABY.glb"
- - `usdz`: "/models/Tiger/TIGER_BABY.usdz"
- - `zoom`: "auto"
- - `usdzFile`: false
- - `multiple`: false
- - `onClick`: () => {}
- - `className`: ""
-
-3. What is the purpose of the `useEffect` hook in this code?
-
- The `useEffect` hook is currently empty and serves no purpose. It is likely included as a placeholder for future code that may need to be executed when the component mounts or unmounts.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Moonpaybtn/MoonpayBtn.md b/.autodoc/docs/markdown/core/src/components/Moonpaybtn/MoonpayBtn.md
deleted file mode 100644
index df853231a..000000000
--- a/.autodoc/docs/markdown/core/src/components/Moonpaybtn/MoonpayBtn.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Moonpaybtn/MoonpayBtn.tsx)
-
-This code defines a React component called `MoonPayBtn` that renders a button labeled "Buy Crypto". When the button is clicked, a dropdown menu appears that contains an embedded iframe from the MoonPay API. The iframe allows users to buy cryptocurrency using a MoonPay account.
-
-The component uses the `useState` hook to manage the state of the dropdown menu. When the button is clicked, the `handleOnClick` function is called, which toggles the value of the `IsActive` state variable. This causes the dropdown menu to appear or disappear depending on its current state.
-
-The `Transition` component from the `@headlessui/react` library is used to animate the appearance and disappearance of the dropdown menu. The `Menu` component from the same library is used to define the structure of the dropdown menu. The `Menu.Button` component defines the appearance of the button that triggers the dropdown menu, and the `Menu.Items` component defines the contents of the dropdown menu.
-
-The `Menu.Item` component is used to wrap the MoonPay iframe. The `allow` attribute of the iframe specifies the permissions required for the iframe to function properly. The `src` attribute specifies the URL of the MoonPay API, along with an API key and a currency code.
-
-This component can be used in a larger project that requires a way for users to buy cryptocurrency using a MoonPay account. The component can be imported and rendered wherever it is needed in the project. For example:
-
-```
-import MoonPayBtn from "./components/MoonPayBtn";
-
-function App() {
- return (
- 3D Animal Viewer
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the MoonPayBtn component?
-- The MoonPayBtn component is used to render a button that allows users to buy cryptocurrency through MoonPay.
-
-2. What is the purpose of the handleOnClick function?
-- The handleOnClick function toggles the IsActive state when the button is clicked.
-
-3. What is the purpose of the commented out axios post request in the handleSubmit function?
-- The axios post request is commented out and not functional, so it is unclear what its purpose was intended to be.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/NavLink/index.md b/.autodoc/docs/markdown/core/src/components/NavLink/index.md
deleted file mode 100644
index 6b7f6c12e..000000000
--- a/.autodoc/docs/markdown/core/src/components/NavLink/index.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/NavLink/index.tsx)
-
-The code above is a React component that creates a navigation link that can be used in a web application. The component is called `NavLink` and it imports `Link` and `LinkProps` from the `next/link` module, as well as `React` and `Children` from the `react` module, and `useRouter` from the `next/router` module.
-
-The `NavLink` component takes several props, including `children`, which is the content of the link, `exact`, which is a boolean that determines whether the link should match the current URL exactly or not, and `activeClassName`, which is a string that represents the class name to be applied to the link when it is active.
-
-The `useRouter` hook is used to get information about the current route, including the current URL path, the route, the query parameters, and the base path. The `child` variable is used to get the child element of the `children` prop, which is the content of the link.
-
-The `isActive` variable is used to determine whether the link is active or not. If `exact` is true, the link will only be active if the `as` prop or the `href.pathname` prop or the `href` prop matches the current URL exactly. If `exact` is false, the link will be active if the current URL starts with the `as` prop or the `href.pathname` prop or the `href` prop.
-
-The `className` variable is used to determine the class name of the link. If the link is active, the `activeClassName` prop is added to the class name of the link. Otherwise, the class name of the link remains the same.
-
-Finally, the `NavLink` component returns a `Link` component from the `next/link` module, which wraps the child element of the `children` prop. The `className` prop of the child element is set to the `className` variable, which determines whether the link is active or not.
-
-This component can be used in a larger project to create navigation links that are styled differently when they are active. For example, in a web application with a navigation bar, the `NavLink` component can be used to create links that are highlighted when the user is on the corresponding page. Here is an example of how the `NavLink` component can be used:
-
-```
-Welcome to My Crypto App
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `NewNFTCard` component?
-- The `NewNFTCard` component is used to display information about a specific NFT item, including its image or animation, name, age, and ID.
-
-2. What is the role of the `ModelViewer` component?
-- The `ModelViewer` component is used to display a 3D model of an NFT item, and it takes in two props (`glb` and `usdz`) that specify the URLs of the model's GLB and USDZ files.
-
-3. What is the significance of the `ssr: false` option in the `dynamic` import statement?
-- The `ssr: false` option indicates that the `ModelViewer` component should not be server-side rendered, and should instead be loaded on the client side only. This is because the `ModelViewer` component relies on the `window` object, which is not available during server-side rendering.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/NftCard/index.md b/.autodoc/docs/markdown/core/src/components/NftCard/index.md
deleted file mode 100644
index cd1700a02..000000000
--- a/.autodoc/docs/markdown/core/src/components/NftCard/index.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/NftCard/index.tsx)
-
-The `NftCard` component is a React component that renders a card displaying information about a non-fungible token (NFT). The component takes in several props, including an image, name, address, days left, highest bid, price, yields per day, and currency.
-
-The component is designed to be used in a larger project that involves displaying NFTs to users. The `NftCard` component can be used to display information about a single NFT, and can be repeated multiple times to display information about multiple NFTs.
-
-The component renders a card with a black background and a rounded border. The card contains an image of the NFT, as well as information about the NFT's name, price, address, days left, highest bid, and yields per day. The currency used for the price and yields can be specified using the `currency` prop, which defaults to "ZOO".
-
-The `NftCard` component is designed to be flexible and customizable. The image prop can be any valid React node, allowing for the use of images, videos, or other media types. The component also uses Tailwind CSS classes to style the card, making it easy to customize the appearance of the card to match the design of the larger project.
-
-Here is an example of how the `NftCard` component could be used in a larger React project:
-
-```
-import React from "react";
-import NftCard from "./NftCard";
-
-const NftList = ({ nfts }) => {
- return (
-
- {nfts.map((nft) => (
-
- );
-};
-
-export default NftList;
-```
-
-In this example, the `NftList` component takes in an array of NFT objects and maps over them to render an `NftCard` component for each NFT. The `image` prop is passed as an `img` element with the `src` and `alt` attributes set to the corresponding values from the NFT object. The other props are passed directly from the NFT object.
-## Questions:
- 1. What are the required props for the NftCard component?
-- The required props for the NftCard component are "image", while "name", "price", "address", "days", "highestBid", "yields", and "currency" are optional.
-
-2. What is the default value for the "currency" prop?
-- The default value for the "currency" prop is "ZOO".
-
-3. What is the purpose of the NftCard component?
-- The NftCard component is a reusable component that displays information about a non-fungible token (NFT), including its image, name, price, address, days left, highest bid, and yields per day.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Paper/index.md b/.autodoc/docs/markdown/core/src/components/Paper/index.md
deleted file mode 100644
index 10896743b..000000000
--- a/.autodoc/docs/markdown/core/src/components/Paper/index.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Paper/index.tsx)
-
-The code above is a React component called `Paper` that returns a div element with rounded corners and any children passed to it. The component takes in three props: `children`, `className`, and `...rest`.
-
-The `children` prop is used to pass any child elements to the `Paper` component. These child elements will be rendered inside the div element returned by the component.
-
-The `className` prop is used to add any additional classes to the div element. This allows for custom styling of the `Paper` component.
-
-The `...rest` prop is used to pass any additional props to the div element. This allows for flexibility in how the `Paper` component is used and styled.
-
-Overall, the purpose of this component is to provide a reusable and customizable paper-like element that can be used throughout the larger project. It can be used to wrap other components or elements to give them a consistent look and feel.
-
-Here is an example of how the `Paper` component can be used in a larger project:
-
-```
-import React from "react";
-import Paper from "./Paper";
-
-function App() {
- return (
-
-
-
-
- );
-}
-
-export default App;
-```
-
-In this example, the `Paper` component is used to wrap a heading and paragraph element. The `className` prop is used to add a custom class to the `Paper` component, which can be used to style it in CSS.
-## Questions:
- 1. What is the purpose of the `Paper` component?
- The `Paper` component is a functional component that returns a JSX element with a `div` tag that has a `rounded` class and any additional classes passed in through the `className` prop. It also renders any children passed in as props.
-
-2. What is the significance of the `...rest` parameter in the `Paper` function?
- The `...rest` parameter is a spread operator that allows any additional props passed into the `Paper` component to be spread into the `div` tag as attributes. This allows for flexibility in passing in additional props without having to explicitly define them in the component.
-
-3. What is the purpose of the `JSX.Element` type in the function signature?
- The `JSX.Element` type is a type definition for the return value of a JSX expression. In this case, it ensures that the `Paper` component returns a valid JSX element.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/PercentInputPanel/index.md b/.autodoc/docs/markdown/core/src/components/PercentInputPanel/index.md
deleted file mode 100644
index 8744f430b..000000000
--- a/.autodoc/docs/markdown/core/src/components/PercentInputPanel/index.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/PercentInputPanel/index.tsx)
-
-The code defines a React component called `PercentInputPanel` that renders a panel with an input field for a percentage value. The component takes three props: `value`, `onUserInput`, and `id`.
-
-The `value` prop is a string that represents the current value of the input field. The `onUserInput` prop is a callback function that is called whenever the user types into the input field. The function is passed the new value of the input field as a string argument. The `id` prop is a string that is used as the `id` attribute of the outermost `div` element that is rendered by the component.
-
-The component renders a `div` element with the `id` specified by the `id` prop. The `div` has a dark background color and is rounded. Inside the `div`, there are two child elements: a label and an input field. The label says "Amount to Remove" and is left-aligned. The input field is a custom component called `Input.Percent` that is imported from another file. The `Input.Percent` component takes several props, including `className`, `value`, `onUserInput`, and `align`. The `className` prop is set to "token-amount-input". The `value` prop is set to the `value` prop passed to the `PercentInputPanel` component. The `onUserInput` prop is set to a callback function that simply calls the `onUserInput` prop passed to the `PercentInputPanel` component with the new value of the input field. The `align` prop is set to "right".
-
-The `PercentInputPanel` component is likely used in a larger project to allow users to input a percentage value. The `onUserInput` callback function is likely used to update the state of the parent component that renders the `PercentInputPanel` component. Here is an example of how the `PercentInputPanel` component might be used in a parent component:
-
-```
-import React, { useState } from 'react'
-import PercentInputPanel from './PercentInputPanel'
-
-export default function MyComponent() {
- const [percentValue, setPercentValue] = useState('50')
-
- function handlePercentInput(newValue) {
- setPercentValue(newValue)
- }
-
- return (
- Hello World!
-This is some text inside the paper element.
-
-
- )
-}
-```
-
-In this example, the `MyComponent` component renders a `PercentInputPanel` component with an initial value of "50". Whenever the user types into the input field, the `handlePercentInput` function is called with the new value of the input field. The `handlePercentInput` function updates the state of the `MyComponent` component with the new value. The current value of the input field is displayed below the `PercentInputPanel` component.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `PercentInputPanel` that renders an input field for a percentage value.
-
-2. What props does the `PercentInputPanel` component accept?
-- The `PercentInputPanel` component accepts three props: `value` (string), `onUserInput` (function that takes a string argument), and `id` (string).
-
-3. What other components are being used in this code?
-- This code imports a component called `Input` from a file located at `../Input`. Within the `PercentInputPanel` component, it uses a subcomponent of `Input` called `Input.Percent`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Polling/index.md b/.autodoc/docs/markdown/core/src/components/Polling/index.md
deleted file mode 100644
index 743e182bf..000000000
--- a/.autodoc/docs/markdown/core/src/components/Polling/index.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Polling/index.tsx)
-
-This code defines a React component called `Polling` that displays the current block number of a specified Ethereum chain and a spinning animation. The block number is obtained using the `useBlockNumber` hook from the `application` state, which is provided by the `useActiveWeb3React` hook. The `chainId` is also obtained from `useActiveWeb3React`.
-
-The component uses the `useState` hook to keep track of whether it is mounted or not. The `useEffect` hook is used to set a timer that updates the `isMounted` state variable every second. This is done to prevent a memory leak when the component is unmounted. The timer is cleared when the component is unmounted using the `clearTimeout` function.
-
-The `ExternalLink` component is used to wrap the block number and spinning animation. The `href` attribute of the `ExternalLink` is set to a link to the block explorer for the specified chain and block number. If either the `chainId` or `blockNumber` is not available, the `href` attribute is set to an empty string. The `className` attribute of the `ExternalLink` is set to either `text-high-emphesis` or `text-low-emphesis` depending on the value of `isMounted`.
-
-The block number is displayed using a `div` element, and the spinning animation is displayed using an SVG element. The `animate-spin` class is added to the SVG element when `isMounted` is `true`, causing the animation to spin.
-
-This component can be used in a larger project to display the current block number of a specified Ethereum chain and provide a link to the block explorer for that block. It can be used in conjunction with other components to build a dashboard or monitoring tool for Ethereum applications.
-
-Example usage:
-
-```
-import Polling from './Polling'
-
-function App() {
- return (
- You entered: {percentValue}%
-
-
- )
-}
-```
-## Questions:
- 1. What does this code do?
-- This code is a React component called `Polling` that renders a link with a block number and a spinning animation. The link points to a blockchain explorer and the block number is obtained from the `useBlockNumber` hook.
-
-2. What is the purpose of the `useEffect` hook in this code?
-- The `useEffect` hook is used to set a timer that updates the `isMounted` state after 1 second. It also clears the timer and sets `isMounted` to false when the component unmounts. The `useEffect` hook is triggered whenever the `blockNumber` changes.
-
-3. What are the dependencies of this component?
-- This component depends on the `React` library, the `useEffect` and `useState` hooks from React, the `ExternalLink` component from a relative path, the `getExplorerLink` function from a `functions/explorer` module, and the `useActiveWeb3React` and `useBlockNumber` hooks from `hooks/useActiveWeb3React` and `state/application/hooks` modules, respectively.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Popover/index.md b/.autodoc/docs/markdown/core/src/components/Popover/index.md
deleted file mode 100644
index 4519c7ca8..000000000
--- a/.autodoc/docs/markdown/core/src/components/Popover/index.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Popover/index.tsx)
-
-The `Popover` component in this file is a reusable UI component that provides a popover functionality. It takes in three props: `content`, `show`, and `children`. The `content` prop is the content that will be displayed in the popover, the `show` prop is a boolean that determines whether or not the popover is visible, and the `children` prop is the element that will trigger the popover when clicked.
-
-The component uses the `usePopper` hook from the `react-popper` library to position the popover relative to the trigger element. The `usePopper` hook takes in three arguments: the reference element (the trigger element), the popper element (the popover), and an options object that specifies the placement of the popover, the strategy for positioning, and any modifiers to apply. The `Popover` component sets the reference element, popper element, and arrow element using the `useState` hook.
-
-The `Popover` component also uses the `useInterval` hook from a custom `useInterval` hook to update the position of the popover every 100ms when the `show` prop is true. The `updateCallback` function is a memoized callback that calls the `update` function returned by the `usePopper` hook.
-
-The `Popover` component returns a `HeadlessuiPopover` component from the `@headlessui/react` library that provides the accessibility and keyboard navigation for the popover. The `HeadlessuiPopover` component has two child components: the reference element and the `HeadlessuiPopover.Panel` component. The reference element wraps the `children` prop and sets the `setReferenceElement` function as a ref. The `HeadlessuiPopover.Panel` component is the actual popover that is displayed when the trigger element is clicked. It sets the `setPopperElement` function as a ref and applies the styles and attributes returned by the `usePopper` hook. It also includes an arrow element that sets the `setArrowElement` function as a ref.
-
-Overall, this `Popover` component can be used in a larger project to provide a popover functionality for any element that needs it. It is reusable and customizable with the `content`, `show`, and `placement` props. Here is an example of how it can be used:
-
-```
-
-
-
-
-
- );
-};
-
-export default MyComponent;
-```
-## Questions:
- 1. What is the purpose of this code?
- This code defines a React component called `QuestionHelper` that renders a tooltip with a question mark icon. The tooltip can be triggered by clicking or hovering over the icon or its parent element.
-
-2. What are the props that can be passed to the `QuestionHelper` component?
- The `QuestionHelper` component accepts two optional props: `text` and `children`. `text` is the content of the tooltip, and `children` is the content that should be wrapped by the tooltip icon and trigger the tooltip.
-
-3. What is the purpose of the `useCallback` hook in this code?
- The `useCallback` hook is used to memoize the `open` and `close` functions that toggle the visibility of the tooltip. This can improve performance by preventing unnecessary re-renders of the component when these functions are passed as props to child components.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/RenderAsync/index.md b/.autodoc/docs/markdown/core/src/components/RenderAsync/index.md
deleted file mode 100644
index b8a3137cf..000000000
--- a/.autodoc/docs/markdown/core/src/components/RenderAsync/index.md
+++ /dev/null
@@ -1,51 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/RenderAsync/index.tsx)
-
-The code defines a React component called `RenderAsync` that allows for rendering of asynchronous data. The component takes in three props: `children`, `promise`, and `loader`.
-
-The `children` prop is a function that takes in the data returned by the `promise` and returns a React node. This is what will be rendered once the `promise` is resolved.
-
-The `promise` prop is a Promise object that resolves to the data that will be rendered.
-
-The `loader` prop is a React node that will be rendered while the `promise` is still resolving. This can be used to display a loading spinner or other indicator to the user that data is being fetched.
-
-The component uses the `useState` and `useEffect` hooks from React to manage the state of the data returned by the `promise`. When the component mounts, it checks if the `promise` prop is an instance of a Promise object. If it is, it creates an async function that awaits the resolution of the `promise` and sets the data returned by the `promise` using the `setData` function from the `useState` hook.
-
-Once the `data` state is set, the `children` function is called with the `data` as an argument and the result is returned as a React node. If the `data` state is not set yet, the `loader` prop is returned instead.
-
-This component can be used in a larger project to handle rendering of data that is fetched asynchronously. For example, it can be used to fetch and render data from an API endpoint. Here is an example usage of the component:
-
-```
-import RenderAsync from './RenderAsync'
-
-function MyComponent() {
- const [data, setData] = useState()
-
- const fetchData = async () => {
- const resp = await fetch('https://example.com/api/data')
- const json = await resp.json()
- setData(json)
- }
-
- return (
- My Component
-
-
- )}
- {data.title}
-{data.description}
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `ScrollableGraph` component?
- - The `ScrollableGraph` component is used to render a graph with scrollable functionality based on the provided data.
-
-2. What is the `AutoSizer` component used for?
- - The `AutoSizer` component is used to automatically calculate the width and height of its child component based on the available space.
-
-3. What type of data does the `ScrollableGraph` component expect to receive?
- - The `ScrollableGraph` component expects to receive an object with optional properties such as `compact`, `margin`, `data`, `title`, `labels`, `note`, and `colors`. The `data` property is required.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Search/index.md b/.autodoc/docs/markdown/core/src/components/Search/index.md
deleted file mode 100644
index 0b93dcd5b..000000000
--- a/.autodoc/docs/markdown/core/src/components/Search/index.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Search/index.tsx)
-
-The code above defines a React component called `Search` that renders a search input field with a search icon. The component takes in several props, including `term`, `search`, `className`, and `inputProps`.
-
-The `term` prop is a string that represents the current search term entered by the user. The `search` prop is a function that is called whenever the user types in the search input field. The `className` prop is an optional string that represents the CSS class name(s) to apply to the component. The `inputProps` prop is an optional object that contains additional props to apply to the input field.
-
-The component renders a `div` element with a `relative` position and a `rounded` class. The `className` prop is applied to this `div` element. Inside the `div`, there is an `input` element that has several CSS classes applied to it. The `input` element has an `onChange` event listener that calls the `search` function with the current value of the input field whenever the user types in the field. The `value` prop of the `input` element is set to the `term` prop, which represents the current search term entered by the user. The `placeholder` prop of the `input` element is set to a string that prompts the user to enter a search term.
-
-Finally, there is a `div` element with an `absolute` position that contains a search icon. The search icon is imported from the `react-feather` library and is rendered using the `Search` component. The `size` prop of the `SearchIcon` component is set to `16`.
-
-This component can be used in a larger project to render a search input field with a search icon. The `term` and `search` props can be used to manage the state of the search input field and perform a search operation respectively. The `className` and `inputProps` props can be used to customize the appearance and behavior of the search input field.
-
-Example usage:
-
-```
-
-
- {/* main content of the app */}
-
-
- )
-}
-
-export default App
-```
-
-In this example, the `App` component renders a `Sidebar` component with an array of three items. These items represent links to the home page, about page, and contact page of the application. The `Sidebar` component then renders these links in a sidebar on the left side of the screen. The `main` element contains the main content of the application, which will be displayed to the right of the sidebar.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a React component called `Sidebar` that renders a list of links using the `NavLink` component.
-
-2. What props does the `Sidebar` component expect?
- The `Sidebar` component expects a single prop called `items`, which is an array of objects containing `href` and `text` properties for each link.
-
-3. What CSS classes are being used in this code?
- This code uses several CSS classes from a custom stylesheet, including `mt-4`, `space-y-4`, `font-bold`, `text-high-emphesis`, `bg-dark-800`, `border-transparent`, `rounded`, `hover:bg-dark-900`, and `ml-5`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Slider/index.md b/.autodoc/docs/markdown/core/src/components/Slider/index.md
deleted file mode 100644
index f77a1f757..000000000
--- a/.autodoc/docs/markdown/core/src/components/Slider/index.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Slider/index.ts)
-
-This code defines two styled components, `PrettoSlider` and `MarketTypeSlider`, which are customized versions of the `Slider` component from the Material UI library.
-
-The `PrettoSlider` component has a black track and thumb with a white value label that appears when the user interacts with the slider. The thumb has a border and a hover effect. The value label is positioned above the thumb and rotated at a 45-degree angle. This component could be used in a variety of contexts where a slider is needed, such as adjusting the volume of a media player or selecting a value from a range.
-
-The `MarketTypeSlider` component has a gray track and a black thumb with a white value label. The thumb has a thicker border and a hover effect. The value label is positioned above the thumb and rotated at a 45-degree angle. This component could be used in a financial application where the user needs to select a market type or range.
-
-Both components use the `styled` function from Material UI to apply CSS styles to the `Slider` component. The styles are defined using the `&` operator to target child elements of the `Slider` component. The `borderRadius` property is used to create a rounded edge on the value label. The `transform` property is used to position and rotate the value label.
-
-To use these components in a React application, they can be imported from this file and used like any other React component. For example:
-
-```
-import { PrettoSlider, MarketTypeSlider } from './SliderStyles';
-
-function MyComponent() {
- const [value, setValue] = useState(50);
-
- const handleSliderChange = (event, newValue) => {
- setValue(newValue);
- };
-
- return (
-
-
- );
-}
-```
-
-In this example, the `PrettoSlider` and `MarketTypeSlider` components are used to display two sliders that update the `value` state when the user interacts with them.
-## Questions:
- 1. What is the purpose of this code?
- - This code defines two custom styled sliders using the Material UI library.
-
-2. What are the differences between the `PrettoSlider` and `MarketTypeSlider` styles?
- - The `PrettoSlider` has a black track and a smaller thumb with a white border, while the `MarketTypeSlider` has a dark gray track with no border radius and a larger thumb with a thicker black border.
-
-3. Can these styles be customized further?
- - Yes, the styles can be further customized by modifying the properties defined in the `PrettoSlider` and `MarketTypeSlider` objects, or by creating additional styled sliders using the same approach.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/SplitPane/index.md b/.autodoc/docs/markdown/core/src/components/SplitPane/index.md
deleted file mode 100644
index 82905ffd8..000000000
--- a/.autodoc/docs/markdown/core/src/components/SplitPane/index.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/SplitPane/index.tsx)
-
-The code above is a React functional component that exports a SplitPane component. The SplitPane component takes in two props, left and right, which are both JSX elements. The purpose of this component is to split the screen into two sections, with the left prop taking up the left half of the screen and the right prop taking up the right half of the screen.
-
-The SplitPane component uses the flexbox layout to achieve this split screen effect. The outermost div has a class of "flex" which sets the display property to flex. The "flex-1" class sets the flex-grow property to 1, which allows the div to grow to fill the available space. The "items-center" class centers the child elements vertically, and the "flex-col md:flex-row" classes set the flex-direction to column on small screens and row on medium screens. The "justify-between" class evenly distributes the child elements along the main axis, which is either the vertical or horizontal axis depending on the screen size.
-
-The left and right props are each wrapped in a div with a class of "w-full md:w-1/2". This sets the width of each child element to 100% on small screens and 50% on medium screens, allowing them to take up half of the screen each.
-
-This component can be used in a larger project to split the screen into two sections, such as a dashboard with a list of items on the left and a detailed view of the selected item on the right. Here is an example of how this component can be used:
-
-```
-import React from 'react';
-import SplitPane from './SplitPane';
-
-function Dashboard() {
- return (
-
-
-
- );
-};
-```
-
-In this example, the Svg component is used inside a div element with a width of 50px and a color of red. The spin prop is set to true, which applies the spinStyle CSS constant and animates the SVG element.
-## Questions:
- 1. What is the purpose of the `rotate` keyframe animation?
- - The `rotate` keyframe animation is used to rotate an element 360 degrees over a period of 2 seconds in a linear fashion.
-
-2. What is the purpose of the `spinStyle` CSS property?
- - The `spinStyle` CSS property is used to apply the `rotate` keyframe animation to an element in order to make it spin.
-
-3. What are the default props for the `Svg` component?
- - The default props for the `Svg` component include a `color` of "text", a `width` of "20px", an `xmlns` of "http://www.w3.org/2000/svg", and a `spin` of false.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Svg/index.md b/.autodoc/docs/markdown/core/src/components/Svg/index.md
deleted file mode 100644
index 1af01ef21..000000000
--- a/.autodoc/docs/markdown/core/src/components/Svg/index.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Svg/index.tsx)
-
-This code exports the `Svg` component from the `Svg` file and its associated `SvgProps` type from the `types` file. The `Svg` component is likely a reusable component that can be used throughout the larger project to render SVG graphics.
-
-By exporting the `Svg` component, other files in the project can import and use it as needed. For example, if a component needs to render an SVG graphic, it can import the `Svg` component and pass in the necessary props.
-
-Similarly, by exporting the `SvgProps` type, other files can import and use it to ensure that the correct props are passed to the `Svg` component. This helps to ensure that the component is used correctly and reduces the likelihood of errors.
-
-Here is an example of how this code might be used in a larger project:
-
-```
-import React from "react";
-import { Svg } from "./zoo";
-
-const MyComponent = () => {
- return (
-
-
-
- );
-};
-```
-
-In this example, the `Svg` component is imported from the `zoo` module and used to render a blue circle with a radius of 50. The `width` and `height` props are also passed to the `Svg` component to specify the size of the SVG graphic.
-
-Overall, this code plays an important role in the larger project by providing a reusable `Svg` component and associated `SvgProps` type that can be used throughout the project to render SVG graphics.
-## Questions:
- 1. **What is the purpose of the `Svg` component?**
-A smart developer might want to know what functionality the `Svg` component provides and how it is used within the `zoo` project.
-
-2. **What is the `SvgProps` type used for?**
-A smart developer might want to know what props are expected to be passed to the `Svg` component and what their types are.
-
-3. **Are there any other components or types exported from this file?**
-A smart developer might want to know if there are any other important exports from this file that are not immediately visible in the code snippet provided.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Svg/types.md b/.autodoc/docs/markdown/core/src/components/Svg/types.md
deleted file mode 100644
index d3dcdb4af..000000000
--- a/.autodoc/docs/markdown/core/src/components/Svg/types.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Svg/types.ts)
-
-This code defines an interface called `SvgProps` that extends the `SVGAttributes` interface from the `react` library and the `SpaceProps` interface from the `styled-system` library. The `SVGAttributes` interface provides a set of attributes that can be used with SVG elements, while the `SpaceProps` interface provides a set of props for adding margin, padding, and other spacing-related styles to components.
-
-The `SvgProps` interface also includes two additional properties: `theme` and `spin`. The `theme` property is an optional object of type `DefaultTheme` from the `styled-components` library, which allows for theming of SVG components. The `spin` property is a boolean that can be used to add a spinning animation to the SVG component.
-
-This interface can be used as a type for props passed to SVG components in a React application. For example, if we have an SVG component called `MySvgComponent`, we can define its props as follows:
-
-```
-import { SvgProps } from 'path/to/zoo'
-
-interface MySvgComponentProps extends SvgProps {
- // additional props specific to MySvgComponent
-}
-
-const MySvgComponent: React.FC
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `numberWithCommas` function imported from "functions/format"?
-- The `numberWithCommas` function is used to format a number with commas for readability.
-
-2. What is the significance of the `useMemo` hook that is commented out?
-- The `useMemo` hook is used to memoize the result of a function so that it is only recomputed when its dependencies change. In this case, it is likely used to compute a class name based on the `priceImpact` prop.
-
-3. What is the purpose of the `priceImpact` prop and how is it used in the component?
-- The `priceImpact` prop is used to display the percentage change in price impact. If it is provided, the component will display this value with a sign and a percentage symbol.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Swap/Header.md b/.autodoc/docs/markdown/core/src/components/Swap/Header.md
deleted file mode 100644
index b32a2bde3..000000000
--- a/.autodoc/docs/markdown/core/src/components/Swap/Header.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Swap/Header.tsx)
-
-The `ExchangeHeader` component is a React functional component that renders a header for a token exchange feature. It receives several props, including `input` and `output`, which are objects representing the input and output tokens for the exchange, respectively. It also receives `allowedSlippage`, a value representing the maximum allowed slippage for the exchange, and `crossChain`, a boolean indicating whether the exchange is cross-chain or not.
-
-The component renders a container with two sections: one on the left and one on the right. The left section contains a link to the swap page, which is only rendered if either `input` or `output` is not defined. If both `input` and `output` are defined, the left section displays either "Cross-Chain" or "Instant Trade" depending on the value of `crossChain`. The right section contains three icons: a refresh icon, a filter icon, and a settings icon. Clicking on the refresh icon calls the `fetchUserBalances` function, which retrieves the user's token balances. Clicking on the filter icon opens a modal that allows the user to adjust the slippage tolerance for the exchange. Clicking on the settings icon opens a settings modal that is not implemented in this code.
-
-The `SlippageModal` component is a child component of `ExchangeHeader` that renders the modal for adjusting the slippage tolerance. It receives three props: `autoRefresh`, a boolean indicating whether auto-refresh is enabled or not, `autoRefreshHandler`, a function that toggles the value of `autoRefresh`, and `isSlipToleranceModal`, a boolean indicating whether the modal is open or not. The modal contains several input fields and switches that allow the user to adjust various settings related to the exchange.
-
-This component can be used as a header for a token exchange feature in a larger project. It provides a simple and intuitive interface for users to initiate and customize token exchanges. The `ExchangeHeader` component can be easily integrated into other components and pages in the project, and the `SlippageModal` component can be reused in other parts of the project that require a modal for adjusting settings.
-
-Example usage:
-
-```jsx
-import ExchangeHeader from "components/ExchangeHeader";
-
-function ExchangePage() {
- const inputToken = { address: "0x123abc", symbol: "ETH" };
- const outputToken = { address: "0x456def", symbol: "USDT" };
- const allowedSlippage = 0.5;
- const crossChain = true;
-
- return (
- {asset.name}
-Current value:
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `ExchangeHeader` component?
-- The `ExchangeHeader` component is used to display the header section of a page related to exchanging tokens, and it takes in various props related to the exchange.
-
-2. What is the `SlippageModal` component used for?
-- The `SlippageModal` component is used to display a modal that allows the user to adjust the slippage tolerance and other settings related to the token exchange.
-
-3. What is the purpose of the `getQuery` function?
-- The `getQuery` function takes in two parameters, `input` and `output`, and returns an object that contains the addresses of the input and output currencies if they are provided. If only the input currency is provided, the output currency is set to "ETH". If neither input nor output currencies are provided, the function returns null.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Swap/ListCard.md b/.autodoc/docs/markdown/core/src/components/Swap/ListCard.md
deleted file mode 100644
index 01b780823..000000000
--- a/.autodoc/docs/markdown/core/src/components/Swap/ListCard.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Swap/ListCard.tsx)
-
-The code defines a React component called `ListCard` that renders a card with some information. The component takes in several props, including `label`, `fee`, `amount`, `className`, and `background`.
-
-The `label` prop is a string that represents the label of the card, the `fee` prop is a string that represents the estimated gas fee, and the `amount` prop is a string that represents the amount of something. The `className` prop is an optional string that can be used to add additional CSS classes to the component, and the `background` prop is an optional string that represents the background color of the card.
-
-The component returns a `div` element that contains the information passed in through the props. The `amount` prop is displayed as a heading, and the `fee` prop is displayed as a smaller text with an "Est. gas fee" label. The `label` prop is displayed as a smaller text in a black box that is positioned above the card.
-
-The component also includes an image of an information icon that is displayed next to the "Est. gas fee" text. The image is imported from the `next/image` module.
-
-This component can be used in a larger project to display information in a card format. The `ListCard` component can be imported into other components and used to display information in a consistent and visually appealing way. For example, it could be used to display information about different animals in a zoo, such as their name, habitat, and diet.
-
-Here is an example of how the `ListCard` component could be used in another component:
-
-```
-import ListCard from "./ListCard";
-
-const AnimalCard = ({ name, habitat, diet }) => {
- return (
- {diet}
-
-
- );
-};
-```
-## Questions:
- 1. What is the purpose of the `TransactionDetail` component?
-- The `TransactionDetail` component is used to display details about a transaction, including the transaction state, protocol fee, and bridge transaction signature and hash.
-
-2. What is the `useActiveWeb3React` hook used for?
-- The `useActiveWeb3React` hook is used to get the active Web3 provider and library, which are used to retrieve the gas price for the transaction.
-
-3. What is the purpose of the `copyTextToClipboard` function?
-- The `copyTextToClipboard` function is used to copy text to the user's clipboard, and it uses the `navigator.clipboard` API if available, falling back to the `document.execCommand` method if not.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Switch/index.md b/.autodoc/docs/markdown/core/src/components/Switch/index.md
deleted file mode 100644
index 02220554f..000000000
--- a/.autodoc/docs/markdown/core/src/components/Switch/index.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Switch/index.tsx)
-
-This code exports a customized Switch component from the Material-UI library. The purpose of this component is to provide a toggle switch that can be used in a React application. The component is styled using the `styled` function from Material-UI, which allows for custom CSS to be applied to the component.
-
-The `MuiSwitch` component is created by passing the `Switch` component from Material-UI to the `styled` function. The CSS styles are defined using a JavaScript object that is passed as an argument to the `styled` function. The styles define the width, height, padding, and other properties of the switch. The `&` symbol is used to refer to the current element, and the `.` symbol is used to refer to a child element.
-
-The `active` style is applied when the switch is clicked. This style changes the width of the thumb and moves the switch to the right. The `checked` style is applied when the switch is in the "on" position. This style changes the color of the thumb and the background color of the track.
-
-The `thumb` and `track` styles define the appearance of the thumb and track elements of the switch. The `thumb` style applies a box shadow and a transition effect to the thumb element. The `track` style applies a border radius, opacity, and background color to the track element.
-
-This component can be used in a React application by importing it and rendering it in a component. For example:
-
-```
-import React from "react";
-import MuiSwitch from "./MuiSwitch";
-
-function MyComponent() {
- const [checked, setChecked] = React.useState(false);
-
- const handleChange = () => {
- setChecked(!checked);
- };
-
- return (
-
-
- );
-}
-```
-
-In this example, the `MuiSwitch` component is rendered inside a `div` element. The `checked` and `onChange` props are passed to the component to control its state. When the switch is toggled, the `handleChange` function is called to update the state.
-## Questions:
- 1. What is the purpose of this code?
-
- This code exports a styled Switch component from the Material UI library.
-
-2. What are the props that can be passed to this component?
-
- The component accepts all the props that can be passed to the Switch component from Material UI library.
-
-3. What is the significance of the "&" symbol used in the CSS selectors?
-
- The "&" symbol is used to refer to the parent selector in nested CSS selectors. In this code, it is used to refer to the MuiSwitch component itself.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Table/TransactionRow.md b/.autodoc/docs/markdown/core/src/components/Table/TransactionRow.md
deleted file mode 100644
index 428f941b9..000000000
--- a/.autodoc/docs/markdown/core/src/components/Table/TransactionRow.md
+++ /dev/null
@@ -1,59 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Table/TransactionRow.tsx)
-
-The code defines a React functional component called `TransactionRow` that renders a table row with transaction details. The component takes in five props: `from_address`, `to_address`, `value`, `block_timestamp`, and `transaction_hash`.
-
-The `shortenAddress` function from the `functions` module is imported to shorten the `from_address` and `to_address` strings to a more readable format. The `abbreviateNumber` function from the `functions/abbreviateNumbers` module is imported to abbreviate the `value` number to a more readable format. The `moment` library is imported to format the `block_timestamp` as a human-readable date and time string.
-
-The component returns a table row (`| From | -To | -Value | -Date | -Transaction Hash | -
|---|
| Name | -Habitat | -
|---|---|
| Lion | -Africa | -
| Panda | -Asia | -
-
- );
-};
-```
-## Questions:
- 1. What is the purpose of the `Button` component being imported from "components/Button"?
-- The smart developer might ask why the `Button` component is being imported and what its role is in the `ToastAction` component.
-
-2. What is the `getExternalLinkProps` function and where is it defined?
-- The smart developer might ask what the `getExternalLinkProps` function does and where it is defined in the codebase.
-
-3. Why is the `Link` component from "react-router-dom" commented out?
-- The smart developer might ask why the `Link` component is commented out and if there is a reason for not using it in the `ToastAction` component.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Toast/ToastContainer.md b/.autodoc/docs/markdown/core/src/components/Toast/ToastContainer.md
deleted file mode 100644
index d5c6d48ed..000000000
--- a/.autodoc/docs/markdown/core/src/components/Toast/ToastContainer.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Toast/ToastContainer.tsx)
-
-The code defines a React component called `ToastContainer` that renders a container for displaying toast notifications. Toast notifications are small messages that appear on the screen to provide feedback to the user about an action or event. The `ToastContainer` component uses the `TransitionGroup` component from the `react-transition-group` library to animate the appearance and disappearance of toast notifications.
-
-The `ToastContainer` component takes in several props, including an array of `toasts` to display, a function `onRemove` to call when a toast is removed, a time-to-live `ttl` for each toast, and a `stackSpacing` value to determine the vertical spacing between stacked toasts. The component also uses a custom hook called `useMatchBreakpoints` to determine the screen size and adjust the positioning of the toasts accordingly.
-
-The `StyledToastContainer` component is a styled component that defines the CSS styles for the toast container and the toast animations. The `enter` and `appear` classes set the initial opacity of the toast to 0.01, while the `exit` class sets the final opacity to 0.01. The `enter-active` and `appear-active` classes set the transition effect for the toast to fade in over 250ms with an ease-in effect, while the `exit-active` class sets the transition effect to fade out over 250ms with an ease-out effect.
-
-The `ToastContainer` component maps over the `toasts` array and renders a `Toast` component for each toast. The `Toast` component takes in the `toast` object, the `onRemove` function, the `ttl` value, and a `style` object that sets the position and z-index of the toast. The `style` object uses the `isXs`, `isSm`, and `isMd` values from the `useMatchBreakpoints` hook to determine whether to position the toast from the top or bottom of the screen.
-
-Overall, this code provides a reusable and customizable component for displaying toast notifications in a React application. It can be used in conjunction with other components and libraries to create a comprehensive user interface for the application. Here is an example of how the `ToastContainer` component can be used:
-
-```
-import React, { useState } from "react";
-import ToastContainer from "./ToastContainer";
-
-const App = () => {
- const [toasts, setToasts] = useState([]);
-
- const addToast = (message) => {
- const newToast = { id: Date.now(), message };
- setToasts((prevToasts) => [...prevToasts, newToast]);
- setTimeout(() => removeToast(newToast.id), 4000);
- };
-
- const removeToast = (id) => {
- setToasts((prevToasts) => prevToasts.filter((t) => t.id !== id));
- };
-
- return (
- A new version of the app is available!
-
-
-
- );
-};
-
-export default App;
-```
-## Questions:
- 1. What is the purpose of the `useMatchBreakpoints` hook being imported?
-- The `useMatchBreakpoints` hook is likely used to determine the screen size and adjust the positioning of the toasts accordingly.
-
-2. What is the purpose of the `TransitionGroup` component being used?
-- The `TransitionGroup` component is likely used to animate the entrance and exit of the toasts.
-
-3. What is the purpose of the `stackSpacing` prop being passed to the `ToastContainer` component?
-- The `stackSpacing` prop is likely used to specify the amount of space between each toast when they are stacked on top of each other.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Toast/index.md b/.autodoc/docs/markdown/core/src/components/Toast/index.md
deleted file mode 100644
index ada486565..000000000
--- a/.autodoc/docs/markdown/core/src/components/Toast/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Toast/index.tsx)
-
-This code exports three items from the `zoo` project's `ToastContainer` module: the `ToastContainer` component, the `toastTypes` object, and several types related to toasts.
-
-The `ToastContainer` component is a container for displaying toast notifications to users. Toast notifications are small, temporary messages that appear on the screen to provide feedback or information to the user. The `ToastContainer` component is customizable and can be styled to fit the design of the application.
-
-The `toastTypes` object contains constants that define the different types of toast notifications that can be displayed. These types include success, error, warning, and info. Developers can use these constants to create their own custom toast notifications or to style the default notifications provided by the `ToastContainer` component.
-
-The types exported by this module include `ToastContainerProps`, which defines the props that can be passed to the `ToastContainer` component, and `Toast`, which defines the shape of a single toast notification. Additionally, the `Types as ToastTypes` statement exports an alias for the `types` object as `ToastTypes`. This allows developers to import the `toastTypes` object using a more descriptive name.
-
-Overall, this code provides a convenient way for developers to use and customize toast notifications in their applications. Here is an example of how the `ToastContainer` component and `toastTypes` object could be used in a React application:
-
-```
-import { ToastContainer, toastTypes } from 'zoo';
-
-function App() {
- const handleButtonClick = () => {
- // Display a success toast notification
- toastTypes.success('Button clicked!');
- };
-
- return (
-
-
-
- );
-}
-```
-## Questions:
- 1. **What is the purpose of the `ToastContainer` and `Toast` components?** The `ToastContainer` component is likely responsible for rendering and managing toast notifications, while the `Toast` component represents an individual toast notification.
-2. **What is the `types` export and what does it contain?** The `types` export likely contains various type definitions related to toast notifications, such as the shape of a `Toast` object or the available types of toast notifications.
-3. **What is the significance of the `Types` export in the type definition?** The `Types` export is likely an alias for the `toastTypes` export, allowing developers to import the available toast types using a more descriptive name.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Toast/types.md b/.autodoc/docs/markdown/core/src/components/Toast/types.md
deleted file mode 100644
index 5aee0e667..000000000
--- a/.autodoc/docs/markdown/core/src/components/Toast/types.md
+++ /dev/null
@@ -1,79 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Toast/types.ts)
-
-This code defines a set of interfaces and types related to displaying toast notifications in a web application. Toast notifications are small messages that appear on the screen to provide feedback or alerts to the user.
-
-The `types` object defines three different types of toast notifications: DANGER, WARNING, and INFO. These types are represented as strings that can be used to style the toast notification appropriately.
-
-The `Types` type is a union type that represents all possible values of the `types` object. This type is used to ensure that the `type` property of the `Toast` interface is always one of the valid types defined in the `types` object.
-
-The `ToastAction` interface defines the structure of an action that can be associated with a toast notification. This includes a `text` property that describes the action and a `url` property that specifies the URL to navigate to when the action is clicked.
-
-The `Toast` interface defines the structure of a toast notification. Each toast has an `id` property that uniquely identifies it, a `type` property that specifies the type of the toast (using one of the values from the `types` object), a `title` property that provides a short description of the toast, an optional `description` property that provides additional information, and an optional `action` property that specifies an action associated with the toast.
-
-The `ToastContainerProps` interface defines the properties that can be passed to a component that displays a collection of toast notifications. This includes an array of `toasts` to display, a `stackSpacing` property that specifies the spacing between stacked toasts, a `ttl` property that specifies the time-to-live (in milliseconds) for each toast, and an `onRemove` callback function that is called when a toast is dismissed.
-
-The `ToastProps` interface defines the properties that can be passed to a component that displays a single toast notification. This includes the `toast` object to display, the `onRemove` callback function, the `ttl` property, and a `style` property that can be used to apply custom styles to the toast.
-
-Overall, this code provides a set of interfaces and types that can be used to define and display toast notifications in a web application. By using these interfaces and types, developers can ensure that their toast notifications are consistent and easy to manage.
-
-Example usage:
-
-```typescript
-import { Toast, ToastContainerProps, ToastProps } from 'zoo';
-
-const toasts: Toast[] = [
- {
- id: '1',
- type: 'warning',
- title: 'Warning!',
- description: 'Something went wrong.',
- action: {
- text: 'Retry',
- url: '/retry',
- },
- },
- {
- id: '2',
- type: 'info',
- title: 'Information',
- description: 'Your changes have been saved.',
- },
-];
-
-function handleRemove(id: string) {
- // Remove the toast with the specified ID
-}
-
-function renderToast(toast: Toast) {
- return (
-
-
- )
-}
-```
-
-In this example, the `App` component has a state variable called `isDarkMode` that determines whether the app is in dark mode or not. The `toggleDarkMode` function updates the `isDarkMode` state variable when the toggle switch is clicked. The `ListToggle` component is rendered with the `isActive` prop set to `isDarkMode`, the `bgColor` prop set to `#4A5568`, and the `toggle` prop set to `toggleDarkMode`. The `className` of the `div` element that wraps the app is set to `"dark"` if `isDarkMode` is true, which applies some dark mode styles to the app. The `p` element contains some text that will be styled differently in dark mode.
-## Questions:
- 1. What is the purpose of this code?
- - This code exports a React component called `ListToggle` that renders a toggle switch with customizable background color and text labels for on and off states.
-
-2. What are the required props for the `ListToggle` component?
- - The `ListToggle` component requires `isActive` (a boolean indicating whether the toggle is on or off) and `toggle` (a function to be called when the toggle is clicked) props. It also accepts optional `id` (a string for the HTML `id` attribute) and `bgColor` (a string for the background color of the toggle when it is on) props.
-
-3. What CSS classes are applied to the `ListToggle` component?
- - The `ListToggle` component applies different CSS classes based on the `isActive` prop. When `isActive` is true, it applies the classes `bg-dark-700` and `text-high-emphesis`, and when `isActive` is false, it applies the classes `bg-dark-800` and `text-primary`. It also applies the classes `rounded-full`, `flex`, `items-center`, `outline-none`, `cursor-pointer`, `border-none`, `py-1`, `px-3`, and `space-x-3` to both states.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Toggle/index.md b/.autodoc/docs/markdown/core/src/components/Toggle/index.md
deleted file mode 100644
index 38900671a..000000000
--- a/.autodoc/docs/markdown/core/src/components/Toggle/index.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Toggle/index.tsx)
-
-The code defines a React component called `Toggle` that renders a switch UI element using the `Switch` component from the `@headlessui/react` library. The `Toggle` component takes three props: `id`, `isActive`, and `toggle`.
-
-The `isActive` prop is a boolean that determines whether the switch is on or off. The `toggle` prop is a function that is called when the switch is toggled. The `id` prop is optional and can be used to set the `id` attribute of the switch element.
-
-The `Switch` component renders a checkbox input element that is visually styled as a switch. The `checked` prop of the `Switch` component is set to the `isActive` prop of the `Toggle` component, so the switch is initially rendered in the on or off position based on the value of `isActive`. The `onChange` prop of the `Switch` component is set to the `toggle` prop of the `Toggle` component, so when the switch is toggled, the `toggle` function is called.
-
-The `classNames` function from the `../../functions` module is used to conditionally apply CSS classes to the switch element based on the value of `isActive`. If `isActive` is true, the switch is given a blue background color, otherwise it is given a dark gray background color.
-
-The switch element consists of two nested `span` elements. The first `span` element is visually hidden and provides an accessible label for the switch. The second `span` element contains two nested `span` elements that represent the switch handle. The first nested `span` element is positioned to the left or right of the switch based on the value of `isActive`, and is given a dark gray background color. The second nested `span` element is positioned on top of the first nested `span` element and is given a white background color. When `isActive` is true, the second nested `span` element is visible and contains a checkmark icon, otherwise it is hidden and contains a cross icon.
-
-This `Toggle` component can be used in any React application that needs to render a switch UI element. It provides a simple and customizable way to toggle a boolean value. An example usage of the `Toggle` component is shown below:
-
-```
-import Toggle from './Toggle'
-
-function App() {
- const [isActive, setIsActive] = useState(false)
-
- const handleToggle = () => {
- setIsActive(!isActive)
- }
-
- return (
- This is some text that will be styled differently in dark mode.
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `Toggle` component?
-- The `Toggle` component is a switch component that takes in an `id`, `isActive` boolean value, and a `toggle` function as props and returns a switch element with two states.
-
-2. What is the `classNames` function used for?
-- The `classNames` function is used to conditionally concatenate class names based on the values of the `isActive` prop and other static class names.
-
-3. What is the purpose of the `Switch` component from the `@headlessui/react` library?
-- The `Switch` component is a customizable switch component that provides accessible keyboard navigation and screen reader support. It takes in `checked`, `onChange`, and `className` props and returns a switch element.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Tooltip/index.md b/.autodoc/docs/markdown/core/src/components/Tooltip/index.md
deleted file mode 100644
index 586b8e54d..000000000
--- a/.autodoc/docs/markdown/core/src/components/Tooltip/index.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Tooltip/index.tsx)
-
-The code in this file provides functionality for creating tooltips and mouseover tooltips in a React project.
-
-The `Tooltip` component takes in a `text` prop, which is the content that will be displayed in the tooltip. It then renders a `Popover` component with the `content` prop set to a div containing the `text` prop. The `Popover` component is imported from another file and is responsible for rendering the tooltip itself. The `Tooltip` component also spreads any additional props passed to it onto the `Popover` component.
-
-The `TooltipContent` component is similar to the `Tooltip` component, but instead of taking in a `text` prop, it takes in a `content` prop. This component is meant to be used when the content of the tooltip is more complex than just a string of text. It also renders a `Popover` component with the `content` prop set to the `content` prop passed to it.
-
-The `MouseoverTooltip` component is a variation of the `Tooltip` component that only shows the tooltip when the user hovers over the component it is wrapping. It takes in any props that the `Tooltip` component takes in, except for the `show` prop. It then renders a `div` that wraps around the `children` prop passed to it. When the user hovers over this `div`, the `show` state is set to `true`, which causes the tooltip to be displayed.
-
-The `MouseoverTooltipContent` component is similar to the `MouseoverTooltip` component, but instead of taking in a `text` prop or a `content` prop, it takes in both a `content` prop and a `children` prop. It renders a `div` that wraps around the `children` prop passed to it, and when the user hovers over this `div`, the `show` state is set to `true`, which causes the tooltip to be displayed. The `content` prop is passed to the `TooltipContent` component, which is responsible for rendering the tooltip itself.
-
-Overall, these components provide a simple and flexible way to add tooltips and mouseover tooltips to a React project. They can be used in a variety of ways, such as providing additional information about a UI element or displaying a preview of content. Here is an example of how the `Tooltip` component could be used:
-
-```
-import { Tooltip } from 'zoo';
-
-function MyComponent() {
- return (
-
-
- Hover over me!
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `Popover` component and how is it used in this code?
-
- The `Popover` component is imported and used to render tooltip content in this code. It takes in a `content` prop which is a ReactNode and renders it in a popover.
-
-2. What is the difference between the `Tooltip` and `TooltipContent` components?
-
- The `Tooltip` component is used to render a tooltip with text content, while the `TooltipContent` component is used to render a tooltip with arbitrary content.
-
-3. What is the purpose of the `MouseoverTooltip` and `MouseoverTooltipContent` components?
-
- The `MouseoverTooltip` and `MouseoverTooltipContent` components are variations of the `Tooltip` and `TooltipContent` components respectively, with added functionality to show and hide the tooltip on mouseover events.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/TransactionSettings/index.md b/.autodoc/docs/markdown/core/src/components/TransactionSettings/index.md
deleted file mode 100644
index e92bf312f..000000000
--- a/.autodoc/docs/markdown/core/src/components/TransactionSettings/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/TransactionSettings/index.tsx)
-
-The `TransactionSettings` component is responsible for rendering and managing the user's transaction settings, specifically the slippage tolerance and transaction deadline. It imports several hooks from the `user` slice of the global state, including `useUserSlippageTolerance`, `useSetUserSlippageTolerance`, and `useUserTransactionTTL`. It also imports several utility functions and components from various packages.
-
-The component takes in a `placeholderSlippage` prop, which is used to display a default slippage tolerance value in the input field. It then initializes several state variables using the `useState` hook, including `slippageInput`, `slippageError`, `deadlineInput`, and `deadlineError`. It also initializes a reference to the slippage input field using the `useRef` hook.
-
-The `parseSlippageInput` function is responsible for parsing and validating the user's input for the slippage tolerance. It first sets the `slippageInput` state variable to the user's input and clears the `slippageError` state variable. If the input is empty, it sets the user's slippage tolerance to "auto". Otherwise, it attempts to parse the input as a number and convert it to a percentage. If the parsed value is not an integer between 0 and 5000, it sets the user's slippage tolerance to "auto" and sets the `slippageError` state variable to `SlippageError.InvalidInput`. Otherwise, it sets the user's slippage tolerance to the parsed value as a `Percent` object.
-
-The `parseCustomDeadline` function is responsible for parsing and validating the user's input for the transaction deadline. It first sets the `deadlineInput` state variable to the user's input and clears the `deadlineError` state variable. If the input is empty, it sets the transaction deadline to the default value. Otherwise, it attempts to parse the input as a number and convert it to seconds. If the parsed value is not an integer between 60 and 10800 (3 hours), it sets the `deadlineError` state variable to `DeadlineError.InvalidInput`. Otherwise, it sets the transaction deadline to the parsed value.
-
-The component then renders two input fields for the slippage tolerance and transaction deadline, respectively. The slippage tolerance input field includes a button to toggle between "auto" and custom values, as well as a `QuestionHelper` component to display additional information. The transaction deadline input field includes a label for "minutes" and a `QuestionHelper` component. If there are any errors with the user's input, the component displays an error message below the input field.
-
-Overall, the `TransactionSettings` component provides a user-friendly interface for managing transaction settings and ensures that the user's input is properly validated before being used in the application. It can be used in various contexts throughout the larger project, wherever transaction settings need to be managed.
-## Questions:
- 1. What is the purpose of the `TransactionSettings` component?
-- The `TransactionSettings` component is used to display and allow users to adjust their slippage tolerance and transaction deadline settings.
-
-2. What are the possible values for the `SlippageError` and `DeadlineError` enums?
-- The `SlippageError` enum has three possible values: `InvalidInput`, `RiskyLow`, and `RiskyHigh`. The `DeadlineError` enum has one possible value: `InvalidInput`.
-- These enums are used to track and display errors related to user input for slippage tolerance and transaction deadline settings.
-
-3. What is the purpose of the `useUserSlippageTolerance`, `useSetUserSlippageTolerance`, and `useUserTransactionTTL` hooks?
-- The `useUserSlippageTolerance` hook retrieves the current slippage tolerance setting for the user.
-- The `useSetUserSlippageTolerance` hook is used to update the user's slippage tolerance setting.
-- The `useUserTransactionTTL` hook retrieves the current transaction deadline setting for the user.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Typography/index.md b/.autodoc/docs/markdown/core/src/components/Typography/index.md
deleted file mode 100644
index 6b69e937d..000000000
--- a/.autodoc/docs/markdown/core/src/components/Typography/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Typography/index.tsx)
-
-This code defines a `Typography` component that can be used to render text with different styles and weights. The component takes in several props, including `variant`, `weight`, `component`, `className`, and `clickable`.
-
-The `variant` prop determines the size of the text and can be set to one of several predefined values, including `hero`, `h1`, `h2`, `h3`, `lg`, `base`, `sm`, and `xs`. The `weight` prop determines the font weight and can be set to either `400` or `700`. The `component` prop determines the HTML element that the text should be rendered as and defaults to `div`. The `className` prop allows for additional CSS classes to be added to the component. The `clickable` prop determines whether the text should be clickable or not.
-
-The `Typography` component uses the `classNames` function from the `functions` module to generate a list of CSS classes based on the props passed in. It then creates a new React element using the `React.createElement` function and passes in the generated CSS classes, `onClick` handler (if provided), and any other props passed in. Finally, it renders the `children` prop, which represents the text to be displayed.
-
-This component can be used throughout the larger project to render text with consistent styles and weights. For example, it could be used to render headings, paragraphs, or buttons. Here is an example of how the `Typography` component could be used to render a heading:
-
-```
-Hover over this text to see a tooltip!
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code is a React component that renders a network switcher UI element for a web3 application.
-
-2. What dependencies does this code have?
-- This code imports several dependencies including `next/image`, `react`, and custom hooks and components from other files in the project.
-
-3. What is the expected behavior when the user interacts with this UI element?
-- When the user clicks on the network switcher UI element, a modal component called `NetworkModal` is displayed, allowing the user to select a different network to connect to.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Web3ReactManager/GnosisManager.md b/.autodoc/docs/markdown/core/src/components/Web3ReactManager/GnosisManager.md
deleted file mode 100644
index c04713052..000000000
--- a/.autodoc/docs/markdown/core/src/components/Web3ReactManager/GnosisManager.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Web3ReactManager/GnosisManager.tsx)
-
-The code above is a React component called `GnosisManager` that utilizes the `@gnosis.pm/safe-apps-web3-react` library to connect to a Gnosis Safe multisig wallet.
-
-The `useSafeAppConnection` hook is used to establish a connection to the Gnosis Safe multisig wallet through the `SafeAppConnector` object. The `SafeAppConnector` object is created using the `new` keyword and is imported from the `@gnosis.pm/safe-apps-web3-react` library.
-
-The `useSafeAppConnection` hook takes in the `SafeAppConnector` object as an argument and returns a boolean value indicating whether or not the connection to the Gnosis Safe multisig wallet was successful. This value is stored in the `triedToConnectToSafe` variable.
-
-The `GnosisManager` component returns `null`, indicating that it does not render any content to the user interface. Instead, it is used as a utility component to establish a connection to the Gnosis Safe multisig wallet.
-
-This code can be used in a larger project that requires interaction with a Gnosis Safe multisig wallet. For example, if a project requires the ability to send and receive funds from a Gnosis Safe multisig wallet, this code can be used to establish a connection to the wallet and perform the necessary transactions.
-
-Here is an example of how this code can be used in a larger project:
-
-```
-import React from 'react'
-import GnosisManager from './GnosisManager'
-
-function App() {
- return (
-
-
- )
-}
-
-export default App
-```
-
-In the example above, the `GnosisManager` component is imported and used within the `App` component. Other components can also be added to the `App` component to interact with the Gnosis Safe multisig wallet, such as a component to send funds or a component to view transaction history.
-## Questions:
- 1. What is the purpose of the `useEffect` and `useState` hooks imported from React?
- - The `useEffect` hook is likely used to handle side effects, such as updating state or making API calls, and the `useState` hook is likely used to manage component state.
-
-2. What is the `@gnosis.pm/safe-apps-web3-react` package used for?
- - The `@gnosis.pm/safe-apps-web3-react` package is likely used to connect to the Gnosis Safe multisig wallet using the Web3 API.
-
-3. What is the purpose of the `triedToConnectToSafe` variable returned by the `useSafeAppConnection` hook?
- - The `triedToConnectToSafe` variable is likely used to determine whether or not the component was able to successfully connect to the Gnosis Safe multisig wallet.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Web3ReactManager/index.md b/.autodoc/docs/markdown/core/src/components/Web3ReactManager/index.md
deleted file mode 100644
index f7a7eb441..000000000
--- a/.autodoc/docs/markdown/core/src/components/Web3ReactManager/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Web3ReactManager/index.tsx)
-
-The `Web3ReactManager` component is responsible for managing the connection to the Ethereum network via the Web3 React library. It is used in the larger project to ensure that the user is connected to the Ethereum network before allowing them to interact with the application.
-
-The component imports several dependencies, including React, `useEffect`, `useState`, `Loader`, `NetworkContextName`, `dynamic`, `t`, `useEagerConnect`, `useInactiveListener`, `useLingui`, and `useActiveWeb3React`.
-
-The `GnosisManagerNoSSR` component is imported using the `dynamic` function from Next.js, which allows for server-side rendering of components.
-
-The `Web3ReactManager` component takes in a single prop, `children`, which is a JSX element.
-
-The component first initializes several variables using the `useActiveWeb3React` hook, which provides information about the current state of the user's connection to the Ethereum network. It then uses the `useEagerConnect` hook to try to connect to an injected provider, if it exists and has already granted access.
-
-If the connection is not active and there is no error, the component logs a message to the console.
-
-The `useInactiveListener` hook is used to listen for login events on the injected provider when there is no account connected.
-
-The component then sets up a delayed loader state using `useState` and `useEffect`.
-
-If the connection has not been eagerly tried, the component returns `null`. If the account context is not active and there is a network error, the component displays an error message. If neither context is active, the component displays a loader.
-
-Finally, the component returns the `GnosisManagerNoSSR` component and the `children` prop.
-
-Overall, the `Web3ReactManager` component is an important part of the larger project's infrastructure, ensuring that the user is connected to the Ethereum network before allowing them to interact with the application.
-## Questions:
- 1. What is the purpose of the `Web3ReactManager` component?
-- The `Web3ReactManager` component manages the connection to a web3 provider and displays appropriate UI based on the connection status.
-
-2. What is the significance of the `GnosisManagerNoSSR` component?
-- The `GnosisManagerNoSSR` component is dynamically imported and rendered without server-side rendering, which can improve performance by reducing the initial bundle size.
-
-3. What are the `useEagerConnect` and `useInactiveListener` hooks used for?
-- The `useEagerConnect` hook attempts to eagerly connect to an injected provider, while the `useInactiveListener` hook listens for login events on the provider when there is no account connected.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/Web3Status/index.md b/.autodoc/docs/markdown/core/src/components/Web3Status/index.md
deleted file mode 100644
index f20278421..000000000
--- a/.autodoc/docs/markdown/core/src/components/Web3Status/index.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/Web3Status/index.tsx)
-
-The `Web3Status` component is responsible for displaying the user's wallet status and allowing them to connect to a wallet. It imports several dependencies such as React, `useMemo`, `AbstractConnector`, `Image`, `Loader`, `styled-components`, `useLingui`, `useTheme`, `UserIcon`, and `HatchEggModal`. It also imports several functions and constants from other files in the project such as `SUPPORTED_WALLETS`, `injected`, `isTransactionRecent`, `useAllTransactions`, `TransactionDetails`, `NetworkContextName`, `shortenAddress`, `useENSName`, and `useWalletModalToggle`.
-
-The `Web3Status` component is a wrapper for the `Web3StatusInner` component, which is responsible for rendering the user's wallet status. The `Web3StatusInner` component uses the `useActiveWeb3React` hook to get the user's account and connector. If the user is connected to a wallet, it displays their account address or ENS name, along with an icon representing their wallet type. If the user has pending transactions, it displays the number of pending transactions and a loading spinner. If the user is not connected to a wallet, it displays a button to connect to a wallet.
-
-The `Web3Status` component also renders a `WalletModal` component, which displays the user's pending and confirmed transactions and allows them to cancel pending transactions. The `WalletModal` component is only rendered if the user is connected to a wallet.
-
-Overall, the `Web3Status` component is an important part of the project's user interface, as it allows users to connect to a wallet and view their transaction status. It is used in several places throughout the project, such as in the header and footer of the website.
-## Questions:
- 1. What is the purpose of this code file?
-- This code file contains a React component for displaying the user's web3 status and wallet information.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including React, Next.js, styled-components, @lingui/macro, and @heroicons/react.
-
-3. What functionality does the `StatusIcon` function provide?
-- The `StatusIcon` function takes a `Connector` object as a prop and returns an icon component based on the type of connector. It currently supports several different types of connectors, including MetaMask, WalletConnect, Coinbase Wallet, and more.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/ZooItem/index.md b/.autodoc/docs/markdown/core/src/components/ZooItem/index.md
deleted file mode 100644
index 7137edb66..000000000
--- a/.autodoc/docs/markdown/core/src/components/ZooItem/index.md
+++ /dev/null
@@ -1,56 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/ZooItem/index.tsx)
-
-The `ZooItem` component is a React component that renders a single item in the Zoo marketplace. It takes in four props: `src`, `infoTitle`, `infoDesc`, and `authenticityPrice`.
-
-The component is divided into two main sections: the first section displays an image of the item, along with a "Make Offer" button, while the second section displays information about the item, including its title, description, and details such as the transaction hash, token ID, and token standard. The second section also includes a "Proof of Authenticity" section, which displays the price of the item's authenticity proof, a link to the transaction on Etherscan, and a link to view the item on IPS.
-
-The component uses several third-party libraries, including Next.js, which provides server-side rendering and other features for React applications, and the `Image` component from Next.js, which optimizes images for performance. The component also uses the `Link` component from Next.js to create links to other pages in the application.
-
-The component is designed to be reusable, allowing it to be used to display any item in the Zoo marketplace. For example, the component could be used to display a painting, a sculpture, or a rare collectible. The component's props allow it to be customized for each item, with the `src` prop specifying the image source, the `infoTitle` prop specifying the item's title, the `infoDesc` prop specifying the item's description, and the `authenticityPrice` prop specifying the price of the item's authenticity proof.
-
-Here is an example of how the `ZooItem` component could be used in a larger project:
-
-```
-import ZooItem from './ZooItem';
-
-const items = [
- {
- src: '/painting.jpg',
- infoTitle: 'Mona Lisa',
- infoDesc: 'A painting by Leonardo da Vinci',
- authenticityPrice: '0.1 ETH',
- },
- {
- src: '/sculpture.jpg',
- infoTitle: 'David',
- infoDesc: 'A sculpture by Michelangelo',
- authenticityPrice: '0.2 ETH',
- },
-];
-
-function Marketplace() {
- return (
- My Gnosis Safe Multisig Wallet
-
- {items.map((item) => (
-
- );
-}
-```
-
-In this example, the `Marketplace` component renders a list of items using the `ZooItem` component. The `items` array contains two objects, each representing an item in the marketplace. The `ZooItem` component is used to render each item, with the `src`, `infoTitle`, `infoDesc`, and `authenticityPrice` props set to the corresponding values for each item.
-## Questions:
- 1. What is the purpose of the `ZooItem` component?
-- The `ZooItem` component is a Next.js page component that renders a single item in the zoo.
-
-2. What props does the `ZooItem` component expect?
-- The `ZooItem` component expects four props: `src` (a string representing the image source), `infoTitle` (a string representing the title of the item), `infoDesc` (a string representing the description of the item), and `authenticityPrice` (a string representing the price of the item).
-
-3. What is the purpose of the `Link` component from Next.js?
-- The `Link` component from Next.js is used to create client-side navigation between pages in a Next.js app. In this code, it is used to create a link to the Etherscan transaction and to the IPS view of the item.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/alertMessage.md b/.autodoc/docs/markdown/core/src/components/alertMessage.md
deleted file mode 100644
index 8adad86fb..000000000
--- a/.autodoc/docs/markdown/core/src/components/alertMessage.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/alertMessage.ts)
-
-The code above is a function that exports a notification system using the `react-toastify` library. The purpose of this code is to provide a simple and customizable way to display notifications to the user.
-
-The `notify` function takes two parameters: `message` and `type`. The `message` parameter is a string that represents the message to be displayed in the notification. The `type` parameter is also a string that represents the type of notification to be displayed. The `type` parameter can be one of three values: "error", "success", or any other value, which will display an "info" notification.
-
-The function uses a switch statement to determine which type of notification to display based on the `type` parameter. If the `type` parameter is "error", the function will display an error notification using the `toast.error` method from the `react-toastify` library. If the `type` parameter is "success", the function will display a success notification using the `toast.success` method. If the `type` parameter is any other value, the function will display an info notification using the `toast.info` method.
-
-This code can be used in the larger project to provide a consistent and user-friendly way to display notifications to the user. For example, if there is an error in the application, the `notify` function can be called with the "error" type and an appropriate error message to alert the user. Similarly, if a task is completed successfully, the `notify` function can be called with the "success" type and a success message to inform the user.
-
-Here is an example of how the `notify` function can be used in a React component:
-
-```
-import { notify } from "./notify";
-
-const MyComponent = () => {
- const handleClick = () => {
- // do some task
- notify("Task completed successfully!", "success");
- };
-
- return (
-
- );
-};
-```
-
-In the example above, the `notify` function is imported from the `notify` file and used to display a success notification when the button is clicked and the task is completed successfully.
-## Questions:
- 1. What is the purpose of the `react-toastify` library and how is it being used in this code?
- - The `react-toastify` library is being used to display toast notifications. It is imported and used to display different types of notifications based on the `type` parameter passed to the `notify` function.
-2. What are the possible values for the `type` parameter in the `notify` function?
- - The possible values for the `type` parameter are "error", "success", and any other value which will result in an "info" notification being displayed.
-3. Are there any other functions or components in this file that are not being exported?
- - No, there are no other functions or components in this file that are not being exported. The `notify` function is the only export from this file.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/blog/articles.md b/.autodoc/docs/markdown/core/src/components/blog/articles.md
deleted file mode 100644
index fb60e20cc..000000000
--- a/.autodoc/docs/markdown/core/src/components/blog/articles.md
+++ /dev/null
@@ -1,59 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/blog/articles.tsx)
-
-The code defines a React functional component called `Article` that takes in an object `article` as a prop. The `article` object has properties such as `name`, `image`, `link`, `date`, `writtenBy`, and `isNew`. The component returns a JSX element that displays the article information in a styled format.
-
-The JSX element is a `div` with a class name of `mb-8 lg:mb-8 bg-dark-blue flex flex-col w-full max-w-sm md:max-w-lg border border-opacity-30 rounded`. This element contains two child elements: an anchor tag and a `div` with a class name of `px-4 py-8`. The anchor tag has an `href` attribute that is set to the `link` property of the `article` object. The `div` with a class name of `px-4 py-8` contains the rest of the article information.
-
-The `div` with a class name of `mb-4 rounded overflow-hidden border-b border-opacity-30 bg-dark` contains an `Image` component from the `next/image` library. The `src` attribute of the `Image` component is set to the `image` property of the `article` object. The `width` and `height` attributes are set to `100%` and the `layout` attribute is set to `responsive`. The `objectFit` attribute is set to `contain`.
-
-The `div` with a class name of `flex justify-between items-center mb-4` contains two child elements: a `p` tag and a `div` tag. The `p` tag displays the text "New" if the `isNew` property of the `article` object is `true`. Otherwise, it displays nothing. The `div` tag contains two child elements: an `Image` component and a `p` tag. The `src` attribute of the `Image` component is set to `"/img/logo.png"`. The `width` and `height` attributes are set to `24`. The `alt` attribute is set to an empty string. The `p` tag displays the text "Zoo Labs".
-
-The `div` with a class name of `px-4 py-8` contains a `h3` tag, a `p` tag, and another `p` tag. The `h3` tag displays the `name` property of the `article` object. The `p` tag displays the text "Written by: " followed by the `writtenBy` property of the `article` object. The other `p` tag displays the `date` property of the `article` object.
-
-This component can be used to display articles in a blog or news section of a website. The `Article` component can be imported into another component and passed an `article` object as a prop. Here is an example of how the `Article` component can be used:
-
-```
-import Article from "./Article";
-
-const articles = [
- {
- name: "New article",
- image: "/img/article.png",
- link: "https://example.com/article",
- date: "May 1, 2022",
- writtenBy: "John Doe",
- isNew: true,
- },
- {
- name: "Another article",
- image: "/img/another-article.png",
- link: "https://example.com/another-article",
- date: "April 1, 2022",
- writtenBy: "Jane Doe",
- isNew: false,
- },
-];
-
-const ArticleList = () => {
- return (
-
- {articles.map((article) => (
-
- ))}
-
- );
-};
-
-export default ArticleList;
-```
-
-In this example, an array of `articles` is defined. The `ArticleList` component maps over the `articles` array and renders an `Article` component for each article. The `key` prop of each `Article` component is set to the `link` property of the article object.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `Article` that displays information about an article, including its name, image, link, date, author, and whether it is new.
-
-2. What external dependencies does this code rely on?
-- This code imports two external dependencies: `react` and `next/image`.
-
-3. What is the structure of the `Props` interface and how is it used in the component?
-- The `Props` interface defines an object with properties `name`, `image`, `link`, `date`, `writtenBy`, and `isNew`, all of which are of type `string` except for `isNew`, which is of type `boolean`. This interface is used to destructure the `article` prop passed to the `Article` component, allowing the component to access the values of these properties.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/components/market/marketItem.md b/.autodoc/docs/markdown/core/src/components/market/marketItem.md
deleted file mode 100644
index dff76ca74..000000000
--- a/.autodoc/docs/markdown/core/src/components/market/marketItem.md
+++ /dev/null
@@ -1,54 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/components/market/marketitem.json)
-
-This code defines a JSON object that contains information about different animals in a zoo. Each animal is represented as a separate object within the array, with properties such as an ID, name, image, and 3D model files in both USDZ and GLB formats. Additionally, each animal has a "type" property that specifies whether it is an "egg" or an "animal".
-
-This code can be used in a larger project that involves creating a virtual zoo experience. The JSON object can be used to populate a user interface that displays information about each animal, including its name, image, and 3D model. The "type" property can be used to categorize the animals and display them in different sections of the UI. For example, the "egg" animals could be displayed in an incubation section, while the "animal" animals could be displayed in a habitat section.
-
-Here is an example of how this code could be used in a React component:
-
-```jsx
-import React from "react";
-import animals from "./zoo";
-
-function Zoo() {
- return (
-
-
- );
-}
-```
-
-In this example, the `animals` array is imported from the `zoo` file and used to display information about each animal in the UI. The `filter` method is used to separate the animals into two sections based on their "type" property, and the `map` method is used to render each animal's name, image, and 3D model using the `Welcome to the Zoo!
-
-
- Egg Animals
- {animals.filter((animal) => animal.type === "egg").map((animal) => ( -
-
-
- ))}
- {animal.name}
-
-
- Animal Animals
- {animals.filter((animal) => animal.type === "animal").map((animal) => ( -
-
-
- ))}
- {animal.name}
-
-
- Click me!
-
-
- );
-};
-
-export default MyComponent;
-```
-
-In this example, the `getExternalLinkProps` function is used to spread the `target` and `rel` properties onto the `a` element. This ensures that the link will open in a new tab and have the appropriate security measures applied.
-## Questions:
- 1. What does the `getExternalLinkProps` function do?
- - The `getExternalLinkProps` function returns an object with two properties, `target` and `rel`, which are used for external links.
-
-2. Why is the `target` property set to `_blank`?
- - The `target` property is set to `_blank` to open the link in a new tab or window, instead of replacing the current page.
-
-3. What is the purpose of the `rel` property and why is it set to `noreferrer noopener`?
- - The `rel` property is used to specify the relationship between the current document and the linked document. `noreferrer` is used to prevent the browser from sending the referrer header, and `noopener` is used to prevent the new page from being able to access the window object of the previous page. This helps to improve security and privacy.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/config/index.md b/.autodoc/docs/markdown/core/src/config/index.md
deleted file mode 100644
index c8b9224e0..000000000
--- a/.autodoc/docs/markdown/core/src/config/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/index.ts)
-
-The code above is a simple configuration file for the zoo project. It imports the `ChainId` enum from the `@zoolabs/zdk` library and defines a `config` object with an empty object as its value for the `MAINNET` chain ID.
-
-The purpose of this file is to provide a central location for storing configuration options for the zoo project. By defining the `config` object, developers can easily access and modify configuration options for the `MAINNET` chain ID throughout the project.
-
-For example, if the project needed to define a default gas price for transactions on the `MAINNET` chain, the `config` object could be updated to include a `gasPrice` property with the desired value. This value could then be accessed throughout the project by importing the `config` object and referencing the `gasPrice` property.
-
-```
-import config from 'zoo/config'
-
-const gasPrice = config[ChainId.MAINNET].gasPrice || 1000000000
-```
-
-In the example above, the `config` object is imported and the `gasPrice` property is accessed for the `MAINNET` chain ID. If the `gasPrice` property is not defined in the `config` object, a default value of `1000000000` is used.
-
-Overall, this configuration file provides a simple and flexible way for developers to manage configuration options for the zoo project.
-## Questions:
- 1. What is the purpose of the `ChainId` import from `@zoolabs/zdk`?
- - The `ChainId` import is likely used to define different configurations for different blockchain networks.
-2. Why is the `config` object empty for the `MAINNET` chain ID?
- - It's possible that the `config` object is intended to be populated with specific configurations for each chain ID, but has not yet been implemented for the `MAINNET` chain ID.
-3. What is the intended use of the `config` object and how is it used in the rest of the `zoo` project?
- - Without further context, it's difficult to determine the intended use of the `config` object and how it is used in the rest of the `zoo` project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/config/oracles/chainlink/index.md b/.autodoc/docs/markdown/core/src/config/oracles/chainlink/index.md
deleted file mode 100644
index 9fc73bf2f..000000000
--- a/.autodoc/docs/markdown/core/src/config/oracles/chainlink/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/index.ts)
-
-This code defines a mapping of Chainlink price feed addresses for various blockchain networks. The purpose of this code is to provide a centralized location for accessing the addresses of Chainlink price feeds on different networks.
-
-The code imports mappings for different networks from separate files and defines a type for the ChainlinkPriceFeedMap object. This object contains key-value pairs where the key is the address of the Chainlink price feed and the value is an object containing information about the price feed, such as the from and to tokens, decimals, and warning messages.
-
-The code also defines a constant CHAINLINK_PRICE_FEED_MAP, which is an object that maps ChainId values to the corresponding ChainlinkPriceFeedMap for that network. ChainId is an enum defined in the @zoolabs/zdk library that represents the different blockchain networks.
-
-This code can be used in the larger project to easily access the addresses of Chainlink price feeds on different networks. For example, if a function in the project needs to retrieve the address of a Chainlink price feed on the BSC network, it can simply access the BSC object in the CHAINLINK_PRICE_FEED_MAP constant.
-
-Example usage:
-
-```
-import { ChainId } from '@zoolabs/zdk'
-import { CHAINLINK_PRICE_FEED_MAP } from './path/to/zoo'
-
-const bscPriceFeeds = CHAINLINK_PRICE_FEED_MAP[ChainId.BSC]
-const ethUsdPriceFeed = bscPriceFeeds['0x8AC76a51cc950d9822D68b83fE1Ad97B32Cd580d']
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a mapping of Chainlink price feed addresses for various blockchain networks.
-
-2. What is the `ChainId` type from `@zoolabs/zdk` used for?
-- The `ChainId` type is used as a key in the `CHAINLINK_PRICE_FEED_MAP` object to associate each Chainlink price feed mapping with a specific blockchain network.
-
-3. What information is included in each Chainlink price feed mapping?
-- Each mapping includes the `from` and `to` currency symbols, the number of decimals for each currency, and optional warning and address fields.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/arbitrum.md b/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/arbitrum.md
deleted file mode 100644
index 9e057d2ed..000000000
--- a/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/arbitrum.md
+++ /dev/null
@@ -1,23 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/arbitrum.ts)
-
-This code defines a constant object called `ARBITRUM_CHAINLINK_MAPPING` that maps various cryptocurrency pairs to their corresponding Chainlink oracle addresses and other relevant information. The purpose of this code is to provide a centralized location for storing this mapping information, which can be used throughout the larger project to retrieve price data from the Chainlink oracle network.
-
-Each key in the object represents a unique cryptocurrency pair, and the corresponding value is an object that contains the following properties:
-- `from`: the address of the token contract for the "from" currency in the pair
-- `to`: the address of the token contract for the "to" currency in the pair
-- `decimals`: the number of decimal places used by the price feed for this pair
-- `fromDecimals`: the number of decimal places used by the "from" currency token contract
-- `toDecimals`: the number of decimal places used by the "to" currency token contract
-
-For example, the first key-value pair in the object maps the WETH/USD pair to the Chainlink oracle address `0x82aF49447D8a07e3bd95BD0d56f35241523fBab1`. The `from` property is set to the address of the WETH token contract, `0x639Fe6ab55C921f74e7fac1ee960C0B6293ba612`, and the `to` property is set to a special "dummy" address that represents USD. The `decimals` property is set to 8, indicating that the price feed uses 8 decimal places, and the `fromDecimals` property is set to 18, indicating that the WETH token contract uses 18 decimal places.
-
-This code can be used throughout the larger project to retrieve price data from the Chainlink oracle network. For example, if the project needs to retrieve the current price of WETH in USD, it can use the `ARBITRUM_CHAINLINK_MAPPING` object to look up the Chainlink oracle address for the WETH/USD pair, and then use that address to query the Chainlink price feed for the current price. By centralizing this mapping information in a single location, the project can avoid hard-coding addresses and other information throughout the codebase, which can make it easier to maintain and update the project over time.
-## Questions:
- 1. What is the purpose of this code?
- - This code defines a mapping of various token pairs to their corresponding Chainlink oracle addresses and decimal values.
-
-2. What tokens are included in this mapping?
- - The mapping includes WETH, WBTC, LINK, USDC, USDT, and YFI.
-
-3. What is the significance of the `to` address being set to `0x0000000000000000000000000000000000000001` for each token pair?
- - This address is the Chainlink aggregator address, which is used to retrieve the price data for the specified token pair.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/avalanche.md b/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/avalanche.md
deleted file mode 100644
index 5999b35fa..000000000
--- a/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/avalanche.md
+++ /dev/null
@@ -1,23 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/avalanche.ts)
-
-The code defines a constant object called `AVALANCHE_CHAINLINK_MAPPING` that maps various cryptocurrency pairs to their corresponding Chainlink oracle contract addresses and other relevant information. The pairs include AAVE/USD, AVAX/USD, WBTC/USD, DAI/USD, ETH/USD, LINK/USD, USDC/USD, and USDT/USD.
-
-Each pair is represented as a key-value pair in the object, where the key is the oracle contract address and the value is an object containing the following properties:
-- `from`: the address of the token contract used as the "from" currency in the pair
-- `to`: the address of the token contract used as the "to" currency in the pair
-- `decimals`: the number of decimal places used by the oracle contract to represent the price of the pair
-- `fromDecimals`: the number of decimal places used by the "from" token contract
-- `toDecimals`: the number of decimal places used by the "to" token contract
-
-This code is likely used in the larger project to facilitate the retrieval of price data for the specified cryptocurrency pairs from the Chainlink oracle network. For example, a function in the project may use this mapping to determine which oracle contract to query for the price of a particular pair, and then use the `decimals`, `fromDecimals`, and `toDecimals` properties to properly format the retrieved price data.
-
-An example usage of this code in a larger project could be a function that takes a cryptocurrency pair as input and returns the current price of that pair. The function could use the `AVALANCHE_CHAINLINK_MAPPING` object to determine which oracle contract to query, and then use the `decimals`, `fromDecimals`, and `toDecimals` properties to format the retrieved price data before returning it.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a mapping of various cryptocurrency pairs to their corresponding Chainlink oracle addresses on the Avalanche network.
-
-2. What is the format of each entry in the mapping?
- Each entry is a key-value pair where the key is the oracle address and the value is an object containing information about the cryptocurrency pair, including the source and destination tokens, their respective decimal places, and the oracle's decimal place.
-
-3. What is the significance of the `to` address being set to `0x0000000000000000000000000000000000000001`?
- This address is a placeholder value that indicates the destination token is the native token of the network (in this case, Avalanche's AVAX token).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/heco.md b/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/heco.md
deleted file mode 100644
index 9608c3934..000000000
--- a/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/heco.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/heco.ts)
-
-The code defines a constant object called `HECO_CHAINLINK_MAPPING` that maps certain Ethereum addresses to specific token information. Each key in the object is an Ethereum address, and each value is an object that contains information about the token associated with that address. The information includes the Ethereum address of the contract that the token is from (`from`), the Ethereum address of the contract that the token is being converted to (`to`), the number of decimal places for the token (`decimals`), the number of decimal places for the `from` token (`fromDecimals`), and the number of decimal places for the `to` token (`toDecimals`).
-
-This code is likely used in a larger project that involves converting tokens from one type to another. The `from` and `to` addresses indicate the contracts that are involved in the conversion, and the decimal information is necessary for correctly calculating the conversion rate. This mapping could be used in a variety of contexts, such as a decentralized exchange or a token swap platform.
-
-Example usage:
-
-```
-import HECO_CHAINLINK_MAPPING from './path/to/HECO_CHAINLINK_MAPPING.js'
-
-const tokenAddress = '0x8a054991B803F6a6958Ba9695Cc8D366C8a30a69'
-const tokenInfo = HECO_CHAINLINK_MAPPING[tokenAddress]
-console.log(tokenInfo.decimals) // outputs 8
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a mapping of addresses to objects containing various properties such as `from`, `to`, `decimals`, `fromDecimals`, and `toDecimals`.
-
-2. What is the significance of the addresses used in this code?
-- The addresses are likely related to the HECO blockchain and Chainlink, but without more context it is unclear what specific purpose they serve.
-
-3. What is the expected output or usage of this code?
-- It is unclear from this code alone what the expected output or usage is, but it is likely that this mapping will be used in other parts of the `zoo` project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/kovan.md b/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/kovan.md
deleted file mode 100644
index c53cd6691..000000000
--- a/.autodoc/docs/markdown/core/src/config/oracles/chainlink/mappings/kovan.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/oracles/chainlink/mappings/kovan.ts)
-
-The code defines a constant object called `KOVAN_CHAINLINK_MAPPING` that maps various Ethereum contract addresses to their respective Chainlink oracle addresses. Chainlink is a decentralized oracle network that provides off-chain data to smart contracts on the blockchain.
-
-The object contains key-value pairs where the keys are Ethereum contract addresses and the values are objects containing the following properties:
-- `from`: the address of the contract that is requesting data from the Chainlink oracle
-- `to`: the address of the Chainlink oracle contract that provides the requested data
-- `decimals`: the number of decimal places used by the contract's token
-- `fromDecimals`: the number of decimal places used by the contract's token when requesting data from the oracle
-- `toDecimals`: the number of decimal places used by the oracle when providing data to the contract
-
-This mapping is useful for developers who are building smart contracts on the Ethereum blockchain and need to retrieve data from external sources using Chainlink. By using this mapping, developers can easily look up the Chainlink oracle address for a given contract and configure their smart contract to request data from the correct oracle with the correct decimal precision.
-
-For example, if a developer is building a smart contract that needs to retrieve the price of ETH in USD from an external source using Chainlink, they can use the `KOVAN_CHAINLINK_MAPPING` object to find the correct oracle address and decimal precision to use in their contract.
-
-```
-import KOVAN_CHAINLINK_MAPPING from 'zoo'
-
-const ethUsdOracleAddress = KOVAN_CHAINLINK_MAPPING['0x22B58f1EbEDfCA50feF632bD73368b2FdA96D541'].to
-const ethUsdDecimals = KOVAN_CHAINLINK_MAPPING['0x22B58f1EbEDfCA50feF632bD73368b2FdA96D541'].toDecimals
-
-// Use ethUsdOracleAddress and ethUsdDecimals in smart contract code to request ETH/USD price data from Chainlink
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a mapping of addresses to objects that contain information about token conversions on the Kovan Chainlink network.
-
-2. What is the significance of the 'from', 'to', 'decimals', 'fromDecimals', and 'toDecimals' properties in each object?
-- The 'from' and 'to' properties represent the addresses of the tokens being converted, while the 'decimals', 'fromDecimals', and 'toDecimals' properties represent the number of decimal places used by each token.
-
-3. How might this code be used in a larger project?
-- This code could be imported into other files in the project to provide a convenient way to access information about token conversions on the Kovan Chainlink network.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/config/rpc.md b/.autodoc/docs/markdown/core/src/config/rpc.md
deleted file mode 100644
index cb6c0a9c3..000000000
--- a/.autodoc/docs/markdown/core/src/config/rpc.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/rpc.ts)
-
-This code defines an object called `rpc` that maps different Ethereum chain IDs to their corresponding RPC (Remote Procedure Call) endpoints. The purpose of this code is to provide a centralized location for storing and accessing these endpoints, which can be used by other parts of the project to interact with the Ethereum network.
-
-The `rpc` object is defined using ES6 object literal syntax, with each chain ID as a key and its corresponding RPC endpoint as the value. The endpoints are URLs that point to Ethereum nodes that can process requests for that particular chain. For example, the `MAINNET` chain ID maps to the `https://speedy-nodes-nyc.moralis.io/758308e03c71d6246942fad2/eth/ropsten` endpoint, which is a Moralis node that runs on the Ethereum mainnet.
-
-By exporting this `rpc` object, other parts of the project can import it and use it to interact with the Ethereum network. For example, a smart contract deployment script might use this object to specify which chain to deploy the contract on and which endpoint to use for that chain. Here's an example of how this object might be used:
-
-```
-import rpc from 'zoo/rpc'
-
-const chainId = 'MAINNET'
-const endpoint = rpc[chainId]
-
-// Use the endpoint to interact with the Ethereum network
-```
-
-In this example, the `rpc` object is imported from the `zoo/rpc` module. The `chainId` variable is set to `'MAINNET'`, which is one of the keys in the `rpc` object. The `endpoint` variable is then set to the value of `rpc[chainId]`, which is the URL for the Ethereum mainnet endpoint. This endpoint can then be used to interact with the Ethereum network, such as by sending transactions or querying contract data.
-
-Overall, this code provides a simple and flexible way to manage Ethereum RPC endpoints for different chains in a centralized location, which can be used by other parts of the project to interact with the Ethereum network.
-## Questions:
- 1. What is the purpose of this code?
-- This code exports an object containing RPC URLs for various blockchain networks based on their ChainId.
-
-2. What is the `ChainId` import coming from?
-- The `ChainId` import is coming from the `@zoolabs/zdk` library.
-
-3. Why are some of the RPC URLs commented out?
-- Some of the RPC URLs are commented out because they are for networks that are not currently being used or tested in the project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/config/token-lists.md b/.autodoc/docs/markdown/core/src/config/token-lists.md
deleted file mode 100644
index 797bbdbeb..000000000
--- a/.autodoc/docs/markdown/core/src/config/token-lists.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/token-lists.ts)
-
-This code defines a set of URLs that point to token lists used in the larger project. These token lists are used to import and search for tokens across various decentralized exchanges. The `UNSUPPORTED_LIST_URLS` constant is an array of URLs that point to lists of tokens that are not supported by the project. The `DEFAULT_LIST_OF_LISTS` constant is an array of URLs that point to token lists that are searched across by default. The order of the URLs in this array determines the priority of the token import. The `DEFAULT_ACTIVE_LIST_URLS` constant is an array of URLs that point to token lists that are actively searched across.
-
-For example, if a user wants to import a token into the project, the project will search across the token lists in `DEFAULT_ACTIVE_LIST_URLS` to see if the token is supported. If the token is not found, the project will search across the token lists in `DEFAULT_LIST_OF_LISTS` in order of priority until the token is found or all lists have been searched. If the token is still not found, the project will search across the token lists in `UNSUPPORTED_LIST_URLS` to see if the token is unsupported.
-
-This code is important because it allows the project to import and search for tokens across multiple decentralized exchanges. By defining a set of token lists, the project can ensure that it is searching across all relevant exchanges and can prioritize the import of tokens based on the order of the lists.
-
-Example usage:
-
-```
-import { DEFAULT_ACTIVE_LIST_URLS, DEFAULT_LIST_OF_LISTS } from 'zoo'
-
-// search for a token across the default active lists
-const token = 'ETH'
-const activeLists = DEFAULT_ACTIVE_LIST_URLS
-for (const list of activeLists) {
- const tokens = await fetch(list).then((res) => res.json())
- if (tokens.includes(token)) {
- console.log(`${token} found in ${list}`)
- break
- }
-}
-
-// search for a token across the default lists of lists
-const listsOfLists = DEFAULT_LIST_OF_LISTS
-for (const list of listsOfLists) {
- const tokens = await fetch(list).then((res) => res.json())
- if (tokens.includes(token)) {
- console.log(`${token} found in ${list}`)
- break
- }
-}
-```
-## Questions:
- 1. What is the purpose of the `UNSUPPORTED_LIST_URLS` array?
-- The `UNSUPPORTED_LIST_URLS` array is used to mark unsupported tokens and contains a single URL to a list of unsupported tokens from the Blockchain Association.
-
-2. What is the difference between `DEFAULT_LIST_OF_LISTS` and `DEFAULT_ACTIVE_LIST_URLS`?
-- `DEFAULT_LIST_OF_LISTS` is an array of token list URLs that are searched across in order of priority, while `DEFAULT_ACTIVE_LIST_URLS` is an array of token list URLs that are considered 'active' and always searched across.
-
-3. What is the significance of the `OPTIMISM_LIST` constant?
-- The `OPTIMISM_LIST` constant is a URL to a token list that is included in the `DEFAULT_LIST_OF_LISTS` array and is searched across for token imports.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/config/types.md b/.autodoc/docs/markdown/core/src/config/types.md
deleted file mode 100644
index 3e477c86f..000000000
--- a/.autodoc/docs/markdown/core/src/config/types.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/types.ts)
-
-The code above defines an interface called `Config` that specifies the properties of a connector configuration object. This object is used to configure a web3 connector that allows a user to interact with a blockchain network. The `Config` interface has five properties:
-
-1. `title`: a string that represents the name of the connector.
-2. `icon`: a React functional component that renders an SVG icon for the connector.
-3. `connectorId`: a string that represents the unique identifier of the connector.
-4. `connector`: an instance of the `AbstractConnector` class that represents the actual connector implementation.
-5. `color`: a string that represents the color associated with the connector.
-
-The `AbstractConnector` class is imported from the `@web3-react/abstract-connector` package, which provides an abstract base class for implementing web3 connectors. The `FC` type is imported from the `react` package and is used to define the `icon` property of the `Config` interface.
-
-The `SvgProps` type is imported from a file located in the `../components` directory and is used as a prop type for the `icon` property of the `Config` interface. The `ConnectorNames` type is imported from a file located in the `../constants/types` directory and is used as the type for the `connectorId` property of the `Config` interface.
-
-Overall, this code defines a configuration object that is used to configure a web3 connector for interacting with a blockchain network. The `Config` interface specifies the properties of this object, including the name, icon, unique identifier, implementation, and color of the connector. This configuration object is likely used in other parts of the `zoo` project to instantiate and configure web3 connectors for interacting with different blockchain networks.
-
-Example usage:
-
-```typescript
-import { Config } from "./config";
-
-const myConfig: Config = {
- title: "My Connector",
- icon: MyIconComponent,
- connectorId: "my-connector",
- connector: new MyConnector(),
- color: "#123456"
-};
-```
-## Questions:
- 1. What is the purpose of this code file within the `zoo` project?
-- This code file defines an interface called `Config` and imports various dependencies for the `zoo` project.
-
-2. What is the `AbstractConnector` and `ConnectorNames` being used for?
-- The `AbstractConnector` and `ConnectorNames` are being used as types for the `connector` and `connectorId` properties in the `Config` interface.
-
-3. What is the `icon` property in the `Config` interface?
-- The `icon` property is a React functional component that takes in `SvgProps` as its props and is used to display an icon associated with the connector in the `zoo` project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/config/wallets.md b/.autodoc/docs/markdown/core/src/config/wallets.md
deleted file mode 100644
index 1d85ffb25..000000000
--- a/.autodoc/docs/markdown/core/src/config/wallets.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/config/wallets.ts)
-
-This code defines a set of connectors for various wallets that can be used to interact with the Zoo project. The code imports the `AbstractConnector` class from the `@web3-react/abstract-connector` library, which is used as a base class for the wallet connectors. It also imports the `ChainId` enum from the `@zoolabs/zdk` library, which is used to specify the chain ID for the RPC URLs.
-
-The code defines several wallet connectors, including `injected`, `metaMask`, `walletConnect`, `coinbaseWallet`, and `Binance`. Each connector is defined as an instance of a connector class, such as `InjectedConnector` or a custom connector class. The `supportedChainIds` variable is defined as an array of chain IDs that are supported by the Zoo project.
-
-The `SUPPORTED_WALLETS` object defines a set of wallet connectors that are supported by the Zoo project. Each wallet connector is defined as an object with properties such as `connector`, `name`, `iconName`, `description`, `href`, `color`, `primary`, `mobile`, and `mobileOnly`. The `connector` property is a reference to the connector instance for the wallet. The `name` property is the name of the wallet. The `iconName` property is the name of the icon file for the wallet. The `description` property is a brief description of the wallet. The `href` property is a URL for the wallet. The `color` property is a hex code for the color of the wallet. The `primary` property is a boolean that indicates whether the wallet is the primary wallet. The `mobile` property is a boolean that indicates whether the wallet is available on mobile devices. The `mobileOnly` property is a boolean that indicates whether the wallet is only available on mobile devices.
-
-This code can be used in the larger Zoo project to provide users with a set of wallet connectors that they can use to interact with the project. For example, the `SUPPORTED_WALLETS` object can be used to display a list of supported wallets on a web page or in a mobile app. The `connector` property of each wallet object can be used to connect to the wallet and interact with the Zoo project. For example, the `metaMask` connector can be used to connect to the MetaMask wallet and interact with the Zoo project using the MetaMask browser extension. Similarly, the `walletConnect` connector can be used to connect to the WalletConnect app and interact with the Zoo project on a mobile device.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines various web3 connectors for different wallets and networks.
-
-2. What is the difference between `metaMask` and `walletConnect` connectors?
-- `metaMask` is a connector for the MetaMask browser extension, while `walletConnect` is a connector for various mobile wallets such as Trust Wallet and Rainbow Wallet.
-
-3. Why are some parts of the code commented out?
-- It is possible that these parts of the code were previously used but are no longer needed, or they may be under development and not yet ready for use.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/connectors/coinbaseWallet.md b/.autodoc/docs/markdown/core/src/connectors/coinbaseWallet.md
deleted file mode 100644
index d976ab5d8..000000000
--- a/.autodoc/docs/markdown/core/src/connectors/coinbaseWallet.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/coinbaseWallet.ts)
-
-This code imports the `CoinbaseWallet` class from the `@web3-react/coinbase-wallet` package and the `initializeConnector` function from the `@web3-react/core` package. It also imports the `URLS` object from the `config/chains` file.
-
-The purpose of this code is to initialize a connector for the Coinbase Wallet, which is a cryptocurrency wallet that can be used to interact with the Ethereum blockchain. The `initializeConnector` function takes a generic type parameter of `CoinbaseWallet`, which is passed as an argument to the function. The function returns an array containing an instance of the `CoinbaseWallet` class and a set of hooks that can be used to interact with the wallet.
-
-The `CoinbaseWallet` class takes two arguments: `actions` and an object containing the `url` and `appName` properties. The `actions` argument is an object that contains methods for interacting with the Ethereum blockchain, such as `getChainId` and `getAccount`. The `url` property is set to the first URL in the `URLS` array, which is an array of arrays containing URLs for different Ethereum networks. The `appName` property is set to `'web3-react'`.
-
-This code can be used in the larger project to enable users to connect their Coinbase Wallet to the Ethereum blockchain and interact with smart contracts. For example, the `coinbaseWallet` instance can be passed to the `useWeb3React` hook from the `@web3-react/core` package to provide access to the user's Ethereum account and enable them to sign transactions.
-
-Example usage:
-
-```
-import { useWeb3React } from '@web3-react/core'
-import { coinbaseWallet } from 'zoo'
-
-function MyComponent() {
- const { account, library } = useWeb3React()
-
- async function signTransaction() {
- const signer = library.getSigner(account)
- const tx = await signer.sendTransaction({ to: '0x...', value: 100 })
- console.log(tx.hash)
- }
-
- return (
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
- This code initializes a connector for the Coinbase Wallet using the `@web3-react` library and sets the URL and app name for the wallet.
-
-2. What is the significance of the `URLS` variable from the `config/chains` module?
- The `URLS` variable likely contains an array of URLs for different blockchain networks, and this code is using the URL at index 1, position 0 for the Coinbase Wallet connection.
-
-3. What other connectors can be initialized using the `initializeConnector` function?
- The `initializeConnector` function can be used to initialize connectors for other wallets or blockchain providers, as long as they are compatible with the `@web3-react` library.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/connectors/eip1193.md b/.autodoc/docs/markdown/core/src/connectors/eip1193.md
deleted file mode 100644
index 5cd8894e7..000000000
--- a/.autodoc/docs/markdown/core/src/connectors/eip1193.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/eip1193.ts)
-
-This code is a part of a larger project called "zoo" and it imports several packages from the ethers.js and web3-react libraries. The purpose of this code is to initialize a connector for the EIP-1193 standard, which is an interface for interacting with Ethereum smart contracts.
-
-The code first creates an instance of the `Eip1193Bridge` class from the `@ethersproject/experimental` package and a `JsonRpcProvider` instance from the `@ethersproject/providers` package. It then creates a new class called `Eip1193BridgeWithoutAccounts` that extends the `Eip1193Bridge` class and overrides the `request` method. This method checks if the requested method is either "eth_requestAccounts" or "eth_accounts" and returns an empty array if it is. Otherwise, it calls the `request` method of the parent class.
-
-Next, the code creates an instance of the `Eip1193BridgeWithoutAccounts` class using the `JsonRpcProvider` instance and gets a signer from it. Finally, it calls the `initializeConnector` function from the `@web3-react/core` package to create a connector for the EIP-1193 standard. This function takes a callback function that creates a new instance of the `EIP1193` class from the `@web3-react/eip1193` package and passes it the `actions` and `eip1193Provider` parameters. It also takes an array of chain IDs, which in this case is `[1]` for the Ethereum mainnet.
-
-The resulting connector is an array that contains two elements: the `eip1193` object and the `hooks` object. The `eip1193` object is an instance of the `EIP1193` class that can be used to interact with Ethereum smart contracts using the EIP-1193 standard. The `hooks` object contains several hooks that can be used to access the `eip1193` object and its properties in a React component.
-
-Here is an example of how this code might be used in a larger project:
-
-```javascript
-import { useWeb3React } from "@web3-react/core";
-
-function MyComponent() {
- const { active, error, account, library } = useWeb3React();
-
- async function getBalance() {
- const balance = await library.getBalance(account);
- console.log(`Balance: ${balance.toString()}`);
- }
-
- return (
-
- {active ? (
-
- ) : (
-
- );
-}
-```
-
-In this example, the `useWeb3React` hook from the `@web3-react/core` package is used to access the `eip1193` object and its properties in a React component. The `getBalance` function uses the `library` property to call the `getBalance` method of the Ethereum provider and logs the result to the console. The `active` and `error` properties are used to conditionally render a button or an error message based on whether the user is connected to a wallet or not.
-## Questions:
- 1. What libraries are being imported in this code?
-- The code is importing `Eip1193Bridge` from `@ethersproject/experimental`, `JsonRpcProvider` from `@ethersproject/providers`, `initializeConnector` from `@web3-react/core`, and `EIP1193` from `@web3-react/eip1193`.
-
-2. What is the purpose of the `Eip1193BridgeWithoutAccounts` class?
-- The `Eip1193BridgeWithoutAccounts` class extends the `Eip1193Bridge` class and overrides the `request` method to return an empty array if the method is either "eth_requestAccounts" or "eth_accounts". This is likely done to prevent the user from accessing account information.
-
-3. What is the purpose of the `initializeConnector` function and what does it return?
-- The `initializeConnector` function takes a callback function that creates a new instance of `EIP1193` and an array of chain IDs. It returns an array with two elements: the `eip1193` object and a `hooks` object that contains various hooks for interacting with the `eip1193` object.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/connectors/empty.md b/.autodoc/docs/markdown/core/src/connectors/empty.md
deleted file mode 100644
index 095d2e920..000000000
--- a/.autodoc/docs/markdown/core/src/connectors/empty.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/empty.ts)
-
-The code above is a module that initializes a connector for the Web3 React library. The purpose of this code is to provide a way to connect to a Web3 provider, which is necessary for interacting with the Ethereum blockchain.
-
-The `initializeConnector` function is imported from the `@web3-react/core` library, which is a core component of the Web3 React library. This function takes a generic type parameter, which in this case is `Empty`. The `Empty` type is imported from the `@web3-react/empty` library, which is a package that provides an empty connector implementation.
-
-The `empty` constant is then exported, which is an instance of the `Empty` connector. This connector is used when there is no Web3 provider available, which can happen if the user is not logged into a wallet or if the wallet does not support Web3.
-
-The `hooks` constant is also exported, which is an object that contains various hooks that can be used to interact with the Web3 provider. These hooks include `useWeb3React`, which is a hook that provides access to the current Web3 provider and account, and `useEagerConnect`, which is a hook that attempts to connect to the Web3 provider as soon as possible.
-
-Overall, this module provides a way to initialize a connector for the Web3 React library, which is necessary for interacting with the Ethereum blockchain. The `empty` connector is used when there is no Web3 provider available, and the `hooks` object provides various hooks that can be used to interact with the Web3 provider.
-
-Example usage:
-
-```javascript
-import { empty, hooks } from 'zoo'
-
-// Use the empty connector if there is no Web3 provider available
-const connector = hooks.useWeb3React() || empty
-
-// Use the connector to interact with the Ethereum blockchain
-const provider = connector.getProvider()
-const signer = connector.getSigner()
-```
-## Questions:
- 1. What is the purpose of the `initializeConnector` function and how does it work?
-- The `initializeConnector` function is used to initialize a connector for the Web3 React library. It takes a generic type parameter and a callback function that returns an instance of the generic type.
-
-2. What is the `Empty` type and how is it used in this code?
-- The `Empty` type is a type definition from the `@web3-react/empty` package. It is used as the generic type parameter for the `initializeConnector` function to specify the type of connector being initialized.
-
-3. What is the significance of the `empty` and `hooks` variables being exported from this module?
-- The `empty` variable is the instance of the `Empty` type returned by the `initializeConnector` function. The `hooks` variable contains the Web3 React hooks that can be used to interact with the initialized connector. Exporting these variables allows other modules to use them in their own code.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/connectors/index.md b/.autodoc/docs/markdown/core/src/connectors/index.md
deleted file mode 100644
index 6ab10d93b..000000000
--- a/.autodoc/docs/markdown/core/src/connectors/index.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/index.ts)
-
-This code defines several Web3 connectors for different blockchain networks. These connectors allow users to interact with the blockchain using their wallets. The connectors are defined using different libraries such as `@binance-chain/bsc-connector`, `@web3-react/injected-connector`, `@web3-react/portis-connector`, `@web3-react/torus-connector`, `@web3-react/walletconnect-connector`, and `@web3-react/walletlink-connector`.
-
-The RPC object contains the URLs for different blockchain networks. The supportedChainIds array contains the chain IDs for different blockchain networks. The connectors are defined for different blockchain networks such as Ethereum mainnet, Binance Smart Chain, Avalanche, and others.
-
-The `injected` connector is used to connect to the user's wallet using the `@web3-react/injected-connector` library. The `walletconnect` connector is used to connect to the user's wallet using the WalletConnect protocol. The `fortmatic` connector is used to connect to the user's wallet using the Fortmatic library. The `portis` connector is used to connect to the user's wallet using the Portis library. The `walletlink` connector is used to connect to the user's wallet using the WalletLink library. The `torus` connector is used to connect to the user's wallet using the Torus library. The `binance` connector is used to connect to the user's wallet using the Binance Chain library.
-
-These connectors can be used in the larger project to allow users to interact with the blockchain using their wallets. For example, the `injected` connector can be used to connect to the user's MetaMask wallet, while the `walletconnect` connector can be used to connect to the user's Trust Wallet. The `fortmatic` connector can be used to connect to the user's Fortmatic wallet, while the `portis` connector can be used to connect to the user's Portis wallet. The `walletlink` connector can be used to connect to the user's Coinbase Wallet, while the `torus` connector can be used to connect to the user's Torus wallet. The `binance` connector can be used to connect to the user's Binance Chain wallet.
-
-Example usage of the `injected` connector:
-
-```
-import { useWeb3React } from '@web3-react/core';
-import { injected } from './path/to/connectors';
-
-function App() {
- const { activate, active } = useWeb3React();
-
- const connectWallet = () => {
- activate(injected);
- };
-
- return (
- {error ? error.message : "Connect your wallet"}
- )}
-
- {active ? (
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code imports various connectors for different blockchain networks and defines RPC URLs for each network.
-
-2. What is the significance of the `supportedChainIds` array?
-- The `supportedChainIds` array lists the chain IDs that are supported by the `InjectedConnector` and other connectors.
-
-3. Why are some connectors only available for the mainnet?
-- Some connectors, such as `WalletConnectConnector`, `FortmaticConnector`, `PortisConnector`, `WalletLinkConnector`, and `TorusConnector`, are only available for the mainnet because they are designed for use with Ethereum and not other blockchain networks.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/connectors/metaMask.md b/.autodoc/docs/markdown/core/src/connectors/metaMask.md
deleted file mode 100644
index 973150783..000000000
--- a/.autodoc/docs/markdown/core/src/connectors/metaMask.md
+++ /dev/null
@@ -1,51 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/metaMask.ts)
-
-The code above is importing two modules from the '@web3-react' library: 'initializeConnector' and 'MetaMask'. The purpose of this code is to initialize the MetaMask connector for the Web3 React library.
-
-The 'initializeConnector' function is used to create a connector instance for a specific Web3 provider. In this case, it is being used to create a connector for the MetaMask provider. The 'MetaMask' module is a class that provides an implementation of the Web3 provider interface for the MetaMask browser extension.
-
-The code is using the 'initializeConnector' function to create an instance of the 'MetaMask' class and passing in a callback function that will be used to handle any actions that need to be performed by the connector. The resulting instance is then exported as 'metaMask'.
-
-The 'hooks' variable is also being exported, which is an object containing various hooks that can be used to interact with the MetaMask connector. These hooks include 'useEagerConnect', 'useInactiveListener', and 'useMetaMask'.
-
-This code can be used in the larger project to provide a way for users to connect to the Ethereum network using the MetaMask browser extension. For example, if the project has a feature that requires interaction with a smart contract on the Ethereum network, the MetaMask connector can be used to provide the necessary connection.
-
-Here is an example of how this code could be used in a React component:
-
-```
-import { useWeb3React } from '@web3-react/core';
-import { metaMask } from './zoo';
-
-function MyComponent() {
- const { activate, deactivate, active } = useWeb3React();
-
- const connectToMetaMask = async () => {
- await activate(metaMask);
- }
-
- const disconnectFromMetaMask = async () => {
- await deactivate();
- }
-
- return (
- Wallet connected
- ) : ( - - )} -
- {active ? (
-
- ) : (
-
- )}
-
- );
-}
-```
-
-In this example, the 'metaMask' instance created in the 'zoo' file is being passed to the 'activate' function from the 'useWeb3React' hook to connect to the MetaMask provider. The 'deactivate' function can be used to disconnect from the provider. The 'active' variable is used to determine whether the user is currently connected to the provider.
-## Questions:
- 1. What is the purpose of the `initializeConnector` function and how does it work?
-- The `initializeConnector` function is used to initialize a connector for the Web3 React library. It takes in a generic type parameter and a callback function that creates a new instance of the connector. In this case, the generic type is `MetaMask` and the callback function creates a new instance of the `MetaMask` connector with the provided `actions`.
-
-2. What is the `MetaMask` import and how does it relate to the `@web3-react/metamask` package?
-- The `MetaMask` import is a class that represents the MetaMask connector for the Web3 React library. It is imported from the `@web3-react/metamask` package, which provides the implementation for the MetaMask connector.
-
-3. What is the purpose of the `metaMask` and `hooks` variables and how are they used?
-- The `metaMask` variable is an instance of the `MetaMask` connector that has been initialized with the provided `actions`. The `hooks` variable is an object that contains various hooks for interacting with the `metaMask` connector, such as `useEagerConnect` and `useInactiveListener`. These variables can be used to integrate the MetaMask connector into a React application.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/connectors/network.md b/.autodoc/docs/markdown/core/src/connectors/network.md
deleted file mode 100644
index 3bdf25a0c..000000000
--- a/.autodoc/docs/markdown/core/src/connectors/network.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/network.ts)
-
-The code above is responsible for initializing a connector for the Web3 React library, specifically for the Network component. The purpose of this code is to provide a way for the application to connect to different Ethereum networks, such as the mainnet or testnets, and interact with smart contracts and other decentralized applications.
-
-The code imports the necessary modules from the Web3 React library and the configuration file for the different network URLs. It then uses the `initializeConnector` function to create a new instance of the `Network` component, passing in an object with the necessary actions and the URLS configuration. The `Object.keys(URLS).map((chainId) => Number(chainId))` code maps over the keys of the URLS object and converts them to numbers, which are then passed as an array to the `initializeConnector` function.
-
-The resulting `network` object and `hooks` array can then be used in the larger project to interact with the Ethereum networks. For example, the `network` object can be used to get the current network ID, check if the user is connected to the network, and switch between different networks. The `hooks` array provides access to various hooks that can be used to interact with the network, such as `useBlockNumber` to get the current block number or `useEthers` to get access to the Ethereum provider.
-
-Here is an example of how this code might be used in a larger project:
-
-```javascript
-import { network, hooks } from 'zoo'
-
-// check if user is connected to the network
-if (network.active) {
- console.log(`Connected to network ${network.chainId}`)
-}
-
-// switch to a different network
-network.switchTo('ropsten')
-
-// get the current block number
-const blockNumber = hooks.useBlockNumber()
-
-// interact with a smart contract
-const contract = new ethers.Contract(address, abi, provider)
-const result = await contract.someFunction()
-```
-
-Overall, this code provides an essential component for connecting to Ethereum networks and interacting with decentralized applications in the larger project.
-## Questions:
- 1. What is the purpose of the `initializeConnector` function and how does it work?
-- The `initializeConnector` function is used to initialize a connector for a specific network. It takes in a function that creates a new instance of the network class and an array of chain IDs to support.
-
-2. What is the `Network` class and what does it do?
-- The `Network` class is a class from the `@web3-react/network` library that provides a way to connect to a specific Ethereum network. It takes in a set of actions and a URL for the network.
-
-3. What is the `URLS` object and where is it defined?
-- The `URLS` object is a configuration object that contains URLs for different Ethereum networks. It is defined in a file located at `config/chains`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/connectors/url.md b/.autodoc/docs/markdown/core/src/connectors/url.md
deleted file mode 100644
index 8b429c860..000000000
--- a/.autodoc/docs/markdown/core/src/connectors/url.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/url.ts)
-
-The code above is a module that initializes a Web3 connector for the Zoo project. The Web3 connector is a library that allows the project to interact with the Ethereum blockchain.
-
-The code imports two libraries: `@web3-react/core` and `@web3-react/url`. The `@web3-react/core` library provides the core functionality for the Web3 connector, while `@web3-react/url` provides a specific implementation of the connector that uses a URL to connect to the Ethereum network.
-
-The code also imports a configuration file called `config/chains`, which contains a list of URLs for different Ethereum networks.
-
-The `initializeConnector` function is called with two arguments: a generic type `Url` and a callback function that creates a new instance of the `Url` class. The `Url` class is provided by the `@web3-react/url` library and represents a Web3 connector that uses a URL to connect to the Ethereum network.
-
-The callback function takes two arguments: `actions` and `URLS[1][0]`. The `actions` argument is an object that contains methods for interacting with the Ethereum network, such as sending transactions and querying balances. The `URLS[1][0]` argument is a URL string that specifies the Ethereum network to connect to.
-
-The `initializeConnector` function returns an array with two elements: `url` and `hooks`. The `url` element is an instance of the `Url` class that was created by the callback function. The `hooks` element is an object that contains methods for interacting with the `Url` instance.
-
-This module can be used in other parts of the Zoo project to interact with the Ethereum network. For example, the `url` instance can be passed to other Web3 libraries to send transactions or query balances. The `hooks` object can be used to access the methods provided by the `Url` class, such as `useEphemeralKey` and `useAccount`.
-
-Here is an example of how this module might be used in another part of the Zoo project:
-
-```
-import { url } from 'zoo/web3'
-
-const balance = await url.getBalance('0x1234567890123456789012345678901234567890')
-console.log(`Balance: ${balance}`)
-```
-
-In this example, the `url` instance is imported from the `zoo/web3` module and used to query the balance of an Ethereum address. The `getBalance` method is provided by the `Url` class and returns the balance of the specified address. The balance is then logged to the console.
-## Questions:
- 1. What is the purpose of the `initializeConnector` function and how does it work?
-- The `initializeConnector` function is used to initialize a connector for a specific blockchain network. It takes in a generic type parameter and a callback function that creates a new instance of the connector. The resulting array contains the connector instance and a set of hooks for interacting with it.
-
-2. What is the `Url` class and where does it come from?
-- The `Url` class is a connector implementation for connecting to a blockchain network via a URL. It is imported from the `@web3-react/url` package.
-
-3. What is the `URLS` constant and how is it used in this code?
-- The `URLS` constant is a configuration object that contains URLs for various blockchain networks. It is imported from the `config/chains` module and used to provide the URL for the `Url` connector instance created in the callback function passed to `initializeConnector`. In this case, the URL for the second network in the `URLS` array is used.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/connectors/walletConnect.md b/.autodoc/docs/markdown/core/src/connectors/walletConnect.md
deleted file mode 100644
index e716c6c76..000000000
--- a/.autodoc/docs/markdown/core/src/connectors/walletConnect.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/connectors/walletConnect.ts)
-
-The code above is a module that initializes a connector for the WalletConnect wallet using the Web3 React library. The purpose of this code is to provide a way for users to connect their WalletConnect wallet to the zoo project and interact with the Ethereum blockchain.
-
-The code imports the `initializeConnector` function from the `@web3-react/core` library and the `WalletConnect` class from the `@web3-react/walletconnect` library. It also imports the `URLS` object from the `config/chains` file.
-
-The `initializeConnector` function takes two arguments: a function that creates a new instance of the `WalletConnect` class and an array of chain IDs. The function that creates a new instance of the `WalletConnect` class takes an `actions` object and an object with an `rpc` property set to the `URLS` object imported earlier. The `actions` object is used to interact with the Web3 React library and the `rpc` property is used to specify the Ethereum RPC endpoint to use.
-
-The `Object.keys(URLS).map((chainId) => Number(chainId))` expression creates an array of chain IDs by converting the keys of the `URLS` object to numbers.
-
-The `initializeConnector` function returns an array with two elements: the `WalletConnect` instance and an object with hooks that can be used to interact with the `WalletConnect` instance.
-
-This code can be used in the larger zoo project to provide users with a way to connect their WalletConnect wallet to the project and interact with the Ethereum blockchain. For example, the `walletConnect` instance can be used to send transactions or read data from the blockchain. The hooks can be used to subscribe to events or get the current state of the `WalletConnect` instance.
-
-Example usage:
-
-```
-import { walletConnect, hooks } from 'zoo'
-
-// Connect to the WalletConnect wallet
-walletConnect.connect()
-
-// Subscribe to the "accountsChanged" event
-hooks.useWalletConnectAccounts((accounts) => {
- console.log('Accounts changed:', accounts)
-})
-
-// Send a transaction
-const txHash = await walletConnect.sendTransaction({
- to: '0x123...',
- value: '1000000000000000000',
-})
-console.log('Transaction sent:', txHash)
-```
-## Questions:
- 1. What is the purpose of the `initializeConnector` function and how is it used in this code?
- - The `initializeConnector` function is used to create a new instance of the `WalletConnect` class and initialize it with the specified `rpc` URLS. It returns an array containing the `walletConnect` instance and `hooks` object for interacting with the `WalletConnect` instance.
-
-2. What is the `WalletConnect` class and what does it do?
- - The `WalletConnect` class is a class provided by the `@web3-react/walletconnect` package that allows for connecting to a wallet using the WalletConnect protocol. It provides methods for connecting, disconnecting, and interacting with the connected wallet.
-
-3. What is the `URLS` constant and how is it used in this code?
- - The `URLS` constant is an object containing URLs for different blockchain networks. It is used to specify the `rpc` URL when initializing the `WalletConnect` instance. The `Object.keys(URLS).map((chainId) => Number(chainId))` expression is used to extract the chain IDs from the `URLS` object and convert them to numbers, which are then passed to the `initializeConnector` function.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/argent-wallet-detector.md b/.autodoc/docs/markdown/core/src/constants/abis/argent-wallet-detector.md
deleted file mode 100644
index 5f104cf96..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/argent-wallet-detector.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/argent-wallet-detector.ts)
-
-This code exports two constants related to the Argent Wallet Detector. The first constant, `ARGENT_WALLET_DETECTOR_ABI`, imports the ABI (Application Binary Interface) from a JSON file located in the same directory. The ABI is a standardized way of defining the interface for a smart contract on the Ethereum blockchain. In this case, the ABI is for the Argent Wallet Detector contract.
-
-The second constant, `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS`, is a string that represents the Ethereum address of the Argent Wallet Detector contract on the Ethereum mainnet. This address is used to interact with the contract and call its functions.
-
-This code is likely used in other parts of the larger project to interact with the Argent Wallet Detector contract. For example, if the project has a feature that requires detecting whether a given Ethereum address is an Argent wallet, it could use the `ARGENT_WALLET_DETECTOR_ABI` to call the `isWallet(address)` function on the contract at the `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS`.
-
-Here is an example of how this code could be used in a larger project:
-
-```
-import { ARGENT_WALLET_DETECTOR_ABI, ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS } from './zoo/argent-wallet-detector'
-
-const web3 = new Web3(provider)
-
-const argentWalletDetectorContract = new web3.eth.Contract(ARGENT_WALLET_DETECTOR_ABI, ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS)
-
-const isArgentWallet = async (address) => {
- const result = await argentWalletDetectorContract.methods.isWallet(address).call()
- return result
-}
-
-const address = '0x123abc...'
-const isWallet = await isArgentWallet(address)
-console.log(`Is ${address} an Argent wallet? ${isWallet}`)
-```
-
-In this example, the code imports the `ARGENT_WALLET_DETECTOR_ABI` and `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS` constants from the `zoo/argent-wallet-detector` module. It then creates a new instance of the `web3.eth.Contract` class using the ABI and mainnet address. Finally, it defines an `isArgentWallet` function that calls the `isWallet` function on the contract and returns the result. The function is then called with a sample Ethereum address and the result is logged to the console.
-## Questions:
- 1. What is the purpose of the `ARGENT_WALLET_DETECTOR_ABI` import?
- - The `ARGENT_WALLET_DETECTOR_ABI` import is likely used to access the ABI (Application Binary Interface) for the Argent Wallet Detector contract, which defines how to interact with the contract's functions and data.
-
-2. What is the significance of the `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS` constant?
- - The `ARGENT_WALLET_DETECTOR_MAINNET_ADDRESS` constant likely represents the Ethereum mainnet address of the Argent Wallet Detector contract, which is used to interact with the contract on the Ethereum blockchain.
-
-3. How are the exported constants used in the `zoo` project?
- - It is unclear from this code snippet how the exported constants are used in the `zoo` project, but they may be used to interact with the Argent Wallet Detector contract in some way. Further context would be needed to determine their exact usage.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/argent-wallet.md b/.autodoc/docs/markdown/core/src/constants/abis/argent-wallet.md
deleted file mode 100644
index e097442bc..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/argent-wallet.md
+++ /dev/null
@@ -1,62 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/argent-wallet.json)
-
-This code defines two functions, `wc_multiCall` and `isValidSignature`, which are likely part of a larger project involving smart contracts on the Ethereum blockchain.
-
-The `wc_multiCall` function takes in an array of transaction tuples, each containing an address, a uint256 value, and a bytes data field. The function then executes all of these transactions in a single function call, returning an array of bytes containing the results of each transaction. This is a useful optimization for cases where multiple transactions need to be executed in a single block, as it reduces the number of individual function calls and can save on gas costs.
-
-Here is an example of how `wc_multiCall` might be used in a larger project:
-
-```
-// create an array of transaction tuples
-let transactions = [
- {
- to: "0x123abc...",
- value: 100,
- data: "0xabcdef..."
- },
- {
- to: "0x456def...",
- value: 50,
- data: "0x789ghi..."
- }
-]
-
-// call wc_multiCall with the transactions array
-let results = await contract.wc_multiCall(transactions);
-
-// process the results of each transaction
-for (let i = 0; i < results.length; i++) {
- console.log("Transaction " + i + " result: " + results[i]);
-}
-```
-
-The `isValidSignature` function takes in a message hash and a signature, and returns a bytes4 value indicating whether the signature is valid for the given message. This is likely used for authentication purposes, to ensure that only authorized parties can execute certain functions within the smart contract.
-
-Here is an example of how `isValidSignature` might be used in a larger project:
-
-```
-// create a message hash and a signature
-let messageHash = web3.utils.sha3("Hello, world!");
-let signature = "0x123456...";
-
-// call isValidSignature with the message hash and signature
-let isValid = await contract.isValidSignature(messageHash, signature);
-
-// check the result of the signature validation
-if (isValid == "0x1626ba7e") {
- console.log("Signature is valid!");
-} else {
- console.log("Signature is invalid.");
-}
-```
-
-Overall, these functions provide useful functionality for interacting with smart contracts on the Ethereum blockchain, and can be used to optimize transaction execution and ensure secure authentication.
-## Questions:
- 1. What is the purpose of the `wc_multiCall` function?
- - The `wc_multiCall` function takes in an array of transactions and executes them in a batch, returning an array of the results.
-
-2. What is the purpose of the `isValidSignature` function?
- - The `isValidSignature` function takes in a message hash and a signature and returns a bytes4 value indicating whether the signature is valid for the given message.
-
-3. What is the expected input and output format for these functions?
- - Both functions take in specific input parameters and return specific output types as defined in the function definitions. The `wc_multiCall` function takes in an array of tuples containing an address, uint256 value, and bytes data, and returns an array of bytes arrays. The `isValidSignature` function takes in a bytes32 message hash and a bytes signature, and returns a bytes4 value.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/bar.md b/.autodoc/docs/markdown/core/src/constants/abis/bar.md
deleted file mode 100644
index d38c5877a..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/bar.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/bar.json)
-
-The code provided is a Solidity smart contract that defines the interface for an ERC20 token. ERC20 is a standard interface for tokens on the Ethereum blockchain, and this contract defines the functions and events that are required to be implemented for a token to be considered ERC20 compliant.
-
-The contract includes a constructor that takes an address of another ERC20 token called Sushi. The contract also includes functions for getting the name, symbol, and decimals of the token, as well as the total supply and the balance of a particular address. Additionally, there are functions for approving an address to spend a certain amount of tokens on behalf of the caller, transferring tokens from one address to another, and checking the amount of tokens that an address is allowed to spend on behalf of another address.
-
-The contract also includes two functions called `enter` and `leave`. These functions are not part of the ERC20 standard, but are specific to the project that this contract is a part of. It is unclear what these functions do without additional context about the project.
-
-Overall, this contract provides the basic functionality required for an ERC20 token, and can be used as a starting point for creating a new token. Developers can inherit from this contract and implement their own logic for the `enter` and `leave` functions to create a custom token for their project. Here is an example of how this contract can be inherited:
-
-```
-contract MyToken is ERC20Token {
- constructor(address _sushi) ERC20Token(_sushi) {
- // additional constructor logic for MyToken
- }
-
- // additional functions and logic for MyToken
-}
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code defines a contract for a token called "sushi" and includes functions for transferring tokens, checking balances, and managing allowances.
-
-2. What is the significance of the "constructor" function?
-- The constructor function is called when the contract is first deployed and initializes the contract with the address of the "sushi" token.
-
-3. What is the difference between the "transfer" and "transferFrom" functions?
-- The "transfer" function allows a user to transfer tokens from their own account to another user's account, while the "transferFrom" function allows a user to transfer tokens from another user's account if they have been granted permission to do so through the "approve" function.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/chainlink-oracle.md b/.autodoc/docs/markdown/core/src/constants/abis/chainlink-oracle.md
deleted file mode 100644
index 7d38a3577..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/chainlink-oracle.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/chainlink-oracle.json)
-
-The code provided is a Solidity smart contract that defines a set of functions for interacting with a decentralized oracle. Oracles are used in blockchain systems to provide external data to smart contracts. This particular oracle is designed to provide exchange rate data for different currency pairs.
-
-The contract defines six functions, each with a specific purpose. The `getDataParameter` function is a pure function that takes in three parameters: `multiply`, `divide`, and `decimals`. It returns a `bytes` array that can be used as input to the `get` and `peek` functions. The purpose of this function is to generate the input data required for the other functions to retrieve exchange rate data.
-
-The `get` function takes in a `bytes` array as input and returns a boolean value and a uint256 value. The boolean value indicates whether the data was successfully retrieved, while the uint256 value represents the exchange rate data. This function is used to retrieve the latest exchange rate data for a given currency pair.
-
-The `peek` function is similar to the `get` function, but it does not modify the state of the contract. It takes in a `bytes` array as input and returns a boolean value and a uint256 value. The boolean value indicates whether the data is available, while the uint256 value represents the exchange rate data. This function is used to check the availability of exchange rate data without actually retrieving it.
-
-The `peekSpot` function is a view function that takes in a `bytes` array as input and returns a uint256 value representing the exchange rate data. This function is used to retrieve the latest exchange rate data for a given currency pair without modifying the state of the contract.
-
-Finally, the `name` and `symbol` functions are view functions that return the name and symbol of the oracle, respectively. These functions are used to retrieve metadata about the oracle.
-
-Overall, this contract provides a set of functions for retrieving exchange rate data from a decentralized oracle. These functions can be used by other smart contracts in the larger project to obtain external data for various purposes. For example, a smart contract that facilitates cross-border payments may use this oracle to obtain exchange rate data for different currency pairs.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a set of functions for interacting with a smart contract related to financial data.
-
-2. What are the inputs and outputs of the "get" function?
-- The "get" function takes in a byte array called "data" and returns a boolean value and a uint256 value.
-
-3. What is the difference between the "peek" and "peekSpot" functions?
-- The "peek" function returns a boolean value and a uint256 value based on the input byte array, while the "peekSpot" function only returns a uint256 value and does not have a boolean output.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/clone-rewarder.md b/.autodoc/docs/markdown/core/src/constants/abis/clone-rewarder.md
deleted file mode 100644
index 0898fae94..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/clone-rewarder.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/clone-rewarder.json)
-
-The code provided is a Solidity smart contract that is part of the larger project called "zoo". The purpose of this contract is to manage rewards for users who provide liquidity to a MasterChef V2 contract. The contract emits events to log various actions such as initializing the contract, adding a new pool, setting a pool, updating a pool, and transferring ownership.
-
-The contract has several functions that allow users to interact with it. The `init` function is used to initialize the contract with the MasterChef V2 contract address, reward token address, and master LP token address. The `setRewardPerSecond` function is used to set the reward rate per second. The `pendingToken` function is used to calculate the pending reward for a user for a specific pool. The `pendingTokens` function is used to calculate the pending rewards for a user across all pools. The `onSushiReward` function is called by the MasterChef V2 contract to distribute rewards to users who provide liquidity.
-
-The contract also has several view functions that allow users to retrieve information about the contract state. The `poolInfo` function is used to retrieve information about a specific pool such as the accumulated reward per share and the last reward time. The `rewardPerSecond` function is used to retrieve the current reward rate per second. The `rewardRates` function is used to retrieve an array of reward rates for each pool. The `rewardToken` function is used to retrieve the reward token address.
-
-Overall, this contract plays an important role in managing rewards for users who provide liquidity to the MasterChef V2 contract. It allows users to calculate their pending rewards and provides functions for setting and retrieving reward rates and other contract state information.
-
-Example usage:
-
-```
-// Initialize the contract with the MasterChef V2 contract address, reward token address, and master LP token address
-await zoo.init(masterChefV2Address, rewardTokenAddress, masterLPTokenAddress);
-
-// Set the reward rate per second
-await zoo.setRewardPerSecond(100);
-
-// Retrieve the current reward rate per second
-const rewardRate = await zoo.rewardPerSecond();
-
-// Calculate the pending reward for a user for a specific pool
-const pendingReward = await zoo.pendingToken(poolId, userAddress);
-
-// Calculate the pending rewards for a user across all pools
-const { rewardTokens, rewardAmounts } = await zoo.pendingTokens(poolId, userAddress);
-
-// Retrieve information about a specific pool
-const { accToken1PerShare, lastRewardTime } = await zoo.poolInfo(poolId);
-
-// Retrieve the reward token address
-const rewardTokenAddress = await zoo.rewardToken();
-```
-## Questions:
- 1. What is the purpose of this code and how does it relate to the overall zoo project?
-- This code is a smart contract for a reward system in the zoo project. It allows users to earn rewards by staking tokens in a pool.
-
-2. What are the inputs and outputs of the `onSushiReward` function?
-- The inputs of the `onSushiReward` function are the pool ID, user address, recipient address, token ID, and LP token amount. There are no outputs.
-
-3. What events are emitted by this contract and what information do they provide?
-- This contract emits several events including `LogInit`, `LogOnReward`, `LogPoolAddition`, `LogRewardPerSecond`, `LogSetPool`, `LogUpdatePool`, and `OwnershipTransferred`. These events provide information such as the reward token, owner address, reward per second, LP token address, user address, pool ID, amount staked, and more.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/complex-rewarder.md b/.autodoc/docs/markdown/core/src/constants/abis/complex-rewarder.md
deleted file mode 100644
index 5becfebf3..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/complex-rewarder.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/complex-rewarder.json)
-
-This code defines a set of constructors, events, and functions for a smart contract that manages a pool of rewards for a decentralized finance (DeFi) project called "zoo". The contract is designed to distribute rewards to users who provide liquidity to the project's pools.
-
-The constructor takes three inputs: the address of the reward token, the amount of reward tokens to be distributed per second, and the address of the project's MasterChef V2 contract. The contract emits an event called "LogInit" when it is initialized.
-
-The contract also defines several events that are emitted during various operations. These events include "LogOnReward", which is emitted when a user receives a reward, "LogPoolAddition", which is emitted when a new pool is added to the contract, and "LogUpdatePool", which is emitted when a pool is updated.
-
-The contract also defines several functions that can be called by users or other contracts. These functions include "add", which adds a new pool to the contract, "massUpdatePools", which updates all pools in the contract, and "set", which updates the allocation points for a specific pool.
-
-One important function is "onSushiReward", which is called by the MasterChef V2 contract when a user earns a reward. This function updates the user's reward debt and emits a "LogOnReward" event.
-
-Another important function is "updatePool", which updates the reward distribution for a specific pool. This function calculates the amount of rewards that have been earned since the last update and distributes them to the pool's users.
-
-Overall, this contract is an essential component of the zoo DeFi project, as it manages the distribution of rewards to users who provide liquidity to the project's pools. Developers working on the project can use this contract to add new pools, update reward allocations, and distribute rewards to users.
-## Questions:
- 1. What is the purpose of this code and what does it do?
- - This code defines a contract for a reward distribution system for a decentralized application. It includes functions for adding and updating reward pools, distributing rewards to users, and transferring ownership of the contract.
-2. What types of inputs and outputs are used in this code?
- - The inputs and outputs include various data types such as addresses, uint256 integers, and structs. The functions have different state mutability, with some being nonpayable and others being view-only.
-3. What events are emitted by this code and what information do they provide?
- - This code emits several events, including LogInit, LogOnReward, LogPoolAddition, LogRewardPerSecond, LogSetPool, LogUpdatePool, and OwnershipTransferred. These events provide information about the initialization of the contract, reward distribution to users, addition and modification of reward pools, and ownership transfers.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/compound-oracle.md b/.autodoc/docs/markdown/core/src/constants/abis/compound-oracle.md
deleted file mode 100644
index 98efe1c2b..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/compound-oracle.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/compound-oracle.json)
-
-This code defines three functions that are part of a smart contract. The smart contract is likely part of a larger project related to a decentralized finance (DeFi) application.
-
-The first function, `get`, takes in a single parameter of type `bytes` and returns two values: a boolean and a uint256. The purpose of this function is not clear from the code alone, but it likely retrieves some data from the smart contract or blockchain. The function is marked as `nonpayable`, meaning it cannot receive any ether (the cryptocurrency used on the Ethereum blockchain) as part of its execution.
-
-The second function, `getDataParameter`, takes in three parameters: two strings and a uint256. It returns a single value of type `bytes`. This function is marked as `pure`, meaning it does not read from or modify the state of the smart contract. Instead, it likely performs some computation on the input parameters and returns a byte array that can be used as input to another function in the smart contract.
-
-The third function, `peek`, takes in a single parameter of type `bytes` and returns two values: a boolean and a uint256. This function is marked as `view`, meaning it does not modify the state of the smart contract. Instead, it likely reads some data from the smart contract or blockchain and returns it to the caller.
-
-Overall, these functions are likely part of a larger set of functions that make up a DeFi application. The `get` and `peek` functions likely retrieve data from the smart contract or blockchain, while the `getDataParameter` function likely performs some computation on input parameters to prepare them for use in other functions. These functions may be used by other parts of the DeFi application to perform various tasks, such as calculating interest rates or executing trades.
-
-Example usage of these functions would depend on the specific implementation of the DeFi application. However, a possible example usage of the `getDataParameter` function could be as follows:
-
-```
-// prepare input parameters
-string memory collateralSymbol = "ETH";
-string memory assetSymbol = "DAI";
-uint256 division = 100;
-
-// call getDataParameter function
-bytes memory data = getDataParameter(collateralSymbol, assetSymbol, division);
-
-// use returned data as input to another function
-bool success = someOtherFunction(data);
-```
-## Questions:
- 1. What is the purpose of this code and how is it used within the zoo project?
- Answer: This code defines three functions with inputs, outputs, and state mutability. It is likely used as part of the smart contract functionality within the zoo project.
-
-2. What is the difference between the state mutability of the `get` and `peek` functions?
- Answer: The `get` function is nonpayable, meaning it cannot receive Ether as part of its execution, while the `peek` function is view, meaning it does not modify the state of the contract.
-
-3. What is the purpose of the `getDataParameter` function and what are its inputs and outputs?
- Answer: The `getDataParameter` function takes in three inputs (two strings and a uint256) and returns a bytes output. Its purpose is not clear from this code alone, but it is likely used to generate data for another function or contract within the zoo project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/cvx-rewarder.md b/.autodoc/docs/markdown/core/src/constants/abis/cvx-rewarder.md
deleted file mode 100644
index 5220b38bc..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/cvx-rewarder.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/cvx-rewarder.json)
-
-The code provided is a Solidity smart contract for a staking pool that allows users to stake a specific token and earn rewards in another token. The contract is part of a larger project called "zoo" and is designed to be used in a decentralized finance (DeFi) ecosystem.
-
-The constructor function takes in several parameters, including the staking token, reward token, reward manager, and two different MasterChef contracts. The chefPid parameter is used to identify the specific pool in the MasterChef contract that this staking pool is associated with.
-
-The contract emits several events, including RewardAdded, RewardPaid, Staked, and Withdrawn, which are used to track rewards and staking activity.
-
-The contract includes several functions for interacting with the staking pool. The addExtraReward function allows the reward manager to add additional rewards to the pool. The balanceOf function returns the balance of the staking token for a specific user. The earned function returns the amount of rewards earned by a specific user. The getReward function allows a user to claim their rewards. The stake function allows a user to stake a specific amount of the staking token. The withdraw function allows a user to withdraw their staked tokens and claim their rewards.
-
-The contract also includes functions for interacting with the associated MasterChef contracts. The onSushiReward function is called by the SushiSwap MasterChef contract when rewards are distributed, and it updates the user's balance in the staking pool. The pendingTokens function returns the pending rewards for a specific user in both the staking token and reward token.
-
-Overall, this contract provides a way for users to earn rewards by staking a specific token and is designed to be used in a larger DeFi ecosystem.
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code appears to be a smart contract for a staking and reward system, likely for a decentralized finance (DeFi) platform. It allows users to stake a certain token and receive rewards in another token, with the rewards being distributed based on a set rate and duration.
-
-2. What external contracts or systems does this code interact with?
-- This code interacts with several external contracts and systems, including the staking token, reward token, reward manager, SushiSwap MasterChef contract, and Convex Finance MasterChef contract. It also appears to have functions for adding and clearing extra rewards.
-
-3. What events and functions are available for developers to use in this code?
-- Developers can use several events and functions in this code, including events for when rewards are added or paid out, and functions for staking, withdrawing, and claiming rewards. There are also functions for getting information about the current rewards and reward rate, as well as interacting with the external contracts and systems mentioned above.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/eip-2612.md b/.autodoc/docs/markdown/core/src/constants/abis/eip-2612.md
deleted file mode 100644
index e27117dd0..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/eip-2612.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/eip-2612.json)
-
-This code defines two functions as part of a larger project called zoo. The first function, called "nonces", is a view function that takes in an address as an input and returns a uint256 value. This function is marked as constant, meaning it does not modify the state of the contract, and is therefore free to execute without requiring any gas fees. The purpose of this function is not clear from the code alone, but it likely serves as a way to retrieve a nonce value associated with a particular address.
-
-The second function, called "DOMAIN_SEPARATOR", is also a view function that takes no inputs and returns a bytes32 value. Like the first function, it is marked as constant and does not modify the state of the contract. The purpose of this function is also not clear from the code alone, but it likely serves as a way to retrieve a domain separator value associated with the contract.
-
-Overall, these functions appear to be part of a larger smart contract that is used to manage some aspect of the zoo project. Without more context, it is difficult to say exactly how these functions fit into the larger picture. However, it is clear that they are designed to be read-only functions that do not modify the state of the contract, and can therefore be executed without requiring any gas fees.
-
-Here is an example of how the "nonces" function might be used in a larger project:
-
-```
-// Assume we have a web3 instance and a contract instance called "zooContract"
-
-const ownerAddress = "0x1234567890123456789012345678901234567890";
-
-zooContract.methods.nonces(ownerAddress).call((err, result) => {
- if (err) {
- console.error(err);
- } else {
- console.log(`Nonce for ${ownerAddress}: ${result}`);
- }
-});
-```
-
-This code would retrieve the nonce value associated with the given owner address by calling the "nonces" function on the zooContract instance. The result would be logged to the console.
-## Questions:
- 1. What is the purpose of this code and how is it used in the zoo project?
- This code defines two functions, `nonces` and `DOMAIN_SEPARATOR`, which are likely used for some kind of authentication or security feature within the zoo project.
-
-2. What is the expected input and output for the `nonces` function?
- The `nonces` function takes in a single input parameter, `owner`, which is of type `address`. It returns a single output parameter of type `uint256`.
-
-3. What is the purpose of the `DOMAIN_SEPARATOR` function and how is it used?
- The `DOMAIN_SEPARATOR` function likely generates a unique identifier for the zoo project, which can be used for various security and authentication purposes. It does not take any input parameters and returns a single output parameter of type `bytes32`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/ens-registrar.md b/.autodoc/docs/markdown/core/src/constants/abis/ens-registrar.md
deleted file mode 100644
index 021bc48ff..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/ens-registrar.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/ens-registrar.json)
-
-The code provided is a Solidity contract that interacts with the Ethereum Name Service (ENS). ENS is a decentralized domain name system built on the Ethereum blockchain that allows users to register human-readable domain names and associate them with Ethereum addresses, smart contracts, and other resources.
-
-The contract contains several functions that allow users to manage ENS records, including setting and retrieving ownership, resolver, and time-to-live (TTL) information for a given ENS node. The contract also includes functions for setting and checking operator approval, which allows an operator to manage ENS records on behalf of the owner.
-
-One important function in the contract is `setRecord`, which allows a user to set the owner, resolver, and TTL for a given ENS node. This function takes four arguments: the ENS node, the new owner address, the new resolver address, and the new TTL value. Once called, the function updates the ENS record for the specified node with the new information.
-
-Another important function is `setSubnodeOwner`, which allows a user to set the owner of a subdomain of a given ENS node. This function takes three arguments: the ENS node, the subdomain label, and the new owner address. The function returns the new ENS node for the subdomain.
-
-Overall, this contract provides a set of tools for managing ENS records within a larger project. Developers can use this contract to build applications that interact with ENS, such as decentralized domain name registrars or decentralized content distribution networks.
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code is related to the Ethereum Name Service (ENS) and provides functions for managing ownership and resolution of domain names on the Ethereum blockchain.
-
-2. What events are emitted by this code and what information do they provide?
-- This code emits several events including ApprovalForAll, NewOwner, NewResolver, NewTTL, and Transfer. These events provide information about changes in ownership, resolution, and approval status for domain names on the Ethereum blockchain.
-
-3. What are some of the key functions provided by this code and what do they do?
-- This code provides functions for setting and getting ownership, resolution, and time-to-live (TTL) information for domain names on the Ethereum blockchain. It also provides a function for setting approval status for a given operator.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/erc20.md b/.autodoc/docs/markdown/core/src/constants/abis/erc20.md
deleted file mode 100644
index 5abb52d87..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/erc20.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/erc20.json)
-
-This code defines a set of functions and events for a smart contract that implements a standard token on the Ethereum blockchain. The token is identified by a name and a symbol, and has a fixed number of decimal places. The total supply of the token is also defined.
-
-The functions defined in this code allow users to interact with the token. The `balanceOf` function returns the balance of a given address. The `transfer` function allows a user to transfer tokens to another address. The `approve` function allows a user to grant permission to another address to spend tokens on their behalf. The `allowance` function returns the amount of tokens that an approved address is allowed to spend. The `transferFrom` function allows an approved address to spend tokens on behalf of another address.
-
-The events defined in this code allow users to track token transfers and approvals. The `Transfer` event is emitted whenever tokens are transferred from one address to another. The `Approval` event is emitted whenever an address is approved to spend tokens on behalf of another address.
-
-This code can be used as a starting point for creating a custom token on the Ethereum blockchain. Developers can modify the code to define the specific parameters of their token, such as the name, symbol, and total supply. They can also add additional functions and events to customize the behavior of the token.
-
-Here is an example of how the `balanceOf` function can be used in a larger project:
-
-```
-const tokenAddress = '0x123456789abcdef'; // replace with actual token address
-const userAddress = '0x987654321fedcba'; // replace with actual user address
-
-const tokenContract = new web3.eth.Contract(tokenAbi, tokenAddress);
-
-tokenContract.methods.balanceOf(userAddress).call((err, balance) => {
- if (err) {
- console.error(err);
- } else {
- console.log(`User has a balance of ${balance} tokens`);
- }
-});
-```
-
-This code creates a new instance of the token contract using the ABI (Application Binary Interface) and address of the deployed contract. It then calls the `balanceOf` function with the user's address as an argument, and logs the user's token balance to the console.
-## Questions:
- 1. What is the purpose of this code and what does it do?
- This code defines a set of functions and events for a smart contract related to a token. It includes functions for transferring tokens, approving transfers, checking balances, and more.
-
-2. What is the significance of the "payable" and "stateMutability" properties in the function definitions?
- The "payable" property indicates whether the function can receive Ether as part of a transaction, while the "stateMutability" property indicates whether the function changes the state of the contract (e.g. by modifying storage variables) and whether it requires any gas to execute.
-
-3. What is the purpose of the "Approval" and "Transfer" events?
- The "Approval" event is emitted when a token holder approves a transfer of tokens to another address, while the "Transfer" event is emitted when tokens are transferred from one address to another. These events can be used to track the movement of tokens and trigger external actions based on those movements.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/erc20_bytes32.md b/.autodoc/docs/markdown/core/src/constants/abis/erc20_bytes32.md
deleted file mode 100644
index 612c9a1c8..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/erc20_bytes32.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/erc20_bytes32.json)
-
-This code represents a smart contract on the Ethereum blockchain. The contract has two functions: `name` and `symbol`. These functions are marked as constant, meaning they do not modify the state of the contract and are free to execute.
-
-The `name` function returns a bytes32 value representing the name of the contract. The `symbol` function returns a bytes32 value representing the symbol of the contract.
-
-This code is likely part of a larger project that involves creating and managing tokens on the Ethereum blockchain. The `name` and `symbol` functions are commonly used in token contracts to provide basic information about the token. For example, a token contract for a fictional zoo might have a name of "ZooToken" and a symbol of "ZOO".
-
-To interact with this contract, a user would need to use a tool such as Remix or Truffle to deploy the contract to the Ethereum network. Once deployed, the user could then call the `name` and `symbol` functions to retrieve the corresponding values.
-
-Example usage in Solidity code:
-
-```
-contract MyToken {
- function name() public view returns (bytes32) {
- return "ZooToken";
- }
-
- function symbol() public view returns (bytes32) {
- return "ZOO";
- }
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines two functions `name` and `symbol` with their respective inputs and outputs.
-
-2. What is the data type of the inputs and outputs for the `name` and `symbol` functions?
-- Both functions have an input and output of type `bytes32`.
-
-3. What is the stateMutability of the `name` and `symbol` functions?
-- Both functions have a stateMutability of `view`, meaning they do not modify the state of the contract and can be called without sending a transaction.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/factory.md b/.autodoc/docs/markdown/core/src/constants/abis/factory.md
deleted file mode 100644
index 1cf7417bd..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/factory.md
+++ /dev/null
@@ -1,27 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/factory.json)
-
-The code provided is a Solidity smart contract that defines a set of functions and events for creating and managing pairs of tokens on a decentralized exchange. The contract is part of a larger project called "zoo" and is likely used in conjunction with other contracts to create a fully functional decentralized exchange.
-
-The contract has a constructor function that takes an address parameter and sets it as the "feeToSetter" variable. This variable is used to determine who has the authority to set the fee charged for trading on the exchange. The contract also defines an event called "PairCreated" that is emitted whenever a new token pair is created on the exchange.
-
-The contract has several functions for managing pairs of tokens on the exchange. The "createPair" function takes two token addresses as parameters and creates a new pair of tokens on the exchange. The "getPair" function takes two token addresses as parameters and returns the address of the corresponding token pair on the exchange. The "allPairs" function returns an array of all token pairs on the exchange, and the "allPairsLength" function returns the length of the array.
-
-The contract also has functions for managing the fee charged for trading on the exchange. The "feeTo" function returns the address of the account that receives the trading fee, and the "setFeeTo" function sets the address of the account that receives the trading fee. The "setFeeToSetter" function sets the address of the account that has the authority to set the trading fee. Finally, the "setMigrator" function sets the address of a contract that can be used to migrate liquidity from other exchanges to this one.
-
-Overall, this contract provides the basic functionality for creating and managing pairs of tokens on a decentralized exchange. It can be used in conjunction with other contracts to create a fully functional decentralized exchange. Here is an example of how the "createPair" function might be used:
-
-```
-// create a new pair of tokens on the exchange
-address tokenA = 0x1234567890123456789012345678901234567890;
-address tokenB = 0x0987654321098765432109876543210987654321;
-address pair = ZooExchange.createPair(tokenA, tokenB);
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a smart contract for creating and managing pairs of tokens on a decentralized exchange.
-
-2. What events can trigger the "PairCreated" event?
-- The "PairCreated" event is triggered when a new pair of tokens is created using the "createPair" function.
-
-3. What is the difference between the "feeTo" and "feeToSetter" functions?
-- The "feeTo" function returns the address that receives the trading fees, while the "feeToSetter" function returns the address that has permission to update the fee recipient address.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/faucet.md b/.autodoc/docs/markdown/core/src/constants/abis/faucet.md
deleted file mode 100644
index 6fb27bcbc..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/faucet.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/faucet.json)
-
-The code provided is a single function called `drip`. It is written in Solidity, a programming language used for creating smart contracts on the Ethereum blockchain.
-
-The function has no input parameters and no output values. It is marked as `nonpayable`, meaning it cannot receive any Ether (the cryptocurrency used on the Ethereum network) as part of its execution.
-
-Without any context or additional information, it is difficult to determine the exact purpose of this function within the larger project. However, based on its name and the fact that it does not accept any input parameters, it is possible that this function is intended to perform a simple action or trigger an event.
-
-For example, it could be used to simulate the sound of water dripping in an exhibit within the zoo project. The function could be called periodically to emit a sound or trigger a visual effect, creating a more immersive experience for users interacting with the project.
-
-Here is an example of how the `drip` function could be called within a larger Solidity contract:
-
-```
-contract ZooExhibit {
- function simulateDrip() public {
- drip();
- }
-}
-```
-
-In this example, the `simulateDrip` function is part of a larger contract representing an exhibit within the zoo project. When called, it simply invokes the `drip` function to simulate the sound of water dripping within the exhibit.
-
-Overall, while the `drip` function is relatively simple and does not provide much functionality on its own, it could be a useful component within a larger project like zoo. By providing a way to trigger simple actions or events, it can help create a more engaging and interactive experience for users.
-## Questions:
- 1. What is the purpose of the `drip` function?
- - The `drip` function does not have any inputs or outputs and is nonpayable, so it likely performs some internal state change or action within the contract.
-
-2. Is this the entire code for the `zoo` project or just a small portion?
- - It is unclear from this code snippet whether this is the entire code for the `zoo` project or just a small portion. More context is needed to determine the scope of the project.
-
-3. What programming language is this code written in?
- - It is not specified in the code snippet what programming language this code is written in. More information is needed to determine the language used.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/limit-order-helper.md b/.autodoc/docs/markdown/core/src/constants/abis/limit-order-helper.md
deleted file mode 100644
index 7998285bc..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/limit-order-helper.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/limit-order-helper.json)
-
-The code provided is a Solidity smart contract that is part of the larger project called "zoo". The contract contains three functions, a constructor, a view function, and a payable function.
-
-The constructor function takes in a single parameter, `_bentoBox`, which is of type `contract IBentoBox`. This function is non-payable, meaning it cannot receive any ether, and is only called once during the deployment of the contract. The purpose of this function is to initialize the `bentoBox` variable with the `_bentoBox` parameter.
-
-The view function is named `bentoBox` and returns a single output of type `contract IBentoBox`. This function is used to retrieve the value of the `bentoBox` variable. The `view` modifier indicates that this function does not modify the state of the contract and is free to execute without any gas cost.
-
-The third function is named `depositAndApprove` and is a payable function. It takes in six parameters, `user`, `masterContract`, `approved`, `v`, `r`, and `s`. The `user` parameter is of type `address` and represents the address of the user who is depositing funds. The `masterContract` parameter is also of type `address` and represents the address of the contract that will receive the funds. The `approved` parameter is of type `bool` and indicates whether the user has approved the transfer of funds. The `v`, `r`, and `s` parameters are used for signature verification.
-
-The purpose of this function is to deposit funds into the `bentoBox` contract and approve the transfer of funds. The function first transfers the funds from the user's address to the `bentoBox` contract. It then calls the `approve` function on the `bentoBox` contract to approve the transfer of funds to the `masterContract`. Finally, it calls the `deposit` function on the `bentoBox` contract to deposit the funds into the `masterContract`.
-
-Here is an example of how this function can be used:
-
-```
-// Assume the contract has already been deployed and initialized with a valid IBentoBox contract address
-function depositFunds() public payable {
- address user = msg.sender;
- address masterContract = 0x1234567890123456789012345678901234567890;
- bool approved = true;
- uint8 v = 27;
- bytes32 r = 0x1234567890123456789012345678901234567890123456789012345678901234;
- bytes32 s = 0x5678901234567890123456789012345678901234567890123456789012345678;
-
- ZooContract zc = ZooContract(address);
- zc.depositAndApprove{value: msg.value}(user, masterContract, approved, v, r, s);
-}
-```
-
-In this example, the `depositFunds` function is called by a user who wants to deposit funds into the `masterContract`. The function creates a new instance of the `ZooContract` contract and calls the `depositAndApprove` function with the necessary parameters. The `value` keyword is used to send the amount of ether sent with the transaction to the `depositAndApprove` function.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a smart contract with a constructor and two functions for interacting with a BentoBox contract.
-
-2. What is the IBentoBox contract and how is it used in this code?
-- The IBentoBox contract is an interface that defines the functions that can be called on a BentoBox contract. It is used as an input parameter in the constructor and an output parameter in the bentoBox function.
-
-3. What does the depositAndApprove function do and how is it used?
-- The depositAndApprove function takes in several parameters including a user address, a master contract address, and a boolean value for approval. It allows a user to deposit funds into the BentoBox contract and approve a master contract to use those funds. It requires a signature from the user to verify the transaction.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/maker.md b/.autodoc/docs/markdown/core/src/constants/abis/maker.md
deleted file mode 100644
index 82f3c1d3b..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/maker.md
+++ /dev/null
@@ -1,25 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/maker.json)
-
-This code defines a smart contract that is part of the larger zoo project. The contract is responsible for converting tokens between different bridges. The contract has a constructor that takes in four addresses: `_factory`, `_bar`, `_sushi`, and `_weth`. These addresses are used to initialize the contract's state variables.
-
-The contract has several functions that can be used to interact with it. The `bridgeFor` function takes in a token address and returns the address of the bridge associated with that token. The `convert` function takes in two token addresses and converts them using the associated bridge. The `convertMultiple` function takes in arrays of token addresses and converts them using their associated bridges.
-
-The contract also has functions for setting and transferring ownership. The `setBridge` function can be used to set the bridge associated with a particular token. The `transferOwnership` function can be used to transfer ownership of the contract to a new owner.
-
-The contract emits several events, including `LogBridgeSet`, `LogConvert`, and `OwnershipTransferred`. These events can be used to track changes to the contract's state.
-
-Overall, this contract plays an important role in the larger zoo project by facilitating the conversion of tokens between different bridges. Developers working on the project can use this contract to ensure that tokens can be easily converted and transferred between different parts of the project. Here is an example of how the `convert` function might be used:
-
-```
-// Convert 1 ETH to 100 USDT
-zoo.convert(ethAddress, usdtAddress, {value: 1 ether, gas: 500000});
-```
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- Without additional context, it is unclear what the purpose of this code is and what problem it solves. It appears to be a smart contract with functions related to converting tokens and setting bridges, but more information is needed to fully understand its purpose.
-
-2. What is the significance of the different event types and what information do they provide?
-- The code includes three different event types: LogBridgeSet, LogConvert, and OwnershipTransferred. It is unclear what information each event provides and why they are important. Additional documentation or comments within the code would be helpful in understanding their significance.
-
-3. What are the expected inputs and outputs for the convert and convertMultiple functions?
-- The convert and convertMultiple functions are both nonpayable and do not have any outputs listed. It is unclear what the expected inputs are for these functions and what actions they perform. Additional documentation or comments within the code would be helpful in understanding their functionality.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/masterchef.md b/.autodoc/docs/markdown/core/src/constants/abis/masterchef.md
deleted file mode 100644
index 96521d035..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/masterchef.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/masterchef.json)
-
-This code defines a smart contract for a decentralized application (dApp) called "zoo". The contract is written in Solidity, a programming language used for creating smart contracts on the Ethereum blockchain.
-
-The contract contains several functions that allow users to interact with the dApp. These functions include adding and updating pools, depositing and withdrawing tokens, and migrating pools.
-
-The constructor function initializes the contract with several parameters, including the SushiToken contract address, the developer address, the SUSHI token reward per block, the starting block number, and the bonus end block number.
-
-The add function allows users to add a new pool to the dApp. A pool is a collection of liquidity provider (LP) tokens that users can deposit to earn rewards in SUSHI tokens. The function takes in the allocation point, which determines the percentage of the total SUSHI rewards that the pool will receive, the LP token contract address, and a boolean value that determines whether to update all pools before adding the new one.
-
-The deposit function allows users to deposit LP tokens into a specific pool to earn SUSHI rewards. The function takes in the pool ID and the amount of LP tokens to deposit.
-
-The withdraw function allows users to withdraw their deposited LP tokens from a specific pool. The function takes in the pool ID and the amount of LP tokens to withdraw.
-
-The migrate function allows users to migrate their LP tokens from one pool to another. The function takes in the pool ID and the migrator contract address.
-
-Overall, this contract provides the functionality for users to participate in a decentralized exchange (DEX) by providing liquidity and earning rewards in SUSHI tokens. The contract can be used in conjunction with other contracts and interfaces to create a fully functional dApp.
-
-Example usage:
-
-To add a new pool to the dApp:
-```
-zoo.add(100, lpTokenAddress, true);
-```
-
-To deposit LP tokens into a pool:
-```
-zoo.deposit(poolID, lpTokenAmount);
-```
-
-To withdraw LP tokens from a pool:
-```
-zoo.withdraw(poolID, lpTokenAmount);
-```
-
-To migrate LP tokens from one pool to another:
-```
-zoo.migrate(poolID, migratorAddress);
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code is a smart contract for a project called zoo. It appears to be a staking contract for a token called SushiToken, allowing users to deposit and withdraw tokens to earn rewards.
-
-2. What is the significance of the "BONUS_MULTIPLIER" variable?
-- The "BONUS_MULTIPLIER" variable is a constant that determines the bonus multiplier for rewards during a certain period of time. It is likely used in conjunction with the start and end block variables to determine the reward rate for stakers.
-
-3. What is the purpose of the "migrate" function and what does it do?
-- The "migrate" function allows for the migration of staked tokens from one contract to another using a "Migrator" contract. This could be useful if the staking contract is being upgraded or replaced with a new contract.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/minichef-v2.md b/.autodoc/docs/markdown/core/src/constants/abis/minichef-v2.md
deleted file mode 100644
index 1b93ef66d..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/minichef-v2.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/minichef-v2.json)
-
-The code provided is a Solidity smart contract for a project called MiniChefV2, which appears to be a decentralized application (dApp) for yield farming on the Ethereum blockchain. Yield farming is a process where users can earn rewards by providing liquidity to a decentralized exchange (DEX) or liquidity pool (LP) on a blockchain network.
-
-The MiniChefV2 contract has several functions that allow users to deposit, withdraw, and harvest rewards from various liquidity pools. The contract also has functions for adding and updating pools, setting reward allocations, and setting the rate at which rewards are distributed.
-
-The contract has a constructor function that takes an input of a contract address for the SUSHI token, which is the native token of the SushiSwap DEX. The contract has several events that are emitted when certain actions are taken, such as depositing, withdrawing, or updating a pool.
-
-One notable function is the `batch` function, which allows users to execute multiple function calls in a single transaction. This can be useful for optimizing gas costs and reducing the number of transactions needed to perform certain actions.
-
-Overall, the MiniChefV2 contract appears to be a key component of the larger project, providing the functionality for users to participate in yield farming on the SushiSwap DEX. Developers building on top of the MiniChefV2 contract can leverage its functions to create their own dApps or integrate it into existing projects.
-
-Example usage of the `deposit` function:
-```
-function deposit(uint256 pid, uint256 amount, address to) public {
- PoolInfo storage pool = poolInfo[pid];
- UserInfo storage user = userInfo[pid][msg.sender];
- updatePool(pid);
- if (user.amount > 0) {
- uint256 pending = user.amount.mul(pool.accSushiPerShare).div(1e12).sub(user.rewardDebt);
- if (pending > 0) {
- safeSushiTransfer(msg.sender, pending);
- }
- }
- if (amount > 0) {
- pool.lpToken.safeTransferFrom(address(msg.sender), address(this), amount);
- user.amount = user.amount.add(amount);
- }
- user.rewardDebt = user.amount.mul(pool.accSushiPerShare).div(1e12);
- emit Deposit(msg.sender, pid, amount, to);
-}
-```
-The `deposit` function takes three inputs: `pid` is the ID of the pool to deposit into, `amount` is the amount of liquidity to deposit, and `to` is the address to send any rewards to. The function first updates the pool information, then calculates any pending rewards for the user and transfers them to their address. If the user is depositing liquidity, the function transfers the tokens to the contract and updates the user's amount. Finally, the user's reward debt is updated and an event is emitted.
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code is a smart contract for a project called zoo that allows users to deposit and withdraw tokens in exchange for rewards. It solves the problem of incentivizing users to provide liquidity to the platform.
-
-2. What are the different events that can be emitted by this contract and what do they represent?
-- There are several events that can be emitted by this contract, including Deposit, EmergencyWithdraw, Harvest, LogPoolAddition, LogSetPool, LogSushiPerSecond, LogUpdatePool, OwnershipTransferred, and Withdraw. These events represent different actions taken by users or the contract, such as depositing tokens, withdrawing tokens, or updating pool information.
-
-3. What are some of the functions available in this contract and what do they do?
-- Some of the functions available in this contract include add, deposit, emergencyWithdraw, harvest, set, and withdraw. These functions allow users to add liquidity to the platform, deposit and withdraw tokens, and update pool information. The emergencyWithdraw function can be used in case of an emergency, while the harvest function allows users to claim their rewards. The set function can be used to update pool information, such as the allocation points and rewarder.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/multicall2.md b/.autodoc/docs/markdown/core/src/constants/abis/multicall2.md
deleted file mode 100644
index 790026535..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/multicall2.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/multicall2.json)
-
-The code provided is a Solidity smart contract that contains a set of functions for interacting with the Ethereum blockchain. The contract is called Multicall2 and is designed to allow multiple function calls to be made in a single transaction, reducing gas costs and improving efficiency.
-
-The main functions in the contract are `aggregate` and `blockAndAggregate`. Both functions take a list of function calls as input and return the results of those calls. The difference between the two functions is that `blockAndAggregate` also returns the block number and block hash of the current block.
-
-The `aggregate` function returns the block number and an array of return data for each function call. The `blockAndAggregate` function returns the block number, block hash, and an array of return data for each function call.
-
-Other functions in the contract provide information about the current block, such as `getBlockNumber`, `getBlockHash`, `getCurrentBlockTimestamp`, and `getCurrentBlockGasLimit`. There is also a function called `getEthBalance` that returns the balance of an Ethereum address.
-
-The `tryAggregate` and `tryBlockAndAggregate` functions are similar to `aggregate` and `blockAndAggregate`, but they return a boolean indicating whether all function calls were successful, along with the return data.
-
-Overall, the Multicall2 contract provides a convenient way to make multiple function calls in a single transaction, reducing gas costs and improving efficiency. It can be used in a variety of Ethereum applications, such as decentralized exchanges, where multiple function calls may need to be made in a single transaction.
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code provides a set of functions for querying various information about the Ethereum blockchain, such as block number, block hash, current timestamp, and ETH balance of an address. It also provides functions for aggregating multiple calls into a single call, which can be useful for reducing gas costs.
-
-2. What is the expected input and output format for the `aggregate` and `blockAndAggregate` functions?
-- Both functions take in an array of `Multicall2.Call` tuples, where each tuple contains an Ethereum address and a byte array representing the data to be called on that address. The `aggregate` function returns the block number and an array of return data for each call, while the `blockAndAggregate` function returns the block number, block hash, and an array of `Multicall2.Result` tuples, where each tuple contains a boolean indicating success and the return data for a single call.
-
-3. What is the difference between the `tryAggregate` and `tryBlockAndAggregate` functions compared to the regular `aggregate` and `blockAndAggregate` functions?
-- The `tryAggregate` and `tryBlockAndAggregate` functions have an additional boolean input parameter `requireSuccess`, which determines whether the function should revert if any of the calls fail. The regular functions will still return data for all calls, even if some of them fail.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/pegged-oracle.md b/.autodoc/docs/markdown/core/src/constants/abis/pegged-oracle.md
deleted file mode 100644
index 46e0454cd..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/pegged-oracle.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/pegged-oracle.json)
-
-This code defines three functions that are part of a smart contract. The smart contract is likely part of a larger project related to a zoo, but the specifics of that project are not relevant to understanding this code.
-
-The first function, `get`, takes a single input parameter of type `bytes` and returns two values: a boolean and a uint256. The function is marked as `nonpayable`, meaning it cannot receive payments. The purpose of this function is not clear from the code alone, as the input parameter is not described and the function body is not provided.
-
-The second function, `getDataParameter`, takes a single input parameter of type `uint256` and returns a value of type `bytes`. The function is marked as `pure`, meaning it does not read or modify the state of the contract. The purpose of this function is also not clear from the code alone, as the input parameter is not described and the function body is not provided.
-
-The third function, `peek`, takes a single input parameter of type `bytes` and returns two values: a boolean and a uint256. The function is marked as `view`, meaning it does not modify the state of the contract. The purpose of this function is not clear from the code alone, as the input parameter is not described and the function body is not provided.
-
-Without additional context or documentation, it is difficult to determine how these functions may be used in the larger project. However, it is clear that they are intended to interact with the contract's state in some way, and that they are designed to be called from outside the contract (since they are marked as `nonpayable`, `pure`, and `view`).
-
-Here is an example of how the `get` function might be called from a JavaScript program using the web3.js library:
-
-```
-const contract = new web3.eth.Contract(contractAbi, contractAddress);
-
-const data = "0x12345678"; // replace with actual data
-contract.methods.get(data).call((err, result) => {
- if (err) {
- console.error(err);
- } else {
- const success = result[0];
- const value = result[1];
- console.log(`Success: ${success}, Value: ${value}`);
- }
-});
-```
-
-This code assumes that `contractAbi` is an array containing the ABI (Application Binary Interface) of the smart contract, and that `contractAddress` is a string containing the address of the deployed contract. The `get` function is called with the `data` parameter, and the result is logged to the console.
-## Questions:
- 1. What is the purpose of this code and how does it fit into the overall functionality of the zoo project?
-- This code defines three functions with inputs, outputs, and state mutability. It is likely part of a larger smart contract system that interacts with a blockchain.
-
-2. What do the inputs and outputs of each function represent?
-- The inputs and outputs are defined using the "internalType" and "type" fields. For example, the "get" function takes in a bytes parameter named "data" and returns a bool and uint256 value.
-
-3. What is the difference between the state mutability types "nonpayable", "pure", and "view"?
-- "nonpayable" means that the function does not modify the state of the contract and does not accept Ether. "pure" means that the function does not read or modify the state of the contract. "view" means that the function does not modify the state of the contract but can read from it.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/router-slim.md b/.autodoc/docs/markdown/core/src/constants/abis/router-slim.md
deleted file mode 100644
index ba21a8ed9..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/router-slim.md
+++ /dev/null
@@ -1,51 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/router-slim.json)
-
-This code defines two functions that can be used to swap tokens on a decentralized exchange. The first function, `swapExactETHForTokens`, allows the user to swap a specified amount of Ether for a specified amount of a different token. The function takes in four parameters: `amountOutMin`, which is the minimum amount of the token the user wants to receive; `path`, which is an array of addresses representing the path of tokens to trade, starting with Ether and ending with the desired token; `to`, which is the address that will receive the traded tokens; and `deadline`, which is the timestamp by which the transaction must be included in a block. The function is marked as `payable`, meaning that the user must send Ether along with the transaction in order to execute the swap.
-
-The second function, `swapExactTokensForTokens`, allows the user to swap a specified amount of one token for a specified amount of another token. The function takes in five parameters: `amountIn`, which is the amount of the input token to trade; `amountOutMin`, which is the minimum amount of the output token the user wants to receive; `path`, which is an array of addresses representing the path of tokens to trade, starting with the input token and ending with the output token; `to`, which is the address that will receive the traded tokens; and `deadline`, which is the timestamp by which the transaction must be included in a block. The function is marked as `nonpayable`, meaning that the user does not need to send any Ether along with the transaction in order to execute the swap.
-
-These functions are likely part of a larger project that involves interacting with a decentralized exchange, such as Uniswap or SushiSwap. They could be used by developers building applications that allow users to easily swap tokens without having to manually go through the exchange interface. For example, a decentralized finance (DeFi) application could use these functions to allow users to swap between different tokens within the app. Here is an example of how the `swapExactETHForTokens` function could be called:
-
-```
-const { ethers } = require('ethers');
-
-const provider = new ethers.providers.JsonRpcProvider();
-const signer = provider.getSigner();
-
-const contractAddress = '0x1234567890123456789012345678901234567890';
-const contractABI = [
- {
- "inputs": [
- { "internalType": "uint256", "name": "amountOutMin", "type": "uint256" },
- { "internalType": "address[]", "name": "path", "type": "address[]" },
- { "internalType": "address", "name": "to", "type": "address" },
- { "internalType": "uint256", "name": "deadline", "type": "uint256" }
- ],
- "name": "swapExactETHForTokens",
- "outputs": [{ "internalType": "uint256[]", "name": "amounts", "type": "uint256[]" }],
- "stateMutability": "payable",
- "type": "function"
- }
-];
-
-const contract = new ethers.Contract(contractAddress, contractABI, signer);
-
-const amountOutMin = ethers.utils.parseUnits('100', 'ether');
-const path = ['0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2', '0x6b175474e89094c44da98b954eedeac495271d0f'];
-const to = '0x1234567890123456789012345678901234567890';
-const deadline = Math.floor(Date.now() / 1000) + 60 * 10; // 10 minutes from now
-
-const tx = await contract.swapExactETHForTokens(amountOutMin, path, to, deadline, { value: ethers.utils.parseUnits('1', 'ether') });
-await tx.wait();
-```
-
-This code uses the `ethers` library to interact with the contract at `contractAddress` using the `contractABI`. It then calls the `swapExactETHForTokens` function with the specified parameters, including sending 1 Ether along with the transaction. The function returns an array of `amounts`, which represents the actual amounts of tokens received in the trade. The code waits for the transaction to be confirmed on the blockchain before continuing.
-## Questions:
- 1. What is the purpose of this code?
- - This code defines two functions for swapping tokens on a blockchain network.
-
-2. What are the inputs and outputs of the `swapExactETHForTokens` function?
- - The inputs are `amountOutMin` (minimum amount of output tokens), `path` (array of token addresses), `to` (recipient address), and `deadline` (timestamp). The output is an array of `amounts` of output tokens.
-
-3. What is the difference in `stateMutability` between the two functions?
- - The `swapExactETHForTokens` function is `payable`, meaning it can receive Ether along with its function call. The `swapExactTokensForTokens` function is `nonpayable`, meaning it cannot receive Ether.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/sushi.md b/.autodoc/docs/markdown/core/src/constants/abis/sushi.md
deleted file mode 100644
index ce280e2d7..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/sushi.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/sushi.json)
-
-The code provided is a JSON representation of the ABI (Application Binary Interface) for a smart contract. The ABI is a specification that defines how to interact with a smart contract, including the functions and events it exposes, their inputs and outputs, and their types.
-
-The smart contract represented by this ABI is likely a token contract, as it includes functions such as `balanceOf`, `transfer`, `approve`, `allowance`, and `totalSupply`. The contract also includes functions related to delegation of voting power, such as `delegate`, `getCurrentVotes`, and `getPriorVotes`.
-
-The ABI also includes several events that can be emitted by the contract, such as `Transfer`, `Approval`, `DelegateChanged`, `DelegateVotesChanged`, and `OwnershipTransferred`. These events can be used to track changes to the state of the contract and trigger actions in other parts of the system.
-
-Developers can use this ABI to interact with the smart contract from their applications or other smart contracts. For example, a developer could use the `balanceOf` function to check the balance of a particular address, or the `transfer` function to send tokens from one address to another. The delegation functions could be used to allow token holders to delegate their voting power to other addresses.
-
-Here is an example of how a developer might use this ABI to interact with the contract using the web3.js library:
-
-```
-const Web3 = require('web3');
-const abi = [ ... ]; // insert the ABI provided in the question
-const contractAddress = '0x123...'; // insert the address of the deployed contract
-
-const web3 = new Web3('https://mainnet.infura.io/v3/your-project-id');
-const contract = new web3.eth.Contract(abi, contractAddress);
-
-// Get the balance of an address
-const balance = await contract.methods.balanceOf('0x456...').call();
-console.log(`Balance: ${balance}`);
-
-// Transfer tokens to another address
-const tx = await contract.methods.transfer('0x789...', 100).send({ from: '0x456...' });
-console.log(`Transaction hash: ${tx.transactionHash}`);
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code defines a smart contract with various functions related to token management, including transferring tokens, checking balances, and delegating voting power.
-
-2. What is the significance of the different event types defined in this code?
-- The different event types defined in this code allow for tracking and logging of important actions within the smart contract, such as approvals, transfers, and changes in ownership or voting power.
-
-3. How does the delegation functionality work in this smart contract?
-- The delegation functionality allows token holders to delegate their voting power to another address, which can then be used to vote on proposals within the associated governance system. This is done through the `delegate` and `delegateBySig` functions, and is tracked through the `DelegateChanged` and `DelegateVotesChanged` events.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/swaave.md b/.autodoc/docs/markdown/core/src/constants/abis/swaave.md
deleted file mode 100644
index 42dc2848b..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/swaave.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/swaave.json)
-
-The code provided is a Solidity smart contract that defines a set of functions related to saving and swapping tokens. The contract has a constructor function that takes no inputs and does not return anything.
-
-The first function defined in the contract is called `saave`, which takes a single input parameter of type `uint256` and does not return anything. This function is used to save a certain amount of tokens to the contract. The second function, `saaveTo`, takes two input parameters: an address and a `uint256` amount, and saves the specified amount of tokens to the specified address. Both of these functions have a `stateMutability` of `nonpayable`, meaning they cannot receive any Ether along with the function call.
-
-The next two functions, `swaave` and `swaaveTo`, are used to swap Ether for tokens. `swaave` is a payable function, meaning it can receive Ether along with the function call, and it does not take any input parameters. `swaaveTo` takes two input parameters: an address and a `uint256` amount, and swaps the specified amount of Ether for tokens and sends them to the specified address. Both of these functions have a `stateMutability` of `payable`.
-
-The remaining four functions are used to withdraw tokens or Ether from the contract. `unSaave` and `unSaaveTo` are used to withdraw saved tokens, while `unSwaave` and `unSwaaveTo` are used to withdraw swapped Ether. All four of these functions take the same input parameters as their corresponding `saave` and `swaave` functions, respectively. All four of these functions have a `stateMutability` of `nonpayable`.
-
-Finally, the contract includes a fallback function with a `stateMutability` of `payable`. This function is executed when the contract receives Ether without a specific function call.
-
-Overall, this contract provides a basic set of functions for saving and swapping tokens and Ether. It can be used as a building block for more complex financial applications within the larger project. Here is an example of how the `saave` function could be called:
-
-```
-contract MyContract {
- address public zooContractAddress = 0x1234567890123456789012345678901234567890;
-
- function saveTokens(uint256 amount) public {
- IZoo(zooContractAddress).saave(amount);
- }
-}
-
-interface IZoo {
- function saave(uint256 amount) external;
-}
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
- Answer: Without additional context, it is unclear what this code does or what its purpose is. It appears to define a set of functions related to saving and swapping tokens, but more information is needed to understand its full functionality.
-
-2. What is the expected input and output for each function?
- Answer: The code provides some information about the input and output for each function, such as the data types and names of the parameters and whether the function is payable or nonpayable. However, it does not provide information about the expected behavior or output of each function, which would be helpful for understanding how to use them.
-
-3. Are there any dependencies or external contracts required for this code to function properly?
- Answer: It is unclear from this code whether there are any dependencies or external contracts required for it to function properly. Additional context or documentation would be needed to determine if there are any other contracts or libraries that need to be deployed or imported for this code to work as intended.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/timelock.md b/.autodoc/docs/markdown/core/src/constants/abis/timelock.md
deleted file mode 100644
index 72a509586..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/timelock.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/timelock.json)
-
-The code provided is a Solidity smart contract that defines a governance mechanism for a decentralized application. The contract is designed to allow for the execution of transactions on behalf of the application, with the ability to cancel or delay transactions if necessary.
-
-The contract includes a constructor function that takes two arguments: an address for the contract's administrator and a delay time for transaction execution. The contract also includes several events that are emitted when certain actions are taken, such as canceling or executing a transaction.
-
-The contract includes several functions that allow for the management of the governance mechanism. The `acceptAdmin` function allows the administrator to accept their role, while the `setPendingAdmin` function allows for the appointment of a new administrator. The `setDelay` function allows for the adjustment of the delay time for transaction execution.
-
-The `queueTransaction` function allows for the queuing of a transaction, which can then be executed after the specified delay time has passed. The `executeTransaction` function allows for the execution of a transaction that has been queued, while the `cancelTransaction` function allows for the cancellation of a queued transaction.
-
-Overall, this contract provides a governance mechanism for a decentralized application that allows for the execution of transactions while providing the ability to cancel or delay transactions if necessary. This contract can be used as a building block for larger decentralized applications that require a governance mechanism.
-
-Example usage of this contract could include a decentralized exchange that uses this contract to manage the execution of trades. The contract could be used to ensure that trades are executed in a timely manner while also providing the ability to cancel or delay trades if necessary.
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code implements a contract that allows for delayed execution of transactions, with the ability to cancel or queue transactions. It solves the problem of needing to execute transactions at a specific time or after a certain delay.
-
-2. What are the different events defined in this code and when are they emitted?
-- There are four different events defined in this code: `CancelTransaction`, `ExecuteTransaction`, `NewAdmin`, and `NewDelay`. They are emitted when a transaction is cancelled, executed, the admin address is changed, and the delay time is changed, respectively.
-
-3. What are the different functions defined in this code and what do they do?
-- There are several functions defined in this code, including a constructor, getters for various constants, and functions for accepting a new admin, cancelling and executing transactions, setting the delay time, and setting a pending admin. The `receive` function is also defined to allow the contract to receive payments.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/uniswap-v2-factory.md b/.autodoc/docs/markdown/core/src/constants/abis/uniswap-v2-factory.md
deleted file mode 100644
index 3584619e7..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/uniswap-v2-factory.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/uniswap-v2-factory.json)
-
-The code provided is a Solidity smart contract that defines a set of functions and events for creating and managing pairs of tokens on a decentralized exchange. The contract is part of the larger project called "zoo" and is likely used in conjunction with other contracts to create a fully functional exchange.
-
-The contract has a constructor function that takes an address parameter and sets it as the "_feeToSetter" variable. This variable is used to determine who has the ability to set the fee charged for trades on the exchange. The contract also defines an event called "PairCreated" that is emitted whenever a new token pair is created on the exchange.
-
-The contract has several functions that allow for the creation and management of token pairs. The "createPair" function takes two token addresses as parameters and creates a new pair on the exchange. The function returns the address of the newly created pair. The "getPair" function takes two token addresses as parameters and returns the address of the corresponding pair on the exchange.
-
-The contract also has functions for setting the fee charged for trades on the exchange. The "setFeeTo" function takes an address parameter and sets it as the "_feeTo" variable, which determines where the fees collected from trades are sent. The "setFeeToSetter" function takes an address parameter and sets it as the "_feeToSetter" variable, which determines who has the ability to set the fee charged for trades on the exchange.
-
-Overall, this contract provides the basic functionality for creating and managing token pairs on a decentralized exchange. It is likely used in conjunction with other contracts to create a fully functional exchange. Below is an example of how the "createPair" function could be used:
-
-```
-// Assume we have two token addresses: tokenA and tokenB
-// We want to create a new pair on the exchange
-address newPair = zoo.createPair(tokenA, tokenB);
-```
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code defines a smart contract that creates and manages pairs of tokens on a decentralized exchange. It allows users to trade tokens without the need for a centralized exchange.
-
-2. What events can trigger the `PairCreated` event and what information does it provide?
-- The `PairCreated` event is triggered when a new token pair is created on the exchange. It provides the addresses of the two tokens being paired, the address of the new pair contract, and a uint256 value.
-
-3. What is the difference between the `feeTo` and `feeToSetter` functions?
-- The `feeTo` function returns the address that receives the trading fees collected by the exchange. The `feeToSetter` function returns the address that has permission to update the `feeTo` address.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/uniswap-v2-router-02-no-eth.md b/.autodoc/docs/markdown/core/src/constants/abis/uniswap-v2-router-02-no-eth.md
deleted file mode 100644
index ed225ef3e..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/uniswap-v2-router-02-no-eth.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/uniswap-v2-router-02-no-eth.json)
-
-The code provided is a JSON representation of a smart contract's ABI (Application Binary Interface). ABI is a standard interface for smart contracts that defines how to interact with them. It specifies the methods and their inputs and outputs that can be called by external parties.
-
-The smart contract in question is related to a decentralized exchange (DEX) and provides various functions for swapping and adding/removing liquidity from a liquidity pool. The functions include `swapExactTokensForTokens`, `swapExactTokensForTokensSupportingFeeOnTransferTokens`, `swapTokensForExactTokens`, `addLiquidity`, `removeLiquidity`, and `removeLiquidityWithPermit`.
-
-The `swapExactTokensForTokens` function allows users to swap a specific amount of one token for another token. The `swapExactTokensForTokensSupportingFeeOnTransferTokens` function is similar but supports tokens that have a transfer fee. The `swapTokensForExactTokens` function allows users to specify the amount of the output token they want to receive and the maximum amount of the input token they are willing to spend.
-
-The `addLiquidity` function allows users to add liquidity to a pool by depositing equal values of two tokens. The `removeLiquidity` function allows users to remove liquidity from a pool and receive back the deposited tokens. The `removeLiquidityWithPermit` function is similar but allows users to approve the transaction using a permit instead of a signature.
-
-Overall, this smart contract provides the necessary functions for users to interact with a liquidity pool on a DEX. Developers can use this contract as a building block to create their own DEX or integrate it into an existing project. For example, a developer could use this contract to create a DEX that supports swapping between specific tokens or to add liquidity to a pool for a specific token pair.
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code provides a set of functions for swapping and adding/removing liquidity between different tokens on a decentralized exchange. It allows users to trade tokens without the need for a centralized exchange.
-
-2. What is the expected input and output format for each function?
-- Each function has a specific set of input parameters and output values, which are defined in the code. The input parameters include addresses of tokens, amounts of tokens, and deadlines for transactions. The output values include amounts of tokens and liquidity.
-
-3. Are there any security measures in place to prevent unauthorized access or malicious attacks?
-- The code includes a function for removing liquidity with a permit, which requires a digital signature from the token owner. This helps to prevent unauthorized access to the tokens. However, it is unclear if there are any other security measures in place to prevent malicious attacks.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/weth.md b/.autodoc/docs/markdown/core/src/constants/abis/weth.md
deleted file mode 100644
index 450c124b5..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/weth.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/weth.json)
-
-The code provided is a JSON representation of the ABI (Application Binary Interface) for a smart contract. The ABI is a specification that defines how to interact with a smart contract, including the functions it exposes, their inputs and outputs, and the events it emits.
-
-The smart contract appears to be a basic implementation of an ERC20 token, a standard interface for fungible tokens on the Ethereum blockchain. The functions defined in the ABI include `transfer`, `transferFrom`, `approve`, `balanceOf`, `allowance`, `totalSupply`, `name`, `symbol`, `decimals`, `deposit`, and `withdraw`. These functions are commonly used in ERC20 tokens to manage the transfer of tokens between addresses, check balances, and approve transfers on behalf of other addresses.
-
-The smart contract also emits four events: `Approval`, `Transfer`, `Deposit`, and `Withdrawal`. These events are used to notify external applications of state changes within the smart contract. For example, the `Transfer` event is emitted whenever tokens are transferred between addresses, allowing external applications to track the movement of tokens.
-
-Overall, this code provides a blueprint for how to interact with the smart contract and use its functions to manage ERC20 tokens. Developers can use this ABI to build applications that interact with the smart contract, such as wallets, exchanges, and other token management tools.
-
-Here is an example of how to use the `transfer` function to send tokens from one address to another:
-
-```
-const contract = new web3.eth.Contract(abi, contractAddress);
-
-// Transfer 100 tokens from sender to recipient
-contract.methods.transfer(recipientAddress, 100).send({from: senderAddress})
- .then((receipt) => {
- console.log('Tokens transferred successfully');
- })
- .catch((error) => {
- console.error('Error transferring tokens:', error);
- });
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
- - This code defines a set of functions and events for a smart contract that manages a token. It allows for transfers, approvals, and balance checks of the token.
-2. What is the significance of the "payable" and "stateMutability" properties in the function definitions?
- - The "payable" property indicates whether a function can receive Ether as part of a transaction, while the "stateMutability" property indicates whether a function changes the state of the contract or only reads from it.
-3. What is the purpose of the events defined in this code?
- - The events are used to notify external systems when certain actions occur within the contract, such as when a transfer or approval is made, or when Ether is deposited or withdrawn.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/abis/zenko.md b/.autodoc/docs/markdown/core/src/constants/abis/zenko.md
deleted file mode 100644
index e2af76d2a..000000000
--- a/.autodoc/docs/markdown/core/src/constants/abis/zenko.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/abis/zenko.json)
-
-This code defines a set of functions that facilitate the conversion of various types of assets in and out of the BentoBox smart contract. The BentoBox is a smart contract that acts as a shared pool of assets for other smart contracts to use. The functions in this code allow for the conversion of assets to and from the BentoBox, as well as to and from other types of assets such as Compound cTokens and Kashi margin tokens.
-
-The `exchangeRateStoredInternal` function takes a Compound cToken address as input and returns the current exchange rate between the cToken and its underlying asset. This function is used to calculate the underlying asset value of a given cToken balance.
-
-The `fromBento` function takes an ERC20 token address and a share amount as input and returns the corresponding amount of the token. This function is used to convert BentoBox shares back into their underlying asset.
-
-The `fromCtoken` function takes a Compound cToken address and a cToken amount as input and returns the corresponding amount of the underlying asset. This function is used to convert cTokens back into their underlying asset.
-
-The `fromKashi` function takes a Kashi margin token address and a margin token amount as input and returns the corresponding share amount. This function is used to convert Kashi margin tokens back into their underlying asset.
-
-The `toBento` function takes an ERC20 token address and an amount as input and returns the corresponding share amount. This function is used to convert an asset into BentoBox shares.
-
-The `toCtoken` function takes a Compound cToken address and an underlying asset amount as input and returns the corresponding cToken amount. This function is used to convert an underlying asset into cTokens.
-
-The `toKashi` function takes a Kashi margin token address and an underlying asset amount as input and returns the corresponding fraction of the margin token. This function is used to convert an underlying asset into Kashi margin tokens.
-
-Overall, these functions provide a convenient way for other smart contracts to interact with the BentoBox and other asset types in a standardized way. For example, a lending protocol could use these functions to convert assets into BentoBox shares and then use those shares to provide liquidity to other protocols.
-## Questions:
- 1. What is the purpose of this code file?
-- This code file contains functions related to exchanging tokens between different protocols such as Compound and Kashi.
-
-2. What are the input and output types for each function?
-- Each function has a different set of input and output types, which are specified in the "inputs" and "outputs" fields of each function object.
-
-3. Are there any other dependencies or requirements for using these functions?
-- It is unclear from this code file whether there are any other dependencies or requirements for using these functions, such as the need for specific versions of smart contracts or external libraries.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/addresses.md b/.autodoc/docs/markdown/core/src/constants/addresses.md
deleted file mode 100644
index 69501e91c..000000000
--- a/.autodoc/docs/markdown/core/src/constants/addresses.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/addresses.ts)
-
-This code defines a JavaScript object called `addresses` that contains six key-value pairs. Each key represents a specific cryptocurrency exchange and each value represents the address of a smart contract on that exchange's blockchain. The exchanges and their corresponding smart contract addresses are as follows:
-
-- LBTC_Eth: "0x526903Ee6118de6737D11b37f82fC7f69B13685D"
-- LBTC_Lux: "0x8c07F93A76213c0BE738ded6110403b6d0ceE286"
-- LETH_Eth: "0xAA3AE951A7925F25aE8Ad65b052a76Bd8f052598"
-- LETH_Lux: "0x41e51eFcdA08fDFB84f4b1caa4b7f03c67FA431b"
-- Teleport_Eth: "0x60D9B4552b67792D4E65B4D3e27de0EfbCd219bA"
-- Teleport_Lux: "0x69baCe12fCf05CdbAd519b5B2fd5037383811A89"
-
-This code is likely used in the larger project to facilitate transactions between different cryptocurrencies on different exchanges. By storing the smart contract addresses in this object, the project can easily reference them when needed without having to hardcode them into the code. For example, if the project needs to execute a transaction on the LBTC_Eth exchange, it can simply reference `addresses.LBTC_Eth` instead of hardcoding the address into the code.
-
-Here is an example of how this code might be used in the larger project:
-
-```
-import addresses from 'zoo';
-
-const lbtcEthAddress = addresses.LBTC_Eth;
-const teleportLuxAddress = addresses.Teleport_Lux;
-
-// Use the addresses to execute a transaction on the LBTC_Eth exchange
-// or the Teleport_Lux exchange
-```
-## Questions:
- 1. What is the purpose of this code?
- - This code exports an object containing addresses for various token pairs on different networks.
-
-2. What do the keys in the `addresses` object represent?
- - The keys represent the token pair and the network they are on, with the format `TOKEN1_TOKEN2: "NETWORK"`.
-
-3. Are these addresses static or dynamic?
- - It's unclear from this code alone whether these addresses are static or dynamically generated at runtime.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/chainIds.md b/.autodoc/docs/markdown/core/src/constants/chainIds.md
deleted file mode 100644
index b52caf711..000000000
--- a/.autodoc/docs/markdown/core/src/constants/chainIds.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/chainIds.ts)
-
-The code above defines an enum called `ChainId` which represents the different blockchain networks that the project can interact with. The purpose of this code is to provide a way for the project to easily switch between different networks without having to hardcode the network IDs throughout the codebase.
-
-The `ChainId` enum contains several network IDs, including `MAINNET`, `RINKEBY`, `GÖRLI`, `BSC`, and `BSC_TESTNET`. These IDs correspond to the Ethereum mainnet, Rinkeby testnet, Göerli testnet, Binance Smart Chain mainnet, and Binance Smart Chain testnet, respectively.
-
-By using this enum, the project can easily switch between different networks by simply changing the value of a single variable. For example, if the project needs to interact with the Rinkeby testnet, it can set the `chainId` variable to `ChainId.RINKEBY`. This makes the code more modular and easier to maintain.
-
-Here's an example of how this enum might be used in the larger project:
-
-```typescript
-import { ChainId } from 'zoo';
-
-const chainId = ChainId.RINKEBY;
-
-// Use the chainId variable throughout the project to interact with the Rinkeby testnet
-```
-
-Overall, the `ChainId` enum provides a simple and flexible way for the project to interact with different blockchain networks.
-## Questions:
- 1. What is the purpose of this code and how is it used in the zoo project?
- This code defines an enum called ChainId that lists the different chain IDs for various networks. It is likely used in the zoo project to specify which network to interact with when making transactions or retrieving data.
-
-2. Why are the HARDHAT chain IDs commented out?
- It is unclear from the code why the HARDHAT chain IDs are commented out. It is possible that they are not currently being used in the project or were added for testing purposes only.
-
-3. Are there any other chain IDs that could be added to this enum?
- Yes, there are many other chain IDs that could potentially be added to this enum depending on the needs of the project. For example, additional test networks or other public blockchains could be included.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/contracts.md b/.autodoc/docs/markdown/core/src/constants/contracts.md
deleted file mode 100644
index 227bdd364..000000000
--- a/.autodoc/docs/markdown/core/src/constants/contracts.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/contracts.ts)
-
-The code in this file is responsible for retrieving contract information from a JSON file and organizing it into a usable format. The JSON file is imported at the beginning of the file and contains contract information for various networks.
-
-The first part of the code creates two arrays: `networkIds` and `networkNames`. `networkIds` is an array of the keys in the `contractsJSON` object, which correspond to the network IDs. `networkNames` is an array of all the contract names for all networks.
-
-The next part of the code creates an object called `contractsByChainIdAndNetwork`. This object is organized by network ID and contains an object for each network that contains all the contracts for that network. Each contract is represented by an object that contains the contract's bytecode, ABI, and other information.
-
-The final part of the code defines two functions: `getContractsByKey` and two exports: `addresses` and `abis`. `getContractsByKey` takes a string argument `key` and returns an object that contains all the contracts for all networks organized by contract name and the value of the specified `key`. The `addresses` export is the result of calling `getContractsByKey` with the argument `'address'`, and the `abis` export is the result of calling `getContractsByKey` with the argument `'abi'`.
-
-This code is likely used in the larger project to retrieve contract information and use it in other parts of the codebase. For example, the `addresses` and `abis` exports could be used to interact with the contracts on the various networks.
-## Questions:
- 1. What is the purpose of the `contracts.json` file being imported at the beginning of the code?
-- The `contracts.json` file is being imported to provide data for the creation of `contractsByChainIdAndNetwork` object.
-
-2. What is the purpose of the `getContractsByKey` function?
-- The `getContractsByKey` function is used to extract specific data from the `contractsByChainIdAndNetwork` object and return it in a specific format.
-
-3. Why does the code include a comment that says "By the way, this function is terrible. Change it at your own peril"?
-- The comment is a warning to other developers that the `getContractsByKey` function is not well-written and should be refactored with caution.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/index.md b/.autodoc/docs/markdown/core/src/constants/index.md
deleted file mode 100644
index 3c229a923..000000000
--- a/.autodoc/docs/markdown/core/src/constants/index.md
+++ /dev/null
@@ -1,52 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/index.ts)
-
-This code exports various constants and variables that are used throughout the zoo project.
-
-The `POOL_DENY` constant is an array of pool IDs that are not allowed to be used in the project.
-
-The `AVERAGE_BLOCK_TIME_IN_SECS` constant is the average block time in seconds, which is used to avoid ongoing proposals past the displayed time.
-
-The `MERKLE_ROOT` constant is the URL of the merkle root used for vesting.
-
-The `NetworkContextName` constant is the name of the network context.
-
-The `INITIAL_ALLOWED_SLIPPAGE` constant is the default allowed slippage in basis points.
-
-The `DEFAULT_DEADLINE_FROM_NOW` constant is the default deadline from now, denominated in seconds.
-
-The `BIG_INT_SECONDS_IN_WEEK` constant is the number of seconds in a week, represented as a big integer.
-
-The `BIG_INT_ZERO` constant is a big integer with a value of zero.
-
-The `ONE_BIPS` constant is one basis point, represented as a percent.
-
-The `BIPS_BASE` constant is a big integer with a value of 10,000, which is the base for basis points.
-
-The `ALLOWED_PRICE_IMPACT_LOW`, `ALLOWED_PRICE_IMPACT_MEDIUM`, and `ALLOWED_PRICE_IMPACT_HIGH` constants are used for warning states when the price impact exceeds a certain threshold.
-
-The `PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN` constant is the minimum price impact without a fee that requires the user to confirm the transaction.
-
-The `BLOCKED_PRICE_IMPACT_NON_EXPERT` constant is the maximum price impact for non-expert mode.
-
-The `MIN_ETH` constant is the minimum amount of ETH that can be sent.
-
-The `BETTER_TRADE_LESS_HOPS_THRESHOLD` constant is the threshold for better trades with less hops.
-
-The `ZERO_PERCENT` and `ONE_HUNDRED_PERCENT` constants are used to represent zero and one hundred percent, respectively.
-
-The `BLOCKED_ADDRESSES` constant is an array of blocked addresses.
-
-The `ANALYTICS_URL` constant is an object that maps chain IDs to analytics URLs.
-
-The `EIP_1559_ACTIVATION_BLOCK` constant is an object that maps chain IDs to EIP-1559 activation blocks.
-
-These constants and variables are used throughout the zoo project to provide default values and other configuration options. For example, the `INITIAL_ALLOWED_SLIPPAGE` constant is used to set the default allowed slippage for trades, while the `BLOCKED_ADDRESSES` constant is used to block certain addresses from being used in the project.
-## Questions:
- 1. What is the purpose of the `POOL_DENY` array?
-- The `POOL_DENY` array contains a list of pool IDs that are denied for use in the project.
-
-2. What is the significance of the `MERKLE_ROOT` constant?
-- The `MERKLE_ROOT` constant contains the URL for the merkle root used for vesting in the project.
-
-3. What is the purpose of the `ANALYTICS_URL` object?
-- The `ANALYTICS_URL` object contains URLs for analytics pages for different chain IDs used in the project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/ipfs.md b/.autodoc/docs/markdown/core/src/constants/ipfs.md
deleted file mode 100644
index 8979bcb55..000000000
--- a/.autodoc/docs/markdown/core/src/constants/ipfs.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/ipfs.ts)
-
-This code is responsible for exporting a default object that maps different ChainIds to a specific JSON file containing IPFS upload information. The `ChainId` object is imported from the `@zoolabs/zdk` library, which is likely a library specific to the larger zoo project.
-
-The purpose of this code is to provide a way for the zoo project to easily access IPFS upload information for different ChainIds. The `localhostUploads` variable is imported from a separate file located at `../ipfs/localhost.json`, which likely contains the actual IPFS upload information.
-
-The exported object uses the `ChainId` object as keys and the `localhostUploads` variable as values. This means that when the zoo project needs to access IPFS upload information for a specific ChainId, it can simply import this object and access the corresponding value.
-
-For example, if the zoo project needs to access IPFS upload information for the `MAINNET` ChainId, it can import this object and access the `localhostUploads` value for the `MAINNET` key like so:
-
-```
-import ipfsUploads from './path/to/this/file'
-
-const mainnetUploads = ipfsUploads[ChainId.MAINNET]
-```
-
-Overall, this code provides a simple and organized way for the zoo project to access IPFS upload information for different ChainIds.
-## Questions:
- 1. What is the purpose of the `ChainId` import from `@zoolabs/zdk`?
- - The `ChainId` import is likely used to specify different chains for the `localhostUploads` object based on the current chain ID.
-
-2. What is the `localhost.json` file and where is it located?
- - The `localhost.json` file is likely a configuration file containing information about the local IPFS node. Its location is relative to the current file's location in the `../ipfs/` directory.
-
-3. Why is the `localhostUploads` object assigned to multiple chain IDs?
- - The `localhostUploads` object is likely used for testing purposes and is assigned to multiple chain IDs to ensure compatibility across different chains during development and testing.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/moralis.md b/.autodoc/docs/markdown/core/src/constants/moralis.md
deleted file mode 100644
index 3a7e465cc..000000000
--- a/.autodoc/docs/markdown/core/src/constants/moralis.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/moralis.ts)
-
-The code defines a configuration object for the Moralis backend service, which is used in the larger zoo project. The configuration object contains two properties: `applicationID` and `serverURL`. The `applicationID` property is an object that maps different chain IDs to their respective application IDs. The `serverURL` property is an object that maps different chain IDs to their respective server URLs.
-
-The `moralisConfig` function takes a `chainId` parameter and returns an object with the `applicationID` and `serverURL` properties for the specified chain ID. This function is used to retrieve the Moralis configuration for a specific chain ID, which is then used to connect to the Moralis backend service.
-
-For example, if the `chainId` is `97`, the `moralisConfig` function will return an object with the `applicationID` and `serverURL` properties for the `97` chain ID. This object can then be used to connect to the Moralis backend service for the `97` chain.
-
-Here is an example usage of the `moralisConfig` function:
-
-```
-import moralisConfig from 'zoo';
-
-const chainId = 97;
-const config = moralisConfig(chainId);
-
-// Use the config object to connect to the Moralis backend service
-Moralis.initialize(config.applicationID);
-Moralis.serverURL = config.serverURL;
-```
-
-Overall, this code provides a convenient way to manage the Moralis configuration for different chain IDs in the zoo project.
-## Questions:
- 1. What is the purpose of this code?
- - This code defines a configuration object with application IDs and server URLs for different chain IDs, and exports a function that returns the configuration for a given chain ID.
-
-2. What are the possible values for `chainId` parameter in the `moralisConfig` function?
- - The possible values for `chainId` parameter are 1337, 97, and 56, which correspond to different blockchain networks.
-
-3. Why are some lines of code commented out?
- - Some lines of code are commented out to indicate that they are not currently being used, but may be used in the future or in a different context.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/token-lists/sushiswap-v2-unsupported.tokenlist.md b/.autodoc/docs/markdown/core/src/constants/token-lists/sushiswap-v2-unsupported.tokenlist.md
deleted file mode 100644
index d8487c3e9..000000000
--- a/.autodoc/docs/markdown/core/src/constants/token-lists/sushiswap-v2-unsupported.tokenlist.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/token-lists/sushiswap-v2-unsupported.tokenlist.json)
-
-This code represents a JSON file that contains information about a list of unsupported tokens for the SushiSwap V2 platform. The purpose of this file is to provide a reference for developers and users to identify which tokens are not supported by the platform.
-
-The file contains several key pieces of information. The "name" field provides a human-readable name for the list. The "timestamp" field indicates when the list was last updated. The "version" field specifies the version of the list using semantic versioning. The "tags" field can be used to add additional metadata to the list. The "logoURI" field provides a link to an image that can be used to represent the list. The "keywords" field contains an array of keywords that can be used to search for the list. Finally, the "tokens" field contains an array of objects that represent the unsupported tokens.
-
-Each token object contains several fields. The "name" field provides a human-readable name for the token. The "address" field contains the Ethereum address of the token contract. The "symbol" field contains the ticker symbol for the token. The "decimals" field specifies the number of decimal places used by the token. The "chainId" field specifies the Ethereum chain ID on which the token is deployed. Finally, the "logoURI" field provides a link to an image that can be used to represent the token.
-
-Developers and users can use this file to check whether a particular token is supported by the SushiSwap V2 platform. For example, a developer building a trading bot could use this file to filter out unsupported tokens when selecting which tokens to trade. Similarly, a user could use this file to check whether a particular token can be traded on the platform before attempting to make a trade.
-
-Overall, this file serves as an important reference for developers and users of the SushiSwap V2 platform, providing a comprehensive list of unsupported tokens and their associated metadata.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a list of unsupported tokens for SushiSwap V2, including one token called "Gold Tether" with its address, symbol, and logo.
-
-2. What is the format of the logoURI?
- The logoURI is in IPFS format, indicating that the logo image is stored on the InterPlanetary File System.
-
-3. Are there any other tags besides the empty object?
- No, there are no other tags defined in this code.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/constants/types.md b/.autodoc/docs/markdown/core/src/constants/types.md
deleted file mode 100644
index 314f778ba..000000000
--- a/.autodoc/docs/markdown/core/src/constants/types.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/constants/types.ts)
-
-This code defines two related data structures used in the larger zoo project. The first is an enum called `ConnectorNames` which lists the names of different types of connectors that can be used to interact with the zoo platform. These connectors include `Injected`, which refers to a browser extension like MetaMask, `WalletConnect`, which is a mobile wallet integration, and `BSC`, which is a reference to the Binance Smart Chain.
-
-The second data structure is an object called `NETWORK_SYMBOL`. This object maps different `ChainId` values to their corresponding network symbols. `ChainId` is an enum defined in the `@zoolabs/zdk` library, which is imported at the top of the file. The `NETWORK_SYMBOL` object is defined using a TypeScript feature called an index signature, which allows for dynamic keys to be defined on an object. In this case, the keys are `ChainId` values and the values are strings representing the network symbols.
-
-This code is likely used throughout the larger zoo project to provide a centralized way of referring to different types of connectors and network symbols. For example, other parts of the project may use the `ConnectorNames` enum to determine which type of connector to use for a given user. Similarly, the `NETWORK_SYMBOL` object may be used to display network information to users or to perform network-specific operations.
-
-Here is an example of how the `ConnectorNames` enum might be used in the larger project:
-
-```
-import { ConnectorNames } from 'zoo';
-
-const connector = getConnector(); // some function that returns a ConnectorNames value
-if (connector === ConnectorNames.Injected) {
- // use MetaMask or other injected connector
-} else if (connector === ConnectorNames.WalletConnect) {
- // use WalletConnect
-} else if (connector === ConnectorNames.BSC) {
- // use Binance Smart Chain
-} else {
- // handle other cases
-}
-```
-
-And here is an example of how the `NETWORK_SYMBOL` object might be used:
-
-```
-import { ChainId, getNetwork } from '@zoolabs/zdk';
-import { NETWORK_SYMBOL } from 'zoo';
-
-const chainId = getNetwork().chainId; // get the current chain ID from the ZDK library
-const networkSymbol = NETWORK_SYMBOL[chainId]; // look up the network symbol based on the chain ID
-console.log(`Current network symbol: ${networkSymbol}`);
-```
-## Questions:
- 1. What is the purpose of the `ConnectorNames` enum?
- - The `ConnectorNames` enum is used to define the different types of connectors that can be used to connect to the zoo project, including `Injected`, `WalletConnect`, and `BSC`.
-
-2. What is the `NETWORK_SYMBOL` constant used for?
- - The `NETWORK_SYMBOL` constant is used to map the `ChainId` enum values to their corresponding network symbols, such as `ETH` for the `MAINNET` and `RINKEBY` chains.
-
-3. Why are some of the `ChainId` values commented out in the `NETWORK_SYMBOL` constant?
- - Some of the `ChainId` values are commented out in the `NETWORK_SYMBOL` constant because they are not currently being used in the zoo project, but may be used in the future.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/context/GifContext.md b/.autodoc/docs/markdown/core/src/context/GifContext.md
deleted file mode 100644
index 4755caf54..000000000
--- a/.autodoc/docs/markdown/core/src/context/GifContext.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/context/GifContext.tsx)
-
-This code defines a React context and provider for managing a toggle between displaying GIFs and images. The `GifContext` is created using `React.createContext` and initialized with an `initialState` object. The `initialState` object is set to an empty object if the code is running on the server, and otherwise it is set to an object with a `gifMode` property that is either "gif" or "image", depending on whether the `localStorage` has a "gifMode" item.
-
-Two actions are defined: `toggleGif` and `toggleImage`. Both actions set the "gifMode" item in `localStorage` to either "gif" or "image", respectively, and then dispatch an action object with a `type` property of either "TOGGLE_GIFMODE" or "TOGGLE_IMAGEMODE" and a `payload` property of either "gif" or "image".
-
-A reducer function is defined that takes a `state` object and an `action` object as arguments. The reducer function returns a new state object with the `gifMode` property set to the `payload` property of the action object, depending on the `type` property of the action object.
-
-Finally, a `GifProvider` component is defined that takes a `props` object as an argument. The `GifProvider` component uses `React.useReducer` to create a state object and a dispatch function based on the `reducer` function and `initialState`. The `GifProvider` component returns a `GifContext.Provider` component that wraps its children and provides the `state` object and `dispatch` function as values to the `GifContext`.
-
-This code can be used in a larger project to manage a toggle between displaying GIFs and images. Other components in the project can use the `useGif` hook to access the `state` object and `dispatch` function from the `GifContext`. For example, a component that displays a list of images or GIFs could use the `state.gifMode` property to determine whether to display images or GIFs, and could use the `toggleGif` and `toggleImage` actions to update the `gifMode` property.
-## Questions:
- 1. What is the purpose of the `GifProvider` component?
-- The `GifProvider` component is used to provide a context for the `GifContext` and its state and dispatch values to be used by other components.
-
-2. What is the significance of the `localStorage` object in this code?
-- The `localStorage` object is used to store the `gifMode` value, which is retrieved and used as the initial state of the `GifContext` if the code is running in a browser environment.
-
-3. What is the difference between the `toggleGif` and `toggleImage` functions?
-- The `toggleGif` function sets the `gifMode` value in `localStorage` to "gif" and dispatches an action with a payload of "gif", while the `toggleImage` function sets the `gifMode` value in `localStorage` to "image" and dispatches an action with a payload of "image". These functions are used to toggle between two different modes for displaying images or gifs.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/data/events.md b/.autodoc/docs/markdown/core/src/data/events.md
deleted file mode 100644
index 137be073c..000000000
--- a/.autodoc/docs/markdown/core/src/data/events.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/data/events.json)
-
-This code is a JSON file containing information about upcoming events related to the zoo project. The file contains an array of objects, with each object representing a single event. Each event object has several properties, including an ID, title, description, date, time, and location.
-
-The purpose of this code is to provide a centralized location for storing and accessing information about upcoming events related to the zoo project. This information can be used by developers, project managers, and other stakeholders to plan and coordinate their work around these events.
-
-For example, a developer working on a feature related to NFT Animals may want to know when the next Animal Party is scheduled so they can coordinate their work around that event. They can access this information from the JSON file and plan accordingly.
-
-Similarly, a project manager may want to use this information to plan marketing campaigns around these events or to ensure that key stakeholders are available to attend important meetings or presentations.
-
-Overall, this code serves as a valuable resource for anyone involved in the zoo project, providing a centralized location for important event information that can be easily accessed and used to plan and coordinate work.
-## Questions:
- 1. What is the purpose of this code?
- This code contains information about two events related to the ZOO project, including their titles, descriptions, dates, times, and locations.
-
-2. What is the format of the data being used in this code?
- The data is in JSON format, with each event represented as an object containing key-value pairs for its various attributes.
-
-3. What other types of information might be included in the ZOO project?
- It is unclear from this code what other types of information or functionality might be included in the ZOO project beyond events and NFT creatures/eggs. Further exploration of the project's code and documentation would be necessary to determine this.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/data/market.md b/.autodoc/docs/markdown/core/src/data/market.md
deleted file mode 100644
index 92e5de961..000000000
--- a/.autodoc/docs/markdown/core/src/data/market.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/data/market.json)
-
-This code defines a list of dictionaries, each representing an animal in a zoo. Each dictionary contains four key-value pairs: "name", "image", "usdz", and "glb".
-
-The "name" key holds a string representing the name of the animal. The "image" key holds a string representing the file path to an image of the animal. The "usdz" key holds a string representing the file path to a USDZ 3D model of the animal, and the "glb" key holds a string representing the file path to a GLB 3D model of the animal.
-
-This code is likely used in a larger project that involves displaying information about animals in a zoo, including images and 3D models. The list of dictionaries could be used to populate a database or to generate HTML pages dynamically. For example, the following Python code could be used to loop through the list and generate HTML code to display each animal's name, image, and 3D model:
-
-```
-for animal in zoo:
- html = f"{animal['name']}
" - html += f"" - html += f"
SLP Analytics
-This page displays analytics for the SushiSwap Liquidity Pair (SLP).
-Welcome to the dashboard
-This is where you can view all your analytics data.
-
-
- );
-}
-
-export default App;
-```
-
-In this example, the `InfoCard` component is used twice to display different types of information. The first `InfoCard` displays the total sales amount, while the second `InfoCard` displays the number of new users.
-## Questions:
- 1. What is the purpose of the `formatNumber` function imported from the `functions` module?
-- The code does not use the `formatNumber` function, so a smart developer might wonder if it is necessary to import it or if it can be removed.
-
-2. What is the significance of the `InfoCardProps` interface?
-- The `InfoCardProps` interface defines the expected props for the `InfoCard` component, including the `text` and `number` props. A smart developer might wonder if there are any other props that can be passed to this component.
-
-3. What is the purpose of the `bg-dark-900` and `border-dark-700` CSS classes?
-- These CSS classes are used to style the `InfoCard` component, but a smart developer might wonder if they are part of a larger CSS framework or if they are custom classes defined within the project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/analytics/ChartCard.md b/.autodoc/docs/markdown/core/src/features/analytics/ChartCard.md
deleted file mode 100644
index bae99618d..000000000
--- a/.autodoc/docs/markdown/core/src/features/analytics/ChartCard.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/ChartCard.tsx)
-
-The `ChartCard` component is responsible for rendering a card that displays a chart along with some related information. The component takes in several props, including `header`, `subheader`, `figure`, `change`, `chart`, `currentTimespan`, `timespans`, and `setTimespan`.
-
-The `header` and `subheader` props are used to display some text information at the top of the card. The `figure` and `change` props are used to display a numerical value and its change over the past 24 hours, respectively. The `chart` prop is used to display a line graph, and the `currentTimespan`, `timespans`, and `setTimespan` props are used to allow the user to switch between different time spans for the chart.
-
-The component is implemented using JSX and Tailwind CSS classes. The `classNames` function is imported from a `functions` module, and is used to conditionally apply different CSS classes based on the state of the component. The `formatNumber` function is also imported from the `functions` module, and is used to format the `figure` prop as a string with commas and an optional decimal point.
-
-The `ColoredNumber` component is imported from a `ColoredNumber` module, and is used to display the `change` prop as a colored number with a percentage sign. The `LineGraph` component is imported from a `LineGraph` module, and is used to display the `chart` prop as a line graph with a gradient stroke.
-
-Overall, the `ChartCard` component provides a reusable way to display a chart with related information in a visually appealing and interactive way. It can be used in a larger project to display various types of data, such as financial data or user analytics. Here is an example of how the component might be used:
-
-```
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `useMemo` hook in this code?
-- The `useMemo` hook is used to memoize the result of the `type.getData` function, which is called with four arguments: `exchange`, `exchange1d`, `exchange2d`, and `dayData`. This means that the function will only be re-executed if one of these arguments changes.
-
-2. What is the significance of the `DashboardChartCardProps` interface?
-- The `DashboardChartCardProps` interface defines the props that can be passed to the `DashboardChartCard` component. In this case, it specifies that the `type` prop must be either `'liquidity'` or `'volume'`.
-
-3. What is the purpose of the `useActiveWeb3React` hook in this code?
-- The `useActiveWeb3React` hook is used to get the `chainId` value, which is then passed as an argument to several other hooks (`useBlock`, `useFactory`, and `useDayData`). This allows these hooks to retrieve data specific to the current blockchain network.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/analytics/Dashboard/DashboardTabs.md b/.autodoc/docs/markdown/core/src/features/analytics/Dashboard/DashboardTabs.md
deleted file mode 100644
index a68d796eb..000000000
--- a/.autodoc/docs/markdown/core/src/features/analytics/Dashboard/DashboardTabs.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Dashboard/DashboardTabs.tsx)
-
-This code is a React component that renders a set of tabs for a dashboard view. The component imports a `Tabs` component from a file located at `./../Tabs`. The `Tabs` component is likely a reusable component that renders a set of tabs based on an array of tab objects.
-
-The `DashboardTabs` component defines an array of tab objects called `tabs`. Each tab object has a `name` property and a `type` property. The `name` property is a string that represents the name of the tab, and the `type` property is a string that represents the type of data that the tab displays.
-
-The `DashboardTabs` component takes two props: `currentType` and `setType`. The `currentType` prop is a string that represents the currently selected tab type, and the `setType` prop is a function that updates the currently selected tab type.
-
-The `DashboardTabs` component renders the `Tabs` component and passes in the `tabs` array, `currentType`, and `setType` props. This causes the `Tabs` component to render a set of tabs based on the `tabs` array, with the currently selected tab highlighted based on the `currentType` prop. When a user clicks on a tab, the `setType` function is called with the `type` property of the clicked tab object as an argument, which updates the `currentType` prop and causes the `Tabs` component to re-render with the newly selected tab highlighted.
-
-This component can be used in a larger project to render a set of tabs for a dashboard view that allows users to switch between different types of data. For example, in a cryptocurrency trading platform, the `Top Farms` tab could display a list of the top liquidity pools, the `Top Pairs` tab could display a list of the top trading pairs, and the `Top Tokens` tab could display a list of the top tokens by market cap. The `DashboardTabs` component could be used to render these tabs and allow users to switch between them to view different types of data.
-
-Example usage:
-
-```
-import DashboardTabs from './DashboardTabs'
-
-function Dashboard() {
- const [currentType, setCurrentType] = useState('pools')
-
- function setType(type) {
- setCurrentType(type)
- }
-
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `Tabs` import and where is it located?
-- The `Tabs` import is used in this file and is located in a file located at `./../Tabs`.
-2. What is the expected data structure of the `tabs` array?
-- The `tabs` array is expected to contain objects with a `name` property (string) and a `type` property (string).
-3. What is the expected input for the `DashboardTabs` function and what does it return?
-- The `DashboardTabs` function expects two props: `currentType` (string) and `setType` (function). It returns a JSX element that renders the `Tabs` component with the `tabs`, `currentType`, and `setType` props passed in.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/analytics/Farms/FarmList.md b/.autodoc/docs/markdown/core/src/features/analytics/Farms/FarmList.md
deleted file mode 100644
index 88bea8981..000000000
--- a/.autodoc/docs/markdown/core/src/features/analytics/Farms/FarmList.md
+++ /dev/null
@@ -1,64 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Farms/FarmList.tsx)
-
-The `FarmList` component is a React component that renders a table of farming pools. It takes an array of `pools` as a prop, where each pool is an object containing information about the pool's pair, rewards, liquidity, and APR. The component uses several other components and hooks to render the table, including `Table`, `DoubleCurrencyLogo`, `useCurrency`, `Image`, `ColoredNumber`, `formatNumber`, `formatNumberScale`, and `formatPercent`.
-
-The `FarmListName` component is a subcomponent of `FarmList` that renders the name and logo of a pool's pair. It takes a `pair` prop, which is an object containing information about the pair's tokens, name, and type. It uses the `useCurrency` hook to get the currency objects for the pair's tokens, and the `DoubleCurrencyLogo` component to render the pair's logo.
-
-The `Rewards` component is another subcomponent of `FarmList` that renders the rewards for a pool. It takes a `rewards` prop, which is an array of objects containing information about each reward's icon, token, and reward per day. It uses the `Image` component to render each reward's icon, and the `formatNumber` function to format each reward's reward per day.
-
-The `FarmList` component uses the `useMemo` hook to memoize the `defaultSortBy` and `columns` variables. `defaultSortBy` is an object that specifies the default sorting for the table, and `columns` is an array of objects that specify the columns of the table. Each column object has a `Header` property that specifies the column header, an `accessor` property that specifies the data accessor for the column, a `Cell` property that specifies the cell renderer for the column, and an `align` property that specifies the alignment of the column. The `apr` column also has a `sortType` property that specifies a custom sorting function based on the annual APR.
-
-Finally, the `FarmList` component renders the `Table` component with the `columns` and `data` props, and the `defaultSortBy` prop if specified. If `pools` is falsy, the component renders nothing.
-
-This component can be used to display a list of farming pools with their APR, liquidity, and rewards. It can be customized by changing the `columns` array to add or remove columns, or by changing the `Cell` property of each column to customize the rendering of each cell. It can also be styled using CSS classes or inline styles. Here is an example usage of the `FarmList` component:
-
-```jsx
-import FarmList from './FarmList'
-
-const pools = [
- {
- pair: {
- token0: {
- id: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
- },
- token1: {
- id: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
- },
- name: 'UNI-ETH',
- type: 'Sushi Farm',
- },
- rewards: [
- {
- icon: '/tokens/uni.png',
- token: 'UNI',
- rewardPerDay: 1000,
- },
- {
- icon: '/tokens/sushi.png',
- token: 'SUSHI',
- rewardPerDay: 500,
- },
- ],
- liquidity: 1000000,
- apr: {
- annual: 1000,
- monthly: 100,
- daily: 10,
- },
- },
- // more pools...
-]
-
-function App() {
- return
-
- )
-}
-```
-
-In this example, the Tabs component is passed an array of three tabs with different names and types. The currentType state variable is initialized to 'tab1', so the first tab is selected by default. The content for each tab is conditionally rendered based on the currentType variable. When the user clicks on a different tab, the setType function is called with the new type, causing the component to re-render with the new tab selected and the corresponding content displayed.
-## Questions:
- 1. What is the purpose of the `Tabs` component?
-- The `Tabs` component is used to render a set of tabs based on the `tabs` prop and handle tab selection based on the `currentType` and `setType` props.
-
-2. What is the `classNames` function and where is it imported from?
-- The `classNames` function is imported from a file located at `../../functions` and is used to conditionally concatenate CSS class names based on the provided arguments.
-
-3. What is the expected shape of the `tabs` prop?
-- The `tabs` prop is expected to be an array of objects, where each object represents a tab and has a `name` and `type` property.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/CurrencyCard.md b/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/CurrencyCard.md
deleted file mode 100644
index 6be00646e..000000000
--- a/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/CurrencyCard.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/CurrencyCard.tsx)
-
-The code above defines a React component called `CurrencyCard`. This component is responsible for rendering a card that displays information about a cryptocurrency token. The component takes two props: `token` and `symbol`. The `token` prop is a string that represents the token's unique identifier, while the `symbol` prop is a string that represents the token's symbol.
-
-The component imports two things: `CurrencyLogo` and `useCurrency`. `CurrencyLogo` is a custom component that renders an SVG logo for a given cryptocurrency. `useCurrency` is a custom hook that takes a token's unique identifier and returns an object that contains information about the token, such as its name, symbol, and logo URL.
-
-The `CurrencyCard` component renders a div element with a dark background color and rounded corners. Inside this div, there is another div element that contains two child elements: a `CurrencyLogo` component and a div element that displays the token's symbol. The `CurrencyLogo` component is passed the `currency` object returned by the `useCurrency` hook, as well as a `size` prop that determines the size of the logo.
-
-This component can be used in a larger project that displays information about cryptocurrency tokens. For example, it could be used in a dashboard that displays the user's portfolio of tokens. The `CurrencyCard` component could be used to render a card for each token in the user's portfolio, displaying the token's logo and symbol.
-
-Here is an example of how the `CurrencyCard` component could be used in a larger project:
-
-```
-import CurrencyCard from './components/CurrencyCard'
-
-function Portfolio() {
- const tokens = ['eth', 'btc', 'uni']
-
- return (
- Tab 1 content
}
- {currentType === 'tab2' && Tab 2 content
}
- {currentType === 'tab3' && Tab 3 content
}
-
- {tokens.map((token) => (
-
- )
-}
-```
-
-In this example, the `Portfolio` component renders a list of `CurrencyCard` components, one for each token in the `tokens` array. The `key` prop is set to the token's unique identifier, and the `symbol` prop is set to the token's symbol in uppercase letters.
-## Questions:
- 1. What is the purpose of the `CurrencyCard` component?
-- The `CurrencyCard` component is used to display a token's symbol and logo.
-
-2. What is the `useCurrency` hook and where is it defined?
-- The `useCurrency` hook is used to retrieve a currency object based on a given token. It is defined in the `Tokens` module located in the `hooks` directory.
-
-3. What styling classes are applied to the `CurrencyCard` component?
-- The `CurrencyCard` component has a `p-3` padding, a `rounded` border, and a `bg-dark-900` background color. It also uses flexbox to horizontally align the logo and symbol, and has a hidden `text-lg` element for the symbol on small screens.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TokenChartCard.md b/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TokenChartCard.md
deleted file mode 100644
index 7aa06fb6f..000000000
--- a/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TokenChartCard.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/TokenChartCard.tsx)
-
-The `TokenChartCard` component is used to display a chart card that shows either the liquidity or volume of a specific token. The component takes in three props: `type`, `name`, and `token`. The `type` prop specifies whether the chart should display liquidity or volume data. The `name` prop is a string that represents the name of the token. The `token` prop is a string that represents the token's address.
-
-The `TokenChartCard` component uses several hooks from the `graph` and `hooks` services to fetch data needed to display the chart. The `useActiveWeb3React` hook is used to get the current chain ID. The `useBlock` hook is used to get the block number for the current day, as well as the block numbers for the previous two days. The `useTokens` hook is used to get information about the token, such as its liquidity and volume. The `useNativePrice` hook is used to get the native price of the token. The `useDayData` hook is used to get daily data for the token.
-
-The `types` object is used to define the header and data for each chart type. The `getData` function is used to calculate the figure, change, and chart data for the chart. The `figure` represents the current value of the liquidity or volume. The `change` represents the percentage change in liquidity or volume over the past day or two days. The `chart` represents an array of data points that can be used to display a chart.
-
-The `useState` hook is used to keep track of the current timespan for the chart. The `chartTimespans` array is used to define the available timespans for the chart.
-
-The `data` variable is calculated using the `useMemo` hook. The `data` variable is an object that contains the figure, change, and chart data for the chart. The `ChartCard` component is used to display the chart card with the data.
-
-Overall, the `TokenChartCard` component is a reusable component that can be used to display a chart of the liquidity or volume of a specific token. The component uses several hooks to fetch data needed to display the chart, and the `types` object is used to define the header and data for each chart type. The `useState` hook is used to keep track of the current timespan for the chart, and the `ChartCard` component is used to display the chart card with the data.
-## Questions:
- 1. What does this code do?
-- This code exports a React component called `TokenChartCard` that renders a chart card based on the `type`, `name`, and `token` props passed to it. The chart displays either liquidity or volume data for the specified token over a specified time period.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies imported from other files in the project, including `useBlock`, `useDayData`, `useNativePrice`, `useTokens`, and `useActiveWeb3React`. These dependencies are used to fetch data from external APIs and the blockchain.
-
-3. What is the purpose of the `useMemo` hook in this code?
-- The `useMemo` hook is used to memoize the result of calling the `type.getData` function with the current values of several variables. This helps to optimize performance by avoiding unnecessary re-renders of the component when these variables change.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TopFarmsList.md b/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TopFarmsList.md
deleted file mode 100644
index 3f70fea2f..000000000
--- a/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TopFarmsList.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/TopFarmsList.tsx)
-
-This code defines a React component called `TopFarmsList` that renders a table of top farms. The component takes a single prop called `farms`, which is an array of objects representing each farm. Each farm object has three properties: `pair`, `roi`, and `rewards`. The `pair` property is an object with two properties, `token0` and `token1`, each of which has an `id` and a `symbol`. The `roi` property is a number representing the return on investment for the farm, and the `rewards` property is an array of objects, each of which has an `icon` property that is a JSX element.
-
-The `TopFarmsList` component uses the `useMemo` hook to define a `columns` array that is used to render the table. The `columns` array has three objects, each of which represents a column in the table. The first column is called "Token Pair" and displays the farm's pair of tokens as a `FarmListname` component. The `FarmListname` component takes a single prop called `pair`, which is an object with two properties, `token0` and `token1`, each of which has an `id` and a `symbol`. The `FarmListname` component uses the `useCurrency` hook to get the currency object for each token and renders a `DoubleCurrencyLogo` component with the two currencies and their symbols. The second column is called "ROI (1Y)" and displays the farm's return on investment as a percentage using the `formatPercent` function. The third column is called "Rewards" and displays the farm's rewards as a list of icons.
-
-Finally, the `TopFarmsList` component renders a `Table` component with the `columns` array and the `farms` prop as the data. The `Table` component is conditionally rendered using the `&&` operator to only render if `farms` is truthy. The `Table` component also has a `defaultSortBy` prop that sorts the table by the "ROI (1Y)" column in descending order.
-
-This code is used to display a table of top farms in a larger project, likely a decentralized finance (DeFi) application. The `TopFarmsList` component could be used in a dashboard or analytics page to show users which farms are performing the best. The `FarmListname` component could also be reused in other parts of the application to display a pair of tokens with their symbols and logos.
-## Questions:
- 1. What is the purpose of the `TopFarmsList` component?
-- The `TopFarmsList` component is used to render a table of top farms, including their token pair, ROI, and rewards.
-
-2. What is the `FarmListName` component used for?
-- The `FarmListName` component is used to render the name of a farm's token pair, including the logos of the two currencies and their symbols.
-
-3. What libraries and hooks are being used in this code?
-- The code is importing `useMemo` from the `react` library, and is also using the `Table` component from a custom component file. Additionally, it is using the `useCurrency` hook and the `formatPercent` function from custom hook and function files, respectively.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TransactionList.md b/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TransactionList.md
deleted file mode 100644
index e52b46407..000000000
--- a/.autodoc/docs/markdown/core/src/features/analytics/Tokens/Token/TransactionList.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/Token/TransactionList.tsx)
-
-The code is a React component that renders a table of transaction data. The component takes in an array of transaction objects as a prop, and each transaction object contains information about the transaction, such as the symbols being swapped, the incoming and outgoing amounts, the address, and the time.
-
-The component uses the `useTable`, `usePagination`, and `useSortBy` hooks from the `react-table` library to create a paginated and sortable table. The `columns` variable is an array of objects that define the columns of the table. Each object has a `Header` property that specifies the column header, an `accessor` property that specifies the data field to display in the column, and a `Cell` property that specifies how to render the data in the cell. The `align` property specifies the alignment of the column content.
-
-The `Table` function is a helper function that takes in the `columns` and `data` props and returns the table markup. The `getTableProps`, `getTableBodyProps`, `headerGroups`, `prepareRow`, `rows`, `page`, `nextPage`, `previousPage`, `canPreviousPage`, `canNextPage`, `setPageSize`, `pageIndex`, and `pageSize` variables are all provided by the `useTable` hook and are used to render the table.
-
-The `TransactionList` function is the main component that renders the table using the `Table` function and the `columns` and `transactions` props. The `transactions` prop is an array of transaction objects that are passed to the `data` prop of the `useTable` hook. If there are no transactions, an empty array is passed instead.
-
-The `Cell` properties of the `Type`, `Value`, `Address`, and `Time` columns use helper functions from the `functions` module to format the data. The `formatNumber` function formats the number with commas and rounds it to two decimal places. The `shortenAddress` function shortens the Ethereum address to the first and last four characters. The `formatDateAgo` function formats the date as a relative time string (e.g. "2 hours ago").
-
-Overall, this component provides a reusable and customizable table for displaying transaction data in a paginated and sortable format. It can be used in various parts of the larger project that require transaction data to be displayed in a table format.
-## Questions:
- 1. What is the purpose of the `TransactionList` component?
-- The `TransactionList` component is used to display a table of transaction data, including the type of transaction, its value, incoming and outgoing amounts, address, and time.
-
-2. What libraries are being used in this code?
-- The code is using several libraries, including `react`, `react-table`, and `@heroicons/react/outline`.
-
-3. What is the purpose of the `Table` function?
-- The `Table` function is a helper function used by the `TransactionList` component to render the table of transaction data. It uses the `useTable`, `useSortBy`, and `usePagination` hooks from the `react-table` library to handle sorting and pagination of the data.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/analytics/Tokens/TokenList.md b/.autodoc/docs/markdown/core/src/features/analytics/Tokens/TokenList.md
deleted file mode 100644
index d7d85c2c2..000000000
--- a/.autodoc/docs/markdown/core/src/features/analytics/Tokens/TokenList.md
+++ /dev/null
@@ -1,52 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/analytics/Tokens/TokenList.tsx)
-
-The `TokenList` module is a React component that renders a table of token data. It takes in an array of `Token` objects, which contain information about a token's address, symbol, liquidity, volume, price, and price change over the past day and week. The component also accepts an optional array of `TokenListColumnType` values, which determine which columns are displayed in the table.
-
-The `TokenList` component uses the `Table` component from `../../../components/Table` to render the table. The `Table` component takes in an array of `Column` objects, which define the columns of the table. The `TokenListColumns` object defines the columns that can be displayed in the table, including the token name, price, liquidity, price change, volume change, and a line graph of the token's price over the past week.
-
-The `TokenListName` component is used to render the token name column. It takes in a `token` object and uses the `useCurrency` hook from `../../../hooks/Tokens` to get the currency associated with the token's address. It then renders the currency logo and token symbol in a `div` element.
-
-The `TokenListColumns` object defines the other columns of the table. The `price`, `liquidity`, `priceChange`, and `volumeChange` columns use the `formatNumber` and `formatPercent` functions from `../../../functions` to format the data. The `lastWeekGraph` column renders a line graph of the token's price over the past week using the `LineGraph` component from `../../../components/LineGraph`.
-
-Overall, the `TokenList` component provides a flexible and customizable way to display token data in a table format. It can be used in the larger project to display token data in various contexts, such as on a dashboard or analytics page.
-
-Example usage:
-
-```
-import TokenList from './TokenList'
-
-const tokens = [
- {
- token: {
- address: '0x123abc',
- symbol: 'ABC',
- },
- liquidity: 1000,
- volume1d: 500,
- volume1w: 3000,
- price: 1.23,
- change1d: 0.05,
- change1w: -0.1,
- },
- // more token objects...
-]
-
-const enabledColumns = ['name', 'price', 'liquidity', 'priceChange', 'volumeChange', 'lastWeekGraph']
-
-function MyComponent() {
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `TokenList` component?
-- The `TokenList` component is used to display a table of token data, including columns for name, price, liquidity, price change, volume change, and a line graph of the token's performance over the last week.
-
-2. What is the `Token` interface used for?
-- The `Token` interface defines the shape of an object that contains data about a token, including its address, symbol, liquidity, volume, price, and price change over the last day and week.
-
-3. What is the `TokenListColumns` object used for?
-- The `TokenListColumns` object is a mapping of column names to their respective configurations, including the column header, data accessor, cell renderer, and sorting behavior. It is used to define the columns that should be displayed in the `TokenList` table.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/BalancePanel.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/BalancePanel.md
deleted file mode 100644
index 5a569f946..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/BalancePanel.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/BalancePanel.tsx)
-
-The `BalancePanel` component is a React functional component that displays the user's wallet and BentoBox balances for a specific currency. It is part of the larger `zoo` project and is used in the limit order feature of the application.
-
-The component imports several hooks and functions from other files in the project. These include `useDerivedLimitOrderInfo` and `useLimitOrderActionHandlers` from the `limit-order/hooks` file, `maxAmountSpend` from the `functions` file, and `setFromBentoBalance` from the `limit-order/actions` file. It also imports various components from the `components` folder and external libraries such as `react-redux` and `@lingui/react`.
-
-The component renders a `div` element with two child `div` elements, each displaying the balance for a specific currency. The first child `div` displays the balance in BentoBox, while the second child `div` displays the balance in the user's wallet. Each child `div` contains two `Typography` components, one displaying the label ("In Bento:" or "In Wallet:") and the other displaying the balance amount and currency symbol. The balance amount is obtained from the `walletBalances` and `bentoboxBalances` objects, which are derived from the `useDerivedLimitOrderInfo` hook. The currency symbol is obtained from the `currencies` object, which is also derived from the same hook.
-
-The `handleMaxInput` function is defined using the `useCallback` hook and is called when the user clicks on the balance amount in either child `div`. The function takes a boolean argument `bento` that determines whether the balance amount is from BentoBox or the user's wallet. If `bento` is true, the function sets the input field value to the exact BentoBox balance amount and dispatches an action to set the `fromBentoBalance` flag to true. If `bento` is false, the function sets the input field value to the maximum spendable amount from the user's wallet (obtained using the `maxAmountSpend` function) and dispatches an action to set the `fromBentoBalance` flag to false.
-
-Overall, the `BalancePanel` component provides a simple and intuitive way for users to view and select their balance amounts for a specific currency when making a limit order.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React functional component called `BalancePanel` that displays the user's wallet and Bento balances for a specific currency, and allows the user to input the maximum amount they want to spend.
-
-2. What other components or modules does this code depend on?
-- This code imports several modules from other files in the `limit-order`, `swap`, and `components` directories, as well as from external libraries such as `react-redux` and `@lingui/react`.
-
-3. What is the significance of the `useCallback` hook in this code?
-- The `useCallback` hook is used to memoize the `handleMaxInput` function, which is passed as a prop to child components. This can improve performance by preventing unnecessary re-renders of child components when the function reference changes.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/ConfirmLimitOrderModal.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/ConfirmLimitOrderModal.md
deleted file mode 100644
index ed1bd8264..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/ConfirmLimitOrderModal.md
+++ /dev/null
@@ -1,51 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/ConfirmLimitOrderModal.tsx)
-
-The `ConfirmLimitOrderModal` component is a React functional component that renders a modal for confirming a limit order. The modal is composed of two parts: the top content and the bottom content. The top content displays the details of the limit order, including the amount of input currency to be paid, the exchange rate, and the amount of output currency to be received. The bottom content displays additional details of the limit order, including the minimum amount of output currency to be received, the order expiration time, and the recipient address. The bottom content also includes a button to confirm the limit order.
-
-The `ConfirmLimitOrderModal` component imports several functions and hooks from other files in the project. The `formatNumber` and `shortenAddress` functions are used to format numbers and addresses, respectively. The `useActiveWeb3React` and `useUSDCPrice` hooks are used to retrieve the active Web3 provider and the current USDC price, respectively. The `useDerivedLimitOrderInfo` and `useLimitOrderState` hooks are used to retrieve the derived limit order information and the limit order state, respectively.
-
-The `ConfirmLimitOrderModal` component also imports several components from other files in the project. The `Button` component is used to render the confirm button. The `ConfirmationModalContent` component is used to render the modal content. The `CurrencyLogo` component is used to render the logos of the input and output currencies. The `Modal` component is used to render the modal.
-
-The `ConfirmLimitOrderModal` component exports itself as the default export of the file, which can be imported and used in other files in the project.
-
-Example usage:
-
-```jsx
-import ConfirmLimitOrderModal from "./ConfirmLimitOrderModal";
-
-function MyComponent() {
- const [open, setOpen] = useState(false);
-
- const handleOpen = () => {
- setOpen(true);
- };
-
- const handleClose = () => {
- setOpen(false);
- };
-
- const handleConfirm = () => {
- // Handle limit order confirmation
- };
-
- return (
- <>
-
-
- USD}
- />
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code and where is it used in the project?
-- This code defines a React component called `CurrencyInput` that renders a custom input field with a numeric value and optional max button and error message. It is likely used in a form or input section of the project.
-
-2. What external dependencies does this code rely on?
-- This code imports several external dependencies including `React`, `Button`, `Input`, `classNames`, `t`, and `useLingui`. These dependencies are likely defined in other files or packages within the project.
-
-3. What are the required and optional props for the `CurrencyInput` component?
-- The `CurrencyInput` component requires an `id`, `showMaxButton` boolean, `onUserInput` function, and `value` string prop. It also accepts an optional `error` string and `endAdornment` ReactNode prop, as well as an optional `onMax` function prop if `showMaxButton` is true.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/CurrencyInputPanel.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/CurrencyInputPanel.md
deleted file mode 100644
index 47c43b2cd..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/CurrencyInputPanel.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/CurrencyInputPanel.tsx)
-
-The code defines a React component called `CurrencyInputPanel` that renders a panel for inputting currency values. The component takes in several props, including an `id` string, an optional `error` string, a `className` string, and several React nodes for adornments and input components.
-
-The component renders a div with the given `id`, and conditionally renders the `topAdornment`, `bottomAdornment`, and `error` props if they are provided. The main content of the panel is a flex container with two child divs: one for the `selectComponent` prop and one for the `inputComponent` prop. The `selectComponent` is rendered in a div that takes up the full width of the container, while the `inputComponent` is rendered in a div that takes up 2/5 of the width on larger screens.
-
-The `classNames` function is used to conditionally apply CSS classes to the container and child divs based on the `className` and `inputComponent` props. The `ExclamationIcon` component from the `@heroicons/react/solid` library is used to render an error icon next to the `error` message if it is provided.
-
-This component could be used in a larger project to provide a consistent UI for inputting currency values. Developers could pass in different `selectComponent` and `inputComponent` props to customize the appearance and functionality of the panel. The `error` prop could be used to display validation errors to the user. Here is an example of how the component could be used:
-
-```
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code and where is it used in the project?
-- This code defines a React component called `CurrencySelect` that renders a button for selecting a currency, and includes a modal for searching and selecting a currency. It is likely used in various parts of the project where currency selection is needed.
-
-2. What props does the `CurrencySelect` component accept and what are their types?
-- The `CurrencySelect` component accepts several props including `currency`, `otherCurrency`, `showCommonBases`, `onSelect`, `disabled`, `label`, `currencyList`, `includeNativeCurrency`, and `allowManageTokenList`. Their types are defined in the `CurrencySelectProps` interface.
-
-3. What external libraries and components are used in this code?
-- This code imports several external libraries and components including `React`, `ChevronDownIcon` from `@heroicons/react/solid`, `Currency` from `@zoolabs/zdk`, `CurrencyLogo` from `../../../components/CurrencyLogo`, `CurrencySearchModal` from `../../../modals/SearchModal/CurrencySearchModal`, `Lottie` from `lottie-react`, and `classNames` and `t` from `@lingui/macro`. It also includes an animation data file called `select-coin.json`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/LimitOrderButton.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/LimitOrderButton.md
deleted file mode 100644
index 586d3f17e..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/LimitOrderButton.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/LimitOrderButton.tsx)
-
-The `LimitOrderButton` component is a React functional component that renders a button for creating a limit order. The component imports various hooks and components from different files in the project.
-
-The component takes in a `currency` prop, which is an instance of the `Currency` class from the `@zoolabs/zdk` library. The `color` prop is used to set the color of the button.
-
-The component uses the `useActiveWeb3React` hook to get the current user's account, chain ID, library, and connector. It also uses the `useLimitOrderState` and `useDerivedLimitOrderInfo` hooks to get the current limit order state and derived limit order information, respectively.
-
-The component uses the `useLimitOrderApproveCallback` hook to get the current approval state of the limit order and to handle the approval process. It also uses the `useApproveCallback` hook to handle token approvals.
-
-The component renders different buttons based on the current state of the limit order and token approvals. If the user is not connected to a wallet, the component renders a button to connect the wallet. If there is an input error, the component renders a disabled button with the error message. If the token needs to be approved, the component renders a button to approve the token. If the limit order needs to be approved, the component renders a button to approve the limit order. If the token has been approved and the user needs to deposit the token into BentoBox, the component renders a button to deposit the token. If the user has already deposited the token into BentoBox, the component renders a button to create the limit order.
-
-The `handler` function is called when the user clicks the button to create the limit order. It creates a new `LimitOrder` instance from the `@zoolabs/zdk` library and signs the order with the user's provider. If the order is successfully sent, a popup is added to the UI to indicate that the limit order has been created.
-
-Overall, the `LimitOrderButton` component provides a user-friendly interface for creating limit orders and handles the approval and deposit processes for the user. It can be used in a larger project that involves limit orders and token swaps.
-
-Example usage:
-
-```jsx
-import LimitOrderButton from "./LimitOrderButton";
-
-function MyComponent() {
- const currency = new Currency("ETH");
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `LimitOrderButton` component?
-- The `LimitOrderButton` component is used to handle the creation of a limit order and the necessary approvals and deposits.
-
-2. What external libraries and hooks are being used in this code?
-- The code is using external libraries and hooks such as `@zoolabs/zdk`, `@lingui/macro`, `react-redux`, and `useActiveWeb3React`.
-
-3. What is the role of the `useLimitOrderApproveCallback` hook?
-- The `useLimitOrderApproveCallback` hook is used to handle the approval of a limit order and returns the approval state, fallback method, permit status, and functions to approve and execute the order.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/LimitPriceInputPanel.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/LimitPriceInputPanel.md
deleted file mode 100644
index eac1d5388..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/LimitPriceInputPanel.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/LimitPriceInputPanel.tsx)
-
-The `LimitPriceInputPanel` component is a React functional component that renders a panel for inputting a limit price for a limit order. The component imports several functions and hooks from other files in the project, including `setLimitPrice` action creator, `useLimitOrderState` and `useDerivedLimitOrderInfo` hooks, and `Input` component.
-
-The component takes a single prop `onBlur` which is a callback function that is called when the input field loses focus. The component renders a container `div` with two child `div`s. The first child `div` contains a label and a button that sets the input value to the current market price. The second child `div` contains an input field and a label that displays the exchange rate between the input and output currencies.
-
-The component uses the `useLimitOrderState` hook to get the current limit price value from the Redux store and the `useDerivedLimitOrderInfo` hook to get the current exchange rate and currency symbols for the input and output currencies. The component also uses the `useDispatch` hook to get the dispatch function from the Redux store and the `useLingui` hook to get the internationalization function from the Lingui library.
-
-The `handleInput` function is a callback function that is called when the input field value changes. It dispatches the `setLimitPrice` action with the new value and calls the `onBlur` callback function with the same value. The `disabled` variable is a boolean that is true if either the input or output currency is not set.
-
-The `Input.Numeric` component is a custom input field component that only allows numeric input. It takes several props including `disabled`, `className`, `placeholder`, `id`, `value`, `onUserInput`, and `onBlur`. The `value` prop is set to the current limit price value from the Redux store. The `onUserInput` prop is set to the `handleInput` function. The `onBlur` prop is set to a callback function that calls the `onBlur` prop passed to the component.
-
-This component can be used in a larger project that involves trading cryptocurrencies. It provides a user interface for inputting a limit price for a limit order and displays the current exchange rate between the input and output currencies. The component can be customized by passing different props to the `Input.Numeric` component or by modifying the CSS classes of the container `div`.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `LimitPriceInputPanel` that renders an input panel for setting a limit price for a trading order.
-
-2. What external dependencies does this code have?
-- This code imports several modules from external packages, including `react`, `react-redux`, and `@lingui/react`.
-
-3. What props does the `LimitPriceInputPanel` component expect?
-- The `LimitPriceInputPanel` component expects a single prop called `onBlur`, which is a function that takes a string value as its argument and has no return value.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/MyOrders.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/MyOrders.md
deleted file mode 100644
index 754287989..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/MyOrders.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/MyOrders.tsx)
-
-This code defines a React functional component called `MyOrders` that renders a link to the user's open orders page. The component imports several dependencies, including `React`, `Badge`, `ClipboardListIcon`, `NavLink`, `t`, `useLimitOrders`, and `useLingui`.
-
-The `MyOrders` component uses the `useLingui` hook to access the `i18n` object, which provides internationalization support for the component. The `useLimitOrders` hook is used to retrieve the user's pending limit orders.
-
-The component returns a `NavLink` component that wraps an anchor tag. The anchor tag contains two divs: one with the text "My Orders" and a `Badge` component that displays the total number of pending orders, and another with a `ClipboardListIcon` component that is only displayed on smaller screens.
-
-This component can be used in a larger project to provide users with a quick link to their open orders page. The `Badge` component can be used to display the number of pending orders, which can help users keep track of their orders. The `useLimitOrders` hook can be used to retrieve the user's pending orders from the backend. The `useLingui` hook can be used to provide internationalization support for the component.
-
-Example usage:
-
-```
-import MyOrders from './MyOrders'
-
-function App() {
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What does this code do?
-- This code exports a React functional component called `MyOrders` that renders a link to a page for viewing a user's open orders, along with a badge indicating the number of pending orders.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including React, @heroicons/react, @lingui/macro, and @lingui/react. It also imports two custom components, Badge and NavLink, from the project's components directory.
-
-3. What is the purpose of the useLimitOrders hook?
-- The useLimitOrders hook is used to retrieve information about a user's pending limit orders, which is then displayed in the badge next to the "My Orders" link.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/OrderExpirationDropdown.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/OrderExpirationDropdown.md
deleted file mode 100644
index a1b955f38..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/OrderExpirationDropdown.md
+++ /dev/null
@@ -1,16 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/OrderExpirationDropdown.tsx)
-
-The `OrderExpirationDropdown` component is a React functional component that renders a dropdown menu for selecting the expiration time of a limit order. The component imports several dependencies, including `NeonSelect` and `NeonSelectItem` from a custom `Select` component, `useDispatch` and `useLimitOrderState` hooks from the `limit-order` state, and `useLingui` from the `@lingui/react` library for internationalization.
-
-The component defines a `handler` function that dispatches a `setOrderExpiration` action to update the `orderExpiration` state with the selected expiration time. The `items` object maps each expiration time option to a corresponding label for display in the dropdown menu.
-
-The component returns a JSX element that renders a `div` container with a label and a question helper icon, followed by a `NeonSelect` component that renders the dropdown menu. The `NeonSelect` component receives the `orderExpiration.label` value as its `value` prop, which is the label of the currently selected expiration time. The `NeonSelect` component also maps each item in the `items` object to a `NeonSelectItem` component, passing the expiration time as the `value` prop and the corresponding label as the child element. The `handler` function is called when an item is clicked, passing the expiration time as the second argument.
-
-This component can be used in a larger project that involves limit orders, allowing users to select the expiration time for their orders. The component is reusable and can be easily integrated into other components or pages that require a similar functionality. For example, the component can be used in a trading page where users can place limit orders, or in a settings page where users can configure their order preferences.
-## Questions:
- 1. What is the purpose of this code?
- - This code defines a React component called `OrderExpirationDropdown` that renders a dropdown menu for selecting the expiration time of an order.
-2. What is the role of the `useLimitOrderState` hook?
- - The `useLimitOrderState` hook is used to retrieve the current order expiration value from the Redux store.
-3. What is the purpose of the `QuestionHelper` component?
- - The `QuestionHelper` component renders a tooltip with explanatory text when hovered over, and is used here to provide additional information about the meaning of "order expiration".
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/PayFromToggle.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/PayFromToggle.md
deleted file mode 100644
index 9f805445c..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/PayFromToggle.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/PayFromToggle.tsx)
-
-The `PayFromToggle` component is a React functional component that renders a toggle switch with two options: "BentoBox" and "Wallet". The purpose of this component is to allow the user to select the source of funds for a limit order transaction.
-
-The component imports several dependencies, including `React`, `useState`, `Switch` from the `@headlessui/react` library, `Typography`, `useDispatch`, and `useLingui`. It also imports `setFromBentoBalance` and `useLimitOrderState` from the `limit-order` module in the project's state.
-
-The component uses the `useLingui` hook to access the project's internationalization (i18n) functionality. It also uses the `useLimitOrderState` hook to access the current state of the limit order module, specifically the `fromBentoBalance` property. The `useDispatch` hook is used to dispatch the `setFromBentoBalance` action when the toggle switch is changed.
-
-The `PayFromToggle` component returns a JSX element that renders the toggle switch. The switch has two labels, one for "BentoBox" and one for "Wallet", and a round toggle button that can be moved between the two labels. The current selection is determined by the `fromBentoBalance` property in the limit order state. When the toggle switch is changed, the `handleChange` function is called, which dispatches the `setFromBentoBalance` action with the opposite value of the current `fromBentoBalance` property.
-
-This component can be used in the larger project wherever a user needs to select the source of funds for a limit order transaction. For example, it could be used in a form that allows the user to enter the details of a limit order, including the source of funds. The `PayFromToggle` component provides a simple and intuitive way for the user to select the desired source of funds.
-
-Example usage:
-
-```
-import PayFromToggle from './PayFromToggle'
-
-function LimitOrderForm() {
- return (
-
- )
-}
-```
-## Questions:
- 1. What does this code do?
-- This code exports a React functional component called `PayFromToggle` that renders a toggle switch with two options: "BentoBox" and "Wallet". When the toggle is switched, it dispatches an action to update the state of `fromBentoBalance`.
-
-2. What dependencies does this code have?
-- This code imports several dependencies from external packages, including `React`, `@headlessui/react`, `@lingui/macro`, `react-redux`, and a custom `Typography` component and some state-related modules from a `../../../` path.
-
-3. What is the purpose of the `useLingui` hook?
-- The `useLingui` hook is used to access the `i18n` object provided by the Lingui library, which allows for internationalization and localization of the text displayed in the component. The `i18n._(t`Pay from:`)` syntax is used to translate the text "Pay from:" to the appropriate language based on the user's locale.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/PriceRatio.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/PriceRatio.md
deleted file mode 100644
index 4507ddf47..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/limit-order/PriceRatio.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/limit-order/PriceRatio.tsx)
-
-The `PriceRatio` component is a React functional component that displays the exchange rate between two currencies. It is part of the larger `zoo` project and imports the `Currency` and `Price` classes from the `@zoolabs/zdk` library, as well as the `useState` and `FC` (Functional Component) hooks from the `react` library, and two custom hooks `useDerivedLimitOrderInfo` and `useLimitOrderState` from the `../../../state/limit-order/hooks` module.
-
-The component renders a div containing two sub-divs. The first sub-div displays the exchange rate between the two currencies, which is calculated using the `Price` class. The exchange rate is displayed in the format "1 [input currency symbol] = [exchange rate] [output currency symbol]". The exchange rate is calculated based on the `parsedAmounts` and `currentPrice` values obtained from the `useDerivedLimitOrderInfo` hook. If both `parsedAmounts[Field.INPUT]` and `parsedAmounts[Field.OUTPUT]` are defined, the exchange rate is calculated using these values. Otherwise, the `currentPrice` value is used. The `inverted` state variable is used to toggle the input and output currencies in the exchange rate display.
-
-The second sub-div contains a clickable icon that toggles the `inverted` state variable when clicked. This causes the input and output currencies to be swapped in the exchange rate display.
-
-This component can be used in the larger `zoo` project to display the exchange rate between two currencies in a user interface. It can be imported and rendered in any other React component that requires this functionality. For example:
-
-```
-import PriceRatio from './components/PriceRatio';
-
-function App() {
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `useDerivedLimitOrderInfo` and `useLimitOrderState` hooks imported from `../../../state/limit-order/hooks`?
-- These hooks are likely used to retrieve and manage state related to limit orders in the application.
-
-2. What is the significance of the `PriceRatio` component and where is it used in the application?
-- The `PriceRatio` component appears to be responsible for displaying the exchange rate between two currencies, and it may be used in various parts of the application where currency exchange is relevant.
-
-3. What is the purpose of the `inverted` state variable and how is it used in the component?
-- The `inverted` state variable is used to determine whether the exchange rate should be displayed in the original or inverted format, and it is toggled by clicking on a button in the component. This may be useful for users who prefer to see the exchange rate in a different format.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetails.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetails.md
deleted file mode 100644
index 7337f6815..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetails.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetails.tsx)
-
-The code in this file defines two React components: `TradeSummary` and `AdvancedLiquidityDetails`. These components are part of a larger project called "zoo" and are used to display information related to a user's liquidity pool tokens and fees.
-
-The `TradeSummary` component renders a summary of the user's pool tokens, pool share, liquidity provider fee, and network fee. This information is displayed using the `RowBetween` and `RowFixed` components from the `../../../components/Row` module and the `AutoColumn` component from the `../../../components/Column` module. The `RowBetween` component is used to display two items side-by-side with equal spacing between them, while the `RowFixed` component is used to display a single item without any spacing. The `AutoColumn` component is used to stack the rows vertically.
-
-The `AdvancedLiquidityDetails` component simply renders the `TradeSummary` component within an `AutoColumn` component with a gap of 0 pixels. This component is exported along with an interface called `AdvancedLiquidityDetailsProps` that has a single optional property called `show`.
-
-Overall, these components are used to display important information related to a user's liquidity pool tokens and fees in a clear and concise manner. They can be easily integrated into other parts of the "zoo" project to provide users with a better understanding of their liquidity pool activity. Here is an example of how the `AdvancedLiquidityDetails` component might be used:
-
-```
-import AdvancedLiquidityDetails from 'zoo/components/AdvancedLiquidityDetails'
-
-function MyPage() {
- return (
- Exchange Rates
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `TradeSummary` function?
-- The `TradeSummary` function returns a JSX component that displays information about the user's pool tokens, pool share, liquidity provider fee, and network fee.
-
-2. What is the `AdvancedLiquidityDetails` function used for?
-- The `AdvancedLiquidityDetails` function returns a JSX component that includes the `TradeSummary` component and is wrapped in an `AutoColumn` component with a gap of "0px". It also includes an optional `show` prop.
-
-3. What are the `RowBetween` and `RowFixed` components used for?
-- The `RowBetween` and `RowFixed` components are imported from the `Row` module and are used to create rows of content with flexible and fixed widths, respectively. They are used in the `TradeSummary` function to display the different pieces of information.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetailsDropdown.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetailsDropdown.md
deleted file mode 100644
index 3bae6c0b2..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetailsDropdown.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/liquidity/AdvancedLiquidityDetailsDropdown.tsx)
-
-This code defines a React component called `AdvancedSwapDetailsDropdown` that renders a styled dropdown menu containing advanced liquidity details for a swap. The component imports another React component called `AdvancedLiquidityDetails` from a file located at `./AdvancedLiquidityDetails`.
-
-The `AdvancedDetailsFooter` styled component defines the appearance of the dropdown menu. It has a dark background color and rounded borders at the bottom. The `show` prop determines whether the dropdown menu is visible or hidden. When `show` is true, the dropdown menu is translated to a position where it is visible. When `show` is false, the dropdown menu is translated to a position where it is hidden.
-
-The `AdvancedSwapDetailsDropdown` component takes a `show` prop and passes any other props it receives to the `AdvancedLiquidityDetails` component. The `show` prop determines whether the dropdown menu is visible or hidden. If `show` is true, the `AdvancedDetailsFooter` component is rendered with `show` set to true and the `AdvancedLiquidityDetails` component is rendered inside it. If `show` is false, only the `AdvancedDetailsFooter` component is rendered with `show` set to false.
-
-This component can be used in a larger project that involves swapping tokens on a decentralized exchange. When a user wants to see advanced liquidity details for a swap, they can click on a button or link that triggers the `AdvancedSwapDetailsDropdown` component to appear. The `show` prop can be toggled by the button or link to show or hide the dropdown menu.
-
-Example usage:
-
-```
-import AdvancedSwapDetailsDropdown from './AdvancedSwapDetailsDropdown'
-
-function SwapPage() {
- const [showAdvancedDetails, setShowAdvancedDetails] = useState(false)
-
- function handleToggleAdvancedDetails() {
- setShowAdvancedDetails(!showAdvancedDetails)
- }
-
- return (
- My Liquidity Pool Details
-
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `AdvancedLiquidityDetails` component and where is it imported from?
- - The `AdvancedLiquidityDetails` component is imported from a file located at `./AdvancedLiquidityDetails`. Its purpose is not clear from this code snippet alone.
-2. What is the purpose of the `AdvancedDetailsFooter` styled component and how is it being used?
- - The `AdvancedDetailsFooter` styled component is a container with specific styling properties. It is being used to wrap the `AdvancedLiquidityDetails` component and is conditionally rendered based on the `show` prop passed to the `AdvancedSwapDetailsDropdown` component.
-3. What is the purpose of the `AdvancedSwapDetailsDropdown` component and what props does it accept?
- - The `AdvancedSwapDetailsDropdown` component is a functional component that conditionally renders the `AdvancedDetailsFooter` and `AdvancedLiquidityDetails` components based on the `show` prop passed to it. It accepts the same props as the `AdvancedLiquidityDetails` component, which are defined in the `AdvancedLiquidityDetailsProps` interface.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/ConfirmAddModalBottom.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/ConfirmAddModalBottom.md
deleted file mode 100644
index 52e295f53..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/liquidity/ConfirmAddModalBottom.md
+++ /dev/null
@@ -1,51 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/liquidity/ConfirmAddModalBottom.tsx)
-
-The `ConfirmAddModalBottom` function is a React component that renders a modal dialog box for confirming the addition of liquidity to a pool in a decentralized exchange. The component takes several props, including `noLiquidity`, `price`, `currencies`, `parsedAmounts`, `poolTokenPercentage`, and `onAdd`.
-
-The `noLiquidity` prop is a boolean that indicates whether the pool being added to has any existing liquidity. The `price` prop is a `Fraction` object that represents the exchange rate between the two currencies being added to the pool. The `currencies` prop is an object that maps `Field` values to `Currency` objects, where `Field` is an enum representing the two currencies being added to the pool. The `parsedAmounts` prop is an object that maps `Field` values to `CurrencyAmount` objects, representing the amounts of each currency being added to the pool. The `poolTokenPercentage` prop is a `Percent` object representing the share of the pool being added to. Finally, the `onAdd` prop is a callback function that is called when the user confirms the addition of liquidity.
-
-The component renders a dialog box with information about the exchange rate, the amounts of each currency being added, and the share of the pool being added to. It also renders a button that allows the user to confirm the addition of liquidity. The text of the button changes depending on whether the pool being added to has existing liquidity or not.
-
-The component uses the `useLingui` hook from the `@lingui/react` package to provide internationalization support. It also uses the `Button` component from the `../../../components/Button` module.
-
-Example usage:
-
-```jsx
-import { ConfirmAddModalBottom } from "@zoolabs/zdk-react";
-import { Currency, CurrencyAmount, Fraction, Percent } from "@zoolabs/zdk";
-
-function MyComponent() {
- const currencies = {
- [Field.CURRENCY_A]: new Currency("ETH", 18, "Ethereum"),
- [Field.CURRENCY_B]: new Currency("USDC", 6, "USD Coin"),
- };
- const parsedAmounts = {
- [Field.CURRENCY_A]: CurrencyAmount.fromRawAmount(currencies[Field.CURRENCY_A], "1"),
- [Field.CURRENCY_B]: CurrencyAmount.fromRawAmount(currencies[Field.CURRENCY_B], "1000000"),
- };
- const price = new Fraction(1, 2000);
- const poolTokenPercentage = new Percent(50);
- const onAdd = () => {
- // handle addition of liquidity
- };
- return (
-
-
- );
-}
-```
-
-Overall, this code provides a way for different parts of the `zoo` project to access and use components related to liquidity details and pricing.
-## Questions:
- 1. **What is the purpose of this code file?**\
-A smart developer might wonder what the overall purpose of this code file is and how it fits into the larger project. Based on the code, it appears to be exporting various components related to liquidity details and removal from the `zoo` project.
-
-2. **What do the exported components do?**\
-A developer might want to know more about the specific functionality of each exported component. Based on their names, `AdvancedLiquidityDetails`, `AdvancedLiquidityDetailsDropdown`, `LiquidityHeader`, `LiquidityPrice`, and `RemoveLiquidityReceiveDetails`, it seems that they are related to displaying and managing liquidity information.
-
-3. **Are there any dependencies or requirements for using these components?**\
-A developer might want to know if there are any dependencies or requirements for using these exported components. Without more information, it is unclear if these components require any specific libraries or configurations to work properly.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/open-order/CompletedOrders.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/open-order/CompletedOrders.md
deleted file mode 100644
index 1e9559895..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/open-order/CompletedOrders.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/open-order/CompletedOrders.tsx)
-
-This code defines a React functional component called `CompletedOrders` that displays a list of completed orders. The component imports several dependencies, including `React`, `Badge`, `CurrencyLogo`, `Lottie`, `OrderStatus`, `Pagination`, `loadingCircle`, `t`, `useLimitOrders`, and `useLingui`.
-
-The `CompletedOrders` component uses the `useLimitOrders` hook to retrieve a list of completed orders. If there are completed orders, the component displays a header with the total number of completed orders, a table of completed orders, and a pagination component. If there are no completed orders, the component displays a message indicating that there are no orders.
-
-The table of completed orders displays the following columns:
-
-- Receive: The token that the user received in the trade.
-- Pay: The token that the user paid in the trade.
-- Rate: The exchange rate between the two tokens.
-- Filled: The status of the order (filled, cancelled, or expired).
-
-Each row in the table represents a completed order and displays the following information:
-
-- The amount of the token that the user received.
-- The symbol of the token that the user received.
-- The amount of the token that the user paid.
-- The symbol of the token that the user paid.
-- The exchange rate between the two tokens.
-- The status of the order.
-
-The background color of each row depends on the status of the order. If the order is filled, the background color is green. If the order is cancelled, the background color is gray. If the order is expired, the background color is red.
-
-The `Pagination` component allows the user to navigate between pages of completed orders.
-
-This component can be used in a larger project that involves trading tokens. It provides a way for users to view their order history and track the status of their completed orders. The component can be customized to fit the design of the larger project. For example, the colors of the rows can be changed to match the color scheme of the project.
-## Questions:
- 1. What is the purpose of this code?
-- This code is a React component that displays a list of completed orders with pagination and some additional information.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including React, Lottie, and @lingui/macro.
-
-3. What data is being displayed in the completed orders list?
-- The completed orders list displays information about each completed order, including the amount of tokens received and paid, the exchange rate, and the order status (filled, cancelled, or expired).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/open-order/OpenOrders.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/open-order/OpenOrders.md
deleted file mode 100644
index b39e261cd..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/open-order/OpenOrders.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/open-order/OpenOrders.tsx)
-
-The `OpenOrders` component is a React functional component that displays a list of open limit orders. It imports several components from the `zoo` project, including `Badge`, `Button`, `CurrencyLogo`, `Pagination`, and `TransactionConfirmationModal`. It also imports several hooks from the `zoo` project, including `useLimitOrderContract`, `useLimitOrders`, `useLingui`, and `useTransactionAdder`. Finally, it imports the `LimitOrder` class from the `@zoolabs/zdk` package and the `Lottie` component from the `lottie-react` package.
-
-The component first initializes several variables using the imported hooks, including `i18n`, `pending`, `limitOrderContract`, `addTransaction`, and `hash`. `i18n` is used for internationalization, `pending` is used to track the status of the limit orders, `limitOrderContract` is used to interact with the limit order contract, `addTransaction` is used to add a transaction to the transaction list, and `hash` is used to store the hash of the transaction.
-
-The component then defines a `cancelOrder` function that cancels a limit order and adds a transaction to the transaction list. The function takes a `limitOrder` object and a `summary` string as arguments, calls the `cancelOrder` method of the `limitOrderContract` object, adds the resulting transaction to the transaction list using the `addTransaction` function, and updates the `hash` state variable with the hash of the transaction. Finally, the function waits for the transaction to complete and updates the limit orders using the `mutate` function.
-
-The component then returns a JSX element that displays the list of open limit orders. If there are no open limit orders, it displays a message encouraging the user to place an order. If there are open limit orders, it displays a table with information about each order, including the input and output tokens, the exchange rate, and the percentage of the order that has been filled. It also provides a button to cancel each order. The component uses the `Pagination` component to allow the user to navigate between pages of orders.
-
-Overall, the `OpenOrders` component provides a user-friendly interface for managing open limit orders in the `zoo` project. It uses several components and hooks from the project to provide a seamless user experience.
-## Questions:
- 1. What is the purpose of the `OpenOrders` component?
-- The `OpenOrders` component displays a list of open limit orders and allows the user to cancel them.
-
-2. What external libraries or components are being used in this file?
-- The file imports several components from external libraries, including `Badge` and `Button` from a custom component library, `Lottie` for animations, and `TransactionConfirmationModal` from a modal library.
-
-3. What hooks are being used in this file and what are they used for?
-- The file uses several custom hooks, including `useLimitOrderContract` for interacting with a limit order contract, `useLimitOrders` for fetching and managing open limit orders, `useLingui` for internationalization, and `useTransactionAdder` for adding transactions to the transaction history.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/open-order/Pagination.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/open-order/Pagination.md
deleted file mode 100644
index 5f9c6b28f..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/open-order/Pagination.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/open-order/Pagination.tsx)
-
-The `Pagination` component is a reusable React component that generates a pagination control for a list of items. It takes in four props: `currentPage`, `onChange`, `totalPages`, and `pageNeighbours`.
-
-The `currentPage` prop is the current page number, `onChange` is a callback function that is called when a page is clicked, `totalPages` is the total number of pages, and `pageNeighbours` is the number of pages to show on either side of the current page.
-
-The component generates a list of page numbers based on the `totalPages` and `pageNeighbours` props. It then renders a list of buttons, with the current page highlighted, and "Previous" and "Next" buttons on either end of the list. If there are more pages than can be displayed, the component will add ellipses to indicate that there are more pages available.
-
-The `range` function is a helper function that generates an array of numbers between two given numbers. It takes in three arguments: `from`, `to`, and `step`. It returns an array of numbers between `from` and `to`, incremented by `step`.
-
-The `Pagination` component uses the `range` function to generate the list of page numbers. It then uses the `reduce` method to generate an array of buttons for each page number. The buttons are wrapped in an array, with the "Previous" and "Next" buttons in their own arrays. The `reduce` method returns an array of three arrays: one for the "Previous" buttons, one for the page buttons, and one for the "Next" buttons.
-
-The `classNames` function is a utility function that generates a string of class names based on the arguments passed to it. It is used to generate the class names for the buttons.
-
-The `Pagination` component returns a `nav` element containing the list of buttons. If there is only one page, the component returns an empty fragment.
-
-Example usage:
-
-```jsx
-
-
- );
-}
-```
-
-In this example, the `TradeConfirmation` component receives a `trade` object that includes a `priceImpact` property of type `Percent`. The `FormattedPriceImpact` component is used to display the formatted price impact percentage with the appropriate text color based on the severity level.
-## Questions:
- 1. What is the purpose of the `Percent` import from `@zoolabs/zdk`?
- - The `Percent` import is likely used to handle percentage calculations in the code.
-2. What is the significance of the `ONE_BIPS` constant imported from `../../../constants`?
- - It is unclear from this code snippet what the `ONE_BIPS` constant is used for. Further investigation into the `constants` file may be necessary to determine its purpose.
-3. How is the `warningSeverity` function from `../../../functions/prices` used in this code?
- - The `warningSeverity` function is used to determine which CSS class to apply to the `div` element's `className` attribute based on the severity of the `priceImpact` value.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/MinerTip.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/MinerTip.md
deleted file mode 100644
index ce0983df4..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/MinerTip.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/MinerTip.tsx)
-
-The code is a React component that renders a slider for selecting a miner tip amount. The component imports several hooks from the `@zoolabs/zdk` and `../../../state/user/hooks` libraries. It also imports a `useArcherMinerTips` hook from `../../../hooks/useArcherMinerTips`.
-
-The `getMarkLabel` function returns a string label for each mark on the slider based on its index and the length of the marks array. The `getMarkSlippage` function returns a number representing the slippage tolerance for each mark on the slider based on its index. The `getMarksFromTips` function takes a record of miner tips and returns an object with keys representing the index of each mark on the slider and values representing the label, price, slippage, style, and class name for each mark.
-
-The `MinerTip` component uses several hooks to manage state. It uses `useToggleSettingsMenu` to toggle a settings menu, `useUserArcherTipManualOverride` to get the user's manual tip override setting, `useUserArcherETHTip` to get the user's ETH tip amount, `useUserArcherGasPrice` to set the user's gas price, and `useArcherMinerTips` to get the miner tips data.
-
-The component uses `React.useState` to manage the state of the slider value. It uses `React.useMemo` to memoize the `getMarksFromTips` function and the `marks` object. It uses `React.useCallback` to memoize the `handleChange` function. It uses `React.useEffect` to set the initial value of the slider and the user's gas price based on the middle mark of the `marks` object.
-
-The component renders a `Typography` component with the text "Miner Tip" and the user's ETH tip amount. If the user has not set a manual tip override and there are no miner tips data, the component returns `null`. Otherwise, it renders a `StyledSlider` component with the `marks`, `max`, `onChange`, `value`, and `step` props.
-
-This component can be used in a larger project to allow users to select a miner tip amount based on the current miner tips data. The component provides a user-friendly interface for selecting a miner tip amount and handles the logic of setting the user's gas price based on the selected tip amount.
-## Questions:
- 1. What is the purpose of this code?
-- This code is a React component that renders a slider for selecting a miner tip amount based on gas prices and slippage tolerance.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several functions and components from external libraries such as "@zoolabs/zdk", "react", and "styled-components". It also imports several custom hooks from the project's state and hooks directories.
-
-3. What is the significance of the `useEffect` hook in this code?
-- The `useEffect` hook is used to set the initial value of the slider and the gas price based on the middle value of the marks object. It also updates the slider value and gas price whenever the marks object or user tip manual override changes.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapModalFooter.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapModalFooter.md
deleted file mode 100644
index ee4a1afd7..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapModalFooter.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/SwapModalFooter.tsx)
-
-This code exports a React component called `SwapModalFooter` that renders the footer section of a swap modal. The component takes in four props: `trade`, `onConfirm`, `swapErrorMessage`, and `disabledConfirm`.
-
-The `trade` prop is an object of type `V2Trade` that represents the trade being made. The `onConfirm` prop is a function that is called when the user confirms the swap. The `swapErrorMessage` prop is a ReactNode that represents an error message to be displayed if the swap fails. The `disabledConfirm` prop is a boolean that determines whether the confirm button is disabled.
-
-The component renders a `div` element with a dark background color and some padding. Inside this `div`, there is a `ButtonError` component that represents the confirm button. When clicked, the `onConfirm` function is called. The button is disabled if the `disabledConfirm` prop is true. The text of the button is localized using the `i18n` object from the `useLingui` hook.
-
-If the `swapErrorMessage` prop is not null, the component also renders a `SwapCallbackError` component that displays the error message.
-
-The commented-out code inside the `div` element appears to be some additional UI elements that were not included in the final version of the component.
-
-This component can be used in a larger project that involves swapping between different currencies. It provides a reusable footer section for the swap modal that includes a confirm button and the ability to display error messages. The `trade` prop allows the component to display information about the trade being made, such as the price and liquidity provider fee. The `disabledConfirm` prop allows the parent component to disable the confirm button if necessary, such as when the user has not entered all required information.
-## Questions:
- 1. What dependencies does this code use?
-- This code imports several dependencies including `@zoolabs/zdk`, `react`, `@lingui/macro`, and `@lingui/react`.
-
-2. What is the purpose of the `SwapModalFooter` function?
-- The `SwapModalFooter` function is responsible for rendering the footer of a swap modal, including a confirmation button and a potential error message.
-
-3. What props does the `SwapModalFooter` function expect?
-- The `SwapModalFooter` function expects four props: `trade`, which is a trade object; `onConfirm`, which is a function to be called when the confirmation button is clicked; `swapErrorMessage`, which is an optional error message to display; and `disabledConfirm`, which is a boolean indicating whether the confirmation button should be disabled.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapModalHeader.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapModalHeader.md
deleted file mode 100644
index 195dfbacf..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapModalHeader.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/SwapModalHeader.tsx)
-
-This code defines a React component called `SwapModalHeader` that renders the header section of a swap modal. The component takes in several props, including the trade object, allowed slippage, recipient address, and other details related to the swap.
-
-The component first imports several dependencies, including React, `react-feather`, and `@zoolabs/zdk`. It also imports several utility functions from `../../../functions` and other components from the project.
-
-Inside the component, it uses the `useState` hook to manage the state of a boolean variable called `showInverted`. It also uses several other hooks, including `useLingui` and `useActiveWeb3React`, to access internationalization and web3-related functionality.
-
-The component then calculates the fiat value of the input and output amounts using the `useUSDCValue` hook. It also calculates the severity of the price impact using the `warningSeverity` function from `../../../functions`.
-
-The component renders several elements, including the input and output amounts, the trade price, and advanced swap details. It also conditionally renders an alert message if the price has been updated and the user needs to accept the changes. Finally, it displays a message indicating whether the input or output amount is estimated and the recipient address if applicable.
-
-This component is likely used in a larger project related to swapping tokens on a decentralized exchange. It provides a user-friendly interface for displaying key details related to a swap, including the input and output amounts, price, and estimated transaction details.
-## Questions:
- 1. What is the purpose of the `SwapModalHeader` component?
-- The `SwapModalHeader` component is responsible for rendering the header section of a swap modal, including details about the input and output currencies, trade price, and advanced swap details.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several external libraries and dependencies, including `react-feather`, `@zoolabs/zdk`, `@lingui/macro`, and `useActiveWeb3React`.
-
-3. What is the significance of the `showAcceptChanges` prop?
-- The `showAcceptChanges` prop determines whether or not to display a message indicating that the price of the trade has been updated and prompting the user to accept the changes.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapRoute.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapRoute.md
deleted file mode 100644
index 22d481a0b..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/SwapRoute.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/SwapRoute.tsx)
-
-This code defines a React component called `SwapRoute` that renders a visual representation of the route taken by a trade between two currencies. The component takes a single prop called `trade`, which is an object of type `Trade` that represents the trade being made. The `Trade` object is defined in the `@zoolabs/zdk` library, which is imported at the top of the file along with the `Currency` and `TradeType` types.
-
-The `SwapRoute` component renders a series of currency symbols separated by chevron icons. The currency symbols are extracted from the `path` property of the `Trade` object's `route` property. The `path` property is an array of `Currency` objects that represent the sequence of currencies involved in the trade. The `unwrappedToken` function is used to extract the `Currency` object from a wrapped token object, which is necessary because some currencies may be wrapped in other tokens for use on different blockchains.
-
-The component uses the `Fragment` component from React to group the currency symbols and chevron icons together. The `isLastItem` variable is used to determine whether or not to render a chevron icon after the current currency symbol. If the current currency symbol is the last one in the `path` array, no chevron icon is rendered.
-
-The `SwapRoute` component is exported as the default export of the file, and its `displayName` property is set to `"SwapRoute"`. This allows the component to be easily identified in React developer tools. The component is likely used in a larger project that involves trading between different currencies, and provides a visual representation of the route taken by a trade. Here is an example of how the `SwapRoute` component might be used in a larger React component:
-
-```
-import { Trade } from "@zoolabs/zdk";
-import SwapRoute from "./SwapRoute";
-
-function TradeDetails({ trade }: { trade: Trade }) {
- return (
- Trade Confirmation
-Price Impact:
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `SwapRoute` component?
- - The `SwapRoute` component takes in a `Trade` object and renders a series of currency symbols with chevron icons in between them to represent the path of the trade route.
-
-2. What is the `unwrappedToken` function and where is it defined?
- - The `unwrappedToken` function is imported from a file located at `../../../functions/currency/wrappedCurrency`. It takes in a token object and returns the underlying currency object.
-
-3. What is the significance of the `memo` and `displayName` properties on the `SwapRoute` component?
- - The `memo` property is used to memoize the component and improve performance by preventing unnecessary re-renders. The `displayName` property is used to give the component a display name for debugging purposes.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/TradePrice.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/TradePrice.md
deleted file mode 100644
index 165bd5e95..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/TradePrice.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/TradePrice.tsx)
-
-The `TradePrice` component is a React component that displays the exchange rate between two currencies. It takes in a `Price` object from the `@zoolabs/zdk` library, which represents the exchange rate between two currencies, and a boolean `showInverted` flag that determines whether to display the exchange rate in the base-to-quote or quote-to-base direction. The component also takes in a `setShowInverted` function that updates the `showInverted` flag, and an optional `className` string for custom styling.
-
-The component first uses the `useLingui` hook from the `@lingui/react` library to access the current language and translation functions. It then formats the exchange rate using the `toSignificant` method of the `Price` object, which returns a string representation of the exchange rate with a specified number of significant digits. If `showInverted` is true, the exchange rate is displayed in the quote-to-base direction, and if it is false, the exchange rate is displayed in the base-to-quote direction. If an error occurs during formatting, the exchange rate is set to "0".
-
-The component then generates two label strings based on the `showInverted` flag and the currencies in the `Price` object. The `flipPrice` function is a callback that toggles the `showInverted` flag when the component is clicked.
-
-Finally, the component returns a div element with the exchange rate and labels displayed, along with an icon that indicates that the exchange rate can be flipped by clicking on the component. The component also applies custom styling based on the `className` prop.
-
-This component can be used in a larger project that involves currency exchange, such as a cryptocurrency trading platform. It provides a user-friendly way to display exchange rates and allows users to easily switch between base-to-quote and quote-to-base rates. Here is an example of how the component can be used in a React application:
-
-```
-import { Currency, Price } from "@zoolabs/zdk";
-import TradePrice from "./TradePrice";
-
-function App() {
- const price = new Price(new Currency("USD"), new Currency("EUR"), "1.2345");
- const [showInverted, setShowInverted] = useState(false);
-
- return (
- Trade Details
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `TradePrice` component?
-- The `TradePrice` component is used to display the exchange rate between two currencies in a specific format.
-
-2. What external libraries are being used in this code?
-- The code is importing `Currency` and `Price` from the `@zoolabs/zdk` library, as well as `Typography`, `classNames`, `t`, and `useLingui` from other external libraries.
-
-3. What happens if there is an error when formatting the price?
-- If there is an error when formatting the price, the `formattedPrice` variable is set to the string "0".
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/UnsupportedCurrencyFooter.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/UnsupportedCurrencyFooter.md
deleted file mode 100644
index 7581488fd..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/UnsupportedCurrencyFooter.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/UnsupportedCurrencyFooter.tsx)
-
-This code defines a React component called `UnsupportedCurrencyFooter` that renders a footer section for a user interface. The footer displays a button that, when clicked, opens a modal dialog that lists any unsupported assets in the user's wallet. The modal dialog also provides additional information about why certain assets may not be available for trading.
-
-The component imports several other components from the `../../../components` directory, including `RowBetween`, `AutoColumn`, `Button`, `CloseIcon`, `CurrencyLogo`, `ExternalLink`, and `Modal`. It also imports two classes from the `@zoolabs/zdk` library: `Currency` and `Token`. The `useActiveWeb3React` and `useUnsupportedTokens` hooks are also imported from the `../../../hooks` directory.
-
-The `UnsupportedCurrencyFooter` component takes two props: `show` and `currencies`. The `show` prop is a boolean that determines whether the footer is visible or not. The `currencies` prop is an array of `Currency` or `undefined` objects that represent the assets in the user's wallet.
-
-The component renders a `DetailsFooter` styled component that contains a `Modal` component. The `Modal` component is only visible when the `showDetails` state variable is `true`. The `showDetails` state variable is initially set to `false` using the `useState` hook.
-
-The `tokens` variable is defined using the `currencies` prop and the `chainId` variable from the `useActiveWeb3React` hook. The `tokens` variable is an array of `Token` objects that represent the assets in the user's wallet.
-
-The `unsupportedTokens` variable is defined using the `useUnsupportedTokens` hook. The `unsupportedTokens` variable is an object that maps the addresses of unsupported assets to their corresponding `Token` objects.
-
-The `DetailsFooter` component contains a `Button` component that, when clicked, sets the `showDetails` state variable to `true`, which causes the `Modal` component to become visible. The `Modal` component contains a list of unsupported assets, along with their logos, symbols, and addresses. The `Modal` component also provides additional information about why certain assets may not be available for trading.
-
-Overall, this code provides a way for users to view any unsupported assets in their wallet and learn more about why certain assets may not be available for trading. This component can be used as part of a larger user interface for a decentralized exchange or other blockchain-based application.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `UnsupportedCurrencyFooter` that displays a button which, when clicked, opens a modal that lists any unsupported currencies in the user's wallet.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several components from the `../../../components` directory, as well as the `@zoolabs/zdk` library and the `styled-components` library.
-
-3. What is the significance of the `useUnsupportedTokens` hook?
-- The `useUnsupportedTokens` hook is used to retrieve a list of unsupported tokens from the `unsupportedTokens` object, which is then used to determine which currencies in the user's wallet are unsupported and should be displayed in the modal.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/confirmPriceImpactWithoutFee.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/confirmPriceImpactWithoutFee.md
deleted file mode 100644
index 94dc50405..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/confirmPriceImpactWithoutFee.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/confirmPriceImpactWithoutFee.ts)
-
-The code in this file is responsible for confirming a user's intention to proceed with a trade based on the price impact of the trade. The code imports two constants, ALLOWED_PRICE_IMPACT_HIGH and PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN, from a file located in the project's constants directory. It also imports the Percent class from the '@zoolabs/zdk' package.
-
-The confirmPriceImpactWithoutFee function takes in a priceImpactWithoutFee parameter, which is the price impact of the trade without the fee. The function then checks if the price impact is greater than or equal to PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN. If it is, the function prompts the user to confirm their intention to proceed with the trade by typing the word "confirm". If the user types "confirm", the function returns true, indicating that the trade can proceed. If the user does not type "confirm", the function returns false, indicating that the trade should not proceed.
-
-If the price impact is less than PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN, the function checks if it is greater than or equal to ALLOWED_PRICE_IMPACT_HIGH. If it is, the function prompts the user to confirm their intention to proceed with the trade by displaying a confirmation dialog box. If the user clicks "OK", the function returns true, indicating that the trade can proceed. If the user clicks "Cancel", the function returns false, indicating that the trade should not proceed.
-
-If the price impact is less than ALLOWED_PRICE_IMPACT_HIGH, the function returns true, indicating that the trade can proceed without any confirmation.
-
-This function is likely used in the larger project to ensure that users are aware of the potential price impact of their trades and to prevent accidental or unintended trades with high price impacts. Here is an example of how this function might be used in the larger project:
-
-```
-import confirmPriceImpactWithoutFee from './path/to/confirmPriceImpactWithoutFee'
-
-const priceImpactWithoutFee = new Percent(0.05) // 5% price impact without fee
-const shouldProceed = confirmPriceImpactWithoutFee(priceImpactWithoutFee)
-
-if (shouldProceed) {
- // proceed with trade
-} else {
- // do not proceed with trade
-}
-```
-## Questions:
- 1. What are the values of `ALLOWED_PRICE_IMPACT_HIGH` and `PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN`?
- - `ALLOWED_PRICE_IMPACT_HIGH` and `PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN` are constants imported from a file located at `../../../constants`.
-2. What is the purpose of the `Percent` class imported from `@zoolabs/zdk`?
- - The `Percent` class is likely used to represent percentage values in the code, possibly including the `priceImpactWithoutFee` parameter.
-3. What happens if the user does not confirm the price impact for the swap?
- - If the user does not confirm the price impact for the swap, the function will return `false`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/styleds.md b/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/styleds.md
deleted file mode 100644
index 8923f4cb8..000000000
--- a/.autodoc/docs/markdown/core/src/features/exchange-v1/swap/styleds.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/exchange-v1/swap/styleds.tsx)
-
-This code file imports several libraries and exports a few styled components and a React function component.
-
-The `React` and `ReactNode` libraries are imported from the `react` package. The `styled` and `css` libraries are imported from the `styled-components` package. The `AlertTriangle` icon is imported from the `react-feather` package. The `Slider` component is imported from the `rc-slider` package.
-
-The `ArrowWrapper` styled component is exported. It takes a boolean `clickable` prop and applies padding to the component. If `clickable` is true, it also applies a hover effect that changes the cursor to a pointer and reduces the opacity of the component.
-
-The `BottomGrouping` styled component is exported. It applies a margin to the top of the component.
-
-The `SwapCallbackError` function component is exported. It takes an object with an error property that can be any valid React node. It returns a div that contains the `AlertTriangle` icon and the error message.
-
-The `StyledSlider` styled component is exported. It applies custom styles to the `Slider` component imported from `rc-slider`. It sets the margin, width, and color of the slider. It also sets the color of the slider marks, rail, track, handle, and dot.
-
-These styled components and function component can be used in other components of the `zoo` project to create a consistent look and feel. For example, the `ArrowWrapper` component can be used to wrap arrow icons that should be clickable. The `StyledSlider` component can be used to create sliders with a custom appearance. The `SwapCallbackError` component can be used to display error messages in a consistent format.
-## Questions:
- 1. What is the purpose of the `ArrowWrapper` component and how is it used?
- - The `ArrowWrapper` component is a styled div that can be made clickable based on the `clickable` prop. It is likely used to wrap an arrow icon or element that can be clicked to trigger an action.
-2. What is the `StyledSlider` component and what are its styled sub-components?
- - The `StyledSlider` component is a styled version of the `Slider` component from the `rc-slider` library. Its styled sub-components include the rail, track, handle, and dot of the slider, as well as the text labels for the marks.
-3. What is the purpose of the `SwapCallbackError` component and what does it render?
- - The `SwapCallbackError` component renders an error message with a red alert icon. It takes an `error` prop that can be any React node, likely a string or JSX element, to display as the error message.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/inari/BalancePanel.md b/.autodoc/docs/markdown/core/src/features/inari/BalancePanel.md
deleted file mode 100644
index 594d7c2b5..000000000
--- a/.autodoc/docs/markdown/core/src/features/inari/BalancePanel.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/BalancePanel.tsx)
-
-The `BalancePanel` component is a React functional component that renders a panel displaying the balance of a given token and allows the user to input a value for that token. It is part of the larger `zoo` project and is used to display and manage balances in various parts of the application.
-
-The component takes several props, including a `label` and `symbol` for the token, a `value` representing the current input value, a `balance` representing the current balance of the token, and a `field` indicating whether the input is for the input or output token. The component also has an optional `showMax` prop that, when true, displays a "Max" button that sets the input value to the maximum balance.
-
-The component uses several hooks from the `inari` state, including `useDerivedInariState`, `useInariState`, and `useSelectedInariStrategy`. These hooks provide access to various state variables and functions related to the Inari protocol, which is used to swap tokens.
-
-The `BalancePanel` component renders a panel with the token logo, a numeric input field, and a "Max" button (if `showMax` is true). When the user inputs a value, the `dispatchValue` function is called, which updates the input and output values in the state using the `setValues` action. If the "Max" button is clicked, the `onMax` function is called, which sets the input value to the maximum balance.
-
-The `BalancePanel` component is used throughout the `zoo` project to display and manage token balances. For example, it may be used in a swap interface to allow the user to input the amount of tokens they wish to swap. Overall, the `BalancePanel` component provides a simple and reusable way to display token balances and manage user input.
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code defines a React component called `BalancePanel` that displays information about a token balance and allows the user to input a value for swapping tokens.
-2. What external libraries or dependencies does this code use?
-- This code imports several modules from external libraries including `@zoolabs/zdk`, `react`, and `@lingui/react`.
-3. What props does the `BalancePanel` component accept and what is their purpose?
-- The `BalancePanel` component accepts several props including `label`, `token`, `value`, `symbol`, `balance`, `field`, and `showMax`. These props are used to display information about the token balance and to allow the user to input a value for swapping tokens.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/inari/Button.md b/.autodoc/docs/markdown/core/src/features/inari/Button.md
deleted file mode 100644
index 5673ace7e..000000000
--- a/.autodoc/docs/markdown/core/src/features/inari/Button.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/Button.tsx)
-
-The `InariButton` component is a reusable button component that is used in the Inari section of the larger project. The purpose of this component is to provide a button that can be used to execute a transaction on the Inari strategy. The component is imported from various other files in the project, including hooks, components, and state.
-
-The component takes in various props, including `children` and `rest`. The `children` prop is used to render the text inside the button, while the `rest` prop is used to pass any additional props to the button component.
-
-The component uses various hooks to get the necessary data for the button. These hooks include `useLingui`, `useActiveWeb3React`, `useDerivedInariState`, `useSelectedInariStrategy`, and `useBentoMasterApproveCallback`. These hooks are used to get the user's account, the input value for the transaction, the balances, and the approval state.
-
-The component then checks various conditions to determine what should be rendered inside the button. If the user is not connected to a wallet, the button is disabled and displays the text "Connect Wallet". If the user has not entered an amount for the transaction, the button is disabled and displays the text "Enter an amount". If the user does not have enough balance for the transaction, the button is disabled and displays the text "Insufficient Balance".
-
-If the user needs to approve the transaction, the component displays a progress bar with the steps required for approval. If the approval is pending, the button is disabled and displays a loading animation. If the approval has not been granted, the button is enabled and displays the text "Approve Inari to spend [currency symbol]". If the approval has been granted, the button is enabled and displays the text "Execute".
-
-Once the user clicks the button, the `onExecute` function is called, which sets the `pending` state to true, executes the transaction, and sets the `pending` state to false. If the user needs to get a permit to send with the execute function, the `handleGetPermit` function is called.
-
-Overall, the `InariButton` component provides a reusable button that can be used to execute transactions on the Inari strategy. The component checks various conditions to ensure that the user has entered the correct information and has the necessary approvals before executing the transaction.
-## Questions:
- 1. What is the purpose of this code and where is it used in the project?
-- This code defines a React component called `InariButton` that is used to handle user interactions with a button related to the Inari strategy. It is used in various parts of the project where the Inari strategy is used.
-
-2. What external libraries or dependencies does this code rely on?
-- This code relies on several external libraries and dependencies, including `React`, `@zoolabs/zdk`, `@lingui/react`, and `ProgressSteps` and various custom hooks defined in other parts of the project.
-
-3. What are the different conditions under which the button can be disabled or display different text?
-- The button can be disabled or display different text under several conditions, including when the user is not connected to a wallet, when the user has not entered a valid amount, when the user has insufficient balance, and when the user needs to approve Inari to spend a certain currency. The button can also display a loading indicator when a transaction is pending.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/inari/InariDescription.md b/.autodoc/docs/markdown/core/src/features/inari/InariDescription.md
deleted file mode 100644
index 2e66d2d68..000000000
--- a/.autodoc/docs/markdown/core/src/features/inari/InariDescription.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/InariDescription.tsx)
-
-This code defines a React functional component called `InariDescription` that renders a header section for a specific entity in the larger project. The component imports the `React` library and the `FC` (FunctionComponent) type from the `react` module, as well as the `Typography` component and a custom hook called `useDerivedInariState` from other files in the project.
-
-The `InariDescription` component takes no props, but uses the `useDerivedInariState` hook to retrieve the `general` object from the `inari` state. This object contains information about the entity, such as its name and description.
-
-The component then renders a `div` element with a CSS class of `grid` and a gap of 2 units between its child elements. Inside the `div`, it renders two `Typography` components. The first one displays the name of the entity in a large font size and with a high emphasis color, while the second one displays its description in a regular font size.
-
-This component can be used in other parts of the project to display the header section of any entity that has a `general` object in its `inari` state. For example, if the project has a `zoo` entity, the `InariDescription` component can be used to display its name and description in the header section of the `zoo` page.
-
-Here's an example of how the `InariDescription` component can be used in a `zoo` page:
-
-```
-import React from 'react'
-import InariDescription from './InariDescription'
-
-const ZooPage = () => {
- return (
-
-
- )
-}
-
-export default ZooPage
-```
-## Questions:
- 1. What is the purpose of the `InariHeaderProps` interface?
- - The `InariHeaderProps` interface is used to define the props that can be passed to the `InariDescription` component.
-
-2. What is the `useDerivedInariState` hook and where is it defined?
- - The `useDerivedInariState` hook is defined in the `../../state/inari/hooks` file and is used to access the derived state of the `inari` slice of the Redux store.
-
-3. What is the `Typography` component and where is it defined?
- - The `Typography` component is defined in the `../../components/Typography` file and is used to render text with different styles and variants.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/inari/OutputPanel.md b/.autodoc/docs/markdown/core/src/features/inari/OutputPanel.md
deleted file mode 100644
index 11109aac6..000000000
--- a/.autodoc/docs/markdown/core/src/features/inari/OutputPanel.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/OutputPanel.tsx)
-
-This code defines a React functional component called `OutputPanel` that renders a `CurrencyInputPanel` component with some custom props. The `CurrencyInputPanel` component is imported from a file located at `../exchange-v1/limit-order/CurrencyInputPanel`. The `OutputPanel` component takes in a single prop called `label` of type string.
-
-The `CurrencyInputPanel` component is a custom input component that allows users to input a currency value. It consists of two main components: a select component and an input component. The select component is a `Typography` component that displays the currency symbol and label passed in as a prop. The input component is a `div` element with a custom class that styles it to look like an input field.
-
-The `OutputPanel` component customizes the `CurrencyInputPanel` component by passing in the following props:
-- `id`: a string that sets the id of the `CurrencyInputPanel` component to "token-output"
-- `className`: a string that sets the class of the `CurrencyInputPanel` component to "rounded p-0 px-5 border-2 border-dark-800 flex items-center"
-- `selectComponent`: a JSX element that renders the `Typography` component with the `label` prop passed in as its child
-- `inputComponent`: a JSX element that renders a `div` element with a custom class that styles it to look like an input field
-
-This component can be used in a larger project that requires a custom input component for currency values. It can be imported and used in any React component that needs to display an output currency value. For example, in a financial application that displays the total value of a user's portfolio, the `OutputPanel` component can be used to display the value in the user's preferred currency.
-
-Example usage:
-```
-import React from 'react';
-import OutputPanel from './OutputPanel';
-
-const PortfolioValue = () => {
- const totalValue = 10000; // total value of user's portfolio
- const currency = 'USD'; // user's preferred currency
-
- return (
-
-
- );
-};
-
-export default PortfolioValue;
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
- This code defines a React functional component called OutputPanel that renders a CurrencyInputPanel with a label and an input component.
-
-2. What are the props that can be passed to the OutputPanel component?
- The only prop that can be passed to the OutputPanel component is a string label.
-
-3. What other components are being imported and used in this code?
- This code imports two other components: CurrencyInputPanel and Typography, both from different files in the project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/inari/SideSwitch.md b/.autodoc/docs/markdown/core/src/features/inari/SideSwitch.md
deleted file mode 100644
index 8e1eb3486..000000000
--- a/.autodoc/docs/markdown/core/src/features/inari/SideSwitch.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/SideSwitch.tsx)
-
-The code defines a React functional component called SideSwitch that renders a toggle switch with two labels: "Withdraw" and "Deposit". The switch is implemented using the Switch component from the Headless UI library. The state of the switch is controlled by the zapIn variable obtained from the useInariState hook, which is part of the Inari state management system. The setZapIn function from the Inari actions is used to update the state of the switch when it is toggled. The labels are localized using the Lingui library, which provides internationalization support for React applications.
-
-The SideSwitch component is likely used in a larger project that involves some kind of financial transaction system, where users can either withdraw or deposit funds. The switch allows the user to toggle between these two modes. The use of the Inari state management system suggests that the project is complex and requires a robust state management solution. The use of the Lingui library suggests that the project is intended for use in multiple languages and locales.
-
-Here is an example of how the SideSwitch component might be used in a parent component:
-
-```
-import React from 'react'
-import SideSwitch from './SideSwitch'
-
-const TransactionForm = () => {
- return (
- Portfolio Value
-
-
- )
-}
-
-export default TransactionForm
-```
-
-In this example, the SideSwitch component is rendered as part of a larger transaction form. The form allows the user to enter transaction details, such as the amount to withdraw or deposit. The SideSwitch component allows the user to toggle between these two modes.
-## Questions:
- 1. What is the purpose of this code and where is it used in the project?
- - This code is a React component called `SideSwitch` that renders a switch with labels for "Withdraw" and "Deposit". It is likely used in a UI component related to financial transactions.
-2. What external libraries or dependencies does this code rely on?
- - This code relies on several external libraries including `@headlessui/react`, `@heroicons/react/outline`, `@lingui/macro`, `@lingui/react`, and custom hooks from `../../state/inari/hooks` and `../../state/hooks`.
-3. What state is being managed by this component and how is it updated?
- - The `zapIn` state is being managed by this component and is updated by dispatching the `setZapIn` action with the opposite boolean value of the current `zapIn` state when the switch is toggled. The `zapIn` state is obtained from the `useInariState` hook and the `setZapIn` action is dispatched using the `useAppDispatch` hook.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/inari/StrategySelector.md b/.autodoc/docs/markdown/core/src/features/inari/StrategySelector.md
deleted file mode 100644
index 8c15918c7..000000000
--- a/.autodoc/docs/markdown/core/src/features/inari/StrategySelector.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/StrategySelector.tsx)
-
-The code above is a React component called `StrategySelector` that renders a list of strategies and allows the user to select one. The component is part of a larger project called `zoo` and imports several functions and hooks from other files in the project.
-
-The `StrategySelector` component receives no props and uses three hooks: `useInariState`, `useInariStrategies`, and `useAppDispatch`. These hooks are used to retrieve the current strategy ID, a list of available strategies, and a dispatch function to update the state of the application.
-
-The component renders a `div` element with a class of `flex flex-col gap-4 z-10 relative`. Inside this `div`, the component maps over the list of strategies and renders a `div` element for each one. Each `div` element has a `key` attribute set to the strategy's ID and an `onClick` event listener that dispatches an action to update the current strategy ID when the user clicks on it.
-
-The `classNames` function is used to conditionally set the `className` attribute of each `div` element based on whether the strategy is currently selected or not. If the strategy is selected, the `className` attribute is set to `'border-gradient-r-blue-pink-dark-800'`, otherwise it is set to `'bg-dark-900'`. The `classNames` function also adds several other classes to each `div` element, including `'cursor-pointer'`, `'border'`, `'border-transparent'`, `'pl-5'`, `'py-2'`, `'rounded'`, `'whitespace-nowrap'`, `'w-full'`, `'font-bold'`, `'h-[48px]'`, `'flex'`, `'items-center'`, and `'text-sm'`. These classes are used to style the `div` elements to look like buttons.
-
-Finally, the `div` elements display the name of each strategy, which is retrieved from the `general.name` property of each strategy object.
-
-Overall, the `StrategySelector` component is a reusable UI component that allows the user to select a strategy from a list of available strategies. It is likely used in conjunction with other components and functions in the `zoo` project to provide a complete user interface for managing and analyzing data related to animal behavior. An example usage of this component might look like:
-
-```
-import StrategySelector from './components/StrategySelector'
-
-function App() {
- return (
- Transaction Form
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this component and how is it used within the larger project?
- - This component appears to be a strategy selector that is used within the Inari feature of the project. It renders a list of strategies and allows the user to select one. It is likely used in conjunction with other components to provide a complete user interface for managing Inari strategies.
-2. What is the `useInariState` hook and what data does it provide?
- - The `useInariState` hook is imported from a file located at `../../state/inari/hooks` and appears to provide access to the current Inari state, including the selected strategy ID.
-3. What is the purpose of the `classNames` function and where is it defined?
- - The `classNames` function is imported from a file located at `../../functions` and appears to be used to conditionally apply CSS classes to the rendered `div` element based on the current strategy ID. It likely provides a convenient way to generate complex class names based on dynamic data.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/inari/StrategyStepDisplay.md b/.autodoc/docs/markdown/core/src/features/inari/StrategyStepDisplay.md
deleted file mode 100644
index 95180c366..000000000
--- a/.autodoc/docs/markdown/core/src/features/inari/StrategyStepDisplay.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/inari/StrategyStepDisplay.tsx)
-
-The `StrategyStepDisplay` component is a React functional component that displays a list of steps in a strategy. It receives no props and uses the `useDerivedInariState` hook to retrieve the `general` property from the Inari state.
-
-The component renders a `div` element with a class of `flex items-center gap-3 text-high-emphesis`. Inside this `div`, the component maps over the `general.steps` array and creates a `Typography` component for each step. The `Typography` component receives a `weight` prop of `700` and a `variant` prop of `lg`, and displays the text of the step.
-
-After mapping over the `general.steps` array, the component uses the `reduce` method to concatenate the `Typography` components with an `ArrowRightIcon` component in between each one. The `reduce` method takes two arguments: a callback function and an initial value. The callback function takes two arguments: an accumulator and the current value. The initial value is `null`.
-
-The callback function checks if the accumulator is `null`. If it is, it returns the current value. If it is not, it returns a `div` element containing the accumulator, an `ArrowRightIcon` component, and the current value. The `ArrowRightIcon` component has a `width` prop of `16` and a `height` prop of `16`. The `div` element has a class of `rounded-full p-1 bg-dark-800 border-[3px] border-dark-900 relative z-10`.
-
-The resulting JSX is then rendered inside the `div` element with the `flex items-center gap-3 text-high-emphesis` class.
-
-This component can be used in a larger project to display a list of steps in a strategy. For example, it could be used in a financial planning app to display the steps a user needs to take to achieve their financial goals. Here is an example of how the component could be used:
-
-```
-Select a strategy:
-|
- |
-
- |
-
- |
-
|---|---|---|
| {item.name} | -{item.age} | -{item.date} | -
-
- )
-}
-
-export default BorrowMarket
-```
-## Questions:
- 1. What is the purpose of the `MarketHeader` function and what are its expected inputs and outputs?
-- The `MarketHeader` function is a React component that returns a `Card.Header` element with a title, search input, and search icon. It takes in two props: `type` (default value of 'Borrow') and `lists`, and returns a JSX element.
-
-2. What is the purpose of the `onSearch` function and how is it used?
-- The `onSearch` function is called when the user types into the search input and updates the search term for each list in the `lists` array. It is used as an event handler for the `onChange` event of the search input.
-
-3. What is the purpose of the `classNames` function and where is it imported from?
-- The `classNames` function is used to conditionally apply CSS classes to the `Card.Header` element based on the value of the `type` prop. It is imported from a file located at `../../functions`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/kashi/SmartNumberInput.md b/.autodoc/docs/markdown/core/src/features/kashi/SmartNumberInput.md
deleted file mode 100644
index f72d46472..000000000
--- a/.autodoc/docs/markdown/core/src/features/kashi/SmartNumberInput.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/kashi/SmartNumberInput.tsx)
-
-The `SmartNumberInput` function is a React component that renders a form input field with additional functionality for handling numeric values. The component takes in several props that allow for customization of the input field and its behavior.
-
-The component renders two main sections: a header section and an input section. The header section displays a title, a button to toggle between using a BentoBox or a Wallet, and a maximum value. The input section displays a numeric input field and a button to set the input value to the maximum value.
-
-The `SmartNumberInput` component is designed to be used in a larger project where numeric input fields are required. The component can be customized to fit the specific needs of the project by passing in different props. For example, the `color` prop can be used to change the color of the input field and the `useBento` prop can be used to determine whether the input value is coming from a BentoBox or a Wallet.
-
-Here is an example of how the `SmartNumberInput` component can be used in a React project:
-
-```
-import SmartNumberInput from './SmartNumberInput'
-
-function MyForm() {
- const [value, setValue] = useState('')
- const max = BigNumber.from(1000)
-
- return (
-
- )
-}
-```
-
-In this example, the `SmartNumberInput` component is used in a form to handle numeric input for a token. The `value` and `setValue` props are used to control the value of the input field, and the `max` prop is used to set the maximum value of the input field. The `showMax` prop is set to `true` to display the maximum value button.
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code defines a React component called `SmartNumberInput` that renders a form input field with some additional features such as a toggle button and a maximum value display.
-
-2. What external libraries or dependencies does this code rely on?
-- This code imports two components from the `react-feather` library, as well as the `BigNumber` class from the `@ethersproject/bignumber` library. It also uses two custom components called `Button` and `Input` that are presumably defined elsewhere in the project.
-
-3. What are the optional props that can be passed to this component and what do they do?
-- The `SmartNumberInput` component accepts several optional props, including `color` (which determines the color scheme of the component), `token` (which is an object containing information about a cryptocurrency token), `value` (which is the current value of the input field), `setValue` (which is a function to update the value of the input field), and several others. These props control various aspects of the component's behavior and appearance, such as whether to display a maximum value button, whether to use a BentoBox or wallet balance, and whether the component is disabled.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/kashi/TradeReview.md b/.autodoc/docs/markdown/core/src/features/kashi/TradeReview.md
deleted file mode 100644
index a07cb0a53..000000000
--- a/.autodoc/docs/markdown/core/src/features/kashi/TradeReview.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/kashi/TradeReview.tsx)
-
-The `TradeReview` component is a React component that displays a summary of a trade that is about to be executed on a decentralized exchange. The component takes two props: `trade` and `allowedSlippage`. `trade` is an object that represents the trade to be executed, while `allowedSlippage` is a number that represents the maximum amount of slippage that is allowed for the trade.
-
-The component first imports several modules from the `@zoolabs/zdk` library, as well as several React components and hooks. It then defines the `TradeReview` function component, which returns a JSX element that displays the trade summary.
-
-The component first checks if a trade object has been passed as a prop. If not, it displays a message indicating that no liquidity was found to do the swap. If a trade object is present, the component displays several pieces of information about the trade, including the minimum amount of output currency that will be received, the price impact of the trade, and the liquidity provider fee.
-
-The component also checks if the trade has a route with more than two tokens. If so, it displays the route that the trade will take through the tokens.
-
-The `TradeReview` component is likely used in a larger project that involves executing trades on a decentralized exchange. It provides users with a summary of the trade they are about to execute, including important information such as the minimum amount of output currency they will receive and the price impact of the trade. This information can help users make informed decisions about whether to proceed with the trade or not.
-## Questions:
- 1. What is the purpose of the `TradeReview` component?
-- The `TradeReview` component is used to display information about a trade, including the minimum amount received, price impact, liquidity provider fee, and route.
-
-2. What libraries and hooks are being imported in this file?
-- The file is importing `@zoolabs/zdk`, `React`, `useMemo`, `@lingui/macro`, `useActiveWeb3React`, and `useLingui`.
-
-3. What is the significance of the `allowedSlippage` prop?
-- The `allowedSlippage` prop is used to determine the minimum amount of output currency that must be received in a trade, taking into account the maximum allowable slippage.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/kashi/TransactionReview.md b/.autodoc/docs/markdown/core/src/features/kashi/TransactionReview.md
deleted file mode 100644
index de8ae7d58..000000000
--- a/.autodoc/docs/markdown/core/src/features/kashi/TransactionReview.md
+++ /dev/null
@@ -1,49 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/kashi/TransactionReview.tsx)
-
-The `TransactionReviewView` function in this file is a React component that renders a transaction review. It takes a single prop, `transactionReview`, which is an array of objects representing each line of the review. Each object has three properties: `name`, `from`, and `to`, which represent the name of the transaction, the sender of the transaction, and the recipient of the transaction, respectively. Additionally, each object has a `direction` property, which is an enum value from the `Direction` enum defined in `TransactionReview.ts`.
-
-The component first checks if `transactionReview` is truthy and has a length greater than 0. If so, it renders a heading ("Transaction Review") and a list of lines, where each line is rendered as a flexbox with two columns: the name of the transaction in the left column, and the sender and recipient in the right column. The direction of the transaction is indicated by an arrow icon between the sender and recipient, with the icon pointing right for a flat transaction, up for a positive transaction, and down for a negative transaction.
-
-This component can be used in the larger project to display a summary of a transaction review to the user. For example, it could be used in a wallet application to show the user a summary of the transactions they have made or received. Here is an example usage of the component:
-
-```jsx
-import TransactionReviewView from './TransactionReviewView'
-
-const transactionReview = [
- {
- name: 'Transaction 1',
- from: 'Alice',
- to: 'Bob',
- direction: Direction.UP,
- },
- {
- name: 'Transaction 2',
- from: 'Charlie',
- to: 'Alice',
- direction: Direction.FLAT,
- },
- {
- name: 'Transaction 3',
- from: 'Bob',
- to: 'Eve',
- direction: Direction.DOWN,
- },
-]
-
-function MyComponent() {
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `TransactionReviewView` function?
-- The `TransactionReviewView` function is a React component that renders a list of transaction review lines.
-
-2. What is the `TransactionReview` entity and where is it defined?
-- The `TransactionReview` entity is used as a type for the `transactionReview` prop passed to the `TransactionReviewView` component. It is defined in a file located at `../../entities/TransactionReview`.
-
-3. What is the purpose of the `ArrowRight`, `ArrowUpRight`, and `ArrowDownRight` components imported from `react-feather`?
-- These components are icons that are used to indicate the direction of a transaction review line. The `ArrowRight` component is used for a flat direction, `ArrowUpRight` for an up direction, and `ArrowDownRight` for a down direction.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/kashi/WarningsList.md b/.autodoc/docs/markdown/core/src/features/kashi/WarningsList.md
deleted file mode 100644
index 9bdad757a..000000000
--- a/.autodoc/docs/markdown/core/src/features/kashi/WarningsList.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/kashi/WarningsList.tsx)
-
-The code above is a React component that renders a list of warnings. It imports the `Alert` component from the `../../components/Alert` file and the `Warnings` entity from the `../../entities/Warnings` file. The `WarningsList` function takes a single parameter, `warnings`, which is an array of `Warnings` objects.
-
-The `WarningsList` function returns a list of `Alert` components, one for each warning in the `warnings` array. The `map` function is used to iterate over the `warnings` array and create an `Alert` component for each warning. The `key` prop is set to the index of the warning in the array, and the `type` prop is set to `'error'` if the warning is marked as `breaking`, and `'warning'` otherwise. The `message` prop is set to the `message` property of the warning object. Finally, the `className` prop is set to `'mb-4'` to add some margin to each `Alert` component.
-
-This component can be used in the larger project to display a list of warnings to the user. For example, if the project has a build process that checks for potential issues or breaking changes, the `WarningsList` component can be used to display these warnings to the user. The `Warnings` entity can be populated with the results of the build process, and passed to the `WarningsList` component to display the warnings.
-
-Here is an example of how the `WarningsList` component can be used in a larger project:
-
-```
-import React from 'react'
-import WarningsList from './WarningsList'
-import { getBuildWarnings } from './build'
-
-function App() {
- const warnings = getBuildWarnings()
-
- return (
-
-
- )
-}
-
-export default App
-```
-
-In this example, the `App` component calls the `getBuildWarnings` function to get an array of `Warnings` objects, and passes it to the `WarningsList` component as a prop. The `WarningsList` component then renders a list of `Alert` components for each warning in the array.
-## Questions:
- 1. What is the purpose of the `Alert` component being imported?
-- The `Alert` component is being used to display warning messages in the `WarningsList` component.
-
-2. What is the `Warnings` entity and where is it defined?
-- The `Warnings` entity is being used as a type for the `warnings` prop in the `WarningsList` component. It is defined in a file located at `zoo/entities/Warnings`.
-
-3. What determines whether the `Alert` component displays an error or warning message?
-- The `type` prop of the `Alert` component is determined by the `breaking` property of each `warning` object. If `breaking` is true, the type will be set to `'error'`, otherwise it will be set to `'warning'`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/kashi/Withdraw.md b/.autodoc/docs/markdown/core/src/features/kashi/Withdraw.md
deleted file mode 100644
index ed4a42734..000000000
--- a/.autodoc/docs/markdown/core/src/features/kashi/Withdraw.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/kashi/Withdraw.tsx)
-
-The `LendWithdrawAction` function is a React component that handles the withdrawal of assets from a Kashi market. The component takes a `pair` object as a prop, which contains information about the asset pair being traded in the market. The component renders a form that allows the user to specify the amount of the asset they wish to withdraw, and provides feedback on the potential transaction.
-
-The component uses several hooks to manage state and perform actions. The `useActiveWeb3React` hook retrieves the current Ethereum account from the user's web3 provider. The `useKashiApprovalPending` hook checks whether the user has approved the Kashi market to spend their assets. The `useKashiApproveCallback` hook handles the approval process and returns several functions that are used in the withdrawal process.
-
-The component uses several pieces of information from the `pair` object to calculate the maximum amount of the asset that can be withdrawn, and to determine the amount of the asset that the user wishes to withdraw. The `minimum` function is used to ensure that the calculated values do not exceed certain limits.
-
-The component also performs several checks to ensure that the withdrawal is valid. The `Warnings` class is used to store any warnings that may be generated during the withdrawal process. If any warnings are present, they are displayed to the user. The `TransactionReview` class is used to store information about the potential transaction, such as the amount of the asset being withdrawn and the resulting changes to the user's balances.
-
-Finally, the component renders a button that initiates the withdrawal process. When the button is clicked, the `onCook` function is called with the `pair` object and an `onExecute` function as arguments. The `onExecute` function calculates the fraction of the asset to be withdrawn and calls the `removeAsset` function on a `KashiCooker` object to initiate the withdrawal. The `onCook` function then returns a string indicating the success of the withdrawal.
-
-Example usage:
-
-```jsx
-My App
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `CurrencyInputPanel` that renders a panel for inputting currency amounts and displays information about the selected currency.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several modules from external libraries, including `@zoolabs/zdk`, `next/image`, `@lingui/macro`, and `useUSDCPrice`.
-
-3. What props does the `CurrencyInputPanel` component expect?
-- The `CurrencyInputPanel` component expects three props: `field`, which specifies the currency field to which this panel corresponds; `meowshiState`, which contains information about the currencies and input fields; and `showMax`, which determines whether a "Max" button should be displayed to allow the user to input the maximum available balance for the selected currency.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/meowshi/HeaderToggle.md b/.autodoc/docs/markdown/core/src/features/meowshi/HeaderToggle.md
deleted file mode 100644
index 293a94f55..000000000
--- a/.autodoc/docs/markdown/core/src/features/meowshi/HeaderToggle.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/meowshi/HeaderToggle.tsx)
-
-The `HeaderToggle` component is a React functional component that renders a toggle switch with two options: "Meow" and "Un-Meow". The toggle switch is implemented using the `RadioGroup` component from the `@headlessui/react` library.
-
-The component takes in a prop called `meowshiState`, which is an object that contains two properties: `meow` and `switchCurrencies`. `meow` is a boolean value that represents the current state of the toggle switch, and `switchCurrencies` is a function that toggles the value of `meow`.
-
-When the component is rendered, it displays the toggle switch with two options: "Meow" and "Un-Meow". The currently selected option is highlighted with a gradient background color. When the user clicks on one of the options, the `switchCurrencies` function is called to toggle the value of `meow`.
-
-In addition to the toggle switch, the component also displays a text box that shows the conversion rate between xSUSHI and MEOW. The text box is styled with a gradient border and a rounded border radius.
-
-This component can be used in the larger project to allow users to toggle between different modes or settings. For example, it could be used to toggle between light mode and dark mode, or between different languages. The `HeaderToggle` component can be easily customized by changing the text and styling to fit the specific needs of the project.
-
-Example usage:
-
-```
-import HeaderToggle from './HeaderToggle'
-
-function App() {
- const [meowshiState, setMeowshiState] = useState({ meow: true })
-
- const handleSwitchCurrencies = () => {
- setMeowshiState({ meow: !meowshiState.meow })
- }
-
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a React component called `HeaderToggle` that renders a radio group with two options and a text element.
-
-2. What props does the `HeaderToggle` component expect?
-- The `HeaderToggle` component expects a prop called `meowshiState` of type `MeowshiState`.
-
-3. What external libraries or components are being used in this code?
-- This code imports `React`, `RadioGroup` from `@headlessui/react`, `Typography`, and `classNames`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/meowshi/MeowshiButton.md b/.autodoc/docs/markdown/core/src/features/meowshi/MeowshiButton.md
deleted file mode 100644
index c181ff6f8..000000000
--- a/.autodoc/docs/markdown/core/src/features/meowshi/MeowshiButton.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/meowshi/MeowshiButton.tsx)
-
-The `MeowshiButton` component is a React functional component that renders a button for converting between SUSHI and xSUSHI tokens using the Meowshi protocol. The component imports various hooks, components, and utility functions from different files in the project.
-
-The component takes a single prop `meowshiState` which is an object containing the current state of the Meowshi protocol. The state includes the currencies being converted, the input and output fields, and a boolean flag indicating whether the user wants to convert from SUSHI to xSUSHI or vice versa.
-
-The component first initializes various state variables using the `useState` hook. It then uses the `useActiveWeb3React` hook to get the current user's account and chain ID. It also uses the `useTokenBalance` hook to get the user's SUSHI and xSUSHI token balances.
-
-The component then uses the `useMeowshi` hook to get the current approval state and to approve, convert, and unconvert tokens using the Meowshi protocol. It also uses the `tryParseAmount` function to parse the input and output amounts entered by the user.
-
-The component then renders different buttons depending on the current approval state and network. If the user is not connected to a wallet, the component renders a disabled button prompting the user to connect to a wallet. If the user is on a network other than the mainnet, the component renders a disabled button indicating that the network is not yet supported. If the user has not yet approved the Meowshi protocol to spend their tokens, the component renders a button prompting the user to approve the protocol. If the user has approved the protocol, the component renders a button that, when clicked, opens a confirmation modal and converts the tokens.
-
-Overall, this component provides a simple and user-friendly way for users to convert between SUSHI and xSUSHI tokens using the Meowshi protocol. It can be used in the larger project as a building block for more complex features that involve token conversions.
-
-Example usage:
-
-```jsx
-import MeowshiButton from './MeowshiButton';
-
-const MyComponent = () => {
- const meowshiState = {
- currencies: {
- input: SUSHI,
- output: XSUSHI
- },
- fields: {
- input: '10',
- output: ''
- },
- meow: true
- };
-
- return (
-
-
- );
-};
-```
-## Questions:
- 1. What is the purpose of the `MeowshiButton` component?
-- The `MeowshiButton` component is used to render a button that allows the user to convert between two different currencies.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including `@zoolabs/zdk`, `@ethersproject/units`, `@lingui/macro`, and several custom hooks and components.
-
-3. What conditions must be met for the button to be enabled?
-- The button is enabled if the user is connected to a wallet, the network is set to `ChainId.MAINNET`, and the user has approved the necessary token allowance. Additionally, the button is disabled if the user's balance is insufficient or if no amount has been entered.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/migration/index.md b/.autodoc/docs/markdown/core/src/features/migration/index.md
deleted file mode 100644
index caeec25ca..000000000
--- a/.autodoc/docs/markdown/core/src/features/migration/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/migration/index.ts)
-
-The code above is a simple export statement that defines an array called `MigrationSupported`. This array contains three elements, which are constants imported from the `@zoolabs/zdk` library: `ChainId.MAINNET`, `ChainId.BSC`, and `ChainId.MATIC`.
-
-The purpose of this code is to provide a list of supported blockchain networks for the migration of assets in the larger zoo project. The `ChainId` constants represent unique identifiers for different blockchain networks, and by including them in the `MigrationSupported` array, the code ensures that assets can be migrated between these networks.
-
-For example, if a user wants to migrate an asset from the Binance Smart Chain (BSC) to the Polygon (MATIC) network, they can use the `MigrationSupported` array to check if this migration is supported. They can do this by checking if both `ChainId.BSC` and `ChainId.MATIC` are included in the array. If they are, the migration is supported, and the user can proceed with the migration.
-
-Here's an example of how this code might be used in the larger zoo project:
-
-```javascript
-import { MigrationSupported } from 'zoo'
-
-const sourceChain = ChainId.BSC
-const targetChain = ChainId.MATIC
-
-if (MigrationSupported.includes(sourceChain) && MigrationSupported.includes(targetChain)) {
- // Perform asset migration from BSC to MATIC
-} else {
- console.log('Asset migration not supported for the selected source and target chains.')
-}
-```
-
-In this example, the `MigrationSupported` array is imported from the `zoo` module. The `sourceChain` and `targetChain` variables are set to `ChainId.BSC` and `ChainId.MATIC`, respectively. The `includes()` method is then used to check if both `sourceChain` and `targetChain` are included in the `MigrationSupported` array. If they are, the asset migration can proceed. If not, an error message is logged to the console.
-
-Overall, this code provides a simple and flexible way to manage asset migrations between different blockchain networks in the larger zoo project.
-## Questions:
- 1. What is the purpose of this code?
- - This code exports an array of supported chain IDs for migration in the `zoo` project.
-
-2. What is the `ChainId` module and where does it come from?
- - The `ChainId` module is imported from the `@zoolabs/zdk` package, which is likely a custom library developed by the `zoo` project team.
-
-3. Are there any other modules or functions that depend on this `MigrationSupported` array?
- - Without further context, it is unclear whether other parts of the `zoo` project depend on this array. However, it is possible that other migration-related functions or modules may reference this array.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/miso/Article.md b/.autodoc/docs/markdown/core/src/features/miso/Article.md
deleted file mode 100644
index 2aa2d608a..000000000
--- a/.autodoc/docs/markdown/core/src/features/miso/Article.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/miso/Article.tsx)
-
-The code above defines a React functional component called `Article`. This component takes in two props: `title` and `content`. The `title` prop is optional and has a default value of an empty string. The `content` prop is required and has no default value.
-
-The purpose of this component is to render an article with a title and content. The article is contained within a `div` element with a class of `col-span-12 md:col-span-6 xl:col-span-4 xl:mx-8`, which is a CSS class used for grid layout. The title is rendered within a nested `div` element with a class of `self-end mb-3 text-lg font-bold md:text-xl text-high-emphesis md:mb-7`. This class is used for styling the title to be bold and larger on medium and large screens. The content is rendered within another nested `div` element with a class of `pr-3 mb-2 text-sm leading-5 text-white opacity-50 md:text-base md:mb-4 md:pr-0`. This class is used for styling the content to be smaller and less opaque than the title, and to have some padding on the right side.
-
-This component can be used in a larger project to display articles with a consistent layout and styling. For example, if a blog website was being built with React, this component could be used to render each blog post with a title and content. Here is an example of how this component could be used:
-
-```
-import React from 'react';
-import Article from './Article';
-
-function BlogPost({ title, content }) {
- return (
-
- );
-}
-
-export default BlogPost;
-```
-
-In this example, the `BlogPost` component takes in `title` and `content` props and passes them down to the `Article` component. This allows for consistent styling and layout of each blog post on the website.
-## Questions:
- 1. What is the purpose of the `Article` function?
-- The `Article` function is a React component that renders an article with a title and content.
-
-2. What is the data type of the `title` and `content` props?
-- The `title` prop is of type `any` and is optional, while the `content` prop is of type `any` and is required.
-
-3. What is the purpose of the CSS classes used in the JSX code?
-- The CSS classes are used to style the article component, including the font size, color, and layout.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/miso/Articles.md b/.autodoc/docs/markdown/core/src/features/miso/Articles.md
deleted file mode 100644
index bc04b68fe..000000000
--- a/.autodoc/docs/markdown/core/src/features/miso/Articles.md
+++ /dev/null
@@ -1,51 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/miso/Articles.tsx)
-
-The code above is a React component called `Articles` that takes in an array of objects as a prop, where each object represents an article with a `title` and `content`. The component then maps over the array and renders an `Article` component for each object in the array, passing in the `title` and `content` as props.
-
-The `Article` component is imported from a file located at `./Article`, which suggests that this code is part of a larger project with multiple components. The purpose of this code is to render a list of articles on a webpage, where each article is represented by an `Article` component.
-
-This component can be used in a variety of ways within the larger project. For example, it could be used to display a list of blog posts, news articles, or any other type of content that is organized into articles.
-
-Here is an example of how this component could be used in a larger project:
-
-```jsx
-import React from 'react'
-import Articles from './Articles'
-
-const articles = [
- {
- title: 'The Importance of Exercise',
- content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
- },
- {
- title: 'Healthy Eating Habits',
- content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
- },
- {
- title: 'Mental Health Awareness',
- content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit...'
- }
-]
-
-function App() {
- return (
-
-
- )
-}
-
-export default App
-```
-
-In this example, the `Articles` component is used to render a list of three articles with titles and content. The `articles` array is passed in as a prop to the `Articles` component, which then maps over the array and renders an `Article` component for each object in the array. The resulting output would be a list of three articles with titles and content displayed on the webpage.
-## Questions:
- 1. What is the purpose of the `Article` component being imported?
- - The `Article` component is being imported to be used in the `Articles` function.
-
-2. What is the expected data structure for the `articles` prop?
- - The `articles` prop is expected to be an array of objects with properties `title` and `content`.
-
-3. What does the `key` prop do in the `Article` component being returned?
- - The `key` prop is used to uniquely identify each `Article` component when rendering a list of them, and is set to `article-${i}` where `i` is the index of the current `article` in the `articles` array.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/CurrencyInputPanel.md b/.autodoc/docs/markdown/core/src/features/onsen/CurrencyInputPanel.md
deleted file mode 100644
index 3f9ca093e..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/CurrencyInputPanel.md
+++ /dev/null
@@ -1,59 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/CurrencyInputPanel.tsx)
-
-The `CurrencyInputPanel` component is a reusable UI component that provides an input field for users to enter a currency amount, along with an optional button to set the input field to the maximum available balance for the selected currency. The component also displays the currency symbol and logo, along with the current balance and fiat value of the selected currency.
-
-The component takes in several props, including the current value of the input field, a callback function to handle user input, a boolean flag to show or hide the "max" button, the current balance of the selected currency, the fiat value of the selected currency, and various other optional flags to customize the appearance of the component.
-
-Internally, the component uses several other components and hooks from the `@zoolabs/zdk`, `@heroicons/react/outline`, `@lingui/react`, and `lottie-react` libraries to render the currency logo, fiat value, and animation for the "max" button. The component also uses the `classNames` and `formatCurrencyAmount` functions from the `../../functions` module to apply CSS classes and format currency amounts, respectively.
-
-Overall, the `CurrencyInputPanel` component provides a flexible and customizable input field for users to enter currency amounts, along with useful information about the selected currency's balance and fiat value. This component can be used in various parts of the larger project, such as in trading interfaces or wallet management pages.
-
-Example usage:
-
-```jsx
-import { CurrencyAmount, Currency } from "@zoolabs/zdk";
-import CurrencyInputPanel from "./CurrencyInputPanel";
-
-function MyComponent() {
- const [value, setValue] = useState("");
- const currencyBalance = new CurrencyAmountArticles
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code defines a React component called `CurrencyInputPanel` that renders a panel for inputting a currency amount, including an optional currency logo, input field, and balance information.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several external libraries and dependencies, including `@zoolabs/zdk`, `@heroicons/react/outline`, `lottie-react`, `@lingui/macro`, and several custom components and hooks defined elsewhere in the project.
-
-3. What are the optional props that can be passed to the `CurrencyInputPanel` component?
-- The `CurrencyInputPanel` component accepts several optional props, including `value`, `onUserInput`, `onMax`, `showMaxButton`, `currency`, `id`, `currencyBalance`, `fiatValue`, `priceImpact`, `hideBalance`, `hideInput`, and `hideIcon`. These props control the behavior and appearance of the component, such as the initial input value, whether to show a "max" button, and whether to hide the currency logo or balance information.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/FarmList.md b/.autodoc/docs/markdown/core/src/features/onsen/FarmList.md
deleted file mode 100644
index cc5462588..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/FarmList.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/FarmList.tsx)
-
-The `FarmList` component is a React component that renders a list of farms. It receives two props: `farms`, which is an array of farm objects, and `term`, which is a search term used to filter the farms.
-
-The component uses the `useSortableData` hook to enable sorting of the farms by different criteria such as symbol, TVL, and APR. The sorting is triggered by clicking on the corresponding column header, which calls the `requestSort` function with the appropriate key. The current sort configuration is stored in the `sortConfig` object, which is used to display an up or down arrow next to the column header to indicate the sort direction.
-
-The component also uses the `useInfiniteScroll` hook to enable infinite scrolling of the farms. The `numDisplayed` state variable keeps track of the number of farms currently displayed, and is updated by the `setNumDisplayed` function when the user scrolls to the bottom of the list. The `InfiniteScroll` component from the `react-infinite-scroll-component` library is used to detect when the user has reached the bottom of the list and trigger the loading of more farms.
-
-Each farm in the list is rendered using the `FarmListItem` component, which receives a single `farm` prop. The `FarmListItem` component is not shown in this code snippet, but it is likely responsible for rendering the individual farm details such as the farm name, symbol, TVL, and APR.
-
-Overall, the `FarmList` component provides a flexible and interactive way to display and sort a list of farms, while also enabling infinite scrolling to handle large lists. It can be used as a standalone component or as part of a larger project that involves displaying and managing farms.
-
-Example usage:
-
-```jsx
-import FarmList from './FarmList'
-
-const farms = [
- { symbol: 'ETH-USDT', tvl: 1000000, roiPerYear: 0.1 },
- { symbol: 'BTC-USDT', tvl: 2000000, roiPerYear: 0.2 },
- { symbol: 'USDC-USDT', tvl: 3000000, roiPerYear: 0.3 },
-]
-
-function App() {
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `useSortableData` hook?
- - The `useSortableData` hook is used to sort the `farms` array based on the user's request.
-
-2. What is the purpose of the `InfiniteScroll` component?
- - The `InfiniteScroll` component is used to render a list of `FarmListItem` components and load more items as the user scrolls down the page.
-
-3. What is the purpose of the `Dots` component?
- - The `Dots` component is used to display a loading animation while the `farms` data is being fetched.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/FarmListItem.md b/.autodoc/docs/markdown/core/src/features/onsen/FarmListItem.md
deleted file mode 100644
index cdbb3169b..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/FarmListItem.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/FarmListItem.tsx)
-
-The `FarmListItem` component is a React component that renders a single farm item in a list of farms. It takes a `farm` object as a prop, which contains information about the farm, such as the tokens being farmed, the TVL (total value locked), rewards, and ROI (return on investment).
-
-The component uses the `Disclosure` component from the `@headlessui/react` library to create a collapsible section for each farm item. When the user clicks on the farm item, the section expands to show more details about the farm.
-
-The component uses several other components and functions from the project, such as `DoubleLogo`, `Image`, `QuestionHelper`, and `useCurrency`. It also imports the `PairType` enum from another file.
-
-The component renders the farm item using a grid layout with four columns. The first column displays the tokens being farmed, along with their logos and symbols. The second column displays the TVL of the farm. The third column displays the rewards being earned by the farm, along with their icons and reward rates. The fourth column displays the ROI of the farm, along with a tooltip that shows the reward APR and fee APY.
-
-The component uses several utility functions to format numbers and percentages, such as `formatNumber` and `formatPercent`. It also uses the `classNames` function to conditionally apply CSS classes based on whether the farm item is open or closed.
-
-Overall, the `FarmListItem` component is a reusable component that can be used to display a list of farms in the larger project. It provides a consistent and user-friendly way to view and interact with farms, and can be customized and extended as needed.
-## Questions:
- 1. What is the purpose of the `FarmListItem` component?
-- The `FarmListItem` component is used to display information about a farm, including its tokens, TVL, rewards, and ROI.
-
-2. What is the `Disclosure` component from `@headlessui/react` used for?
-- The `Disclosure` component is used to create a collapsible section that can be expanded or collapsed by clicking a button.
-
-3. What is the `QuestionHelper` component used for?
-- The `QuestionHelper` component is used to display a tooltip with additional information about a farm's reward APR and fee APY.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/FarmListItemDetails.md b/.autodoc/docs/markdown/core/src/features/onsen/FarmListItemDetails.md
deleted file mode 100644
index 674dfc5d0..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/FarmListItemDetails.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/FarmListItemDetails.tsx)
-
-The `FarmListItemDetails` component is a React component that renders a panel containing information about a farm. The component imports several dependencies, including `React`, `useState`, `PairType` from an enum file, `Disclosure`, `Tab`, and `Transition` from the `@headlessui/react` library, `t` and `useLingui` from the `@lingui` library, `useActiveWeb3React` from a custom hook, `Token` and `ZERO` from the `@zoolabs/zdk` library, `getAddress` from the `@ethersproject/address` library, and several custom hooks and components.
-
-The component takes a `farm` object as a prop, which contains information about the farm, including the pair ID and type. The component uses this information to create a `liquidityToken` object, which is an instance of the `Token` class from the `@zoolabs/zdk` library. The `liquidityToken` object is used to retrieve the `stakedAmount` of the farm using the `useUserInfo` hook.
-
-The component renders a `Transition` component from the `@headlessui/react` library, which animates the panel when it is shown or hidden. The panel is a `Disclosure.Panel` component from the same library, which contains an `InformationDisclosure` component and a `div` element. The `InformationDisclosure` component displays information about the farm, including the name, APR, and TVL. The `div` element contains the investment details and manage position tabs.
-
-The `div` element contains a `toggleView` state variable, which determines whether the investment details or manage position tab is displayed. The `toggleView` variable is toggled when the user clicks the manage position or investment details button. If the investment details tab is selected, the `InvestmentDetails` component is rendered. If the manage position tab is selected, a `Tab.Group` component is rendered, which contains two `Tab` components and two `Tab.Panel` components. The `Tab` components display the text "Lending" or "Liquidity" depending on the type of pair, and "Staking". The `Tab.Panel` components contain the `ManageKashiPair` or `ManageSwapPair` component and the `ManageBar` component, respectively.
-
-Overall, the `FarmListItemDetails` component is a reusable component that can be used to display information about a farm and allow the user to manage their position or view investment details. It uses several custom hooks and components to retrieve and display the necessary information.
-## Questions:
- 1. What is the purpose of the `FarmListItemDetails` component?
-- The `FarmListItemDetails` component is responsible for rendering the details of a farm, including investment details and the ability to manage a user's position.
-
-2. What libraries and hooks are being used in this code?
-- This code is using several libraries and hooks, including React, @headlessui/react, @lingui/macro, @lingui/react, and @zoolabs/zdk. It is also using custom hooks from the `../../hooks` and `./hooks` files.
-
-3. What is the purpose of the `liquidityToken` variable?
-- The `liquidityToken` variable is creating a new `Token` object using the `Token` class from the `@zoolabs/zdk` library. It is used to represent the liquidity token for a given farm, which is used to calculate the staked amount for a user's position.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/FarmMenu.md b/.autodoc/docs/markdown/core/src/features/onsen/FarmMenu.md
deleted file mode 100644
index b7d40459c..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/FarmMenu.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/FarmMenu.tsx)
-
-The `Menu` component in the `zoo` project is responsible for rendering a menu of links to different farms. The farms are filtered based on the chain ID and the user's account. The component imports several dependencies, including `ChainId` from the `@zoolabs/zdk` library, `NavLink` from the `../../components/NavLink` file, and two hooks from the `../../hooks` and `../../state/application/hooks` files.
-
-The `Menu` component takes a single prop, `positionsLength`, which is not used in the component. The component then uses the `useActiveWeb3React` hook to get the user's account and chain ID. It also uses the `useWalletModalToggle` hook to toggle the wallet modal when the user clicks on the "Your Farms" link.
-
-The component then renders a list of links to different farms. If the user is logged in (`account` is truthy), the "Your Farms" link is an active link that takes the user to their portfolio of farms. If the user is not logged in, the "Your Farms" link is a non-active link that opens the wallet modal when clicked.
-
-The component then renders a horizontal divider and links to "All Farms", "Kashi Farms", "SushiSwap Farms", and "2x Reward Farms". The "Kashi Farms" and "SushiSwap Farms" links are only rendered if the chain ID is `ChainId.MAINNET`. The "2x Reward Farms" link is only rendered if the chain ID is `ChainId.MAINNET` or `ChainId.MATIC`.
-
-Overall, the `Menu` component provides a convenient way for users to navigate to different farms in the `zoo` project. Developers can use this component in the larger project by importing it and rendering it wherever a menu of farm links is needed. For example, the component could be used in the project's header or sidebar to provide easy access to different farms.
-## Questions:
- 1. What is the purpose of the `Menu` component?
- - The `Menu` component is responsible for rendering a menu of links to different farms based on the user's account and chain ID.
-
-2. What is the significance of the `useActiveWeb3React` and `useWalletModalToggle` hooks?
- - The `useActiveWeb3React` hook is used to retrieve the user's account and chain ID from the active Web3 provider, while the `useWalletModalToggle` hook is used to toggle the display of the wallet modal.
-
-3. What is the purpose of the `NavLink` component?
- - The `NavLink` component is used to create links that are aware of the current route and can apply custom styles when active.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/InformationDisclosure.md b/.autodoc/docs/markdown/core/src/features/onsen/InformationDisclosure.md
deleted file mode 100644
index 9b164b09a..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/InformationDisclosure.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/InformationDisclosure.tsx)
-
-The `InformationDisclosure` component is a React component that displays information on how to participate in a liquidity pool or Kashi market. It is used in the larger project to provide users with a clear understanding of how to participate in the project's liquidity pools and Kashi markets.
-
-The component uses the `Disclosure` and `Transition` components from the `@headlessui/react` library to create a collapsible panel that displays the information. When the panel is closed, a `QuestionMarkCircleIcon` is displayed, and when it is open, a `XCircle` icon is displayed to close it.
-
-The component receives a `farm` prop, which is an object that contains information about the liquidity pool or Kashi market. The component uses this information to display the appropriate instructions for participating in the pool or market.
-
-The component uses the `Typography` component from the `../../components/Typography` file to display text. It also uses the `NavLink` component from the `../../components/NavLink` file to create links to other pages in the project.
-
-The component is used in the larger project to provide users with a clear understanding of how to participate in the project's liquidity pools and Kashi markets. It is displayed on the project's website and can be accessed by users who are interested in participating in the project.
-
-Example usage:
-
-```jsx
-import InformationDisclosure from './InformationDisclosure'
-
-const MyComponent = () => {
- const farm = {
- pair: {
- type: PairType.SWAP,
- token0: {
- id: '0x123',
- symbol: 'ETH'
- },
- token1: {
- id: '0x456',
- symbol: 'USDC'
- }
- }
- }
-
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `InformationDisclosure` component?
-- The `InformationDisclosure` component is used to display information on how to participate in a farm, including steps to provide liquidity, deposit tokens, and harvest rewards.
-
-2. What libraries and components are being imported in this file?
-- The file is importing React, Fragment, `Disclosure` and `Transition` components from `@headlessui/react`, `QuestionMarkCircleIcon` from `@heroicons/react/solid`, `XCircle` from `react-feather`, `useLingui` and `t` from `@lingui/react`, `Typography` from `../../components/Typography`, `PairType` from `./enum`, and `NavLink` from `../../components/NavLink`.
-
-3. What is the purpose of the `useLingui` hook and `t` function?
-- The `useLingui` hook is used for internationalization and localization of the text displayed in the component. The `t` function is used to translate the text into the appropriate language based on the user's locale.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/InvestmentDetails.md b/.autodoc/docs/markdown/core/src/features/onsen/InvestmentDetails.md
deleted file mode 100644
index e444c51db..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/InvestmentDetails.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/InvestmentDetails.tsx)
-
-The `InvestmentDetails` component is a React functional component that displays information about a particular investment in a farming pool. The component takes a single prop `farm`, which is an object containing information about the farming pool.
-
-The component imports several hooks and components from various packages and files. The `useLingui` hook and `Typography` component are imported from the `@lingui` package and are used for internationalization. The `Image` component is imported from the `../../components/Image` file and is used to display images. The `useKashiPair` hook is imported from the `../kashi/context` file and is used to get information about a Kashi pair. The `useActiveWeb3React` hook is imported from the `../../hooks` file and is used to get information about the active Web3 connection. The `CurrencyAmount`, `JSBI`, `Token`, `USDC`, and `ZERO` objects are imported from the `@zoolabs/zdk` package and are used for currency calculations. The `getAddress` function is imported from the `@ethersproject/address` package and is used to get the address of a contract. The `PairType` enum is imported from the `./enum` file and is used to determine the type of farming pool. The `usePendingSushi` and `useUserInfo` hooks are imported from the `./hooks` file and are used to get information about pending Sushi rewards and user information, respectively. The `easyAmount` and `formatNumber` functions are imported from the `../../functions` file and are used for formatting numbers. The `BigNumber` object is imported from the `@ethersproject/bignumber` package and is used for big number calculations. The `usePendingReward` and `useMasterChef` hooks are imported from the `./usePendingReward` and `./useMasterChef` files, respectively, and are used to get information about pending rewards and the MasterChef contract.
-
-The component renders a div that contains two sections: one for displaying information about the user's deposits and one for displaying information about the user's rewards. The deposits section displays the amount of liquidity tokens staked by the user, the value of the staked tokens in USD, and the amount of each token staked. The rewards section displays the amount of pending Sushi and other rewards, the value of the pending rewards in USD, and a button to harvest the rewards.
-
-The component uses several hooks to get the necessary information for rendering the deposit and reward sections. The `useKashiPair` hook is used to get information about a Kashi pair, which is used to calculate the amount of KMP staked by the user. The `useUserInfo` hook is used to get information about the user's staked amount, which is used to calculate the amount of each token staked. The `usePendingReward` and `usePendingSushi` hooks are used to get information about the user's pending rewards. The `useMasterChef` hook is used to get the `harvest` function, which is called when the user clicks the harvest button.
-
-The component also uses several functions to calculate the necessary values for rendering the deposit and reward sections. The `onHarvest` function is called when the user clicks the harvest button and calls the `harvest` function from the `useMasterChef` hook. The `positionFiatValue` function calculates the value of the staked tokens in USD. The `rewardValue` function calculates the value of the pending rewards in USD.
-
-Overall, the `InvestmentDetails` component is a reusable component that can be used to display information about a particular investment in a farming pool. It uses several hooks and functions to get and calculate the necessary information for rendering the deposit and reward sections.
-## Questions:
- 1. What is the purpose of the `InvestmentDetails` component?
-- The `InvestmentDetails` component is used to display information about a particular investment, including the user's deposits, rewards, and details about the investment pair.
-
-2. What external libraries and APIs are being used in this code?
-- The code is using several external libraries and APIs, including Lingui for internationalization, Next.js for routing, and the ZDK library for working with tokens and currencies.
-
-3. What is the difference between `PairType.KASHI` and `PairType.SWAP`?
-- `PairType.KASHI` and `PairType.SWAP` are two different types of pairs that can be used for investments. Kashi pairs are used for lending and borrowing, while swap pairs are used for trading one token for another.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/KashiDeposit.md b/.autodoc/docs/markdown/core/src/features/onsen/KashiDeposit.md
deleted file mode 100644
index 4e0b83c81..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/KashiDeposit.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/KashiDeposit.tsx)
-
-The `KashiDeposit` component is a React component that allows users to deposit assets into a Kashi market. Kashi is a lending and borrowing platform built on top of the Aave protocol. The component imports various dependencies such as `@lingui/macro`, `@zoolabs/zdk`, and `@ethersproject/bignumber`.
-
-The component takes in two props: `pair` and `useBento`. `pair` is an object that contains information about the asset pair being deposited, such as the asset address and balance. `useBento` is a boolean that determines whether the deposit should be made to the BentoBox, which is a smart contract that optimizes gas usage for token transfers.
-
-The component renders a `CurrencyInputPanel` that allows users to input the amount of assets they want to deposit. The component also calculates the user's asset balance and displays it on the panel. If the user has insufficient balance or has not entered an amount, an error message is displayed.
-
-The component also renders a button that allows users to approve the Kashi contract to spend their assets. If the user has not approved the contract, the button will display "Approve Kashi". If the user has already approved the contract, the button will display "Confirm Deposit". If the user is using BentoBox, the component will also render a button that allows users to approve the BentoBox contract to spend their assets.
-
-When the user clicks the "Confirm Deposit" button, the `onCook` function is called with the `pair` object and an `onDeposit` function as arguments. The `onDeposit` function adds the user's assets to the Kashi market. If the exchange rate for the asset pair is zero, the `updateExchangeRate` function is called to update the exchange rate.
-
-Overall, the `KashiDeposit` component provides a user-friendly interface for depositing assets into a Kashi market. It handles the approval process and provides error messages if necessary. The component can be used in conjunction with other Kashi components to create a full-fledged lending and borrowing platform.
-
-Example usage:
-
-```
-import KashiDeposit from './KashiDeposit';
-
-const MyComponent = () => {
- const pair = {
- asset: {
- address: '0x123...',
- balance: '1000000000000000000',
- tokenInfo: {
- symbol: 'USDC'
- }
- },
- currentExchangeRate: '1000000000000000000'
- };
-
- return (
-
-
- )
-}
-
-export default MyKashiPair
-```
-
-In this example, the `MyKashiPair` component renders a heading and the `ManageKashiPair` component, passing in the `farm` prop. The `ManageKashiPair` component handles the UI for managing the Kashi pair, while the `MyKashiPair` component provides the overall structure and context for the Kashi pair.
-## Questions:
- 1. What is the purpose of the `ManageKashiPair` component?
-- The `ManageKashiPair` component is used to manage deposits and withdrawals for a Kashi pair.
-
-2. What libraries and frameworks are being used in this code?
-- The code is using several libraries and frameworks, including `@headlessui/react`, `@heroicons/react/solid`, `@lingui/macro`, `@lingui/react`, and `React`.
-
-3. What is the significance of the `useBento` state variable?
-- The `useBento` state variable is used to determine whether to deposit/withdraw from the user's wallet or from the BentoBox smart contract.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/ManageSwapPair.md b/.autodoc/docs/markdown/core/src/features/onsen/ManageSwapPair.md
deleted file mode 100644
index 0ab247f68..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/ManageSwapPair.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/ManageSwapPair.tsx)
-
-The code defines a React component called `ManageSwapPair` that renders a UI for adding or removing liquidity from a token pair in a decentralized exchange. The component imports several dependencies, including React, `useState` hook, `Switch` component from the `@headlessui/react` library, and icons from the `@heroicons/react/solid` library. It also imports `Settings` component, `PoolAddLiquidity` and `PoolRemoveLiquidity` components, and a custom hook called `useCurrency` from other files in the project.
-
-The component takes a single prop called `farm`, which is an object containing information about the token pair. The component initializes a state variable called `toggle` using the `useState` hook, which determines whether the UI should display the "Add Liquidity" or "Remove Liquidity" view. The component then uses the `useCurrency` hook to fetch information about the two tokens in the pair and renders a UI that displays a toggle switch and a `Settings` component.
-
-The toggle switch is implemented using the `Switch` component from the `@headlessui/react` library. When the user toggles the switch, the `toggle` state variable is updated, which triggers a re-render of the component. Depending on the value of `toggle`, the component conditionally renders either the `PoolAddLiquidity` or `PoolRemoveLiquidity` component, passing in the two tokens as props.
-
-Overall, this component provides a high-level UI for managing liquidity in a decentralized exchange. It can be used as part of a larger project that implements a decentralized exchange, allowing users to add or remove liquidity from token pairs. Here is an example of how this component can be used in a parent component:
-
-```
-import ManageSwapPair from './ManageSwapPair'
-
-const MyExchange = () => {
- const tokenPair = { token0: { id: 'token0' }, token1: { id: 'token1' } }
-
- return (
- Kashi Pair
-
-
- )
-}
-```
-## Questions:
- 1. What does this code do?
-- This code exports a React component called `ManageSwapPair` that renders a UI for adding or removing liquidity from a pool.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several external libraries, including `React`, `@headlessui/react`, `@heroicons/react/solid`, and `@lingui/core`.
-
-3. What is the purpose of the `useCurrency` hook?
-- The `useCurrency` hook is used to retrieve information about a currency token based on its ID, which is passed in as an argument. This information is then used to render the UI for adding or removing liquidity.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/enum.md b/.autodoc/docs/markdown/core/src/features/onsen/enum.md
deleted file mode 100644
index 27ac718dc..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/enum.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/enum.ts)
-
-This file contains three enums: Chef, Rewarder, and PairType. These enums are used to define a set of related constants that can be used throughout the project.
-
-The Chef enum defines four constants: MASTERCHEF, MASTERCHEF_V2, MINICHEF, and an implicit default value of 0. These constants are likely used to represent different types of chefs in the project, such as different levels of experience or different roles within the zoo.
-
-The Rewarder enum defines three constants: SIMPLE, COMPLEX, and ALCX, with an implicit default value of 0. These constants are likely used to represent different types of rewarders in the project, such as different reward structures or different types of tokens.
-
-The PairType enum defines two constants: SWAP and KASHI, with an implicit default value of 0. These constants are likely used to represent different types of pairs in the project, such as different trading pairs or different types of liquidity pools.
-
-Overall, these enums provide a convenient way to define and use related constants throughout the project. For example, if a function needs to take a Chef as an argument, it can use the Chef enum to ensure that only valid Chef values are passed in. Similarly, if a function needs to return a Rewarder, it can use the Rewarder enum to ensure that only valid Rewarder values are returned.
-
-Example usage:
-
-```
-function cookMeal(chef: Chef, ingredients: string[]): string {
- // code to cook a meal using the given ingredients and chef
-}
-
-const myChef = Chef.MASTERCHEF;
-const myIngredients = ['chicken', 'rice', 'vegetables'];
-const myMeal = cookMeal(myChef, myIngredients);
-```
-## Questions:
- 1. What is the purpose of these enums?
- - These enums are used to define different types of chefs, rewarders, and pair types in the zoo project. They likely have specific functionality or characteristics associated with them.
-
-2. Are there any other enums used in the zoo project?
- - It's unclear from this code snippet whether there are other enums used in the zoo project. Further investigation of the codebase would be necessary to determine this.
-
-3. How are these enums used in the zoo project?
- - Without additional context, it's difficult to determine exactly how these enums are used in the zoo project. However, it's likely that they are used to define and differentiate between different types of objects or functionality within the project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/hooks.md b/.autodoc/docs/markdown/core/src/features/onsen/hooks.md
deleted file mode 100644
index fc7d896cd..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/hooks.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/hooks.ts)
-
-The `zoo` project is a blockchain-based project that involves farming and staking of tokens. The code in this file provides a set of utility functions and hooks that are used to interact with the smart contracts that power the farming and staking functionality.
-
-The code imports several constants and functions from other modules in the `zoo` project, including `ChainId`, `CurrencyAmount`, `MASTERCHEF_ADDRESS`, `MASTERCHEF_V2_ADDRESS`, `MINICHEF_ADDRESS`, `Chef`, `useSingleCallResult`, `useSingleContractMultipleData`, `useMasterChefContract`, `useMasterChefV2Contract`, `useMiniChefContract`, `Contract`, `SUSHI`, `Zero`, `useActiveWeb3React`, `zip`, and `concat`.
-
-The `useChefContract` function returns the contract instance for a given chef, which is used to interact with the smart contract for that chef. The `useChefContracts` function returns an array of contract instances for a given array of chefs. The `useUserInfo` function returns the amount of a given token that a user has staked in a given farm. The `usePendingSushi` function returns the amount of SUSHI tokens that a user has earned from a given farm. The `usePendingToken` function returns an array of pending tokens for a given farm and contract. The `useChefPositions` function returns an array of positions for a given chef, including the pending SUSHI and token rewards, the amount of tokens staked, and the chef type. The `usePositions` function returns an array of all positions across all chefs. The `useInfiniteScroll` hook is used to manage the number of items displayed in a list of farms, to minimize the rendering cost of the list.
-
-These functions and hooks are used throughout the `zoo` project to interact with the smart contracts that power the farming and staking functionality. For example, `useUserInfo` and `usePendingSushi` are used to display the amount of tokens that a user has staked and earned in the UI. `usePositions` is used to display a list of all positions across all chefs. The `useInfiniteScroll` hook is used to manage the rendering cost of the farm list. Overall, this file provides a set of utility functions and hooks that are essential to the functionality of the `zoo` project.
-## Questions:
- 1. What is the purpose of the `useChefContract` function and how is it used?
-- The `useChefContract` function returns the contract instance for a given chef type (MasterChef, MasterChefV2, or MiniChef) and is used to interact with the corresponding smart contract.
-
-2. What is the purpose of the `usePendingSushi` function and how is it used?
-- The `usePendingSushi` function returns the pending SUSHI rewards for a given farm and is used to display the amount of SUSHI that a user can claim as rewards.
-
-3. What is the purpose of the `usePositions` function and how is it used?
-- The `usePositions` function returns an array of all the user's positions across all chef types and is used to display the user's farms and their corresponding information (such as pending rewards and staked amount).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/useMasterChef.md b/.autodoc/docs/markdown/core/src/features/onsen/useMasterChef.md
deleted file mode 100644
index 41edfbc41..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/useMasterChef.md
+++ /dev/null
@@ -1,55 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/useMasterChef.ts)
-
-The `useMasterChef` function is a custom React hook that provides access to deposit, withdraw, and harvest functions for a given chef contract. The hook takes a `chef` parameter of type `Chef`, which is an enum that specifies the type of chef contract to interact with.
-
-The hook uses several other hooks to retrieve the necessary data for interacting with the chef contract. The `useActiveWeb3React` hook retrieves the current user's Ethereum account, while the `useSushiContract` and `useChefContract` hooks retrieve the SushiSwap token contract and the chef contract, respectively.
-
-The `deposit` function takes two parameters: `pid`, which is the pool ID of the pool to deposit into, and `amount`, which is the amount of tokens to deposit. The function first checks which type of chef contract is being used and then calls the appropriate `deposit` function on the contract with the given `pid` and `amount`. If the chef contract is not the `MASTERCHEF` contract, the function also passes the current user's account as a third parameter. The function returns the transaction hash of the deposit transaction.
-
-The `withdraw` function is similar to the `deposit` function, but instead of depositing tokens, it withdraws tokens from the specified pool. The function takes the same two parameters as the `deposit` function: `pid` and `amount`. The function checks which type of chef contract is being used and then calls the appropriate `withdraw` function on the contract with the given `pid` and `amount`. If the chef contract is not the `MASTERCHEF` contract, the function also passes the current user's account as a third parameter. The function returns the transaction hash of the withdraw transaction.
-
-The `harvest` function is used to claim rewards from the specified pool. The function takes a single parameter, `pid`, which is the pool ID of the pool to harvest rewards from. The function first checks which type of chef contract is being used and then calls the appropriate `harvest` function on the contract with the given `pid` and the current user's account. If the chef contract is the `MASTERCHEF_V2` contract, the function also checks if there are enough SUSHI tokens in the contract to harvest. If there are not enough tokens, the function batches two harvest functions together to ensure that the user receives all of their rewards. The function returns the transaction hash of the harvest transaction.
-
-Overall, this hook provides a convenient way for developers to interact with chef contracts in the SushiSwap ecosystem. Developers can use this hook to build interfaces that allow users to deposit, withdraw, and claim rewards from various pools. Here is an example of how this hook might be used in a larger project:
-
-```
-import { useMasterChef, Chef } from 'zoo'
-
-function Pool({ pid }) {
- const { deposit, withdraw, harvest } = useMasterChef(Chef.MASTERCHEF_V2)
-
- const handleDeposit = async (amount) => {
- const tx = await deposit(pid, amount)
- console.log(`Deposit transaction hash: ${tx.hash}`)
- }
-
- const handleWithdraw = async (amount) => {
- const tx = await withdraw(pid, amount)
- console.log(`Withdraw transaction hash: ${tx.hash}`)
- }
-
- const handleHarvest = async () => {
- const tx = await harvest(pid)
- console.log(`Harvest transaction hash: ${tx.hash}`)
- }
-
- return (
- My Decentralized Exchange
-
-
-
-
-
- )
-}
-```
-
-In this example, the `Pool` component uses the `useMasterChef` hook to retrieve the `deposit`, `withdraw`, and `harvest` functions for the `MASTERCHEF_V2` contract. The component then defines three event handlers that call these functions with the appropriate parameters when the user clicks on the corresponding buttons. When a transaction is successfully executed, the component logs the transaction hash to the console.
-## Questions:
- 1. What is the purpose of the `useMasterChef` function?
-- The `useMasterChef` function returns an object with three functions: `deposit`, `withdraw`, and `harvest`, which are used to interact with a smart contract related to a specific chef.
-
-2. What is the significance of the `Chef` enum?
-- The `Chef` enum is used to determine which chef's contract to interact with, as different chefs have different functions and parameters.
-
-3. What is the purpose of the `harvest` function and how does it work?
-- The `harvest` function is used to claim rewards from the chef's contract. Depending on the chef, it may involve different steps such as checking pending rewards, batching in a harvest, or simply calling the `harvest` function.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/onsen/usePendingReward.md b/.autodoc/docs/markdown/core/src/features/onsen/usePendingReward.md
deleted file mode 100644
index c5d144a83..000000000
--- a/.autodoc/docs/markdown/core/src/features/onsen/usePendingReward.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/onsen/usePendingReward.ts)
-
-The `usePending` function is a React hook that calculates the pending rewards for a given farm. It imports several hooks and functions from other files in the project, including `useCallback`, `useEffect`, `useMemo`, `useState`, `useActiveWeb3React`, `useBlockNumber`, `useCloneRewarderContract`, `useComplexRewarderContract`, and `getContract`.
-
-The function first defines an object called `REWARDERS` that maps chain IDs to rewarder contract addresses. It then defines a `usePending` function that takes a `farm` object as an argument. This `farm` object contains information about the farm, including its ID, reward token, and chef.
-
-Within the `usePending` function, several hooks are used to get information about the current user's account, the current block number, and the rewarder contract for the given farm. The `useMemo` hook is used to memoize the `contract` object, which maps chain IDs to rewarder contracts.
-
-The `useEffect` hook is used to fetch the pending rewards for the given farm. If the user is connected to a wallet, the rewarder contract exists, and the farm is a MasterChefV2 or MiniChef farm, the `fetchPendingReward` function is called. This function uses the `pendingTokens` function of the rewarder contract to get the pending rewards for the given farm and user account. It then formats the pending rewards as a string and sets the `balance` state variable to this value.
-
-Finally, the `usePending` function returns the `balance` state variable, which represents the pending rewards for the given farm. This hook can be used in other components to display the pending rewards for a given farm.
-
-Example usage:
-
-```
-import usePending from './path/to/usePending'
-
-function Farm({ farm }) {
- const pendingRewards = usePending(farm)
-
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `usePending` function?
-- The `usePending` function is used to fetch the pending rewards for a given farm and return the formatted balance.
-
-2. What is the purpose of the `REWARDERS` object?
-- The `REWARDERS` object is used to store the rewarder contract addresses for different chain IDs.
-
-3. What is the purpose of the commented out `useRewarderContract` function?
-- It is unclear what the purpose of the `useRewarderContract` function is, as it is currently commented out and not used in the code. It appears to be related to fetching a rewarder contract for a given farm, but more context is needed to understand its intended use.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/trade/Header.md b/.autodoc/docs/markdown/core/src/features/trade/Header.md
deleted file mode 100644
index 4d90002e7..000000000
--- a/.autodoc/docs/markdown/core/src/features/trade/Header.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/trade/Header.tsx)
-
-The `ExchangeHeader` component is a React functional component that renders a header for the exchange page of the Zoo project. The header contains three buttons for swapping, creating limit orders, and adding/removing liquidity, respectively. The component also includes a gas fee estimator and a settings button.
-
-The component takes three props: `input`, `output`, and `allowedSlippage`. `input` and `output` are optional Currency objects that represent the input and output tokens for the exchange. `allowedSlippage` is an optional Percent object that represents the maximum allowed slippage for the exchange.
-
-The `getQuery` function is a helper function that takes `input` and `output` as arguments and returns an object with `inputCurrency` and `outputCurrency` properties. If `input` is not provided, the `inputCurrency` property defaults to `"ETH"`. If neither `input` nor `output` is provided, the function returns `undefined`.
-
-The `ExchangeHeader` component uses the `useLingui` hook from the `@lingui/react` package to provide internationalization support. It also uses the `useActiveWeb3React` hook from the Zoo project to get the current chain ID.
-
-The component renders a `div` element with two child elements: a `div` element containing the three buttons, and a `div` element containing the gas fee estimator and the settings button.
-
-The three buttons are implemented as `NavLink` components from the Zoo project. Each `NavLink` component has an `href` prop that points to a different page of the exchange, depending on the current input and output tokens. The `getQuery` function is used to generate the query parameters for the `href` prop.
-
-The gas fee estimator is implemented as a `Gas` component from the Zoo project. It displays the estimated gas fee for the current transaction.
-
-The settings button is implemented as a `Settings` component from the Zoo project. It opens a modal dialog that allows the user to adjust the slippage tolerance and other settings.
-
-Overall, the `ExchangeHeader` component provides a convenient and user-friendly interface for the exchange page of the Zoo project. It allows users to easily swap tokens, create limit orders, and add/remove liquidity, while also providing important information about gas fees and settings.
-## Questions:
- 1. What is the purpose of the `ExchangeHeader` component?
-- The `ExchangeHeader` component is used to render the header section of the exchange page, which includes navigation links, gas settings, and other components.
-
-2. What libraries and hooks are being imported in this file?
-- The file is importing several libraries and hooks, including `@zoolabs/zdk`, `React`, `@lingui/macro`, `@lingui/react`, and `next/router`. It is also importing several components from other files in the project.
-
-3. What is the `getQuery` function used for?
-- The `getQuery` function is used to generate a query object based on the input and output currencies passed to the `ExchangeHeader` component. This query object is used to construct links for the navigation links in the header.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/features/user/TransactionList.md b/.autodoc/docs/markdown/core/src/features/user/TransactionList.md
deleted file mode 100644
index f969d295c..000000000
--- a/.autodoc/docs/markdown/core/src/features/user/TransactionList.md
+++ /dev/null
@@ -1,49 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/features/user/TransactionList.tsx)
-
-The code is a React component that renders a list of transactions. It takes in an array of transactions as a prop and maps over them to render each transaction as a separate div element. Each transaction div contains information about the tokens being traded, a link to view the transaction on the blockchain explorer, and a checkmark icon to indicate that the transaction was successful.
-
-The component uses several other components and hooks from the project, including `Image` and `Dots` components, and the `useActiveWeb3React` and `useLingui` hooks. It also imports two icons from the `react-feather` library.
-
-The `getExplorerLink` function is imported from a `functions/explorer` file, which is not included in this code snippet. This function likely generates a URL to view a transaction on a blockchain explorer based on the chain ID and transaction hash.
-
-The component checks if there are any transactions to render. If there are, it maps over the transactions and renders each one as a div element. If there are no transactions, it renders a loading spinner.
-
-This component can be used in a larger project that involves trading tokens on a decentralized exchange. It provides a visual representation of the user's transaction history and allows them to view the details of each transaction on the blockchain explorer. The component can be customized with different styles and icons to fit the project's design. Here is an example of how the component can be used in a parent component:
-
-```
-import TransactionList from './TransactionList'
-
-function MyComponent() {
- const transactions = [
- {
- tx_hash: '0x123abc',
- token_0: {
- logo_url: 'https://example.com/token0.png',
- symbol: 'TOKEN0'
- },
- token_1: {
- logo_url: 'https://example.com/token1.png',
- symbol: 'TOKEN1'
- },
- description: 'Swapped TOKEN0 for TOKEN1'
- },
- // more transactions...
- ]
-
- return (
- {farm.name}
-Pending rewards: {pendingRewards}
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code is a React component that renders a list of transactions with their corresponding token logos and descriptions.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several external libraries and components, including `react-feather`, `@lingui/macro`, `@lingui/react`, and custom functions from `../../functions/explorer` and `../../hooks/useActiveWeb3React`.
-
-3. What is the expected format of the `transactions` prop?
-- The `transactions` prop is expected to be an array of objects, where each object contains a `tx_hash` property and two nested objects with `logo_url` and `symbol` properties for each token involved in the transaction.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/abbreviateNumbers.md b/.autodoc/docs/markdown/core/src/functions/abbreviateNumbers.md
deleted file mode 100644
index 23c80d41a..000000000
--- a/.autodoc/docs/markdown/core/src/functions/abbreviateNumbers.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/abbreviateNumbers.ts)
-
-The code above defines a function called `abbreviateNumber` that takes in a number as an argument and returns an abbreviated version of that number. The purpose of this function is to make large numbers more readable by abbreviating them with a letter that represents the magnitude of the number. For example, instead of displaying 1000000, the function would return 1M.
-
-The function works by checking the magnitude of the input number and then dividing it by the appropriate factor to get the abbreviated version. If the number is greater than or equal to 1000000000000, the function divides it by 1000000000000 and appends a 'T' to the end. If the number is greater than or equal to 1000000000, the function divides it by 1000000000 and appends a 'B' to the end. If the number is greater than or equal to 1000000, the function divides it by 1000000 and appends an 'M' to the end. If the number is greater than or equal to 1000, the function divides it by 1000 and appends a 'K' to the end. If the number is less than 1000, the function returns the original number.
-
-This function can be useful in a variety of contexts where large numbers need to be displayed in a more readable format. For example, it could be used in a financial application to display large sums of money, or in a data visualization tool to display large quantities of data. Here is an example of how the function could be used:
-
-```
-const num = 1234567890;
-const abbreviatedNum = abbreviateNumber(num);
-console.log(abbreviatedNum); // Output: 1.2B
-```
-
-In this example, the function takes in the number 1234567890 and returns the abbreviated version 1.2B, which represents 1.2 billion.
-## Questions:
- 1. What is the purpose of this function?
- This function abbreviates large numbers by converting them into a shorter format with a letter suffix indicating the magnitude (e.g. "1.5M" for 1,500,000).
-
-2. What is the input type for this function?
- The input type for this function is a number.
-
-3. What is the output type for this function?
- The output type for this function is either a string (if the number is abbreviated) or a number (if the number is not large enough to be abbreviated).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/analytics.md b/.autodoc/docs/markdown/core/src/functions/analytics.md
deleted file mode 100644
index c14850c7f..000000000
--- a/.autodoc/docs/markdown/core/src/functions/analytics.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/analytics.ts)
-
-This code is a set of functions that utilize the ReactGA library to log user activity on a website. The ReactGA library is a third-party analytics tool that allows developers to track user behavior and gain insights into how users interact with their website.
-
-The `logPageView` function logs a page view by setting the page property to the current window location and then calling the `pageview` method. This function can be used to track which pages on the website are being viewed and how often they are being viewed.
-
-The `logEvent` function logs a custom event with a specified category and action. This function can be used to track specific user interactions on the website, such as button clicks or form submissions.
-
-The `logException` function logs an exception with a specified description and fatal flag. This function can be used to track errors or unexpected behavior on the website.
-
-Overall, these functions provide a way for developers to gain insights into how users are interacting with their website and identify areas for improvement. By using the ReactGA library, developers can easily integrate analytics tracking into their website without having to build their own tracking system from scratch.
-
-Example usage:
-
-```
-import { logPageView, logEvent, logException } from 'zoo'
-
-// Log a page view
-logPageView()
-
-// Log a custom event
-logEvent('Button Click', 'Submit Form')
-
-// Log an exception
-logException('Error: Invalid input', true)
-```
-## Questions:
- 1. What is ReactGA and how is it being used in this code?
- ReactGA is a library for tracking user interactions with a website using Google Analytics. It is being used to log page views, events, and exceptions.
-
-2. What is the purpose of the logPageView function?
- The logPageView function is used to log a page view with Google Analytics, setting the page path to the current window location.
-
-3. What is the purpose of the logException function?
- The logException function is used to log an exception with Google Analytics, with an optional description and flag for whether it is fatal. This can be used to track errors and issues on the website.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/approveAmountCalldata.md b/.autodoc/docs/markdown/core/src/functions/approveAmountCalldata.md
deleted file mode 100644
index 0ddbac5fb..000000000
--- a/.autodoc/docs/markdown/core/src/functions/approveAmountCalldata.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/approveAmountCalldata.ts)
-
-The code is a module that exports two functions related to the ERC20 token standard. The first function, `toHex`, takes a `BigintIsh` argument and returns a hexadecimal string representation of the number. The second function, `approveAmountCalldata`, takes a `CurrencyAmount` object and a `spender` address as arguments and returns an object with `to`, `data`, and `value` properties.
-
-The `to` property is set to the address of the ERC20 token contract associated with the `Currency` object in the `amount` argument. The `data` property is set to the encoded function data for the `approve` function of the ERC20 contract, with the `spender` argument and the `quotient` of the `amount` argument passed as parameters. The `value` property is set to `'0x0'`, indicating that no ether is being sent along with the transaction.
-
-The purpose of this module is to provide a convenient way to generate the necessary data for an `approve` transaction for an ERC20 token. This is useful for allowing a third party to spend a certain amount of tokens on behalf of the token owner. The `toHex` function is used to convert the `quotient` of the `amount` argument to a hexadecimal string, which is required for the `approve` function call. The `ERC20_INTERFACE` constant is an instance of the `Interface` class from the `@ethersproject/abi` package, which is used to encode the function call data for the `approve` function.
-
-Example usage:
-
-```
-import { CurrencyAmount, Token } from '@zoolabs/zdk'
-import approveAmountCalldata from '@zoolabs/zdk/dist/approveAmountCalldata'
-
-const token = new Token(1, '0x123...', 18, 'USDT', 'Tether')
-const amount = CurrencyAmount.fromRawAmount(token, '100')
-const spender = '0x456...'
-
-const calldata = approveAmountCalldata(amount, spender)
-console.log(calldata)
-// Output: { to: '0x123...', data: '0x095ea7b3...123', value: '0x0' }
-```
-## Questions:
- 1. What is the purpose of the `toHex` function?
-- The `toHex` function converts a `BigintIsh` value to a hexadecimal string with a '0x' prefix.
-
-2. What is the `ERC20_INTERFACE` object used for?
-- The `ERC20_INTERFACE` object is an instance of the `Interface` class from the `@ethersproject/abi` library, which defines the ABI (Application Binary Interface) of an ERC20 token contract.
-
-3. What does the `approveAmountCalldata` function do?
-- The `approveAmountCalldata` function takes a `CurrencyAmount` object and a spender address as inputs, and returns an object with `to`, `data`, and `value` properties that represent the calldata needed to approve the spender to spend the specified amount of tokens.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/archerRouter.md b/.autodoc/docs/markdown/core/src/functions/archerRouter.md
deleted file mode 100644
index 4b38d2f8f..000000000
--- a/.autodoc/docs/markdown/core/src/functions/archerRouter.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/archerRouter.ts)
-
-The code is a TypeScript module that exports an abstract class called `ArcherRouter` and several interfaces and types. The `ArcherRouter` class has a single static method called `swapCallParameters` that produces the on-chain method name to call and the hex encoded parameters to pass as arguments for a given trade. The method takes three arguments: `factoryAddress`, `trade`, and `options`.
-
-The `factoryAddress` argument is a string representing the address of the factory contract that created the pair of tokens being traded. The `trade` argument is an instance of the `Trade` class from the `@zoolabs/zdk` library, which represents a trade between two tokens. The `options` argument is an object that extends the `TradeOptions` interface and adds three additional properties: `ethTip`, `ttl`, and `recipient`.
-
-The `ethTip` property is an optional `CurrencyAmount` object that represents the amount of ETH to tip the miners who process the transaction. The `ttl` property is a number representing the time-to-live of the transaction in seconds. The `recipient` property is a string representing the address of the recipient of the transaction.
-
-The `swapCallParameters` method first checks if the input or output currency is Ether and throws an error if both are Ether. It then validates the `ttl` property and the `ethTip` property, ensuring that the `ethTip` currency is Ether on the mainnet. It then calculates the `amountIn` and `amountOut` values for the trade, converts them to hexadecimal strings, and creates an `ArcherTrade` object with the `amountIn`, `amountOut`, `path`, `to`, and `deadline` properties. The `path` property is an array of token addresses representing the path of the trade. The `to` property is the recipient of the transaction, and the `deadline` property is the deadline for the transaction in hexadecimal format.
-
-The method then determines the method name to call based on the `tradeType` property of the `trade` argument and whether the input or output currency is Ether. It sets the `args` and `value` properties of the `ArcherSwapParameters` object based on the method name and the `ethTip` property. Finally, it returns the `methodName`, `args`, and `value` properties as an `ArcherSwapParameters` object.
-
-This code is part of the larger `zoo` project and is used to facilitate trades on the Archer Swap decentralized exchange. Developers can use the `ArcherRouter` class and the `swapCallParameters` method to execute trades on the Archer Swap exchange programmatically. For example, a developer could use the following code to execute a trade between two tokens:
-
-```
-import { ArcherRouter } from 'zoo'
-
-const factoryAddress = '0x1234567890abcdef'
-const trade = new Trade(...)
-const options = {
- ethTip: new Ether(...),
- ttl: 3600,
- recipient: '0x9876543210fedcba',
- allowedSlippage: 0.1,
-}
-
-const swapParams = ArcherRouter.swapCallParameters(factoryAddress, trade, options)
-// Use swapParams to execute the trade on the Archer Swap exchange
-```
-## Questions:
- 1. What is the purpose of the `ArcherRouter` class?
-- The `ArcherRouter` class represents the Archer Router and has static methods for helping execute trades.
-
-2. What is the `swapCallParameters` method used for?
-- The `swapCallParameters` method is used to produce the on-chain method name to call and the hex encoded parameters to pass as arguments for a given trade.
-
-3. What is the purpose of the `validateAndParseAddress` function?
-- The `validateAndParseAddress` function is used to validate and parse an Ethereum address, and returns the checksummed address if it is valid. If the address is not valid, it throws an error.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/array/chunkArray.md b/.autodoc/docs/markdown/core/src/functions/array/chunkArray.md
deleted file mode 100644
index c984b0c3e..000000000
--- a/.autodoc/docs/markdown/core/src/functions/array/chunkArray.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/array/chunkArray.ts)
-
-The code provided is a utility function that is used to chunk an array into smaller arrays. The purpose of this function is to evenly distribute items among the chunks while ensuring that each chunk does not exceed a specified gas limit.
-
-The function takes in an array of items and an optional gas limit parameter. If the gas limit parameter is not specified, the function uses a default value of 2,000,000. The function then iterates through each item in the array and calculates the gas required by each item. If the current chunk is empty or the current item would not push the chunk over the gas limit, the item is added to the current chunk and the cumulative gas is incremented. If the current item would push the chunk over the gas limit, the current chunk is pushed to the chunks array, and a new chunk is created with the current item.
-
-Once all items have been iterated through, the function checks if there are any remaining items in the current chunk and pushes it to the chunks array if there are. The function then returns the chunks array.
-
-This function can be used in the larger project to split up large arrays into smaller chunks that can be processed more efficiently. For example, if the project is processing a large number of transactions, this function can be used to split the transactions into smaller chunks that can be processed in parallel.
-
-Example usage:
-
-```
-const transactions = [/* array of transactions */];
-const chunks = chunkArray(transactions, 500_000); // split transactions into chunks of 500,000 or less
-for (const chunk of chunks) {
- // process each chunk of transactions
-}
-```
-## Questions:
- 1. What is the purpose of the `chunkArray` function?
-- The `chunkArray` function takes an array of items and evenly distributes them into smaller arrays called chunks, based on a gas limit.
-
-2. What is the significance of the `gasRequired` property in this code?
-- The `gasRequired` property is used to calculate the gas required by each item in the `chunkArray` function. If an item doesn't specify a `gasRequired` value, it defaults to `DEFAULT_GAS_REQUIRED`.
-
-3. Why is the `CONSERVATIVE_BLOCK_GAS_LIMIT` value hard-coded?
-- The `CONSERVATIVE_BLOCK_GAS_LIMIT` value is hard-coded as a conservative estimate of the current block gas limit. This is likely done to ensure that the `chunkArray` function doesn't exceed the gas limit and cause errors or unexpected behavior.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/array/index.md b/.autodoc/docs/markdown/core/src/functions/array/index.md
deleted file mode 100644
index 3550058c0..000000000
--- a/.autodoc/docs/markdown/core/src/functions/array/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/array/index.ts)
-
-This code exports a function called `chunkArray` from a module located in the `zoo` project. The purpose of the `chunkArray` function is to take an array and split it into smaller arrays of a specified size. This can be useful in situations where you need to process large amounts of data in smaller, more manageable chunks.
-
-The `chunkArray` function takes two arguments: the array to be chunked and the size of each chunk. It then returns an array of arrays, where each sub-array contains the specified number of elements from the original array.
-
-Here is an example of how the `chunkArray` function can be used:
-
-```
-import { chunkArray } from 'zoo';
-
-const myArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-const chunkSize = 3;
-
-const chunkedArray = chunkArray(myArray, chunkSize);
-
-console.log(chunkedArray);
-// Output: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10]]
-```
-
-In this example, we import the `chunkArray` function from the `zoo` project and use it to split an array of numbers into smaller arrays of size 3. The resulting `chunkedArray` variable contains an array of arrays, where each sub-array contains 3 elements from the original array (except for the last sub-array, which contains the remaining elements).
-
-Overall, this code provides a useful utility function for working with arrays in the `zoo` project. By exporting it as a module, it can be easily used in other parts of the project where array manipulation is needed.
-## Questions:
- 1. **What does the `chunkArray` function do?**
- The code exports the `chunkArray` function from a file located at `./chunkArray`, so a smart developer might want to investigate that file to understand what the function does.
-
-2. **What other functions or variables are exported from the `zoo` module?**
- The code only exports the `chunkArray` function, so a smart developer might want to check other files in the `zoo` module to see if there are any other exports.
-
-3. **Is the `chunkArray` function used anywhere else in the `zoo` module?**
- The code only exports the `chunkArray` function, so a smart developer might want to search the `zoo` module for any other files that import and use the `chunkArray` function.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/assets.md b/.autodoc/docs/markdown/core/src/functions/assets.md
deleted file mode 100644
index 7354a6100..000000000
--- a/.autodoc/docs/markdown/core/src/functions/assets.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/assets.ts)
-
-The code above defines several constants and functions related to NFTs (non-fungible tokens) in the context of the zoo project. The `import` statements at the top of the file bring in two external dependencies: `ChainId` from the `@zoolabs/zdk` library, and the `_` (underscore) utility library.
-
-The constants defined in this file are `TYPE_VALIDATOR`, `TYPE_ATM`, `TYPE_WALLET`, and `TYPE_CASH`, which are strings representing different types of NFTs that can be owned in the zoo project.
-
-The `newNft` function takes three arguments: `tokenId` (a unique identifier for the NFT), `type` (one of the constants defined above), and `props` (an optional object containing additional properties to be added to the NFT object). This function returns an object representing a new NFT, with the `tokenId`, `type`, `image`, and `video` properties set based on the input arguments. The `image` and `video` properties are hardcoded to point to files in the `/nfts` directory with filenames based on the `type` argument.
-
-The remaining functions (`getOwnedNfts`, `getValidatorNfts`, `getAtmNfts`, `getWalletNfts`, and `getCashNfts`) all return arrays of NFT objects. `getOwnedNfts` returns an array of three NFTs of different types, while the other functions each return an array of six NFTs of a specific type. These functions use the `newNft` function to create the NFT objects, with the `tokenId` values incremented by a fixed amount for each NFT in the array.
-
-Overall, this code provides a way to create and retrieve NFT objects with various properties and types, which can be used in other parts of the zoo project. For example, these functions could be used to populate a user's NFT collection or to display NFTs in a marketplace. Here is an example usage of the `getOwnedNfts` function:
-
-```
-const ownedNfts = getOwnedNfts()
-console.log(ownedNfts)
-// Output:
-// [
-// { tokenId: 1, type: 'Validator', image: '/nfts/validator.gif', video: '/nfts/validator.mov' },
-// { tokenId: 2, type: 'ATM', image: '/nfts/atm.gif', video: '/nfts/atm.mov' },
-// { tokenId: 3, type: 'Wallet', image: '/nfts/wallet.gif', video: '/nfts/wallet.mov' }
-// ]
-```
-## Questions:
- 1. What is the purpose of the `ChainId` import from `@zoolabs/zdk`?
- - It is not clear from this code snippet what the `ChainId` import is used for or how it relates to the rest of the code. Further investigation or context is needed to understand its purpose.
-
-2. What is the expected format of the `props` parameter in the `newNft` function?
- - The `newNft` function takes in a `props` parameter, but it is not clear what properties are expected or what format they should be in. Additional documentation or comments within the code may be helpful in clarifying this.
-
-3. How are the generated NFTs intended to be used within the `zoo` project?
- - While the code generates various types of NFTs, it is not clear from this snippet how they are intended to be used within the larger `zoo` project. Further context or documentation is needed to understand their purpose and how they fit into the project as a whole.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/bentobox.md b/.autodoc/docs/markdown/core/src/functions/bentobox.md
deleted file mode 100644
index 58aeb46db..000000000
--- a/.autodoc/docs/markdown/core/src/functions/bentobox.md
+++ /dev/null
@@ -1,50 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/bentobox.ts)
-
-This code provides two functions, `toAmount` and `toShare`, that are used to convert between token amounts and shares in the context of the larger project. The project likely involves some sort of decentralized exchange or trading platform that uses a custom token standard called BentoBox.
-
-The `toAmount` function takes in a `token` object and a `shares` value, both of which are of type `BigNumber`. The function then returns the equivalent token amount based on the BentoBox token standard. This is done by multiplying the `shares` value by the `bentoAmount` property of the `token` object and then dividing by the `bentoShare` property of the `token` object. The resulting value is also of type `BigNumber`.
-
-Here is an example usage of the `toAmount` function:
-
-```
-import { BigNumber } from '@ethersproject/bignumber'
-import { toAmount } from 'zoo'
-
-const token = {
- bentoAmount: BigNumber.from(1000000000000000000), // 1 token = 10^18 wei
- bentoShare: BigNumber.from(1000000000000000000) // 1 share = 10^18 wei
-}
-
-const shares = BigNumber.from(500000000000000000) // 0.5 shares
-
-const amount = toAmount(token, shares) // returns BigNumber(500000000000000000)
-```
-
-The `toShare` function is similar to `toAmount`, but instead takes in a `token` object and an `amount` value, both of which are of type `BigNumber`. The function then returns the equivalent share value based on the BentoBox token standard. This is done by multiplying the `amount` value by the `bentoShare` property of the `token` object and then dividing by the `bentoAmount` property of the `token` object. The resulting value is also of type `BigNumber`.
-
-Here is an example usage of the `toShare` function:
-
-```
-import { BigNumber } from '@ethersproject/bignumber'
-import { toShare } from 'zoo'
-
-const token = {
- bentoAmount: BigNumber.from(1000000000000000000), // 1 token = 10^18 wei
- bentoShare: BigNumber.from(1000000000000000000) // 1 share = 10^18 wei
-}
-
-const amount = BigNumber.from(500000000000000000) // 0.5 tokens
-
-const shares = toShare(token, amount) // returns BigNumber(500000000000000000)
-```
-
-Overall, these functions provide a convenient way to convert between token amounts and shares in the context of the BentoBox token standard used in the larger project.
-## Questions:
- 1. What is the purpose of the `BigNumber` import from `@ethersproject/bignumber`?
-- The `BigNumber` import is used to perform arithmetic operations on large numbers with precision.
-
-2. What do the `toAmount` and `toShare` functions do?
-- The `toAmount` function takes in a `token` object and a `shares` value, and returns the equivalent amount of the token based on the token's `bentoAmount` and `bentoShare` values. The `toShare` function takes in a `token` object and an `amount` value, and returns the equivalent number of shares based on the token's `bentoAmount` and `bentoShare` values.
-
-3. What are the expected data types for the `token`, `shares`, and `amount` parameters?
-- The `token` parameter is expected to be an object with `bentoAmount` and `bentoShare` properties. The `shares` and `amount` parameters are expected to be instances of the `BigNumber` class.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/block.md b/.autodoc/docs/markdown/core/src/functions/block.md
deleted file mode 100644
index 7bc5fdec0..000000000
--- a/.autodoc/docs/markdown/core/src/functions/block.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/block.ts)
-
-This file is a module that exports an empty object. The purpose of this file is to serve as a placeholder for future code that may be added to the `zoo` project. By exporting an empty object, this file allows other modules in the project to import it without causing any errors or issues.
-
-For example, if another module in the `zoo` project needs to import this file, it can do so with the following code:
-
-```
-import {} from './zoo';
-```
-
-This code simply imports the empty object from the `zoo` module, which can then be used as needed in the importing module.
-
-While this file may seem insignificant on its own, it plays an important role in the larger `zoo` project. By providing a consistent way for modules to import and use each other, the project can be more easily maintained and updated over time. Additionally, by using modules to organize the code, the project can be more easily scaled and extended as needed.
-
-Overall, while this file may not contain any actual code, it serves an important purpose in the larger `zoo` project by providing a consistent way for modules to interact with each other.
-## Questions:
- 1. **What is the purpose of this file?**\
-A smart developer might wonder why this file only contains an export statement and no other code. The purpose of this file could be to serve as an entry point for the entire `zoo` module, exporting all the necessary functions and variables from other files within the module.
-
-2. **What is being exported from this file?**\
-The export statement in this file is empty, which could lead a developer to question what exactly is being exported. It's possible that this file is simply exporting everything from other files within the `zoo` module, or it could be exporting a specific function or variable that is defined elsewhere.
-
-3. **Is this file necessary for the `zoo` module to function?**\
-Since this file doesn't contain any actual code, a developer might wonder if it's necessary for the `zoo` module to include this file at all. It's possible that this file is simply serving as a placeholder or convention for organizing the module's code, but it's also possible that it's required for the module to function properly.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/bridgeFiltering.md b/.autodoc/docs/markdown/core/src/functions/bridgeFiltering.md
deleted file mode 100644
index ad1bb9950..000000000
--- a/.autodoc/docs/markdown/core/src/functions/bridgeFiltering.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/bridgeFiltering.ts)
-
-The code in this file provides utility functions for filtering and sorting tokens in a larger project called zoo. The file imports the Token and TokenInfo types from other modules, as well as a validation function and a hook from the React library.
-
-The `createTokenFilterFunction` function takes a search query as input and returns a filter function that can be applied to a list of tokens. If the search query is an Ethereum address, the filter function checks if the token's address matches the query. Otherwise, it splits the search query into parts and checks if each part is a substring of the token's name or symbol. The function returns true if the token matches the search query and false otherwise.
-
-The `filterTokens` function takes a list of tokens and a search query as input and returns a filtered list of tokens that match the search query. It uses the `createTokenFilterFunction` function to create a filter function and applies it to the list of tokens using the `filter` method.
-
-The `useSortedTokensByQuery` hook takes a list of tokens and a search query as input and returns a sorted list of tokens that match the search query. It uses the `useMemo` hook to memoize the sorted list of tokens and avoid unnecessary re-renders. The function first checks if the list of tokens is empty and returns an empty list if it is. Otherwise, it splits the search query into parts and checks if there is more than one part. If there is, it returns the original list of tokens. Otherwise, it sorts the list of tokens by exact matches on the symbol, substrings on the symbol, and the rest of the tokens. The function returns the sorted list of tokens.
-
-Overall, this file provides useful utility functions for filtering and sorting tokens in the larger zoo project. Here is an example of how these functions can be used:
-
-```
-import { filterTokens, useSortedTokensByQuery } from 'zoo/tokenUtils'
-
-const tokens = [
- { name: 'Ethereum', symbol: 'ETH', address: '0x123' },
- { name: 'Dai Stablecoin', symbol: 'DAI', address: '0x456' },
- { name: 'Chainlink', symbol: 'LINK', address: '0x789' },
-]
-
-const filteredTokens = filterTokens(tokens, 'eth')
-// [{ name: 'Ethereum', symbol: 'ETH', address: '0x123' }]
-
-const sortedTokens = useSortedTokensByQuery(tokens, 'link')
-// [{ name: 'Chainlink', symbol: 'LINK', address: '0x789' }, { name: 'Dai Stablecoin', symbol: 'DAI', address: '0x456' }, { name: 'Ethereum', symbol: 'ETH', address: '0x123' }]
-```
-## Questions:
- 1. What is the purpose of the `createTokenFilterFunction` function?
-- The `createTokenFilterFunction` function creates a filter function that can be used to filter a list of tokens based on a search query.
-
-2. What is the purpose of the `useSortedTokensByQuery` function?
-- The `useSortedTokensByQuery` function sorts a list of tokens based on a search query, with exact matches first, followed by tokens with a symbol that starts with the search query, and then the rest of the tokens.
-
-3. What is the purpose of the `alwaysTrue` function?
-- The `alwaysTrue` function is a helper function that always returns `true`. It is used as a fallback filter function in case the search query is empty.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/cloudinary.md b/.autodoc/docs/markdown/core/src/functions/cloudinary.md
deleted file mode 100644
index 8609b3146..000000000
--- a/.autodoc/docs/markdown/core/src/functions/cloudinary.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/cloudinary.ts)
-
-The code above defines two functions: `normalize` and `cloudinaryLoader`. The `normalize` function takes a string `src` as input and returns the string with the first character removed if it is a forward slash. If the first character is not a forward slash, the function returns the original string. This function is used to ensure that the `src` parameter passed to the `cloudinaryLoader` function is properly formatted.
-
-The `cloudinaryLoader` function takes an object with three properties as input: `src`, `width`, and `style`. The function returns a string that represents a URL to an image hosted on the Cloudinary platform. The URL includes the `src` parameter passed to the function, which is first normalized using the `normalize` function. The `width` parameter is used to specify the desired width of the image in pixels. The `style` parameter is not used in the function and is therefore ignored.
-
-This function is likely used in a larger project to dynamically load images from the Cloudinary platform. The `cloudinaryLoader` function can be called with different values for the `src` and `width` parameters to load images of different sizes and from different locations. For example, the following code could be used to load an image with a width of 500 pixels from a Cloudinary URL:
-
-```
-cloudinaryLoader({ src: '/images/my-image.jpg', width: 500 });
-```
-
-Overall, the `cloudinaryLoader` function provides a convenient way to load images from the Cloudinary platform with dynamic sizing. The `normalize` function is used internally to ensure that the `src` parameter is properly formatted before being used in the URL.
-## Questions:
- 1. What is the purpose of the `normalize` function?
- - The `normalize` function removes the first character of the `src` string if it is a forward slash.
-2. What does the `cloudinaryLoader` function do?
- - The `cloudinaryLoader` function returns a URL that fetches an image from the Cloudinary service with the specified `width` and `src`, after normalizing the `src` string using the `normalize` function.
-3. Are there any required parameters for the `cloudinaryLoader` function?
- - Yes, the `src` parameter is required for the `cloudinaryLoader` function to work properly. The `width` and `style` parameters are optional.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/contract.md b/.autodoc/docs/markdown/core/src/functions/contract.md
deleted file mode 100644
index da767fb02..000000000
--- a/.autodoc/docs/markdown/core/src/functions/contract.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/contract.ts)
-
-This file contains several utility functions that are used throughout the zoo project.
-
-The `getSigner` function takes a `Web3Provider` instance and an Ethereum account address as arguments and returns a `JsonRpcSigner` instance that is connected to the specified account. This function is used to sign transactions on behalf of the specified account.
-
-The `getProviderOrSigner` function takes a `Web3Provider` instance and an optional Ethereum account address as arguments and returns either the `Web3Provider` instance or a `JsonRpcSigner` instance that is connected to the specified account. If an account address is provided, the function returns a `JsonRpcSigner` instance that can be used to sign transactions. If no account address is provided, the function returns the `Web3Provider` instance, which can be used to read data from the blockchain.
-
-The `getContract` function takes an Ethereum contract address, an ABI (Application Binary Interface) definition, a `Web3Provider` instance, and an optional Ethereum account address as arguments and returns a `Contract` instance that is connected to the specified contract address. This function is used to interact with smart contracts on the blockchain.
-
-The `getRouterAddress` function takes an optional `ChainId` enum value as an argument and returns the address of the Uniswap router contract for the specified chain. If no chain ID is provided, the function throws an error.
-
-The `getRouterContract` function takes a `ChainId` enum value, a `Web3Provider` instance, and an optional Ethereum account address as arguments and returns a `Contract` instance that is connected to the Uniswap router contract for the specified chain. This function is used to interact with the Uniswap router contract on the blockchain.
-
-The `getArcherRouterContract` function takes a `ChainId` enum value, a `Web3Provider` instance, and an optional Ethereum account address as arguments and returns a `Contract` instance that is connected to the Archer Swap router contract for the specified chain. This function is used to interact with the Archer Swap router contract on the blockchain.
-
-The `switchChain` function takes a `ChainId` enum value, a `Web3Provider` instance, and an Ethereum account address as arguments and switches the user's MetaMask wallet to the specified chain. This function is used to allow users to switch between different Ethereum networks in the zoo application.
-
-Overall, these utility functions provide a convenient way to interact with the Ethereum blockchain and smart contracts in the zoo project. They are used throughout the project to sign transactions, read data from the blockchain, and interact with smart contracts.
-## Questions:
- 1. What is the purpose of this code file?
-- The purpose of this code file is to provide functions for interacting with smart contracts on different chains.
-
-2. What are the parameters required for the `switchChain` function?
-- The `switchChain` function requires `chainId`, `library`, and `account` parameters.
-
-3. What is the difference between `getRouterContract` and `getArcherRouterContract` functions?
-- `getRouterContract` function returns a contract instance for Uniswap V2 router on a specified chain, while `getArcherRouterContract` function returns a contract instance for Archer Swap router on a specified chain.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/convert/apyApr.md b/.autodoc/docs/markdown/core/src/functions/convert/apyApr.md
deleted file mode 100644
index 8934bed83..000000000
--- a/.autodoc/docs/markdown/core/src/functions/convert/apyApr.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/convert/apyApr.ts)
-
-This code provides two functions for converting between Annual Percentage Yield (APY) and Annual Percentage Rate (APR). APY is the rate of return on an investment over a year, taking into account compounding interest, while APR is the simple interest rate over a year. The functions take in the APY or APR as a percentage and the frequency of compounding (in times per year), and return the corresponding APR or APY as a percentage.
-
-The `apyToApr` function uses the formula `(1 + apy / 100) ** (1 / frequency) - 1` to calculate the periodic interest rate, then multiplies it by the frequency to get the APR. The `aprToApy` function uses the formula `(1 + apr / 100 / frequency) ** frequency - 1` to calculate the periodic interest rate, then multiplies it by 100 to get the APY.
-
-These functions could be useful in financial applications where APY and APR are important metrics, such as calculating interest on loans or investments. For example, if a user inputs an APY for a savings account, the `apyToApr` function could be used to calculate the equivalent APR for comparison to other interest rates. Similarly, if a user inputs an APR for a loan, the `aprToApy` function could be used to calculate the equivalent APY to determine the total cost of the loan over time.
-
-Example usage:
-
-```
-import { apyToApr, aprToApy } from 'zoo';
-
-const apy = 6;
-const frequency = 12; // monthly compounding
-const apr = apyToApr(apy, frequency); // 5.82
-
-const apr2 = 5.82;
-const frequency2 = 365; // daily compounding
-const apy2 = aprToApy(apr2, frequency2); // 6.01
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code provides two functions, `apyToApr` and `aprToApy`, that convert between annual percentage yield (APY) and annual percentage rate (APR) based on a given compounding frequency.
-
-2. What is the source of the formulas used in this code?
-- The formulas used in this code are sourced from http://www.linked8.com/blog/158-apy-to-apr-and-apr-to-apy-calculation-methodologies.
-
-3. What is the significance of the `BLOCKS_IN_A_YEAR` constant?
-- The `BLOCKS_IN_A_YEAR` constant is used as the default value for the `frequency` parameter in both functions. It represents the number of blocks in a year based on a block time of 14 seconds, which is used in the Ethereum blockchain.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/convert/basisPointsToPercent.md b/.autodoc/docs/markdown/core/src/functions/convert/basisPointsToPercent.md
deleted file mode 100644
index 421668a39..000000000
--- a/.autodoc/docs/markdown/core/src/functions/convert/basisPointsToPercent.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/convert/basisPointsToPercent.ts)
-
-The code above is a function that converts a basis points value to a Percent object from the '@zoolabs/zdk' library. The purpose of this function is to provide a convenient way to convert a basis points value to a Percent object that can be used in other parts of the project.
-
-The function takes in a single argument, a number representing the basis points value to be converted. The function then creates a new Percent object using the JSBI.BigInt() method from the '@zoolabs/zdk' library. The first argument passed to the JSBI.BigInt() method is the basis points value, while the second argument is the value 10000, which represents the total number of basis points in a whole number.
-
-For example, if the function is called with the argument 500, it will return a Percent object representing 5%. This is because 500 basis points is equal to 5% of the total value.
-
-Here is an example of how this function could be used in the larger project:
-
-```
-import { basisPointsToPercent } from 'zoo'
-
-const basisPointsValue = 250
-const percentValue = basisPointsToPercent(basisPointsValue)
-
-console.log(percentValue.toString()) // "2.5%"
-```
-
-In this example, the basisPointsToPercent() function is imported from the 'zoo' module. The function is then called with a basis points value of 250, which is equal to 2.5% of the total value. The resulting Percent object is stored in the variable percentValue, which can then be used in other parts of the project. Finally, the toString() method is called on the Percent object to convert it to a string representation of the percentage value.
-
-Overall, this function provides a simple and convenient way to convert basis points values to Percent objects in the '@zoolabs/zdk' library, which can be used in other parts of the project.
-## Questions:
- 1. What is the purpose of the `@zoolabs/zdk` library and how is it being used in this code?
-- The `@zoolabs/zdk` library is being imported to use the `JSBI` and `Percent` classes. Its purpose is not clear from this code alone and would require further investigation.
-
-2. What is the expected input and output of the `basisPointsToPercent` function?
-- The function takes in a number representing basis points and returns a new `Percent` object using the `JSBI` class to convert the basis points to a percentage.
-
-3. Are there any potential errors or edge cases that need to be considered when using this function?
-- It is not clear from this code if any error handling or input validation is being performed, so a smart developer may want to investigate and consider potential edge cases such as negative numbers or non-numeric inputs.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/convert/contenthashToUri.md b/.autodoc/docs/markdown/core/src/functions/convert/contenthashToUri.md
deleted file mode 100644
index f35e723a0..000000000
--- a/.autodoc/docs/markdown/core/src/functions/convert/contenthashToUri.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/convert/contenthashToUri.ts)
-
-The code in this file provides functions for converting content hashes to URI representations for supported codecs. It imports functions from the `multihashes` and `multicodec` libraries to decode and get the codec of the content hash. It also imports the `CID` class from the `cids` library to create a CID object from the decoded content hash.
-
-The `hexToUint8Array` function takes a hexadecimal string and returns a Uint8Array. It removes the '0x' prefix if present, checks that the length of the string is a multiple of 2, creates a new Uint8Array with half the length of the string, and populates it with the parsed hexadecimal values.
-
-The `contenthashToUri` function takes a content hash string and returns a URI string. It first converts the content hash to a Uint8Array using the `hexToUint8Array` function. It then gets the codec of the content hash using the `getCodec` function from `multicodec`. If the codec is 'ipfs-ns', it removes the prefix from the content hash, creates a CID object from the data, and returns an IPFS URI string with the base58-encoded multihash. If the codec is 'ipns-ns', it removes the prefix from the content hash, creates a CID object from the data, decodes the multihash using `decode` from `multihashes`, and returns an IPNS URI string with the decoded digest if the multihash name is 'identity', or with the base58-encoded multihash otherwise. If the codec is not recognized, it throws an error.
-
-This code can be used in the larger project to convert content hashes to URI representations for supported codecs. For example, it can be used to generate IPFS or IPNS URIs for content stored on the network. Here is an example usage:
-
-```
-const contenthash = '0x1220deadbeef'
-const uri = contenthashToUri(contenthash)
-console.log(uri) // 'ipfs://Qm...'
-```
-## Questions:
- 1. What is the purpose of the `multihashes` and `multicodec` libraries being imported?
-- The `multihashes` library is used to decode the content hash passed to the `contenthashToUri` function, while the `multicodec` library is used to determine the codec of the content hash.
-
-2. What is the expected format of the `contenthash` parameter passed to the `contenthashToUri` function?
-- The `contenthash` parameter is expected to be a hexadecimal string representing a content hash.
-
-3. What is the purpose of the `UTF_8_DECODER` constant?
-- The `UTF_8_DECODER` constant is an instance of the `TextDecoder` class and is used to decode the digest of an IPNS multihash into a UTF-8 string.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/convert/index.md b/.autodoc/docs/markdown/core/src/functions/convert/index.md
deleted file mode 100644
index 412e7c93f..000000000
--- a/.autodoc/docs/markdown/core/src/functions/convert/index.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/convert/index.ts)
-
-This code exports three functions from three different files: `basisPointsToPercent`, `contenthashToUri`, and `uriToHttp`. These functions are likely used in the larger project to convert data between different formats or to manipulate data in some way.
-
-The `basisPointsToPercent` function is likely used to convert financial data from basis points to a percentage format. This could be useful in financial calculations or when displaying financial data to users. Here is an example of how this function might be used:
-
-```
-import { basisPointsToPercent } from 'zoo';
-
-const basisPoints = 500;
-const percent = basisPointsToPercent(basisPoints);
-console.log(percent); // Output: 5%
-```
-
-The `contenthashToUri` function is likely used to convert a content hash to a URI format. This could be useful when working with content-addressable storage systems or when generating unique identifiers for content. Here is an example of how this function might be used:
-
-```
-import { contenthashToUri } from 'zoo';
-
-const contentHash = 'QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ';
-const uri = contenthashToUri(contentHash);
-console.log(uri); // Output: /ipfs/QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ
-```
-
-The `uriToHttp` function is likely used to convert a URI to an HTTP URL format. This could be useful when working with web APIs or when generating links to web resources. Here is an example of how this function might be used:
-
-```
-import { uriToHttp } from 'zoo';
-
-const uri = '/ipfs/QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ';
-const httpUrl = uriToHttp(uri);
-console.log(httpUrl); // Output: https://ipfs.io/ipfs/QmXJ7jzJ1J7Z8wJzZzXjJZ5JzJzJzJzJzJzJzJzJzJzJzJ
-```
-
-Overall, this code exports three useful functions that can be used in a variety of ways throughout the larger project.
-## Questions:
- 1. **What is the purpose of this code file?**
-A smart developer might wonder what the overall goal of this file is and how it fits into the larger project. Based on the code, it appears to be exporting three functions from separate files.
-
-2. **What do the exported functions do?**
-A developer might want to know more about the specific functionality of the exported functions, such as what arguments they take and what they return. Without additional context or documentation, it's unclear what these functions do.
-
-3. **Are there any dependencies or requirements for these functions to work?**
-A developer might want to know if there are any external dependencies or requirements for these functions to work properly. For example, do they rely on other functions or modules within the zoo project, or do they require certain versions of external libraries?
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/convert/uriToHttp.md b/.autodoc/docs/markdown/core/src/functions/convert/uriToHttp.md
deleted file mode 100644
index 4d18de47b..000000000
--- a/.autodoc/docs/markdown/core/src/functions/convert/uriToHttp.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/convert/uriToHttp.ts)
-
-The `uriToHttp` function takes a URI as input and returns an array of fetch-able http(s) URLs for the same content. The function supports four protocols: http, https, ipfs, and ipns.
-
-For http and https protocols, the function simply returns the input URI as a single-element array. For ipfs and ipns protocols, the function returns two URLs: one for the cloudflare-ipfs.com gateway and one for the ipfs.io gateway.
-
-The function first extracts the protocol from the input URI using the `split` method and converts it to lowercase. It then uses a `switch` statement to handle each protocol case.
-
-For http protocol, the function constructs two URLs: one with https protocol and the same path as the input URI (with the first four characters removed), and one with http protocol and the same path as the input URI. These URLs are returned as a two-element array.
-
-For ipfs and ipns protocols, the function extracts the hash or name from the URI using a regular expression and constructs two URLs for each protocol using the extracted hash or name. These URLs are returned as a two-element array.
-
-This function can be used in the larger project to convert URIs to fetch-able http(s) URLs for content stored on ipfs or ipns. For example, if the project needs to fetch content from ipfs, it can use this function to convert the ipfs URI to http(s) URLs and then use these URLs to fetch the content.
-
-Example usage:
-
-```
-const uri = 'ipfs:QmXyZabc123'
-const httpUrls = uriToHttp(uri)
-console.log(httpUrls) // ['https://cloudflare-ipfs.com/ipfs/QmXyZabc123/', 'https://ipfs.io/ipfs/QmXyZabc123/']
-```
-## Questions:
- 1. What is the purpose of this function?
-
- This function takes a URI and returns an array of fetch-able http(s) URLs for the same content.
-
-2. What protocols does this function support?
-
- This function supports ipfs, ipns, http, and https protocols.
-
-3. What is the purpose of the regular expressions used in this function?
-
- The regular expressions are used to extract the hash or name from the ipfs or ipns URI, respectively.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/currency/currencyId.md b/.autodoc/docs/markdown/core/src/functions/currency/currencyId.md
deleted file mode 100644
index 944b9179e..000000000
--- a/.autodoc/docs/markdown/core/src/functions/currency/currencyId.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/currency/currencyId.ts)
-
-The code in this file defines a function called `currencyId` that takes a `Currency` object as an argument and returns a string representing the currency's ID. The `Currency` object is imported from the `@zoolabs/zdk` library, which is presumably part of the larger zoo project.
-
-The `currencyId` function first checks if the `Currency` object's `chainId` property is equal to `ChainId.CELO`. If it is, the function returns the `address` property of the `wrapped` property of the `Currency` object. This suggests that the `Currency` object has a `wrapped` property that contains information about the wrapped version of the currency on the CELO blockchain.
-
-If the `chainId` property is not equal to `ChainId.CELO`, the function checks if the `Currency` object's `isNative` property is true. If it is, the function returns the string `'ETH'`. This suggests that the `Currency` object represents the native currency of the Ethereum blockchain.
-
-If the `isNative` property is false, the function checks if the `Currency` object's `isToken` property is true. If it is, the function returns the `address` property of the `Currency` object. This suggests that the `Currency` object represents a token on some blockchain.
-
-If neither of the previous conditions are true, the function throws an error with the message `'invalid currency'`. This suggests that the `Currency` object is expected to have either a `wrapped` property or an `address` property, and that the function is designed to handle specific types of currencies.
-
-It's possible that this function is used in other parts of the zoo project to convert `Currency` objects into IDs that can be used in other contexts, such as in smart contracts or API requests. Here's an example of how this function might be used:
-
-```
-import { Currency } from '@zoolabs/zdk'
-import { currencyId } from 'zoo'
-
-const currency = new Currency('CELO', '0x123abc', 1)
-const currencyId = currencyId(currency) // returns '0x123abc'
-```
-## Questions:
- 1. What is the purpose of this code?
- This code defines a function called `currencyId` that takes a `Currency` object as input and returns a string representing the currency's ID.
-
-2. What is the `@zoolabs/zdk` package used for?
- The `@zoolabs/zdk` package is used to import the `ChainId` and `Currency` classes that are used in this code.
-
-3. Why is there commented-out code at the bottom of the file?
- The commented-out code defines a different version of the `currencyId` function that takes an additional `chainId` parameter and uses different logic to determine the currency ID. It is possible that this code was an earlier version of the function that was replaced by the current implementation.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/currency/getCurrency.md b/.autodoc/docs/markdown/core/src/functions/currency/getCurrency.md
deleted file mode 100644
index dc6a1a804..000000000
--- a/.autodoc/docs/markdown/core/src/functions/currency/getCurrency.md
+++ /dev/null
@@ -1,27 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/currency/getCurrency.ts)
-
-This code defines two objects, `USD_CURRENCY` and `ETH_CURRENCY`, which contain information about the addresses and decimal places of various currencies on different blockchain networks. The `Currency` type is defined as an object with an `address` property (a string representing the currency's contract address) and a `decimals` property (an integer representing the number of decimal places the currency uses).
-
-The `USD_CURRENCY` object contains information for several different networks, including Ethereum mainnet, Ropsten, Kovan, Rinkeby, Göerli, Binance Smart Chain, Binance Smart Chain testnet, HECO, HECO testnet, Polygon, Polygon testnet, xDai, and Arbitrum. The `ETH_CURRENCY` object only contains information for Ethereum mainnet.
-
-The `getCurrency` function takes a `ChainId` argument (an enum defined in the `@zoolabs/zdk` package) and returns the corresponding `Currency` object from `USD_CURRENCY` if it exists, or a default `Currency` object with an `address` of `AddressZero` (a constant from the `@ethersproject/constants` package) and `decimals` of 18 if it does not.
-
-This code is likely used in the larger project to provide a centralized place to store information about the addresses and decimal places of various currencies on different networks. Other parts of the project can import these objects and use them to perform currency-related calculations or display currency information to users. For example, a user interface component might use the `getCurrency` function to display the appropriate currency symbol and decimal formatting for a given network.
-
-Example usage:
-```
-import { USD_CURRENCY, getCurrency, ChainId } from 'zoo'
-
-console.log(USD_CURRENCY[ChainId.MAINNET]) // { address: '0xdAC17F958D2ee523a2206206994597C13D831ec7', decimals: 6 }
-
-console.log(getCurrency(ChainId.BSC_TESTNET)) // { address: '0x337610d27c682E347C9cD60BD4b3b107C9d34dDd', decimals: 18 }
-```
-## Questions:
- 1. What is the purpose of the `Currency` type and how is it used in this code?
-- The `Currency` type defines an object with an `address` property (a string) and a `decimals` property (a number). It is used to represent different currencies on different blockchain networks.
-
-2. What is the significance of the `USD_CURRENCY` and `ETH_CURRENCY` constants?
-- `USD_CURRENCY` is an object that maps `ChainId` values to `Currency` objects representing the USD stablecoin on different blockchain networks. `ETH_CURRENCY` is a similar object representing Ether on different networks.
-
-3. What is the purpose of the `getCurrency` function and how does it work?
-- The `getCurrency` function takes a `ChainId` argument and returns the corresponding `Currency` object from `USD_CURRENCY` if it exists, or a default `Currency` object with an `address` of `AddressZero` and `decimals` of 18 if it does not. This function is used to retrieve the appropriate pricing currency for a given blockchain network.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/currency/index.md b/.autodoc/docs/markdown/core/src/functions/currency/index.md
deleted file mode 100644
index c706ec605..000000000
--- a/.autodoc/docs/markdown/core/src/functions/currency/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/currency/index.ts)
-
-This file is responsible for exporting various modules related to currency and spending limits in the larger project. The `export *` syntax is used to export all the functions and variables from the specified modules.
-
-The `currencyId` module likely contains a list of unique identifiers for different currencies used in the project. This could be useful for tracking and managing different types of currency within the system.
-
-The `getCurrency` module likely contains functions for retrieving information about a specific currency, such as its name, symbol, and exchange rate. This could be useful for displaying currency information to users or performing calculations involving different currencies.
-
-The `wrappedCurrency` module likely contains functions for wrapping and unwrapping currencies, which is a common practice in decentralized finance (DeFi) applications. This involves converting one type of currency into another that is compatible with a specific DeFi protocol or platform.
-
-The `maxAmountSpend` module likely contains functions for calculating the maximum amount of a specific currency that can be spent based on various factors such as account balance, transaction fees, and spending limits. This could be useful for preventing users from overspending or exceeding their account limits.
-
-Overall, this file plays an important role in managing currency-related functionality within the larger project. By exporting these modules, other parts of the project can easily access and utilize these functions and variables as needed.
-
-Example usage:
-
-```
-import { getCurrency } from './getCurrency';
-
-const currencyInfo = getCurrency('USD');
-console.log(currencyInfo.name); // Output: "United States Dollar"
-```
-## Questions:
- 1. **What is the purpose of this code file?**\
-A smart developer might wonder what the overall goal of this file is, as it simply exports various functions from other files. The purpose of this file is to provide a centralized location for importing these functions into other parts of the project.
-
-2. **What do the exported functions do?**\
-A developer might want to know more about the specific functionality of the exported functions. `currencyId` likely provides an identifier for a specific currency, `getCurrency` probably retrieves information about a given currency, `wrappedCurrency` may wrap a currency in a specific format, and `maxAmountSpend` could calculate the maximum amount of a currency that can be spent.
-
-3. **What other files are related to this code?**\
-A developer may want to know what other files are related to this code, as it is only exporting functions from other files. The file names listed in the code suggest that there are other files related to currency and spending within the project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/currency/maxAmountSpend.md b/.autodoc/docs/markdown/core/src/functions/currency/maxAmountSpend.md
deleted file mode 100644
index f8cef754e..000000000
--- a/.autodoc/docs/markdown/core/src/functions/currency/maxAmountSpend.md
+++ /dev/null
@@ -1,27 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/currency/maxAmountSpend.ts)
-
-The code in this file is responsible for calculating the maximum amount that can be spent on a given currency. It imports three modules from the '@zoolabs/zdk' library: Currency, CurrencyAmount, and JSBI.
-
-The constant variable MIN_NATIVE_CURRENCY_FOR_GAS is defined as the result of raising 10 to the power of 16, which represents the minimum amount of native currency (in this case, Ethereum) required to pay for gas fees.
-
-The main function in this file is maxAmountSpend, which takes a CurrencyAmount object as its parameter and returns either a new CurrencyAmount object or undefined. If the input parameter is undefined, the function returns undefined. If the currency of the input parameter is native (i.e. Ethereum), the function checks if the quotient of the currency amount is greater than MIN_NATIVE_CURRENCY_FOR_GAS. If it is, the function subtracts MIN_NATIVE_CURRENCY_FOR_GAS from the quotient and returns a new CurrencyAmount object with the same currency and the new quotient. If the quotient is less than or equal to MIN_NATIVE_CURRENCY_FOR_GAS, the function returns a new CurrencyAmount object with the same currency and a quotient of 0. If the currency is not native, the function simply returns the input parameter.
-
-This function can be used in the larger project to calculate the maximum amount that can be spent on a given currency, which is useful for various financial transactions. For example, if a user wants to make a transaction that requires a certain amount of Ethereum, this function can be used to ensure that they have enough Ethereum to cover the transaction fees.
-
-Example usage:
-
-```
-import { maxAmountSpend, CurrencyAmount, Currency } from 'zoo'
-
-const ethAmount = CurrencyAmount.fromRawAmount(Currency.ETH, '1000000000000000000') // 1 ETH
-const maxSpend = maxAmountSpend(ethAmount) // returns a new CurrencyAmount object with 0.99 ETH
-```
-## Questions:
- 1. What is the purpose of the `Currency`, `CurrencyAmount`, and `JSBI` imports from `@zoolabs/zdk`?
-- These imports are likely used to handle currency-related calculations and conversions within the `maxAmountSpend` function.
-
-2. What is the significance of the `MIN_NATIVE_CURRENCY_FOR_GAS` constant?
-- This constant represents the minimum amount of native currency (in this case, ETH) required to cover gas fees for a transaction.
-
-3. What does the `maxAmountSpend` function do?
-- This function takes in a `CurrencyAmount` object and returns the maximum amount that can be spent of that currency, taking into account gas fees if the currency is native to the blockchain. If no `CurrencyAmount` is provided, the function returns `undefined`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/currency/wrappedCurrency.md b/.autodoc/docs/markdown/core/src/functions/currency/wrappedCurrency.md
deleted file mode 100644
index a7521d2d6..000000000
--- a/.autodoc/docs/markdown/core/src/functions/currency/wrappedCurrency.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/currency/wrappedCurrency.ts)
-
-The code above is a function called `unwrappedToken` that takes a `Currency` object as its argument and returns a `Currency` object. The purpose of this function is to check if the given `Currency` object is a native currency or not. If it is a native currency, the function returns the same object. If it is not a native currency, the function checks if the `chainId` property of the `Currency` object is present in the `ChainId` object and if the `Currency` object is equal to the `WNATIVE` object for that `chainId`. If both conditions are true, the function returns the `NATIVE` object for that `chainId`. If neither condition is true, the function returns the same `Currency` object that was passed as an argument.
-
-This function is part of the larger `zoo` project and is used to handle different types of currencies in the project. It is particularly useful when dealing with wrapped tokens, which are tokens that are backed by another asset, such as Ether. Wrapped tokens are often used in decentralized finance (DeFi) applications and can be traded on various decentralized exchanges (DEXs). This function helps to identify whether a given token is a wrapped token or not and returns the underlying asset if it is.
-
-Here is an example of how this function can be used in the larger `zoo` project:
-
-```javascript
-import { Currency } from '@zoolabs/zdk'
-import { unwrappedToken } from 'zoo'
-
-const wrappedToken = new Currency('0x123', 'Wrapped Token', 18)
-const nativeToken = new Currency('0x456', 'Native Token', 18)
-
-const unwrappedWrappedToken = unwrappedToken(wrappedToken)
-const unwrappedNativeToken = unwrappedToken(nativeToken)
-
-console.log(unwrappedWrappedToken) // returns the same wrappedToken object
-console.log(unwrappedNativeToken) // returns the same nativeToken object
-```
-
-In this example, we create two `Currency` objects, one for a wrapped token and one for a native token. We then pass each of these objects to the `unwrappedToken` function and log the results to the console. Since the wrapped token is not a native currency, the function returns the same `wrappedToken` object. Since the native token is a native currency, the function also returns the same `nativeToken` object.
-## Questions:
- 1. What is the purpose of the `unwrappedToken` function?
-- The `unwrappedToken` function takes a `Currency` object as input and returns either the same object or a different `Currency` object depending on certain conditions.
-
-2. What is the significance of the `isNative` property of the `Currency` object?
-- The `isNative` property of the `Currency` object is used to determine whether the input `Currency` object is the native currency of its blockchain.
-
-3. What is the purpose of the commented out code block?
-- The commented out code block appears to be related to a specific use case involving a particular `Currency` object (`WETH9_EXTENDED`) and a formatted chain ID. However, without more context it is unclear what the purpose of this code block is or why it is commented out.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/ens.md b/.autodoc/docs/markdown/core/src/functions/ens.md
deleted file mode 100644
index 63ed65560..000000000
--- a/.autodoc/docs/markdown/core/src/functions/ens.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/ens.ts)
-
-This code provides functionality for resolving ENS (Ethereum Name Service) addresses to content hashes on the Ethereum mainnet.
-
-The `import` statements at the beginning of the file bring in necessary dependencies from the `@ethersproject` library.
-
-The `REGISTRAR_ABI` and `REGISTRAR_ADDRESS` constants define the ABI (Application Binary Interface) and address of the ENS registrar contract on the Ethereum mainnet. The `RESOLVER_ABI` constant defines the ABI for the resolver contract, which is used to resolve ENS names to content hashes.
-
-The `resolverContract` function takes a resolver address and provider as arguments and returns a new `Contract` instance for that resolver address using the `RESOLVER_ABI` constant. This function is used to cache resolver contracts since most of them are the public resolver.
-
-The `resolveENSContentHash` function takes an ENS name and provider as arguments and returns a promise that resolves to the content hash associated with that ENS name. This function first creates a new `Contract` instance for the ENS registrar contract using the `REGISTRAR_ABI` constant. It then uses the `namehash` function from the `@ethersproject/hash` library to compute the hash of the ENS name. It then calls the `resolver` function on the ENS registrar contract to get the resolver address associated with the ENS name. Finally, it calls the `contenthash` function on the resolver contract for the given hash to get the content hash associated with the ENS name.
-
-The `ENS_NAME_REGEX` constant defines a regular expression for matching ENS addresses. The `parseENSAddress` function takes an ENS address as an argument and returns an object with the ENS name and path (if any) parsed from the address. This function uses the `ENS_NAME_REGEX` constant to match the ENS address and returns `undefined` if there is no match. Otherwise, it returns an object with the ENS name and path parsed from the address.
-
-Overall, this code provides a way to resolve ENS addresses to content hashes on the Ethereum mainnet, which can be useful for retrieving content associated with decentralized websites and applications. Here is an example usage of the `resolveENSContentHash` function:
-
-```
-import { ethers } from 'ethers'
-import { resolveENSContentHash } from 'zoo'
-
-const provider = new ethers.providers.InfuraProvider('mainnet', 'your-infura-project-id')
-const ensName = 'mywebsite.eth'
-
-resolveENSContentHash(ensName, provider)
- .then(contentHash => {
- console.log(`Content hash for ${ensName}: ${contentHash}`)
- })
- .catch(error => {
- console.error(`Error resolving content hash for ${ensName}: ${error}`)
- })
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code provides functions for resolving ENS content hashes and parsing ENS addresses.
-
-2. What is the significance of the REGISTRAR_ADDRESS and REGISTRAR_ABI constants?
-- The REGISTRAR_ADDRESS constant is the address of the ENS registrar contract on the Ethereum mainnet, and the REGISTRAR_ABI constant is the ABI for that contract. These are used to fetch the resolver address for a given ENS name.
-
-3. What is the format of a valid ENS address that can be parsed by the parseENSAddress function?
-- A valid ENS address must have a domain name ending in ".eth", and may optionally include a path after the domain name. The domain name must consist of one or more alphanumeric labels separated by hyphens.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/environment.md b/.autodoc/docs/markdown/core/src/functions/environment.md
deleted file mode 100644
index 79f2f9e70..000000000
--- a/.autodoc/docs/markdown/core/src/functions/environment.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/environment.ts)
-
-The `isEnvironment` function is a utility function that checks whether the current environment matches a given environment. The function takes a single argument, `env`, which is a string representing the environment to check against.
-
-The function uses the `process.env` object to access the current environment variables. Specifically, it checks the value of the `REACT_PUBLIC_APP_ENV` variable, which is assumed to be set by the build process or runtime environment. If the value of `REACT_PUBLIC_APP_ENV` matches the `env` argument, the function returns `true`. Otherwise, it returns `false`.
-
-This function can be used in a variety of ways within the larger project. For example, it could be used to conditionally render certain components or features based on the current environment. It could also be used to configure different settings or behavior based on the environment.
-
-Here is an example of how the `isEnvironment` function could be used in a React component:
-
-```
-import React from 'react';
-import { isEnvironment } from './utils';
-
-const MyComponent = () => {
- const isProduction = isEnvironment('production');
-
- return (
- My Transaction History
-
- {isProduction ? (
-
- );
-};
-```
-
-In this example, the `isEnvironment` function is used to determine whether the current environment is the production environment. Depending on the result, the component renders different content.
-
-Overall, the `isEnvironment` function is a simple but useful utility function that can help with environment-specific logic and behavior within the larger project.
-## Questions:
- 1. What does this function do?
- - This function checks if the environment variable `REACT_PUBLIC_APP_ENV` is equal to the input `env`.
-
-2. What is the expected input for this function?
- - The expected input for this function is a string representing the environment to be checked against the `REACT_PUBLIC_APP_ENV` variable.
-
-3. Where is the `process.env.REACT_PUBLIC_APP_ENV` variable defined?
- - The `process.env.REACT_PUBLIC_APP_ENV` variable is likely defined in a configuration file or environment variable setup outside of this code file.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/explorer.md b/.autodoc/docs/markdown/core/src/functions/explorer.md
deleted file mode 100644
index fd3c6ae62..000000000
--- a/.autodoc/docs/markdown/core/src/functions/explorer.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/explorer.ts)
-
-The code defines a set of explorers and chains for the zoo project. The explorers are functions that take in a link, data, and type, and return a URL string for a specific blockchain explorer. The chains are objects that map a chain ID to a link and an explorer builder function. The `getExplorerLink` function takes in a chain ID, data, and type, and returns a URL string for the corresponding explorer.
-
-The `explorers` object defines four explorer functions for etherscan, blockscout, harmony, and okex. Each function takes in a link, data, and type, and returns a URL string for a specific blockchain explorer. The `switch` statement inside each function determines the type of data and returns the corresponding URL string.
-
-The `chains` object maps each chain ID to a link and an explorer builder function. The link is a string that represents the base URL for the corresponding blockchain explorer. The explorer builder function is one of the four explorer functions defined in the `explorers` object. The `ChainId` enum is imported from the `@zoolabs/zdk` library and is used to define the keys for the `chains` object.
-
-The `getExplorerLink` function takes in a chain ID, data, and type, and returns a URL string for the corresponding explorer. It first retrieves the chain object from the `chains` object using the chain ID. It then calls the explorer builder function with the link, data, and type to generate the URL string.
-
-This code is used to provide a consistent way of generating blockchain explorer URLs for different chains in the zoo project. It can be used by other modules in the project that need to generate explorer URLs for different chains. For example, if a module needs to generate an explorer URL for a transaction on the Ethereum mainnet, it can call `getExplorerLink(ChainId.MAINNET, txHash, 'transaction')` to get the URL string for the transaction on Etherscan.
-## Questions:
- 1. What is the purpose of the `explorers` object?
-- The `explorers` object contains functions that generate links to blockchain explorers based on the type of data provided (transaction, token, address, or block).
-
-2. What is the `chains` object used for?
-- The `chains` object maps chain IDs to explorer links and builder functions that generate links for each chain.
-
-3. What does the `getExplorerLink` function do?
-- The `getExplorerLink` function takes a chain ID, data, and type as arguments, and returns a link to a blockchain explorer generated by the corresponding builder function for that chain.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/feature.md b/.autodoc/docs/markdown/core/src/functions/feature.md
deleted file mode 100644
index bbaaf4b43..000000000
--- a/.autodoc/docs/markdown/core/src/functions/feature.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/feature.ts)
-
-This code defines a set of features and their availability on different blockchain networks. The `Feature` enum lists the available features, including AMM, liquidity mining, BentoBox, Kashi, MISO, analytics, migrate, and staking. The `globalFeatures` array lists the features that are globally available, but are not tied to any specific blockchain network.
-
-The `features` object is a mapping of `ChainId` to an array of `Feature`s that are available on that network. `ChainId` is an enum that lists the supported blockchain networks, including MAINNET, HARDHAT, ROPSTEN, RINKEBY, GÖRLI, KOVAN, BSC, BSC_TESTNET, FANTOM, FANTOM_TESTNET, MATIC, MATIC_TESTNET, HARMONY, HARMONY_TESTNET, AVALANCHE, AVALANCHE_TESTNET, OKEX, OKEX_TESTNET, XDAI, MOONRIVER, and ARBITRUM.
-
-The `featureEnabled` function takes a `Feature` and a `ChainId` as input and returns a boolean indicating whether the feature is available on that network. It checks if the `features` object has an array of features for the given `ChainId`, and if so, whether that array includes the given `Feature`. It also checks if the `globalFeatures` array includes the given `Feature`.
-
-The `chainsWithFeature` function takes a `Feature` as input and returns an array of `ChainId`s that support that feature. It filters the keys of the `features` object to only include those that have the given `Feature` in their array of features, and then maps those keys to their corresponding `ChainId`.
-
-This code is likely used in the larger project to determine which features are available on which blockchain networks, and to enable or disable certain functionality based on those features. For example, a UI component might display different options depending on which features are available on the user's selected network.
-## Questions:
- 1. What is the purpose of the `globalFeatures` array?
- - The `globalFeatures` array contains a list of features that are enabled globally across all chains.
-2. What is the purpose of the `featureEnabled` function?
- - The `featureEnabled` function takes in a `Feature` and a `ChainId` as arguments and returns a boolean indicating whether the feature is enabled on the specified chain and globally.
-3. What is the purpose of the `chainsWithFeature` function?
- - The `chainsWithFeature` function takes in a `Feature` as an argument and returns an array of `ChainId`s that have the specified feature enabled.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/filtering.md b/.autodoc/docs/markdown/core/src/functions/filtering.md
deleted file mode 100644
index e0192dce1..000000000
--- a/.autodoc/docs/markdown/core/src/functions/filtering.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/filtering.ts)
-
-The code in this file provides functions for filtering and sorting tokens in a larger project called zoo. The file imports the Token and TokenInfo classes from the zdk and token-lists modules, respectively, as well as the isAddress function from a local validate module and the useMemo hook from the React library.
-
-The createTokenFilterFunction function takes a search query string as input and returns a filter function that can be applied to a list of tokens. If the search query is an Ethereum address, the filter function checks whether the token's address matches the query. Otherwise, the function splits the search query into lowercase parts and checks whether each part is a substring of the token's name or symbol. The function returns true if the token matches all search query parts.
-
-The filterTokens function takes a list of tokens and a search query string as input and returns a filtered list of tokens that match the search query. It uses the createTokenFilterFunction to create a filter function and applies it to the list of tokens.
-
-The useSortedTokensByQuery function takes a list of tokens and a search query string as input and returns a sorted list of tokens that match the search query. It uses the useMemo hook to memoize the sorted list of tokens and avoid unnecessary re-renders. The function first checks whether the search query matches exactly one token symbol. If so, it returns a list of tokens that match the exact symbol. Otherwise, it sorts the tokens into three lists: exact matches, substring matches on symbol, and the rest. The function returns a concatenated list of these three lists, sorted in that order.
-
-Overall, this file provides useful functions for filtering and sorting tokens in the larger zoo project. For example, the filterTokens function could be used to display a list of tokens that match a user's search query, while the useSortedTokensByQuery function could be used to display a sorted list of tokens that match the query. These functions could be used in various parts of the zoo project, such as a token search feature or a token list display.
-## Questions:
- 1. What is the purpose of the `createTokenFilterFunction` function?
-- The `createTokenFilterFunction` function creates a filter function that can be used to filter an array of tokens based on a search query.
-
-2. What is the purpose of the `useSortedTokensByQuery` function?
-- The `useSortedTokensByQuery` function sorts an array of tokens based on a search query, with exact matches first, followed by tokens with a symbol that starts with the search query, and then the rest of the tokens.
-
-3. What is the purpose of the `alwaysTrue` function?
-- The `alwaysTrue` function is a helper function that always returns `true`, and is used as a fallback filter function in case the search query is empty.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/format.md b/.autodoc/docs/markdown/core/src/functions/format.md
deleted file mode 100644
index 01d014894..000000000
--- a/.autodoc/docs/markdown/core/src/functions/format.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/format.ts)
-
-This file contains a collection of utility functions for formatting various types of data. The functions are exported as individual named functions and can be used independently of each other.
-
-The `capitalize` function takes a string as input and returns the same string with the first letter capitalized.
-
-The `formatK` function takes a string as input and formats it in a human-readable way by abbreviating large numbers with a "K" suffix. For example, `formatK('1234567')` would return `'1.23M'`.
-
-The `shortenAddress` function takes an Ethereum address as input and returns a shortened version of the address with only the first and last four characters visible.
-
-The `shortenString` function takes a string and a length as input and returns a shortened version of the string with three dots in the middle.
-
-The `formatPercent` function takes a string representation of a percentage as input and returns a formatted string with a percent sign.
-
-The `formatNumber` function takes a number as input and returns a formatted string with commas and/or abbreviated with a "K" suffix. It also has options for formatting as USD and specifying the number of decimal places.
-
-The `formatNumberScale` function is similar to `formatNumber` but uses a different scaling system based on the length of the number.
-
-The `escapeRegExp` function takes a string as input and returns the same string with any special characters escaped so that it can be used as a regular expression.
-
-The `formatBalance` function takes a BigNumberish value and returns a formatted string representing the value in ether. It also has options for specifying the number of decimal places and the maximum number of digits after the decimal point.
-
-The `formatCurrencyAmount` and `formatPrice` functions take CurrencyAmount and Price objects, respectively, and return formatted strings representing the values. They also have options for specifying the number of significant figures.
-
-The `formatDateAgo` function takes a Date object as input and returns a formatted string representing the time elapsed since that date.
-
-The `formatCurrencyFromRawAmount` and `formatCurrencyAmountWithCommas` functions take a Currency object and a raw amount as input and return formatted strings representing the value in the specified currency.
-
-The `numberWithCommas` function takes a number or string as input and returns a formatted string with commas separating the thousands.
-
-The `formatError` function takes an error object as input and returns a formatted string representing the error message.
-
-Overall, these functions provide a variety of useful formatting options for different types of data that may be used throughout the larger project.
-## Questions:
- 1. What is the purpose of the `formatFoo` convention and where is it used in this code?
-- The purpose of the `formatFoo` convention is not clear from this code alone. It is not used in this code and there is no documentation explaining its purpose.
-
-2. What is the `Intl.NumberFormat` library used for in this code?
-- The `Intl.NumberFormat` library is used to format numbers as currency with a minimum of 2 decimal places.
-
-3. What is the purpose of the `formatError` function and what kind of input does it expect?
-- The `formatError` function is used to format error messages. It expects an error object as input and returns a formatted error message.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/getLibrary.md b/.autodoc/docs/markdown/core/src/functions/getLibrary.md
deleted file mode 100644
index ac8ba1c9f..000000000
--- a/.autodoc/docs/markdown/core/src/functions/getLibrary.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/getLibrary.ts)
-
-This code is a TypeScript module that exports a single function called `getLibrary`. The purpose of this function is to create and return a `Web3Provider` object that is connected to a given Ethereum provider. The `Web3Provider` is a class from the `@ethersproject/providers` library that provides a way to interact with the Ethereum blockchain using the Web3 API.
-
-The `getLibrary` function takes a single argument called `provider`, which can be any type of Ethereum provider. The function first creates a new `Web3Provider` object using the `provider` argument. If the `provider` object has a `chainId` property that is a number or a string that can be parsed as a number, then that value is used as the chain ID for the `Web3Provider`. Otherwise, the string `'any'` is used as the chain ID.
-
-After creating the `Web3Provider` object, the function sets its `pollingInterval` property to 15 seconds. This property determines how often the `Web3Provider` will poll the Ethereum network for updates.
-
-The function then calls the `detectNetwork` method of the `Web3Provider` object to determine the current network that the provider is connected to. If the network has a known chain ID (i.e. it is one of the chain IDs defined in the `NETWORK_POLLING_INTERVALS` object), then the function sets the `pollingInterval` property of the `Web3Provider` to the corresponding value from the `NETWORK_POLLING_INTERVALS` object.
-
-The `NETWORK_POLLING_INTERVALS` object is a constant object that maps Ethereum chain IDs to polling intervals in milliseconds. Currently, it only defines polling intervals for the Arbitrum and Harmony networks.
-
-Overall, this code provides a convenient way to create a `Web3Provider` object that is connected to a given Ethereum provider and has a reasonable polling interval. It also allows for customization of the polling interval based on the current network, which can help improve performance and reduce unnecessary network traffic.
-
-Example usage:
-
-```typescript
-import { ethers } from 'ethers'
-import getLibrary from './getLibrary'
-
-// create an Ethereum provider using ethers.js
-const provider = new ethers.providers.JsonRpcProvider('https://mainnet.infura.io/v3/your-project-id')
-
-// create a Web3Provider object using the provider
-const library = getLibrary(provider)
-
-// use the library to interact with the Ethereum blockchain
-const balance = await library.getBalance('0x123...')
-```
-## Questions:
- 1. What external libraries or dependencies are being used in this code?
-- The code is importing `ExternalProvider`, `JsonRpcFetchFunc`, and `Web3Provider` from the `@ethersproject/providers` library, as well as `ChainId` from the `@zoolabs/zdk` library.
-
-2. What is the purpose of the `NETWORK_POLLING_INTERVALS` object?
-- The `NETWORK_POLLING_INTERVALS` object is used to store polling intervals for different chain IDs. The polling interval is set to a specific value if the chain ID matches one of the keys in the object.
-
-3. What is the purpose of the `getLibrary` function and what does it return?
-- The `getLibrary` function takes in a provider and returns a `Web3Provider` instance. It sets the polling interval of the instance to 15 seconds and also detects the network of the provider and sets the polling interval to a specific value if the network's chain ID matches one of the keys in the `NETWORK_POLLING_INTERVALS` object.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/getNetworkLibrary.md b/.autodoc/docs/markdown/core/src/functions/getNetworkLibrary.md
deleted file mode 100644
index 63a027b20..000000000
--- a/.autodoc/docs/markdown/core/src/functions/getNetworkLibrary.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/getNetworkLibrary.ts)
-
-The code above is a TypeScript module that exports a function called `getNetworkLibrary()`. The purpose of this function is to provide a Web3Provider instance that can be used to interact with the Ethereum network.
-
-The function first imports the `Web3Provider` class from the `@ethersproject/providers` package. This class is used to create a provider object that can be used to interact with the Ethereum network.
-
-Next, the `network` object is imported from the `../connectors/network` module. This object contains information about the Ethereum network that the application is connected to.
-
-The `getNetworkLibrary()` function returns a `Web3Provider` instance. It first checks if the `networkLibrary` variable is defined. If it is, it returns the existing instance. If it is not, it creates a new instance using the `Web3Provider` class and the `network.provider` object. The `network.provider` object is provided by the `network` module and contains information about the Ethereum network provider that the application is connected to.
-
-This function can be used in other parts of the application to interact with the Ethereum network. For example, if the application needs to send a transaction to the network, it can use the `Web3Provider` instance returned by `getNetworkLibrary()` to create a transaction object and send it to the network.
-
-Here is an example of how this function can be used:
-
-```
-import { getNetworkLibrary } from 'zoo'
-
-const provider = getNetworkLibrary()
-
-// Use the provider to interact with the Ethereum network
-```
-## Questions:
- 1. What is the purpose of the `Web3Provider` import from `@ethersproject/providers`?
-- The `Web3Provider` import is used to create a provider object that can interact with an Ethereum network.
-
-2. What is the `network` import from `../connectors/network` used for?
-- The `network` import is used to get the provider object for a specific Ethereum network.
-
-3. What is the purpose of the `getNetworkLibrary` function?
-- The `getNetworkLibrary` function returns the provider object for the specified Ethereum network, creating it if it doesn't already exist.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/index.md b/.autodoc/docs/markdown/core/src/functions/index.md
deleted file mode 100644
index fed84bb89..000000000
--- a/.autodoc/docs/markdown/core/src/functions/index.md
+++ /dev/null
@@ -1,52 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/index.ts)
-
-This code exports all the modules from various files located in the `zoo` project. Each of these modules serves a specific purpose in the larger project.
-
-The `array` module provides utility functions for working with arrays, such as finding the intersection or difference between two arrays.
-
-The `convert` module provides functions for converting between different data types, such as converting a string to a number or a date object.
-
-The `currency` module provides functions for working with different currencies, such as converting between different currencies or formatting currency values.
-
-The `bentobox` module provides functions for interacting with the Bentobox protocol, which is a decentralized exchange protocol built on Ethereum.
-
-The `block` module provides functions for working with Ethereum blocks, such as getting the latest block number or retrieving a specific block by its hash or number.
-
-The `ens` module provides functions for working with the Ethereum Name Service (ENS), which is a decentralized domain name system built on Ethereum.
-
-The `contract` module provides functions for interacting with Ethereum smart contracts, such as deploying a new contract or calling a function on an existing contract.
-
-The `format` module provides functions for formatting data in various ways, such as formatting a date object as a string or formatting a number with a specific number of decimal places.
-
-The `kashi` module provides functions for interacting with the Kashi protocol, which is a lending and borrowing protocol built on Ethereum.
-
-The `list` module provides utility functions for working with lists, such as finding the first or last element in a list.
-
-The `math` module provides utility functions for performing mathematical operations, such as finding the minimum or maximum value in an array.
-
-The `parse` module provides functions for parsing data from various sources, such as parsing a JSON string or parsing a date string.
-
-The `prices` module provides functions for retrieving price data from various sources, such as retrieving the current price of a specific cryptocurrency.
-
-The `rebase` module provides functions for working with rebasing tokens, which are tokens that adjust their supply to maintain a specific price target.
-
-The `retry` module provides utility functions for retrying a function that may fail, such as retrying a network request that may fail due to a temporary error.
-
-The `styling` module provides utility functions for styling user interfaces, such as generating CSS classes or applying styles to a specific element.
-
-The `trade` module provides functions for interacting with decentralized exchanges, such as executing a trade or retrieving the current price of a specific token.
-
-The `validate` module provides functions for validating data, such as validating an email address or a password.
-
-The `zoo` module likely serves as the main entry point for the `zoo` project, and may provide utility functions or configuration options for the project as a whole.
-
-Overall, this code serves to organize and export the various modules that make up the `zoo` project, allowing other parts of the project to easily import and use these modules as needed. For example, if a developer needs to work with Ethereum smart contracts, they can simply import the `contract` module from the `zoo` project and use its functions to interact with contracts.
-## Questions:
- 1. What is the purpose of the `zoo` project?
-- The `zoo` project appears to be a collection of modules related to various financial and mathematical operations.
-
-2. What is the relationship between the different modules listed in the code?
-- The code exports various modules from different files, each related to a specific financial or mathematical operation.
-
-3. Are there any dependencies required for these modules to work properly?
-- It is unclear from the code whether there are any dependencies required for these modules to work properly. Further investigation into each individual module may be necessary to determine any dependencies.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/kashi.md b/.autodoc/docs/markdown/core/src/functions/kashi.md
deleted file mode 100644
index e158453e8..000000000
--- a/.autodoc/docs/markdown/core/src/functions/kashi.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/kashi.ts)
-
-The code in this file contains several functions that are used in the larger zoo project. The purpose of this code is to provide functionality related to interest accrual, fee calculation, and value calculation for assets and tokens.
-
-The `accrue` function calculates the amount of interest accrued on a given pair and amount of tokens. It takes in a pair object, an amount of tokens, and an optional boolean flag to include the principal amount in the calculation. It returns a BigNumber representing the accrued interest.
-
-The `accrueTotalAssetWithFee` function calculates the total asset value of a pair, including a fee. It takes in a pair object and returns an object with two BigNumbers: one representing the elastic value and one representing the base value.
-
-The `interestAccrue` function calculates the interest rate for a given pair and interest amount. It takes in a pair object and a BigNumber representing the current interest rate. It returns a BigNumber representing the updated interest rate.
-
-The `getUSDValue` function calculates the USD value of a given amount of tokens. It takes in a BigNumber representing the amount of tokens and a token object. It returns a BigNumber representing the USD value.
-
-The `getUSDString` function calculates the USD value of a given amount of tokens and returns it as a string. It takes in a BigNumber representing the amount of tokens and a token object. It returns a string representing the USD value.
-
-The `easyAmount` function returns an object containing the token amount, token amount as a string, USD value of the token amount, and USD value as a string. It takes in a BigNumber representing the token amount and a token object.
-
-The `takeFee` function calculates the fee for a given amount of tokens. It takes in a BigNumber representing the amount of tokens and returns a BigNumber representing the fee.
-
-The `addBorrowFee` function calculates the fee for a given amount of borrowed tokens. It takes in a BigNumber representing the amount of borrowed tokens and returns a BigNumber representing the fee.
-
-The `getFraction` function calculates the fraction of a pair's total asset base value. It takes in several objects representing the total asset base value, total asset elastic value, total borrowed elastic value, and token total supply values. It returns a fraction representing the total asset base value.
-
-Overall, this code provides important functionality for the zoo project related to interest accrual, fee calculation, and value calculation for assets and tokens. These functions can be used in various parts of the project to perform calculations and provide data to users.
-## Questions:
- 1. What is the purpose of the `accrue` function and what does it return?
-- The `accrue` function calculates the accrued interest on a given amount based on the interest rate and elapsed time for a given pair. It returns a `BigNumber` value representing the accrued interest.
-
-2. What is the purpose of the `interestAccrue` function and what does it return?
-- The `interestAccrue` function calculates the current interest rate for a given pair based on its utilization and elapsed time. It returns a `BigNumber` value representing the current interest rate.
-
-3. What is the purpose of the `easyAmount` function and what does it return?
-- The `easyAmount` function takes a `BigNumber` amount and a token object and returns an object containing the original amount, a string representation of the amount with the token's decimals, the USD value of the amount, and a string representation of the USD value with the currency's decimals.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/functions/list.md b/.autodoc/docs/markdown/core/src/functions/list.md
deleted file mode 100644
index 15d5ec6c0..000000000
--- a/.autodoc/docs/markdown/core/src/functions/list.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/functions/list.ts)
-
-The code in this file contains functions that are used to resolve a list URL to a validated token list. The `getTokenList` function takes in a list URL and a function that resolves an ENS name to a content hash. It then parses the ENS address, translates the content hash to a URI, and converts the URI to an HTTP URL. It then loops through the URLs and fetches the list from the first URL that returns a valid response. If the fetched list fails validation, an error is thrown. If none of the URLs return a valid response, an error is thrown.
-
-The `sortByListPriority` function is used to sort a list of URLs based on their priority. The priority is determined by the ordering of the default list of lists. The function returns 1 if the first URL has a higher priority, -1 if the second URL has a higher priority, and 0 if they have the same priority.
-
-The `listVersionLabel` function takes in a `Version` object and returns a string that represents the version label. The version label is in the format `vThis is the production environment.
- ) : ( -This is not the production environment.
- )} -Loading...
;
- }
-
- if (error) {
- return Error: {error.message}
;
- }
-
- return (
-
- {data.map((nft) => (
-
- );
-};
-
-const App = () => {
- return (
- {nft.get("name")}
- ))}
-
- {pairs.map(([tokenA, tokenB]) => (
-
- )
-}
-```
-
-In this example, the `useAllCurrencyCombinations` function is used to generate all possible currency pairs for the `currencyA` and `currencyB` props. The resulting pairs are then mapped to a list of currency symbols, which are displayed in the component.
-## Questions:
- 1. What is the purpose of the `useAllCurrencyCombinations` function?
-- The `useAllCurrencyCombinations` function returns an array of all possible token pairs that can be traded against each other, as well as against a set of common and additional base tokens.
-
-2. What is the significance of the `chainId` variable?
-- The `chainId` variable is used to determine which set of common and additional base tokens to use in the `bases` array.
-
-3. What is the purpose of the `CUSTOM_BASES` object in the `filter` method?
-- The `CUSTOM_BASES` object is used to filter out any token pairs that do not have a custom base token specified for either token in the pair. If a custom base token is specified for a token, then the pair must include that base token in order to be included in the final array.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useApproveCallback.md b/.autodoc/docs/markdown/core/src/hooks/useApproveCallback.md
deleted file mode 100644
index 47b95a0cb..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useApproveCallback.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useApproveCallback.ts)
-
-The code defines several React hooks that are used to manage token approvals for the Zoo project. The `useApproveCallback` hook takes in two optional parameters: `amountToApprove` and `spender`. It returns an array with two elements: an `ApprovalState` enum indicating the current approval status, and a function that approves the token if necessary.
-
-The `useApproveCallbackFromTrade` hook is a wrapper around `useApproveCallback` that takes in a `V2Trade` object, an allowed slippage percentage, and a boolean flag indicating whether to use the Archer router. It calculates the `amountToApprove` based on the input currency of the trade and passes it to `useApproveCallback`.
-
-The `useVotingApproveCallback` hook is similar to `useApproveCallback`, but it is specifically designed for the Zoo voting system. It takes in `amountToApprove` and `spender` parameters and returns an array with the current approval status and an approval function.
-
-All of these hooks use other custom hooks defined in the same file, such as `useActiveWeb3React`, `useTokenAllowance`, and `useTokenContract`. They also import various constants and functions from external libraries and files, such as `@zoolabs/zdk`, `@ethersproject/constants`, and `addresses`.
-
-Overall, these hooks provide a convenient way for developers to manage token approvals in the Zoo project. They can be used in various components and modules to ensure that users have approved the necessary tokens before executing trades or voting.
-## Questions:
- 1. What is the purpose of the `useApproveCallback` function?
-- The `useApproveCallback` function returns a variable indicating the state of the approval and a function which approves if necessary or early returns. It is used to handle token approvals for a given spender.
-
-2. What is the purpose of the `useApproveCallbackFromTrade` function?
-- The `useApproveCallbackFromTrade` function wraps the `useApproveCallback` function in the context of a swap. It takes in a trade, allowed slippage, and a boolean flag to indicate whether to use the Archer router or not, and returns the same variables as `useApproveCallback`.
-
-3. What is the purpose of the `useVotingApproveCallback` function?
-- The `useVotingApproveCallback` function is similar to `useApproveCallback`, but it is specifically designed for voting. It returns a variable indicating the state of the approval and a function which approves if necessary or early returns. It is used to handle token approvals for voting.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useArcherMinerTips.md b/.autodoc/docs/markdown/core/src/hooks/useArcherMinerTips.md
deleted file mode 100644
index 057000625..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useArcherMinerTips.md
+++ /dev/null
@@ -1,50 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useArcherMinerTips.ts)
-
-The code is a custom React hook called `useArcherMinerTips` that fetches gas prices from the Archer API and returns them as an object with a `status` and `data` property. The `status` property indicates the current state of the hook, which can be one of three values: `idle`, `fetching`, or `fetched`. The `data` property is an object that contains gas prices for different transaction speeds.
-
-The hook uses the `useEffect` and `useState` hooks from React to manage state and side effects. When the component mounts, the hook fetches gas prices from the Archer API using the `fetch` function. The API endpoint is determined by the `ChainId` from the `@zoolabs/zdk` library, which is obtained using the `useActiveWeb3React` hook. If the `ChainId` is `MAINNET`, the hook fetches gas prices. If the `ChainId` is not `MAINNET`, the hook does nothing.
-
-Once the gas prices are fetched, the hook updates the `data` state with the response data and sets the `status` state to `fetched`. If there is an error fetching the gas prices, the `status` state is set to `idle`.
-
-The `data` object contains gas prices for different transaction speeds, which are represented as strings. The keys of the object are `immediate`, `rapid`, `fast`, `standard`, `slow`, `slower`, and `slowest`. These keys correspond to different gas prices based on the speed of the transaction. For example, a transaction with a gas price of `immediate` will be processed faster than a transaction with a gas price of `slowest`.
-
-This hook can be used in the larger project to fetch gas prices for transactions and determine the appropriate gas price to use based on the desired transaction speed. For example, if a user wants to send a transaction quickly, they can use the `rapid` gas price. If they are willing to wait longer for the transaction to be processed, they can use the `slow` or `slower` gas price. The `useArcherMinerTips` hook abstracts away the complexity of fetching gas prices from the Archer API and provides a simple interface for accessing gas prices in the project.
-
-Example usage:
-
-```
-import useArcherMinerTips from './useArcherMinerTips'
-
-function MyComponent() {
- const { status, data } = useArcherMinerTips()
-
- if (status === 'fetching') {
- return
- {tokenA.symbol}/{tokenB.symbol}
-
- ))}
- Loading...
- }
-
- if (status === 'fetched') {
- return (
-
-
- )
- }
-
- return null
-}
-```
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code defines a custom React hook called `useArcherMinerTips` that fetches gas prices from an API and returns them as an object. It solves the problem of needing to fetch gas prices in a standardized way across the application.
-
-2. What external dependencies does this code rely on?
-- This code relies on the `react` library, as well as the `@zoolabs/zdk` library for the `ChainId` type. It also imports a constant `ARCHER_GAS_URI` from a configuration file.
-
-3. What is the expected behavior of this code if the `chainId` is not `ChainId.MAINNET`?
-- If the `chainId` is not `ChainId.MAINNET`, the `fetchData` function will not be called and the `status` and `data` values will remain at their initial states of `'idle'` and the default gas price values, respectively.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useArgentWalletContract.md b/.autodoc/docs/markdown/core/src/hooks/useArgentWalletContract.md
deleted file mode 100644
index ebd66d0c2..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useArgentWalletContract.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useArgentWalletContract.ts)
-
-The code above is a function that returns an instance of a smart contract called `ArgentWalletContract`. The contract is defined by the `ARGENT_WALLET_ABI` constant, which is imported from a JSON file located in the `constants/abis` directory.
-
-The function is designed to be used in a larger project that involves interacting with the Ethereum blockchain. It is assumed that the project is using the `@ethersproject/contracts` library, as this is imported at the top of the file.
-
-The function itself is called `useArgentWalletContract` and is designed to be used as a React hook. It uses several other custom hooks, including `useActiveWeb3React`, `useContract`, and `useIsArgentWallet`.
-
-The `useActiveWeb3React` hook is used to retrieve the current Ethereum account that the user is connected to. This is necessary because the `ArgentWalletContract` is specific to each user's Ethereum address.
-
-The `useIsArgentWallet` hook is used to determine whether the current wallet being used is an Argent wallet. If it is, then the `ArgentWalletContract` instance is returned. If not, then `null` is returned.
-
-The `useContract` hook is used to actually create the instance of the `ArgentWalletContract`. It takes three arguments: the Ethereum address of the user (if they are using an Argent wallet), the ABI of the contract, and a boolean indicating whether to use the read-only version of the contract.
-
-Overall, this function is a useful tool for interacting with the `ArgentWalletContract` in a larger Ethereum-based project. It is designed to be used as a React hook and relies on several other custom hooks to function properly.
-
-Example usage:
-
-```
-import { useArgentWalletContract } from './useArgentWalletContract'
-
-function MyComponent() {
- const argentWalletContract = useArgentWalletContract()
-
- // Use the contract instance to interact with the Ethereum blockchain
- // ...
-}
-```
-## Questions:
- 1. What is `ARGENT_WALLET_ABI` and where is it defined?
-- `ARGENT_WALLET_ABI` is likely an ABI (Application Binary Interface) for a smart contract related to the Argent wallet. Its definition is likely located in the `../constants/abis/argent-wallet.json` file.
-
-2. What is the purpose of the `useActiveWeb3React` and `useContract` hooks?
-- The `useActiveWeb3React` hook likely provides access to the active Web3 provider and account, while the `useContract` hook likely creates an instance of a smart contract using its ABI and address.
-
-3. What is the significance of the `useIsArgentWallet` hook and how is it used?
-- The `useIsArgentWallet` hook likely checks if the current account is an Argent wallet. It is used to conditionally pass the account to the `useContract` hook, depending on whether or not it is an Argent wallet.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useBentoBox.md b/.autodoc/docs/markdown/core/src/hooks/useBentoBox.md
deleted file mode 100644
index 04b315140..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useBentoBox.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useBentoBox.ts)
-
-The `useBentoBox` function is a React hook that provides functionality for interacting with the BentoBox smart contract. The BentoBox is a smart contract that allows for efficient and gas-saving token transfers and storage.
-
-The function imports several dependencies, including `BigNumber` from the `@ethersproject/bignumber` library, `getAddress` from the `@ethersproject/address` library, `AddressZero` from the `@ethersproject/constants` library, and `WNATIVE_ADDRESS` from the `@zoolabs/zdk` library. It also imports two custom hooks: `useActiveWeb3React` and `useBentoBoxContract`, as well as `useCallback` from the `react` library and `useTransactionAdder` from a custom `transactions` state.
-
-The `useBentoBox` function returns an object with two properties: `deposit` and `withdraw`. Both of these properties are functions that take two arguments: `tokenAddress` and `value`. `tokenAddress` is a string representing the address of the token to be deposited or withdrawn, and `value` is a `BigNumber` representing the amount of the token to be deposited or withdrawn.
-
-The `deposit` function first checks if `value` and `chainId` are truthy. If they are, it converts `tokenAddress` to a checksummed address using `getAddress` and checks if it is equal to the `WNATIVE_ADDRESS` for the current `chainId`. If it is, it calls the `deposit` function on the `bentoBoxContract` with `AddressZero` as the `to` address, `account` as the `from` and `recipient` addresses, `value` as the `amount`, and `{ value }` as the `overrides`. If it is not, it calls the `deposit` function on the `bentoBoxContract` with `tokenAddressChecksum` as the `to` address, `account` as the `from` and `recipient` addresses, `value` as the `amount`, and no `overrides`. If there is an error, it logs the error to the console and returns the error.
-
-The `withdraw` function is similar to the `deposit` function, but it first checks if `tokenAddressChecksum` is equal to the `WNATIVE_ADDRESS` for the current `chainId`. If it is, it sets the `to` address to `0x0000000000000000000000000000000000000000`. If it is not, it sets the `to` address to `tokenAddressChecksum`. It then calls the `withdraw` function on the `bentoBoxContract` with the appropriate arguments. If there is an error, it logs the error to the console and returns the error.
-
-This hook can be used in a React component to interact with the BentoBox smart contract. For example, a component that allows a user to deposit tokens into the BentoBox could use the `deposit` function to initiate the deposit when a button is clicked. Similarly, a component that allows a user to withdraw tokens from the BentoBox could use the `withdraw` function to initiate the withdrawal when a button is clicked.
-## Questions:
- 1. What is the purpose of the `useBentoBox` function?
-- The `useBentoBox` function is a custom React hook that provides methods for depositing and withdrawing tokens from the BentoBox smart contract.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including `@ethersproject/bignumber`, `@ethersproject/address`, `@ethersproject/constants`, and `@zoolabs/zdk`.
-
-3. What is the significance of `WNATIVE_ADDRESS`?
-- `WNATIVE_ADDRESS` is a constant defined in the `@zoolabs/zdk` library that represents the address of the native token for the current blockchain network. It is used in this code to determine whether a token being deposited or withdrawn is the native token, so that the appropriate method can be called on the BentoBox contract.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useBentoBoxAllowance.md b/.autodoc/docs/markdown/core/src/hooks/useBentoBoxAllowance.md
deleted file mode 100644
index 4413334ba..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useBentoBoxAllowance.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useBentoBoxAllowance.ts)
-
-The code defines a custom React hook called `useAllowance` that returns the allowance of a given ERC20 token for the current user's account. The hook takes a single argument, `tokenAddress`, which is the address of the ERC20 token contract.
-
-The hook uses several other hooks and libraries to accomplish its task. The `useActiveWeb3React` hook is used to get the current user's Ethereum account. The `useBentoBoxContract` and `useContract` hooks are used to get instances of the BentoBox and ERC20 token contracts, respectively. The `getAddress` function from the `@ethersproject/address` library is used to convert the `tokenAddress` to a checksummed address.
-
-Once the necessary contracts and addresses are obtained, the hook fetches the current allowance for the user's account using the `allowance` function of the ERC20 token contract. The allowance is then formatted as a `Fraction` using the `Fraction.from` method, which takes a `BigNumber` and a divisor. In this case, the divisor is `10^18`, since ERC20 tokens have 18 decimal places. The formatted allowance is then stored in state using the `setAllowance` function.
-
-The hook also sets up an interval to periodically refresh the allowance every 10 seconds. This is done using the `setInterval` function in the `useEffect` hook. The interval is cleared when the component unmounts using the `clearInterval` function.
-
-Overall, this hook is useful for any part of the project that needs to check the current allowance of an ERC20 token for the user's account. For example, it could be used in a component that displays the user's current token balances and allowances for various tokens. Here is an example usage of the hook:
-
-```
-import useAllowance from '../hooks/useAllowance'
-
-function MyComponent() {
- const allowance = useAllowance('0x1234567890123456789012345678901234567890')
- return Immediate: {data.immediate}
-Rapid: {data.rapid}
-Fast: {data.fast}
-Standard: {data.standard}
-Slow: {data.slow}
-Slower: {data.slower}
-Slowest: {data.slowest}
-Current allowance: {allowance}
-}
-```
-## Questions:
- 1. What does this code do?
-- This code exports a custom hook called `useAllowance` which takes a token address as input and returns the allowance of that token for the current user's account.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies including `react`, `@ethersproject/bignumber`, `@ethersproject/address`, and `../hooks/useContract` and `../hooks/useActiveWeb3React` which are custom hooks defined elsewhere in the project.
-
-3. What is the purpose of the `fetchAllowance` function?
-- The `fetchAllowance` function is an asynchronous function that fetches the allowance of a token for the current user's account and updates the `allowance` state variable with the formatted value of the allowance. It is called on mount and every 10 seconds thereafter.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useBentoMasterApproveCallback.md b/.autodoc/docs/markdown/core/src/hooks/useBentoMasterApproveCallback.md
deleted file mode 100644
index 9b1c0355a..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useBentoMasterApproveCallback.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useBentoMasterApproveCallback.ts)
-
-The code in this file provides a hook called `useBentoMasterApproveCallback` that can be used to approve a master contract on the BentoBox protocol. The BentoBox protocol is a lending protocol that allows users to deposit assets and earn interest. The protocol uses a system of master contracts to manage the assets and interest rates.
-
-The `useBentoMasterApproveCallback` hook takes two arguments: the address of the master contract to approve, and an options object that can include the name of the contract and the name of the function to call. The hook returns an object that includes the current approval state, a function to approve the contract, a function to get a permit for the contract, and the current permit.
-
-The `useBentoMasterApproveCallback` hook uses several other hooks to get the necessary data. The `useActiveWeb3React` hook is used to get the current account and chain ID. The `useBentoBoxContract` hook is used to get the BentoBox contract instance. The `useAllTransactions` and `useTransactionAdder` hooks are used to manage the approval transaction.
-
-The `useBentoMasterApproveCallback` hook also uses several utility functions to sign the approval transaction and split the signature. These functions are imported from other files in the project.
-
-The `useBentoMasterApproveCallback` hook is used in other parts of the project to manage the approval of master contracts. For example, it may be used in a component that allows users to deposit assets into the BentoBox protocol. When the user clicks the deposit button, the component can call the `useBentoMasterApproveCallback` hook to check if the master contract is approved. If the contract is not approved, the component can call the `getPermit` function to get a permit for the contract. The permit can then be used to approve the contract by calling the `approve` function. Once the contract is approved, the component can call the `deposit` function to deposit the assets into the protocol.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a hook called `useBentoMasterApproveCallback` that returns an object with functions and data related to approving a master contract in the BentoBox protocol.
-
-2. What are the dependencies of this code?
-- This code depends on several other hooks and functions from different files, including `useBentoMasterContractAllowed`, `useActiveWeb3React`, `useBentoBoxContract`, `useAllTransactions`, `useTransactionAdder`, and `signMasterContractApproval`.
-
-3. What are the possible values of `BentoApprovalState` and `BentoApproveOutcome`?
-- `BentoApprovalState` is an enum with possible values of `UNKNOWN`, `NOT_APPROVED`, `PENDING`, `FAILED`, and `APPROVED`. `BentoApproveOutcome` is another enum with possible values of `SUCCESS`, `REJECTED`, `FAILED`, and `NOT_READY`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useColor.md b/.autodoc/docs/markdown/core/src/hooks/useColor.md
deleted file mode 100644
index 1b588daab..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useColor.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useColor.ts)
-
-This code defines two React hooks, `useColor` and `useListColor`, that are used to determine the dominant color of an image. The hooks use the `Vibrant` library to extract the color palette of an image and return the hex code of the most vibrant color.
-
-The `getColorFromToken` function is used to extract the color of a token logo. It takes a `Token` object as input and returns a promise that resolves to a hex code string or null. If the token is on the Rinkeby network and has a specific address, the function returns a pre-defined hex code. Otherwise, it constructs a URL to the token's logo image and uses `Vibrant` to extract the color palette. If a vibrant color is found, the function applies the `shade` function from the `polished` library to the color until it has a minimum contrast score of 3 against white. The function then returns the resulting hex code.
-
-The `getColorFromUriPath` function is used to extract the color of an image from a URI. It takes a URI string as input and returns a promise that resolves to a hex code string or null. The function first converts the URI to an HTTP URL using the `uriToHttp` function from a separate file. It then uses `Vibrant` to extract the color palette of the image and returns the hex code of the most vibrant color.
-
-The `useColor` hook takes a `Token` object as input and returns the dominant color of the token's logo image. It initializes the color state to `#0094ec` and uses `useLayoutEffect` to asynchronously fetch the color from the token's logo image. If the token is not null and a color is found, the hook updates the color state with the new value. If the token is null or the component is unmounted before the color is fetched, the hook sets the color state back to `#0094ec`.
-
-The `useListColor` hook takes a URI string as input and returns the dominant color of the image at the URI. It initializes the color state to `#0094ec` and uses `useLayoutEffect` to asynchronously fetch the color from the image. If the URI is not null and a color is found, the hook updates the color state with the new value. If the URI is null or the component is unmounted before the color is fetched, the hook sets the color state back to `#0094ec`.
-
-These hooks can be used in the larger project to dynamically set the color of components based on the dominant color of an image. For example, the `useColor` hook could be used to set the background color of a token card to the dominant color of the token's logo image. The `useListColor` hook could be used to set the background color of a list item to the dominant color of the item's image.
-## Questions:
- 1. What is the purpose of the `getColorFromToken` function?
-- The `getColorFromToken` function takes a `Token` object and returns a promise that resolves to a string representing the color of the token's logo image.
-
-2. What is the purpose of the `useColor` function?
-- The `useColor` function is a React hook that takes a `Token` object and returns a color string based on the logo image of the token. It uses the `getColorFromToken` function internally.
-
-3. What is the purpose of the `useListColor` function?
-- The `useListColor` function is another React hook that takes a URI string representing an image and returns a color string based on the image. It uses the `getColorFromUriPath` function internally.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useCopyClipboard.md b/.autodoc/docs/markdown/core/src/hooks/useCopyClipboard.md
deleted file mode 100644
index 7fad5089a..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useCopyClipboard.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useCopyClipboard.ts)
-
-The code above is a custom React hook that provides functionality for copying text to the clipboard. It uses the `copy-to-clipboard` library to perform the actual copying of the text.
-
-The hook returns an array with two values: a boolean indicating whether the text has been copied to the clipboard, and a function that can be called to initiate the copying process. The function takes a single argument, `toCopy`, which is the text to be copied.
-
-The `useCallback` hook is used to memoize the `staticCopy` function, which is responsible for performing the copying. This is done to prevent unnecessary re-renders of the component that uses this hook.
-
-The `useEffect` hook is used to handle the state of the `isCopied` variable. When the text is successfully copied to the clipboard, `isCopied` is set to `true`. The `useEffect` hook then sets a timeout to reset `isCopied` to `false` after a specified amount of time (`timeout`). This timeout is cleared if the component unmounts before the timeout is reached.
-
-This hook can be used in any React component that needs to provide a copy-to-clipboard functionality. For example, it could be used in a button component that copies a URL to the clipboard when clicked.
-
-Here is an example of how this hook could be used in a component:
-
-```
-import React from 'react'
-import useCopyClipboard from './useCopyClipboard'
-
-function CopyButton({ text }) {
- const [isCopied, copyToClipboard] = useCopyClipboard()
-
- const handleClick = () => {
- copyToClipboard(text)
- }
-
- return (
-
- )
-}
-
-export default CopyButton
-```
-
-In this example, the `CopyButton` component takes a `text` prop, which is the text to be copied to the clipboard. When the button is clicked, the `copyToClipboard` function is called with the `text` prop as an argument. The `isCopied` value is used to display a message to the user indicating whether the text has been successfully copied.
-## Questions:
- 1. What does this code do?
- This code exports a custom React hook called `useCopyClipboard` that takes an optional timeout parameter and returns a tuple containing a boolean value indicating whether the copy operation was successful and a function to copy text to the clipboard.
-
-2. What library dependencies does this code have?
- This code imports two libraries: `copy-to-clipboard` and `react`.
-
-3. What is the purpose of the `useEffect` hook in this code?
- The `useEffect` hook is used to set a timeout to reset the `isCopied` state to `false` after a successful copy operation. It also clears the timeout if the `isCopied` state changes before the timeout is reached.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useCurrentBlockTimestamp.md b/.autodoc/docs/markdown/core/src/hooks/useCurrentBlockTimestamp.md
deleted file mode 100644
index d41df1763..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useCurrentBlockTimestamp.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useCurrentBlockTimestamp.ts)
-
-The code above is a TypeScript function that is used to retrieve the current timestamp from the blockchain. It is part of a larger project called "zoo" and is located in a file within that project.
-
-The function imports two modules: `BigNumber` from the `@ethersproject/bignumber` library and `useMulticall2Contract` from a custom `useContract` module. It also imports `useSingleCallResult` from a custom `multicall` state module.
-
-The function itself is named `useCurrentBlockTimestamp` and returns a `BigNumber` object or `undefined`. It first calls the `useMulticall2Contract` function to retrieve the contract instance for the `Multicall2` contract. It then calls the `useSingleCallResult` function, passing in the `multicall` instance and the string `'getCurrentBlockTimestamp'` as arguments. This function retrieves the result of a single call to the `Multicall2` contract, which should return the current timestamp of the blockchain.
-
-If the result is not `undefined`, the function returns the first element of the result array as a `BigNumber` object. If the result is `undefined`, the function returns `undefined`.
-
-This function can be used in the larger project to retrieve the current timestamp of the blockchain. This information can be useful for various purposes, such as time-based calculations or verifying the timing of certain events.
-
-Example usage:
-
-```typescript
-import useCurrentBlockTimestamp from './useCurrentBlockTimestamp'
-
-const currentTimestamp = useCurrentBlockTimestamp()
-
-if (currentTimestamp) {
- console.log(`The current timestamp is ${currentTimestamp.toString()}`)
-} else {
- console.log('Unable to retrieve current timestamp')
-}
-```
-## Questions:
- 1. What is the purpose of the `BigNumber` import from `@ethersproject/bignumber`?
-- The `BigNumber` import is likely used to handle large numbers in a precise and efficient manner, which is important in blockchain development.
-
-2. What is the `useSingleCallResult` function and where is it defined?
-- The `useSingleCallResult` function is likely defined in the `../state/multicall/hooks` file, and it is used to retrieve the result of a single function call from a smart contract.
-
-3. What smart contract function is being called in the `useCurrentBlockTimestamp` function?
-- The `getCurrentBlockTimestamp` function is being called in the `useCurrentBlockTimestamp` function to retrieve the current timestamp from the blockchain.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useDebounce.md b/.autodoc/docs/markdown/core/src/hooks/useDebounce.md
deleted file mode 100644
index 17ebfae02..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useDebounce.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useDebounce.ts)
-
-The code is a custom React hook called `useDebounce` that takes in two parameters: a value of generic type `T` and a delay in milliseconds. The purpose of this hook is to debounce the value passed in, meaning that it delays the execution of a function until a certain amount of time has passed since the last time it was called. This is useful for scenarios where you want to avoid executing a function too frequently, such as when handling user input.
-
-The hook uses the `useState` and `useEffect` hooks from React to manage the state of the debounced value. When the hook is first called, it sets the initial value of `debouncedValue` to the value passed in. It then sets up an effect that runs whenever the `value` or `delay` parameters change. This effect sets a timeout using `setTimeout` that will update the `debouncedValue` to the current `value` after the specified `delay` has passed. If the `value` or `delay` parameters change before the timeout has completed, the effect will clean up the previous timeout using `clearTimeout` and start a new one.
-
-The hook returns the `debouncedValue`, which will only be updated after the specified `delay` has passed since the last time the `value` parameter was updated. This can be used in a larger project to improve performance by reducing the number of times a function is called in response to user input. For example, if you have a search bar that executes a search function every time the user types a letter, you could use this hook to delay the execution of the search function until the user has stopped typing for a certain amount of time. This would reduce the number of unnecessary search requests and improve the overall performance of the application.
-
-Example usage:
-
-```
-import useDebounce from './useDebounce'
-
-function SearchBar() {
- const [searchTerm, setSearchTerm] = useState('')
- const debouncedSearchTerm = useDebounce(searchTerm, 500)
-
- useEffect(() => {
- // Execute search function after debouncedSearchTerm has been updated
- searchFunction(debouncedSearchTerm)
- }, [debouncedSearchTerm])
-
- return (
- setSearchTerm(e.target.value)}
- />
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code and how is it used in the `zoo` project?
- This code exports a custom hook called `useDebounce` that takes in a value and a delay time and returns a debounced value. It is likely used in the `zoo` project to debounce user input or API requests.
-
-2. What is the significance of the `useEffect` and `useState` hooks being imported from `react`?
- The `useEffect` and `useState` hooks are part of the React library and are used to manage state and side effects in functional components. They are necessary for the implementation of the `useDebounce` hook.
-
-3. How does the `useDebounce` hook prevent the debounced value from updating if the value changes within the delay period?
- The `useEffect` hook sets up a timeout that updates the debounced value after the specified delay. If the value changes before the timeout is triggered, the `return` function of the `useEffect` hook clears the timeout and sets up a new one with the updated value and delay. This ensures that the debounced value only updates after the delay period has passed without any new changes to the value.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useDebouncedChangeHandler.md b/.autodoc/docs/markdown/core/src/hooks/useDebouncedChangeHandler.md
deleted file mode 100644
index 911089c0f..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useDebouncedChangeHandler.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useDebouncedChangeHandler.ts)
-
-The code is a custom React hook called `useDebouncedChangeHandler` that provides an easy way to debounce the handling of a rapidly changing value, such as a slider input. The hook takes in three parameters: `value`, `onChange`, and `debouncedMs`.
-
-The `value` parameter is the value that is rapidly changing and needs to be debounced. The `onChange` parameter is the change handler that should receive the debounced updates to the value. The `debouncedMs` parameter is an optional parameter that specifies how long the hook should wait for changes to be applied before debouncing.
-
-The hook returns a tuple containing two values: `inner` and `onChangeInner`. The `inner` value is the current debounced value of the `value` parameter. The `onChangeInner` value is a function that can be used to update the `inner` value.
-
-The hook uses the `useState`, `useCallback`, `useEffect`, and `useRef` hooks from React. The `useState` hook is used to manage the current debounced value of the `value` parameter. The `useCallback` hook is used to memoize the `onChangeInner` function to prevent unnecessary re-renders. The `useEffect` hook is used to update the `inner` value when the `value` parameter changes. The `useRef` hook is used to store a reference to the `setTimeout` function that is used to debounce the `onChange` function.
-
-When the `onChangeInner` function is called with a new value, the hook updates the `inner` value with the new value and clears any existing `setTimeout` function using the `clearTimeout` function. It then sets a new `setTimeout` function with the specified `debouncedMs` delay that calls the `onChange` function with the new value and sets the `timer.current` value to `undefined`.
-
-When the `value` parameter changes, the hook updates the `inner` value with the new value and clears any existing `setTimeout` function using the `clearTimeout` function.
-
-Overall, this hook provides a simple way to debounce the handling of rapidly changing values in a React application. Here is an example of how it can be used:
-
-```
-import React, { useState } from 'react'
-import useDebouncedChangeHandler from './useDebouncedChangeHandler'
-
-function Slider() {
- const [value, setValue] = useState(0)
- const [debouncedValue, setDebouncedValue] = useDebouncedChangeHandler(value, setValue, 500)
-
- const handleChange = (event) => {
- setValue(event.target.value)
- }
-
- return (
-
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code and how is it used in the `zoo` project?
-- This code provides a custom hook called `useDebouncedChangeHandler` that can be used to debounce the handling of a rapidly changing value. It takes in the changing value, a change handler function, and a debounce time in milliseconds as parameters, and returns an array containing the current value and a function to update the value with debounced changes.
-
-2. What type of values can be passed as the `value` parameter?
-- The `value` parameter is a generic type `T`, which means it can accept any type of value.
-
-3. How does the `useDebouncedChangeHandler` hook work internally to debounce the value changes?
-- The hook uses the `useState`, `useCallback`, and `useEffect` hooks from React to manage the state of the changing value and the debounced updates. It sets up a timer using `setTimeout` to delay the execution of the change handler function until the debounce time has elapsed, and clears the timer if the value changes again before the timer has finished.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useENS.md b/.autodoc/docs/markdown/core/src/hooks/useENS.md
deleted file mode 100644
index 026453689..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useENS.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useENS.ts)
-
-The code in this file is a function that takes in a string parameter, which can be either an ENS name or an Ethereum address. The function then performs a lookup to resolve the name or address to an actual Ethereum address and name.
-
-The function first imports a validation function from another file in the project. This function checks if the input parameter is a valid Ethereum address. If it is, the function proceeds to perform a reverse lookup using the useENSName function, which takes in the validated address as a parameter. If the input parameter is not a valid Ethereum address, the function performs a regular lookup using the useENSAddress function, which takes in the input parameter as a parameter.
-
-The function then returns an object with three properties: loading, address, and name. The loading property is a boolean that indicates whether the lookup is still in progress. The address property is a string that represents the resolved Ethereum address. The name property is a string that represents the resolved ENS name.
-
-This function can be used in the larger project to resolve ENS names to Ethereum addresses and vice versa. For example, if a user enters an ENS name in a form, this function can be used to resolve the name to an Ethereum address that can be used in a smart contract. Conversely, if a user enters an Ethereum address, this function can be used to resolve the address to an ENS name that can be displayed in the UI.
-
-Here is an example of how this function can be used:
-
-```
-import useENS from './useENS'
-
-const resolved = useENS('myensname.eth')
-
-console.log(resolved.address) // '0x1234567890abcdef1234567890abcdef12345678'
-console.log(resolved.name) // 'myensname.eth'
-```
-## Questions:
- 1. What is the purpose of the `isAddress` function imported from `../functions/validate`?
-- The `isAddress` function is used to validate whether the `nameOrAddress` parameter is a valid Ethereum address.
-
-2. What is the difference between `useENSName` and `useENSAddress`?
-- `useENSName` is used to perform a reverse lookup of an Ethereum address to its corresponding ENS name, while `useENSAddress` is used to perform a forward lookup of an ENS name to its corresponding Ethereum address.
-
-3. What is the expected return value of the `useENS` function?
-- The `useENS` function returns an object with three properties: `loading` (a boolean indicating whether the lookup is still in progress), `address` (the resolved Ethereum address), and `name` (the resolved ENS name).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useENSAddress.md b/.autodoc/docs/markdown/core/src/hooks/useENSAddress.md
deleted file mode 100644
index c9ee353f0..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useENSAddress.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useENSAddress.ts)
-
-The `useENSAddress` function is used to lookup the address of an Ethereum Name Service (ENS) name. ENS is a decentralized naming system built on the Ethereum blockchain that allows users to register human-readable names for their Ethereum addresses. This function takes an optional `ensName` parameter, which is the ENS name to lookup. If no `ensName` is provided, the function will return an object with a `loading` property set to `true` and an `address` property set to `null`.
-
-The function first uses the `useDebounce` hook to debounce the `ensName` parameter. This means that if the `ensName` parameter changes, the function will wait for 200 milliseconds before performing the ENS lookup. This is done to prevent the function from making too many requests to the ENS registry.
-
-Next, the function uses the `namehash` function from the `@ethersproject/hash` library to compute the hash of the debounced `ensName`. The hash is used as an argument to the ENS resolver contract to look up the address associated with the ENS name. The function uses the `useENSRegistrarContract` and `useENSResolverContract` hooks to get instances of the ENS registrar and resolver contracts respectively. It then uses the `useSingleCallResult` hook to call the `resolver` and `addr` functions on the contracts with the computed hash argument.
-
-Finally, the function returns an object with two properties: `loading` and `address`. The `loading` property is set to `true` if the `ensName` parameter has changed or if the resolver or addr calls are still loading. The `address` property is set to the address associated with the ENS name if the lookup was successful, or `null` otherwise.
-
-This function can be used in the larger project to provide a convenient way for users to look up the addresses associated with ENS names. For example, it could be used in a wallet application to allow users to send transactions to ENS names instead of Ethereum addresses. Here is an example usage of the `useENSAddress` function:
-
-```
-import useENSAddress from './useENSAddress'
-
-function MyComponent() {
- const { loading, address } = useENSAddress('my-ens-name.eth')
-
- if (loading) {
- return Debounced value: {debouncedValue}
-Loading...
- }
-
- return (
-
- Address: {address}
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-
- This code defines a custom hook called `useENSAddress` that performs a lookup for an ENS name to find its address.
-
-2. What external dependencies does this code rely on?
-
- This code relies on several external dependencies, including `useContract` from a local file, `isZero` from `../functions`, `namehash` from `@ethersproject/hash`, `useDebounce` from a local file, `useMemo` from `react`, and `useSingleCallResult` from `../state/multicall/hooks`.
-
-3. What is the expected behavior if `ensName` is not provided?
-
- If `ensName` is not provided, the `useENSAddress` hook will still run, but it will return an object with `loading` set to `true` and `address` set to `null`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useENSContentHash.md b/.autodoc/docs/markdown/core/src/hooks/useENSContentHash.md
deleted file mode 100644
index d8344f196..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useENSContentHash.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useENSContentHash.ts)
-
-The `useENSContentHash` function is used to look up the contenthash associated with an ENS name. ENS (Ethereum Name Service) is a decentralized naming system built on the Ethereum blockchain that allows users to register human-readable domain names and associate them with Ethereum addresses or other metadata. The contenthash is a piece of metadata that can be associated with an ENS name and is used to store IPFS content hashes or other data.
-
-The function takes an optional `ensName` parameter, which is the ENS name to look up. If no `ensName` is provided, the function returns an object with a `loading` property set to `true` and a `contenthash` property set to `null`. If an `ensName` is provided, the function first calculates the namehash of the ENS name using the `namehash` function from the `@ethersproject/hash` library. If the namehash calculation fails, the function returns an object with a `loading` property set to `true` and a `contenthash` property set to `null`.
-
-The function then uses the `useENSRegistrarContract` and `useSingleCallResult` hooks from the `useContract` and `multicall` modules, respectively, to retrieve the resolver contract address associated with the ENS name. The `useENSRegistrarContract` hook returns the ENS registrar contract, which is used to look up the resolver contract address associated with the ENS name. The `useSingleCallResult` hook is used to call the `resolver` function on the registrar contract with the namehash of the ENS name as an argument. The result of this call is the resolver contract address associated with the ENS name.
-
-If the resolver contract address is zero (i.e., the ENS name is not registered), the function returns an object with a `loading` property set to `true` and a `contenthash` property set to `null`. Otherwise, the function uses the `useENSResolverContract` hook to retrieve the resolver contract associated with the resolver contract address. The `useENSResolverContract` hook returns the resolver contract, which is used to look up the contenthash associated with the ENS name. The `useSingleCallResult` hook is used to call the `contenthash` function on the resolver contract with the namehash of the ENS name as an argument. The result of this call is the contenthash associated with the ENS name.
-
-The function returns an object with a `loading` property set to `true` if either the resolver address or contenthash is still loading, and a `contenthash` property set to the contenthash associated with the ENS name if it is available, or `null` otherwise.
-
-This function can be used in the larger project to retrieve the contenthash associated with an ENS name, which can be used to retrieve IPFS content or other metadata associated with the name. For example, the contenthash could be used to retrieve a website hosted on IPFS associated with the ENS name. An example usage of this function is as follows:
-
-```
-import useENSContentHash from './useENSContentHash'
-
-function MyComponent({ ensName }) {
- const { loading, contenthash } = useENSContentHash(ensName)
-
- if (loading) {
- return Loading...
- }
-
- if (!contenthash) {
- return No contenthash found for {ensName}
- }
-
- // Use contenthash to retrieve IPFS content or other metadata
- return Contenthash: {contenthash}
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a custom React hook called `useENSContentHash` that performs a lookup for an ENS name to find its contenthash.
-
-2. What other custom hooks are being used in this code?
-- This code imports and uses two other custom hooks called `useENSRegistrarContract` and `useENSResolverContract` from the `useContract` module, as well as `useSingleCallResult` from the `multicall/hooks` module.
-
-3. What is the expected input and output of the `useENSContentHash` hook?
-- The `useENSContentHash` hook expects an optional string parameter called `ensName` and returns an object with two properties: `loading` (a boolean indicating whether the hook is currently loading data) and `contenthash` (a string or null value representing the contenthash of the ENS name).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useENSName.md b/.autodoc/docs/markdown/core/src/hooks/useENSName.md
deleted file mode 100644
index c43c797a3..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useENSName.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useENSName.ts)
-
-The code is a React hook that performs a reverse lookup for an Ethereum address to find its corresponding ENS name. ENS (Ethereum Name Service) is a decentralized naming system built on the Ethereum blockchain that maps human-readable names to Ethereum addresses.
-
-The hook takes an optional `address` parameter and returns an object with two properties: `ENSName` and `loading`. `ENSName` is the ENS name corresponding to the given `address`, or `null` if the name cannot be found. `loading` is a boolean that indicates whether the hook is currently loading data.
-
-The hook uses several other hooks and functions to perform its task. `useDebounce` is used to debounce the `address` parameter to avoid making too many requests to the ENS registry. `useMemo` is used to memoize the `ensNodeArgument` variable, which is an array containing the ENS node hash for the reverse lookup. `useENSRegistrarContract` and `useENSResolverContract` are custom hooks that return instances of the ENS registrar and resolver contracts, respectively. Finally, `useSingleCallResult` is used to call the `resolver` and `name` functions on the resolver contract and retrieve their results.
-
-Overall, this hook provides a convenient way to look up ENS names for Ethereum addresses in a React application. It can be used in conjunction with other hooks and components to build more complex applications that interact with the Ethereum blockchain. For example, it could be used to display human-readable names for Ethereum addresses in a wallet application or to verify that a user has control over a particular ENS name.
-
-Example usage:
-
-```jsx
-import useENSName from './useENSName'
-
-function MyComponent({ address }) {
- const { ENSName, loading } = useENSName(address)
-
- if (loading) {
- return Loading...
- }
-
- if (ENSName) {
- return {ENSName}
- }
-
- return No ENS name found for {address}
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-
- This code is a custom hook called `useENSName` that performs a reverse lookup for an Ethereum address to find its corresponding ENS name.
-
-2. What external libraries or dependencies does this code rely on?
-
- This code relies on several external libraries and dependencies, including `@ethersproject/address`, `@ethersproject/hash`, `useDebounce`, `react`, and `useSingleCallResult`.
-
-3. What is the expected input and output of this code?
-
- The expected input of this code is a string representing an Ethereum address, which is an optional parameter. The expected output is an object with two properties: `ENSName`, which is a string representing the corresponding ENS name of the input address, and `loading`, which is a boolean indicating whether the ENS name is currently being loaded.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useERC20Permit.md b/.autodoc/docs/markdown/core/src/hooks/useERC20Permit.md
deleted file mode 100644
index f24c3ab4b..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useERC20Permit.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useERC20Permit.ts)
-
-The code is a TypeScript module that exports three functions: `useERC20Permit`, `useV2LiquidityTokenPermit`, and `useERC20PermitFromTrade`. The module imports several dependencies, including `@zoolabs/zdk`, `react`, and `@ethersproject/bytes`.
-
-The `useERC20Permit` function is a React hook that returns an object with three properties: `state`, `signatureData`, and `gatherPermitSignature`. The function takes three arguments: `currencyAmount`, `spender`, and `overridePermitInfo`. The `currencyAmount` argument is an object that represents the amount of a currency to be approved for spending. The `spender` argument is a string that represents the Ethereum address of the account that will be allowed to spend the approved currency. The `overridePermitInfo` argument is an optional object that provides additional information about the permit.
-
-The `useV2LiquidityTokenPermit` function is a wrapper around `useERC20Permit` that provides default values for the `overridePermitInfo` argument.
-
-The `useERC20PermitFromTrade` function is a helper function that takes a `V2Trade` object and an allowed slippage percentage as arguments. The function returns the result of calling `useERC20Permit` with the maximum amount of currency that can be spent in the trade and the `spender` argument set to the trade object.
-
-The module also defines several constants, interfaces, and types, including `PermitType`, `PERMIT_VALIDITY_BUFFER`, `PermitInfo`, `PERMITTABLE_TOKENS`, `UseERC20PermitState`, `BaseSignatureData`, `StandardSignatureData`, `AllowedSignatureData`, `SignatureData`, `EIP712_DOMAIN_TYPE`, `EIP712_DOMAIN_TYPE_NO_VERSION`, `EIP2612_TYPE`, and `PERMIT_ALLOWED_TYPE`.
-
-The `PERMITTABLE_TOKENS` object is a mapping of Ethereum chain IDs to objects that map token addresses to `PermitInfo` objects. The `PermitInfo` object contains information about the type of permit required for the token, such as the name of the token and the version of the permit.
-
-The `useERC20Permit` function uses the `useActiveWeb3React` hook to get the current Ethereum account and chain ID. It then uses the `useEIP2612Contract` hook to get the contract object for the token. The function also uses the `useIsArgentWallet` hook to determine if the user is using an Argent wallet.
-
-The function then checks if all the required arguments are present and returns an object with `state` set to `NOT_APPLICABLE` if any of the arguments are missing. If the required arguments are present, the function checks if the token supports the permit type required by the `PermitInfo` object. If the token does not support the permit type, the function returns an object with `state` set to `NOT_APPLICABLE`.
-
-If the token supports the permit type, the function gets the nonce for the token and checks if it is valid. If the nonce is not valid, the function returns an object with `state` set to `LOADING`. If the nonce is valid, the function checks if the signature data is valid. If the signature data is valid, the function returns an object with `state` set to `SIGNED`. If the signature data is not valid, the function returns an object with `state` set to `NOT_SIGNED`.
-
-If the signature data is not valid, the function returns an object with `gatherPermitSignature` set to a function that gathers the permit signature. The function uses the `eth_signTypedData_v4` method to sign the permit data and sets the `signatureData` object with the signed data.
-
-Overall, this module provides a set of functions that can be used to generate permit signatures for ERC20 tokens. These functions are designed to be used in a React application and rely on several hooks to interact with the Ethereum blockchain.
-## Questions:
- 1. What is the purpose of the `useERC20Permit` function and how is it used?
-
- The `useERC20Permit` function is used to generate a permit signature for a given ERC20 token and spender. It takes in a `currencyAmount` and `spender` as arguments, and returns an object with `signatureData`, `state`, and `gatherPermitSignature` properties. The `signatureData` property contains the permit signature data, the `state` property indicates whether the permit has been signed or not, and the `gatherPermitSignature` property is a function that can be called to initiate the permit signature process.
-
-2. What is the purpose of the `PERMITTABLE_TOKENS` object and how is it used?
-
- The `PERMITTABLE_TOKENS` object is a mapping of token addresses to permit information for various chains. It is used to determine whether a given token is permit-enabled and what type of permit is required. The `useERC20Permit` function uses this object to determine the permit information for a given token.
-
-3. What is the purpose of the `useV2LiquidityTokenPermit` function and how is it used?
-
- The `useV2LiquidityTokenPermit` function is a specialized version of the `useERC20Permit` function that is used specifically for removing liquidity from a Uniswap V2 pool. It takes in a `liquidityAmount` and `spender` as arguments, and returns an object with `signatureData`, `state`, and `gatherPermitSignature` properties. The `signatureData` property contains the permit signature data, the `state` property indicates whether the permit has been signed or not, and the `gatherPermitSignature` property is a function that can be called to initiate the permit signature process.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useEagerConnect.md b/.autodoc/docs/markdown/core/src/hooks/useEagerConnect.md
deleted file mode 100644
index ddd36063e..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useEagerConnect.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useEagerConnect.ts)
-
-The code above is a custom React hook called `useEagerConnect` that is used to connect a user's wallet to a decentralized application (dApp). This hook is part of a larger project called "zoo" and is located in the "zoo" file.
-
-The hook uses the `useEffect` and `useState` hooks from the React library, as well as the `useActiveWeb3React` hook from another custom hook file. It also imports the `injected` object from a `wallets` configuration file and the `isMobile` function from the `react-device-detect` library.
-
-The `useEagerConnect` hook first calls the `useActiveWeb3React` hook to get the current web3 provider and whether or not the user is currently connected to a wallet. It then sets the `tried` state to `false` using the `useState` hook.
-
-The first `useEffect` hook is used to check if the user is authorized to connect their wallet using the `injected` object. If the user is authorized, the `connector` is activated using the `activate` method with the `injected` object and `undefined` parameters. The third parameter is set to `true` to indicate that the connection should be persistent. If the user is not authorized, the hook checks if the user is on a mobile device and has the `ethereum` object available. If so, the `connector` is activated using the same parameters as before. If not, the `tried` state is set to `true`.
-
-The second `useEffect` hook is used to update the `tried` state to `true` if the connection was successful and the `active` state is `true`.
-
-Finally, the `useEagerConnect` hook returns the `tried` state, which is used to determine whether or not the connection was successful.
-
-This hook can be used in a larger project to automatically connect a user's wallet to a dApp when they visit the site. For example, the hook could be used in a decentralized exchange (DEX) to automatically connect the user's wallet and display their balances and trading history.
-
-Example usage:
-
-```
-import useEagerConnect from './useEagerConnect'
-
-function MyComponent() {
- const triedToConnect = useEagerConnect()
-
- if (triedToConnect) {
- // display content that requires a wallet connection
- } else {
- // display loading or connection prompt
- }
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-
- This code defines a custom React hook called `useEagerConnect` that attempts to connect to a web3 provider using the `injected` wallet configuration and returns a boolean value indicating whether the connection was attempted or not.
-
-2. What is the significance of the `useEffect` hooks in this code?
-
- The first `useEffect` hook runs only once on mount and attempts to connect to the web3 provider using the `injected` wallet configuration. The second `useEffect` hook runs whenever the `active` state variable changes and sets the `tried` state variable to `true` if the connection was successful.
-
-3. What is the purpose of the `isMobile` check in this code?
-
- The `isMobile` check is used to determine whether the user is accessing the application from a mobile device. If so, and if the `window.ethereum` object is available, the `injected` wallet configuration is used to attempt to connect to the web3 provider.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useFarmRewards.md b/.autodoc/docs/markdown/core/src/hooks/useFarmRewards.md
deleted file mode 100644
index 67b12e941..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useFarmRewards.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useFarmRewards.ts)
-
-The `useFarmRewards` function is a custom React hook that retrieves and processes data related to farms and their rewards on the SushiSwap decentralized exchange. The hook imports various functions and constants from other files in the project, including enums, graph services, and other custom hooks.
-
-The function first retrieves the current chain ID using the `useActiveWeb3React` hook. It then uses this ID to fetch the user's positions in the farms using the `usePositions` hook. The function also retrieves the block number from one week ago using the `useBlock` hook.
-
-Next, the function fetches data on all farms using the `useFarms` hook, and extracts the addresses of the pairs involved in these farms. It then uses the `useSushiPairs` and `useKashiPairs` hooks to fetch data on the SushiSwap and Kashi pairs, respectively, that correspond to these addresses. The function also retrieves data on the average block time, the total allocation points for the MasterChef V1 contract, and the SUSHI rewards per block for this contract.
-
-The function then retrieves the current prices of various tokens, including SUSHI, ETH, MATIC, STAKE, and ONE, using various `useXPrice` hooks. It calculates the number of blocks per day based on the average block time, and defines a `map` function that processes data for each farm.
-
-The `map` function first checks whether the farm is based on a SushiSwap or Kashi pair, and retrieves the corresponding pair data. It then calculates the rewards for the farm based on the allocation points, SUSHI rewards per block, and other factors. The function also calculates the total value locked (TVL) for the farm, as well as the fee APY per hour, day, month, and year. It then calculates the ROI per block, as well as the reward APY per hour, day, month, and year. Finally, the function returns an object containing all of this data, as well as the original farm data and the user's position in the farm.
-
-The `useFarmRewards` function returns an array of objects, where each object corresponds to a farm and contains all of the processed data described above. This data can be used to display information about the farms and their rewards to the user, as well as to make decisions about which farms to invest in. For example, the ROI and reward APY data can be used to compare the profitability of different farms, while the TVL data can be used to assess the liquidity of each farm.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a custom React hook called `useFarmRewards` that fetches data from various subgraphs and services to calculate rewards and other metrics for farms in the Zoo project.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including `@zoolabs/zdk`, `@ethersproject/address`, `react`, and various packages from the `../features`, `../services`, and `../functions` directories.
-
-3. What data is being fetched and processed by this code?
-- This code fetches data about farms, pairs, and rewards from various subgraphs and services, and processes this data to calculate metrics such as TVL, APR, and ROI for each farm. It also uses data from the `usePositions` hook to display information about the user's positions in each farm.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useFetchListCallback.md b/.autodoc/docs/markdown/core/src/hooks/useFetchListCallback.md
deleted file mode 100644
index 4a7d3d0ea..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useFetchListCallback.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useFetchListCallback.ts)
-
-The code defines a custom React hook called `useFetchListCallback` that returns a function. This function takes a `listUrl` string as its argument and returns a Promise that resolves to a `TokenList` object. The `TokenList` object is imported from the `@uniswap/token-lists` package.
-
-The `useFetchListCallback` hook uses several other hooks and functions to fetch and process the token list. The `useActiveWeb3React` hook is used to get the current Ethereum chain ID and provider library. The `useCallback` hook is used to memoize the `ensResolver` function, which resolves an ENS name to an IPFS content hash. The `useDispatch` hook is used to get the Redux store's dispatch function.
-
-The `useFetchListCallback` function dispatches a `fetchTokenList.pending` action to the Redux store, which sets the `loading` state to `true`. It then calls the `getTokenList` function, passing in the `listUrl` and `ensResolver` functions. The `getTokenList` function fetches the token list from the specified URL and resolves any ENS names using the `ensResolver` function. If the fetch is successful, the `getTokenList` function returns a `TokenList` object, which is then dispatched to the Redux store using the `fetchTokenList.fulfilled` action. If the fetch fails, the `getTokenList` function throws an error, which is caught and re-thrown by the `useFetchListCallback` function after dispatching a `fetchTokenList.rejected` action to the Redux store.
-
-The `useFetchListCallback` hook is intended to be used in other components to fetch and display token lists. For example, a token list selector component could use this hook to fetch a list of tokens and display them in a dropdown menu. The `sendDispatch` argument can be used to prevent the `fetchTokenList` actions from being dispatched in certain cases, such as when the hook is used for list search or when an unsupported list is requested.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a custom hook called `useFetchListCallback` that returns a function for fetching a token list from a given URL and resolving ENS names to content hashes.
-
-2. What dependencies does this code have?
-- This code imports several dependencies, including `AppDispatch` from a local `state` module, `ChainId` from the `@zoolabs/zdk` package, `TokenList` from the `@uniswap/token-lists` package, and various functions from local `state` and `functions` modules.
-
-3. What is the error message thrown if the chain ID is not `MAINNET` and no network library is available?
-- The error message thrown is "Could not construct mainnet ENS resolver".
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useFuse.md b/.autodoc/docs/markdown/core/src/hooks/useFuse.md
deleted file mode 100644
index 899b0c953..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useFuse.md
+++ /dev/null
@@ -1,50 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useFuse.ts)
-
-The code above is a custom React hook that provides fuzzy search functionality using the Fuse.js library. The hook is called `useFuse` and takes in two parameters: `data` and `options`. `data` is an array of objects that will be searched, and `options` is an object that contains options for the Fuse.js library.
-
-The `useFuse` hook returns an object with four properties: `result`, `search`, `term`, and `reset`. `result` is an array of objects that match the search term. `search` is a function that takes in a string and sets the search term. `term` is the current search term. `reset` is a function that resets the search term to an empty string.
-
-The `useFuse` hook uses the `useState` hook to keep track of the current search term. It then creates a new instance of the Fuse.js library using the `data` and `options` parameters. The `fuzzySearch` function is called with the `fuse`, `data`, and `term` parameters. The `fuzzySearch` function returns an array of objects that match the search term. If the search term is empty, the `data` parameter is returned.
-
-The `useFuse` hook is useful for implementing search functionality in a React application. It provides a simple interface for searching through an array of objects using fuzzy search. Here is an example of how to use the `useFuse` hook:
-
-```
-import useFuse from './useFuse'
-
-const data = [
- { name: 'John Doe', age: 30 },
- { name: 'Jane Doe', age: 25 },
- { name: 'Bob Smith', age: 40 },
-]
-
-const options = {
- keys: ['name'],
-}
-
-function App() {
- const { result, search, term, reset } = useFuse({ data, options })
-
- return (
-
- search(e.target.value)} />
-
-
- )
-}
-```
-
-In this example, the `data` parameter is an array of objects with `name` and `age` properties. The `options` parameter specifies that the `name` property should be used for searching. The `useFuse` hook is called with these parameters, and the resulting object is destructured into `result`, `search`, `term`, and `reset`. The `result` array is mapped over to display the names of the matching objects. The `input` element is used to set the search term, and the `button` element is used to reset the search term.
-## Questions:
- 1. What is the purpose of the `Fuse` library being imported?
- - The `Fuse` library is being used for fuzzy searching functionality.
-
-2. What is the purpose of the `useFuse` function?
- - The `useFuse` function is a custom hook that takes in data and options, and returns an object with search functionality and search results based on fuzzy search using the `Fuse` library.
-
-3. What is the purpose of the `reset` function being returned by the `useFuse` hook?
- - The `reset` function allows the user to reset the search term to an empty string, effectively resetting the search results to the original data.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useHttpLocations.md b/.autodoc/docs/markdown/core/src/hooks/useHttpLocations.md
deleted file mode 100644
index 7c4ed4fb3..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useHttpLocations.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useHttpLocations.ts)
-
-The code in this file is a module that exports a custom hook called `useHttpLocations`. This hook takes in a single argument, `uri`, which is a string that represents a Uniform Resource Identifier (URI). The purpose of this hook is to convert the given URI into one or more HTTP locations that can be used to retrieve content from a server.
-
-To achieve this, the hook first imports two functions from another module: `contenthashToUri` and `uriToHttp`. These functions are used to convert a content hash (a unique identifier for content stored on a decentralized network) to a URI, and then to convert that URI to an HTTP location.
-
-The hook also imports another function called `parseENSAddress` from a different module. This function is used to parse an Ethereum Name Service (ENS) address from the given URI. ENS is a decentralized naming system that maps human-readable names to machine-readable identifiers, such as Ethereum addresses or content hashes.
-
-The hook then uses the `useMemo` hook from the React library to memoize the result of parsing the ENS address from the given URI. This means that the ENS address will only be parsed once, and subsequent calls to the hook with the same URI will reuse the previously parsed result.
-
-Next, the hook calls another custom hook called `useENSContentHash`, passing in the parsed ENS address. This hook is responsible for resolving the content hash associated with the given ENS address. If the ENS address is not valid or does not have a content hash associated with it, the `useENSContentHash` hook will return an empty object.
-
-Finally, the `useHttpLocations` hook returns an array of HTTP locations based on the given URI and the resolved content hash. If the URI contains a valid ENS address, the hook will use the resolved content hash to generate an HTTP location using the `contenthashToUri` and `uriToHttp` functions. If the URI does not contain a valid ENS address, the hook will simply use the `uriToHttp` function to generate an HTTP location from the URI.
-
-Overall, this hook is useful for resolving content stored on a decentralized network using human-readable ENS addresses, and converting those addresses to HTTP locations that can be used to retrieve the content from a server. Here is an example of how this hook might be used in a larger project:
-
-```
-import useHttpLocations from './useHttpLocations'
-
-function MyComponent({ uri }) {
- const httpLocations = useHttpLocations(uri)
-
- return (
- -
- {result.map((item) => (
-
- {item.name} - ))} -
- {httpLocations.map((location) => (
-
- ))}
-
- )
-}
-```
-
-In this example, the `MyComponent` component takes in a `uri` prop, which is passed to the `useHttpLocations` hook to generate an array of HTTP locations. The component then maps over this array to render one or more images, each with a `src` attribute set to an HTTP location.
-## Questions:
- 1. What does this code do?
- This code exports a function called `useHttpLocations` that takes a URI string as input and returns an array of HTTP locations. It uses other functions from the `convert` and `ens` modules to convert content hashes and parse ENS addresses.
-
-2. What is the purpose of the `useMemo` hook in this code?
- The `useMemo` hook is used to memoize the result of a function call and prevent unnecessary re-renders in React. In this code, it is used to memoize the parsed ENS address based on the input URI.
-
-3. What happens if the input URI is undefined?
- If the input URI is undefined, the function returns an empty array.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useInactiveListener.md b/.autodoc/docs/markdown/core/src/hooks/useInactiveListener.md
deleted file mode 100644
index 2dc1ec10a..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useInactiveListener.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useInactiveListener.ts)
-
-The `useInactiveListener` function is a React hook that is used to log a user in and out of a web3 wallet after checking what network they are on. It is imported from the `useActiveWeb3React` hook and the `wallets` configuration file.
-
-The hook uses the `useEffect` hook to listen for changes in the user's wallet and network. If the user is not active, has no errors, and the `suppress` flag is not set to true, the hook will activate the `injected` wallet from the `wallets` configuration file.
-
-The `ethereum.on` method is used to listen for changes in the user's wallet and network. If the user changes their network, the `handleChainChanged` function is called, which activates the `injected` wallet. If the user changes their account, the `handleAccountsChanged` function is called, which also activates the `injected` wallet.
-
-The `useInactiveListener` hook is used in the larger project to ensure that the user is logged in and using the correct wallet for the current network. It is particularly useful for applications that require the user to interact with a blockchain, as it ensures that the user is using the correct wallet and network.
-
-Example usage:
-
-```
-import useInactiveListener from './useInactiveListener'
-
-function MyComponent() {
- useInactiveListener()
-
- // rest of component code
-}
-```
-## Questions:
- 1. What is the purpose of this code and how is it used in the `zoo` project?
-- This code defines a React hook called `useInactiveListener` that is used for logging users in and out based on their network. It is likely used in the authentication or wallet management features of the `zoo` project.
-
-2. What is the significance of the `useEffect` hook and how does it work in this code?
-- The `useEffect` hook is used to run side effects in a React component. In this code, it is used to listen for changes in the user's network and accounts using the `ethereum` object provided by the browser. When a change is detected, the `connector` is activated to log the user in or out.
-
-3. What is the purpose of the `suppress` parameter and how is it used in this code?
-- The `suppress` parameter is used to prevent the hook from running in certain cases. If `suppress` is set to `true`, the hook will not listen for changes in the user's network or accounts. This parameter is likely used to control the behavior of the hook in different parts of the `zoo` project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useInterval.md b/.autodoc/docs/markdown/core/src/hooks/useInterval.md
deleted file mode 100644
index 4815d1a56..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useInterval.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useInterval.ts)
-
-The code above defines a custom React hook called `useInterval`. This hook allows a function to be executed repeatedly at a specified interval. The hook takes three arguments: a callback function to be executed, a delay in milliseconds between each execution, and a boolean value indicating whether the first execution should occur immediately or after the first interval has elapsed.
-
-The `useInterval` hook uses the `useRef` and `useEffect` hooks from the React library. The `useRef` hook creates a reference to the callback function that is passed as an argument to the hook. The `useEffect` hook is used to set up the interval and execute the callback function at the specified interval.
-
-The first `useEffect` hook is used to update the reference to the callback function whenever it changes. This ensures that the latest version of the function is used when the interval is executed.
-
-The second `useEffect` hook is used to set up the interval. It creates a function called `tick` that executes the callback function stored in the `savedCallback` reference. If the delay is not null, the `tick` function is executed immediately if the `leading` argument is true. Then, the `setInterval` function is called to execute the `tick` function at the specified interval. The `clearInterval` function is returned from the `useEffect` hook to stop the interval when the component using the hook is unmounted.
-
-This hook can be used in a variety of scenarios where a function needs to be executed repeatedly at a specified interval. For example, it could be used to create a countdown timer or to periodically update data from an API. Here is an example of how the `useInterval` hook could be used to create a simple countdown timer:
-
-```
-import React, { useState } from 'react'
-import useInterval from './useInterval'
-
-function CountdownTimer() {
- const [count, setCount] = useState(10)
-
- useInterval(() => {
- setCount(count - 1)
- }, 1000)
-
- return (
-
-
- )
-}
-```
-
-In this example, the `useInterval` hook is used to decrement the `count` state variable every second. The countdown timer is displayed using the `h1` element.
-## Questions:
- 1. What does this code do?
-- This code exports a custom React hook called `useInterval` that sets up an interval to repeatedly call a provided callback function with a specified delay.
-
-2. What is the purpose of the `useRef` hook in this code?
-- The `useRef` hook is used to create a mutable reference to the latest callback function passed to the `useInterval` hook, which can be accessed across multiple renders of the component.
-
-3. What is the significance of the `leading` parameter in the `useInterval` function?
-- The `leading` parameter determines whether the first call to the callback function should happen immediately (if `true`) or after the first delay interval (if `false`).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useIntervalTransaction.md b/.autodoc/docs/markdown/core/src/hooks/useIntervalTransaction.md
deleted file mode 100644
index f18e2f6c3..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useIntervalTransaction.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useIntervalTransaction.ts)
-
-The code defines a custom React hook called `useInterval` that allows for the execution of a given callback function at a specified interval. The hook takes in three parameters: `callback`, `delay`, and `leading`.
-
-The `callback` parameter is a function that will be executed at the specified interval. The `delay` parameter is the time in milliseconds between each execution of the `callback` function. If `delay` is set to `null`, the interval will not be set up. The `leading` parameter is a boolean that determines whether the `callback` function should be executed immediately upon setting up the interval or after the first interval has passed.
-
-The hook uses the `useRef` hook to create a reference to the `callback` function that is passed in. This reference is stored in the `savedCallback` variable. The `useEffect` hook is then used to update the `savedCallback` reference whenever the `callback` parameter changes.
-
-The `useEffect` hook is also used to set up the interval. The `tick` function is defined to execute the `savedCallback` function if it exists. If `delay` is not `null`, the `tick` function is called immediately if `leading` is set to `true`. The `setInterval` function is then called to set up the interval, and the `clearInterval` function is returned in a cleanup function to clear the interval when the component unmounts.
-
-The `useInterval` hook can be used in a larger project to execute a function at a specified interval. For example, it could be used to periodically fetch data from an API or to update the UI with new information. Here is an example of how the `useInterval` hook could be used to update the time displayed in a clock component every second:
-
-```
-import React, { useState } from 'react'
-import useInterval from './useInterval'
-
-export default function Clock() {
- const [time, setTime] = useState(new Date())
-
- useInterval(() => {
- setTime(new Date())
- }, 1000)
-
- return (
- {count}
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code and how is it used in the `zoo` project?
-- This code defines a custom hook called `useInterval` that sets up an interval to repeatedly call a provided callback function. It is likely used throughout the `zoo` project to handle timed updates or animations.
-
-2. What is the significance of the `useTransactionStatus` hook being imported and used in this code?
-- The `useTransactionStatus` hook is likely used to determine whether or not the interval should be paused or stopped based on the current state of any ongoing transactions in the `zoo` project.
-
-3. What is the purpose of the `leading` parameter in the `useInterval` function?
-- The `leading` parameter determines whether or not the callback function should be called immediately upon setting up the interval, before any delay has passed. If `leading` is `false`, the first call to the callback will occur after the specified delay has passed.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useIsArgentWallet.md b/.autodoc/docs/markdown/core/src/hooks/useIsArgentWallet.md
deleted file mode 100644
index 14202f8be..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useIsArgentWallet.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useIsArgentWallet.ts)
-
-The code above is a custom hook called `useIsArgentWallet` that is used to detect whether the current user is using an Argent wallet. The Argent wallet is a smart contract wallet that allows users to manage their Ethereum assets and interact with decentralized applications.
-
-The hook imports several other hooks and functions from different files in the project. The `useActiveWeb3React` hook is used to get the current user's Ethereum account and network information. The `useArgentWalletDetectorContract` function is used to get the smart contract instance of the Argent wallet detector. The `useMemo` hook is used to memoize the inputs to the `useSingleCallResult` hook.
-
-The `useSingleCallResult` hook is used to call the `isArgentWallet` function on the Argent wallet detector smart contract. The `inputs` array is passed as an argument to the `useSingleCallResult` hook, which includes the current user's Ethereum account. The `NEVER_RELOAD` constant is also passed as an argument to the `useSingleCallResult` hook, which ensures that the function is only called once and the result is cached.
-
-The `useIsArgentWallet` hook returns a boolean value that indicates whether the current user is using an Argent wallet. The `call` variable is the result of the `useSingleCallResult` hook, which includes the result of the `isArgentWallet` function call. The `?.` operator is used to safely access the `result` array and the first element of the array, which is a boolean value that indicates whether the current user is using an Argent wallet. If the `result` array is undefined or empty, the hook returns `false`.
-
-This hook can be used in other parts of the project to conditionally render certain components or features based on whether the user is using an Argent wallet. For example, a dApp could use this hook to display a message or offer special features to users who are using an Argent wallet.
-
-Example usage:
-
-```
-import useIsArgentWallet from './useIsArgentWallet'
-
-function MyComponent() {
- const isArgentWallet = useIsArgentWallet()
-
- return (
- {time.toLocaleTimeString()}
-
- {isArgentWallet ?
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `useIsArgentWallet` function?
-- The `useIsArgentWallet` function is used to determine if the current user's wallet is an Argent wallet or not.
-
-2. What is the `useSingleCallResult` function and where is it imported from?
-- The `useSingleCallResult` function is imported from the `../state/multicall/hooks` file and is used to make a single call to a contract method and return the result.
-
-3. What is the `useMemo` hook used for in this code?
-- The `useMemo` hook is used to memoize the `inputs` array, which is passed as an argument to the `useSingleCallResult` function. This ensures that the `inputs` array is only recomputed when the `account` value changes.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useIsSwapUnsupported.md b/.autodoc/docs/markdown/core/src/hooks/useIsSwapUnsupported.md
deleted file mode 100644
index fc6019ed3..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useIsSwapUnsupported.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useIsSwapUnsupported.ts)
-
-The code above is a TypeScript module that exports a single function called `useIsSwapUnsupported`. This function takes two optional parameters, `currencyIn` and `currencyOut`, which are both of type `Currency`. The purpose of this function is to determine whether a given input or output currency can be traded in the interface.
-
-The function makes use of the `useUnsupportedTokens` hook from the `./Tokens` module, which returns a dictionary of unsupported tokens. The function then uses the `useMemo` hook from the `react` library to memoize the result of the function.
-
-The function checks whether the `unsupportedTokens` dictionary has been loaded and whether either the `currencyIn` or `currencyOut` is a token that is on the list of unsupported tokens. If either of these conditions is true, the function returns `true`, indicating that the swap is unsupported. Otherwise, it returns `false`.
-
-This function is likely used in the larger project to determine whether a given swap is supported by the interface. It could be used, for example, to disable a swap button or display a warning message to the user if the swap is not supported.
-
-Here is an example of how this function could be used in a React component:
-
-```jsx
-import { useIsSwapUnsupported } from '@zoolabs/zoo'
-
-function SwapButton({ currencyIn, currencyOut }) {
- const isUnsupported = useIsSwapUnsupported(currencyIn, currencyOut)
-
- return (
-
- )
-}
-```
-
-In this example, the `SwapButton` component takes two currency props, `currencyIn` and `currencyOut`. It then calls the `useIsSwapUnsupported` function to determine whether the swap is unsupported. If it is unsupported, the button is disabled and displays the text "Unsupported". Otherwise, the button is enabled and displays the text "Swap".
-## Questions:
- 1. What is the purpose of the `useIsSwapUnsupported` function?
-- The function returns a boolean indicating whether the input currency or output currency cannot be traded in the interface.
-
-2. What is the `useMemo` hook used for in this code?
-- The `useMemo` hook is used to memoize the result of the function and avoid unnecessary re-renders.
-
-3. What is the `useUnsupportedTokens` hook used for in this code?
-- The `useUnsupportedTokens` hook is used to retrieve a list of unsupported tokens from the application state.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useIsWindowVisible.md b/.autodoc/docs/markdown/core/src/hooks/useIsWindowVisible.md
deleted file mode 100644
index 652a822d4..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useIsWindowVisible.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useIsWindowVisible.ts)
-
-The code above is a React hook that determines whether the window is currently visible to the user. It does this by checking the `visibilityState` property of the `document` object. If the `visibilityState` property is not supported or if it is not equal to 'hidden', then the window is considered visible.
-
-The hook is exported as a default function called `useIsWindowVisible()`. It uses the `useState` hook to keep track of whether the window is currently visible or not. The initial state is set to the result of the `isWindowVisible()` function, which checks the `visibilityState` property of the `document` object.
-
-The `useCallback` hook is used to create a memoized version of the `listener` function, which updates the `focused` state whenever the `visibilitychange` event is fired. The `useEffect` hook is used to add and remove the `listener` function as an event listener for the `visibilitychange` event. If the `visibilityState` property is not supported, then the `useEffect` hook returns `undefined` to indicate that there is no cleanup needed.
-
-This hook can be used in a larger project to conditionally render components based on whether the window is visible or not. For example, if a video is playing and the window becomes hidden, the video could be paused until the window becomes visible again. Here is an example of how this hook could be used:
-
-```
-import React from 'react'
-import useIsWindowVisible from './useIsWindowVisible'
-
-function VideoPlayer() {
- const isWindowVisible = useIsWindowVisible()
-
- return (
-
- )
-}
-```
-
-In this example, the `autoPlay` prop of the `video` element is set to the value of `isWindowVisible`, which will be `true` if the window is visible and `false` if it is not. This ensures that the video will only play when the window is visible.
-## Questions:
- 1. What is the purpose of the `useIsWindowVisible` function?
-- The `useIsWindowVisible` function returns a boolean value indicating whether the window is currently visible to the user.
-
-2. What is the significance of the `VISIBILITY_STATE_SUPPORTED` constant?
-- The `VISIBILITY_STATE_SUPPORTED` constant is used to check if the `visibilityState` property is supported by the current document. If it is not supported, the `isWindowVisible` function always returns `true`.
-
-3. Why is the `listener` function wrapped in a `useCallback` hook?
-- The `listener` function is wrapped in a `useCallback` hook to memoize the function and prevent unnecessary re-renders of the component. This is because the `listener` function is used as a dependency in the `useEffect` hook.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useKashiApproveCallback.md b/.autodoc/docs/markdown/core/src/hooks/useKashiApproveCallback.md
deleted file mode 100644
index 0dddca2b2..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useKashiApproveCallback.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useKashiApproveCallback.ts)
-
-The `useKashiApproveCallback` function is a React hook that returns a tuple of values and functions that can be used to manage the approval state of a Kashi contract. Kashi is a lending and borrowing platform built on top of the Aave protocol. The hook is used to manage the approval state of the user's BentoBox contract to interact with Kashi contracts.
-
-The hook imports several functions and constants from other files, including `KashiCooker`, `signMasterContractApproval`, `useActiveWeb3React`, `useBentoBoxContract`, `useBentoMasterContractAllowed`, `useKashiApprovalPending`, `useTransactionAdder`, `AddressZero`, `HashZero`, and `splitSignature`.
-
-The hook defines an enum `BentoApprovalState` with five possible values: `UNKNOWN`, `NOT_APPROVED`, `PENDING`, `FAILED`, and `APPROVED`. It also defines an interface `KashiPermit` with four properties: `account`, `masterContract`, `v`, `r`, and `s`. It also defines an enum `BentoApproveOutcome` with four possible values: `SUCCESS`, `REJECTED`, `FAILED`, and `NOT_READY`. Finally, it defines a type `BentoApproveResult` with two properties: `outcome` of type `BentoApproveOutcome` and `permit` of type `KashiPermit`.
-
-The hook returns a tuple with five values: `approvalState` of type `BentoApprovalState`, `approveKashiFallback` of type `boolean`, `kashiPermit` of type `KashiPermit | undefined`, `onApprove` of type `() => void`, and `onCook` of type `(pair: any, execute: (cooker: KashiCooker) => PromiseYou are using an Argent wallet!
:You are not using an Argent wallet.
} -
-
-
- )
-}
-```
-
-Example usage of `useLastTruthy` hook:
-
-```
-import { useState } from 'react'
-import useLastTruthy from './useLastTruthy'
-
-function Dropdown() {
- const [selectedOption, setSelectedOption] = useState(null)
- const lastSelectedOption = useLastTruthy(selectedOption)
-
- function handleOptionSelect(event) {
- setSelectedOption(event.target.value)
- }
-
- return (
- Last valid input: {lastValidInput}
-
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `useLast` function?
-- The `useLast` function returns the last value of type T that passes a filter function.
-
-2. What is the purpose of the `useEffect` hook in the `useLast` function?
-- The `useEffect` hook is used to update the `last` state variable whenever the `value` or `filterFn` dependencies change.
-
-3. What is the purpose of the `isDefined` function?
-- The `isDefined` function is a type guard that checks if a value is not null or undefined and returns a boolean value. It is used in the `useLastTruthy` function to filter out null and undefined values.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useLimitOrderApproveCallback.md b/.autodoc/docs/markdown/core/src/hooks/useLimitOrderApproveCallback.md
deleted file mode 100644
index 7b1f080dd..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useLimitOrderApproveCallback.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useLimitOrderApproveCallback.ts)
-
-The `useLimitOrderApproveCallback` function is a React hook that provides a callback function to approve a limit order and execute a deposit into the BentoBox smart contract. The BentoBox is a smart contract that allows for efficient and gas-saving token transfers and storage. The function is part of the larger `zoo` project and uses several other functions and hooks from the project.
-
-The function first imports several constants and functions from other modules, including the `STOP_LIMIT_ORDER_ADDRESS` and `getSignatureWithProviderBentobox` functions. It also imports several hooks from the `zoo` project, including `useActiveWeb3React`, `useLimitOrderState`, and `useTransactionAdder`.
-
-The function defines two enums, `BentoApprovalState` and `BentoApproveOutcome`, which are used to represent the different states of the approval process and the possible outcomes of the approval function.
-
-The main logic of the function is in the `useLimitOrderApproveCallback` function, which defines several constants and hooks, including the `account`, `library`, and `chainId` from the `useActiveWeb3React` hook, and the `bentoBoxContract` and `limitOrderHelperContract` from the `useContract` hook. It also defines several state variables, including `fallback`, which is used to handle cases where the user rejects the signature request, and `limitOrderPermit`, which is used to store the signature data for the limit order approval.
-
-The function then defines an `approve` function that checks the current approval status and attempts to approve the limit order if it is not already approved. The function uses the `getSignatureWithProviderBentobox` function to generate a signature for the approval request and returns the signature data and encoded function data for the `setMasterContractApproval` function.
-
-The `onApprove` function is called when the user clicks the "Approve" button on the limit order form. It first checks if the `fallback` flag is set, indicating that the user has already rejected the signature request. If so, it calls the `setMasterContractApproval` function directly with a gas limit of 0 to force the transaction to fail and trigger the fallback logic. Otherwise, it calls the `approve` function and sets the `limitOrderPermit` state variable if the approval is successful.
-
-The `execute` function is called when the user clicks the "Swap" button on the limit order form. It first checks if the limit order is approved and if the user has sufficient funds in the BentoBox. If not, it adds the necessary transactions to the batch and executes them using the `batch` function of the `bentoBoxContract`. If the token is native and the limit order is not approved, it uses the `depositAndApprove` function of the `limitOrderHelperContract` to deposit the token and approve the limit order in a single transaction.
-
-Overall, the `useLimitOrderApproveCallback` function provides a convenient way for users to approve limit orders and execute deposits into the BentoBox smart contract. It uses several other functions and hooks from the `zoo` project and provides a flexible and efficient way to interact with the BentoBox.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a custom React hook called `useLimitOrderApproveCallback` that returns an array of values and functions related to approving and executing a limit order transaction using the BentoBox smart contract.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including `@ethersproject/constants`, `@zoolabs/zdk`, `react`, `@ethersproject/address`, and several custom functions and hooks defined in other files within the `zoo` project.
-
-3. What is the purpose of the `BentoApprovalState` and `BentoApproveOutcome` enums?
-- These enums define possible states and outcomes related to approving a BentoBox master contract for a given user account. `BentoApprovalState` can be one of `UNKNOWN`, `NOT_APPROVED`, `PENDING`, `FAILED`, or `APPROVED`, while `BentoApproveOutcome` can be one of `SUCCESS`, `REJECTED`, `FAILED`, or `NOT_READY`. These enums are used to determine whether a user needs to approve the master contract and to handle different outcomes of the approval process.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useLimitOrders.md b/.autodoc/docs/markdown/core/src/hooks/useLimitOrders.md
deleted file mode 100644
index c7f30720b..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useLimitOrders.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useLimitOrders.ts)
-
-The `useLimitOrders` function is a React hook that provides data on limit orders for a given user account and chain ID. It imports several dependencies from the `@zoolabs/zdk` and `@ethersproject/bignumber` libraries, as well as other custom hooks from the `.` and `./Tokens` files.
-
-The function defines two interfaces: `State` and `OpenOrder`. `State` is an object that contains two properties, `pending` and `completed`, each of which is an object with properties for `page`, `maxPages`, `data`, `loading`, and `totalOrders`. `OpenOrder` is an object that contains properties for `tokenIn`, `tokenOut`, `filledPercent`, `limitOrder`, `status`, and `rate`.
-
-The function also defines several helper functions. `denominator` is a function that takes an optional `decimals` argument (defaulting to 18) and returns the result of raising 10 to the power of `decimals` using the `JSBI` library. `viewUrl` is a string that represents the URL for fetching limit order data. `viewFetcher` is a function that takes several arguments and returns a Promise that fetches data from `viewUrl` using a POST request with a JSON body containing the `address`, `chainId`, `page`, and `pendingPage` parameters.
-
-The main body of the function defines several constants and hooks. `useActiveWeb3React` is a custom hook that returns the current `account` and `chainId` values from the Web3 React context. `useLimitOrderContract` is a custom hook that returns the contract instance for the limit order contract. `useAllTokens` is a custom hook that returns an object containing all known tokens for the current chain ID.
-
-The function also defines a `state` variable using the `useState` hook, which is an object with `pending` and `completed` properties that each contain an object with `page`, `maxPages`, `data`, `loading`, and `totalOrders` properties. It defines a `shouldFetch` variable using the `useMemo` hook, which is an array of values that determine whether or not to fetch data from `viewUrl`. It defines a `useSWR` hook that fetches data from `viewUrl` using `viewFetcher` and the `shouldFetch` variable.
-
-The function defines two callback functions, `setPendingPage` and `setCompletedPage`, that update the `state` variable with a new `page` value for the `pending` and `completed` properties, respectively. It also defines an `useEffect` hook that updates the `state` variable with new data from the `ordersData` object returned by the `useSWR` hook.
-
-Finally, the function returns an object that contains the `state` variable, as well as `setPage` properties for the `pending` and `completed` properties that call the `setPendingPage` and `setCompletedPage` callback functions, respectively. It also returns a `mutate` property that can be used to manually trigger a re-fetch of the data.
-
-This hook can be used in a larger project to display a user's limit orders and their status. For example, it could be used to display a table of open and completed orders with information such as the token pair, rate, and filled percentage. The `setPage` and `mutate` properties can be used to allow the user to navigate between pages of orders and manually refresh the data, respectively.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a custom React hook called `useLimitOrders` that fetches and transforms limit orders data from a server and returns it as state.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including `@zoolabs/zdk`, `react`, `swr`, and `@ethersproject/bignumber`.
-
-3. What is the structure of the data returned by the `useLimitOrders` hook?
-- The `useLimitOrders` hook returns an object with two properties: `pending` and `completed`, each of which contains an object with `page`, `maxPages`, `data`, `loading`, and `totalOrders` properties. The `data` property is an array of `OpenOrder` objects, which contain information about a limit order, including the input and output tokens, the filled percentage, the order status, and the exchange rate.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useMatchBreakpoints.md b/.autodoc/docs/markdown/core/src/hooks/useMatchBreakpoints.md
deleted file mode 100644
index a426b7e52..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useMatchBreakpoints.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useMatchBreakpoints.ts)
-
-The code defines a custom React hook called `useMatchBreakpoints` that returns an object representing the current state of whether the browser window matches certain media query breakpoints. The hook uses the `useState` and `useEffect` hooks from React to manage state and side effects respectively.
-
-The `mediaQueries` object is defined as a mapping of breakpoint sizes to media query strings. The breakpoints are defined in another file and imported as `breakpointMap`. The `mediaQueries` object is constructed by iterating over the keys of `breakpointMap` and creating a media query string for each breakpoint size. The media query strings are constructed such that they represent a range of screen sizes, e.g. `(min-width: 370px) and (max-width: 576px)`.
-
-The `getKey` function is a helper function that takes a breakpoint size string and returns a string representing the corresponding state key, e.g. `isSmall` for the `small` breakpoint.
-
-The `useMatchBreakpoints` hook initializes state by iterating over the keys of `mediaQueries` and creating a state object with a key for each breakpoint size. The value of each key is set to the result of calling `window.matchMedia` with the corresponding media query string. The `matches` property of the resulting `MediaQueryList` object is used to set the initial value of each state key.
-
-The hook then sets up listeners for each media query using the `useEffect` hook. The effect function creates an array of listener functions, one for each media query. Each listener function updates state by calling `setState` with a new object that merges the previous state with the new state for the corresponding breakpoint size. The new state is computed by calling `matches` on the `MediaQueryListEvent` object passed to the listener function.
-
-Finally, the effect function returns a cleanup function that removes the listeners created earlier. The cleanup function is called when the component using the hook unmounts.
-
-The `useMatchBreakpoints` hook can be used in a larger project to conditionally render components based on the current screen size. For example, a component might render differently on small screens than on large screens. The hook can be used to determine the current screen size and pass that information down to child components as props. Here is an example usage:
-
-```
-import useMatchBreakpoints from './useMatchBreakpoints'
-
-function MyComponent() {
- const { isSmall, isMedium, isLarge } = useMatchBreakpoints()
-
- return (
- Last selected option: {lastSelectedOption}
-
- {isSmall &&
- )
-}
-```
-## Questions:
- 1. What does this code do?
-- This code exports a custom React hook called `useMatchBreakpoints` that returns a state object indicating whether the current viewport matches certain media query breakpoints.
-
-2. What is the purpose of the `mediaQueries` object?
-- The `mediaQueries` object is used to define media queries that correspond to specific viewport sizes. These media queries are used to create listeners that update the state returned by the `useMatchBreakpoints` hook.
-
-3. Why are there Safari version checks in the code?
-- There are Safari version checks in the code because older versions of Safari (before version 14) use a different event listener syntax for `MediaQueryList` objects. The checks ensure that the code works correctly across different versions of Safari.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useMeowshi.md b/.autodoc/docs/markdown/core/src/hooks/useMeowshi.md
deleted file mode 100644
index f8c280369..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useMeowshi.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useMeowshi.ts)
-
-The `useMeowshi` function is a custom React hook that provides functionality for interacting with the Meowshi contract. The Meowshi contract is a smart contract on the Ethereum blockchain that allows users to deposit and withdraw tokens in exchange for a reward token called MEOW. The purpose of this hook is to provide a simple interface for users to interact with the Meowshi contract from within a React application.
-
-The hook uses several other custom hooks to interact with the Ethereum blockchain, including `useActiveWeb3React`, `useTransactionAdder`, `useMeowshiContract`, `useSushiContract`, and `useSushiBarContract`. These hooks provide access to the user's Ethereum account, the Meowshi contract, and the SushiSwap contracts.
-
-The `useMeowshi` hook provides several functions for interacting with the Meowshi contract, including `approve`, `meow`, `unmeow`, `meowSushi`, and `unmeowSushi`. These functions allow the user to approve the Meowshi contract to spend their tokens, deposit tokens into the contract, and withdraw tokens from the contract. The `meowSushi` and `unmeowSushi` functions are specific to the SushiSwap version of the Meowshi contract.
-
-The hook also provides an `approvalState` variable that indicates whether the user has approved the Meowshi contract to spend their tokens. This variable is updated automatically when the user interacts with the contract.
-
-Overall, the `useMeowshi` hook provides a simple and convenient way for users to interact with the Meowshi contract from within a React application. By abstracting away the complexity of interacting with the Ethereum blockchain, this hook makes it easier for developers to build applications that use the Meowshi contract.
-
-Example usage:
-
-```
-import useMeowshi from './useMeowshi'
-
-function MyComponent() {
- const { approvalState, approve, meow, unmeow } = useMeowshi(false)
-
- return (
- Small screen
} - {isMedium &&Medium screen
} - {isLarge &&Large screen
} -
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code defines a custom hook called `useMeowshi` that provides functions for interacting with the Meowshi contract, allowing users to enter and leave the Meowshi pool and the Sushi pool. It also handles approval of the contract to spend the user's tokens.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including `react`, `@ethersproject/bignumber`, and custom hooks defined in other files such as `useContract` and `useActiveWeb3React`.
-
-3. What is the significance of the `pendingApproval` state variable?
-- The `pendingApproval` state variable is used to track whether an approval transaction is currently pending. It is set to `true` when the user initiates an approval transaction and set back to `false` when the transaction is complete or fails. This is used to prevent the user from initiating multiple approval transactions simultaneously.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useMeowshiPerXSushi.md b/.autodoc/docs/markdown/core/src/hooks/useMeowshiPerXSushi.md
deleted file mode 100644
index e60727d40..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useMeowshiPerXSushi.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useMeowshiPerXSushi.ts)
-
-The code is a custom React hook called `useMeowshiPerXSushi` that is used to retrieve the conversion rate between XSUSHI tokens and Meowshi tokens. The hook uses the `useEffect` and `useState` hooks from the React library to manage state and side effects.
-
-The `useBentoBoxContract` hook is used to retrieve the BentoBox smart contract instance, which is used to call the `toShare` and `toAmount` functions. These functions are used to calculate the conversion rate between XSUSHI and Meowshi tokens.
-
-The `useState` hook is used to store the conversion rate as a tuple of two `BigNumber` objects. The initial value of the state is set to `[BigNumber.from('0'), BigNumber.from('0')]`.
-
-The `useEffect` hook is used to call the `toShare` and `toAmount` functions when the `bentoboxContract` object is available. The `async` function inside the `useEffect` hook retrieves the conversion rate by calling the `toShare` and `toAmount` functions with the `XSUSHI` token address and a value of `1` in XSUSHI token decimals. The `false` parameter is used to indicate that the conversion rate should be calculated using the current block timestamp.
-
-Once the conversion rate is retrieved, it is stored in the state using the `setState` function.
-
-The `useMeowshiPerXSushi` hook returns the current state, which is a tuple of two `BigNumber` objects representing the conversion rate between XSUSHI and Meowshi tokens.
-
-This hook can be used in other components of the project to retrieve the current conversion rate between XSUSHI and Meowshi tokens. For example, a component that displays the current price of Meowshi tokens in XSUSHI tokens could use this hook to retrieve the conversion rate and calculate the price.
-## Questions:
- 1. What is the purpose of this code and what does it do?
- This code defines a custom React hook called `useMeowshiPerXSushi` that returns an array of two `BigNumber` values. It uses the `useBentoBoxContract` hook to interact with a smart contract and calculate the conversion rate between XSUSHI tokens and Meowshi tokens.
-
-2. What is the significance of the `useEffect` hook and how does it work?
- The `useEffect` hook is used to run side effects in a React component. In this code, it is used to asynchronously fetch data from the smart contract and update the component state when the `bentoboxContract` dependency changes.
-
-3. What is the purpose of the `XSUSHI` constant and where is it defined?
- The `XSUSHI` constant is a token object that represents the XSUSHI token. It is imported from a file located at `../config/tokens` and is used to interact with the smart contract and perform calculations involving XSUSHI tokens.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useMounted.md b/.autodoc/docs/markdown/core/src/hooks/useMounted.md
deleted file mode 100644
index 27beb20e8..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useMounted.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useMounted.ts)
-
-The code above is a custom React hook called `useMounted`. The purpose of this hook is to determine whether or not a component is mounted in the DOM.
-
-The hook uses the `useEffect` and `useState` hooks from React. The `useState` hook initializes a state variable called `mounted` to `false`. The `useEffect` hook is used to update the `mounted` state variable to `true` when the component is mounted in the DOM. The `[]` passed as the second argument to `useEffect` ensures that the effect only runs once, when the component is mounted.
-
-The `useMounted` hook returns the `mounted` state variable, which can be used in other parts of the code to determine if the component is mounted. For example, if a component needs to perform an action only when it is mounted, it can use the `useMounted` hook to check if it is currently mounted before performing the action.
-
-Here is an example of how the `useMounted` hook can be used in a component:
-
-```
-import React from 'react'
-import useMounted from './useMounted'
-
-function MyComponent() {
- const isMounted = useMounted()
-
- if (!isMounted) {
- return Approval state: {approvalState}
- - - -Loading...
- }
-
- return My Component
-}
-```
-
-In the example above, the `MyComponent` component uses the `useMounted` hook to determine if it is currently mounted. If it is not mounted, it displays a loading message. If it is mounted, it displays the component content.
-
-Overall, the `useMounted` hook is a useful utility hook that can be used in various parts of a React project to determine if a component is mounted in the DOM.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom React hook called `useMounted` that returns a boolean value indicating whether the component is mounted or not.
-
-2. What is the significance of the `useEffect` hook in this code?
- The `useEffect` hook is used to set the `mounted` state to `true` when the component is mounted. The empty dependency array `[]` ensures that this effect only runs once when the component is mounted.
-
-3. How can this hook be used in a React component?
- This hook can be used in a React component by calling it and storing the returned value in a variable. The value can then be used to conditionally render components or perform other logic based on whether the component is mounted or not.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useOnClickOutside.md b/.autodoc/docs/markdown/core/src/hooks/useOnClickOutside.md
deleted file mode 100644
index 151ee9adc..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useOnClickOutside.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useOnClickOutside.tsx)
-
-The code above defines a custom React hook called `useOnClickOutside`. This hook is designed to be used in a React component to detect clicks outside of a specified element and trigger a callback function when this occurs.
-
-The hook takes two arguments: `node` and `handler`. `node` is a reference to the element that the click event should be detected outside of. `handler` is an optional callback function that will be called when a click event is detected outside of the specified element.
-
-The `useOnClickOutside` hook uses the `useRef` and `useEffect` hooks from React. The `useRef` hook is used to create a reference to the `handler` function that is passed in as an argument. The `useEffect` hook is used to update the `handlerRef` reference whenever the `handler` function changes.
-
-The main logic of the `useOnClickOutside` hook is implemented in the second `useEffect` hook. This hook adds an event listener to the `document` object that listens for `mousedown` events. When a `mousedown` event occurs, the `handleClickOutside` function is called. This function checks if the `node` reference contains the target of the `mousedown` event. If the target is not contained within the `node`, the `handler` function is called (if it exists).
-
-Finally, the `useEffect` hook returns a cleanup function that removes the event listener from the `document` object when the component unmounts.
-
-Overall, the `useOnClickOutside` hook is a useful utility for detecting clicks outside of a specified element in a React component. It can be used to implement various UI features such as closing a dropdown menu when a user clicks outside of it.
-
-Example usage of the `useOnClickOutside` hook:
-
-```
-import React, { useRef } from 'react'
-import { useOnClickOutside } from './useOnClickOutside'
-
-function DropdownMenu() {
- const dropdownRef = useRef(null)
-
- const closeDropdown = () => {
- // close dropdown menu logic
- }
-
- useOnClickOutside(dropdownRef, closeDropdown)
-
- return (
-
- {/* dropdown menu content */}
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom React hook called `useOnClickOutside` that takes a ref to a DOM node and a callback function as arguments, and attaches a click event listener to the document that triggers the callback when a click occurs outside the specified node.
-
-2. What is the significance of the generic type `T` in this code?
- The generic type `T` is used to specify the type of the DOM node that the `useOnClickOutside` hook will be attached to. This allows for type safety and ensures that the correct type of node is passed to the hook.
-
-3. Why is the `handlerRef` variable declared as a `useRef` and updated in a separate `useEffect` hook?
- The `handlerRef` variable is declared as a `useRef` so that it can be accessed and updated by the event listener function even after the initial render. The separate `useEffect` hook updates the `handlerRef` variable whenever the `handler` function changes, ensuring that the latest version of the function is always used by the event listener.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useParsedQueryString.md b/.autodoc/docs/markdown/core/src/hooks/useParsedQueryString.md
deleted file mode 100644
index 5a329de50..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useParsedQueryString.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useParsedQueryString.ts)
-
-The code above is a custom React hook that parses the query string parameters from the URL and returns them as an object. It uses the `qs` library to parse the query string and the `useMemo` hook to memoize the result.
-
-The `useParsedQueryString` hook takes no arguments and returns an object of type `ParsedQs`, which is a type definition from the `qs` library. This object contains the parsed query string parameters as key-value pairs.
-
-To use this hook, it must be imported into a React component and called like any other hook. For example:
-
-```
-import useParsedQueryString from './useParsedQueryString'
-
-function MyComponent() {
- const queryParams = useParsedQueryString()
-
- // do something with queryParams
-
- return (
- // JSX code
- )
-}
-```
-
-The `useMemo` hook is used to memoize the result of parsing the query string. This means that if the `search` string (which contains the query string parameters) has not changed, the hook will return the same object as before, without re-parsing the query string. This can improve performance in cases where the query string is frequently accessed but rarely changes.
-
-The `parse` function from the `qs` library is used to parse the query string. It takes two optional arguments: `parseArrays` and `ignoreQueryPrefix`. The `parseArrays` argument specifies whether to parse arrays in the query string as arrays or as objects with numeric keys. The `ignoreQueryPrefix` argument specifies whether to ignore the leading '?' character in the query string.
-
-Overall, this hook provides a convenient way to access and parse query string parameters in a React component. It can be used in conjunction with other hooks, such as `useLocation` from the `react-router-dom` library, to build more complex functionality.
-## Questions:
- 1. What is the purpose of the `useMemo` hook in this code?
- - The `useMemo` hook is used to memoize the result of parsing the query string, so that it is only re-computed when the `search` value changes.
-2. Why is the `parseArrays` option set to `false` in the `parse` function?
- - The `parseArrays` option is set to `false` to ensure that query string parameters with multiple values are not parsed into arrays, but instead are represented as strings.
-3. What is the expected format of the `location.search` value?
- - The `location.search` value is expected to be a string representing the query string portion of a URL, including the leading `?` character.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/usePlayer.md b/.autodoc/docs/markdown/core/src/hooks/usePlayer.md
deleted file mode 100644
index dfc9f84a5..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/usePlayer.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/usePlayer.ts)
-
-The `usePlayer` function is a custom React hook that provides functionality for playing audio files. It takes in an `id` parameter that can be null, a number, or a string. The function returns an object that contains the current time of the audio file, the duration of the audio file, a boolean indicating whether the audio is currently playing or not, a function to set the playing state, and a function to set the clicked time.
-
-The hook uses the `useState` and `useEffect` hooks from React to manage state and side effects. The `useState` hook is used to create state variables for the duration, current time, playing state, and clicked time. The `useEffect` hook is used to perform side effects such as updating the React state when DOM events occur and updating the DOM when React state changes.
-
-The `useEffect` hook sets up event listeners for the audio file to update the React state when the audio file is loaded and when the current time of the audio file changes. It also updates the DOM to play or pause the audio file based on the playing state. If the clicked time is not null and is different from the current time, the hook sets the current time of the audio file to the clicked time and resets the clicked time to null. Finally, the hook cleans up the event listeners when the component unmounts.
-
-This hook can be used in a larger project to provide audio playback functionality. For example, it can be used in a music player app to play and control audio files. Here is an example of how the hook can be used:
-
-```
-import usePlayer from './usePlayer';
-
-function MusicPlayer({ audioFile }) {
- const { curTime, duration, playing, setPlaying, setClickedTime } = usePlayer(audioFile.id);
-
- const handlePlayPause = () => {
- setPlaying(!playing);
- };
-
- const handleSeek = (e) => {
- const clickedTime = e.target.value;
- setClickedTime(clickedTime);
- };
-
- return (
-
-
-
-
-
- );
-}
-```
-
-In this example, the `usePlayer` hook is used to control the playback of an audio file. The `curTime` and `duration` values are used to display the current time and duration of the audio file. The `playing` value is used to toggle between playing and pausing the audio file. The `setPlaying` function is called when the play/pause button is clicked. The `setClickedTime` function is called when the user seeks to a different time in the audio file.
-## Questions:
- 1. What is the purpose of this code?
-
- This code defines a custom React hook called `usePlayer` that manages the state of an HTML audio player.
-
-2. What arguments does the `usePlayer` hook take?
-
- The `usePlayer` hook takes a single argument called `id` that can be `null`, a number, or a string.
-
-3. What does the `useEffect` hook do in this code?
-
- The `useEffect` hook sets up event listeners on an HTML audio element and updates the state of the `usePlayer` hook based on the events that occur. It also cleans up the event listeners when the component unmounts.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/usePool.md b/.autodoc/docs/markdown/core/src/hooks/usePool.md
deleted file mode 100644
index 886fa3ea6..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/usePool.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/usePool.ts)
-
-The `usePool` function is a custom React hook that fetches data about a Uniswap V2 liquidity pool and returns it as an object. The function takes a single argument, `poolAddress`, which is a string representing the Ethereum address of the liquidity pool.
-
-The function first imports several dependencies: `useCallback`, `useEffect`, and `useState` from the React library, `BigNumber` from the `@ethersproject/bignumber` library, and `IUniswapV2PairABI` from the `@sushiswap/core/build/abi` library. It also imports a helper function called `isAddress` from a local `functions` file and a custom hook called `useContract` from another local file.
-
-The `usePool` function initializes a state variable called `poolData` using the `useState` hook. This variable will hold the data fetched from the liquidity pool. The function then checks if the `poolAddress` argument is a valid Ethereum address using the `isAddress` helper function. If it is, the function calls the `useContract` hook to get a reference to the Uniswap V2 pair contract at the specified address.
-
-The `useCallback` hook is used to define a function called `fetchPoolData` that asynchronously fetches data about the liquidity pool using the contract reference. Specifically, it retrieves the reserves of the two tokens in the pool, the addresses of the two tokens, and the total supply of the pool tokens. Once the data is fetched, it is stored in the `poolData` state variable using the `setPoolData` function.
-
-The `useEffect` hook is used to call the `fetchPoolData` function whenever the `poolAddress` argument changes. This ensures that the data is always up-to-date with the specified liquidity pool.
-
-Finally, the `usePool` function returns the `poolData` object, which contains the reserves, token addresses, and total supply of the liquidity pool. This data can be used in other parts of the project to display information about the pool or to perform calculations involving the pool's tokens.
-
-Example usage:
-
-```
-import usePool from './usePool'
-
-function PoolInfo({ poolAddress }) {
- const poolData = usePool(poolAddress)
-
- return (
-
-
- )
-}
-```
-
-In this example, the `PoolInfo` component uses the `usePool` hook to fetch data about a liquidity pool specified by the `poolAddress` prop. The data is then displayed in the component using JSX.
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code defines a custom React hook called `usePool` that fetches data about a Uniswap pool given its address. It solves the problem of needing to repeatedly fetch pool data in different components.
-
-2. What external libraries or dependencies does this code rely on?
-- This code relies on the `react`, `@ethersproject/bignumber`, `@sushiswap/core`, and a custom `isAddress` function from another file.
-
-3. What is the expected input and output of the `usePool` hook?
-- The `usePool` hook expects a string `poolAddress` as input, which is the address of a Uniswap pool. It returns an object `poolData` containing information about the pool's reserves, tokens, and total supply.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/usePrevious.md b/.autodoc/docs/markdown/core/src/hooks/usePrevious.md
deleted file mode 100644
index 11551151f..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/usePrevious.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/usePrevious.ts)
-
-The code above is a custom React hook called `usePrevious` that allows developers to access the previous value of a state or prop in a functional component. This hook is useful when a component needs to compare the current value of a state or prop with its previous value to determine if any changes have occurred.
-
-The `usePrevious` hook is implemented using the `useRef` and `useEffect` hooks from the React library. The `useRef` hook creates a mutable reference object that can hold any value, similar to an instance property on a class. The `useEffect` hook is used to update the reference object with the current value of the state or prop whenever it changes.
-
-The `usePrevious` hook takes a generic type parameter `T` that represents the type of the value being stored. The `value` parameter is the current value of the state or prop that is being tracked. The hook returns the previous value of the state or prop, which is stored in the `ref.current` property.
-
-Here is an example of how the `usePrevious` hook can be used in a functional component:
-
-```
-import React, { useState } from 'react'
-import usePrevious from './usePrevious'
-
-function Counter() {
- const [count, setCount] = useState(0)
- const prevCount = usePrevious(count)
-
- function handleIncrement() {
- setCount(count + 1)
- }
-
- return (
- Token 1: {poolData.token0}
-Token 2: {poolData.token1}
-Reserves: {poolData.reserves.toString()}
-Total supply: {poolData.totalSupply.toString()}
-
-
- )
-}
-```
-
-In the example above, the `Counter` component uses the `useState` hook to manage the state of a count variable. The `usePrevious` hook is used to track the previous value of the count variable. Whenever the count variable is updated, the `usePrevious` hook returns the previous value of the count variable, which is then displayed in the component.
-
-Overall, the `usePrevious` hook is a useful tool for React developers who need to track the previous value of a state or prop in a functional component. It can be used in a variety of scenarios, such as tracking changes in form input values or detecting changes in API response data.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom React hook called `usePrevious` that returns the previous value of a given input value.
-
-2. What is the significance of the `useRef` and `useEffect` hooks used in this code?
- The `useRef` hook is used to create a mutable reference to a value that persists across renders, while the `useEffect` hook is used to run a side effect (in this case, updating the reference value) after a render.
-
-3. How can this code be used in a React component?
- This code can be imported into a React component and used like any other custom hook, by calling `usePrevious` with a value as its argument and using the returned previous value in the component's logic.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useSearchAndSort.md b/.autodoc/docs/markdown/core/src/hooks/useSearchAndSort.md
deleted file mode 100644
index ef6060d8e..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useSearchAndSort.md
+++ /dev/null
@@ -1,56 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSearchAndSort.ts)
-
-The code defines a custom React hook called `useSearchAndSort` that can be used to search and sort an array of items. The hook takes in three arguments: `items`, `searchOptions`, and `sortOptions`.
-
-The `items` argument is the array of items that needs to be searched and sorted. The `searchOptions` argument is an optional object that can be used to configure the search functionality. The `sortOptions` argument is an optional object that can be used to configure the sort functionality.
-
-The hook returns an object that contains the following properties: `items`, `term`, `setTerm`, `sortConfig`, `setSortConfig`, and `requestSort`.
-
-The `items` property is the sorted and searched array of items. The `term` property is the current search term. The `setTerm` property is a function that can be used to update the search term. The `sortConfig` property is an object that contains the current sort configuration. The `setSortConfig` property is a function that can be used to update the sort configuration. The `requestSort` property is a function that can be used to request a sort based on a specific key and direction.
-
-The `useMemo` hook is used to memoize the sorted array of items. The `Fuse` library is used to perform the search functionality. The `getNested` function is a helper function that is used to get the value of a nested property in an object.
-
-The `useSearchAndSort` hook can be used in a React component to search and sort an array of items. Here is an example of how the hook can be used:
-
-```
-import useSearchAndSort from './useSearchAndSort'
-
-const items = [
- { name: 'John', age: 25 },
- { name: 'Jane', age: 30 },
- { name: 'Bob', age: 20 },
-]
-
-function App() {
- const { items: sortedItems, term, setTerm, sortConfig, setSortConfig, requestSort } = useSearchAndSort(items)
-
- return (
- Current count: {count}
-Previous count: {prevCount}
- -
- setTerm(e.target.value)} />
-
-
-
- )
-}
-```
-
-In this example, the `useSearchAndSort` hook is used to search and sort an array of objects that contain a `name` and an `age` property. The `term` state is used to store the current search term, and the `setTerm` function is used to update the search term. The `requestSort` function is used to request a sort based on the `name` or `age` property. The `sortedItems` array is the sorted and searched array of items.
-## Questions:
- 1. What is the purpose of this code?
-
- This code defines a custom React hook called `useSearchAndSort` that takes in an array of items, search options, and sort options, and returns an object with sorted items, search term, and sort configuration.
-
-2. What external libraries does this code use?
-
- This code uses two external libraries: `@ethersproject/bignumber` for handling big numbers, and `fuse.js` for fuzzy searching.
-
-3. What is the role of the `getNested` function?
-
- The `getNested` function is a helper function that takes in an object, a path string, and a separator, and returns the value of the nested property specified by the path string. It replaces square brackets with the separator and splits the path string to traverse the object. If the property is not found, it returns `undefined`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useSortableData.md b/.autodoc/docs/markdown/core/src/hooks/useSortableData.md
deleted file mode 100644
index 68f37de5f..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useSortableData.md
+++ /dev/null
@@ -1,62 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSortableData.ts)
-
-The code defines a custom React hook called `useSortableData` that can be used to sort an array of items based on a specified configuration. The hook takes two arguments: `items`, which is the array of items to be sorted, and `config`, which is an optional object that specifies the initial sorting configuration.
-
-The `useMemo` hook is used to memoize the sorted items array, which means that the array will only be recalculated when either the `items` or `sortConfig` dependencies change.
-
-The `requestSort` function is used to update the sorting configuration based on the specified `key` and `direction`. If the `key` is already being used for sorting and the `direction` is currently ascending, the direction is changed to descending, and vice versa.
-
-The `getNested` function is a helper function that is used to retrieve nested properties from an object using a dot-separated path. For example, if the object is `{ a: { b: { c: 1 } } }` and the path is `'a.b.c'`, the function will return `1`.
-
-The sorting algorithm used by the hook is a standard comparison function that compares the values of the specified `key` property for each item in the array. If the values are `BigNumber` instances, they are compared using the `lt` and `gt` methods provided by the `@ethersproject/bignumber` library. If one of the values is `Infinity`, it is treated as the largest possible value.
-
-Overall, this hook provides a flexible and reusable way to sort arrays of items in a React application. It can be used in a variety of contexts, such as sorting a table of data or a list of items. Here is an example of how the hook can be used to sort an array of objects by their `name` property:
-
-```
-import useSortableData from './useSortableData'
-
-const items = [
- { name: 'Alice', age: 25 },
- { name: 'Bob', age: 30 },
- { name: 'Charlie', age: 20 },
-]
-
-function App() {
- const { items: sortedItems, requestSort, sortConfig } = useSortableData(items)
-
- return (
- -
- {sortedItems.map((item) => (
-
- - {item.name} - {item.age} - - ))} -
| requestSort('name')}> - Name {sortConfig && sortConfig.key === 'name' && sortConfig.direction === 'ascending' ? <>▲ : <>▼} - | -requestSort('age')}> - Age {sortConfig && sortConfig.key === 'age' && sortConfig.direction === 'ascending' ? <>▲ : <>▼} - | -
|---|---|
| {item.name} | -{item.age} | -
-
-
- )
-}
-
-export default MyComponent
-```
-
-In the example above, the `useStickyData` hook is used to maintain the state of the `name` variable even when the `MyComponent` is unmounted and remounted. The `name` variable is initialized with the value returned by the `useStickyData` hook. The `handleNameChange` function is used to update the `name` variable when the user types into the input field.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom React hook called `useStickyData` that returns a value that persists across renders.
-
-2. How does this code work?
- The `useRef` hook is used to create a mutable reference to a value. If the `value` argument passed to `useStickyData` is not `undefined`, the reference is updated with the new value. The current value of the reference is then returned.
-
-3. How can this code be used in a React application?
- This code can be imported and used as a custom hook in a React component. The returned value can be used to persist data across renders, such as form input values or user preferences.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useSushiBar.md b/.autodoc/docs/markdown/core/src/hooks/useSushiBar.md
deleted file mode 100644
index 7dc5865c2..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useSushiBar.md
+++ /dev/null
@@ -1,47 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSushiBar.ts)
-
-The code is a custom React hook called `useSushiBar` that provides functionality for interacting with the SushiBar contract. The SushiBar is a staking contract that allows users to earn rewards in the form of SUSHI tokens by staking their SLP tokens.
-
-The hook imports `Currency`, `CurrencyAmount`, and `Token` from the `@zoolabs/zdk` library, which are used to represent currency amounts and tokens. It also imports `useCallback` from React, `useSushiBarContract` from another custom hook called `useContract`, and `useTransactionAdder` from a state management library.
-
-The `useSushiBar` hook returns an object with two functions: `enter` and `leave`. These functions take a `CurrencyAmount
-
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
- - This code defines a custom React hook called `useSushiBar` that provides functions for entering and leaving a SushiBar contract using the SushiSwap protocol.
-2. What external dependencies does this code rely on?
- - This code imports several modules from the `@zoolabs/zdk` library, as well as two custom hooks called `useSushiBarContract` and `useTransactionAdder` from other files in the project.
-3. What arguments do the `enter` and `leave` functions take, and what do they return?
- - Both functions take an optional `amount` argument that is a `CurrencyAmount` object representing the amount of a `Token` to enter or leave the SushiBar with. They return a Promise that resolves to a transaction hash if successful, or an error if not.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useSushiMaker.md b/.autodoc/docs/markdown/core/src/hooks/useSushiMaker.md
deleted file mode 100644
index 16eb6bb51..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useSushiMaker.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSushiMaker.ts)
-
-The code above is a custom React hook called `useMaker` that is part of a larger project called `zoo`. This hook is designed to interact with a Maker contract and provide a `serve` function that can be used to convert one token to another.
-
-The hook imports two other custom hooks: `useMakerContract` and `useTransactionAdder`. `useMakerContract` is used to retrieve the Maker contract instance, while `useTransactionAdder` is used to add transactions to the project's global state.
-
-The `useCallback` hook is used to memoize the `serve` function and prevent unnecessary re-renders. The `serve` function takes two arguments, `token0` and `token1`, which are the tokens to be converted. The function attempts to call the `convert` method on the Maker contract instance with the provided tokens. If successful, the resulting transaction is added to the global state using the `addTransaction` function. If an error occurs, the error is returned.
-
-The `useMaker` hook returns an object with a single property, `serve`, which is the memoized `serve` function. This hook can be used in other components to interact with the Maker contract and convert tokens.
-
-Example usage:
-
-```
-import useMaker from './useMaker'
-
-const MyComponent = () => {
- const { serve } = useMaker()
-
- const handleServe = async () => {
- const token0 = 'ETH'
- const token1 = 'DAI'
- const result = await serve(token0, token1)
- console.log(result)
- }
-
- return (
-
- )
-}
-```
-
-In the example above, the `useMaker` hook is used to retrieve the `serve` function, which is then called when the button is clicked. The `token0` and `token1` arguments are hard-coded for simplicity, but could be passed in dynamically based on user input or other factors. The resulting transaction or error is logged to the console.
-## Questions:
- 1. What is the purpose of the `useMaker` hook?
- - The `useMaker` hook is used to provide a `serve` function that can be used to convert tokens using the `makerContract` and add the transaction to the state using `addTransaction`.
-
-2. What is the `useCallback` hook used for in this code?
- - The `useCallback` hook is used to memoize the `serve` function and prevent unnecessary re-renders when the `addTransaction` and `makerContract` dependencies change.
-
-3. What is the purpose of the `TODO` comment in the code?
- - The `TODO` comment suggests that there is a potential future feature to implement called `Serve all`, but it has not been implemented yet.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useSwaave.md b/.autodoc/docs/markdown/core/src/hooks/useSwaave.md
deleted file mode 100644
index f3e900dc9..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useSwaave.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSwaave.ts)
-
-The `useSushiBar` function is a custom React hook that provides functionality related to the SushiBar contract in the larger project. It imports several other custom hooks and libraries, including `useActiveWeb3React`, `useTransactionAdder`, `useSushiContract`, and `useSushiBarContract`.
-
-The hook returns an object with four properties: `allowance`, `approve`, `enter`, and `leave`.
-
-`allowance` is a string that represents the amount of SUSHI tokens that the user has approved for the SushiBar contract to spend on their behalf. The `fetchAllowance` function is called on mount and every 10 seconds thereafter to update the `allowance` state.
-
-`approve` is an asynchronous function that approves the SushiBar contract to spend an unlimited amount of SUSHI tokens on the user's behalf. It returns a transaction object that is added to the transaction history using the `addTransaction` function from the `useTransactionAdder` hook.
-
-`enter` is an asynchronous function that allows the user to deposit a specified amount of SUSHI tokens into the SushiBar contract. It returns a transaction object that is added to the transaction history using the `addTransaction` function.
-
-`leave` is an asynchronous function that allows the user to withdraw a specified amount of SUSHI tokens from the SushiBar contract. It returns a transaction object that is added to the transaction history using the `addTransaction` function.
-
-Overall, this hook provides a convenient way for other components in the project to interact with the SushiBar contract and manage SUSHI token deposits and withdrawals.
-
-Example usage:
-
-```
-import useSushiBar from './useSushiBar'
-
-function MyComponent() {
- const { allowance, approve, enter, leave } = useSushiBar()
-
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code and what problem does it solve?
-- This code defines a custom React hook called `useSushiBar` that provides functions for interacting with the SushiBar smart contract. It allows users to approve, enter, and leave the SushiBar, which is a staking contract for SUSHI tokens.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including the `react`, `@ethersproject/bignumber`, and `@ethersproject/constants` packages. It also imports several custom hooks from other files in the project, such as `useContract` and `useActiveWeb3React`.
-
-3. What improvements could be made to this code?
-- The code currently uses strings to represent token amounts, but it would be more precise to use `BigNumber` objects instead. The code includes comments indicating that this should be updated in the future. Additionally, the error handling could be improved to provide more informative error messages to users.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useSwapSlippageTollerence.md b/.autodoc/docs/markdown/core/src/hooks/useSwapSlippageTollerence.md
deleted file mode 100644
index 8b90b39f6..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useSwapSlippageTollerence.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useSwapSlippageTollerence.ts)
-
-The code imports several modules from the '@zoolabs/zdk' library and the 'react' library. It defines two constants, V2_SWAP_DEFAULT_SLIPPAGE and ONE_TENTHS_PERCENT, both of which are instances of the Percent class from the '@zoolabs/zdk' library.
-
-The code exports a function called useSwapSlippageTolerance that takes a single argument, trade, which is an instance of the Trade class from the '@zoolabs/zdk' library. The function uses the useMemo hook from the 'react' library to memoize a defaultSlippageTolerance value based on the trade argument. If trade is undefined, the defaultSlippageTolerance is set to ONE_TENTHS_PERCENT. Otherwise, it is set to V2_SWAP_DEFAULT_SLIPPAGE. Finally, the function returns the result of calling the useUserSlippageToleranceWithDefault hook from the '../state/user/hooks' module with the defaultSlippageTolerance value as an argument.
-
-The purpose of this code is to provide a hook that calculates the slippage tolerance for a given trade. Slippage tolerance is the maximum amount by which the execution price of a trade can differ from the expected price. The useSwapSlippageTolerance function takes a trade object as an argument and calculates the default slippage tolerance based on whether the trade object is defined or not. It then passes this default value to the useUserSlippageToleranceWithDefault hook, which returns the user's preferred slippage tolerance or the default value if the user has not set a preference.
-
-This code can be used in the larger project to ensure that trades are executed within the user's preferred slippage tolerance. For example, a trading interface could use this hook to calculate the slippage tolerance for a given trade and display it to the user. The user could then adjust the slippage tolerance if desired before executing the trade.
-## Questions:
- 1. What is the purpose of the `useSwapSlippageTolerance` function?
-- The `useSwapSlippageTolerance` function is used to calculate the slippage tolerance for a given trade.
-
-2. What is the difference between `V2_SWAP_DEFAULT_SLIPPAGE` and `ONE_TENTHS_PERCENT`?
-- `V2_SWAP_DEFAULT_SLIPPAGE` represents the default slippage tolerance for a V2 swap, which is 0.50%. `ONE_TENTHS_PERCENT` represents a slippage tolerance of 0.10%.
-
-3. What is the `useMemo` hook used for in this code?
-- The `useMemo` hook is used to memoize the default slippage tolerance value based on whether or not a trade is provided. This helps to optimize performance by avoiding unnecessary re-renders.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useTimestampFromBlock.md b/.autodoc/docs/markdown/core/src/hooks/useTimestampFromBlock.md
deleted file mode 100644
index da66c56e4..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useTimestampFromBlock.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useTimestampFromBlock.ts)
-
-The code above is a custom React hook called `useTimestampFromBlock` that retrieves the timestamp of a given block on the Ethereum blockchain. It utilizes the `useEffect` and `useState` hooks from the React library, as well as the `useActiveWeb3React` hook from a separate file.
-
-The `useTimestampFromBlock` hook takes in a single argument, `block`, which is a number representing the block number to retrieve the timestamp from. If `block` is undefined, the hook will return undefined.
-
-The hook first retrieves the active Web3 provider using the `useActiveWeb3React` hook. It then initializes a state variable called `timestamp` using the `useState` hook. The `timestamp` variable will hold the retrieved timestamp value.
-
-The `useEffect` hook is used to fetch the timestamp data asynchronously. It first checks if `block` is defined, and if so, it retrieves the block data using the `getBlock` method from the Web3 library. If the block data is successfully retrieved, the timestamp value is set using the `setTimestamp` method.
-
-The `useEffect` hook also checks if the `timestamp` state variable is undefined. If it is, it calls the `fetchTimestamp` function to retrieve the timestamp data.
-
-Finally, the hook returns the `timestamp` value, which will be undefined if the `block` argument is undefined or if the timestamp data has not yet been retrieved.
-
-This hook can be used in a larger project to retrieve the timestamp of a specific block on the Ethereum blockchain. For example, it could be used to display the timestamp of a particular transaction or block on a user interface. Here is an example usage of the hook:
-
-```
-import { useTimestampFromBlock } from './useTimestampFromBlock'
-
-function BlockTimestamp({ blockNumber }) {
- const timestamp = useTimestampFromBlock(blockNumber)
-
- return (
- Current allowance: {allowance}
- - - -
- Timestamp: {timestamp ? new Date(timestamp * 1000).toLocaleString() : 'Loading...'}
-
- )
-}
-```
-
-In this example, the `BlockTimestamp` component takes in a `blockNumber` prop and uses the `useTimestampFromBlock` hook to retrieve the timestamp of that block. The timestamp is then displayed in a user-friendly format using the `toLocaleString` method. If the timestamp has not yet been retrieved, the component will display a "Loading..." message.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom hook called `useTimestampFromBlock` that takes a block number as input and returns the timestamp of that block.
-
-2. What is the `useActiveWeb3React` hook used for?
- The `useActiveWeb3React` hook is used to get access to the active Web3 provider and library in the current context.
-
-3. Why is the `timestamp` state variable initialized as undefined?
- The `timestamp` state variable is initialized as undefined because it is only set after fetching the timestamp data asynchronously, and it may not always be set depending on the value of the `block` input.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useToast.md b/.autodoc/docs/markdown/core/src/hooks/useToast.md
deleted file mode 100644
index e5b2efc02..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useToast.md
+++ /dev/null
@@ -1,50 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useToast.ts)
-
-The code defines a custom hook called `useToast` that provides a set of functions to display toast notifications in a React application. The hook uses the `useMemo` hook from React to memoize the functions and avoid unnecessary re-renders. It also uses the `useDispatch` hook from the `react-redux` library to dispatch actions to the Redux store.
-
-The `useToast` hook returns an object with the following functions:
-
-- `toastError`: displays a toast notification with a red background and an error icon. It takes a `title` parameter (required) and an optional `description` parameter.
-- `toastInfo`: displays a toast notification with a blue background and an info icon. It takes a `title` parameter (required) and an optional `description` parameter.
-- `toastWarning`: displays a toast notification with a yellow background and a warning icon. It takes a `title` parameter (required) and an optional `description` parameter.
-- `push`: adds a new toast notification to the Redux store. It takes a `Toast` object as a parameter, which has the following properties:
- - `id`: a unique identifier for the toast (generated from the `title` parameter using the `kebabCase` function from the `lodash` library).
- - `type`: the type of the toast (one of `toastTypes.DANGER`, `toastTypes.INFO`, `toastTypes.SUCCESS`, or `toastTypes.WARNING`).
- - `title`: the title of the toast (required).
- - `description`: an optional description of the toast.
-- `remove`: removes a toast notification from the Redux store. It takes an `id` parameter (the same as the `id` property of the `Toast` object).
-- `clear`: removes all toast notifications from the Redux store.
-
-This hook can be used in any React component to display toast notifications. For example:
-
-```
-import React from 'react'
-import useToast from './useToast'
-
-const MyComponent = () => {
- const { toastError, toastInfo, toastWarning } = useToast()
-
- const handleClick = () => {
- toastError('Error', 'Something went wrong!')
- toastInfo('Info', 'Here is some information.')
- toastWarning('Warning', 'Be careful!')
- }
-
- return (
-
- )
-}
-
-export default MyComponent
-```
-
-When the button is clicked, three toast notifications will be displayed: one with a red background and an error icon, one with a blue background and an info icon, and one with a yellow background and a warning icon.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a custom hook called `useToast` that provides functions for displaying toast notifications using Redux.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several modules from external libraries including `lodash`, `react`, and `react-redux`.
-
-3. What types of toast notifications are available and how are they triggered?
-- This code provides functions for displaying toast notifications with different types including `toastError`, `toastInfo`, and `toastWarning`. These functions take a title and optional description as arguments and dispatch an action to add the toast to the Redux store.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useToggle.md b/.autodoc/docs/markdown/core/src/hooks/useToggle.md
deleted file mode 100644
index 0d15de8af..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useToggle.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useToggle.ts)
-
-The code above is a custom React hook called `useToggle` that allows for toggling between two states. The hook takes in an optional `initialState` parameter, which defaults to `false`. The hook returns an array with two elements: the current state and a function to toggle the state.
-
-The `useState` hook is used to create a state variable called `state` and its corresponding `setState` function. The `useCallback` hook is used to memoize the `toggle` function, which toggles the `state` variable between `true` and `false` using the `setState` function.
-
-This hook can be used in a larger project to toggle between different states, such as showing or hiding a component, changing the color of a button, or switching between different views. Here is an example of how this hook can be used in a React component:
-
-```
-import React from 'react'
-import useToggle from './useToggle'
-
-function MyComponent() {
- const [isToggled, toggle] = useToggle()
-
- return (
-
-
- {isToggled &&
- )
-}
-```
-
-In the example above, the `useToggle` hook is used to toggle the `isToggled` state between `true` and `false` when the button is clicked. The `isToggled` state is used to conditionally render the `Hello World!` message based on whether the button has been toggled or not.
-
-Overall, the `useToggle` hook provides a simple and reusable way to toggle between two states in a React component.
-## Questions:
- 1. What does this code do?
- This code exports a custom hook called `useToggle` that takes an optional boolean `initialState` and returns an array with the current state and a function to toggle the state.
-
-2. What is the purpose of the `useCallback` hook in this code?
- The `useCallback` hook is used to memoize the toggle function so that it only gets recreated if the dependencies change. In this case, the toggle function has no dependencies, so it will only be created once.
-
-3. What is the significance of the array being returned by the `useToggle` hook?
- The array returned by the `useToggle` hook contains the current state and the toggle function, respectively. This allows the consumer of the hook to easily access and manipulate the state.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useTokenAllowance.md b/.autodoc/docs/markdown/core/src/hooks/useTokenAllowance.md
deleted file mode 100644
index 3eb2fcd20..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useTokenAllowance.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useTokenAllowance.ts)
-
-The code above is a TypeScript module that exports a custom hook function called `useTokenAllowance`. This hook is used to retrieve the current allowance of a specific token for a given owner and spender. The hook is designed to be used in a React component and relies on two other custom hooks: `useSingleCallResult` and `useTokenContract`.
-
-The `useTokenAllowance` hook takes three optional parameters: `token`, `owner`, and `spender`. The `token` parameter is an instance of the `Token` class from the `@zoolabs/zdk` library, which represents a specific ERC20 token. The `owner` and `spender` parameters are strings that represent the Ethereum addresses of the token owner and spender, respectively.
-
-The hook first calls the `useTokenContract` hook to retrieve the contract instance for the specified token. It then uses the `useMemo` hook to memoize the `inputs` array, which contains the `owner` and `spender` parameters. This is done to prevent unnecessary re-renders of the component that uses the hook.
-
-The hook then calls the `useSingleCallResult` hook with the contract instance, the name of the `allowance` function, and the `inputs` array. This hook is used to retrieve the current allowance of the specified token for the given owner and spender.
-
-Finally, the hook returns a `CurrencyAmount` instance from the `@zoolabs/zdk` library that represents the allowance of the specified token. This is done using another `useMemo` hook that memoizes the `token` and `allowance` values.
-
-Overall, this hook is useful for retrieving the current allowance of a specific ERC20 token for a given owner and spender. It can be used in a React component to display the allowance or to perform other actions based on the allowance value. For example, it could be used to enable or disable a button based on whether the allowance is greater than zero.
-
-Example usage:
-
-```
-import { useTokenAllowance } from './useTokenAllowance'
-
-function MyComponent({ token, owner, spender }) {
- const allowance = useTokenAllowance(token, owner, spender)
-
- return (
- Hello World!
} -
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom hook called `useTokenAllowance` that returns the allowance of a token for a specific owner and spender.
-
-2. What external dependencies does this code rely on?
- This code relies on two external dependencies: `@zoolabs/zdk` for `CurrencyAmount` and `Token` types, and `react` for the `useMemo` hook.
-
-3. What is the expected input and output of the `useTokenAllowance` hook?
- The `useTokenAllowance` hook expects three optional parameters: `token` (of type `Token`), `owner` (of type `string`), and `spender` (of type `string`). It returns a `CurrencyAmountCurrent allowance: {allowance?.toSignificant(4)}
-
- {hasPendingTransactions ? (
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `useTransactionStatus` hook?
-- The `useTransactionStatus` hook is used to determine if there are any pending transactions in the application.
-
-2. What is the significance of the `newTransactionsFirst` function?
-- The `newTransactionsFirst` function is used to sort transactions in descending order based on their `addedTime` property, so that the latest transaction comes first.
-
-3. What is the role of the `useMemo` hook in this code?
-- The `useMemo` hook is used to memoize the sorted recent transactions array, so that it is only recalculated when the `allTransactions` dependency changes.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useUSDCPrice.md b/.autodoc/docs/markdown/core/src/hooks/useUSDCPrice.md
deleted file mode 100644
index c08b3e1b3..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useUSDCPrice.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useUSDCPrice.ts)
-
-The code is a module that exports two React hooks: `useUSDCPrice` and `useUSDCValue`. The purpose of these hooks is to calculate the price of a given currency in USDC and the value of a given currency amount in USDC, respectively.
-
-The `useUSDCPrice` hook takes a `currency` parameter and returns a `Price` object representing the price of the input currency in USDC. The function first retrieves the current chain ID using the `useActiveWeb3React` hook. It then looks up the corresponding `STABLECOIN_AMOUNT_OUT` value for the current chain ID, which is a large amount of USDC used to filter low liquidity pairs. The function then calls the `useV2TradeExactOut` hook to get the best trade route for swapping the input currency for USDC. If a valid trade route is found, the function returns a `Price` object representing the price of the input currency in USDC based on the trade route. If the input currency is USDC, the function returns a `Price` object representing a price of 1 USDC. Otherwise, the function returns `undefined`.
-
-The `useUSDCValue` hook takes a `currencyAmount` parameter and returns the value of the input currency amount in USDC. The function first calls the `useUSDCPrice` hook to get the current price of the input currency in USDC. It then uses the `quote` method of the `Price` object to calculate the value of the input currency amount in USDC. If either the price or the currency amount is undefined, the function returns `null`.
-
-These hooks can be used in a larger project to display the price and value of various currencies in USDC. For example, a trading interface could use these hooks to display the current price of a selected currency in USDC and the estimated value of a user's portfolio in USDC.
-## Questions:
- 1. What is the purpose of the `useUSDCPrice` function?
-- The `useUSDCPrice` function returns the price in USDC of a given input currency.
-
-2. What is the `STABLECOIN_AMOUNT_OUT` object used for?
-- The `STABLECOIN_AMOUNT_OUT` object contains stablecoin amounts used when calculating spot price for a given currency, with the amount being large enough to filter low liquidity pairs.
-
-3. What is the `useUSDCValue` function used for?
-- The `useUSDCValue` function takes a `CurrencyAmount` and returns its value in USDC based on the current USDC price of the currency.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useV2Pairs.md b/.autodoc/docs/markdown/core/src/hooks/useV2Pairs.md
deleted file mode 100644
index bff298f89..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useV2Pairs.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useV2Pairs.ts)
-
-The code is a module that provides functions for interacting with Uniswap V2 pairs. It exports two functions, `useV2Pairs` and `useV2Pair`, which are React hooks that can be used in a React component to fetch and display information about Uniswap V2 pairs.
-
-The `useV2Pairs` hook takes an array of pairs of currencies and returns an array of pairs of `PairState` and `Pair` objects. The `PairState` enum represents the state of the pair, which can be one of four values: `LOADING`, `NOT_EXISTS`, `EXISTS`, or `INVALID`. The `Pair` object represents a Uniswap V2 pair and contains information about the reserves of the two tokens in the pair.
-
-The `useV2Pair` hook is a convenience function that takes two currency objects and returns a single `PairState` and `Pair` object.
-
-The `useV2Pairs` hook works by first converting the array of currency pairs into an array of token pairs. It then uses the `computePairAddress` function from the `@zoolabs/zdk` library to compute the address of the Uniswap V2 pair for each token pair. It then uses the `useMultipleContractSingleData` hook from the `multicall` module to fetch the reserves of each pair from the Uniswap V2 pair contract. Finally, it maps the results to an array of `PairState` and `Pair` objects.
-
-The `useV2Pair` hook is a simple wrapper around the `useV2Pairs` hook that takes two currency objects and passes them as an array to `useV2Pairs`. It then returns the first element of the resulting array.
-
-This module can be used in a React component to display information about Uniswap V2 pairs. For example, a component could use the `useV2Pair` hook to fetch and display the reserves of a specific Uniswap V2 pair. The `PairState` enum can be used to display a loading spinner, an error message, or the pair information depending on the state of the pair.
-## Questions:
- 1. What is the purpose of the `useV2Pairs` function?
-- The `useV2Pairs` function takes an array of currency pairs and returns an array of pairs with their state (loading, not exists, exists, or invalid).
-
-2. What is the purpose of the `useV2Pair` function?
-- The `useV2Pair` function takes two currency parameters and returns a single pair with its state (loading, not exists, exists, or invalid).
-
-3. What is the significance of the `PairState` enum?
-- The `PairState` enum is used to indicate the state of a pair (loading, not exists, exists, or invalid) and is returned by the `useV2Pairs` and `useV2Pair` functions.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useV2Trades.md b/.autodoc/docs/markdown/core/src/hooks/useV2Trades.md
deleted file mode 100644
index 6e1d53a8e..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useV2Trades.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useV2Trades.ts)
-
-The code in this file provides functions for finding the best trades for exchanging tokens in a decentralized exchange. The functions use the `@zoolabs/zdk` library to perform the trades.
-
-The `useAllCommonPairs` function takes two optional currency parameters and returns an array of valid pairs that can be used for trading. It uses the `useAllCurrencyCombinations` function to get all possible currency combinations and then filters out invalid and duplicated pairs. The resulting array of pairs is memoized to improve performance.
-
-The `useV2TradeExactIn` function takes a `currencyAmountIn` parameter and a `currencyOut` parameter, and returns the best trade for exchanging the exact amount of `currencyAmountIn` to `currencyOut`. It uses the `useAllCommonPairs` function to get the valid pairs and then searches for the best trade using the `Trade.bestTradeExactIn` method from the `@zoolabs/zdk` library. The function can take an optional `maxHops` parameter to limit the number of hops in the trade. If `maxHops` is greater than 1, the function searches for the best trade with varying hops and returns the best one. The function returns `null` if there are no valid pairs or if the trade cannot be executed.
-
-The `useV2TradeExactOut` function is similar to `useV2TradeExactIn`, but it takes a `currencyIn` parameter and a `currencyAmountOut` parameter instead. It returns the best trade for exchanging `currencyIn` to the exact amount of `currencyAmountOut`. It also takes an optional `maxHops` parameter to limit the number of hops in the trade.
-
-Both `useV2TradeExactIn` and `useV2TradeExactOut` use the `isTradeBetter` function from the `../functions/trade` module to compare trades and find the best one. The `BETTER_TRADE_LESS_HOPS_THRESHOLD` constant from the `../constants` module is used as a threshold for determining if a trade is better than another.
-
-These functions can be used in a larger project that involves trading tokens in a decentralized exchange. They provide a convenient way to find the best trades for exchanging tokens and can be used to build more complex trading strategies. For example, a trading bot could use these functions to find the best trades and execute them automatically.
-
-Example usage:
-
-```
-import { useV2TradeExactIn } from './useV2Trades'
-
-const currencyAmountIn = new CurrencyAmount(Currency.ETH, '1')
-const currencyOut = Currency.USDC
-
-const bestTrade = useV2TradeExactIn(currencyAmountIn, currencyOut)
-
-console.log(bestTrade)
-// Output: TradeThere are pending transactions. Please wait...
- ) : ( - - )} -
-
- )
-}
-```
-## Questions:
- 1. What does the `useWindowSize` function do?
-- The `useWindowSize` function is a custom React hook that returns the current size of the browser window as an object with `width` and `height` properties.
-
-2. What is the purpose of the `getSize` function?
-- The `getSize` function returns an object with the current `width` and `height` of the browser window, or `undefined` if the code is not running in a browser environment.
-
-3. Why is the `isClient` variable used in this code?
-- The `isClient` variable is used to check if the code is running in a browser environment by checking if the `window` object exists. This is necessary because the `window` object is not available in server-side rendering or other non-browser environments.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useWrapCallback.md b/.autodoc/docs/markdown/core/src/hooks/useWrapCallback.md
deleted file mode 100644
index 90cd81754..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useWrapCallback.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useWrapCallback.ts)
-
-The `useWrapCallback` function in the `zoo` project is responsible for returning a wrap callback given the selected input and output currency. It is a React hook that takes in three parameters: `inputCurrency`, `outputCurrency`, and `typedValue`. It returns an object with three properties: `wrapType`, `execute`, and `inputError`.
-
-The `useWrapCallback` function imports several modules from the `zdk` and `wallet` directories. It also imports the `useMemo` hook from React, which is used to memoize the result of the function.
-
-The `useWrapCallback` function first retrieves the `chainId` and `account` from the `useActiveWeb3React` hook. It then retrieves the `wethContract` and `balance` using the `useWETH9Contract` and `useCurrencyBalance` hooks, respectively. The `inputAmount` is calculated using the `tryParseAmount` function from the `parse` module.
-
-The function then returns a memoized object based on the input and output currencies. If the `wethContract`, `chainId`, `inputCurrency`, or `outputCurrency` is undefined, or if the `chainId` is `ChainId.CELO`, the function returns an object with `wrapType` set to `WrapType.NOT_APPLICABLE`. If the input currency is native and the output currency is WETH, the function returns an object with `wrapType` set to `WrapType.WRAP`. If the input currency is WETH and the output currency is native, the function returns an object with `wrapType` set to `WrapType.UNWRAP`. Otherwise, the function returns an object with `wrapType` set to `WrapType.NOT_APPLICABLE`.
-
-If `wrapType` is `WrapType.WRAP`, the `execute` property is set to an async function that wraps the input amount of native currency to WETH. If `wrapType` is `WrapType.UNWRAP`, the `execute` property is set to an async function that unwraps the input amount of WETH to native currency. If `wrapType` is `WrapType.NOT_APPLICABLE`, the `execute` property is undefined.
-
-If there is insufficient balance to execute the wrap or unwrap, the `inputError` property is set to an error message. Otherwise, the `inputError` property is undefined.
-
-This function is used in the larger project to provide a wrap callback for the selected input and output currencies. It is used in conjunction with other functions and components to enable users to wrap and unwrap their native currency to and from WETH. For example, it may be used in a form where users can enter the amount of native currency they want to wrap or unwrap, and then click a button to execute the transaction.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a function called `useWrapCallback` that returns an object with information about whether a wrap or unwrap operation can be executed based on the selected input and output currencies, as well as the user input value.
-
-2. What external dependencies does this code have?
-- This code imports several functions and hooks from other files in the `zoo` project, as well as two constants from an external library called `@zoolabs/zdk`.
-
-3. What is the expected input and output of the `useWrapCallback` function?
-- The `useWrapCallback` function takes in three optional parameters: `inputCurrency`, `outputCurrency`, and `typedValue`. It returns an object with three properties: `wrapType`, `execute`, and `inputError`. The `wrapType` property is an enum that indicates whether the operation is a wrap, unwrap, or not applicable. The `execute` property is a function that executes the wrap or unwrap operation, if possible. The `inputError` property is a string that describes any errors with the user input value.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/useXSushiPerSushi.md b/.autodoc/docs/markdown/core/src/hooks/useXSushiPerSushi.md
deleted file mode 100644
index f879cc502..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/useXSushiPerSushi.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/useXSushiPerSushi.ts)
-
-This code is a module that exports a function called `useSushiPerXSushi`. The function uses the `useSWR` hook from the `swr` library to fetch data from a GraphQL API endpoint. The API endpoint is specified in the `fetcher` function, which uses the `request` function from the `graphql-request` library to make a request to the endpoint. The query that is sent to the endpoint is defined in the `QUERY` constant.
-
-The purpose of this code is to retrieve the ratio of XSushi to Sushi tokens from the GraphQL API endpoint and return it as a floating-point number. The ratio is obtained from the `ratio` field of the `bar` object, which is returned by the GraphQL query. The `parse` parameter is used to determine whether the ratio should be returned as a string or a floating-point number. If `parse` is `true`, the ratio is parsed as a floating-point number using the `parseFloat` function.
-
-This code can be used in the larger project to retrieve the current ratio of XSushi to Sushi tokens, which is an important metric for the SushiSwap decentralized exchange. The `useSushiPerXSushi` function can be imported and used in other modules to obtain the ratio and use it for various purposes, such as calculating the price of Sushi tokens in terms of XSushi tokens. Here is an example of how the function can be used:
-
-```
-import useSushiPerXSushi from 'zoo'
-
-function MyComponent() {
- const ratio = useSushiPerXSushi()
- const price = 100 * ratio // calculate price of 100 Sushi tokens in XSushi tokens
- return Window width: {width}
-Window height: {height}
-Current XSushi:Sushi ratio is {ratio}. Price of 100 Sushi tokens is {price} XSushi tokens.
-}
-```
-## Questions:
- 1. What is the purpose of the `graphql-request` and `swr` libraries being imported?
-- The `graphql-request` library is used to make a GraphQL API request to retrieve data, while the `swr` library is used for data fetching and caching.
-
-2. What is the `QUERY` constant and what data is being requested?
-- The `QUERY` constant is a GraphQL query string that requests the `ratio` field of the `bar` object with a specific `id` value.
-
-3. What does the `useSushiPerXSushi` function do and what does the `parse` parameter do?
-- The `useSushiPerXSushi` function uses the `useSWR` hook to fetch data using the `QUERY` constant and `fetcher` function. It then returns the `ratio` value of the `bar` object. The `parse` parameter is optional and if set to `true`, it will parse the `ratio` value as a float before returning it.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/hooks/webReact.md b/.autodoc/docs/markdown/core/src/hooks/webReact.md
deleted file mode 100644
index 7d29569b1..000000000
--- a/.autodoc/docs/markdown/core/src/hooks/webReact.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/hooks/webReact.ts)
-
-The code above is a module that exports two functions: `getLibrary` and `signMessage`. The purpose of this module is to provide utility functions for interacting with the Ethereum blockchain using the `ethers.js` library.
-
-The `getLibrary` function takes a provider object as an argument and returns a `Web3Provider` instance. The `Web3Provider` is a class provided by the `ethers.js` library that wraps a `JsonRpcProvider` and provides additional functionality for interacting with the Ethereum blockchain. The `pollingInterval` property of the `Web3Provider` instance is set to 12000 milliseconds (12 seconds) to control how often the provider should poll the blockchain for updates. This function can be used to create a `Web3Provider` instance that can be used to interact with the Ethereum blockchain.
-
-The `signMessage` function takes a message, an account address, and a wallet object as arguments and returns a signature. The `getSigner` function is imported from another module and is used to get a signer object from the wallet object. The `signMessage` method of the signer object is then called with the message as an argument to generate a signature. This function can be used to sign a message using a wallet object and an account address.
-
-There is also a commented out function called `handleSignMessage` that takes an object with a `message` and `library` property as an argument. This function is not used in the current implementation and is likely a work in progress or a remnant of previous development.
-
-Overall, this module provides useful utility functions for interacting with the Ethereum blockchain using the `ethers.js` library. The `getLibrary` function can be used to create a `Web3Provider` instance, and the `signMessage` function can be used to sign messages using a wallet object and an account address.
-## Questions:
- 1. What external libraries or dependencies does this code use?
-- This code imports `BaseProvider`, `ExternalProvider`, `JsonRpcFetchFunc`, and `Web3Provider` from the `@ethersproject/providers` library, and `getSigner` from a custom `functions/contract` module.
-
-2. What does the `getLibrary` function do?
-- The `getLibrary` function takes an `ExternalProvider` or `JsonRpcFetchFunc` as input, creates a new `Web3Provider` instance with the input as its provider, sets the polling interval to 12 seconds, and returns the new `Web3Provider` instance.
-
-3. What does the `signMessage` function do?
-- The `signMessage` function takes a `message` string, an `account` string, and a `BaseProvider`, `Web3Provider`, or any other object as input, and uses the `getSigner` function to sign the message with the specified account and wallet. It then returns the resulting signature.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/ipfs/localhost.md b/.autodoc/docs/markdown/core/src/ipfs/localhost.md
deleted file mode 100644
index 046cf9550..000000000
--- a/.autodoc/docs/markdown/core/src/ipfs/localhost.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/ipfs/localhost.json)
-
-The code above is a JSON object that contains information about various files related to the zoo project. Each file has a name, URL, IPFS, and hash. The purpose of this code is to provide a way to access these files from within the project.
-
-The files are all related to the zoo project, and they are all media files. There are three images and three videos. The images are named "validator.jpg", "wallet.jpg", and "atm.jpg". The videos are named "validator.mp4", "wallet.mp4", and "atm.mp4".
-
-The URLs and IPFS addresses in the code can be used to access the files from within the project. For example, if the project has a web interface, the URLs could be used to display the images and videos on the website. The hash values can be used to verify the integrity of the files.
-
-Here is an example of how this code could be used in the larger project:
-
-```javascript
-// Access the validator image URL
-const validatorImageUrl = zoo["validator.jpg"].url;
-
-// Display the validator image on the website
-const validatorImage = document.createElement("img");
-validatorImage.src = validatorImageUrl;
-document.body.appendChild(validatorImage);
-
-// Verify the hash of the validator image
-const validatorImageHash = zoo["validator.jpg"].hash;
-verifyHash(validatorImageUrl, validatorImageHash);
-```
-
-In this example, we access the URL of the validator image from the `zoo` object. We then create an `img` element and set its `src` attribute to the URL. Finally, we append the image to the `body` of the document. We also verify the hash of the image using the `verifyHash` function.
-
-Overall, this code provides a way to access and verify media files related to the zoo project. It can be used to display images and videos on the project's website, or to verify the integrity of the files.
-## Questions:
- 1. What is the purpose of this code?
- - This code defines a set of files related to a project called "zoo", including images and videos, along with their URLs and IPFS hashes.
-
-2. What is the significance of the "__type" key in each object?
- - The "__type" key indicates that each object is of type "File", which is likely a custom data type used within the project.
-
-3. What is the difference between the "url" and "ipfs" keys for each file?
- - The "url" key provides a direct URL to access the file, while the "ipfs" key provides a URL to access the file via the InterPlanetary File System (IPFS), which is a decentralized file storage system.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/layouts/Dao/index.md b/.autodoc/docs/markdown/core/src/layouts/Dao/index.md
deleted file mode 100644
index ff0c30e70..000000000
--- a/.autodoc/docs/markdown/core/src/layouts/Dao/index.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/layouts/Dao/index.tsx)
-
-The code above is a React component called `DaoLayout` that serves as a layout for a specific page in the larger project. It imports several components from the project's `components` directory, including `Banner`, `Footer`, `Header`, `Main`, and `Popups`. It also imports two functions from the project's `hooks` and `state/network/actions` directories, respectively.
-
-The `DaoLayout` component takes two props: `children` and `banner`. The `children` prop represents the content that will be rendered within the `Main` component, while the `banner` prop represents an optional banner that can be passed to the `Header` component.
-
-The component uses the `useActiveWeb3React` hook to get access to the `library` object, which is used to update the gas price for the current network. This is done by calling the `updateGasPrice` function from the `state/network/actions` directory with the `library` object as an argument. This function updates the gas price in the project's Redux store.
-
-The `DaoLayout` component returns a JSX element that contains the imported components and the `children` prop. The `Header` component is passed the `transparent` prop with a value of `true` and the `banner` prop, if it exists. The `Main` component is passed the `isModal` prop with a value of `false` and the `bgColor` prop with a value of `dao-bg`. The `Popups` and `Footer` components are also included.
-
-This component can be used as a layout for any page in the project that requires a header, main content area, popups, and footer. It also updates the gas price for the current network, which is important for any transactions that may occur on the page. An example usage of this component would be:
-
-```
-import DaoLayout from "./path/to/DaoLayout";
-
-const MyPage = () => {
- return (
- Welcome to My Page
-This is some content for my page.
-Welcome to the Zoo!
-Explore our collection of exotic animals.
- - ); -}; - -export default HomePage; -``` -## Questions: - 1. What is the purpose of the `Layout` component? -- The `Layout` component is responsible for rendering the main layout of the application, including the header, main content, popups, and footer. - -2. What is the significance of the `useEffect` hook in this code? -- The `useEffect` hook is used to update the gas price in the network state whenever the `library` object changes. - -3. What is the purpose of the `bg` prop in the `Layout` component? -- The `bg` prop is used to set the background color of the main content area, with a default value of black. \ No newline at end of file diff --git a/.autodoc/docs/markdown/core/src/layouts/Drop/index.md b/.autodoc/docs/markdown/core/src/layouts/Drop/index.md deleted file mode 100644 index c08d02af6..000000000 --- a/.autodoc/docs/markdown/core/src/layouts/Drop/index.md +++ /dev/null @@ -1,33 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/core/src/layouts/Drop/index.tsx) - -This code defines a React component called `DropLayout` that is used to render a layout for a specific page in the larger project. The component imports several other components from the project's `components` directory, including `Footer`, `Header`, `Main`, and `Popups`. It also imports a custom hook called `useActiveWeb3React` and an action creator function called `updateGasPrice` from the project's `hooks` and `state/network/actions` directories, respectively. - -The `DropLayout` component takes three props: `children`, `banner`, and `isMarginTop`. The `children` prop is used to render any child components that are passed to `DropLayout`. The `banner` prop is an optional prop that can be used to specify a banner image for the page. The `isMarginTop` prop is a boolean that determines whether or not to add a top margin to the `Main` component. - -The `useEffect` hook is used to call the `updateGasPrice` function whenever the `library` object (which is obtained from the `useActiveWeb3React` hook) changes. This function is responsible for updating the gas price used for transactions on the Ethereum network. - -The `return` statement renders the layout for the page. It consists of a `div` element that contains the `Header`, `Main`, `Popups`, and `Footer` components. The `Header` component is rendered with a transparent background and the `banner` prop (if provided). The `Main` component is rendered with a background color of "bg-drop" and the `children` prop. The `Popups` component is used to render any popups that may appear on the page. Finally, the `Footer` component is rendered at the bottom of the page. - -This component can be used in the larger project to provide a consistent layout for pages that require a banner image, a specific background color, and a fixed set of components (i.e. `Header`, `Main`, `Popups`, and `Footer`). Developers can use this component by importing it and passing any necessary props to it. For example: - -``` -import DropLayout from "./DropLayout"; - -function MyPage() { - return ( -Welcome to My Page
-This is some content for my page.
-Welcome to my page!
-This is some content.
- - ); -} -``` -## Questions: - 1. What is the purpose of the `Layout` component? -- The `Layout` component is responsible for rendering the overall layout of the application, including the header, main content, and footer. - -2. What are the optional props that can be passed to the `Layout` component? -- The `Layout` component accepts three optional props: `left`, `children`, and `right`. `left` and `right` are JSX elements that will be rendered in the left and right columns of the layout, respectively. `children` is a React child or an array of React children that will be rendered in the main content area. - -3. What is the purpose of the `useRouter` hook from the `next/router` module? -- The `useRouter` hook is used to access the Next.js router object, which provides information about the current route and allows for programmatic navigation. In this code, it is used to determine the current route and apply appropriate styling to the navigation links. \ No newline at end of file diff --git a/.autodoc/docs/markdown/core/src/layouts/Miso/index.md b/.autodoc/docs/markdown/core/src/layouts/Miso/index.md deleted file mode 100644 index 29bcae264..000000000 --- a/.autodoc/docs/markdown/core/src/layouts/Miso/index.md +++ /dev/null @@ -1,37 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/core/src/layouts/Miso/index.tsx) - -The code above defines a React component called `Layout` that is used to render the layout of a web page. The component imports three other components: `Footer`, `Header`, and `Popups`. These components are located in the `components` directory of the `zoo` project, which suggests that this `Layout` component is part of a larger web application. - -The `Layout` component takes a single prop called `children`, which is used to render the content of the web page. The `children` prop is enclosed in empty tags (`<>...`) to allow for the rendering of multiple child components. - -The `Layout` component returns a `div` element that has a class of `z-0` and is styled to be a flex container with a column direction (`flex-col`). The `div` element takes up the full width and height of the screen and has both horizontal and vertical scrolling enabled. - -Inside the `div` element, there are four child components: `Header`, `main`, `Popups`, and `Footer`. The `Header` component is rendered with a prop called `banner` set to `false`, which suggests that the `Header` component may have a banner that can be toggled on or off. The `main` component is a flex container that takes up the remaining space in the `div` element and is styled to grow to the maximum height of its content. The `Popups` component is used to render any popups that may appear on the web page, and the `Footer` component is used to render the footer of the web page. - -Overall, the `Layout` component is a reusable component that can be used to render the layout of any web page in the `zoo` project. It provides a consistent layout across all pages and allows for the easy rendering of child components. Here is an example of how the `Layout` component can be used: - -``` -import Layout from "./Layout"; -import HomePage from "./HomePage"; - -const App = () => { - return ( -This is the content of my modal window.
-
- {isEditing ? (
-
- )
-}
-
-export default BidItemContainer
-```
-
-In this example, the `BidItemContainer` component renders either the `BidItem` component or the `BidEditable` component depending on whether the user is editing the bid item or not. When the user clicks on the bid item, the `handleEditClick` function is called, which sets the `isEditing` state to `true`. This causes the `BidEditable` component to be rendered instead of the `BidItem` component.
-
-Overall, the `BidEditable` component provides a way for users to edit bid items in the larger project.
-## Questions:
- 1. What is the purpose of the `GraphBid` type and where is it defined?
-- The `GraphBid` type is imported from the `types` module, but it's unclear what properties or methods it contains or what its purpose is within the `BidEditable` component.
-
-2. What is the `BidItem` component and how is it used within `BidEditable`?
-- It's unclear what the `BidItem` component does or how it's implemented, but it's being passed a `bid` prop from `BidEditable`.
-
-3. What is the expected output or behavior of the `BidEditable` component?
-- It's unclear what the purpose of the `BidEditable` component is or how it's intended to be used within the larger `zoo` project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/BidItem.md b/.autodoc/docs/markdown/core/src/marketplace/BidItem.md
deleted file mode 100644
index 887a1ffaf..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/BidItem.md
+++ /dev/null
@@ -1,46 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/BidItem.tsx)
-
-The `BidItem` component is a React component that renders a single bid item. It takes in a `bid` object, which contains information about the bid, such as the bidder, the amount, and the currency used. It also takes in some optional props, such as `showToken`, `summary`, and `onClick`, which determine how the bid item is displayed and what actions can be taken on it.
-
-The component first imports various dependencies, such as icons, tokens, and hooks, that are used throughout the component. It then defines the `BidProps` type, which specifies the shape of the `bid` object and the optional props.
-
-The `BidItem` component then defines its state using the `useState` hook. It keeps track of the formatted amount of the bid and the currency token used. It also uses the `useEffect` hook to update the currency token when the `chainId` changes.
-
-The component then renders the bid item using JSX. It displays information about the bid, such as the bidder, the bid amount, and the currency used. It also displays a token ID if `showToken` is true. Additionally, it displays a time ago timestamp and an eye icon if `onClick` is defined.
-
-Overall, the `BidItem` component is a reusable component that can be used to display a single bid item in a larger project. It takes in a `bid` object and optional props to customize its display and functionality. It uses various dependencies and hooks to manage its state and render the bid item. Here is an example usage of the `BidItem` component:
-
-```jsx
-import BidItem from './BidItem'
-
-const bid = {
- bidder: {
- id: '0x1234567890123456789012345678901234567890'
- },
- amount: '1000000000000000000',
- currency: {
- id: '0x0000000000000000000000000000000000000000'
- },
- media: {
- contentURI: 'ipfs://Qm...'
- },
- createdAtTimestamp: '1620000000'
-}
-
-const MyComponent = () => {
- return (
-
-
- )}
-
- console.log(bid)} />
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `BidItem` component?
-- The `BidItem` component is used to display information about a bid, including the bidder's address, bid amount, and currency token.
-
-2. What external libraries are being used in this file?
-- The file is importing several external libraries, including `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, and `react-timeago`.
-
-3. What is the purpose of the `useEffect` hook in this file?
-- The `useEffect` hook is used to update the `currencyToken` and `formattedAmount` state variables when the `chainId` changes. This is done by calling the `getCurrencyTokenLowerCase` and `formatCurrencyAmountWithCommas` functions, respectively.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/BidList.md b/.autodoc/docs/markdown/core/src/marketplace/BidList.md
deleted file mode 100644
index dae02b8eb..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/BidList.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/BidList.tsx)
-
-The code above is a React component called `BidList` that fetches a list of bids from a GraphQL API and renders them as a list of `BidItem` components. The component takes in several props, including `where`, `empty`, `showToken`, and `onClick`.
-
-The `where` prop is an object that can contain filters for the bids to fetch. The `empty` prop is a JSX element to render if there are no bids to display. The `showToken` prop is a boolean that determines whether to display the token associated with each bid. The `onClick` prop is a function to call when a bid is clicked.
-
-The component uses the `useQuery` hook from the `@apollo/client` library to fetch the bids from the GraphQL API. The GraphQL query is defined using the `gql` template literal tag and is stored in the `GET_BIDS` constant. The query fetches the `id`, `amount`, `createdAtTimestamp`, `currency`, `bidder`, and `media` fields for each bid.
-
-The `useQuery` hook takes in the `GET_BIDS` query and an object of variables to pass to the query. The `where` object is spread into the variables object and the `bidder` and `media` fields are converted to lowercase. The `fetchPolicy` option is set to `'no-cache'` to ensure that the query is always sent to the server. The `pollInterval` option is set to `10000` to refetch the bids every 10 seconds.
-
-The `loading`, `error`, and `data` variables are destructured from the result of the `useQuery` hook. The `bids` variable is set to the `data.bids` array or an empty array if `data` is falsy.
-
-The component conditionally renders the `BidItem` components for each bid in the `bids` array. If there are no bids, it renders the `empty` prop or a default message. The `getUsdAmount` function is passed to each `BidItem` component to convert the bid amount to USD if necessary.
-
-This component can be used in a larger project to display a list of bids for a particular media asset or bidder. The `where` prop can be used to filter the bids by media or bidder ID. The `showToken` prop can be used to display the token associated with each bid. The `onClick` prop can be used to handle click events on each bid.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `BidList` that queries a GraphQL API for a list of bids and renders them using the `BidItem` component.
-
-2. What is the structure of the GraphQL query being used?
-- The query is called `GetBids` and takes two variables: `where` and `first`. It returns a list of bids with various fields such as `id`, `amount`, `createdAtTimestamp`, and nested objects like `currency`, `bidder`, and `media`.
-
-3. What is the purpose of the `usePrice` hook being imported?
-- The `usePrice` hook is used to get the USD value of a given token. It is likely used to display the USD value of bids in the `BidList` component.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/BidModal.md b/.autodoc/docs/markdown/core/src/marketplace/BidModal.md
deleted file mode 100644
index 29ea7f21a..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/BidModal.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/BidModal.tsx)
-
-The `BidModal` component is a React component that renders a modal window for displaying information about a bid on a media asset. The component takes three props: `bid`, `isOpen`, and `onClose`. The `bid` prop is an object that contains information about the bid, including the bidder, the owner of the media asset, the currency used for the bid, and the ID of the media asset. The `isOpen` prop is a boolean that determines whether the modal window is open or closed. The `onClose` prop is a function that is called when the modal window is closed.
-
-The component imports several other components and functions from other files in the project. These include `Modal`, `ModalHeader`, `useActiveWeb3React`, `getContent`, `usePrice`, `formatCurrencyAmountWithCommas`, `isSameAddress`, `shortenAddress`, `RemoveBidButton`, `useContract`, `BidItem`, and `AcceptBidButton`.
-
-The component uses the `useActiveWeb3React` hook to get the current user's account address. It also uses the `useContract` hook to get a reference to the `Market` contract. The component then uses the `useEffect` hook to call the `bidForTokenBidder` function on the `Market` contract to check whether the bid is offline. If the bid is offline, the component sets the `offline` state to `true`.
-
-The component then uses several callback functions to determine whether the current user is the bidder or the owner of the media asset. If the current user is the bidder, the component displays a message indicating that the bidder's address will be refunded if the bid is removed. If the current user is the owner, the component displays buttons for removing or accepting the bid.
-
-The component returns a `Modal` component that contains a `ModalHeader` component, a `BidItem` component, and buttons for removing or accepting the bid. The `Modal` component is a reusable component that provides a modal window for displaying content. The `ModalHeader` component is a reusable component that provides a header for the modal window. The `BidItem` component is a custom component that displays information about the bid, including the bidder, the amount of the bid, and the currency used for the bid. The buttons for removing or accepting the bid are custom components that call functions on the `Market` contract to remove or accept the bid.
-
-Overall, the `BidModal` component provides a user interface for managing bids on media assets in the `zoo` project. It uses several reusable components and custom functions to display information about the bid and allow the user to remove or accept the bid.
-## Questions:
- 1. What is the purpose of this code?
-- This code is for a BidModal component that displays bid information and allows the user to remove or accept a bid.
-
-2. What external dependencies does this code have?
-- This code imports several components and functions from other files, including Modal, ModalHeader, useActiveWeb3React, getContent, usePrice, isSameAddress, shortenAddress, RemoveBidButton, AcceptBidButton, and BidItem.
-
-3. What is the significance of the "offline" state variable?
-- The "offline" state variable is used to determine whether a bid was made offline (i.e. not through the app) and display a message to the bidder if the bid is removed. It is set based on the result of a call to the "bidForTokenBidder" function from the "Market" contract.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/BidsModal/index.md b/.autodoc/docs/markdown/core/src/marketplace/BidsModal/index.md
deleted file mode 100644
index 7d76876c2..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/BidsModal/index.md
+++ /dev/null
@@ -1,50 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/BidsModal/index.tsx)
-
-The code defines a React component called `BidsModal` that renders a modal window for editing auction bids. The component takes a single prop called `CloseEvent`, which is a function that is called when the user clicks the close button on the modal.
-
-The modal window is a fixed-size container with a black background and white text. It is positioned in the center of the screen using absolute positioning. The window contains several input fields for editing the auction details, including the current bid, start date, and end date.
-
-The `useState` hook is used to manage the state of the modal window. The `isOpen` state variable is initialized to `false`, indicating that the modal is initially closed.
-
-When the component is rendered, it returns the JSX code that defines the modal window. The `CloseEvent` function is passed to the close button's `onClick` event handler, so that it is called when the user clicks the button.
-
-The `BidsModal` component can be used in a larger project to allow users to edit auction details. For example, it could be used in an online auction platform to allow sellers to update the start and end dates of their auctions, or to adjust the current bid price.
-
-Here is an example of how the `BidsModal` component could be used in a larger React application:
-
-```jsx
-import React, { useState } from 'react';
-import BidsModal from './BidsModal';
-
-function AuctionDetails() {
- const [showModal, setShowModal] = useState(false);
-
- function handleEditClick() {
- setShowModal(true);
- }
-
- function handleCloseModal() {
- setShowModal(false);
- }
-
- return (
-
-
- );
-}
-```
-
-In this example, the `AuctionDetails` component renders a button that opens the `BidsModal` when clicked. The `showModal` state variable is used to determine whether the modal should be displayed. When the user clicks the close button on the modal, the `handleCloseModal` function is called, which sets `showModal` to `false` and hides the modal.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `BidsModal` that renders a modal for editing auction details.
-
-2. What props does the `BidsModal` component accept?
-- The `BidsModal` component accepts a prop called `CloseEvent`, which is a function that is called when the user clicks the "X" button to close the modal.
-
-3. What are some of the UI elements that are rendered by the `BidsModal` component?
-- The `BidsModal` component renders several UI elements, including a header with a title and a close button, input fields for the current bid and start/end dates, and a "Save Changes" button.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/Cards/BidsCard.md b/.autodoc/docs/markdown/core/src/marketplace/Cards/BidsCard.md
deleted file mode 100644
index 971909617..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/Cards/BidsCard.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Cards/BidsCard.tsx)
-
-The `BidsCard` component is a React component that renders a card displaying information about an auction. The component takes in several props, including `glb`, `usdz`, `itemId`, `ownerAdd`, `CurrentBid`, `StartingBid`, `greenNum`, `AuctionTime`, `typeOfNft`, and `bid`.
-
-The component uses the `useRouter` hook from the `next/router` module to handle navigation to other pages in the application. It also uses two custom hooks, `useEditAuctionModalToggle` and `useIncreaseBidModalToggle`, from the `state/application/hooks` module to toggle the visibility of modals for editing auctions and increasing bids, respectively.
-
-The component renders two columns of information. The left column displays a 3D model of the item being auctioned using the `ModelViewer` component from the `../../components/ModelViewer` module. The right column displays information about the auction, including the type of NFT being auctioned, the owner's address, the current bid, the reserve price, the time remaining in the auction, and buttons for editing the auction or increasing the bid.
-
-The `handleFunc` function is called when the user clicks on one of the buttons. If the `bid` prop is `true`, the function toggles the visibility of the "increase bid" modal using the `toggleIncreaseBidModal` function. Otherwise, it toggles the visibility of the "edit auction" modal using the `toggleEditAuctionModal` function.
-
-Overall, the `BidsCard` component provides a reusable way to display information about auctions in the larger project. Developers can use this component to render auction information on various pages throughout the application. For example, the component could be used on a marketplace page to display information about items currently up for auction.
-
-Example usage:
-
-```
-import BidsCard from "zoo/components/BidsCard";
-
-function AuctionPage() {
- return (
- Auction Details
-Current bid: 1 ETH
- - {showModal &&
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `BidsCard` component?
-- The `BidsCard` component is used to display information about an auction item, including its image, owner, current and starting bid, auction time, and type of NFT. It also includes buttons to increase the bid or edit the auction, as well as a button to view the item or bid.
-
-2. What is the purpose of the `ModelViewer` component?
-- The `ModelViewer` component is imported from `../../components/ModelViewer` and is used to display a 3D model of the auction item. It is wrapped in a `div` with a fixed width and height and a rounded border.
-
-3. What are the `useEditAuctionModalToggle` and `useIncreaseBidModalToggle` hooks used for?
-- These hooks are imported from `state/application/hooks` and are used to toggle the visibility of the "Edit Auction" and "Increase Bid" modals, respectively. They are called when the corresponding button is clicked in the `handleFunc` function, which checks whether the `bid` prop is true or false.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/Cards/CardNft.md b/.autodoc/docs/markdown/core/src/marketplace/Cards/CardNft.md
deleted file mode 100644
index 3db5df033..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/Cards/CardNft.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Cards/CardNft.tsx)
-
-The `CardNft` component is a React component that renders a card displaying information about a specific NFT (non-fungible token) auction. The component takes in several props, including the `nft` prop, which is an object containing information about the NFT auction, such as its name, animation URL, reserve price, and highest bid.
-
-The component first renders a container div with a minimum width and height, and a flex layout that centers its child elements. Within this container, the component renders a video or 3D model of the NFT, depending on the `kind` property of the `nft` object. If the `kind` is 0 or 2, a video is rendered using the `animation_url` property of the `nft` object. Otherwise, a 3D model is rendered using the `glb_animation_url` and `usdz_animation_url` properties of the `nft` object.
-
-If the `showDetails` prop is true, the component also renders additional information about the NFT auction, including the NFT's name, reserve price, highest bid, and yield per day. The reserve price is displayed as a button that links to the marketplace page for the corresponding animal NFT. The highest bid and yield per day are displayed as text.
-
-This component can be used in the larger project to display information about NFT auctions in a visually appealing way. It can be used in conjunction with other components to create a marketplace or auction page for animal NFTs.
-
-Example usage:
-
-```
-import CardNft from "path/to/CardNft";
-
-const nft = {
- name: "Giraffe NFT",
- kind: 1,
- glb_animation_url: "path/to/giraffe.glb",
- usdz_animation_url: "path/to/giraffe.usdz",
- reservePrice: 1000000,
- amount: 500000,
- duration: 86400,
- tokenOwner: "0x1234567890abcdef",
- attributes: [
- { trait_type: "Yields", value: "10" },
- { trait_type: "Color", value: "Brown" },
- ],
-};
-
-function AuctionPage() {
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code defines a React component called `CardNft` that renders an NFT card with details such as name, highest bid, and yield per day. It also includes a video or 3D model viewer depending on the type of NFT.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several external libraries and dependencies including React, Next.js, moment.js, and functions from other files such as `abbreviateNumbers` and `shortenAddress`.
-
-3. What props can be passed to the `CardNft` component and what are their types?
-- The `CardNft` component accepts four props: `nft` of type `Auction`, `showDetails` of type `boolean` with a default value of `true`, `className` of type `string`, and `onNFTClick` of type `function` that returns `void`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/Carousel/Arrows.md b/.autodoc/docs/markdown/core/src/marketplace/Carousel/Arrows.md
deleted file mode 100644
index 9f299030f..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/Carousel/Arrows.md
+++ /dev/null
@@ -1,52 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Carousel/Arrows.tsx)
-
-This code defines two styled components, `Previous` and `Next`, which are used to create arrow buttons for a carousel or slider. The arrows are created using the `ChevronLeft` and `ChevronRight` icons from the Material UI library. The `Arrow` component is a base component that sets some common styles for both the `Previous` and `Next` components, such as positioning, color, and cursor.
-
-The `Previous` and `Next` components are positioned absolutely and offset from the track of the slider by a fixed amount (`arrowOffset`). The `arrowDiameter` constant is used to set the width and height of the arrow icons. The `&:hover` selector is used to change the background color of the arrow when it is hovered over. The `& .slick-disabled` selector is used to hide the arrow when it is disabled (e.g. when there are no more items to scroll to).
-
-The `PreviousArrow` and `NextArrow` components are exported for use in other parts of the project. They take three props: `onClick`, `style`, and `className`. These props are passed down to the `Previous` and `Next` components, which are rendered with the appropriate icon (`ChevronLeft` or `ChevronRight`).
-
-This code is a reusable component that can be used in any React project that requires a carousel or slider with arrow buttons. The `PreviousArrow` and `NextArrow` components can be imported and used in any other React component, and the `onClick` prop can be used to handle click events on the arrow buttons. For example:
-
-```
-import React from 'react'
-import Slider from 'react-slick'
-import { PreviousArrow, NextArrow } from './path/to/arrows'
-
-const settings = {
- dots: true,
- infinite: true,
- speed: 500,
- slidesToShow: 1,
- slidesToScroll: 1,
- prevArrow: Giraffe NFT Auction
-
-
- Slide 1
-
-
- Slide 2
-
-
- Slide 3
-| Index | -Name | -Floor Price | -24h Volume | -
|---|---|---|---|
-
- )
-}
-```
-
-In the example above, the `CurrencyLogo` component is used to render the image of the USD currency symbol with a size of 64 pixels and an additional CSS class of `my-class`.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a component called `CurrencyLogo` that displays an image logo for a given currency symbol.
-
-2. What is the `CURRENCY_SYMBOL_LOGO` object and where does it come from?
- `CURRENCY_SYMBOL_LOGO` is an object that maps currency symbols to image URLs. It is imported from the `@zoolabs/zdk` library.
-
-3. What is the `Image` component and where does it come from?
- `Image` is a component imported from the `next/image` library that optimizes images for performance and provides features like lazy loading and automatic resizing.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/EarnWithZoo/EarnCard.md b/.autodoc/docs/markdown/core/src/marketplace/EarnWithZoo/EarnCard.md
deleted file mode 100644
index d8c0999d3..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/EarnWithZoo/EarnCard.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/EarnWithZoo/EarnCard.tsx)
-
-The code defines a React component called `EarnCard` that renders a card with a heading and subtext. The component takes two props, `heading` and `subText`, which are both optional and have default values. If no values are provided, the heading will be "Main Heading" and the subtext will be a placeholder string.
-
-The component returns a div element with a fixed width and height, a transparent background, and a gray border. Inside the div, there are three child elements: two divs and a paragraph. The first div is empty and has a fixed height of 50 pixels. The second div contains an h1 element with the value of the `heading` prop. The third div contains a p element with the value of the `subText` prop.
-
-This component can be used in a larger project to display information in a card format. The `heading` prop can be used to provide a title for the card, while the `subText` prop can be used to provide additional details or a description. The component's fixed width and height make it suitable for use in a grid or other layout where consistent sizing is desired.
-
-Here is an example of how the `EarnCard` component could be used in a larger React application:
-
-```
-import React from 'react'
-import EarnCard from './EarnCard'
-
-const App = () => {
- return (
-
-
- )
-}
-
-export default App
-```
-
-In this example, the `EarnCard` component is used three times to display different ways to earn rewards. The component's fixed size and consistent layout make it easy to create a grid of cards that look good together. The `heading` and `subText` props are used to customize the content of each card.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a React component called `EarnCard` that renders a card with a heading and subtext.
-
-2. What are the default values for the `heading` and `subText` props?
- The default value for `heading` is "Main Heading", and the default value for `subText` is a long string of placeholder text.
-
-3. What CSS classes are applied to the different elements in the component?
- The component uses Tailwind CSS classes to style the different elements, including `w-[300px]`, `h-[250px]`, `border-2`, `border-gray-600`, `text-gray-600`, and various padding and flexbox classes.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/EarnWithZoo/EarnWithZoo.md b/.autodoc/docs/markdown/core/src/marketplace/EarnWithZoo/EarnWithZoo.md
deleted file mode 100644
index d7ac07e28..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/EarnWithZoo/EarnWithZoo.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/EarnWithZoo/EarnWithZoo.tsx)
-
-The code above is a React component that renders a grid layout with three columns and a minimum height of 300 pixels. It is named `EarnWithZoo` and is imported from a file located in the `zoo` project.
-
-The component takes in a single prop called `children`, which is used to render the content of each column. The content is expected to be a collection of `EarnCard` components, which are also located in the `zoo` project.
-
-The purpose of this component is to provide a layout for displaying a collection of `EarnCard` components in a visually appealing and organized way. It can be used in various parts of the larger `zoo` project where a grid layout is needed to display multiple `EarnCard` components.
-
-Here is an example of how this component can be used in a parent component:
-
-```
-import React from 'react'
-import EarnWithZoo from './EarnWithZoo'
-import EarnCard from './EarnCard'
-
-const EarnPage = () => {
- return (
- Earn Rewards
-
-
-
-
-
-
- )
-}
-
-export default EarnPage
-```
-
-In the example above, the `EarnPage` component renders a heading and a `EarnWithZoo` component with three `EarnCard` components as its children. The `EarnCard` components are passed in with different titles and descriptions, which will be displayed in each card.
-
-Overall, the `EarnWithZoo` component provides a simple and reusable way to display a collection of `EarnCard` components in a grid layout.
-## Questions:
- 1. What is the purpose of the `EarnCard` component that is imported?
-- The `EarnCard` component is imported but not used in this file. It is possible that it is used in another file within the `zoo` project.
-
-2. What is the significance of the `className` property in the returned JSX element?
-- The `className` property sets the CSS class of the returned element to "grid md:grid-cols-3 gap-6 min-h-[300px] w-full bg-transparent", which likely affects the layout and styling of the element.
-
-3. What is the expected input for the `children` prop?
-- The `children` prop is used within the returned JSX element, so it is likely that this component is meant to be a wrapper for other components or elements. The expected input for `children` would be any valid React component or element.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/Graph/Graph.md b/.autodoc/docs/markdown/core/src/marketplace/Graph/Graph.md
deleted file mode 100644
index e2901d5de..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/Graph/Graph.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Graph/Graph.tsx)
-
-The code above is a simple React component called `Graph`. Its purpose is to render a basic HTML `div` element with the text "Graph" inside it. This component can be used as a building block for more complex visualizations or data representations within the larger project.
-
-To use this component, it can be imported into another React component file using the `import` statement, like so:
-
-```
-import Graph from './Graph'
-```
-
-Then, within the render method of the parent component, the `Graph` component can be included as a child element, like this:
-
-```
-render() {
- return (
- Earn with Zoo
-
-
- )
-}
-```
-
-This would render the "My Data Visualization" heading followed by the `Graph` component, which would display the text "Graph" inside a `div` element.
-
-Overall, this code serves as a basic building block for more complex data visualization components within the larger project. Its simplicity and reusability make it a valuable tool for developers working on the zoo project.
-## Questions:
- 1. **What is the purpose of this component?**
-A smart developer might wonder what this component is used for and how it fits into the overall functionality of the `zoo` project. Based on the code, it appears to be a simple component that renders a `My Data Visualization
-` element with the text "Graph".
-
-2. **Are there any props or state being used in this component?**
-A smart developer might want to know if this component relies on any external data or state to render its output. Based on the code, it does not appear to be using any props or state.
-
-3. **Is this component being used anywhere else in the project?**
-A smart developer might want to know if this component is being imported and used in other parts of the `zoo` project. Without additional context, it is impossible to determine if this is the case.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/Grid/CardWithTabs.md b/.autodoc/docs/markdown/core/src/marketplace/Grid/CardWithTabs.md
deleted file mode 100644
index c47fc43c4..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/Grid/CardWithTabs.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Grid/CardWithTabs.tsx)
-
-The `CardWithTabs` component is a reusable React component that renders a card with three tabs. The component takes in three props, `TabA`, `TabB`, and `TabC`, which are used to render the content of each tab. The component also takes in three optional props, `TabAName`, `TabBName`, and `TabCName`, which are used to set the names of each tab. If these props are not provided, the default names "My Wallet", "My Bids", and "My Auctions" are used.
-
-The component uses the `useSelector` hook from the `react-redux` library to get the `zooBalance` value from the Redux store. It also uses the `useZoobalance` hook from the `state/zoo/hooks` module to fetch the `zooBalance` value from the server. The `useEffect` hook is used to call the `getZooBalance` function when the component mounts and whenever the `getZooBalance` function changes.
-
-The component renders a header that displays the `zooBalance` value. The `zooBalance` value is formatted using the `toLocaleString` method to add commas and decimal places. The header also includes a gradient background and a row of three tabs. The active tab is highlighted with a black background, while the inactive tabs have a transparent background. When a tab is clicked, the `HandleChangeTab` function is called to update the `Tab` state variable, which determines which tab is active. The content of the active tab is rendered below the header.
-
-This component can be used in the larger project to display a card with three tabs that allow the user to switch between different views of their wallet, bids, and auctions. The component can be customized by passing in different content for each tab and by setting the names of the tabs. Here is an example of how the `CardWithTabs` component can be used:
-
-```
- console.log("Bid accepted!")}
- onError={(error) => console.log(`Error accepting bid: ${error}`)}
-/>
-```
-## Questions:
- 1. What is the purpose of the `LazyAcceptBidButton` component?
-- The `LazyAcceptBidButton` component is used to display a button that allows the user to accept a bid for a specific token.
-
-2. What external libraries or packages are being imported in this file?
-- The file is importing `isNativeCurrency` from the `@zoolabs/zdk` package, and `ethers`, `useCallback`, `useEffect`, and `useState` from the `react` package.
-
-3. What is the role of the `useTransactionPopups` hook in this code?
-- The `useTransactionPopups` hook is used to add transaction popups to the UI when a transaction is initiated or when an error occurs during the transaction.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/LazyBidItem.md b/.autodoc/docs/markdown/core/src/marketplace/LazyBidItem.md
deleted file mode 100644
index 558cf7133..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/LazyBidItem.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazyBidItem.tsx)
-
-The `LazyBidItem` component is a React component that renders a single bid item for a lazy auction. It takes in a `bid` object, which contains information about the bid, and several optional props that can be used to customize the rendering of the component.
-
-The component first imports several dependencies, including icons, currency and token types, and various utility functions. It then defines the `LazyBidItemProps` type, which specifies the shape of the props that can be passed to the component. The props include the `bid` object, a function to get the USD amount of a token, a boolean to indicate whether to show the token name, a label for the bid item, a summary of the bid, and a callback function to handle click events.
-
-The component then defines the `LazyBidItem` function, which takes in the props and returns a JSX element that renders the bid item. The function first extracts the `chainId` and `account` from the active Web3 React context using the `useActiveWeb3React` hook. It then initializes several state variables using the `useState` hook, including the formatted amount of the bid, the currency token used for the bid, and the type of the bid content.
-
-The function then calls the `usePrice` hook to get the `getUsdAmount` function, which can be used to get the USD value of a token. It also calls the `getContent` function to get the type and name of the bid content, although this is currently hardcoded to an empty string.
-
-The function then uses the `useEffect` hook to update the `currencyToken` and `formattedAmount` state variables whenever the `chainId` changes. It does this by calling the `getCurrencyTokenLowerCase` function to get the currency token for the bid, and then using the `formatCurrencyAmountWithCommas` function to format the bid amount with commas.
-
-Finally, the function returns a JSX element that renders the bid item. The element consists of a `div` container with two columns, one for the bid information and one for the bid amount. The bid information column displays the bid type or name, the bidder's address, and the time the bid was created. The bid amount column displays the formatted bid amount and the currency symbol. If the `onClick` prop is provided, the component also renders an eye icon that can be clicked to trigger the `onClick` callback function.
-
-Overall, the `LazyBidItem` component is a reusable component that can be used to render individual bid items for a lazy auction. It provides several customization options and uses various utility functions to format and display the bid information.
-## Questions:
- 1. What is the purpose of the `LazyBidItem` component?
-- The `LazyBidItem` component is used to display information about a bid, including the bidder's address, bid amount, and bid timestamp.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several external libraries and dependencies, including `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, `react-timeago`, and custom functions and hooks.
-
-3. What is the significance of the `getUsdAmount` function and how is it used?
-- The `getUsdAmount` function is used to calculate the USD value of a bid based on the bid amount and the currency used for the bid. It is passed as a prop to the `LazyBidItem` component and called within the component to display the USD value of the bid if available.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/LazyBidList.md b/.autodoc/docs/markdown/core/src/marketplace/LazyBidList.md
deleted file mode 100644
index 220b0a4c7..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/LazyBidList.md
+++ /dev/null
@@ -1,27 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazyBidList.tsx)
-
-The code defines a React component called `LazyBidList` that fetches and displays a list of bids from a GraphQL API. The component takes in several props, including a `where` object that specifies filters for the bids, a boolean `showToken` that determines whether to display the token associated with each bid, an `onClick` function that is called when a bid is clicked, and an optional `empty` JSX element to display when there are no bids.
-
-The component uses the `useQuery` hook from the `@apollo/client` library to fetch bids from the GraphQL API. The query is defined using the `gql` function and specifies the fields to fetch for each bid, including the bid amount, creation timestamp, currency, and bidder. The `where` object is passed as a variable to the query and is used to filter the bids based on the drop ID, token type name, and/or bidder ID.
-
-The fetched bids are stored in the `data` object returned by the `useQuery` hook. If there are bids, the component maps over them and renders a `LazyBidItem` component for each bid. The `getUsdAmount` function from a `usePrice` hook is passed to each `LazyBidItem` component to convert the bid amount to USD. If there are no bids, the `empty` prop is rendered if provided, otherwise a default message is displayed.
-
-Overall, this code provides a reusable component for displaying a list of bids from a GraphQL API with filtering and customization options. It can be used in a larger project that involves auctions or bidding systems. For example, it could be used in an NFT marketplace to display bids on a particular NFT or in a charity auction platform to display bids on various items. Here is an example usage of the `LazyBidList` component:
-
-```
- console.log(`Clicked bid ${bid.id}`)}
- empty={ setIsOpen(false)}
-/>
-```
-## Questions:
- 1. What is the purpose of the `LazyBidModal` component?
-- The `LazyBidModal` component is used to display bid information and allow the user to remove or accept a bid.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including `react`, `react-dom`, and various custom components and hooks defined in other files within the project.
-
-3. What is the significance of the `offline` state variable?
-- The `offline` state variable is used to determine whether the current user is offline or not, and is used to conditionally render a message to the user if they are the bidder and the bid is removed.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/LazyRemoveBidButton.md b/.autodoc/docs/markdown/core/src/marketplace/LazyRemoveBidButton.md
deleted file mode 100644
index 0ceb93945..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/LazyRemoveBidButton.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazyRemoveBidButton.tsx)
-
-The code is a React component that exports a button component called `LazyRemoveBidButton`. This button is used to remove a bid for a specific token. The component takes in several props including `dropId`, `name`, `currency`, `onError`, and `onRemove`.
-
-The `useActiveWeb3React` hook is used to get the current user's account. The `useGasPrice` hook is used to get the current gas price. The `useContract` hook is used to get the `App` and `Media` contracts. The `useTransactionPopups` hook is used to add transaction and error popups.
-
-The `removeBid` function is a callback function that is called when the button is clicked. It first tries to remove the bid using the `app.removeLazyBid` function. If the currency is native, it will use the `app` contract to remove the bid. Otherwise, it will use the `media` contract to remove the bid. If the bid is successfully removed, the `onRemove` function is called. If there is an error, the `onError` function is called.
-
-The `LazyRemoveBidButton` component returns a button with the text "Remove Bid". When the button is clicked, the `removeBid` function is called. The button has a red background and turns indigo when hovered over.
-
-This component can be used in a larger project that involves bidding on tokens. When a user wants to remove their bid, they can click the `LazyRemoveBidButton` component and the bid will be removed. The `onRemove` function can be used to update the UI to reflect that the bid has been removed. The `onError` function can be used to display an error message if there is an error removing the bid.
-## Questions:
- 1. What is the purpose of the `LazyRemoveBidButton` component?
-- The `LazyRemoveBidButton` component is a button that, when clicked, removes a bid for a specific token ID.
-
-2. What external libraries or packages are being imported in this file?
-- The file is importing functions from "@zoolabs/zdk", "react", and "../hooks", as well as components from "../state/network/hooks" and "../state/transactions/hooks".
-
-3. What is the purpose of the `useCallback` hook in this code?
-- The `useCallback` hook is used to define the `removeBid` function, which is an asynchronous function that removes a bid for a specific token ID. It is memoized to prevent unnecessary re-renders of the component.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/LazySetAsk.md b/.autodoc/docs/markdown/core/src/marketplace/LazySetAsk.md
deleted file mode 100644
index cde4c2728..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/LazySetAsk.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazySetAsk.tsx)
-
-The `LazySetAsk` component is a React component that allows users to set an ask price for a given token. It is part of the larger `zoo` project and imports various dependencies from other files in the project.
-
-The component takes in two props: `dropId` and `name`. These props are used to retrieve the `ask` and `currencyToken` values from the `useTokenType` hook. The `ask` value represents the current ask price for the token, while the `currencyToken` value represents the currency used to set the ask price.
-
-The component renders an input field that allows users to enter a new ask price for the token. The value of this input field is stored in the component's state using the `useState` hook. The component also renders a button that, when clicked, sets the new ask price for the token. This button is implemented using the `LazySetAskButton` component, which is imported from another file in the project.
-
-The component also renders a `SelectCurrency` component that allows users to select the currency used to set the ask price. This component is only rendered when the user clicks on a button next to the input field. The selected currency is stored in the component's state using the `useState` hook.
-
-The component also includes commented-out code that allows users to toggle an "offline ask" option. This option is not currently implemented in the component.
-
-Overall, the `LazySetAsk` component provides a simple interface for users to set an ask price for a given token. It is designed to be used in conjunction with other components in the `zoo` project to create a full-featured marketplace for buying and selling tokens.
-## Questions:
- 1. What is the purpose of the `LazySetAsk` component?
-- The `LazySetAsk` component is used to set an ask price for a given token.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including `@zoolabs/zdk`, `ethers`, `@headlessui/react`, `@heroicons/react/solid`, and `@lingui/macro` and `@lingui/core`.
-
-3. What state is managed by the `LazySetAsk` component?
-- The `LazySetAsk` component manages several pieces of state, including the selected currency token, the value of the ask price, and whether the ask is offline or not.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/LazySetAskButton.md b/.autodoc/docs/markdown/core/src/marketplace/LazySetAskButton.md
deleted file mode 100644
index a9d343de3..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/LazySetAskButton.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazySetAskButton.tsx)
-
-The code is a React component that renders a button used to set an "ask" price for a token on the Drop contract. The component takes in several props including the name of the token, the amount of the ask price, the currency token used for the ask price, and a boolean indicating whether the user is offline.
-
-The component uses several hooks including `useActiveWeb3React`, `useGasPrice`, and `useContract` to interact with the Ethereum network and the Drop contract. The `useTransactionPopups` hook is also used to display transaction popups to the user.
-
-When the user clicks the "Set Ask" button, the `setAsk` function is called. This function first checks if the `amount` prop is truthy. If it is, it creates an `Ask` object with the `currency` and `amount` properties, where the `amount` is converted to the appropriate units using the `ethers.utils.parseUnits` function. The `setTokenTypeAsk` function is then called on the `drop` contract with the `name`, `ask`, `from`, and `gasPrice` parameters. If the transaction is successful, a transaction popup is displayed to the user indicating that the ask price has been set.
-
-If the `amount` prop is falsy, a message is displayed to the user indicating that an amount is required.
-
-Overall, this component is used to allow users to set an ask price for a token on the Drop contract. It is likely used in conjunction with other components and functionality to create a full-fledged marketplace for buying and selling tokens. An example usage of this component might look like:
-
-```
- console.log(`Bid removed for token ${tokenId}`)}
- onError={(error) => console.error(error)}
-/>
-```
-## Questions:
- 1. What is the purpose of the `RemoveBidButton` component?
-- The `RemoveBidButton` component is used to render a button that, when clicked, removes a bid for a specific token.
-
-2. What libraries or hooks are being imported and used in this file?
-- The file imports `isNativeCurrency` from the `@zoolabs/zdk` library, as well as `useCallback` from `react`, and `useActiveWeb3React`, `useContract`, `useGasPrice`, and `useTransactionPopups` from various custom hooks defined in other files.
-
-3. What happens when the `removeBid` function is called?
-- The `removeBid` function attempts to remove a bid for a specific token by calling either the `removeBid` function on the `app` contract or the `media` contract, depending on whether the `currency` parameter is a native currency or not. If successful, it calls the `onRemove` function with the `tokenId` parameter. If there is an error, it calls the `onError` function with the error parameter and displays an error popup.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/SelectCurrency.md b/.autodoc/docs/markdown/core/src/marketplace/SelectCurrency.md
deleted file mode 100644
index 494c192a0..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/SelectCurrency.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/SelectCurrency.tsx)
-
-The code above is a React component that renders a list of supported payment currencies for a given blockchain network. It imports the `useActiveWeb3React` hook from a `hooks` module and the `getSupportedPaymentCurrencies` function from a `config/currencies` module. It also imports a `CurrencyLogo` component from a local file.
-
-The `SelectCurrency` component takes a single prop called `onSelect`, which is a callback function that will be called when a currency is selected. The component first calls the `useActiveWeb3React` hook to get the current blockchain network's ID. It then renders a list of buttons, each representing a supported currency for the current network. The list is generated by mapping over the result of calling `getSupportedPaymentCurrencies` with the current network's ID as an argument.
-
-Each button has an `onClick` handler that calls the `onSelect` callback with the selected currency as an argument. The button also renders a `CurrencyLogo` component and the currency symbol in a `div` element. The `CurrencyLogo` component takes the currency symbol as a prop and renders the corresponding logo.
-
-This component can be used in a larger project that requires users to select a payment currency for a transaction. The `onSelect` callback can be used to update the selected currency in the parent component's state or trigger an action. The `getSupportedPaymentCurrencies` function can be modified to support additional blockchain networks or currencies. The `CurrencyLogo` component can be reused in other parts of the project that require currency logos.
-
-Example usage:
-
-```
-import SelectCurrency from './SelectCurrency'
-
-const PaymentForm = () => {
- const [selectedCurrency, setSelectedCurrency] = useState(null)
-
- const handleCurrencySelect = (currency) => {
- setSelectedCurrency(currency)
- }
-
- return (
-
-
-
- )
-}
-```
-
-In this example, the `CollectionRow` component is used to render two rows of data in a table. The `ColARank`, `ColA`, `ColB`, `ColC`, `ColD`, `ColE`, and `ColF` props are used to customize the content of each column. The resulting table will have a consistent layout and styling, making it easier to read and understand the data.
-## Questions:
- 1. What is the purpose of this code?
- - This code defines a React component called `CollectionRow` that renders a table row with cells that can be customized using props.
-
-2. What are the default values for the props used in this component?
- - The default values for the props are: `ColARank` is `'1'`, `ColA` is `'Use Prop "ColA" To Change '`, `ColB` is `'Use Prop "ColB" To Change '`, `ColC` is `'Use Prop "ColC" To Change '`, `ColD` is `'Use Prop "ColD" To Change '`, `ColE` is `'Use Prop "ColC" To Change'`, and `ColF` is `'Use Prop "ColF" To Change'`.
-
-3. What CSS classes are applied to the table cells in this component?
- - The table cells have the following CSS classes applied to them: `text-xs md:text-base text-left`, `bg-[#1F2030]`, `p-4`, `border-b`, and `border-opacity-5`. The first cell in each row also has the additional classes `col-span-2` and `flex`, and the first div inside that cell has the class `w-1/4`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/TableCollection/CollectionTable.md b/.autodoc/docs/markdown/core/src/marketplace/TableCollection/CollectionTable.md
deleted file mode 100644
index 2ec120977..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/TableCollection/CollectionTable.md
+++ /dev/null
@@ -1,50 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/TableCollection/CollectionTable.tsx)
-
-The `CollectionTable` component is a reusable React component that renders a table with customizable column titles. It takes in several props, including `TitleA` through `TitleF`, which are used to set the titles of the corresponding columns in the table. If any of these props are not provided, default titles are used instead. The `TitleMain` prop is used to set the main title of the table, which is rendered above the table itself.
-
-The component renders a `div` element with a class of `w-full bg-transparent min-h-[800px]`, which sets the width and minimum height of the table. Inside this `div`, there is an `h3` element that displays the `TitleMain` prop. Below this, there is a `table` element with a class of `w-full rounded-2xl p-2`, which sets the width, border radius, and padding of the table.
-
-The `thead` element contains a single row with seven columns, each of which corresponds to a column in the table. The `th` elements inside each column display the corresponding title, which is either the value of the corresponding prop or a default value if the prop is not provided. The `tbody` element contains the actual content of the table, which is passed in as the `children` prop.
-
-This component can be used in a larger project whenever a table with customizable column titles is needed. For example, it could be used to display a list of animals in a zoo, with each column representing a different attribute of the animals (e.g. name, species, habitat, etc.). The `CollectionTable` component could be reused throughout the project wherever a similar table is needed, with different props passed in to customize the column titles and content.
-
-Example usage:
-
-```
-import CollectionTable from './CollectionTable'
-
-const animals = [
- { name: 'Lion', species: 'Panthera leo', habitat: 'Savannah' },
- { name: 'Giraffe', species: 'Giraffa camelopardalis', habitat: 'Grasslands' },
- { name: 'Elephant', species: 'Loxodonta africana', habitat: 'Forests' },
- // ...
-]
-
-const AnimalTable = () => {
- return (
-
- {animals.map(animal => (
-
- {animal.name}
- {animal.species}
- {animal.habitat}
-
- ))}
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `CollectionTable` that renders a table with customizable column titles and child elements.
-
-2. What props can be passed to the `CollectionTable` component?
-- The `CollectionTable` component accepts several optional props for customizing the table column titles: `TitleA`, `TitleB`, `TitleC`, `TitleD`, `TitleE`, `TitleF`, and `TitleMain`.
-
-3. What is the styling of the table?
-- The table has a full width, rounded corners, and a minimum height of 800 pixels. The table header has a dark purple background color, and the table cells have white text on a dark background. The first column has a larger left margin and spans two columns.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/TradingHistory/TableRow.md b/.autodoc/docs/markdown/core/src/marketplace/TradingHistory/TableRow.md
deleted file mode 100644
index 976519e8a..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/TradingHistory/TableRow.md
+++ /dev/null
@@ -1,60 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/TradingHistory/TableRow.tsx)
-
-The `TableRow` component is a reusable React component that renders a table row with four columns and a copy-to-clipboard button. The component takes four props, `ColA`, `ColB`, `ColC`, and `ColD`, which are used to populate the text content of the four columns. If any of these props are not provided, default values are used instead.
-
-The first column of the table row contains an image of a checkmark and the text content of `ColA`. The second, third, and fourth columns contain the text content of `ColB`, `ColC`, and `ColD`, respectively. The fifth column contains a copy-to-clipboard button that, when clicked, copies the text content of `ColD` to the user's clipboard and displays a checkmark icon to indicate that the copy was successful.
-
-The `TableRow` component uses the `useState` hook to manage the state of the `copied` variable, which is initially set to `false`. When the copy-to-clipboard button is clicked, the `copyToClipboard` function is called, which uses the `navigator.clipboard.writeText` method to write the text content of `ColD` to the user's clipboard. The `copied` variable is then set to `true`, which triggers a re-render of the component. During this re-render, the checkmark icon is displayed instead of the copy-to-clipboard icon.
-
-The `TableRow` component also uses the `useEffect` hook to reset the `copied` variable to `false` after two seconds have elapsed since the copy-to-clipboard button was clicked. This ensures that the checkmark icon is only displayed briefly to indicate that the copy was successful, and then reverts back to the copy-to-clipboard icon.
-
-This component can be used in any React project that requires a table with copy-to-clipboard functionality. It is highly customizable, as the text content of each column can be easily changed by passing in different props. Additionally, the styling of the component can be customized by modifying the CSS classes applied to each column. Here is an example of how the `TableRow` component can be used in a larger project:
-
-```
-import TableRow from './TableRow'
-
-const MyTable = () => {
- return (
-
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `TableRow` component?
-- The `TableRow` component is used to render a table row with four columns and a copy-to-clipboard button.
-
-2. What is the significance of the `copied` state variable?
-- The `copied` state variable is used to keep track of whether the value in the fourth column has been copied to the clipboard or not.
-
-3. What is the purpose of the `useEffect` hook in this component?
-- The `useEffect` hook is used to reset the `copied` state variable to `false` after 2 seconds if it has been set to `true`. This is done to remove the "copied" checkmark icon after it has been displayed for a short period of time.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/TradingHistory/Trading.md b/.autodoc/docs/markdown/core/src/marketplace/TradingHistory/Trading.md
deleted file mode 100644
index aa8761193..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/TradingHistory/Trading.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/TradingHistory/Trading.tsx)
-
-The code defines a React component called `Trading` that renders a table with a specific style. The table is created using the `styled-components` library, which allows the developer to write CSS code inside the JavaScript file. The `TableContainer` constant is a styled `table` element that defines the table's appearance. It has a minimum width of 350 pixels, and the cells in the table body have a bottom border of 0.5 pixels in white with 60% opacity.
-
-The `Trading` component takes several props that allow the developer to customize the table's header and title. The component renders a `div` element with a white text title that can be customized using the `TitleMain` prop. The table's header has four columns with titles that can be customized using the `TitleA`, `TitleB`, `TitleC`, and `TitleD` props. The table body is rendered using the `children` prop, which is a special prop that allows the component to render any content passed to it between its opening and closing tags.
-
-The `Trading` component uses CSS to style the table's borders and corners. The first column of each row has a left border of 1 pixel in a dark color. The top-left, top-right, bottom-left, and bottom-right corners of the table have a border radius of 15 pixels, giving the table a rounded appearance.
-
-This component can be used in a larger project that requires a table with a specific style. The `Trading` component can be imported into other React components and used like any other React component. For example, a financial dashboard application could use the `Trading` component to display stock prices or other financial data in a table format. The `Trading` component's props can be customized to display the appropriate data and column titles.
-## Questions:
- 1. What is the purpose of the `Trading` component?
-- The `Trading` component is a React component that renders a table with customizable titles for each column.
-
-2. What is the purpose of the `TableContainer` styled component?
-- The `TableContainer` styled component is used to style the table element with specific CSS rules, such as border spacing, border radius, and background color.
-
-3. What are the default values for the `TitleA`, `TitleB`, `TitleC`, `TitleD`, and `TitleMain` props?
-- The default values for the `TitleA`, `TitleB`, `TitleC`, `TitleD`, and `TitleMain` props are provided as strings in the component definition. If these props are not passed in when the component is used, these default values will be displayed in the table.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/WalletNav/WalletNav.md b/.autodoc/docs/markdown/core/src/marketplace/WalletNav/WalletNav.md
deleted file mode 100644
index 7017fce62..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/WalletNav/WalletNav.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/WalletNav/WalletNav.tsx)
-
-The code above is a simple React functional component called `WalletNav`. Its purpose is to render a navigation bar for a wallet feature in the larger project.
-
-The `import` statement at the beginning of the code imports the React library, which is necessary for creating React components.
-
-The `WalletNav` function returns a simple `div` element with the text "WalletNav" inside. This will be rendered as the navigation bar for the wallet feature.
-
-The `export default` statement at the end of the code exports the `WalletNav` component so that it can be imported and used in other parts of the project.
-
-Here is an example of how this component might be used in another file within the project:
-
-```
-import React from 'react'
-import WalletNav from './WalletNav'
-
-const WalletPage = () => {
- return (
-
-
-
- )
-}
-```
-
-In this example, the `Table` component maintains the state of the sorting order and the data to be sorted. The `SortButton` component is rendered in the header of the table column that can be sorted. When the button is clicked, the `toggleSortOrder` function is called, which updates the state and triggers a re-sorting of the data. The sorted data is then rendered in the table rows.
-## Questions:
- 1. What is the purpose of the `FilterWrapper` component?
-- The `FilterWrapper` component is a styled div that provides padding, border radius, and hover effects. It also prevents user selection and applies the same style to its child elements.
-
-2. What does the `SortButton` component do?
-- The `SortButton` component is a functional component that renders a `FilterWrapper` with a text content of either '↑' or '↓' depending on the value of the `ascending` prop. It also accepts a `toggleSortOrder` function as a prop that is called when the component is clicked.
-
-3. What external libraries are being used in this file?
-- This file is using two external libraries: `React` and `styled-components`. `React` is used to define and render the components, while `styled-components` is used to create the `FilterWrapper` component with custom styles.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/sorting.md b/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/sorting.md
deleted file mode 100644
index 8f5cefd10..000000000
--- a/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/sorting.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/sorting.ts)
-
-This code defines a set of functions that are used to compare and sort tokens based on their balances and symbols. The functions are used in the larger project to display a list of tokens in a dropdown menu, with the most relevant tokens appearing at the top of the list.
-
-The `balanceComparator` function takes two token amounts as input and returns a number that indicates which token has the higher balance. If both balances are defined, the function compares them and returns -1 if the first balance is higher, 0 if they are equal, and 1 if the second balance is higher. If only one balance is defined and it is greater than 0, the function returns -1 or 1 depending on which balance is defined. If neither balance is defined or they are both 0, the function returns 0.
-
-The `getTokenComparator` function takes an array of token balances as input and returns a function that can be used to sort tokens based on their balances and symbols. The function first sorts the tokens by their balances using the `balanceComparator` function. If the balances are equal, the function sorts the tokens by their symbols in alphabetical order. If one or both tokens do not have a symbol, they are sorted to the end of the list.
-
-The `useTokenComparator` function is a React hook that takes a boolean value as input and returns a function that can be used to sort tokens. The function first calls the `useAllTokenBalances` hook to get an array of token balances. It then calls the `getTokenComparator` function to get a comparator function based on the balances. If the input boolean value is true, the function returns a comparator function that sorts tokens in reverse order. Otherwise, it returns the original comparator function.
-
-Here is an example of how the `useTokenComparator` function might be used in the larger project:
-
-```jsx
-import { useTokenComparator } from 'zoo'
-
-function TokenSelect({ tokens }) {
- const tokenComparator = useTokenComparator(false)
-
- return (
-
- )
-}
-```
-
-In this example, the `TokenSelect` component takes an array of tokens as input and uses the `useTokenComparator` hook to get a comparator function. It then sorts the tokens using the comparator function and renders them in a dropdown menu. The most relevant tokens will appear at the top of the list based on their balances and symbols.
-## Questions:
- 1. What is the purpose of the `useTokenComparator` function?
-- The `useTokenComparator` function returns a comparator function that can be used to sort an array of `Token` objects based on their balances and symbols.
-
-2. What is the `balanceComparator` function used for?
-- The `balanceComparator` function is used to compare two token amounts with the highest one coming first, and is used as part of the `getTokenComparator` function.
-
-3. What is the significance of the `inverted` parameter in the `useTokenComparator` function?
-- The `inverted` parameter determines whether the comparator function should sort in ascending or descending order, and is used to reverse the order of the sorting if `inverted` is `true`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/styleds.md b/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/styleds.md
deleted file mode 100644
index 71c0d285f..000000000
--- a/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/styleds.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/styleds.tsx)
-
-This file contains a set of styled components that can be used to create various UI elements in the larger project. The purpose of this code is to provide a consistent and reusable set of styles for different components across the project.
-
-The `ModalInfo` component is a container that centers its child elements and provides padding and margin. It can be used to display information in a modal dialog box.
-
-The `TextDot` component is a small dot with a height and width of 3 pixels and a border radius of 50%. It can be used as a bullet point or to indicate a selected item.
-
-The `FadedSpan` component is a text element with a font size of 14 pixels. It can be used to display text that is less important than other content on the page.
-
-The `Checkbox` component is an input element styled to have a height of 20 pixels and no margin. It can be used to create checkboxes in forms.
-
-The `PaddedColumn` component is a container with 20 pixels of padding. It can be used to create columns of content with consistent spacing.
-
-The `MenuItem` component is a container with a height of 56 pixels and a grid layout that can be used to display menu items. It has four columns, with the second column taking up the remaining space.
-
-The `SearchInput` component is an input element styled to have a padding of 16 pixels and a border radius of 10 pixels. It can be used to create search bars or input fields.
-
-The `Separator` and `SeparatorDark` components are horizontal lines with a height of 1 pixel. They can be used to separate content on a page.
-
-Overall, this file provides a set of reusable styled components that can be used to create consistent UI elements across the project. By using these components, developers can save time and ensure that the project has a consistent look and feel.
-
-Example usage:
-
-```
-import { ModalInfo, TextDot, Checkbox } from 'zoo'
-
-const MyComponent = () => {
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code file?
-- This code file contains styled components for various UI elements used in the zoo project.
-
-2. What is the difference between `Separator` and `SeparatorDark` components?
-- Both components are used to create a horizontal line, but `SeparatorDark` likely has a darker color scheme compared to `Separator`.
-
-3. What is the purpose of the `MenuItem` component?
-- The `MenuItem` component is used to create a clickable menu item with a specific layout using CSS grid.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/CastVoteModal/index.md b/.autodoc/docs/markdown/core/src/modals/CastVoteModal/index.md
deleted file mode 100644
index 463fc1b55..000000000
--- a/.autodoc/docs/markdown/core/src/modals/CastVoteModal/index.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/CastVoteModal/index.tsx)
-
-The `CastVoteModal` component is a React component that renders a modal for confirming a vote on a proposal. It imports various hooks and components from the project's codebase and uses them to display information about the vote and allow the user to confirm or cancel their vote.
-
-The component takes in several props, including the type of vote (approve or disapprove), a function to vote on the proposal, the user's voting power, and the number of approvals and disapprovals for the proposal. It also uses the `useSelector` hook to access the user's Zoo balance and the `useActiveWeb3React` hook to get the user's account.
-
-The component renders a modal with information about the vote, including the user's voting power, the number of approvals and disapprovals, and the amount of Zoo required to vote. If the user has enough voting power, they can confirm their vote by clicking a button. If they do not have enough voting power, they must first approve the contract to spend their Zoo tokens on their behalf. The component uses the `useVotingApproveCallback` hook to handle this approval process.
-
-The `CastVoteModal` component is used in the larger project to allow users to vote on proposals in the Zoo ecosystem. It provides a user-friendly interface for confirming votes and handles the approval process for spending Zoo tokens. The component can be easily customized to fit the project's design and functionality needs.
-
-Example usage:
-
-```jsx
- setSelectedBase(currency)}
-/>
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code exports a React component called `CommonBases` that displays a list of commonly paired tokens for a given `chainId`. It allows the user to select a token from the list and calls the `onSelect` function with the selected token.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including `@zoolabs/zdk`, `react`, and various components from the `../../components` directory.
-
-3. What is the significance of the `COMMON_BASES` constant and how is it used in this code?
-- The `COMMON_BASES` constant is a configuration object that maps `chainId` values to arrays of `Currency` objects. It is used in this code to determine which tokens to display in the list based on the `chainId` prop passed to the `CommonBases` component. If `chainId` is not defined, an empty array is used instead.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/SearchModal/CurrencyList.md b/.autodoc/docs/markdown/core/src/modals/SearchModal/CurrencyList.md
deleted file mode 100644
index d30c54699..000000000
--- a/.autodoc/docs/markdown/core/src/modals/SearchModal/CurrencyList.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/SearchModal/CurrencyList.tsx)
-
-The code is a React component that renders a list of currencies. It imports various components and hooks from the project's codebase and external libraries. The component takes in several props, including an array of currencies to display, a selected currency, and a callback function to handle currency selection.
-
-The component renders a list of currencies using the `FixedSizeList` component from the `react-window` library. Each currency is rendered as a `CurrencyRow` component, which displays the currency's logo, symbol, name, and balance. The `CurrencyRow` component also displays tags associated with the currency, such as whether it was added by the user or is part of an inactive token list.
-
-The component also includes a `BreakLineComponent` that is rendered between the list of currencies and any inactive token lists. The `BreakLineComponent` displays a message indicating that the following tokens are from inactive lists and provides a tooltip with more information.
-
-The `CurrencyList` component is used in other parts of the project to display a list of currencies, such as in a dropdown menu for selecting a currency to trade. The component can be customized with various props to control its behavior and appearance.
-
-Example usage:
-
-```
-import { CurrencyList } from "@zoolabs/zdk";
-
-function MyComponent() {
- const currencies = [/* array of Currency objects */];
- const [selectedCurrency, setSelectedCurrency] = useState(null);
-
- function handleCurrencySelect(currency) {
- setSelectedCurrency(currency);
- }
-
- return (
-
} />
-```
-## Questions:
- 1. What is the purpose of the `AskList` component?
-- The `AskList` component is used to display a list of asks (offers to sell) for media items, with optional filtering and display options.
-
-2. What GraphQL query is being used to fetch data for the `AskList` component?
-- The `GET_ASKS` query is being used to fetch data for the `AskList` component, which retrieves the ID, amount, timestamp, currency, owner, and media information for a list of asks.
-
-3. What is the purpose of the `onClick` function in the `AskList` component?
-- The `onClick` function is used to handle click events on an ask item, and it navigates to a URL with a query parameter for the media ID of the ask item.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/Asset.md b/.autodoc/docs/markdown/core/src/zoo/Asset.md
deleted file mode 100644
index 5efda0f5c..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/Asset.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/Asset.tsx)
-
-The `Asset` component is a React component that renders an asset, which can be an image or a video, along with some metadata such as the asset's name, ID, and price. The component takes in several props, including the `tokenId` and `contentURI` of the asset, as well as optional props such as `ask`, `highest`, `formattedAmount`, `usdAmount`, and `symbol`.
-
-The component first imports several dependencies, including `React`, `react-player`, `@zoolabs/zdk`, and `next/image`. It also imports several custom functions and types from other files in the project.
-
-Inside the component, it uses several hooks such as `useActiveWeb3React` and `useContract` to interact with the Ethereum blockchain and retrieve data from the project's smart contracts. It also uses the `getContent` function to parse the `contentURI` and extract the asset's type, image, video, and name.
-
-The component conditionally renders either an image or a video based on the `large` prop and whether the asset has a video. It also renders the asset's metadata, including its name, ID, and price. If the asset has a highest bid, it displays the bidder's address and the bid amount. If the user is the owner of the asset, it also displays a button to accept the highest bid.
-
-Overall, the `Asset` component is a reusable component that can be used to display assets throughout the project. It handles the rendering of the asset and its metadata, as well as interactions with the blockchain such as retrieving the highest bid and accepting bids.
-## Questions:
- 1. What is the purpose of the `Asset` component?
-- The `Asset` component is used to display information about a particular asset, including its image or video, token ID, and highest bid.
-
-2. What external libraries or packages are being used in this code?
-- The code is using several external libraries or packages, including React, react-player, @zoolabs/zdk, @heroicons/react, react-timeago, and next/image.
-
-3. What is the role of the `useActiveWeb3React` and `useContract` hooks?
-- The `useActiveWeb3React` hook is used to retrieve the current user's Ethereum account information, while the `useContract` hook is used to retrieve a specific smart contract instance based on its name.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/AssetList.md b/.autodoc/docs/markdown/core/src/zoo/AssetList.md
deleted file mode 100644
index b4848aa63..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/AssetList.md
+++ /dev/null
@@ -1,47 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AssetList.tsx)
-
-The `AssetList` component is a React component that renders a list of assets. It takes in several props, including `title`, `tokenType`, `tokenName`, `totalMinted`, `perPage`, `cols`, `where`, `orderBy`, `className`, `autoPlay`, `showPageNumbers`, `animate`, `large`, `empty`, `getTriggerProps`, `onLoadAssets`, and `openModal`.
-
-The component uses the `useQuery` hook from the `@apollo/client` library to fetch data from a GraphQL API. The query is defined using the `gql` template literal tag and is stored in the `GET_ASSETS` constant. The query fetches a list of assets based on the `where`, `skip`, `first`, and `orderBy` variables passed in as arguments.
-
-The `AssetList` component renders a grid of `Asset` components, which are defined in a separate file. Each `Asset` component represents a single asset and displays its image, name, and other relevant information. The `AssetList` component also includes pagination controls that allow the user to navigate between pages of assets.
-
-The `getPages` function is a utility function that takes in the total number of items and the number of items per page and returns an array of page sizes. This function is used to calculate the total number of pages based on the `totalMinted` and `perPage` props passed in to the `AssetList` component.
-
-The `Empty` component is a simple component that displays a message when the asset list is empty. It takes in an `empty` prop that can be used to customize the message.
-
-Overall, the `AssetList` component is a reusable component that can be used to display a list of assets in a grid format with pagination controls. It is highly customizable and can be used in a variety of contexts. Here is an example of how the `AssetList` component might be used in a larger project:
-
-```jsx
-import AssetList from "./AssetList";
-
-const MyPage = () => {
- const where = { owner: "0x123abc" };
- const orderBy = "createdAt_DESC";
- const perPage = 12;
-
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this component?
- This component is a two-column layout component that takes in two props, `LeftCol` and `RightCol`, to display content in the left and right columns respectively.
-
-2. What is the significance of the `AddClass` prop?
- The `AddClass` prop allows the developer to add additional CSS classes to the component, which can be useful for customizing the layout or styling of the component.
-
-3. What is the dependency used in this code?
- This code imports the React library, which is a JavaScript library used for building user interfaces.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/HowOffline.md b/.autodoc/docs/markdown/core/src/marketplace/HowOffline.md
deleted file mode 100644
index a3b2f3c54..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/HowOffline.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/HowOffline.tsx)
-
-The code defines a React component called `HowOffline` that renders a section of text explaining how offline asks work in the context of a smart contract-based marketplace for NFTs. The component takes a single prop called `onClick`, which is a function to be called when the user clicks the "Ok" button at the end of the text.
-
-The text explains that an offline ask allows buyers to place a bid without sending funds to the smart contract. Instead, the buyer must send the funds directly to the seller as an "over the counter" deal, such as a bank wire transfer. Once the seller verifies receipt of the funds, they can accept the bid, which will transfer ownership of the NFT to the buyer.
-
-The purpose of this component is to provide educational content to users of the marketplace, specifically those who may be unfamiliar with the concept of offline asks. By explaining how they work and what steps are involved, the component helps to build trust and confidence in the platform.
-
-Here is an example of how this component might be used in a larger project:
-
-```jsx
-import HowOffline from './HowOffline';
-
-const Marketplace = () => {
- const handleHowOfflineClick = () => {
- // Do something when the user clicks "Ok"
- };
-
- return (
-
-
- );
-};
-```
-
-In this example, the `HowOffline` component is rendered as part of a larger `Marketplace` component that provides an interface for buying and selling NFTs. The `handleHowOfflineClick` function is passed as a prop to `HowOffline` and will be called when the user clicks the "Ok" button. The rest of the `Marketplace` component would contain additional functionality and content related to the marketplace.
-## Questions:
- 1. What is the purpose of this code and where is it used in the zoo project?
- - This code is a React component that explains how offline asks work in the zoo project. It is likely used in a user interface or documentation section related to buying and selling NFTs.
-2. What props does the HowOffline component accept and how are they used?
- - The HowOffline component accepts a single prop called onClick, which is a function that will be called when the "Ok" button is clicked. It is likely used to dismiss the HowOffline component or trigger some other action.
-3. Are there any security concerns related to the process described in this component?
- - It is not clear from this component whether there are any security concerns related to accepting offline bids and receiving funds directly from buyers. A smart developer may want to investigate further to ensure that this process is secure and does not expose the seller or buyer to unnecessary risks.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/HowReservations.md b/.autodoc/docs/markdown/core/src/marketplace/HowReservations.md
deleted file mode 100644
index 01fcb9dcc..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/HowReservations.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/HowReservations.tsx)
-
-The code defines a React functional component called `HowReservations`. This component renders a section of text that explains how reservations work for the LUX network launch. The component takes a single prop called `onClick`, which is a function that will be called when the "Ok" button is clicked.
-
-The component returns a div element with a class of "m-auto w-96", which centers the content horizontally and sets a fixed width of 96 pixels. Inside the div, there is an h2 element with a class of "mb-6 text-xl", which sets the font size to extra large and adds a margin bottom of 6 units. This element displays the heading "How do reservations work?".
-
-Below the heading, there is a p element with a class of "mb-10", which sets a margin bottom of 10 units. This element displays the text "Reserve your NFT to ensure you are part of the LUX network at launch. If your bid is not accepted, your reservation will be refunded.".
-
-Finally, there is a button element with a type of "button" and a class that sets various styles for the button. The button displays the text "Ok". When the button is clicked, the `onClick` function passed as a prop will be called.
-
-This component can be used in the larger project to display information about how reservations work for the LUX network launch. It can be included in a page or modal that allows users to make reservations and provides them with information about the process. Here is an example of how the component can be used:
-
-```
-import HowReservations from './HowReservations';
-
-function ReservationPage() {
- function handleOkClick() {
- // Handle the "Ok" button click
- }
-
- return (
- Welcome to the NFT Marketplace
-Here you can buy and sell unique digital assets.
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this component?
-- This component is designed to display information about how reservations work for the LUX network launch and provide a button to acknowledge the information.
-
-2. What is the expected behavior when the button is clicked?
-- The onClick function passed as a prop will be executed, but the specific behavior is not defined in this component.
-
-3. What styling classes are being used in this component?
-- The component is using a variety of Tailwind CSS classes to style the text, button, and container.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/InfinityLoader.md b/.autodoc/docs/markdown/core/src/marketplace/InfinityLoader.md
deleted file mode 100644
index b47d4015f..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/InfinityLoader.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/InfinityLoader.tsx)
-
-The code above defines a React component called `InfinityLoader`. This component is responsible for rendering an animated infinity symbol that is used to indicate that a transaction is pending. The component takes in three optional props: `alt`, `height`, and `width`.
-
-The `Image` component is imported from the `../components/Image` file. This component is likely a custom implementation of the standard HTML `img` tag that allows for more flexibility and customization.
-
-The `InfinityLoader` component returns an instance of the `Image` component with the `src` prop set to the path of an animated infinity symbol. The `alt`, `height`, and `width` props are passed through to the `Image` component, allowing for customization of the rendered image.
-
-This component is likely used in various places throughout the larger project to indicate that a transaction is pending. For example, it may be used in a payment processing flow to indicate that a payment is being processed and the user should wait for confirmation.
-
-Here is an example of how the `InfinityLoader` component may be used in a React component:
-
-```
-import React from 'react';
-import { InfinityLoader } from 'zoo';
-
-const PaymentProcessing = () => {
- return (
- Make a Reservation
-
-
- );
-};
-
-export default PaymentProcessing;
-```
-
-In the example above, the `InfinityLoader` component is used to indicate that a payment is being processed. The `alt` prop is set to "Payment Processing" and the `height` and `width` props are set to 64 to increase the size of the rendered image.
-## Questions:
- 1. What is the purpose of the `Image` component being imported?
- - The `Image` component is being imported from a file located at `../components/Image`. It is likely used to display images within the application.
-
-2. What is the purpose of the `InfinityLoader` function?
- - The `InfinityLoader` function returns an `Image` component with a default source of `/animated-infinity.svg` and customizable `alt`, `height`, and `width` props. It is likely used as a loading animation for pending transactions.
-
-3. What type of file is this code located in?
- - The code is located in a file located at `zoo`. It is unclear what type of file it is without further context.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/InfoComp/InfoComp.md b/.autodoc/docs/markdown/core/src/marketplace/InfoComp/InfoComp.md
deleted file mode 100644
index b3c5aaa98..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/InfoComp/InfoComp.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/InfoComp/InfoComp.tsx)
-
-The `InfoComp` component is a React component that displays a carousel of information cards. The component imports the `useState` hook from the `react` library, the `Slider` component from the `react-slick` library, and the `Image` component from the `next/image` library. It also imports two CSS files for styling the carousel.
-
-The component defines an array of objects called `data`, where each object represents an information card. Each card has an `id`, a `title`, a `description`, and an `image`. The component also defines a `settings` object that configures the behavior of the `Slider` component.
-
-The `return` statement of the component renders the carousel using the `Slider` component. The `Slider` component iterates over the `data` array and renders an information card for each object in the array. Each card is a `div` element that contains two child `div` elements. The first child `div` element contains the `title` and `description` of the card, and the second child `div` element contains the `image` of the card. The `Image` component is used to display the image, and its `src`, `width`, `height`, and `alt` attributes are set using the `image` property of the current object in the `data` array.
-
-The `Slider` component is also configured to display navigation dots and to allow infinite scrolling. The component also defines two buttons that allow the user to navigate to the previous or next card in the carousel. These buttons are displayed at the bottom of the carousel and are only visible when the user hovers over them.
-
-The `InfoComp` component can be used in a larger project to display a carousel of information cards. The `data` array can be customized to include different cards with different titles, descriptions, and images. The `settings` object can also be customized to change the behavior of the carousel. The component can be styled using CSS to match the design of the larger project. An example usage of the `InfoComp` component is shown below:
-
-```
-import InfoComp from './InfoComp'
-
-const HomePage = () => {
- return (
- Processing Payment
-Please wait while we process your payment...
-
-
- )
-}
-
-export default HomePage
-```
-## Questions:
- 1. What is the purpose of the `InfoComp` component?
-- The `InfoComp` component is used to display a carousel of information cards containing titles, descriptions, and images.
-
-2. What library is being used for the carousel functionality?
-- The `react-slick` library is being used for the carousel functionality.
-
-3. What is the purpose of the `useState` hook being used in this component?
-- The `useState` hook is being used to store a reference to the `Slider` component, which is used to control the carousel navigation buttons.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/LazyAcceptBidButton.md b/.autodoc/docs/markdown/core/src/marketplace/LazyAcceptBidButton.md
deleted file mode 100644
index e5f6f588d..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/LazyAcceptBidButton.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazyAcceptBidButton.tsx)
-
-The code above is a React component that exports a button component called `LazyAcceptBidButton`. This button is used to accept a bid for a specific token in a market. The component takes in several props, including `dropId`, `name`, `bidder`, `onError`, and `onAccept`.
-
-The `useActiveWeb3React` hook is used to get the current user's account, and the `useGasPrice` hook is used to get the current gas price. The `useContract` hook is used to get the `App` and `Market` contracts.
-
-The `useEffect` hook is used to fetch the bid for the specified token using the `market.lazyBidForTokenBidder` function. If a bid is found, it is stored in the `bid` state using the `setBid` function.
-
-The `acceptBid` function is called when the button is clicked. It first checks if a bid exists, and if not, it returns. If a bid exists, it calls the `app.acceptLazyBid` function to accept the bid. If the transaction is successful, the `onAccept` function is called with the `dropId` as an argument. If the transaction fails, the `onError` function is called with the error as an argument.
-
-The `LazyAcceptBidButton` component returns a button element with the text "Accept Bid". When the button is clicked, the `acceptBid` function is called.
-
-This component can be used in a larger project that involves a marketplace for buying and selling tokens. It provides an easy way for users to accept bids for their tokens. An example usage of this component is shown below:
-
-```
-Welcome to the Zoo!
-No bids yet for this drop.
}
-/>
-```
-## Questions:
- 1. What is the purpose of the `LazyBidList` component?
-- The `LazyBidList` component is used to display a list of bids based on the provided filter criteria, and includes functionality for converting bid amounts to USD.
-
-2. What is the purpose of the `GET_BIDS` GraphQL query?
-- The `GET_BIDS` query is used to retrieve bid data from a GraphQL API, including the bid ID, amount, creation timestamp, currency ID, and bidder ID.
-
-3. What is the purpose of the `LazyBidFilter` type?
-- The `LazyBidFilter` type is used to define the filter criteria that can be applied to the `LazyBidList` component, including the drop ID, token type name, and bidder ID.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/LazyBidModal.md b/.autodoc/docs/markdown/core/src/marketplace/LazyBidModal.md
deleted file mode 100644
index ef6492b93..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/LazyBidModal.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/LazyBidModal.tsx)
-
-The `LazyBidModal` function is a React component that renders a modal window for a bid on a media asset. The component takes several props, including `dropId`, `name`, `bid`, `isOpen`, and `onClose`.
-
-The component imports several other components and functions from other files in the project, including `Modal`, `ModalHeader`, `useActiveWeb3React`, `getContent`, `usePrice`, `formatCurrencyAmountWithCommas`, `isSameAddress`, `shortenAddress`, `LazyRemoveBidButton`, `useContract`, `LazyBidItem`, and `LazyAcceptBidButton`.
-
-The component uses the `useActiveWeb3React` hook to get the current user's account, and the `useContract` hook to get the `owner` of the media asset. It also uses several other functions to get information about the bid, including the `type`, `given_name`, `bidder`, `currency`, and `tokenId`.
-
-The component conditionally renders several elements based on the user's account and the bid information. For example, if the user is the bidder and the bid is not offline, a message is displayed indicating that the bidder's address will be refunded if the bid is removed. If the user is the owner of the media asset, buttons are displayed to remove or accept the bid.
-
-Overall, this component provides a way for users to view and manage bids on media assets in a modal window. It is likely used in conjunction with other components and functions in the larger project to provide a complete user interface for buying and selling media assets.
-
-Example usage:
-
-```jsx
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `dynamic` function being imported from 'next/dynamic'?
-- The `dynamic` function is used to dynamically import components in Next.js, allowing for code splitting and improved performance.
-
-2. What is the significance of the `ssr: false` option being passed to the `dynamic` function?
-- The `ssr: false` option disables server-side rendering for the dynamically imported components, which can improve performance and prevent issues with server-side rendering.
-
-3. What is the purpose of the `HomeCard` component and what props does it accept?
-- The `HomeCard` component appears to be a reusable component for displaying information about a particular NFT collection. It accepts props for the GLB file path, collection name, top offer, and NFT name.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/MarketHero/MarketHero.md b/.autodoc/docs/markdown/core/src/marketplace/MarketHero/MarketHero.md
deleted file mode 100644
index b17700dfc..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/MarketHero/MarketHero.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/MarketHero/MarketHero.tsx)
-
-The code above is a React component called `MarketHero` that renders a two-column layout with a `WelcomeCard` component on the left and a `HomeCard` component on the right. The `TwoColumComp` component is imported from the `../Grid/TwoColumComp` file and is used to create the two-column layout. The `AddClass` prop is used to add a margin-top of 5 pixels on small screens and 1 pixel on large screens.
-
-The `WelcomeCard` and `HomeCard` components are imported from their respective files and are used as the content for the left and right columns, respectively. These components are likely to contain information about the zoo, such as its history, mission, and featured animals.
-
-The `MarketHero` component is exported as the default export of the file, which means it can be imported and used in other files within the project. For example, it could be used in the homepage of the zoo's website to showcase important information about the zoo and its offerings.
-
-Here is an example of how the `MarketHero` component could be used in a hypothetical `HomePage` component:
-
-```
-import React from 'react'
-import MarketHero from './MarketHero'
-
-const HomePage = () => {
- return (
-
-
- )
-}
-
-export default HomePage
-```
-
-Overall, the `MarketHero` component serves as a reusable and flexible way to display important information about the zoo in a visually appealing way.
-## Questions:
- 1. What is the purpose of the `MarketHero` component?
- - The `MarketHero` component is used to render a `TwoColumComp` component with a `WelcomeCard` component in the left column and a `HomeCard` component in the right column.
-
-2. What are the dependencies of this file?
- - This file imports `React`, `TwoColumComp`, `HomeCard`, and `WelcomeCard` from other files.
-
-3. What props are being passed to the `TwoColumComp` component?
- - The `TwoColumComp` component is receiving the `AddClass` prop with a value of `"mt-5 lg:mt-1"`, the `LeftCol` prop with a value of `
-
- )
-}
-
-export default HomePage
-```
-
-In this example, the `WelcomeCard` component is used on the `HomePage` component to display a welcome message with custom text. The `tittle` and `subtittle` props are passed in to override the default placeholder text. The buttons on the card could be linked to other parts of the application, such as a marketplace or gallery of NFTs.
-## Questions:
- 1. What is the purpose of this component?
- This component is a WelcomeCard that displays a main title, subtitle, and two buttons for buying and exploring ZOO NFTs.
-
-2. What props can be passed to this component?
- The component accepts two optional props: "tittle" (which sets the main title text) and "subtittle" (which sets the subtitle text).
-
-3. What is the significance of the CSS classes used in this component?
- The CSS classes are used to style the component's layout and appearance. The classes with the "h-" prefix set the height of the elements, while the classes with the "w-" prefix set the width. The "p-" class sets padding, and the "m-" class sets margin. The "text-" class sets the font size, and the "border" class sets a border around the button elements.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/Modelview/MovingModelviewer.md b/.autodoc/docs/markdown/core/src/marketplace/Modelview/MovingModelviewer.md
deleted file mode 100644
index 5a280e443..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/Modelview/MovingModelviewer.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Modelview/MovingModelviewer.tsx)
-
-The `MovingModelviewer` component is a React component that renders a 3D model viewer using the `model-viewer` web component from Google. The component takes in several props, including the path to a GLB file, a USDZ file, a zoom level, and a boolean flag for whether to display multiple models.
-
-The component maintains state for the current GLB source and the current model index. It also defines an array of GLB file paths for multiple models.
-
-The `ModelVie` variable is a string that contains the HTML for the `model-viewer` component. It sets various attributes for the component, including the source file, loading and reveal behavior, camera controls, auto-rotate, autoplay, and AR (augmented reality) settings.
-
-The `useEffect` hook is used to update the GLB source and current model index every 7 seconds. It sets a timeout that increments the current model index and updates the GLB source to the corresponding file path. If the current model index exceeds the length of the array, it resets to 0. The `useEffect` hook also returns an empty function to clean up any resources when the component unmounts.
-
-The component returns a div that renders the `model-viewer` component using the `dangerouslySetInnerHTML` prop to set the HTML from the `ModelVie` variable.
-
-This component can be used to display 3D models in a web application, with the ability to switch between multiple models and view them in AR mode. It can be customized with different GLB and USDZ files, zoom levels, and other attributes.
-
-Example usage:
-
-```
-import MovingModelviewer from './MovingModelviewer'
-
-function App() {
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `MovingModelviewer` component?
-- The `MovingModelviewer` component is a React component that renders a 3D model viewer using the Google Model Viewer library. It can display multiple GLB models and automatically switch between them after a set time interval.
-
-2. What props can be passed to the `MovingModelviewer` component?
-- The `MovingModelviewer` component accepts four optional props: `glb` (a string representing the path to the default GLB model), `usdz` (a string representing the path to the USDZ model), `zoom` (a string representing the maximum field of view), and `multiple` (a boolean indicating whether to display multiple models).
-
-3. What is the purpose of the `useEffect` hook in the `MovingModelviewer` component?
-- The `useEffect` hook is used to update the `GlbSource` and `CurrentModel` state variables after a set time interval. It switches between the GLB models in the `Arr` array and resets the index to 0 when it reaches the end of the array. The `useEffect` hook also returns an empty function to clean up any resources when the component unmounts.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/NftPageComp/NftRight.md b/.autodoc/docs/markdown/core/src/marketplace/NftPageComp/NftRight.md
deleted file mode 100644
index f344ab8db..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/NftPageComp/NftRight.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/NftPageComp/NftRight.tsx)
-
-The `NftRight` component in the `zoo` project is a React component that renders a right-hand side panel for displaying details about a non-fungible token (NFT). The component takes in several props, including `NftText`, `NftName`, `transaction`, `TokenId`, `Hash`, and `TokenStandard`, which are used to populate the various fields in the panel.
-
-The panel is divided into two sections: "Details" and "Proof of Authenticity". The "Details" section displays information about the NFT, including the transaction ID, token ID, hash, and token standard. Each piece of information is displayed in a grid format with the label on the left and the value on the right. The "Proof of Authenticity" section displays the price of the NFT in $zoo, as well as links to view the transaction on Ether Scan and IPFs.
-
-The component uses Tailwind CSS classes to style the panel, including setting the width to 300px on small screens and 400px on large screens. The panel also has a gradient border and a black background.
-
-This component can be used in a larger project that involves displaying NFTs and their associated details. For example, it could be used in an NFT marketplace or a digital art gallery. The component could be reused throughout the project to display NFT details in a consistent and visually appealing way. Here is an example of how the component could be used in a larger React application:
-
-```
-import React from 'react';
-import NftRight from './NftRight';
-
-const NftDetails = () => {
- return (
-
-
- );
-};
-
-export default NftDetails;
-```
-
-In this example, the `NftDetails` component displays an NFT image and other details on the left-hand side of the screen, and the `NftRight` component is used to display additional details about the NFT on the right-hand side of the screen. By using the `NftRight` component, the project can ensure that NFT details are displayed consistently throughout the application.
-## Questions:
- 1. What is the purpose of this component and how is it used in the project?
- - This component is used to display details and information about a specific NFT (non-fungible token) and its transaction history. It can be used in a larger application that involves buying, selling, or trading NFTs.
-2. What are the default values for the props passed to this component?
- - The default values for the props are: NftText = 'To hatch or to hold...', NftName = 'Egg#4', transaction = '8xx902xcbx93..', TokenId = '43', Hash = '8xbsxbc9', TokenStandard = 'ERC-721'. These values will be used if the props are not explicitly passed to the component.
-3. What is the purpose of the "borderGrad" class and where is it defined?
- - The "borderGrad" class is used to apply a gradient border to the div elements that contain the NFT details and proof of authenticity. It is not defined in this file and must be defined elsewhere in the project's CSS or styling files.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/Rankings/RankingsRow.md b/.autodoc/docs/markdown/core/src/marketplace/Rankings/RankingsRow.md
deleted file mode 100644
index 57df3d620..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/Rankings/RankingsRow.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/Rankings/RankingsRow.tsx)
-
-The code above defines a React component called `RankingsRow` that renders a row for a rankings table. The component takes in four props: `Rank`, `Name`, `addy`, and `Rankid`.
-
-The component returns a `div` element with a class of `grid` that contains three columns. The first column spans three columns and displays the rank and name of the item. The second column displays the `addy` prop, which is a string representing an Ethereum address. The third column contains a button that, when clicked, navigates to a page with more information about the item.
-
-The `useRouter` hook from the `next/router` module is used to handle the navigation when the button is clicked. The `Image` component from the `next/image` module is used to display a right arrow icon.
-
-This component can be used in a larger project that displays rankings data. The component can be reused for each row in the rankings table, with the appropriate props passed in for each item. For example:
-
-```
-import RankingsRow from './RankingsRow'
-
-const rankingsData = [
- { Rank: 1, Name: '@finessequeen', addy: '0xd8 … 3a8db', Rankid: 0 },
- { Rank: 2, Name: '@crypto_king', addy: '0x4f … 8c9a', Rankid: 1 },
- { Rank: 3, Name: '@blockchain_babe', addy: '0x1a … 2b3f', Rankid: 2 },
-]
-
-const RankingsTable = () => {
- return (
-
- {/* Display NFT image and other details */}
-
-
-
-
- {rankingsData.map((item) => (
-
- )
-}
-
-export default RankingsTable
-```
-
-In this example, the `RankingsTable` component maps over an array of rankings data and renders a `RankingsRow` component for each item in the array. The `key` prop is set to the `Rankid` prop of each item to ensure that each row is uniquely identified.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `RankingsRow` that renders a row of data for a rankings table.
-
-2. What dependencies does this code use?
-- This code imports several dependencies from the `next` and `react` libraries, including `Link`, `Image`, and `useRouter`.
-
-3. What props does the `RankingsRow` component accept?
-- The `RankingsRow` component accepts four props: `Rank`, `Name`, `addy`, and `Rankid`. These props are used to populate the data displayed in the row.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/RemoveBidButton.md b/.autodoc/docs/markdown/core/src/marketplace/RemoveBidButton.md
deleted file mode 100644
index 6d63320d6..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/RemoveBidButton.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/RemoveBidButton.tsx)
-
-The code defines a React component called `RemoveBidButton` that renders a button to remove a bid for a given token. The component takes in several props including `tokenId`, `tokenType`, `currency`, `onError`, and `onRemove`.
-
-The component uses several hooks including `useActiveWeb3React`, `useGasPrice`, and `useContract` to interact with the Ethereum blockchain. Specifically, it uses the `app` and `media` contracts to remove a bid for the given `tokenId`. If the `currency` is the native currency (e.g. Ether), it uses the `app` contract to remove the bid. Otherwise, it uses the `media` contract.
-
-If the removal of the bid is successful, the `onRemove` callback is called with the `tokenId`. If there is an error, the `onError` callback is called with the error. Additionally, the component uses the `useTransactionPopups` hook to display transaction popups for successful and failed transactions.
-
-The component returns a button element with the text "Remove Bid" that calls the `removeBid` function when clicked. The `removeBid` function attempts to remove the bid using the appropriate contract and displays transaction popups or error popups as necessary.
-
-This component can be used in a larger project that involves buying and selling tokens on the Ethereum blockchain. It provides a simple way for users to remove their bids on tokens they are no longer interested in purchasing. Here is an example usage of the component:
-
-```
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `SelectCurrency` component?
- - The `SelectCurrency` component is used to display a list of supported payment currencies and allow the user to select one.
-2. Where is the `useActiveWeb3React` hook imported from?
- - The `useActiveWeb3React` hook is imported from a file located in the `../hooks` directory.
-3. What is the structure of the data returned by the `getSupportedPaymentCurrencies` function?
- - The `getSupportedPaymentCurrencies` function returns an array of currency objects, each with a `symbol` property.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/SetAsk.md b/.autodoc/docs/markdown/core/src/marketplace/SetAsk.md
deleted file mode 100644
index 35a2e295b..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/SetAsk.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/SetAsk.tsx)
-
-The `SetAsk` component is used to set an asking price for a particular asset in the Zoo project. It imports various dependencies such as `Currency`, `Token`, `ZERO_ADDRESS`, `formatCurrencyFromRawAmount`, `useActiveWeb3React`, `useContract`, `useAsset`, `useGasPrice`, `Input`, `useState`, `Button`, `SelectCurrency`, `CurrencyLogo`, `Checkbox`, `Switch`, `Typography`, `CheckIcon`, `MinusIcon`, `PlusIcon`, `t`, `i18n`, and `SetAskButton`.
-
-The component takes in a `tokenId` prop, which is used to retrieve the asset's information such as the `ask`, `currencyToken`, and `type` from the `useAsset` hook. The `ask` object contains the current asking price for the asset, while the `currencyToken` object contains information about the currency used for the asking price. The `type` prop is used to display the type of asset being priced.
-
-The component renders an input field where the user can enter the asking price for the asset. The `value` state is used to store the value entered by the user. The `selectedCurrencyToken` state is used to store the currency used for the asking price. The `showSelectCurrency` state is used to toggle the display of the `SelectCurrency` component, which allows the user to select the currency used for the asking price.
-
-When the component mounts, the `useEffect` hook is called to set the initial values of `selectedCurrencyToken`, `value`, and `offline` based on the `ask` and `currencyToken` objects retrieved from the `useAsset` hook.
-
-The component also renders a `SetAskButton` component, which is used to submit the asking price to the blockchain. The `tokenType`, `tokenId`, `amount`, `currencyToken`, and `offline` props are passed to the `SetAskButton` component.
-
-The component also renders a `Switch` component, which is used to toggle the `offline` state. However, this feature is currently commented out.
-
-Overall, the `SetAsk` component provides a user interface for setting an asking price for a particular asset in the Zoo project. It allows the user to select the currency used for the asking price and submit the asking price to the blockchain.
-## Questions:
- 1. What is the purpose of the `SetAsk` component?
-- The `SetAsk` component is used to set an ask price for a given token.
-
-2. What external libraries or dependencies does this code use?
-- This code imports various functions and hooks from other files within the project, as well as external libraries such as `ethers` and `@headlessui/react`.
-
-3. What is the significance of the `offline` state variable?
-- It is unclear from the provided code what the `offline` state variable is used for, as it is currently commented out. It may have been intended to toggle whether the ask price is available for offline transactions.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/SetAskButton.md b/.autodoc/docs/markdown/core/src/marketplace/SetAskButton.md
deleted file mode 100644
index f2ff7c960..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/SetAskButton.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/SetAskButton.tsx)
-
-The code is a React component called `SetAskButton` that allows a user to set an asking price for a specific token. The component takes in several props including `tokenId`, `tokenType`, `amount`, `currencyToken`, and `offline`.
-
-The component first imports several dependencies including `Currency` from the `@zoolabs/zdk` library, `ethers` from the `ethers` library, and several custom hooks from the `../hooks` and `../state` directories.
-
-The `SetAskButton` component then defines a function called `setAsk` that is called when the user clicks the "Set Ask" button. This function first checks if an `amount` has been provided and if so, creates an `Ask` object with the provided `amount`, `currencyToken`, and `offline` status. The `amount` is converted to the appropriate units using the `ethers.utils.parseUnits` function. The `media` contract is then used to set the ask for the specified `tokenId` with the `ask` object and the `account` and `gasPrice` values. If successful, a transaction popup is added to the state using the `addTransactionPopup` function. If an error occurs, an error popup is added to the state using the `addErrorPopup` function.
-
-Finally, the component returns a button element with the text "Set Ask" that calls the `setAsk` function when clicked. The button has several CSS classes applied to it for styling purposes.
-
-This component can be used in a larger project that involves buying and selling tokens. It allows users to set an asking price for their tokens, which can then be viewed by potential buyers. The component can be integrated into a larger UI that displays a user's tokens and allows them to manage their asking prices.
-
-Example usage:
-
-```
-Selected currency: {selectedCurrency ? selectedCurrency.symbol : 'None'}
- {/* rest of payment form */} -
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `SetBid` component?
-- The `SetBid` component is used to display and handle the process of setting a bid for a specific token.
-
-2. What external libraries or packages are being imported in this file?
-- The file is importing `react`, `@zoolabs/zdk`, `@lingui/core`, `@lingui/macro`, and `../functions` and `../hooks` from local files.
-
-3. What is the role of the `useEffect` hook in this code?
-- The `useEffect` hook is used to reset the `pendingTx` state variable whenever the `tokenId`, `account`, or `chainId` variables change.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/SetBidButton.md b/.autodoc/docs/markdown/core/src/marketplace/SetBidButton.md
deleted file mode 100644
index f7738c7dc..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/SetBidButton.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/SetBidButton.tsx)
-
-The code is a React component called `SetBidButton` that allows a user to place a bid on a particular token. The component takes in several props including `ask`, `tokenId`, `tokenType`, `amount`, and `currencyToken`.
-
-The component first imports several dependencies including `Currency` and `isNativeCurrency` from the `@zoolabs/zdk` library, as well as `useCallback` from React, and several custom hooks from the `../hooks` and `../state` directories.
-
-The `SetBidButton` component then defines a function called `setBid` that is called when the user clicks the "Place Bid" button. This function first checks if an `amount` has been provided, and if not, displays a message indicating that an amount is required.
-
-If an amount has been provided, the function creates a `Bid` object with the provided `amount`, `currency`, `bidder`, `recipient`, `sellOnShare`, and `offline` properties. The function then determines whether the `currencyToken` is a native currency or not using the `isNativeCurrency` function. If it is a native currency, the function calls the `setBid` function on the `app` contract with the provided `tokenId`, `bid`, and `gasPrice` properties. If it is not a native currency, the function calls the `setBid` function on the `media` contract with the provided `tokenId`, `bid`, and `gasPrice` properties.
-
-If the function is successful, it adds a transaction popup to the UI indicating that a bid has been placed. If there is an error, it adds an error popup to the UI.
-
-Finally, the `SetBidButton` component returns a button element with the text "Place Bid" that, when clicked, calls the `setBid` function.
-
-This component can be used in a larger project that involves buying and selling tokens. It allows users to place bids on tokens and handles the logic for interacting with the appropriate contracts depending on the type of currency being used. Developers can use this component as a building block for more complex UIs involving token trading.
-
-Example usage:
-
-```
-Asset Details
-| Rank | -Column A | -Column B | -Column C | -Column D | -Column E | -
|---|
| Column A | -Column B | -Column C | -Column D | -Actions | -
|---|
-
- )
-}
-
-export default WalletPage
-```
-
-In this example, the `WalletNav` component is imported and used within the `WalletPage` component to render the navigation bar at the top of the page.
-
-Overall, this code is a small but important piece of the larger project's wallet feature, providing a reusable navigation component that can be easily imported and used in other parts of the project.
-## Questions:
- 1. What is the purpose of this component?
- - This component is called `WalletNav` and it returns a simple `div` element with the text "WalletNav". It is unclear what its purpose is beyond that.
-
-2. Are there any props that can be passed to this component?
- - It is not shown in this code whether or not this component accepts any props. Further investigation into its usage in the project would be necessary to determine if it does.
-
-3. Where is this component being used in the project?
- - Without additional context, it is unclear where this component is being used in the project. It would be helpful to know where it is being imported and rendered to understand its place in the overall application.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/state.md b/.autodoc/docs/markdown/core/src/marketplace/state.md
deleted file mode 100644
index 36c00b565..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/state.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/state.ts)
-
-The `zoo` file contains several functions and types that are used in the larger project. The main purpose of this file is to provide functionality related to assets and token types.
-
-The `useAsset` function is used to retrieve information about a specific asset, given its token ID. It uses the `useActiveWeb3React` and `useQuery` hooks to interact with the Ethereum blockchain and retrieve data from the GraphQL API. The function returns an object containing information about the asset, such as its owner, current ask price, and currency balance.
-
-The `useTokenType` function is similar to `useAsset`, but is used to retrieve information about a specific token type, given its name. It also uses the `useActiveWeb3React` and `useQuery` hooks to interact with the Ethereum blockchain and retrieve data from the GraphQL API. The function returns an object containing information about the token type, such as its owner, current ask price, and minted/supply amounts.
-
-The `usePrice` function is used to retrieve the current prices of various cryptocurrencies from the Coingecko API. It uses the `useActiveWeb3React` hook to determine the current chain ID, and returns an object containing the prices of various cryptocurrencies in USD.
-
-The `useBids` function is used to retrieve information about the bids for a specific asset. It uses the `useActiveWeb3React` and `useQuery` hooks to interact with the Ethereum blockchain and retrieve data from the GraphQL API. The function returns an object containing information about the bids, such as the highest bid amount and the USD value of each bid.
-
-The `useIsAddress` function is a utility function that is used to determine if a given Ethereum address is equal to another address.
-
-The `AssetState` and `TokenType` types are used to define the shape of the objects returned by `useAsset` and `useTokenType`, respectively.
-
-Overall, this file provides important functionality for interacting with assets and token types in the larger project. It uses various hooks and APIs to retrieve data from the Ethereum blockchain and other sources, and returns objects containing useful information about assets and token types.
-## Questions:
- 1. What is the purpose of the `useAsset` function?
-- The `useAsset` function is used to retrieve information about a specific asset, such as its owner, current ask price, and currency balance.
-
-2. What is the purpose of the `usePrice` function?
-- The `usePrice` function is used to retrieve the current prices of various cryptocurrencies from the CoinGecko API, and to calculate the USD value of a given token amount.
-
-3. What is the purpose of the `useTokenTypes` function?
-- The `useTokenTypes` function is used to retrieve information about all token types associated with a particular contract, such as the number of tokens minted and their metadata URIs. However, it appears that this function is currently commented out and not being used in the code.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/marketplace/types.md b/.autodoc/docs/markdown/core/src/marketplace/types.md
deleted file mode 100644
index 9c12f4292..000000000
--- a/.autodoc/docs/markdown/core/src/marketplace/types.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/marketplace/types.ts)
-
-This file contains various types used in the zoo project, as well as a type for Coingecko prices and a type for the highest bid.
-
-The `Currency`, `BigintIsh`, and `Token` types are imported from the `@zoolabs/zdk` library, while the `BigNumber` type is imported from the `ethers` library. These types are likely used throughout the project to represent different aspects of tokens and currency.
-
-The `TokenId` type is defined as either a string or a number, and is likely used to represent the unique identifier for a token.
-
-The `Ask` and `Bid` types are defined as objects with various properties, including an `amount` property that can be either a `BigintIsh` or a `BigNumber`, a `currency` property that is a string, and various other properties such as `offline`, `bidder`, and `recipient`. These types are likely used to represent bids and asks in the project's marketplace.
-
-The `GraphUser`, `GraphCurrency`, `GraphMedia`, `GraphAsk`, `GraphBid`, and `GraphLazyBid` types are all used to represent different aspects of data returned from GraphQL queries. These types likely correspond to different types of data that can be queried from the project's GraphQL API.
-
-The `CoingeckoPrices` type is defined as an object with keys that are coin IDs and values that are objects with a `usd` property. This type is likely used to represent price data from the Coingecko API.
-
-The `HighestBid` type is defined as an object with a `bid` property that is a `GraphBid` object, a `usdAmount` property that is a number, and a `createdAtTimestamp` property that is a string. This type is likely used to represent the highest bid on a particular item in the marketplace.
-
-Overall, this file contains various types that are used throughout the zoo project to represent different aspects of tokens, currency, bids, asks, and data returned from GraphQL queries. These types are likely used extensively throughout the project to ensure consistency and type safety.
-## Questions:
- 1. What is the purpose of the `zdk` library and how is it used in this code?
-- The `zdk` library is imported to provide access to the `Currency`, `BigintIsh`, and `Token` types used in the `Ask` and `Bid` types.
-
-2. What is the difference between an `Ask` and a `Bid`?
-- An `Ask` represents an offer to sell a media asset, while a `Bid` represents an offer to buy a media asset. `Bid` includes additional properties such as `bidder`, `recipient`, and `sellOnShare`.
-
-3. What is the `GraphLazyBid` type and why is the `media` property commented out?
-- `GraphLazyBid` is a type used in GraphQL responses to represent a bid without the associated media asset. The `media` property is commented out because it is not always included in the response and is not required for all use cases.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/Auction/index.md b/.autodoc/docs/markdown/core/src/modals/Auction/index.md
deleted file mode 100644
index 155ad1cd5..000000000
--- a/.autodoc/docs/markdown/core/src/modals/Auction/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/Auction/index.tsx)
-
-This code defines a React component called `AuctionModal` that is used to create or edit auctions for animals in a virtual zoo. The component is imported into other parts of the project and is used to display a modal window with a form for creating or editing auctions.
-
-The component imports several hooks from the project's state management system, including `useModalOpen`, `useAuctionModal`, and `useWalletModalToggle`. It also imports two custom hooks from the `state/zoo/hooks` module called `useCreateAuction` and `useEditAuction`. These hooks provide access to functions for creating and editing auctions.
-
-The `AuctionModal` component takes two props: `nft` and `edit`. `nft` is an object that represents the animal being auctioned, and `edit` is a boolean flag that indicates whether the auction is being created or edited.
-
-The component renders a `Modal` component from the project's `components` directory. The `Modal` component is a reusable component that displays a modal window with a header and content. The content of the modal is generated by the `getModalContent` function, which returns a form with input fields for the auction's duration, reserve price, and curator fee.
-
-The `handleAuction` function is called when the user submits the form. It checks if the user is logged in and either creates a new auction or edits an existing one using the `useCreateAuction` and `useEditAuction` hooks. If the user is not logged in, the `toggleWallet` function is called to display a wallet modal.
-
-The `successCallback` function is called when an auction is successfully created or edited. It closes the auction modal and redirects the user to the market page.
-
-Overall, this code provides a way for users to create and edit auctions for animals in the virtual zoo. It uses several hooks and custom functions to manage the state of the auction creation/editing process and displays a modal window with a form for inputting auction details.
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code is a React component that creates a modal for putting an animal on auction. It uses various hooks and functions to handle the auction creation and editing process.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including React, Redux, Next.js, and various custom hooks and components.
-
-3. What is the role of the `useCallback` hook in this code?
-- The `useCallback` hook is used to define a memoized callback function that is passed as a parameter to other functions. It is used to optimize performance by preventing unnecessary re-renders of components that depend on the callback function.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/CurrencyList.md b/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/CurrencyList.md
deleted file mode 100644
index 243398578..000000000
--- a/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/CurrencyList.md
+++ /dev/null
@@ -1,54 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/CurrencyList.tsx)
-
-The `CurrencyList` component is a React component that renders a list of tokens. It takes in a list of tokens, a selected token, and a callback function to handle selecting a token. The component uses the `FixedSizeList` component from the `react-window` library to render the list of tokens.
-
-Each token in the list is rendered as a `CurrencyRow` component, which displays the token's logo, symbol, and name. When a token is selected, the `onCurrencySelect` callback function is called with the selected token as an argument.
-
-The `CurrencyList` component also includes a `BreakLineComponent` component, which is used to display a message indicating that the list of tokens has been expanded to include tokens from inactive token lists.
-
-The `CurrencyList` component also includes an `ImportRow` component, which is used to display a row for importing a token. This row is only displayed if the index of the token in the list is greater than the length of the list of tokens.
-
-The `CurrencyList` component also includes a `Balance` component, which is used to display the balance of a token. However, this component is currently commented out and not being used.
-
-Overall, the `CurrencyList` component is a reusable component that can be used to display a list of tokens and handle selecting a token. It is used in the larger project to allow users to select a token to trade on a decentralized exchange.
-
-Example usage:
-
-```jsx
-import CurrencyList from "./CurrencyList";
-
-function MyComponent() {
- const tokens = [
- { name: "Ethereum", symbol: "ETH", logoURI: "https://example.com/eth.png" },
- { name: "Wrapped Bitcoin", symbol: "WBTC", logoURI: "https://example.com/wbtc.png" },
- { name: "Chainlink", symbol: "LINK", logoURI: "https://example.com/link.png" },
- ];
-
- const [selectedToken, setSelectedToken] = useState(null);
-
- const handleTokenSelect = (token) => {
- setSelectedToken(token);
- };
-
- return (
- Wallet Page
- {/* other wallet-related components */} -
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `CurrencyList` component?
-- The `CurrencyList` component is used to display a list of tokens/currencies and allows the user to select a currency.
-
-2. What is the significance of the `Token` type and how is it used in this code?
-- The `Token` type represents a cryptocurrency token and is used throughout the code to represent different currencies. It is used as a parameter in the `currencyKey` function and as a prop in the `CurrencyRow` and `CurrencyList` components.
-
-3. What is the purpose of the `Tag` and `TagContainer` components?
-- The `Tag` component is used to display a tag for a currency, while the `TagContainer` component is used to display multiple tags for a currency. However, these components are currently commented out and not being used in the code.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/CurrencyModalView.md b/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/CurrencyModalView.md
deleted file mode 100644
index 297669489..000000000
--- a/.autodoc/docs/markdown/core/src/modals/BridgeSearchModal/CurrencyModalView.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/BridgeSearchModal/CurrencyModalView.ts)
-
-The code above defines an enum called `CurrencyModalView`. An enum is a data type that consists of a set of named values, and it is used to define a set of constants that represent possible values for a variable. In this case, the `CurrencyModalView` enum has four possible values: `search`, `manage`, `importToken`, and `importList`.
-
-This enum is exported as the default value of the module, which means that it can be imported and used in other parts of the project. The purpose of this enum is likely to provide a set of options for a modal view that deals with currency-related functionality. For example, if there is a modal view that allows the user to manage their currencies, the `CurrencyModalView.manage` value could be used to indicate that the modal should display the manage view.
-
-Here is an example of how this enum could be used in a React component:
-
-```
-import React from 'react';
-import CurrencyModalView from './CurrencyModalView';
-
-function CurrencyModal(props) {
- const { view } = props;
-
- switch (view) {
- case CurrencyModalView.search:
- return Select a token:
-| Name | -Age | -
- |
-
|---|
- {/* main view of the application */}
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code defines a React component called `NFTExpandedModal` that renders a modal with content based on the `nft` and `isAuction` props passed to it. The content can be either a video or a 3D model viewer.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including `React`, `next/router`, `next/dynamic`, and several custom hooks defined in `../../state/application/hooks`.
-
-3. What is the purpose of the `ssr: false` option passed to `next/dynamic`?
-- The `ssr: false` option tells Next.js to only load the `ModelViewer` component on the client side, rather than during server-side rendering. This is necessary because the `ModelViewer` component relies on WebGL, which is not available during server-side rendering.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/FreeNFTModal/index.md b/.autodoc/docs/markdown/core/src/modals/FreeNFTModal/index.md
deleted file mode 100644
index 75400fe16..000000000
--- a/.autodoc/docs/markdown/core/src/modals/FreeNFTModal/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/FreeNFTModal/index.tsx)
-
-The `FreeNFTModal` component is a React component that renders a modal for freeing an NFT. It is part of the larger `zoo` project and is imported from various other files within the project.
-
-The component imports several hooks from the `application` and `zoo` state slices, including `useModalOpen`, `useFreeNftModal`, and `useFreeNFT`. It also imports several components from the `components` folder, including `Modal`, `ModalHeader`, and `ModelViewer`.
-
-The component takes an `nft` prop, which is an object representing the NFT to be freed. The modal displays a preview of the NFT, along with a message asking the user if they are sure they want to free the animal. If the user confirms, the NFT is freed and the collateral is returned, but the NFT is lost forever.
-
-The `FreeNFTModal` component uses several hooks to manage state and handle user interactions. For example, it uses the `useModalOpen` hook to determine whether the modal is open, and the `useFreeNftModal` hook to toggle the modal. It also uses the `useActiveWeb3React` hook to get the user's account information, and the `useRouter` hook to navigate to a different page after the NFT is freed.
-
-The component also defines several callback functions, including `successCallback`, which is called after the NFT is freed and navigates the user to the wallet page, and `freeNft`, which frees the NFT if the user is logged in and shows a wallet modal if they are not.
-
-The `FreeNFTModal` component renders a `Modal` component that wraps the modal content. The modal content is defined in the `getModalContent` function, which returns a JSX element that displays the NFT preview, confirmation message, and "Set Free" button. The "Set Free" button is disabled if the NFT is currently being freed.
-
-Overall, the `FreeNFTModal` component provides a way for users to free their NFTs and get their collateral back, but at the cost of losing the NFT forever. It is a small but important part of the larger `zoo` project, which is likely a platform for buying, selling, and trading NFTs related to animals.
-## Questions:
- 1. What is the purpose of this code?
-- This code is a React component that renders a modal for freeing an animal NFT and returning collateral.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including React, Redux, Next.js, and dynamic importing.
-
-3. What is the role of the `useFreeNFT` hook?
-- The `useFreeNFT` hook is used to call the `freeNftF` function, which frees the specified animal NFT and returns collateral.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/HatchEggModal/Animation.md b/.autodoc/docs/markdown/core/src/modals/HatchEggModal/Animation.md
deleted file mode 100644
index 1fa9c5c39..000000000
--- a/.autodoc/docs/markdown/core/src/modals/HatchEggModal/Animation.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/HatchEggModal/Animation.tsx)
-
-The `HatchEggAnimationModal` component is a React component that displays an animation of an egg hatching. The component is used as a modal in the larger project and is triggered when a user hatches an egg. The modal displays the animation and redirects the user to the wallet page once the animation is complete.
-
-The component imports two hooks from the `application` state: `useHatchEggAnimationModal` and `useModalOpen`. These hooks are used to manage the state of the modal. The `useHatchEggAnimationModal` hook is used to toggle the modal on and off, while the `useModalOpen` hook is used to check if the modal is open.
-
-The component also imports the `useRouter` hook from `next/router`. This hook is used to redirect the user to the wallet page once the animation is complete.
-
-The component uses the `useState` hook to manage the state of the animation. The `useEffect` hook is used to set the animation based on the name of the egg that was hatched. If the name of the egg matches one of the cases in the switch statement, the corresponding animation is set. If the name of the egg does not match any of the cases, a default animation is set.
-
-The `getModalContent` function returns the content of the modal. It contains a `video` element that displays the animation. The `onEnded` event listener is used to check if the animation has ended. If the animation has ended and the modal is open, the `toggleModal` function is called to close the modal. The `push` function is used to redirect the user to the wallet page.
-
-The `Modal` component is used to display the content of the modal. It receives the `isOpen`, `onDismiss`, `minHeight`, and `isMax` props. The `isOpen` prop is used to check if the modal is open, the `onDismiss` prop is used to close the modal, the `minHeight` prop is used to set the minimum height of the modal, and the `isMax` prop is used to set the maximum height of the modal.
-
-Example usage:
-
-```jsx
-import HatchEggAnimationModal from "./path/to/HatchEggAnimationModal";
-
-function MyComponent() {
- return (
-
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code is for a React component that displays a modal for hatching an egg animation.
-
-2. What is the significance of the `useModalOpen` and `useHatchEggAnimationModal` hooks?
-- The `useModalOpen` hook is used to determine if the hatch egg animation modal is currently open. The `useHatchEggAnimationModal` hook is used to toggle the hatch egg animation modal.
-
-3. What is the purpose of the `switch` statement in the `useEffect` hook?
-- The `switch` statement sets the animation URL based on the name of the NFT (non-fungible token) passed as a prop to the component. If the name does not match any of the cases, a default animation is used. However, the `switch` statement is missing `break` statements, which may cause unexpected behavior.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/HatchEggModal/index.md b/.autodoc/docs/markdown/core/src/modals/HatchEggModal/index.md
deleted file mode 100644
index bd7329f86..000000000
--- a/.autodoc/docs/markdown/core/src/modals/HatchEggModal/index.md
+++ /dev/null
@@ -1,51 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/HatchEggModal/index.tsx)
-
-This code defines a React component called `HatchEggModal` that renders a modal for hatching an egg. The modal is opened by calling the `useHatchEggModal` hook from the `application` state slice. The modal displays a video of the egg and a button to hatch it. The button is disabled if the user is not logged in or if the egg is still in the process of hatching.
-
-The component uses several hooks from the `web3-react`, `zoo`, and `hooks` libraries. The `useWeb3React` hook provides access to the user's Ethereum account, which is used to hatch the egg. The `useSelector` hook is used to retrieve the `loading` state from the `zoo` slice of the Redux store. The `useHatch` hook is used to hatch the egg. The `useMedia` hook is used to determine the user's screen size, and the `useZooToken` hook is used to retrieve the `ZooToken` contract instance.
-
-The component also defines a `WALLET_VIEWS` object that maps different views of the wallet modal to string keys.
-
-The `HatchEggModal` component takes two props: `nftItem` and `success`. `nftItem` is an object that contains information about the egg, including its `dropId` and `token_uri`. `success` is a callback function that is called when the egg is successfully hatched.
-
-The `HatchEggModal` component renders a `Modal` component from the `components` directory. The `Modal` component is used to display the egg hatching modal. The `Modal` component takes several props, including `isOpen`, `onDismiss`, `minHeight`, `maxHeight`, `padding`, and `maxWidth`.
-
-The `HatchEggModal` component defines several functions, including `toggleModal`, `toggleWallet`, `handleHatchEgg`, and `getModalContent`. `toggleModal` is a function that toggles the visibility of the egg hatching modal. `toggleWallet` is a function that toggles the visibility of the wallet modal. `handleHatchEgg` is a function that is called when the user clicks the hatch button. It checks if the user is logged in and then calls the `hatchEgg` function to hatch the egg. If the user is not logged in, it calls the `toggleWallet` function to open the wallet modal. `getModalContent` is a function that returns the content of the egg hatching modal.
-
-The `HatchEggModal` component is exported as the default export of the file and can be used in other parts of the `zoo` project by importing it and rendering it. For example, it could be used in a page that displays the user's inventory of eggs and allows them to hatch them.
-
-Example usage:
-
-```jsx
-import HatchEggModal from "./path/to/HatchEggModal";
-
-function EggInventory({ eggs }) {
- const [selectedEgg, setSelectedEgg] = useState(null);
-
- function handleHatchSuccess() {
- // do something when egg is hatched
- }
-
- return (
-
- {eggs.map((egg) => (
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `useHatch` hook and how is it used in this code?
-- The `useHatch` hook is used to hatch an egg by calling the `hatchEgg` function with the appropriate parameters. It is used in the `handleHatchEgg` function to hatch the egg when the "Hatch Egg" button is clicked.
-
-2. What is the significance of the `WALLET_VIEWS` object?
-- The `WALLET_VIEWS` object is used to define the different views of the wallet modal. It is used to determine which view to display when the wallet modal is opened.
-
-3. What is the purpose of the commented out code related to calculating the time left for hatching an egg?
-- The commented out code is used to calculate the time left for hatching an egg based on the egg's timestamp and the `HATCH_EGG_WAIT_PERIOD` environment variable. It is not currently being used in the code, but may have been used in a previous version or may be used in a future version.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/MarketModals/BuyZooModal.md b/.autodoc/docs/markdown/core/src/modals/MarketModals/BuyZooModal.md
deleted file mode 100644
index dbd79528e..000000000
--- a/.autodoc/docs/markdown/core/src/modals/MarketModals/BuyZooModal.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/MarketModals/BuyZooModal.tsx)
-
-The code above defines a React functional component called `BuyZooModal`. This component is responsible for rendering a modal that allows users to buy a zoo. The modal is triggered by a button click and is displayed using the `Modal` component from the `components` directory.
-
-The `BuyZooModal` component imports two hooks from the `state/application/hooks` module: `useModalOpen` and `useBuyZooModalToggle`. These hooks are used to manage the state of the modal. The `useModalOpen` hook returns a boolean value that indicates whether the modal is currently open or closed. The `useBuyZooModalToggle` hook returns a function that toggles the state of the modal.
-
-The `BuyZooModal` component renders the `Modal` component with several props. The `isOpen` prop is set to the value returned by the `useModalOpen` hook, which determines whether the modal is displayed or not. The `onDismiss` prop is set to a function that does nothing when the modal is dismissed. The `isMax` prop is set to `true`, which means that the modal will take up the entire screen. The `maxWidth` prop is set to `1200`, which is the maximum width of the modal. The `maxHeight` prop is set to `80`, which is the maximum height of the modal.
-
-Inside the `Modal` component, there is a `div` element that contains a `h1` element with the text "Buy Zoo Modal". When the `div` element is clicked, the `toggleBuyZooModal` function is called, which toggles the state of the modal.
-
-This component can be used in the larger project to provide users with a way to buy a zoo. It can be rendered on a page or triggered by a button click. Here is an example of how this component can be used:
-
-```
-import React from "react";
-import BuyZooModal from "path/to/BuyZooModal";
-
-const HomePage: React.FC = () => {
- const [showModal, setShowModal] = React.useState(false);
-
- const handleButtonClick = () => {
- setShowModal(true);
- };
-
- return (
- setSelectedEgg(egg)}>
-
-
- ))}
- {selectedEgg && (
-
-
- );
-};
-
-export default HomePage;
-```
-
-In this example, the `BuyZooModal` component is rendered conditionally based on the value of the `showModal` state variable. When the "Buy a Zoo" button is clicked, the `showModal` variable is set to `true`, which triggers the rendering of the `BuyZooModal` component.
-## Questions:
- 1. What is the purpose of the `BuyZooModal` component?
-- The `BuyZooModal` component is a React functional component that renders a modal for buying a zoo. It uses the `Modal` component from the `components` directory and some custom hooks from the `state/application/hooks` directory to manage the modal state.
-
-2. What props does the `Modal` component receive?
-- The `Modal` component receives four props: `isOpen`, `onDismiss`, `isMax`, and `maxWidth`. `isOpen` is a boolean that determines whether the modal is open or closed. `onDismiss` is a function that is called when the modal is dismissed. `isMax` is a boolean that determines whether the modal should be maximized. `maxWidth` is a number that determines the maximum width of the modal.
-
-3. What is the purpose of the `toggleBuyZooModal` function?
-- The `toggleBuyZooModal` function is a custom hook that toggles the state of the `buyZooModal` variable in the `state/application/hooks` directory. It is used to open and close the modal when the user clicks on the `div` element that contains the `h1` element.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/NetworkMigrationModal/index.md b/.autodoc/docs/markdown/core/src/modals/NetworkMigrationModal/index.md
deleted file mode 100644
index a556603c3..000000000
--- a/.autodoc/docs/markdown/core/src/modals/NetworkMigrationModal/index.md
+++ /dev/null
@@ -1,25 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/NetworkMigrationModal/index.tsx)
-
-The code is a React component that renders a modal for network migration in the zoo project. The modal is triggered by a button click and displays a countdown timer, a button to burn tokens, and a link to copy the burn address. The countdown timer is calculated based on the difference between the current date and a hardcoded end date. The timer is updated every minute using a setInterval function. The burn button calls a function that transfers the user's zoo tokens to a hardcoded burn address. The amount of tokens transferred is calculated based on the user's zoo balance. The burn address is copied to the clipboard when the user clicks the copy link. The component uses several hooks from the zoo project, including useModalOpen, useNetworkMigrationModalToggle, useTransferZoo, and useSelector. It also imports several components and libraries, including Modal, ModalHeader, Web3, and dynamic. The ModelViewer component is loaded dynamically using the dynamic function from Next.js. The component is exported as the default export of the file and can be used in other parts of the zoo project by importing it and rendering it as a React component. For example:
-
-```
-import NetworkMigrationModal from 'zoo/components/NetworkMigrationModal';
-
-function MyComponent() {
- return (
- Welcome to the Zoo!
- - {showModal &&
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code is a React component that renders a modal for network migration. It includes a countdown timer, a button to burn tokens, and a link to copy a burn address.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including React, Redux, MUI, Web3, and Next.js.
-
-3. What is the significance of the `ssr: false` option in the `dynamic` import statement?
-- The `ssr: false` option in the `dynamic` import statement ensures that the `ModelViewer` component is not rendered on the server side, but only on the client side. This is important for performance reasons and to avoid issues with server-side rendering.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/NetworkModal/index.md b/.autodoc/docs/markdown/core/src/modals/NetworkModal/index.md
deleted file mode 100644
index 284ed8513..000000000
--- a/.autodoc/docs/markdown/core/src/modals/NetworkModal/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/NetworkModal/index.tsx)
-
-The `NetworkModal` component is responsible for rendering a modal that allows users to switch between different Ethereum networks. The component imports various constants and hooks from other files in the project, including the `networks` configuration file and several custom hooks defined in the `application` and `hooks` directories.
-
-The component first retrieves the current chain ID, library, and account using the `useActiveWeb3React` hook. It then checks if the chain ID is defined, and if not, returns `null` to prevent the modal from rendering.
-
-Assuming the chain ID is defined, the component renders a `Modal` component from the `components` directory, which displays a header with a "Select a Network" title and a message indicating the current network being used by the user. The available networks are then displayed in a grid, with each network represented by a button that includes an icon, label, and background color gradient. If the user is currently on a particular network, the corresponding button is highlighted with a different background color gradient.
-
-When a user clicks on a network button, the `toggleNetworkModal` function is called to close the modal, and a cookie is set to store the selected chain ID. Depending on whether the selected network is supported by MetaMask, the `library` object is used to call either the `wallet_switchEthereumChain` or `wallet_addEthereumChain` method to switch to the new network.
-
-Overall, the `NetworkModal` component provides a user-friendly way for users to switch between different Ethereum networks, which is an important feature for decentralized applications that may be deployed on multiple networks. The component can be used in conjunction with other components and hooks in the `application` and `hooks` directories to provide a seamless user experience for interacting with the Zoo project.
-## Questions:
- 1. What is the purpose of this code?
-- This code is responsible for rendering a modal that allows the user to select a network to connect to.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including `next/image`, `react`, and `cookie-cutter`.
-
-3. What happens if the `chainId` is not defined?
-- If the `chainId` is not defined, the function returns `null` and the modal is not rendered.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/NetworkPopup/index.md b/.autodoc/docs/markdown/core/src/modals/NetworkPopup/index.md
deleted file mode 100644
index 38e3a6e7b..000000000
--- a/.autodoc/docs/markdown/core/src/modals/NetworkPopup/index.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/NetworkPopup/index.tsx)
-
-The code is a React component that renders a network popup menu for a web3-enabled application. The popup displays a list of available networks and allows the user to switch between them. The component uses the `@headlessui/react` library to create the popup and the `next-themes` library to handle theme switching.
-
-The `NetworkPopup` component takes two props: `userEthBalance` and `NATIVE`. `userEthBalance` is the user's ETH balance, and `NATIVE` is an object that maps network IDs to their native tokens.
-
-The component uses the `useActiveWeb3React` hook from the `hooks` directory to get the current chain ID, library, and account. If there is no chain ID, the component returns `null`.
-
-The component then renders a `Popover` component from `@headlessui/react`. The `Popover` component takes a function as a child that returns an object with an `open` property. The `open` property is `true` when the popup is open and `false` when it is closed.
-
-The `Popover` component renders a button that displays the user's ETH balance and symbol. When the button is clicked, the popup opens, displaying a list of available networks. The list is rendered using the `AVAILABLE_NETWORKS` array from the `config/networks` file.
-
-For each network in the list, the component renders a button that displays the network's name and icon. If the network is the current network, the button is disabled and displays a green dot to indicate that it is selected. If the network is not the current network, the button is clickable and switches the user to that network when clicked.
-
-The component uses the `cookie-cutter` library to set the `chainId` cookie when the user switches networks. It also uses the `library` object to call the `wallet_switchEthereumChain` or `wallet_addEthereumChain` method to switch networks in the user's wallet.
-
-Overall, this component provides a simple and intuitive way for users to switch between networks in a web3-enabled application.
-
-Example usage:
-
-```jsx
-import NetworkPopup from "./components/NetworkPopup";
-
-function App() {
- return (
- Welcome to my component
-
-
- );
-}
-```
-## Questions:
- 1. What does this code do?
-- This code exports a React component called `NetworkPopup` that renders a popover with a list of available networks and allows the user to switch between them.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several external libraries and dependencies, including "@headlessui/react", "next/link", "../../functions/styling", "next-themes", "hooks/useActiveWeb3React", "config/networks", "next/image", and "cookie-cutter".
-
-3. What is the purpose of the `useActiveWeb3React` hook?
-- The `useActiveWeb3React` hook is used to retrieve the current chain ID, library, and account from the user's active Web3 provider. These values are used to determine which network the user is currently connected to and to switch between networks when the user selects a different one from the popover.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/NftModal/index.md b/.autodoc/docs/markdown/core/src/modals/NftModal/index.md
deleted file mode 100644
index 0738adbc0..000000000
--- a/.autodoc/docs/markdown/core/src/modals/NftModal/index.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/NftModal/index.tsx)
-
-The `NftModal` component is a React functional component that renders a modal window containing information about a specific NFT (non-fungible token) item. The component receives several props, including the `nftItem` object, which contains information about the NFT, such as its name, attributes, and kind. The component also receives several callback functions, including `hatchEgg`, `feed`, `breed`, and `auction`, which are used to perform various actions related to the NFT.
-
-The modal window is composed of two main sections: the left section displays a video or 3D model of the NFT, depending on its kind, while the right section displays various information about the NFT, such as its name, attributes, age, and description. The right section also contains several buttons that allow the user to perform various actions related to the NFT, such as hatching an egg, feeding the NFT, breeding it, or putting it up for auction.
-
-The component uses several other components and libraries, such as `Modal` from the `components` directory, `BidModalHeader` from the `components/ModalHeader` directory, `Image` from the `next/image` library, `AccessAlarmRoundedIcon` from the `@mui/icons-material` library, and `ModelViewer` from the `components` directory. The component also uses several custom hooks from the `state/application/hooks` directory, such as `useMyNftModalToggle` and `useModalOpen`.
-
-Overall, the `NftModal` component provides a convenient way to display and interact with NFT items in the larger project. It allows users to view detailed information about their NFTs, as well as perform various actions related to them, such as hatching eggs, feeding, breeding, or auctioning them.
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code defines a React functional component called `NftModal` that renders a modal window displaying information about a specific NFT item, as well as buttons to perform actions such as hatching, feeding, breeding, and auctioning the NFT.
-
-2. What external libraries or components does this code use?
-- This code imports several external libraries and components, including `React`, `next/image`, `@mui/icons-material`, `moment`, and a custom `Modal` component. It also uses a dynamic import to load a `ModelViewer` component from a separate file.
-
-3. What are the props passed to the `NftModal` component and how are they used?
-- The `NftModal` component receives four props: `nftItem`, `hatchEgg`, `feed`, `breed`, and `auction`. These props are used to display information about the NFT item and to define the behavior of the action buttons in the modal window. For example, clicking the "HATCH" button calls the `hatchEgg` function passed as a prop.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/NotificationModal/index.md b/.autodoc/docs/markdown/core/src/modals/NotificationModal/index.md
deleted file mode 100644
index 0107e646f..000000000
--- a/.autodoc/docs/markdown/core/src/modals/NotificationModal/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/NotificationModal/index.tsx)
-
-The code is a React component that renders a notification dialog box. The dialog box is displayed as a modal that appears in the center of the screen and overlays the rest of the content. The component uses the `Dialog` and `Transition` components from the `@headlessui/react` library to create the modal.
-
-The `Notification` component takes two optional props: `title` and `hideOpenButton`. The `title` prop is used to set the title of the dialog box, while the `hideOpenButton` prop is used to control whether or not the button that opens the dialog box is displayed. By default, the `hideOpenButton` prop is set to `true`, which means that the button is hidden.
-
-The component uses the `useState` hook to manage the state of the dialog box. The `isOpen` state variable is used to determine whether the dialog box is open or closed. The `openModal` and `closeModal` functions are used to update the `isOpen` state variable.
-
-The `return` statement of the component renders the dialog box. If the `hideOpenButton` prop is set to `false`, a button is displayed that, when clicked, opens the dialog box. The `Transition` component is used to animate the appearance and disappearance of the dialog box. When the `isOpen` state variable is `true`, the `Dialog` component is displayed. The `Dialog` component contains the content of the dialog box, including the title, message, and close button.
-
-The `Dialog` component is styled using Tailwind CSS classes. The `Dialog.Title` component is used to display the title of the dialog box, while the `Dialog.Description` component is used to display the message. The `closeModal` function is called when the close button is clicked, which updates the `isOpen` state variable and closes the dialog box.
-
-Overall, this component can be used to display notifications or alerts to the user in a visually appealing and user-friendly way. It can be easily integrated into a larger React project by importing and using the `Notification` component. For example:
-
-```
-import Notification from './Notification';
-
-function App() {
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `Notification` component?
-- The `Notification` component is a modal dialog box that can be opened and closed by the user.
-
-2. What is the role of the `Transition` component?
-- The `Transition` component is used to animate the appearance and disappearance of the modal dialog box.
-
-3. What is the purpose of the `hideOpenButton` prop?
-- The `hideOpenButton` prop is used to conditionally render the "Open dialog" button. If it is set to `true`, the button will not be displayed.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/SearchModal/CommonBases.md b/.autodoc/docs/markdown/core/src/modals/SearchModal/CommonBases.md
deleted file mode 100644
index 1505e95da..000000000
--- a/.autodoc/docs/markdown/core/src/modals/SearchModal/CommonBases.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/SearchModal/CommonBases.tsx)
-
-The `CommonBases` component is a React functional component that renders a list of commonly used tokens (referred to as "bases") for a given blockchain network. The component takes in three props: `chainId`, `selectedCurrency`, and `onSelect`.
-
-The `chainId` prop is an optional number that specifies the blockchain network for which the list of common bases should be displayed. If `chainId` is not provided, the component will not render any bases. If `chainId` is provided, the component will look up the list of common bases for that network from the `COMMON_BASES` object in the `routing` configuration file. If the list of common bases for the specified network is not found, an empty array is used instead.
-
-The `selectedCurrency` prop is an optional `Currency` object that represents the currently selected base. If `selectedCurrency` is provided, the component will disable the button for that base and prevent it from being selected again.
-
-The `onSelect` prop is a callback function that is called when a base is selected. The function takes in a `Currency` object representing the selected base.
-
-The component renders a list of buttons, one for each base in the list of common bases. Each button displays the base's logo and symbol, and is disabled if the base is already selected. When a button is clicked, the `onSelect` callback is called with the corresponding `Currency` object.
-
-This component can be used in a larger project that involves selecting a base token for a trading pair. For example, in a decentralized exchange application, the user may need to select a base token before selecting a quote token to create a trading pair. The `CommonBases` component provides a pre-defined list of commonly used base tokens for the user to choose from, making the selection process easier and more intuitive.
-
-Example usage:
-
-```
-Welcome to my app
-
-
- {showManage && (
- setShowManage(false)}
- setModalView={(view) => console.log(view)}
- setImportToken={(token) => console.log(token)}
- setImportList={(list) => console.log(list)}
- setListUrl={(url) => console.log(url)}
- />
- )}
-
- );
-}
-```
-## Questions:
- 1. What dependencies does this code use?
-- This code uses React, react-virtualized-auto-sizer, and @lingui/macro as dependencies.
-
-2. What is the purpose of the Manage component?
-- The Manage component is responsible for rendering a modal that allows the user to manage lists and tokens.
-
-3. What props does the Manage component expect?
-- The Manage component expects onDismiss, setModalView, setImportList, setImportToken, and setListUrl as props, all of which are functions.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/SearchModal/ManageLists.md b/.autodoc/docs/markdown/core/src/modals/SearchModal/ManageLists.md
deleted file mode 100644
index 68bf97801..000000000
--- a/.autodoc/docs/markdown/core/src/modals/SearchModal/ManageLists.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/SearchModal/ManageLists.tsx)
-
-The `ManageLists` component is responsible for rendering a list of token lists that can be managed by the user. It imports various components and hooks from other files in the project, including `AppDispatch`, `AppState`, `CheckCircle`, `Settings`, `AutoColumn`, `Row`, `RowBetween`, `RowFixed`, `useActiveListUrls`, `useAllLists`, `useIsListActive`, `useDispatch`, `useSelector`, `Button`, `CurrencyModalView`, `ExternalLink`, `ListLogo`, `ListToggle`, `ReactGA`, `TokenList`, `UNSUPPORTED_LIST_URLS`, `listVersionLabel`, `parseENSAddress`, `uriToHttp`, `useFetchListCallback`, `usePopper`, `classNames`, and `Popover`.
-
-The `ManageLists` component renders an input field where the user can enter a URL or ENS name for a token list they want to import. As the user types, the component fetches the details of the list and displays them in a card below the input field. If the list is already imported, the component displays a checkmark and the text "Loaded" instead of the import button. If there is an error with the input or fetching the list, an error message is displayed.
-
-The component also renders a list of all the token lists that have been imported by the user. Each list is displayed as a row with the list's logo, name, and number of tokens. The row also includes a toggle button that allows the user to enable or disable the list, a settings button that opens a popover with options to remove or update the list, and a background color that indicates whether the list is active or not.
-
-The `ListRow` component is used to render each row in the list. It takes a `listUrl` prop and uses it to retrieve the corresponding list from the Redux store. It then renders the logo, name, and number of tokens for the list, along with the toggle and settings buttons. The component also handles user interactions with the buttons, such as enabling or disabling the list, removing the list, or updating the list.
-
-Overall, the `ManageLists` component provides a user-friendly interface for managing token lists in the project. It allows the user to easily import new lists, view details of existing lists, and enable or disable them as needed.
-## Questions:
- 1. What is the purpose of the `ManageLists` component?
-- The `ManageLists` component is responsible for displaying a list of imported token lists, allowing the user to add new lists, and importing a selected list.
-
-2. What is the purpose of the `listUrlRowHTMLId` function?
-- The `listUrlRowHTMLId` function generates an HTML ID for a list row based on its URL, replacing any periods with hyphens.
-
-3. What is the purpose of the `usePopper` hook?
-- The `usePopper` hook is used to position a popover element relative to a reference element, based on the specified placement.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/SearchModal/ManageTokens.md b/.autodoc/docs/markdown/core/src/modals/SearchModal/ManageTokens.md
deleted file mode 100644
index 561c80c9e..000000000
--- a/.autodoc/docs/markdown/core/src/modals/SearchModal/ManageTokens.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/SearchModal/ManageTokens.tsx)
-
-The `ManageTokens` component is a React component that is responsible for managing custom tokens in the Zoo project. It imports several components and hooks from other files in the project, including `RowBetween`, `RowFixed`, `useRemoveUserAddedToken`, `useUserAddedTokens`, `CurrencyLogo`, `CurrencyModalView`, `ExternalLink`, `ExternalLinkIcon`, `ImportRow`, `Token`, `Trash`, `getExplorerLink`, `isAddress`, `useActiveWeb3React`, and `useToken`.
-
-The component takes two props: `setModalView` and `setImportToken`. `setModalView` is a function that sets the view of the currency modal, and `setImportToken` is a function that sets the token to be imported.
-
-The component renders a search input field that allows users to search for custom tokens by address or symbol. It also displays a list of all custom tokens that have been added by the user, along with the option to remove them. The list is generated using the `userAddedTokens` hook, which retrieves all custom tokens stored locally in the user's browser. The `removeToken` function is used to remove a token from the list when the user clicks on the trash icon next to it.
-
-The component also provides a tip at the bottom of the page, informing users that custom tokens are stored locally in their browser.
-
-Overall, the `ManageTokens` component is an important part of the Zoo project, as it allows users to manage their custom tokens and provides a user-friendly interface for doing so. It is likely used in conjunction with other components and features of the project, such as the currency modal and token import functionality.
-## Questions:
- 1. What is the purpose of the `ManageTokens` component?
-- The `ManageTokens` component manages the display and removal of custom tokens stored locally in the user's browser.
-
-2. What external libraries or components are being used in this code?
-- The code imports several components from the `../../components` directory, as well as the `Token` type from the `@zoolabs/zdk` library and the `Trash` icon from the `react-feather` library.
-
-3. What is the significance of the `useMemo` hook in this code?
-- The `useMemo` hook is used to memoize the `tokenList` variable, which is an array of JSX elements representing the user's custom tokens. This can improve performance by preventing unnecessary re-renders of this component when other parts of the application change.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/SearchModal/sorting.md b/.autodoc/docs/markdown/core/src/modals/SearchModal/sorting.md
deleted file mode 100644
index b86fafe78..000000000
--- a/.autodoc/docs/markdown/core/src/modals/SearchModal/sorting.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/SearchModal/sorting.ts)
-
-The code imports `Currency`, `CurrencyAmount`, and `Token` from the `@zoolabs/zdk` library, as well as `useAllTokenBalances` and `useMemo` from `react`. It then defines a `balanceComparator` function that takes two optional `CurrencyAmount` arguments and returns a number indicating their relative order. The function first checks if both arguments are defined, and if so, compares them using the `greaterThan` and `equalTo` methods of `CurrencyAmount`. If only one argument is defined and greater than zero, it is considered greater than the other. If neither argument is defined or greater than zero, they are considered equal.
-
-The `getTokenComparator` function takes an object of `CurrencyAmount` values indexed by token addresses and returns a comparator function that takes two `Token` arguments and returns a number indicating their relative order. The comparator first compares the balances of the two tokens using the `balanceComparator` function, and if they are equal, it compares their symbols using the `toLowerCase` method. If one or both tokens do not have a symbol, they are considered equal to other tokens without symbols.
-
-The `useTokenComparator` function takes a boolean `inverted` argument and returns a memoized comparator function that takes two `Token` arguments and returns a number indicating their relative order. It first calls `useAllTokenBalances` to get an object of `CurrencyAmount` values indexed by token addresses, and then calls `getTokenComparator` with this object to get a comparator function. If `inverted` is true, it returns a new comparator function that reverses the order of the original comparator function by multiplying its result by -1. Otherwise, it returns the original comparator function.
-
-This code can be used to sort lists of tokens by balance and symbol, such as in a wallet or exchange interface. For example, to sort an array of `Token` objects called `tokens` in ascending order by balance and symbol, you could call `tokens.sort(useTokenComparator(false))`. To sort them in descending order, you could call `tokens.sort(useTokenComparator(true))`.
-## Questions:
- 1. What is the purpose of the `useTokenComparator` function?
-- The `useTokenComparator` function returns a comparator function that can be used to sort an array of `Token` objects based on their balances and symbols.
-
-2. What is the significance of the `inverted` parameter in `useTokenComparator`?
-- The `inverted` parameter determines whether the comparator function should sort the tokens in ascending or descending order based on their balances and symbols.
-
-3. What is the role of the `balances` object in `getTokenComparator`?
-- The `balances` object is used to look up the balance of each token in the `Token` array being sorted, and then compare the balances to determine their order.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/ShareNFTModal/index.md b/.autodoc/docs/markdown/core/src/modals/ShareNFTModal/index.md
deleted file mode 100644
index 7d755ce14..000000000
--- a/.autodoc/docs/markdown/core/src/modals/ShareNFTModal/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/ShareNFTModal/index.tsx)
-
-The `ShareNFTModal` component is a React component that renders a modal for sharing an NFT (non-fungible token) on social media platforms. The component imports two custom hooks from the `application` slice of the Redux store: `useModalOpen` and `useShareModal`. It also imports the `ApplicationModal` enum from the same slice, which is used to identify the modal being opened. Additionally, the component imports the `Modal` and `ModalHeader` components from the `components` directory, and several social media icons from the `react-icons` library.
-
-The component takes two props: `nft`, which is an object representing the NFT being shared, and `edit`, which is a boolean indicating whether the NFT is being edited. The `nft` prop is required, while the `edit` prop is optional and defaults to `false`.
-
-The `ShareNFTModal` component renders a modal that contains links to share the NFT on Twitter, Discord, and Gmail. The modal is opened and closed using the `modalOpen` and `toggleModal` variables, which are obtained from the `useModalOpen` and `useShareModal` hooks, respectively. The `getModalContent` function returns the JSX for the modal's content, which includes a header, a container for the social media links, and the links themselves. The links are styled with CSS classes and contain icons from the `react-icons` library.
-
-When the user clicks on the Twitter link, a new window is opened with a pre-populated tweet that includes the NFT's URL. When the user clicks on the Discord link, a new window is opened that prompts the user to authorize a Discord bot with certain permissions. The URL for the authorization request includes the NFT's ID as a state parameter. When the user clicks on the Gmail link, a new email is opened with the NFT's URL in the body.
-
-Overall, the `ShareNFTModal` component provides a convenient way for users to share NFTs on social media platforms. It can be used in conjunction with other components in the `zoo` project to create a seamless user experience for buying, selling, and sharing NFTs. For example, it could be used in conjunction with a component that displays a user's NFT collection, allowing the user to easily share their collection with others.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `ShareNFTModal` that displays a modal with social media sharing options for an NFT (non-fungible token).
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including `react`, `react-icons`, and custom hooks from a `../../state/application` module.
-
-3. What is the significance of the `edit` prop?
-- The `edit` prop is an optional boolean value that defaults to `false`. It is not used within this component, but may be passed down to child components for conditional rendering based on whether the modal is being used for editing or sharing.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/TokenWarningModal/index.md b/.autodoc/docs/markdown/core/src/modals/TokenWarningModal/index.md
deleted file mode 100644
index 473af4338..000000000
--- a/.autodoc/docs/markdown/core/src/modals/TokenWarningModal/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/TokenWarningModal/index.tsx)
-
-This code defines a React component called `TokenWarningModal` that renders a modal window with a list of tokens and a confirmation button. The purpose of this component is to display a warning message to the user when they attempt to import a token that already exists in their wallet. The component takes three props: `isOpen`, `tokens`, and `onConfirm`.
-
-The `isOpen` prop is a boolean that determines whether the modal is visible or not. The `tokens` prop is an array of `Token` objects that represent the tokens that are already in the user's wallet. The `onConfirm` prop is a callback function that is called when the user clicks the confirmation button.
-
-The component renders a `Modal` component from the `../../components/Modal` module. The `Modal` component is a reusable component that provides a basic modal window with a header, body, and footer. The `isOpen` prop is passed to the `Modal` component to control its visibility. The `handleDismiss` function is defined using the `useCallback` hook, but it does not do anything.
-
-Inside the `Modal` component, the `ImportToken` component from the `../SearchModal/ImportToken` module is rendered. The `ImportToken` component is a custom component that displays a list of tokens and allows the user to select one. The `tokens` prop is passed to the `ImportToken` component to populate the list. The `handleCurrencySelect` prop is passed to the `ImportToken` component as a callback function that is called when the user selects a token. This function is actually the `onConfirm` prop that was passed to the `TokenWarningModal` component.
-
-Overall, this code provides a simple way to display a warning message to the user when they attempt to import a token that already exists in their wallet. The `TokenWarningModal` component can be used in conjunction with other components in the `zoo` project to provide a more complete user interface for managing tokens. For example, it could be used in a settings page where the user can manage their wallet and import new tokens.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a React component called `TokenWarningModal` that renders a modal with a list of tokens and a confirmation button.
-
-2. What dependencies does this code have?
- This code imports `React`, `useCallback`, `ImportToken`, `Modal`, and `Token` from various modules.
-
-3. What props does the `TokenWarningModal` component expect?
- The `TokenWarningModal` component expects an `isOpen` boolean, an array of `tokens`, and an `onConfirm` function as props.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/TransactionConfirmationModal/index.md b/.autodoc/docs/markdown/core/src/modals/TransactionConfirmationModal/index.md
deleted file mode 100644
index 70b12a227..000000000
--- a/.autodoc/docs/markdown/core/src/modals/TransactionConfirmationModal/index.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/TransactionConfirmationModal/index.tsx)
-
-This code defines several React components that are used to display different types of transaction confirmation modals in the Zoo project. The modals are used to provide feedback to the user about the status of a transaction, such as whether it is pending, has been submitted, or has encountered an error.
-
-The `ConfirmationPendingContent` component displays a modal with a loading animation and a message indicating that the transaction is waiting for confirmation. It also displays two lines of text that are passed in as props.
-
-The `TransactionSubmittedContent` component displays a modal with a checkmark icon and a message indicating that the transaction has been submitted. It also provides a link to view the transaction on an explorer and a button to add a currency to MetaMask. The component takes several props, including the transaction hash, chain ID, and currency to add.
-
-The `ConfirmationModalContent` component is a generic component that displays a modal with a title, top content, and bottom content. It is used as a wrapper for the other confirmation modals.
-
-The `TransactionErrorContent` component displays a modal with an error icon and a message indicating that the transaction has encountered an error. It also provides a button to dismiss the modal.
-
-The `TransactionConfirmationModal` component is the main component that is exported by this file. It takes several props, including whether the modal is open, whether the transaction is attempting, the transaction hash, and the content to display. It conditionally renders one of the other confirmation modals based on the state of the transaction.
-
-Overall, these components provide a consistent and user-friendly way to display transaction confirmation feedback to users in the Zoo project. Developers can use these components in their own code to provide transaction confirmation feedback to users. For example, they might use the `TransactionSubmittedContent` component to display a confirmation modal after a user has submitted a transaction to the blockchain.
-## Questions:
- 1. What external libraries or packages are being used in this code?
-- The code is importing several packages such as `react-feather`, `@zoolabs/zdk`, `@lingui/macro`, `lottie-react`, and some custom components from the `../../components` directory.
-
-2. What are the different components being exported in this file?
-- The file exports several React components such as `ConfirmationPendingContent`, `TransactionSubmittedContent`, `ConfirmationModalContent`, `TransactionErrorContent`, and `TransactionConfirmationModal`.
-
-3. What is the purpose of the `useAddTokenToMetaMask` hook being imported in this file?
-- The `useAddTokenToMetaMask` hook is being used to add a token to the user's MetaMask wallet. It is being called in the `TransactionSubmittedContent` component when the user clicks on the "Add to MetaMask" button.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/TransactionFailedModal/index.md b/.autodoc/docs/markdown/core/src/modals/TransactionFailedModal/index.md
deleted file mode 100644
index e88d11c8c..000000000
--- a/.autodoc/docs/markdown/core/src/modals/TransactionFailedModal/index.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/TransactionFailedModal/index.tsx)
-
-The code defines a React component called `TransactionFailedModal` that displays a modal dialog box with a message indicating that a transaction has been rejected. The component takes two props: `isOpen`, a boolean that determines whether the modal is visible, and `onDismiss`, a function that is called when the modal is dismissed.
-
-The modal contains an image of a red X, a heading that says "Uh Oh! Transaction rejected.", and a button labeled "Dismiss". The text of the button is localized using the `@lingui/macro` and `@lingui/react` packages.
-
-The component uses several other components and libraries to implement the modal. The `CloseIcon` component is imported from a file located in the `components` directory, and is used to display a clickable X icon in the upper-right corner of the modal. The `Image` component is imported from the `next/image` package, and is used to display the transaction-rejected.png image. The `Modal` component is imported from a file located in the `components` directory, and is used to display the modal dialog box.
-
-The component is intended to be used in a larger project that involves transactions, such as a cryptocurrency exchange or a payment processing system. When a transaction is rejected, this component can be used to display a user-friendly error message to the user, indicating that the transaction was not successful and providing a way to dismiss the message. The component can be customized by changing the image, the heading, and the button text to fit the specific needs of the project. For example, the image could be replaced with a different icon or logo, and the heading could be changed to provide more specific information about the reason for the transaction rejection.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `TransactionFailedModal` that displays a modal with a message and an image when a transaction is rejected.
-
-2. What dependencies does this code use?
-- This code imports several dependencies including `CloseIcon` from a local file, `Image` from the `next/image` package, `Modal` from a local file, `React`, `t` and `useLingui` from the `@lingui` package.
-
-3. What props does the `TransactionFailedModal` component accept?
-- The `TransactionFailedModal` component accepts two props: `isOpen` which is a boolean that determines whether the modal is open or closed, and `onDismiss` which is a function that is called when the modal is dismissed.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/modals/WalletModal/Option.md b/.autodoc/docs/markdown/core/src/modals/WalletModal/Option.md
deleted file mode 100644
index 177490d49..000000000
--- a/.autodoc/docs/markdown/core/src/modals/WalletModal/Option.md
+++ /dev/null
@@ -1,55 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/modals/WalletModal/Option.tsx)
-
-The `Option` component is a reusable React component that renders an option item with an icon, header, and subheader. It can be used in various parts of the larger project, such as a navigation menu or a settings page.
-
-The component takes in several props, including `link`, `clickable`, `size`, `onClick`, `color`, `header`, `subheader`, `icon`, `active`, and `id`.
-
-The `link` prop is an optional string that specifies the URL to link to when the option is clicked. If `link` is provided, the component returns an anchor tag with the `content` as its child. If `link` is not provided, the component returns the `content` div.
-
-The `clickable` prop is a boolean that determines whether the option is clickable or not. If `clickable` is `false`, the cursor is set to `not-allowed`.
-
-The `size` prop is an optional number that specifies the size of the option. If `size` is not provided, the default size is used.
-
-The `onClick` prop is an optional function that is called when the option is clicked.
-
-The `color` prop is a required string that specifies the background color of the option.
-
-The `header` prop is a required React node that specifies the main text of the option.
-
-The `subheader` prop is an optional React node that specifies the subtext of the option.
-
-The `icon` prop is a required string that specifies the URL of the icon to display.
-
-The `active` prop is a boolean that determines whether the option is active or not. If `active` is `true`, the option is highlighted with a gradient background.
-
-The `id` prop is a required string that specifies the ID of the option.
-
-The `content` variable is a div that contains the header, subheader, and icon. The header and subheader are wrapped in divs with appropriate styles. The icon is an `Image` component from the `next/image` library.
-
-If `link` is provided, the `content` div is returned as a child of an anchor tag. If `link` is not provided and `active` is `false`, the `content` div is returned. If `link` is not provided and `active` is `true`, the `content` div is returned as a child of a div with a gradient background.
-
-Example usage:
-
-```
-
-
- );
-};
-```
-
-In this example, the `AssetList` component is used to display a grid of assets owned by a specific user. The `where` prop is used to filter the assets by owner, and the `orderBy` prop is used to sort the assets by creation date in descending order. The `perPage` prop is set to 12, which means that each page will display 12 assets. The `cols` prop is set to 4, which means that each row will display 4 assets. The `showPageNumbers` prop is set to `false`, which means that the page numbers will not be displayed.
-## Questions:
- 1. What is the purpose of the `AssetList` component?
-- The `AssetList` component is used to display a list of assets with pagination and filtering options.
-
-2. What external libraries are being used in this code?
-- The code is using several external libraries including React, react-morphing-modal, next/link, lodash, @apollo/client, and ethers.
-
-3. What is the purpose of the `useContract` and `useTokenTypes` hooks?
-- It is unclear from this code what the `useContract` and `useTokenTypes` hooks are doing, as they are not used in this file. It is possible that they are custom hooks defined elsewhere in the project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/AssetListLegacy.md b/.autodoc/docs/markdown/core/src/zoo/AssetListLegacy.md
deleted file mode 100644
index cf5fe64e6..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/AssetListLegacy.md
+++ /dev/null
@@ -1,53 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AssetListLegacy.tsx)
-
-The `AssetList` component is a React component that renders a paginated list of assets. It receives several props, including `tokenType`, `tokenName`, `autoPlay`, `animate`, `large`, `getTriggerProps`, and `onLoadAssets`.
-
-The component uses the `useContract` hook to get a reference to a smart contract called `Drop`. It then uses the `useEffect` hook to fetch the `firstTokenId` and `totalMinted` values from the contract. Once these values are fetched, the component uses the `getPaginatedAssets` function to calculate the paginated assets to display. The `getPaginatedAssets` function takes in several parameters, including `type`, `firstTokenId`, `totalMinted`, `page`, and `perPage`. It returns an object that contains information about the paginated assets, including the `start` and `end` indices, the `endTokenId`, the `totalPages`, and an array of `assets`.
-
-The `AssetList` component renders a list of `Asset` components, passing in the appropriate props. It also renders pagination controls that allow the user to navigate between pages of assets. The `previousPage` and `nextPage` functions are used to update the `page` state when the user clicks on the pagination controls.
-
-Overall, the `AssetList` component is a reusable component that can be used to display a paginated list of assets in a React application. It is designed to work with a specific smart contract (`Drop`), but could be adapted to work with other contracts as well. Here is an example of how the `AssetList` component might be used in a larger React application:
-
-```jsx
-import React, { useState } from 'react'
-import AssetList from './AssetList'
-
-const App = () => {
- const [assets, setAssets] = useState([])
-
- const handleLoadAssets = (newAssets) => {
- setAssets(newAssets)
- }
-
- return (
-
-
- )
-}
-
-export default App
-```
-
-In this example, the `AssetList` component is used to display a paginated list of NFT assets. When the assets are loaded, the `handleLoadAssets` function is called, which updates the `assets` state. The `assets` state is then used to render a list of asset names.
-## Questions:
- 1. What is the purpose of the `useContract` hook from the `../hooks` module?
-- A smart developer might ask what the `useContract` hook does and what it is used for. This hook is likely used to interact with a smart contract on the blockchain.
-
-2. What is the significance of the `getPaginatedAssets` function?
-- A smart developer might ask what the `getPaginatedAssets` function does and why it is important. This function is used to retrieve a paginated list of assets based on certain parameters such as the type of asset, the first token ID, and the total number of minted assets.
-
-3. What is the purpose of the `AssetList` component and what are its required props?
-- A smart developer might ask what the `AssetList` component does and what props it requires. This component is used to display a list of assets and requires props such as `tokenType`, `tokenName`, and `onLoadAssets` to function properly.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/AssetModal.md b/.autodoc/docs/markdown/core/src/zoo/AssetModal.md
deleted file mode 100644
index e37cedb69..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/AssetModal.md
+++ /dev/null
@@ -1,46 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AssetModal.tsx)
-
-The `AssetModal` component is a React component that renders a modal window displaying information about a specific asset. It imports several other components and libraries, including `useRouter` from the Next.js framework, `Modal` from the `react-morphing-modal` library, and several custom components related to bidding and asset ownership.
-
-The `AssetModal` component takes in a `props` object, which includes a `modalProps` object that is passed to the `Modal` component. The `Modal` component is used to display the asset information in a modal window, and the `modalProps` object is used to configure the modal's appearance and behavior.
-
-The `AssetModal` component also uses the `useAsset` hook to retrieve information about the asset being displayed. This hook takes in a `tokenId` parameter, which is obtained from the `router.query` object using the `useRouter` hook. The `useAsset` hook returns an object containing various properties related to the asset, such as its current ask price, highest bid, and content URI.
-
-The `AssetModal` component also includes several other custom components related to bidding and asset ownership, such as `SetBid`, `SetAsk`, `BidList`, and `BidModal`. These components are conditionally rendered based on whether the current user is the owner of the asset or not, and whether certain sections of the modal are currently being displayed or not.
-
-Overall, the `AssetModal` component is a key part of the larger project's user interface, allowing users to view detailed information about specific assets and interact with them through bidding and ownership-related actions. Here is an example of how the `AssetModal` component might be used in the larger project:
-
-```jsx
-import AssetModal from "./components/AssetModal";
-
-function App() {
- return (
-
- );
-}
-```
-
-In this example, the `AssetModal` component is rendered at the bottom of the page, and is used to display detailed information about a specific asset when the user clicks on a link to that asset. The `AssetModal` component is passed any necessary props, such as the `tokenId` of the asset to display, and handles the rest of the logic for displaying the modal window and related components.
-## Questions:
- 1. What is the purpose of the `useRouter` hook and how is it used in this code?
-- The `useRouter` hook is used to access the Next.js router object and retrieve the `tokenId` parameter from the query string. It is used to set the `tokenId` state variable and open the modal for the corresponding asset.
-
-2. What is the purpose of the `show` state variable and how is it used in this code?
-- The `show` state variable is an object that keeps track of which sections of the modal should be displayed. It is used to conditionally render the `SetAsk`, `HowOffline`, `HowReservations`, and `SetBid` components based on user actions.
-
-3. What is the purpose of the `onClickBid` function and how is it used in this code?
-- The `onClickBid` function is used to set the `modalBid` state variable and toggle the `showBidModal` state variable, which controls whether the `BidModal` component is displayed. It is passed as a prop to the `Asset` component and the `BidList` component to handle bid selection.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/AssetSale.md b/.autodoc/docs/markdown/core/src/zoo/AssetSale.md
deleted file mode 100644
index ba4c27ffc..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/AssetSale.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AssetSale.tsx)
-
-The `AssetSale` component is a React component that renders a single asset for sale. It takes in a number of props, including the `dropId`, `name`, `contentURI`, `metadataURI`, `ask`, `formattedAmount`, `usdAmount`, `symbol`, `highest`, `className`, `height`, `width`, `showPrice`, `isOwner`, `autoPlay`, `animate`, `large`, `getUsdAmount`, `onClickBid`, and `onClickTokenType`.
-
-The component first imports several dependencies, including `React`, `useCallback`, `useEffect`, `useRef`, and `useState` from the `react` package, `Player` from the `react-player` package, `BigintIsh` and `ZERO_ADDRESS` from the `@zoolabs/zdk` package, `getContent` and `useTokenType` from a local `state` module, `Ask`, `Bid`, `GraphBid`, and `HighestBid` from a local `types` module, `useActiveWeb3React` and `useContract` from a local `hooks` module, `EyeIcon` from the `@heroicons/react/solid` package, `shortenAddress` from a local `functions` module, `TimeAgo` from the `react-timeago` package, and `Image` from the `next/image` package.
-
-The component then defines a type for its props, which includes all of the props listed above, as well as some additional HTML attributes. The component itself is defined as a function that takes in its props as an argument.
-
-Within the component, several variables are defined using destructuring assignment from the props object, including `account`, `ask`, `highest`, `dropId`, `name`, `showPrice`, `formattedAmount`, `usdAmount`, `symbol`, `getUsdAmount`, and `isOwner`. The `useTokenType` hook is called with `dropId` and `name` as arguments to get information about the token type associated with the asset. The `useState` hook is used to define state variables for `bid` and `tokenType`. The `useContract` hook is called with `"Drop"` as an argument to get the contract for the `Drop` smart contract. The `getContent` function is called with `props.contentURI` as an argument to get information about the content associated with the asset. The `shortenAddress` function is used to shorten the address of the highest bidder.
-
-The component then returns a div that contains the asset for sale. If `props.large` is true and the asset has a video, a `Player` component is rendered with the video as its `url` prop. Otherwise, an `Image` component is rendered with the image as its `src` prop.
-
-Below the asset, information about the asset is displayed, including its name, the number of tokens that have been minted and sold, and the highest bid (if applicable). If `showPrice` is true and the asset has a formatted amount and symbol, the highest bid is displayed along with the bid amount and the USD amount (if available). If the user is the owner of the asset, an "Accept Bid" button is also displayed.
-
-Finally, the component exports the `AssetSale` function as the default export of the module.
-
-Overall, the `AssetSale` component is a reusable component that can be used to display a single asset for sale, along with information about the asset and its current bid status. It can be customized with a variety of props to control its appearance and behavior.
-## Questions:
- 1. What is the purpose of the `AssetSale` component?
-- The `AssetSale` component is used to display information about an asset for sale, including its name, image or video, sale price, and highest bid.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including React, react-player, @zoolabs/zdk, @heroicons/react, react-timeago, and next/image.
-
-3. What is the role of the `useActiveWeb3React` and `useContract` hooks?
-- The `useActiveWeb3React` hook is used to access the current user's Ethereum account and provider, while the `useContract` hook is used to interact with Ethereum smart contracts.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/AssetSaleModal.md b/.autodoc/docs/markdown/core/src/zoo/AssetSaleModal.md
deleted file mode 100644
index f9ef22261..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/AssetSaleModal.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/AssetSaleModal.tsx)
-
-The `AssetModal` component is a React component that renders a modal window for displaying information about a particular asset. It imports several other components and hooks from various files in the project, including `useRouter` and `Modal` from `next/router` and `react-morphing-modal`, respectively. It also imports several custom components such as `AssetSale`, `SetSaleBid`, `LazySetAsk`, `HowReservations`, `HowOffline`, `LazyBidList`, and `LazyBidModal`, which are used to display information about the asset and allow users to interact with it.
-
-The component takes in a `props` object, which includes a `modalProps` object that contains various properties for configuring the modal window, such as its size and position. The component also defines several state variables using the `useState` hook, including `show`, which is an object that keeps track of which sections of the modal are currently visible, and `showBidModal`, which determines whether the bid modal is currently visible.
-
-The `AssetModal` component renders a `Modal` component from `react-morphing-modal` that contains two columns. The first column displays information about the asset, including its name, image, price, and highest bid. The second column displays information about bids and allows users to place bids or asks on the asset. If the user is the owner of the asset, they can also set an ask price for the asset. If the user is not the owner, they can place a bid on the asset.
-
-The component also defines several helper components, including `NoBids` and `NoAsks`, which are displayed if there are no bids or asks for the asset, respectively.
-
-Overall, the `AssetModal` component is an important part of the larger project as it allows users to view and interact with assets in a user-friendly way. It provides a centralized location for displaying information about assets and allows users to place bids and asks on them.
-## Questions:
- 1. What is the purpose of the `AssetModal` component?
-- The `AssetModal` component is a modal that displays information about a specific asset, including its sale price, bids, and how to place a bid.
-
-2. What is the significance of the `DROP_ID` constant?
-- The `DROP_ID` constant is used to identify the specific drop that the asset belongs to.
-
-3. What is the purpose of the `useActiveWeb3React` hook?
-- The `useActiveWeb3React` hook is used to retrieve the active Web3 provider and account, which is used to determine whether the user is the owner of the asset and whether they can place a bid.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/BidEditable.md b/.autodoc/docs/markdown/core/src/zoo/BidEditable.md
deleted file mode 100644
index 14abf9c2e..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/BidEditable.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/BidEditable.tsx)
-
-The code above is a React component called `BidEditable` that renders a `BidItem` component with a `GraphBid` object as a prop. The purpose of this component is to provide a way to display and edit a bid in a user interface.
-
-The `GraphBid` type is imported from the `types` module, which suggests that this project may involve some sort of graph data structure. The `BidItem` component is imported from another file in the same directory, and it is likely responsible for rendering the actual bid information.
-
-The `BidEditable` component is a functional component that takes a `GraphBid` object as a prop and returns a JSX element that renders a `div` with the class name "BidEditable" and a `BidItem` component with the `GraphBid` object passed as a prop.
-
-This component can be used in a larger project by importing it and rendering it wherever a bid needs to be displayed or edited. For example, if there is a page in the project that displays a list of bids, the `BidEditable` component could be used to render each individual bid in the list.
-
-Here is an example of how the `BidEditable` component could be used in a larger project:
-
-```
-import React from 'react';
-import BidEditable from './BidEditable';
-
-const BidList = ({ bids }) => {
- return (
-
- {assets.map((asset, i) => (
-
- {asset.name}
- ))}
-
- {bids.map((bid) => (
-
- );
-};
-
-export default BidList;
-```
-
-In this example, the `BidList` component takes an array of `GraphBid` objects as a prop and maps over them to render a `BidEditable` component for each bid. The `key` prop is set to the `id` of each bid to ensure that React can efficiently update the list when changes occur.
-## Questions:
- 1. What is the purpose of the `GraphBid` type and where is it defined?
-- The `GraphBid` type is imported from the `types` module, but it's unclear what properties or methods it contains and what its purpose is within the `BidEditable` component.
-
-2. What is the `BidItem` component and how is it used within `BidEditable`?
-- It's unclear what the `BidItem` component does and how it's used within the `BidEditable` component. More information is needed to understand the relationship between these two components.
-
-3. Are there any other components or modules that import and use `BidEditable`?
-- It's unclear if `BidEditable` is used by any other components or modules within the `zoo` project. Knowing this information could help understand the overall architecture and functionality of the project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/BidItem.md b/.autodoc/docs/markdown/core/src/zoo/BidItem.md
deleted file mode 100644
index 05e7b7716..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/BidItem.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/BidItem.tsx)
-
-The `BidItem` component is a React component that renders a single bid item. It takes in a `bid` object, which contains information about the bid, such as the bidder, the amount, and the currency used. It also takes in some optional props, such as `showToken`, `summary`, and `onClick`, which determine how the bid item is displayed and what actions can be taken on it.
-
-The component first imports several dependencies, such as icons, currency and token types, and various utility functions. It then defines the `BidProps` type, which specifies the shape of the `bid` object and the optional props. It also defines the `BidItem` component, which takes in the `bid` object and the optional props as props.
-
-Inside the component, it first uses the `useActiveWeb3React` hook to get the current chain ID and account. It then initializes some state variables using the `useState` hook, such as `formattedAmount` and `currencyToken`. It also uses the `useEffect` hook to update the `currencyToken` state variable when the chain ID changes.
-
-The component then renders the bid item using JSX. It conditionally renders different elements based on the `showToken` prop. If `showToken` is true, it displays information about the bid, such as the name of the asset being bid on, the ID of the asset, the bidder's address, and the time the bid was made. If `showToken` is false, it displays information about the bidder, such as the bidder's address and a summary of the bid.
-
-The component also displays the bid amount and the currency used, as well as an eye icon that can be clicked to view more details about the bid. It formats the bid amount using the `formatCurrencyAmountWithCommas` function and the `currencyToken` state variable. It also calculates the USD value of the bid using the `getUsdAmount` function from the `usePrice` hook.
-
-Overall, the `BidItem` component is a reusable component that can be used to display bid items in various parts of the larger project. It provides a flexible and customizable way to display bid information and allows users to view more details about each bid.
-## Questions:
- 1. What is the purpose of the `BidItem` component?
-- The `BidItem` component is used to display information about a bid, including the bidder's address, bid amount, and timestamp.
-
-2. What external libraries are being used in this file?
-- The file is importing several external libraries, including `@heroicons/react/solid`, `@zoolabs/zdk`, `react`, and `react-timeago`.
-
-3. What is the purpose of the `getUsdAmount` function passed as a prop to `BidItem`?
-- The `getUsdAmount` function is used to convert a bid amount from the token's native currency to USD. It takes in a token address and amount as arguments and returns the equivalent USD value.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/BidList.md b/.autodoc/docs/markdown/core/src/zoo/BidList.md
deleted file mode 100644
index 4a6f98700..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/BidList.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/BidList.tsx)
-
-The code defines a React component called `BidList` that fetches and displays a list of bids from a GraphQL API. The component takes in several props, including `where`, `empty`, `showToken`, and `onClick`, which are used to filter the bids, display a message when there are no bids, show the token used for the bids, and handle click events respectively.
-
-The component uses the `useQuery` hook from the `@apollo/client` library to fetch the bids from the GraphQL API. The GraphQL query is defined using the `gql` function and specifies the fields to be returned for each bid, including the bid amount, creation timestamp, currency, bidder, and media. The `where` prop is used to filter the bids based on the media and/or bidder ID. The `fetchPolicy` option is set to `'no-cache'` to ensure that the query is always sent to the server instead of being cached. The `pollInterval` option is set to `10000` to refetch the bids every 10 seconds.
-
-The fetched bids are stored in the `data` object returned by the `useQuery` hook. If there are bids, the component maps over them and renders a `BidItem` component for each bid. The `getUsdAmount` function is passed to each `BidItem` component to convert the bid amount to USD. If there are no bids, the component either renders the `empty` prop or a default message.
-
-The `BidList` component is exported as the default export of the module and can be imported and used in other parts of the project. For example, it could be used in a page that displays a list of bids for a particular media item or bidder. Here's an example of how the `BidList` component could be used:
-
-```
-import BidList from './BidList'
-
-const MyBidsPage = () => {
- const myBidsFilter = { bidder: 'my-bidder-id' }
-
- return (
-
- No bids yet.
} showToken={true} />
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `usePrice` hook imported from `./state`?
-- The `usePrice` hook is used to get the USD amount of a bid.
-
-2. What is the purpose of the `pollInterval` option passed to `useQuery`?
-- The `pollInterval` option specifies the time interval (in milliseconds) for refetching the query data.
-
-3. What is the purpose of the `BidFilter` type and the `where` prop in `BidListProps`?
-- The `BidFilter` type is used to define the filter options for the `where` prop, which is used to filter the bids returned by the GraphQL query.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/BidModal.md b/.autodoc/docs/markdown/core/src/zoo/BidModal.md
deleted file mode 100644
index bcc81e9af..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/BidModal.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/BidModal.tsx)
-
-The `BidModal` component is a React component that renders a modal for displaying information about a bid on a media asset. It takes in three props: `bid`, `isOpen`, and `onClose`. `bid` is an object that contains information about the bid, including the bidder, the owner of the media asset, the currency used for the bid, and the ID of the media asset. `isOpen` is a boolean that determines whether the modal is open or closed, and `onClose` is a function that is called when the modal is closed.
-
-The component imports several other components and functions from other files in the project. These include `Modal`, `ModalHeader`, `useActiveWeb3React`, `getContent`, `usePrice`, `formatCurrencyAmountWithCommas`, `isSameAddress`, `shortenAddress`, `RemoveBidButton`, `useContract`, `BidItem`, and `AcceptBidButton`.
-
-The component uses the `useActiveWeb3React` hook to get the current user's account address. It also uses the `useContract` hook to get a reference to the `Market` contract. When the component is mounted, it uses the `bidForTokenBidder` function of the `Market` contract to check whether the bid is offline or not. If the bid is offline, the component sets the `offline` state to `true`.
-
-The component then extracts various pieces of information from the `bid` object, such as the type and name of the media asset, the ID of the bidder, the ID of the owner, the currency used for the bid, and the ID of the media asset.
-
-The component defines two callback functions, `isBidder` and `isOwner`, which are used to determine whether the current user is the bidder or the owner of the media asset, respectively.
-
-The component then renders the modal using the `Modal` component. The modal contains a header with the name of the media asset and a `BidItem` component that displays information about the bid. If the bid is not offline and the current user is the bidder, a message is displayed indicating that the bidder's address will be refunded if the bid is removed.
-
-The modal also contains two buttons: a "Remove Bid" button and an "Accept Bid" button. The "Remove Bid" button is only displayed if the current user is the bidder, and it allows the user to remove their bid. The "Accept Bid" button is only displayed if the current user is the owner of the media asset, and it allows the user to accept the bid.
-
-Overall, the `BidModal` component provides a way for users to view and manage bids on media assets in the project's marketplace. It allows users to remove their own bids and accept bids on their own media assets.
-## Questions:
- 1. What is the purpose of this code?
-- This code is for a BidModal component that displays bid information and allows the user to remove or accept a bid.
-
-2. What external dependencies does this code have?
-- This code imports several components and functions from other files, including Modal, ModalHeader, useActiveWeb3React, getContent, usePrice, isSameAddress, shortenAddress, RemoveBidButton, AcceptBidButton, and BidItem.
-
-3. What is the significance of the "offline" state variable?
-- The "offline" state variable is used to determine whether a bid was made offline (i.e. not through the app) and display a message to the bidder if they try to remove the bid.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/CurrencyLogo.md b/.autodoc/docs/markdown/core/src/zoo/CurrencyLogo.md
deleted file mode 100644
index b08ba0d1a..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/CurrencyLogo.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/CurrencyLogo.tsx)
-
-The code above defines a React component called `CurrencyLogo` that renders an image of a currency symbol. The component takes in three props: `symbol`, `size`, and `className`. The `symbol` prop is required and can be either a `CurrencySymbol` enum value or a string. The `size` prop is optional and defaults to 32. The `className` prop is also optional and can be used to add additional CSS classes to the rendered image.
-
-The component uses the `CURRENCY_SYMBOL_LOGO` object from the `@zoolabs/zdk` library to determine the URL of the image to be displayed. The `CURRENCY_SYMBOL_LOGO` object maps each currency symbol to its corresponding image URL. If the `symbol` prop matches a key in the `CURRENCY_SYMBOL_LOGO` object, the component will render an `Image` component from the `next/image` library with the appropriate `src`, `alt`, `className`, `width`, and `height` props.
-
-This component can be used in a larger project that requires displaying currency symbols. For example, a financial application that displays account balances in different currencies could use this component to display the currency symbol next to each balance. Here's an example of how the `CurrencyLogo` component could be used in a React component:
-
-```
-import CurrencyLogo from "./CurrencyLogo";
-
-const AccountBalance = ({ currency, balance }) => {
- return (
- My Bids
-
-
- );
-};
-```
-
-In this example, the `AccountBalance` component takes in two props: `currency` and `balance`. The `currency` prop is a string representing the currency symbol, and the `balance` prop is a number representing the account balance. The component renders a `CurrencyLogo` component with the `symbol` prop set to the `currency` prop and the `size` prop set to 24. The component also renders a `span` element with the `balance` prop as its text content.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a component called `CurrencyLogo` that displays an image logo for a given currency symbol.
-
-2. What dependencies does this code have?
- This code imports two dependencies: `next/image` and `@zoolabs/zdk`.
-
-3. What props can be passed to the `CurrencyLogo` component?
- The `CurrencyLogo` component accepts three props: `symbol` (a currency symbol or string), `size` (an optional number for the size of the logo), and `className` (an optional string for additional CSS classes).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/HowOffline.md b/.autodoc/docs/markdown/core/src/zoo/HowOffline.md
deleted file mode 100644
index a17074254..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/HowOffline.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/HowOffline.tsx)
-
-The code defines a React component called `HowOffline` that renders a section of text explaining how offline asks work in the context of a smart contract-based marketplace for NFTs. The component takes a single prop called `onClick`, which is a function to be called when the user clicks the "Ok" button at the end of the text.
-
-The text itself explains that an offline ask is a way for a buyer to place a bid on an NFT without sending funds to the smart contract. Instead, the buyer and seller will need to arrange a separate transaction outside of the platform, such as a bank wire transfer. Once the seller has verified receipt of the funds, they can accept the bid, which will transfer ownership of the NFT to the buyer.
-
-This component is likely to be used as part of a larger user interface for the marketplace, perhaps as a modal or tooltip that appears when the user selects the option to place an offline ask. The `onClick` prop could be used to dismiss the modal or perform some other action in response to the user acknowledging the information presented.
-
-Example usage:
-
-```
-import HowOffline from './HowOffline';
-
-function PlaceOfflineAsk() {
- const handleOkClick = () => {
- // Do something when the user clicks "Ok"
- };
-
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-
- This code is a React component that explains how offline asks work in the context of buying and selling NFTs.
-
-2. What is the expected behavior when the "Ok" button is clicked?
-
- When the "Ok" button is clicked, it will trigger the onClick function that is passed as a prop to the component.
-
-3. How can a buyer send funds for an offline ask?
-
- A buyer can send funds for an offline ask through an "over the counter" deal, such as a bank wire transfer, directly to the seller.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/HowReservations.md b/.autodoc/docs/markdown/core/src/zoo/HowReservations.md
deleted file mode 100644
index 894dff30d..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/HowReservations.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/HowReservations.tsx)
-
-The code defines a React functional component called `HowReservations`. This component renders a section of text and a button that triggers an `onClick` event. The purpose of this component is to provide information to users about how reservations work in the ZOO network and to prompt them to take action by clicking the "Ok" button.
-
-The component is designed to be used within a larger project that involves the creation and management of non-fungible tokens (NFTs) on the ZOO network. When a user visits the reservation page, they will see this component displayed on the screen. The text explains that users can reserve an NFT to ensure they are part of the ZOO network at launch. If their bid is not accepted, their reservation will be refunded. The "Ok" button allows the user to acknowledge this information and proceed with the reservation process.
-
-The component is written in JSX, which is a syntax extension for JavaScript that allows developers to write HTML-like code within their JavaScript files. The `return` statement in the component defines the structure and content of the rendered HTML. The `onClick` prop is passed to the button element, which allows the parent component to define what happens when the button is clicked.
-
-Here is an example of how this component might be used within a larger project:
-
-```
-import HowReservations from './HowReservations';
-
-const ReservationPage = () => {
- const handleOkClick = () => {
- // Handle the user clicking the "Ok" button
- };
-
- return (
- Place an Offline Ask
-...
-
-
- );
-};
-```
-
-In this example, the `ReservationPage` component renders the `HowReservations` component along with other components related to the reservation process. The `handleOkClick` function is defined within the `ReservationPage` component and passed as a prop to the `HowReservations` component. When the user clicks the "Ok" button, the `handleOkClick` function will be called, allowing the parent component to handle the event appropriately.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `HowReservations` that displays information about how reservations work for the ZOO network launch and includes a button to close the dialog box.
-
-2. What props does the `HowReservations` component accept?
-- The `HowReservations` component accepts a single prop called `onClick`, which is a function that will be called when the "Ok" button is clicked.
-
-3. What styling classes are applied to the elements in this component?
-- The component uses Tailwind CSS classes to style the elements, including `m-auto`, `w-96`, `mb-6`, `text-xl`, `mb-10`, `w-full`, `px-4`, `py-3`, `text-base`, `font-semibold`, `text-center`, `text-white`, `transition`, `duration-200`, `ease-in`, `bg-indigo-600`, `rounded-lg`, `shadow-md`, `hover:bg-indigo-700`, `focus:ring-offset-indigo-200`, and `focus:outline-none`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/InfinityLoader.md b/.autodoc/docs/markdown/core/src/zoo/InfinityLoader.md
deleted file mode 100644
index 3460fc883..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/InfinityLoader.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/InfinityLoader.tsx)
-
-The code above defines a React component called `InfinityLoader`. This component is responsible for rendering an animated infinity symbol that can be used as a loading indicator in the larger project.
-
-The component takes in three props: `alt`, `height`, and `width`. The `alt` prop is used to provide alternative text for the image, which is important for accessibility purposes. The `height` and `width` props are used to set the dimensions of the image. If these props are not provided, the default values of 32 pixels for height and 50 pixels for width will be used.
-
-The component uses the `Image` component from the `../components/Image` file to render the animated infinity symbol. The `Image` component is likely a custom component that wraps the standard `img` HTML element and provides additional functionality or styling.
-
-To use the `InfinityLoader` component in the larger project, it can be imported and rendered wherever a loading indicator is needed. For example:
-
-```
-import { InfinityLoader } from 'zoo';
-
-function MyComponent() {
- const [isLoading, setIsLoading] = useState(true);
-
- useEffect(() => {
- // simulate a delay
- setTimeout(() => {
- setIsLoading(false);
- }, 2000);
- }, []);
-
- return (
- Reserve your NFT
-
- {isLoading ?
- );
-}
-```
-
-In this example, the `InfinityLoader` component is used to display a loading indicator while some data is being fetched or processed. Once the data is ready, the `isLoading` state is set to `false` and the `InfinityLoader` component is replaced with a simple "Loaded!" message.
-
-Overall, the `InfinityLoader` component is a simple but useful piece of code that can help improve the user experience of the larger project by providing visual feedback during loading operations.
-## Questions:
- 1. What is the purpose of the `Image` component being imported?
-- The `Image` component is being imported from a file located at `../components/Image`. It is likely used to display images in the application.
-
-2. What is the purpose of the `InfinityLoader` function?
-- The `InfinityLoader` function returns an `Image` component with a specific source and dimensions. It is likely used to display a loading animation in the application.
-
-3. What is the significance of the default values for the `alt`, `height`, and `width` props?
-- The default values for the `alt`, `height`, and `width` props provide fallback values in case these props are not passed in when the `InfinityLoader` component is used. This ensures that the component will still render with appropriate values even if the props are not specified.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/LazyAcceptBidButton.md b/.autodoc/docs/markdown/core/src/zoo/LazyAcceptBidButton.md
deleted file mode 100644
index bb635cac5..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/LazyAcceptBidButton.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/LazyAcceptBidButton.tsx)
-
-The code imports several modules including `isNativeCurrency` from `@zoolabs/zdk`, `ethers`, `useCallback`, `useEffect`, `useState`, `useActiveWeb3React`, `useContract`, `useGasPrice`, and `useTransactionPopups`. It also imports `Bid`, `GraphBid`, and `TokenId` from `./types`.
-
-The code defines a functional component called `LazyAcceptBidButton` that takes in several props including `dropId`, `name`, `bidder`, `onError`, and `onAccept`. The component uses the `useActiveWeb3React` hook to get the current user's account and the `useGasPrice` hook to get the current gas price. It also uses the `useContract` hook to get the `App` and `Market` contracts.
-
-The component uses the `useEffect` hook to fetch a `marketBid` object from the `Market` contract using the `lazyBidForTokenBidder` method. If the `dropId`, `name`, and `bidder` props are all truthy, the `marketBid` object is used to create a `Bid` object which is stored in the component's state using the `setBid` function.
-
-The component defines a `acceptBid` function using the `useCallback` hook. This function attempts to accept the bid stored in the component's state by calling the `acceptLazyBid` method on the `App` contract. If the bid is successfully accepted, the `onAccept` function is called with the `dropId` prop. If an error occurs, the `onError` function is called with the error.
-
-Finally, the component returns a button element that calls the `acceptBid` function when clicked.
-
-This component can be used in a larger project to allow users to accept bids on a particular token. The `LazyAcceptBidButton` component can be passed the necessary props to identify the token and the bidder, and it will handle the logic of fetching the bid and accepting it. This can simplify the code needed to implement this functionality elsewhere in the project. For example:
-
-```
-Loaded!
} -
-
- );
-}
-```
-
-In this example, the `MediaItem` component displays information about a media item, including its name and current bid (if any). It also renders a button that, when clicked, opens the `LazyBidModal` component to display more details about the bid. The `MediaItem` component passes several props to the `LazyBidModal` component, including the `dropId`, `name`, `bid`, `isOpen`, and `onClose` props.
-## Questions:
- 1. What is the purpose of the `LazyBidModal` component?
-- The `LazyBidModal` component is used to display bid information and allow the user to remove or accept a bid.
-
-2. What external dependencies does this code rely on?
-- This code relies on several external dependencies, including `react`, `react-dom`, and various custom components and hooks defined in other files within the project.
-
-3. What is the significance of the `offline` state variable?
-- The `offline` state variable is used to determine whether the current user is offline or not, and is used to conditionally render a message to the user if they are the bidder and the bid is removed.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/LazyRemoveBidButton.md b/.autodoc/docs/markdown/core/src/zoo/LazyRemoveBidButton.md
deleted file mode 100644
index 281f242ca..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/LazyRemoveBidButton.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/LazyRemoveBidButton.tsx)
-
-The code is a React component called `LazyRemoveBidButton` that provides a button to remove a bid for a given token. It imports several hooks and a type from other files in the project.
-
-The component takes in several props, including the `dropId` of the token, its `name`, and the `currency` used for the bid. It also takes in optional `onError` and `onRemove` callbacks.
-
-The component uses the `useActiveWeb3React` hook to get the current user's account, and the `useGasPrice` hook to get the current gas price. It also uses the `useContract` hook to get instances of the `App` and `Media` contracts.
-
-The `removeBid` function is defined using the `useCallback` hook. It attempts to remove the bid by calling the `removeLazyBid` function on the `App` contract with the given `dropId`, `name`, and `gasPrice`. If the bid was successfully removed, the `onRemove` callback is called with the `dropId`. If an error occurs, the `onError` callback is called with the error.
-
-The `removeBid` function also adds a transaction popup using the `addTransactionPopup` function from the `useTransactionPopups` hook. This popup displays information about the transaction, including the summary "Removed Bid for {name}".
-
-Finally, the component returns a button that calls the `removeBid` function when clicked. The button has a red background and white text, and changes to an indigo background when hovered over.
-
-This component can be used in a larger project that involves bidding on tokens. It provides a simple way for users to remove their bids, and handles errors and transaction popups. An example usage of this component might look like:
-
-```
-{name}
-{bid ? `Current bid: ${bid.amount}` : "No bids yet"}
- - {isModalOpen && ( -
-
- )
-}
-```
-
-In the example above, the `PaymentForm` component renders the `SelectCurrency` component and passes in a callback function `handleCurrencySelect` to the `onSelect` prop. When a user selects a currency, the `handleCurrencySelect` function is called with the selected currency as an argument, and logs the selected currency symbol to the console. The `PaymentForm` component can then use the selected currency to calculate payment amounts or perform other payment-related tasks.
-## Questions:
- 1. What is the purpose of the `SelectCurrency` component?
- - The `SelectCurrency` component is used to display a list of supported payment currencies and allow the user to select one.
-2. Where does the `getSupportedPaymentCurrencies` function come from?
- - The `getSupportedPaymentCurrencies` function is imported from a file located at `../config/currencies`.
-3. What is the role of the `CurrencyLogo` component?
- - The `CurrencyLogo` component is used to display the logo or icon associated with each currency symbol.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/SetAsk.md b/.autodoc/docs/markdown/core/src/zoo/SetAsk.md
deleted file mode 100644
index f8a338cd3..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/SetAsk.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/SetAsk.tsx)
-
-The `SetAsk` component is a React component that allows users to set an asking price for a particular asset in the Zoo project. The component imports several dependencies, including `Currency`, `Token`, and `ZERO_ADDRESS` from the `@zoolabs/zdk` library, as well as various other components and hooks from the project.
-
-The component takes a `tokenId` prop, which is used to retrieve information about the asset being priced. It then uses the `useAsset` hook to retrieve the current asking price (`ask`), the currency token being used (`currencyToken`), and the type of asset (`type`). The component also initializes several pieces of state, including the current value of the input field (`value`), whether the user is offline (`offline`), the currently selected currency token (`selectedCurrencyToken`), and whether the currency selection dropdown is currently visible (`showSelectCurrency`).
-
-The component renders a form that allows the user to input a new asking price for the asset. The form includes an input field that accepts numeric input, as well as a button that allows the user to select a currency token. When the user selects a currency token, the `onSelectCurrency` function is called, which updates the `selectedCurrencyToken` state and hides the currency selection dropdown.
-
-When the user submits the form, the `SetAskButton` component is called with several props, including the `tokenType`, `tokenId`, `amount`, `currencyToken`, and `offline` values. This component is responsible for actually setting the new asking price for the asset.
-
-Overall, the `SetAsk` component provides a simple and intuitive interface for users to set asking prices for Zoo assets. It leverages several other components and hooks from the project to provide a seamless user experience.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `SetAsk` that allows users to set an asking price for a particular asset represented by a `tokenId`.
-
-2. What external dependencies does this code rely on?
-- This code imports various modules from external packages such as `@zoolabs/zdk`, `ethers`, and `@headlessui/react`. It also imports several functions and hooks from local files.
-
-3. What is the role of the `useEffect` hook in this code?
-- The `useEffect` hook is used to update the component's state when the `ask` or `currencyToken` values change. Specifically, it sets the `selectedCurrencyToken`, `value`, and `offline` state variables based on the current `ask` and `currencyToken` values.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/SetAskButton.md b/.autodoc/docs/markdown/core/src/zoo/SetAskButton.md
deleted file mode 100644
index fde9c350d..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/SetAskButton.md
+++ /dev/null
@@ -1,49 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/SetAskButton.tsx)
-
-The code is a React component called `SetAskButton` that allows a user to set an asking price for a specific token. The component takes in several props including `tokenId`, `tokenType`, `amount`, `currencyToken`, and `offline`.
-
-The component uses several hooks including `useActiveWeb3React`, `useGasPrice`, `useContract`, and `useTransactionPopups`. These hooks allow the component to interact with the Ethereum blockchain and display transaction popups to the user.
-
-When the user clicks the "Set Ask" button, the `setAsk` function is called. This function first checks if an `amount` has been provided. If an `amount` has been provided, it creates an `Ask` object with the `currency` and `amount` properties. The `amount` property is converted to the appropriate units using the `ethers.utils.parseUnits` function.
-
-The `media.setAsk` function is then called with the `tokenId`, `ask`, and `from` and `gasPrice` options. This function sets the asking price for the specified token on the blockchain. If the transaction is successful, a transaction popup is displayed to the user.
-
-If an error occurs during the transaction, an error popup is displayed to the user.
-
-Overall, this component allows users to set an asking price for a specific token on the Ethereum blockchain. It is likely used in a larger project that involves buying and selling tokens. Here is an example of how the component might be used in a larger project:
-
-```
-import { SetAskButton } from "./components/SetAskButton";
-
-const MyToken = () => {
- const tokenId = 123;
- const tokenType = "MyToken";
- const amount = 1;
- const currencyToken = { address: "0x123", decimals: 18 };
- const offline = false;
-
- return (
- Payment Form
-
-
- );
-};
-```
-## Questions:
- 1. What is the purpose of the `SetAskButton` component?
-- The `SetAskButton` component is used to set an asking price for a specific token.
-
-2. What libraries and hooks are being imported and used in this code?
-- The code imports `Currency` from `@zoolabs/zdk`, `ethers` from `ethers`, and `useCallback`, `useActiveWeb3React`, and `useContract` from custom `../hooks`. It also imports `useGasPrice` and `useTransactionPopups` from custom `../state/network/hooks` and `../state/transactions/hooks`, respectively. These hooks are used to interact with the Ethereum network and manage transactions.
-
-3. What happens if the `amount` parameter is not provided?
-- If the `amount` parameter is not provided, a message is logged to the console with the text "@todo - amount required message". It is unclear what this message is intended to do or how it is implemented.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/SetBid.md b/.autodoc/docs/markdown/core/src/zoo/SetBid.md
deleted file mode 100644
index c39c8471d..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/SetBid.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/SetBid.tsx)
-
-The `SetBid` component is a React component that allows a user to set a bid for a specific token. It imports various dependencies such as `useEffect`, `useState`, `CurrencyAmount`, `i18n`, `t`, `shortenAddress`, `shortenString`, `ApprovalState`, `useActiveWeb3React`, `useApproveCallback`, `useContract`, `useAsset`, `InfinityLoader`, `SetBidButton`, `Dots`, and `getExplorerLink`.
-
-The component takes in two props: `tokenId` and `children`. The `tokenId` prop is used to identify the token for which the user is setting a bid. The `children` prop is used to render any child components that are passed to the `SetBid` component.
-
-The `SetBid` component uses the `useActiveWeb3React` hook to get the current user's account and chain ID. It then uses the `useAsset` hook to get information about the token with the specified `tokenId`. This includes the `ask` price, `currencyToken`, `formattedAmount`, `formattedBalance`, `symbol`, and `type`.
-
-The component then uses the `useApproveCallback` hook to check if the user has approved the contract to spend their `currencyToken`. If the user has not approved the contract, the component displays a button that allows the user to approve the contract. If the user has approved the contract or if the `currencyToken` is a native token, the component displays a button that allows the user to set a bid for the specified token.
-
-The component also displays the user's account address and `formattedBalance` of the `currencyToken`. If the `formattedBalance` is zero, the component displays a message indicating that the user has insufficient balance. If the `approvalState` is pending, the component displays a loading button. If there is a pending transaction, the component displays a link to the transaction on the blockchain explorer.
-
-Overall, the `SetBid` component is a reusable component that can be used to allow users to set bids for tokens in a decentralized marketplace. It handles the approval process for spending `currencyToken` and provides a user-friendly interface for setting bids.
-## Questions:
- 1. What is the purpose of this code and what does it do?
-- This code is a React component called `SetBid` that handles the process of setting a bid for a specific token. It retrieves information about the token and the user's account using various hooks, and allows the user to approve the bid and submit it to the market contract.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including `react`, `@zoolabs/zdk`, `@lingui/core`, `@lingui/macro`, and `react-icons`.
-
-3. What are some potential issues or edge cases that a developer should be aware of when using this code?
-- One potential issue is that the `SetBid` component assumes that the `Market` contract is available and has been initialized using the `useContract` hook. If the contract is not available or has not been initialized correctly, the component may not function as expected. Additionally, the component assumes that the user has sufficient funds and approval to make the bid, so it may not handle cases where the user does not have enough funds or has not approved the necessary tokens.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/src/zoo/SetBidButton.md b/.autodoc/docs/markdown/core/src/zoo/SetBidButton.md
deleted file mode 100644
index fb726721c..000000000
--- a/.autodoc/docs/markdown/core/src/zoo/SetBidButton.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/src/zoo/SetBidButton.tsx)
-
-The code defines a React component called `SetBidButton` that represents a button for placing a bid on a particular token. The component takes in several props, including the details of the ask (the current highest bid), the ID and type of the token being bid on, the bid amount, and the currency being used.
-
-When the button is clicked, the `setBid` function is called. This function first checks that an amount has been specified for the bid, and if not, displays a message indicating that an amount is required. It then creates a `Bid` object containing the details of the bid, including the bidder's address, the bid amount, the currency being used, and other metadata.
-
-The function then determines whether the currency being used is a native currency (e.g. Ether) or a token, and calls the appropriate contract function (`setBid` on the `App` contract for native currencies, and `setBid` on the `Media` contract for tokens) to place the bid. It passes in the necessary parameters, including the token ID, the `Bid` object, the bidder's address, and the gas price.
-
-If the bid is successfully placed, the function adds a transaction popup to the UI indicating that the bid was placed. If there is an error, it adds an error popup instead.
-
-The `SetBidButton` component is likely used in a larger project that involves buying and selling tokens on a marketplace. It provides a simple and reusable way to place a bid on a token, abstracting away the details of interacting with the contracts and handling transaction popups.
-
-Example usage:
-
-```
-{tokenType}
-Token ID: {tokenId}
-Amount: {amount}
-
- This is a styled component
-
-```
-## Questions:
- 1. What is the purpose of the `linearBorderGradients` property in the `variants` object?
-- The `linearBorderGradients` property is used to specify the variants for the `linearBorderGradients` plugin, which allows for the creation of linear border gradients. The specified variants are `responsive`, `hover`, and `dark`.
-
-2. What is the purpose of the `plugin` function in the `plugins` array?
-- The `plugin` function is used to define a custom plugin for Tailwind CSS. In this case, it adds a utility class called `.header-border-b` that applies a linear gradient to the bottom border of an element.
-
-3. What is the purpose of the `minHeight` property in the `theme` object?
-- The `minHeight` property is used to specify minimum height values for elements. It includes values such as `empty` for a height of 128px, `cardContent` for a height of 230px, and `nftContainer` for a height of 503px.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/core/tsconfig.md b/.autodoc/docs/markdown/core/tsconfig.md
deleted file mode 100644
index f719acaf2..000000000
--- a/.autodoc/docs/markdown/core/tsconfig.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/core/tsconfig.json)
-
-This code is a configuration file for the TypeScript compiler. It specifies the options and settings that the compiler should use when compiling TypeScript code into JavaScript.
-
-The `compilerOptions` object contains various settings that affect how the compiler operates. Some notable options include:
-- `target`: specifies the version of ECMAScript that the compiled JavaScript should be compatible with. In this case, it is set to ES5.
-- `lib`: specifies the libraries that should be included in the compilation process. In this case, it includes the DOM and iterable libraries, as well as the esnext library.
-- `allowJs`: allows JavaScript files to be included in the compilation process.
-- `module`: specifies the module format that should be used in the compiled JavaScript. In this case, it is set to ES modules.
-- `moduleResolution`: specifies how module dependencies should be resolved. In this case, it is set to Node.js-style module resolution.
-- `resolveJsonModule`: allows JSON files to be imported as modules.
-- `jsx`: specifies how JSX syntax should be handled. In this case, it is set to preserve, which means that the JSX syntax will be left intact in the compiled JavaScript.
-- `baseUrl`: specifies the base directory for resolving non-relative module names.
-
-The `include` and `exclude` arrays specify which files should be included or excluded from the compilation process. In this case, it includes all TypeScript and TypeScript React files in the project, as well as some specific JavaScript files. It excludes the `node_modules` directory.
-
-Overall, this configuration file ensures that the TypeScript compiler is set up to compile the project's TypeScript and JavaScript files into ES5-compatible JavaScript modules, with support for various libraries and module formats. It also specifies which files should be included or excluded from the compilation process. This file is an important part of the project's build process, as it ensures that the code is compiled correctly and consistently.
-## Questions:
- 1. What is the purpose of this code file?
-- This code file is a configuration file for the TypeScript compiler for the zoo project.
-
-2. What version of ECMAScript is being targeted?
-- The "target" property is set to "es5".
-
-3. What files are included and excluded from compilation?
-- The "include" property specifies which files should be compiled, while the "exclude" property specifies which files should be ignored. In this case, all TypeScript and TypeScript React files are included, while the "node_modules" directory is excluded. Additionally, there are specific files included in the "include" property, such as "next-env.d.ts", "src/animation/index.js", "src/pages/_error.js", and "src/pages/_error.ts".
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/commitlint.config.md b/.autodoc/docs/markdown/foundation/commitlint.config.md
deleted file mode 100644
index bfd68a466..000000000
--- a/.autodoc/docs/markdown/foundation/commitlint.config.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/commitlint.config.js)
-
-This code exports an object that contains configuration options for the commitlint library. Commitlint is a tool that checks commit messages to ensure they follow a certain format. The configuration options in this file specify the rules that commitlint should use when checking commit messages.
-
-The `extends` property specifies that this configuration file extends the `config-conventional` configuration provided by commitlint. This means that the rules defined in `config-conventional` will be applied, and any additional rules defined in this file will override or add to those rules.
-
-The `rules` property is an object that contains the specific rules to be applied. The `type-enum` rule specifies that the `type` field in a commit message must be one of the values listed in the array. The values in the array correspond to different types of changes that can be made in a commit, such as `feat` for a new feature, `fix` for a bug fix, `docs` for documentation changes, and so on.
-
-The `// TODO Add Scope Enum Here` comment indicates that there is a rule that is currently commented out, but could be added later. This rule would specify that the `scope` field in a commit message must be one of a list of predefined values.
-
-Overall, this code ensures that commit messages in the project follow a consistent format, making it easier to understand the changes made in each commit. Here is an example of a valid commit message that would pass the rules defined in this file:
-
-```
-feat: Add new animal to zoo
-```
-
-And here is an example of an invalid commit message that would fail the `type-enum` rule:
-
-```
-bugfix: Fix typo in animal name
-```
-
-In summary, this code is an important part of the project's development process, as it helps maintain consistency and clarity in commit messages.
-## Questions:
- 1. What is the purpose of this code?
- This code exports an object that extends a conventional commit linting configuration and defines rules for commit message types.
-
-2. What is the significance of the `type-enum` rule?
- The `type-enum` rule enforces that commit messages must have one of the specified types, such as `feat`, `fix`, `docs`, etc.
-
-3. What is the purpose of the commented out `scope-enum` rule?
- The `scope-enum` rule is currently commented out, but it appears to be intended to enforce that commit messages must have a valid scope value.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/jest.config.md b/.autodoc/docs/markdown/foundation/jest.config.md
deleted file mode 100644
index 523305951..000000000
--- a/.autodoc/docs/markdown/foundation/jest.config.md
+++ /dev/null
@@ -1,25 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/jest.config.js)
-
-This code is responsible for creating a Jest configuration for testing a Next.js application. Jest is a popular JavaScript testing framework that is widely used in the industry. The `nextJest` function is imported from the `next/jest` package, which is a wrapper around Jest that provides additional functionality specific to Next.js applications.
-
-The `createJestConfig` function is created by calling `nextJest` with an options object that specifies the directory where the Next.js application is located. This allows Jest to load the `next.config.js` and `.env` files in the test environment. The resulting `createJestConfig` function is then customized by adding additional configuration options to the Jest configuration object.
-
-The `customJestConfig` object contains several configuration options that are specific to the project being tested. For example, the `setupFilesAfterEnv` option specifies a list of setup files that should be run before each test is executed. The `moduleDirectories` option specifies the directories that Jest should search for modules when resolving imports. The `testEnvironment` option specifies the environment in which the tests should be run.
-
-The `moduleNameMapper` option is used to map module names to file paths. This is useful for resolving absolute imports and module path aliases. For example, the `^@/(.*)$` regular expression matches any import that starts with `@/` and captures the rest of the path. The `
-
- Welcome to My Web App
-This is a great app that does amazing things.
- - -``` - -In this example, the `link` element with `rel="manifest"` specifies the location of the metadata file, and the `link` element with `rel="icon"` specifies the location of a favicon that can be used to represent the application in the browser's UI. - -Overall, this code is an important part of a web application's infrastructure, as it provides information that can be used to optimize the user experience and make the application more accessible and user-friendly. -## Questions: - 1. What is the purpose of this code? - This code is a JSON file that defines the name, icons, theme color, background color, and display settings for a web application. - -2. What are the dimensions of the icons? - The icons have two different sizes: 192x192 and 512x512. - -3. What does the "display" property mean? - The "display" property is set to "standalone", which means that the web application should be launched in a standalone mode, without any browser UI elements. \ No newline at end of file diff --git a/.autodoc/docs/markdown/foundation/public/robots.md b/.autodoc/docs/markdown/foundation/public/robots.md deleted file mode 100644 index c7437fa1e..000000000 --- a/.autodoc/docs/markdown/foundation/public/robots.md +++ /dev/null @@ -1,22 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/foundation/public/robots.txt) - -This code is a robots.txt file that is used to communicate with web crawlers or robots that visit a website. The purpose of this file is to provide instructions to these robots on which pages or sections of the website they are allowed to access and index. - -The first line of the code, "User-agent: *", specifies that the following instructions apply to all robots that visit the website. The next line, "Allow: /", allows all robots to access all pages and sections of the website. - -The following lines specify the host and sitemap of the website. The "Host" line specifies the URL of the website that the robots should visit. The "Sitemap" line specifies the location of the sitemap file, which contains a list of all the pages on the website that the robots should index. - -This code is important for search engine optimization (SEO) as it helps ensure that the website is properly indexed by search engines. By providing clear instructions to robots on which pages to index, the website can improve its search engine rankings and visibility. - -An example of how this code may be used in the larger project is if the zoo website has multiple sections or pages that are not meant to be indexed by search engines, such as administrative pages or pages with sensitive information. The robots.txt file can be used to block these pages from being indexed, ensuring that they remain private and secure. - -Overall, the robots.txt file is a crucial component of any website's SEO strategy, and this code provides clear instructions to robots on how to properly index the zoo website. -## Questions: - 1. **What is the purpose of this code?**\ -A smart developer might wonder what this code is for and how it fits into the overall project. Based on the content, it appears to be a robots.txt file that specifies which pages of the website can be crawled by search engines. - -2. **What does the "User-agent" and "Allow" directives mean?**\ -A smart developer might be curious about the meaning of the "User-agent" and "Allow" directives in the code. The "User-agent" directive specifies which search engine robots are allowed to access the site, while the "Allow" directive specifies which pages or directories are allowed to be crawled. - -3. **Why is the "Host" and "Sitemap" specified in the code?**\ -A smart developer might question why the "Host" and "Sitemap" are specified in the code. The "Host" directive specifies the domain name of the website, while the "Sitemap" directive specifies the location of the sitemap file that contains a list of all the pages on the website. This information is useful for search engines to properly index the site. \ No newline at end of file diff --git a/.autodoc/docs/markdown/foundation/public/sitemap-0.md b/.autodoc/docs/markdown/foundation/public/sitemap-0.md deleted file mode 100644 index f112a6a1a..000000000 --- a/.autodoc/docs/markdown/foundation/public/sitemap-0.md +++ /dev/null @@ -1,25 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/foundation/public/sitemap-0.xml) - -This code is an XML sitemap file that provides information about the URLs of a website to search engines. The sitemap is a list of URLs that are organized in a specific format to help search engines crawl and index the website more efficiently. - -The file starts with an XML declaration that specifies the version and encoding of the document. The root element of the document is `urlset`, which is defined by the `http://www.sitemaps.org/schemas/sitemap/0.9` namespace. The `urlset` element contains a list of `url` elements, each of which represents a URL on the website. - -Each `url` element contains a `loc` element that specifies the URL of the page, a `changefreq` element that indicates how frequently the page is likely to change, a `priority` element that indicates the relative priority of the page compared to other pages on the site, and a `lastmod` element that specifies the date and time the page was last modified. - -This sitemap file can be used by search engines to discover and index the pages on the website more efficiently. It can also be used by website owners to monitor the crawling and indexing of their site. - -For example, a website owner can submit the sitemap file to Google Search Console to monitor the indexing status of their site. They can also use the sitemap to identify any crawl errors or indexing issues that may be preventing their site from appearing in search results. - -Overall, this sitemap file is an important component of a website's SEO strategy, as it helps search engines discover and index the pages on the site more efficiently. -## Questions: - 1. What is the purpose of this code? - - This code is an XML sitemap that lists the URLs of various pages on the website `https://tsnext-tw.thcl.dev` along with some metadata such as the last modification date and priority. - -2. What is the significance of the `changefreq`, `priority`, and `lastmod` elements? - - The `changefreq` element indicates how frequently the page is likely to change, the `priority` element indicates the relative importance of the page compared to other pages on the site, and the `lastmod` element indicates the date and time when the page was last modified. - -3. Is there any reason why some URLs have additional path components (e.g. `/animals/Carousel`) while others do not? - - It's possible that the additional path components correspond to different sections or categories of the website, but without more context it's difficult to say for sure. \ No newline at end of file diff --git a/.autodoc/docs/markdown/foundation/public/sitemap.md b/.autodoc/docs/markdown/foundation/public/sitemap.md deleted file mode 100644 index 37b89963e..000000000 --- a/.autodoc/docs/markdown/foundation/public/sitemap.md +++ /dev/null @@ -1,39 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/foundation/public/sitemap.xml) - -This code is an XML file that contains a sitemap index for a website. The sitemap index is a list of all the sitemaps for the website, which are XML files that contain information about the website's pages and how they are organized. - -The XML file starts with a declaration that specifies the version of XML being used and the character encoding. The sitemap index is then defined using the "sitemapindex" tag, which is part of the sitemap schema. The schema defines the structure and elements that can be used in a sitemap or sitemap index. - -Within the sitemap index, there is a single sitemap defined using the "sitemap" tag. The "loc" element within the sitemap tag specifies the URL of the sitemap file. In this case, the URL is "https://tsnext-tw.thcl.dev/sitemap-0.xml". - -This code is important for search engine optimization (SEO) because it helps search engines like Google understand the structure of the website and how its pages are organized. By providing a sitemap index, the website owner can ensure that all of their pages are being indexed by search engines and that the search engines are able to find the most important pages on the site. - -In the larger project, this code would be used in conjunction with other sitemap files to provide a comprehensive list of all the pages on the website. The sitemap files would be generated automatically by a tool or plugin that crawls the website and extracts information about each page. The sitemap index would then be submitted to search engines like Google using the Google Search Console, which would help the website get indexed more quickly and accurately. - -Example usage: - -```xml - -
-
- Slide 1
-
-
- Slide 2
-
-
- Slide 3
-
-
- {/* header content */}
-
-
-
-
-
- );
-}
-
-export default HomePage;
-```
-
-In this example, the `HomePage` component imports and renders the `Aiding` component as part of its `main` content. This allows the `HomePage` component to reuse the `Aiding` component's code and styling without having to duplicate it.
-## Questions:
- 1. What is the purpose of this code?
-
- This code defines a React component called `Aiding` that returns a JSX element representing a section of content related to a project called "Aiding Species with Digital Twins" for a zoo website.
-
-2. What libraries or frameworks are being used in this code?
-
- This code is using React, as evidenced by the use of JSX syntax and the `export default` statement at the end of the file. It is also using Tailwind CSS classes to style the HTML elements.
-
-3. What is the expected output of this code?
-
- The expected output of this code is a styled HTML section with a black background, containing a centered heading, two paragraphs of text, and some responsive layout adjustments based on screen size. This section is likely to be displayed on a webpage related to the zoo's digital initiatives.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/Campaign.md b/.autodoc/docs/markdown/foundation/src/components/Campaign.md
deleted file mode 100644
index 41a44ee18..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/Campaign.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Campaign.tsx)
-
-The code above defines a React component called Campaign. This component is responsible for rendering a section of the Zoo website that encourages users to create their own fundraising campaigns to support the animals at the zoo.
-
-The component returns a div element with a black background, containing several child elements. The first child element is a paragraph that encourages users to bring their community to the Zoo foundation. The second child element is a heading that invites users to create their own campaign. The third child element is a paragraph that explains how users can raise funds for the animals by leveraging their network.
-
-The final child element is a Link component from the Next.js library. This component renders a hyperlink that says "Learn More". When the user clicks on this link, they will be directed to a different page on the Zoo website where they can learn more about creating a fundraising campaign.
-
-This Campaign component is likely used in the larger Zoo project as a way to encourage user engagement and fundraising. By providing users with the tools and resources they need to create their own campaigns, the Zoo can tap into the power of social networks to raise awareness and funds for their cause.
-
-Here is an example of how this Campaign component might be used in a larger React application:
-
-```
-import Campaign from './Campaign';
-
-function HomePage() {
- return (
-
-
- );
-}
-
-export default HomePage;
-```
-
-In this example, the Campaign component is imported and rendered within a larger HomePage component. This allows the Zoo to showcase their fundraising campaign on their homepage and encourage users to get involved.
-## Questions:
- 1. What is the purpose of this code?
- - This code is defining a React component called `Campaign` that renders a section of a webpage with text and a button that links to more information.
-
-2. What is the role of the `Link` component from the `next/link` library?
- - The `Link` component is used to create a clickable link that navigates to a different page or section of the same page. In this code, it is used to create a button that links to more information.
-
-3. What is the significance of the CSS classes used in this code?
- - The CSS classes are used to style the elements of the webpage. They define properties such as font size, color, padding, and border. The classes are written using a syntax called Tailwind CSS, which provides pre-defined styles that can be easily applied to elements.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/Collecting.md b/.autodoc/docs/markdown/foundation/src/components/Collecting.md
deleted file mode 100644
index e755885ec..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/Collecting.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Collecting.tsx)
-
-The code defines a React functional component called `Collecting`. This component renders a section of the web page related to collecting digital collectibles. The section has a black background and contains a heading, an image, and two links.
-
-The heading is centered and has white text. It reads "Start Collecting" and is displayed in a larger font size on larger screens.
-
-The image is displayed below the heading and is centered. It is a digital image of a collectible card and is loaded from the `/images/collecting.png` file. The image is displayed at a width of 3/5 of its container and has a fixed height of 800 pixels.
-
-Below the image, there are two links displayed side by side on larger screens and stacked vertically on smaller screens. The links are styled as text with an arrow icon to the right. The first link has the text "View Endangered Cards" and is not currently linked to any URL. The second link has the text "Shop Digital Collectibles" and is linked to the `/collect` URL.
-
-This component can be used in the larger project to display a section of the web page related to collecting digital collectibles. It can be imported and rendered within another component or page using the following code:
-
-```
-import Collecting from 'path/to/Collecting';
-
-function MyPage() {
- return (
- Welcome to the Zoo!
-Check out our latest fundraising campaign:
-
-
- );
-}
-```
-
-This will render the `Collecting` component within the `MyPage` component, allowing the user to view and interact with the collectibles section of the page.
-## Questions:
- 1. What is the purpose of the `Link` and `Image` imports?
-- The `Link` import is used to create clickable links to other pages, while the `Image` import is used to display an image on the page.
-
-2. What is the significance of the `max-md` class in the code?
-- The `max-md` class is used to apply styles only to screens with a maximum width of the medium breakpoint, which is typically around 768px.
-
-3. Why are there SVG paths in the `Link` components?
-- The SVG paths are used to display an arrow icon next to the link text, indicating that the link will take the user to another page.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/Comment.md b/.autodoc/docs/markdown/foundation/src/components/Comment.md
deleted file mode 100644
index c4656d22b..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/Comment.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Comment.tsx)
-
-The `Comment` function in this code file is responsible for rendering a section of the zoo website that displays various statistics related to animal conservation. The function defines an array of objects called `comments`, where each object represents a different statistic. Each object has four properties: `title`, `comment`, `link`, and `href`.
-
-The `title` property is a string that represents the statistic being displayed. The `comment` property is a string that provides additional information about the statistic. The `link` property is a string that represents the text of a hyperlink that is displayed below the `comment`. Finally, the `href` property is a string that represents the URL that the hyperlink should point to.
-
-The `Comment` function then returns a JSX element that renders the `comments` array. The array is mapped over using the `map` function, which returns a new array of JSX elements. For each object in the `comments` array, a new `div` element is created that displays the `title`, `comment`, and `link` properties. The `href` property is used to create a `Link` component from the `next/link` library, which wraps the hyperlink text and arrow icon.
-
-Overall, this code file is responsible for rendering a section of the zoo website that displays various statistics related to animal conservation. The `Comment` function takes an array of objects that represent these statistics and returns a JSX element that renders them in a visually appealing way. This code can be used in the larger project to provide users with important information about animal conservation and encourage them to take action to protect endangered species.
-
-Example usage:
-
-```
-import Comment from './Comment';
-
-function HomePage() {
- return (
-
-
- );
-}
-
-export default HomePage;
-```
-## Questions:
- 1. What is the purpose of the `Link` import from 'next/link'?
- - The `Link` import is used to create links to other pages within the application.
-
-2. What is the purpose of the `comments` array?
- - The `comments` array contains objects with information about various animal-related issues, including statistics and links to relevant pages.
-
-3. What is the purpose of the `fill-rule` and `clip-rule` attributes in the SVG path?
- - The `fill-rule` and `clip-rule` attributes are used to define how the interior of the SVG path should be filled and how the path should be clipped, respectively.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/Donation.md b/.autodoc/docs/markdown/foundation/src/components/Donation.md
deleted file mode 100644
index f82f272fa..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/Donation.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Donation.tsx)
-
-The `Donation` function in this code file is responsible for rendering a donation page for the zoo project. The page displays three donation options with different amounts and descriptions of how the funds will be used. The first two options are fixed amounts of $50 and $100, respectively, while the third option allows the user to enter a custom donation amount.
-
-The function uses an array of objects called `comments` to store the donation options. Each object has three properties: `title`, `comment`, and `type`. The `title` property stores the donation amount, the `comment` property provides a description of how the funds will be used, and the `type` property specifies whether the donation is a fixed amount or a custom amount.
-
-The function then maps over the `comments` array to render each donation option as a separate `div` element. Each `div` contains the `title` and `comment` properties of the corresponding object from the `comments` array. If the `type` property of the object is `'normal'`, the `div` also contains a `Link` component that allows the user to navigate to a donation page. If the `type` property is `'custom'`, the `div` contains an input field that allows the user to enter a custom donation amount.
-
-The function uses various CSS classes to style the donation page, including `text-gray-300`, `text-white`, `text-center`, `max-md`, `xl`, `md`, `lg`, `py-16`, `pb-10`, `w-full`, `border`, `rounded-xl`, and `cursor-pointer`.
-
-Overall, this code file provides a simple and user-friendly way for zoo visitors to make donations to support the zoo's conservation efforts. The `Donation` function can be imported and used in other parts of the zoo project to create a donation page or component.
-
-Example usage:
-
-```
-import Donation from './Donation';
-
-function App() {
- return (
- Welcome to the Zoo!
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `Donation` function?
-- The `Donation` function is responsible for rendering a donation page with different donation options.
-
-2. What is the structure of the `comments` array and how is it used in the code?
-- The `comments` array is an array of objects that contain information about different donation options, including the title, comment, and type. It is used to dynamically render each donation option on the page.
-
-3. What is the difference between the `normal` and `custom` types of donation options?
-- The `normal` type of donation option has a fixed donation amount and includes a "Donate" button that redirects the user to a donation page. The `custom` type of donation option allows the user to enter a custom donation amount and includes an input field for the user to enter their desired amount.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/Footer.md b/.autodoc/docs/markdown/foundation/src/components/Footer.md
deleted file mode 100644
index 7a360baa8..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/Footer.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Footer.tsx)
-
-The `Footer` component is responsible for rendering the footer section of the website. It contains two sections, one for larger screens and one for smaller screens. The larger screen section contains five columns, each with a different set of links. The first column contains links to the Zoo Foundation's social media pages, including Twitter, Telegram, Instagram, Discord, Medium, and YouTube. The second column contains links to pages about the Zoo Foundation, including the About page, Get Involved page, Donation page, Volunteer page, and Initiatives page. The third column contains links to pages about different animals, including the Red Wolf, Nubian Giraffe, Amur Leopard, and Sumatran Elephant. The fourth column contains links to pages about other animals, including the Javan Rhino, Pygmy Hippo, and Siberian Tiger. The fifth column contains links to the Zoo Foundation's Terms of Use, the zoolabs.io website, and the foundation's email address.
-
-The smaller screen section contains fewer links and is more condensed. It contains links to the Home page, About page, Get Involved page, Collect page, and Donation page. It also contains links to the Zoo Foundation's social media pages.
-
-This component can be used in the larger project by importing it into other components and rendering it at the bottom of the page. For example, a `Layout` component could import the `Footer` component and render it after the main content of the page. This would ensure that the footer is consistent across all pages of the website.
-
-Example usage:
-
-```
-import Footer from './Footer';
-
-function Layout(props) {
- return (
-
- {props.children}
-
-
- );
-}
-
-export default Layout;
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `Footer` that renders the footer section of a website called Zoo Foundation.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several icons from the `react-icons` library and a `Link` component from the `next/link` library.
-
-3. What is the layout and content of the footer section?
-- The footer section is divided into two parts: a visible section for larger screens and a hidden section for smaller screens. Both sections contain links to various pages on the website, as well as links to the Zoo Foundation's social media accounts. The visible section also includes the Zoo Labs logo and links to the website's home page and donation page, while the hidden section includes links to the website's privacy policy and terms of service.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/InvolvedContent.md b/.autodoc/docs/markdown/foundation/src/components/InvolvedContent.md
deleted file mode 100644
index 634f7165f..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/InvolvedContent.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/InvolvedContent.tsx)
-
-The `InvolvedContent` function in the `zoo` project is a React component that renders a section of content related to getting involved with the zoo. The component takes in several props, including `title`, `content1`, `content2`, `image`, `direction`, and `type`.
-
-The `title` prop is a string that represents the main heading of the section, while `content1` and `content2` are strings that represent the body content. The `image` prop is a string that represents the URL of an image to be displayed alongside the content. The `direction` prop is a string that determines the layout of the content and image, while the `type` prop is a string that determines which set of buttons to display.
-
-The component returns a div that contains the content and image, with the layout determined by the `direction` prop. The content is styled with various classes that determine the font size, color, and spacing. The image is displayed using the `next/image` component, which optimizes the image for performance and responsiveness.
-
-The buttons displayed at the bottom of the content are determined by the `type` prop. If `type` is equal to 2, then two buttons are displayed: one for donating and one for volunteering. If `type` is not equal to 2, then three buttons are displayed: one for volunteering, one for donating, and one for learning more. The buttons are styled with various classes that determine the font size, color, and spacing.
-
-Overall, the `InvolvedContent` component is a reusable component that can be used to display content related to getting involved with the zoo. It provides flexibility in terms of layout and button options, and uses the `next/image` component for optimized image display.
-
-Example usage:
-
-```
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code is for rendering a newsletter subscription form with an image and input fields for name and email.
-
-2. What is the role of the `Image` component imported from `next/image`?
-- The `Image` component is used to display an image with optimized performance and automatic optimization for different screen sizes.
-
-3. What is the significance of the CSS classes used in this code?
-- The CSS classes are used for styling the elements in the newsletter form, including the background color, text color, font size, input fields, and spacing between elements. The classes also have responsive variations for different screen sizes.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/NextImage.md b/.autodoc/docs/markdown/foundation/src/components/NextImage.md
deleted file mode 100644
index f8f0d3a83..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/NextImage.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/NextImage.tsx)
-
-The code is a React component that wraps the Next.js Image component to provide additional functionality. The NextImage component accepts several props, including useSkeleton, imgClassName, blurClassName, alt, width, height, and ImageProps. The useSkeleton prop is a boolean that determines whether or not to add a background with a pulse animation. The imgClassName prop is a string that specifies the class name for the image. The blurClassName prop is a string that specifies the class name for the blur effect. The alt prop is a string that specifies the alt text for the image. The width and height props specify the dimensions of the image. The ImageProps prop is an object that contains additional props for the Next.js Image component.
-
-The NextImage component renders a figure element that contains the Next.js Image component. If the width prop is not set, the figure element is given a width style that is equal to the width of the image. The Image component is given a className that is a combination of the imgClassName and blurClassName props. If the useSkeleton prop is true, the className also includes the animate-pulse class. The Image component is passed the src, width, height, alt, and rest props. The onLoadingComplete prop is used to set the status state to complete when the image has finished loading.
-
-This component can be used in a larger project to display images with additional functionality, such as a loading animation or a blur effect. Here is an example of how the NextImage component can be used:
-
-```
-import NextImage from '@/components/NextImage';
-
-function MyComponent() {
- return (
- Welcome to the Zoo!
-Learn about our mission and subscribe to our newsletter:
-
-
- );
-}
-```
-
-In this example, the NextImage component is used to display an image with a width and height of 500 pixels. The useSkeleton prop is set to true, which adds a background with a pulse animation. The imgClassName prop is set to "my-image", and the blurClassName prop is set to "my-blur". These class names can be used to style the image and the blur effect.
-## Questions:
- 1. What is the purpose of the `useSkeleton` prop?
-- The `useSkeleton` prop is used to add a background with pulse animation to the image, but should not be used if the image is transparent.
-
-2. What is the purpose of the `widthIsSet` variable?
-- The `widthIsSet` variable is used to check if the `className` prop includes the `w-` class, which is used to set the width of the image.
-
-3. What is the purpose of the `onLoadingComplete` prop?
-- The `onLoadingComplete` prop is used to set the status of the image to 'complete' once the image has finished loading.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/Ourefforts.md b/.autodoc/docs/markdown/foundation/src/components/Ourefforts.md
deleted file mode 100644
index e3e95030e..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/Ourefforts.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Ourefforts.tsx)
-
-The `Ourefforts` function is a React component that renders a section of the zoo project's website. The purpose of this section is to showcase the conservation efforts that the zoo is undertaking to protect endangered species. The component imports the `Image` component from the `next/image` library, which is used to display icons for each conservation effort.
-
-The component defines an array of objects called `efforts`, where each object represents a conservation effort. Each object has a `title` property, which is a string that describes the conservation effort, a `content` property, which is a string that provides more details about the effort, and an `icon` property, which is a string that specifies the path to the icon image for the effort.
-
-The `efforts` array is then mapped over to create a grid of cards, where each card displays the icon, title, and content for a conservation effort. The `Image` component is used to display the icon for each effort, and the `title` and `content` properties are used to populate the text content of each card.
-
-The component also includes some CSS classes to style the cards and their contents. The cards are displayed in a grid layout, with two columns on larger screens and one column on smaller screens. The text content of each card is displayed in a flexbox layout, with the title and content displayed in separate paragraphs.
-
-This component can be used in the larger zoo project to showcase the conservation efforts that the zoo is undertaking. It provides a visually appealing and informative way to communicate the zoo's commitment to protecting endangered species. Here is an example of how this component might be used in the larger project:
-
-```
-import Ourefforts from './Ourefforts';
-
-function ConservationPage() {
- return (
-
-
- );
-}
-
-export default ConservationPage;
-```
-
-In this example, the `ConservationPage` component renders a heading and the `Ourefforts` component, which displays the conservation efforts. This page could be linked to from the zoo's homepage or navigation menu to provide visitors with more information about the zoo's conservation efforts.
-## Questions:
- 1. What is the purpose of the `Image` import from 'next/image'?
- - The `Image` import is used to display images in the component, with optimized performance and automatic optimization of image sizes and formats.
-
-2. What is the purpose of the `efforts` array?
- - The `efforts` array contains information about the conservation efforts for different endangered species, including their titles, descriptions, and icons.
-
-3. What is the purpose of the `className` attributes in the JSX code?
- - The `className` attributes are used to apply CSS classes to the HTML elements in the component, for styling and layout purposes.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/Principles.md b/.autodoc/docs/markdown/foundation/src/components/Principles.md
deleted file mode 100644
index 92fe66db2..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/Principles.md
+++ /dev/null
@@ -1,25 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Principles.tsx)
-
-The code above defines a React component called Principles that renders a section of the Zoo website. The purpose of this component is to display the principles that drive the Zoo's mission and encourage visitors to donate, get involved, or learn more about the organization.
-
-The component is composed of a div element with a black background and a height of 52 pixels on larger screens and 28 pixels on smaller screens. Inside this div, there is another div element with a white background that contains the content of the section. The content is centered horizontally and vertically and has a maximum width of 16 pixels on smaller screens.
-
-The content of the section consists of a title, five paragraphs, and three links. The title is centered and has a white color. It is displayed in a larger font size on larger screens and a smaller font size on smaller screens. The title has an underline that is achieved by wrapping the "us" word in an HTML u tag.
-
-The five paragraphs describe the principles that drive the Zoo's mission. Each paragraph has a white color and a font size that varies depending on the screen size. The first paragraph is bold and describes the Zoo's commitment to wildlife conservation. The second paragraph describes the Zoo's goal of inspiring positive action through education. The third paragraph highlights the Zoo's use of innovative technology. The fourth paragraph emphasizes the importance of engaging communities for species protection. The fifth and final paragraph describes the Zoo's mission to foster human-nature coexistence.
-
-The three links at the bottom of the section encourage visitors to donate, get involved, or learn more about the Zoo. Each link is wrapped in a Next.js Link component that provides client-side navigation without a full page refresh. The links have different styles depending on their background color, text color, and border color. The first link is white with a black border and black text on hover. The second link is black with a white border and white text on hover. The third link is black with a white border and white text on hover, but it is only displayed on smaller screens.
-
-Overall, the Principles component is an important part of the Zoo website that communicates the organization's mission and encourages visitors to take action. It is a well-designed and responsive section that adapts to different screen sizes and provides an easy way to navigate to other parts of the website.
-## Questions:
- 1. What is the purpose of this code?
-
- This code defines a React component called Principles that renders a section of the zoo website that displays the principles that drive the organization, along with links to donate, get involved, and learn more.
-
-2. What technologies or libraries are being used in this code?
-
- This code uses the React library and the Next.js framework, as well as the Link component from Next.js to create the links in the component.
-
-3. What is the expected behavior of the links in this component?
-
- The links in this component are expected to navigate the user to different pages on the zoo website when clicked. The "Donate" and "Get Involved" links are visible on all screen sizes, while the "Learn More" link is only visible on smaller screens.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/Safeguard.md b/.autodoc/docs/markdown/foundation/src/components/Safeguard.md
deleted file mode 100644
index ee0a4b46a..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/Safeguard.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Safeguard.tsx)
-
-The `Safeguard` function in this code file is responsible for rendering a section of the zoo website that highlights the conservation efforts of the zoo. The function returns a JSX element that contains a header, a short video link, and four sections of text that describe the conservation efforts of the zoo.
-
-The `contents` array contains four objects, each with a `title` and `content` property. These properties are used to dynamically render the four sections of text on the page. The `map` function is used to iterate over the `contents` array and create a new `div` element for each object in the array. The `title` property is used to render a header for each section, and the `content` property is used to render a paragraph of text that describes the conservation effort.
-
-The `Link` component from the `next/link` library is used to create a hyperlink to a short video about the zoo's conservation efforts. The `svg` element is used to render an arrow icon next to the hyperlink.
-
-Overall, this code file is a small part of a larger project that aims to showcase the conservation efforts of the zoo. The `Safeguard` function is likely used in conjunction with other functions and components to create a cohesive website that informs visitors about the zoo's mission and values.
-
-Example usage:
-
-```jsx
-import Safeguard from './Safeguard';
-
-function App() {
- return (
- Conservation Efforts
-
-
- );
-}
-
-export default App;
-```
-## Questions:
- 1. What is the purpose of the `Link` import from 'next/link'?
- - The purpose of the `Link` import is not clear from this code alone, but it is likely used to create a hyperlink to another page or resource within the application.
-
-2. What is the purpose of the `contents` array?
- - The `contents` array appears to be used to store information about different activities related to wildlife conservation, which are then displayed on the page.
-
-3. What is the purpose of the `max-md` class name used throughout the code?
- - The `max-md` class name is likely used to apply specific styling to elements when the screen size is below a certain threshold, such as on mobile devices.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/Seo.md b/.autodoc/docs/markdown/foundation/src/components/Seo.md
deleted file mode 100644
index 01ba22c3e..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/Seo.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Seo.tsx)
-
-The code is a React component that generates meta tags for search engine optimization (SEO) and social media sharing. The component is called Seo and takes in props that can override the default meta tags. The default meta tags are defined in the constant defaultMeta.
-
-The component uses the Head component from the Next.js library to add the meta tags to the HTML head section. The useRouter hook is used to get the current URL path.
-
-The meta tags include the title, description, URL, and image for the website. The Open Graph protocol is used to provide additional metadata for social media sharing. Twitter-specific meta tags are also included.
-
-The component also includes links to various favicon images and a manifest file for progressive web apps.
-
-The Seo component can be used in any page of the Zoo project to provide consistent and customizable meta tags. For example, a page about a specific animal in the zoo can use the Seo component to set the title to the animal's name and the image to a photo of the animal.
-
-Here is an example of how the Seo component can be used:
-
-```
-import Seo from '../components/Seo';
-
-function AnimalPage({ animal }) {
- return (
- <>
- {animal.name}
-{animal.description}
-
- {isLoading ? (
-
- );
-}
-```
-
-In this example, the `App` component fetches some data from an API and renders it in a list. While the data is being fetched, the `Skeleton` component is rendered instead, with a height of 50 pixels. Once the data is loaded, the `Skeleton` component is replaced with the actual list of items. This provides a smooth and seamless user experience, as the user can see that something is happening while the data is being fetched.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a React component called Skeleton that renders a shimmering effect using CSS.
-
-2. What is the significance of the `clsxm` function?
- The `clsxm` function is likely a utility function that combines multiple class names into a single string, which is used to set the `className` prop of the `div` element.
-
-3. What is the purpose of the `backgroundImage` and `backgroundSize` styles?
- These styles are used to create the shimmering effect by animating a gradient background image that moves from left to right. The `backgroundSize` value of `700px 100%` ensures that the gradient is wide enough to cover the entire element.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/Volunteer.md b/.autodoc/docs/markdown/foundation/src/components/Volunteer.md
deleted file mode 100644
index e9b6e7fa8..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/Volunteer.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/Volunteer.tsx)
-
-The code above is a React component that renders a volunteer form on a webpage. The purpose of this component is to allow users to input their name and email address to express interest in volunteering for the zoo project.
-
-The component is written in JSX, which is a syntax extension for JavaScript that allows developers to write HTML-like code in their JavaScript files. The component imports the `Image` component from the `next/image` library, which is used to display an image on the webpage.
-
-The `Volunteer` function returns a div element that contains two child div elements. The first child div element contains a form that prompts users to input their name and email address. The form includes two input fields and a button that users can click to submit their information. The second child div element contains an image that is displayed on the right side of the form.
-
-The form is styled using CSS classes that are defined in the `tailwindcss` library. The classes are used to set the background color, font size, and padding of the form elements.
-
-This component can be used in the larger project to encourage users to get involved with the zoo project by volunteering their time and skills. The component can be added to a webpage using the `import` statement and the `Volunteer` component can be rendered using the `ReactDOM.render()` method.
-
-Example usage:
-
-```
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Volunteer from './Volunteer';
-
-ReactDOM.render(
- -
- {data.map(item => (
-
- {item.name} - ))} -
-
- );
-}
-
-export default AnimalPage;
-```
-
-In this example, the `AnimalPage` component is responsible for rendering a page that displays information about a specific animal. The `Detail` component is used to display a detailed view of the animal, which includes an image and links to allow the user to take action to support the animal. By using the `Detail` component in this way, the `AnimalPage` component can provide a consistent and informative experience for users who want to learn more about the animals in the zoo.
-## Questions:
- 1. What is the purpose of the `Detail` function?
-- The `Detail` function is a React component that returns JSX code for rendering a page with information about the Red Wolf and options for volunteering, donating, and learning more.
-
-2. What is the significance of the `max-md` class name used throughout the code?
-- The `max-md` class name is used to apply styles that only take effect when the screen size is smaller than or equal to the maximum width specified for medium-sized devices.
-
-3. How are the `Link` components used in this code?
-- The `Link` components are used to create clickable links that navigate to different pages or sections within the same page. They are styled with CSS classes and contain SVG icons as well as text labels.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/animal/Item.md b/.autodoc/docs/markdown/foundation/src/components/animal/Item.md
deleted file mode 100644
index 0ccfded7b..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/animal/Item.md
+++ /dev/null
@@ -1,56 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/animal/Item.tsx)
-
-The code above is a React component that renders a list of animals with their images and links to their respective pages. The component receives a list of animals as a prop, and if the list is undefined, it uses a default list of animals.
-
-The component uses the `Link` and `Image` components from the Next.js library to create links and images for each animal. It then maps over the list of animals and renders a div for each animal with its image and link.
-
-The component also uses CSS classes to style the layout of the animals' images and links. The `grid` class creates a grid layout with three columns on medium and large screens and one column on small screens. The `border`, `rounded-xl`, and `space-y-8` classes create a border, rounded corners, and vertical spacing between the animals' images and links.
-
-This component can be used in a larger project that displays a list of animals, such as a zoo website. The component can be imported and used in a page or another component that needs to display a list of animals. For example, the following code imports the `Item` component and uses it to display a list of animals:
-
-```
-import Item from '../components/Item';
-
-function AnimalsPage() {
- const animals = [
- {
- title: "African Lion",
- img: "/images/lion.png",
- href: "/animals/african_lion"
- },
- {
- title: "Bengal Tiger",
- img: "/images/tiger.png",
- href: "/animals/bengal_tiger"
- },
- {
- title: "Giant Panda",
- img: "/images/panda.png",
- href: "/animals/giant_panda"
- }
- ];
-
- return (
- {animal.name}
-
-
- );
-}
-
-export default AnimalsPage;
-```
-
-In this example, the `AnimalsPage` component defines a list of animals and passes it to the `Item` component as a prop. The `Item` component then renders the list of animals with their images and links.
-## Questions:
- 1. What is the purpose of the `Item` function and what does it return?
-
- The `Item` function takes in a list of animal objects and returns a JSX element that displays the animals' images, titles, and links to their respective pages.
-
-2. What is the purpose of the `Link` and `Image` components imported from the `next` library?
-
- The `Link` component is used to create clickable links to the animal pages, while the `Image` component is used to display the animal images.
-
-3. What is the purpose of the `animals` constant and how is it used in the code?
-
- The `animals` constant is an array of animal objects that is used to populate the list of animals to be displayed. If a list of animals is not provided as a prop to the `Item` function, the `animals` constant is used as a default.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/buttons/Button.md b/.autodoc/docs/markdown/foundation/src/components/buttons/Button.md
deleted file mode 100644
index ac269aa8f..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/buttons/Button.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/buttons/Button.tsx)
-
-The `Button` component is a reusable React component that renders a button element with customizable styles and optional icons. It takes in several props, including `isLoading`, `isDarkBg`, `variant`, `size`, `leftIcon`, `rightIcon`, `leftIconClassName`, and `rightIconClassName`.
-
-The `isLoading` prop is a boolean that determines whether the button should display a loading spinner. The `isDarkBg` prop is a boolean that determines whether the button should have a dark background. The `variant` prop is a string that determines the color scheme of the button and can be one of `primary`, `outline`, `ghost`, `light`, or `dark`. The `size` prop is a string that determines the size of the button and can be one of `sm` or `base`. The `leftIcon` and `rightIcon` props are React components that render icons to the left or right of the button text, respectively. The `leftIconClassName` and `rightIconClassName` props are strings that can be used to add additional classes to the icon elements.
-
-The `Button` component uses the `clsxm` library to generate a dynamic class string based on the props passed in. This class string is used to apply the appropriate styles to the button element. The styles are defined using Tailwind CSS classes and are organized into regions based on the `size` and `variant` props.
-
-If the `isLoading` prop is `true`, the button will display a loading spinner in the center of the button. The spinner is an instance of the `ImSpinner2` component from the `react-icons/im` library. The color of the spinner is determined by the `variant` prop.
-
-If the `leftIcon` or `rightIcon` props are provided, the corresponding icon will be rendered to the left or right of the button text, respectively. The size of the icon is determined by the `size` prop, and additional classes can be added using the `leftIconClassName` and `rightIconClassName` props.
-
-Overall, the `Button` component provides a flexible and customizable way to render buttons with consistent styles throughout a React application. Here is an example of how the `Button` component can be used:
-
-```jsx
-import Button from './Button';
-
-function MyComponent() {
- return (
- Animals
-
-
-
-
-
- );
-}
-```
-## Questions:
- 1. What are the available variants and sizes for the Button component?
-- The available variants for the Button component are 'primary', 'outline', 'ghost', 'light', and 'dark', while the available sizes are 'sm' and 'base'.
-2. What are the props that can be passed to the Button component?
-- The props that can be passed to the Button component are isLoading, isDarkBg, variant, size, leftIcon, rightIcon, leftIconClassName, rightIconClassName, and all the props that can be passed to a regular HTML button element.
-3. What is the purpose of the clsxm library used in this code?
-- The clsxm library is used to conditionally concatenate class names based on the values of the props passed to the Button component. This allows for dynamic styling of the button based on its props.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/buttons/IconButton.md b/.autodoc/docs/markdown/foundation/src/components/buttons/IconButton.md
deleted file mode 100644
index da304fe80..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/buttons/IconButton.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/buttons/IconButton.tsx)
-
-The `IconButton` component is a reusable button component that can be used throughout the project. It is built using React and the `react-icons` library. The component accepts several props, including `isLoading`, `isDarkBg`, `variant`, `icon`, and `iconClassName`.
-
-The `variant` prop determines the appearance of the button and can be one of five values: `primary`, `outline`, `ghost`, `light`, or `dark`. The `isDarkBg` prop is a boolean that determines whether the button is on a dark background. The `icon` prop is an icon from the `react-icons` library that will be displayed on the button. The `iconClassName` prop is an optional class name that can be applied to the icon.
-
-The `IconButton` component renders a `button` element with the appropriate classes based on the props passed to it. The `clsxm` function is used to conditionally apply classes based on the `variant` and `isDarkBg` props. The `isLoading` prop is used to disable the button and display a spinner while the button is loading.
-
-If the `isLoading` prop is `true`, the button is disabled and a spinner is displayed in the center of the button. The spinner is an instance of the `ImSpinner2` icon from the `react-icons/im` library. The color of the spinner is determined by the `variant` prop.
-
-If the `icon` prop is provided, the icon is displayed to the left of the button text. The `iconClassName` prop can be used to apply additional classes to the icon.
-
-Overall, the `IconButton` component provides a flexible and reusable button component that can be customized to fit the needs of the project. It can be used in a variety of contexts, such as forms, modals, and navigation menus.
-
-Example usage:
-
-```jsx
-import IconButton from './path/to/IconButton';
-
-function MyComponent() {
- return (
-
-
- Click me
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a React component called `IconButton` that renders a button with an icon and different variants based on the `variant` prop.
-
-2. What props can be passed to the `IconButton` component?
-- The `IconButton` component accepts the following props: `isLoading`, `isDarkBg`, `variant`, `icon`, `iconClassName`, and all the props that can be passed to a regular HTML button element.
-
-3. What are the different variants available for the `IconButton` component?
-- The `IconButton` component has five different variants: `primary`, `outline`, `ghost`, `light`, and `dark`. Each variant has its own set of styles that can be customized using the `variant` prop.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/buttons/TextButton.md b/.autodoc/docs/markdown/foundation/src/components/buttons/TextButton.md
deleted file mode 100644
index 6b25aaded..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/buttons/TextButton.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/buttons/TextButton.tsx)
-
-The code defines a React component called `TextButton` that renders a button element with customizable styling. The component accepts several props, including `variant`, which determines the color scheme of the button. The available variants are `'primary'` and `'basic'`.
-
-The component uses the `clsxm` library to conditionally apply CSS classes to the button element based on the `variant` prop and other props like `disabled` and `className`. The CSS classes define the appearance of the button, including its font weight, text color, and background color.
-
-The `TextButton` component is exported as the default export of the module, which means it can be imported and used in other parts of the project. For example, a component that needs to render a button with a specific color scheme could import `TextButton` and pass the desired `variant` prop.
-
-Here's an example of how `TextButton` could be used in another component:
-
-```
-import TextButton from '@/components/TextButton';
-
-function MyComponent() {
- return (
-
- Click me!
- Cancel
-
- );
-}
-```
-
-In this example, `MyComponent` renders two `TextButton` components with different `variant` props. The first button has a primary color scheme, while the second button has a basic color scheme.
-## Questions:
- 1. What is the purpose of the `clsxm` function being imported from `@/lib/clsxm`?
- - The smart developer might ask what the `clsxm` function does and how it is used in the code. The answer is that `clsxm` is a utility function used to concatenate class names together for use in the `className` attribute of the `button` element.
-
-2. What are the possible values for the `variant` prop and how do they affect the appearance of the button?
- - The smart developer might ask what the `variant` prop does and what values it can take. The answer is that `variant` is an optional prop that can take either `'primary'` or `'basic'` as its value, and it affects the color and text styles of the button.
-
-3. Why is the `buttonDisabled` prop being used instead of the `disabled` prop?
- - The smart developer might ask why the `buttonDisabled` prop is being used instead of the `disabled` prop, which is a standard prop for disabling form elements. The answer is that `buttonDisabled` is used to avoid a naming conflict with the `disabled` attribute of the `button` element, which is used to disable the button.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/intro/Intro.md b/.autodoc/docs/markdown/foundation/src/components/intro/Intro.md
deleted file mode 100644
index f5d5c9ba3..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/intro/Intro.md
+++ /dev/null
@@ -1,23 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/intro/Intro.tsx)
-
-The `Intro` function in this code file is responsible for rendering the introductory section of a web page. It takes in three props: `breadcrumbs`, `title`, and `comment`. The `breadcrumbs` prop is a string that represents the navigation path to the current page. The `title` prop is a string that represents the main title of the page. The `comment` prop is an optional string that represents a short description of the page.
-
-The function returns a JSX element that contains the introductory section of the page. The section has a black background and is divided into two parts: one for larger screens and one for smaller screens. The larger screen section contains a video of a giraffe and some text, while the smaller screen section contains an image of a jungle and some text.
-
-The video in the larger screen section is set to autoplay and loop. It is sourced from a file called `Giraffe_teen.webm`. The text in the section is divided into three parts: the `breadcrumbs` prop, the `title` prop, and the `comment` prop. The `breadcrumbs` and `title` props are displayed as headings, while the `comment` prop is displayed as a paragraph. There is also a horizontal line that separates the `comment` prop from the rest of the text.
-
-The image in the smaller screen section is sourced from a file called `intro_bg.png`. It is displayed on the right side of the section and takes up most of the available space. The text in the section is similar to the text in the larger screen section, but it is arranged differently. The `breadcrumbs` prop is displayed above the `title` prop, and the `comment` prop is displayed below the `title` prop.
-
-This function is likely used in the larger project to provide a consistent and visually appealing introduction to each page. By passing in different values for the `breadcrumbs`, `title`, and `comment` props, the function can be used to create unique introductory sections for each page. For example, on a page about lions, the `title` prop might be "Lions" and the `comment` prop might be "Learn about the king of the jungle and how you can help protect them". The `breadcrumbs` prop might be "Home > Animals > Lions". This would create an introductory section that is specific to the lion page and provides useful information to the user.
-## Questions:
- 1. What is the purpose of the `Intro` function and what are its required and optional parameters?
-
- The `Intro` function is a React component that returns JSX for rendering an introductory section of the website. It requires `breadcrumbs` and `title` parameters, and has an optional `comment` parameter.
-
-2. What is the purpose of the `Image` component from the `next/image` library and how is it used in this code?
-
- The `Image` component is used to display an image with optimized loading and resizing. In this code, it is used to display an image with the source `/images/intro_bg.png` and dimensions of 1000x1000 pixels.
-
-3. What is the purpose of the `max-md` class and how is it used in this code?
-
- The `max-md` class is used to apply styles that only take effect when the screen width is less than or equal to the `md` breakpoint. It is used to adjust the layout and font sizes of certain elements for smaller screens.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/layout/Header.md b/.autodoc/docs/markdown/foundation/src/components/layout/Header.md
deleted file mode 100644
index 28a55c7ac..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/layout/Header.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/layout/Header.tsx)
-
-This code defines a React component called `Header` that renders a navigation bar at the top of a web page. The navigation bar consists of a logo or home link on the left and a list of links on the right. The links are defined in an array called `links`, which contains objects with `href` and `label` properties. The `href` property specifies the URL that the link should point to, while the `label` property specifies the text that should be displayed for the link.
-
-The `Header` component uses the `UnstyledLink` component from the `@/components/links/UnstyledLink` module to render the links. The `UnstyledLink` component is a custom component that wraps the standard `a` tag and provides some additional styling and functionality. The `UnstyledLink` component takes two props: `href` and `className`. The `href` prop specifies the URL that the link should point to, while the `className` prop specifies the CSS class that should be applied to the link.
-
-The `Header` component maps over the `links` array using the `Array.map()` method to render each link as an `li` element with an `UnstyledLink` component inside. The `key` prop is set to a unique string that combines the `href` and `label` properties of each link object. This is necessary to help React identify each list item when the component is updated.
-
-The `Header` component is exported as the default export of the module, which means that it can be imported and used in other modules like this:
-
-```javascript
-import Header from '@/components/Header';
-
-function App() {
- return (
-
-
- {/* rest of the app */}
-
-
- );
-}
-```
-
-By importing and rendering the `Header` component in another module, the navigation bar will be displayed at the top of the web page. The `Header` component can be customized by changing the `links` array or by passing additional props to the `UnstyledLink` component.
-## Questions:
- 1. What is the purpose of the `UnstyledLink` component and where is it defined?
-- The `UnstyledLink` component is used to create links without any default styling. It is defined in a file located at `@/components/links/UnstyledLink`.
-
-2. What is the purpose of the `Header` component and where is it used?
-- The `Header` component is used to render a sticky header with a logo and navigation links. It is likely used at the top of a website or application.
-
-3. What is the purpose of the `links` array and how is it used?
-- The `links` array contains objects with `href` and `label` properties that define the links to be displayed in the header. It is used to dynamically render the navigation links using the `map` function.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/layout/Layout.md b/.autodoc/docs/markdown/foundation/src/components/layout/Layout.md
deleted file mode 100644
index 62768c47f..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/layout/Layout.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/layout/Layout.tsx)
-
-The code above is a React functional component that exports a default function called `Layout`. The purpose of this component is to provide a layout structure for other components in the project. It takes in a single prop called `children`, which is of type `React.ReactNode`. This prop is used to render the content that will be displayed within the layout.
-
-The component is written using TypeScript, which is a superset of JavaScript that adds static type checking to the language. The `React.ReactNode` type is used to ensure that only valid React nodes can be passed as children to the `Layout` component.
-
-The component returns a JSX expression that wraps the `children` prop within an empty fragment. This is done to avoid adding any additional markup to the DOM that could interfere with the layout of the child components.
-
-The `Layout` component can be used in other components by importing it and wrapping the content that needs to be displayed within the layout with it. For example:
-
-```
-import Layout from './Layout';
-
-function MyComponent() {
- return (
- Hello World!
-This is my component.
-
-
- );
-}
-```
-
-In this example, the `UnderlineLink` component is used to render a link to the products page. The `href` prop is passed to the `UnderlineLink` component, which passes it down to the `UnstyledLink` component. The link text "products" is passed as a child to the `UnderlineLink` component.
-## Questions:
- 1. What is the purpose of the `clsxm` library being imported?
- - `clsxm` is likely being used to generate a class string based on the provided arguments, which is then used to apply multiple CSS classes to the `UnstyledLink` component.
-
-2. What is the `UnderlineLink` component and how is it different from `UnstyledLink`?
- - `UnderlineLink` is a custom component that extends `UnstyledLink` and adds additional CSS classes to create an animated underline effect on hover and focus. It also accepts a `className` prop to allow for further customization.
-
-3. Why is `React.forwardRef` being used in the definition of `UnderlineLink`?
- - `React.forwardRef` is being used to forward the `ref` prop from `UnderlineLink` to the underlying `UnstyledLink` component, allowing the parent component to access and manipulate the DOM node directly if needed.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/components/links/UnstyledLink.md b/.autodoc/docs/markdown/foundation/src/components/links/UnstyledLink.md
deleted file mode 100644
index 4dff515dd..000000000
--- a/.autodoc/docs/markdown/foundation/src/components/links/UnstyledLink.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/components/links/UnstyledLink.tsx)
-
-The code defines a React component called `UnstyledLink` that can be used to create links in a web application. The component takes in several props, including `href`, `children`, `openNewTab`, `className`, and `nextLinkProps`.
-
-The `href` prop is a required string that specifies the URL that the link should point to. The `children` prop is also required and specifies the content of the link. The `openNewTab` prop is an optional boolean that specifies whether the link should open in a new tab or not. The `className` prop is an optional string that specifies additional CSS classes to apply to the link. Finally, the `nextLinkProps` prop is an optional object that contains any additional props that should be passed to the `Link` component from the Next.js framework.
-
-The `UnstyledLink` component uses the `React.forwardRef` method to forward any refs passed to it to the underlying `a` or `Link` element. The component then checks whether the `openNewTab` prop is set to `true` or not. If it is not set or if the `href` prop starts with a `/` or `#`, the component renders a `Link` element from the Next.js framework. Otherwise, the component renders a regular `a` element with the `target='_blank'` attribute set to open the link in a new tab.
-
-The `UnstyledLink` component is useful in a larger web application because it provides a consistent way to create links that can be styled and customized as needed. By default, the component uses the `Link` component from the Next.js framework, which provides client-side navigation and other benefits. However, if a link needs to open in a new tab, the `UnstyledLink` component can handle that as well.
-
-Here is an example of how the `UnstyledLink` component can be used in a React component:
-
-```
-import UnstyledLink from '@/components/UnstyledLink';
-
-function MyComponent() {
- return (
- Check out our
- About Us
- External Link
-
- );
-}
-```
-
-In this example, the `MyComponent` component renders two links using the `UnstyledLink` component. The first link points to a page within the application and uses the default behavior of the `Link` component. The second link points to an external website and opens in a new tab because the `openNewTab` prop is set to `true`.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a React component called `UnstyledLink` that conditionally renders either a `Link` component from the `next/link` library or a regular `a` tag with `target='_blank'` if the `openNewTab` prop is set to `true`.
-
-2. What are the required props for using this component?
- The required props for using this component are `href` and `children`, which specify the URL and content of the link, respectively. The `href` prop must be a string.
-
-3. What is the purpose of the `nextLinkProps` prop?
- The `nextLinkProps` prop is an optional object that can be used to pass additional props to the `Link` component when it is rendered. Any props that are valid for the `Link` component can be passed in this object, except for the `href` prop, which is already specified by the `href` prop of the `UnstyledLink` component.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/constant/env.md b/.autodoc/docs/markdown/foundation/src/constant/env.md
deleted file mode 100644
index 9d4bd1545..000000000
--- a/.autodoc/docs/markdown/foundation/src/constant/env.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/constant/env.ts)
-
-The code above defines three constants that are used to determine the environment in which the code is running. The first constant, `isProd`, checks if the `NODE_ENV` environment variable is set to `'production'`. If it is, then `isProd` is set to `true`. Otherwise, it is set to `false`. This constant can be used to determine if the code is running in a production environment or not.
-
-The second constant, `isLocal`, checks if the `NODE_ENV` environment variable is set to `'development'`. If it is, then `isLocal` is set to `true`. Otherwise, it is set to `false`. This constant can be used to determine if the code is running in a local development environment or not.
-
-The third constant, `showLogger`, is a bit more complex. It first checks if `isLocal` is `true`. If it is, then `showLogger` is set to `true`. This means that the logger will be shown in the console when running the code locally. If `isLocal` is `false`, then `showLogger` checks if the `NEXT_PUBLIC_SHOW_LOGGER` environment variable is set to `'true'`. If it is, then `showLogger` is set to `true`. Otherwise, it is set to `false`. This constant can be used to determine if the logger should be shown or not.
-
-Overall, this code is used to determine the environment in which the code is running and whether or not the logger should be shown. This information can be used to configure the code differently depending on the environment. For example, if the code is running in a production environment, certain features may be disabled or optimized for performance. If the code is running locally, the logger may be shown to aid in debugging.
-
-Example usage:
-
-```javascript
-if (isProd) {
- // disable certain features for production environment
-}
-
-if (isLocal) {
- // enable additional debugging features for local development
-}
-
-if (showLogger) {
- console.log('Logger enabled');
-}
-```
-## Questions:
- 1. What is the purpose of this code?
- This code exports three constants related to the environment: `isProd` checks if the environment is production, `isLocal` checks if the environment is development, and `showLogger` determines whether to show a logger based on the environment and a public variable.
-
-2. What is the significance of `process.env.NODE_ENV` and `process.env.NEXT_PUBLIC_SHOW_LOGGER`?
- `process.env.NODE_ENV` is a built-in Node.js variable that indicates the current environment (e.g. development, production). `process.env.NEXT_PUBLIC_SHOW_LOGGER` is a public variable that can be set to `true` or `false` to control whether to show a logger.
-
-3. What is the purpose of the `??` operator in the `showLogger` constant?
- The `??` operator is a nullish coalescing operator that returns the left-hand side if it is not `null` or `undefined`, otherwise it returns the right-hand side. In this case, it returns `false` if `process.env.NEXT_PUBLIC_SHOW_LOGGER` is `null` or `undefined`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/lib/clsxm.md b/.autodoc/docs/markdown/foundation/src/lib/clsxm.md
deleted file mode 100644
index 0649a4bf8..000000000
--- a/.autodoc/docs/markdown/foundation/src/lib/clsxm.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/lib/clsxm.ts)
-
-The code above is a function called `clsxm` that merges classes using two external libraries: `clsx` and `tailwind-merge`. The purpose of this function is to provide a way to merge classes with the full feature of `clsx` while also using `tailwind-merge` to merge classes with Tailwind CSS.
-
-The `clsx` library is used to generate a string of classes based on the input provided. It can handle various types of input, such as strings, arrays, and objects, and it can also handle conditional classes. The `tailwind-merge` library is used to merge classes based on the Tailwind CSS utility classes.
-
-The `clsxm` function takes in an array of `ClassValue` types, which can be any type that `clsx` can handle. It then passes this array to `clsx` to generate a string of classes. This string is then passed to `tailwind-merge` to merge any classes that match the Tailwind CSS utility classes. Finally, the merged classes are returned as a string.
-
-This function can be used in the larger project to simplify the process of merging classes. Instead of manually merging classes using `clsx` and `tailwind-merge`, developers can simply call the `clsxm` function and pass in the classes they want to merge. This can save time and reduce the chance of errors.
-
-Example usage:
-
-```
-import clsxm from 'path/to/clsxm';
-
-const classes = clsxm('text-red-500', { 'font-bold': true }, 'bg-gray-200');
-// classes = 'text-red-500 font-bold bg-gray-200'
-```
-
-In the example above, the `clsxm` function is used to merge three classes: `text-red-500`, `{ 'font-bold': true }`, and `bg-gray-200`. The resulting string of classes is `'text-red-500 font-bold bg-gray-200'`.
-## Questions:
- 1. What is the purpose of the `clsx` and `tailwind-merge` libraries being imported?
-- `clsx` is a library that allows for conditional joining of class names, while `tailwind-merge` is a library that merges Tailwind CSS classes together.
-
-2. What is the purpose of the `clsxm` function?
-- The `clsxm` function takes in any number of class values and merges them together using `clsx` and `tailwind-merge`, allowing for more flexible and powerful class merging capabilities.
-
-3. Are there any potential drawbacks or limitations to using this `clsxm` function?
-- Without knowing the specific use case and implementation of this function, it is difficult to determine any potential drawbacks or limitations. However, it is important to note that using multiple class merging libraries together may result in increased bundle size and potential conflicts between the libraries.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/lib/helper.md b/.autodoc/docs/markdown/foundation/src/lib/helper.md
deleted file mode 100644
index 7bcf89bd0..000000000
--- a/.autodoc/docs/markdown/foundation/src/lib/helper.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/lib/helper.ts)
-
-The code in this file provides three functions that can be used in a larger project. The first function, `openGraph`, generates an Open Graph (OG) image for a website. The function takes in an object with four properties: `siteName`, `description`, `templateTitle`, and `logo`. The `siteName` and `description` properties are required, while the other two are optional. The function returns a URL that can be used to generate the OG image.
-
-Here is an example of how to use the `openGraph` function:
-
-```
-const ogUrl = openGraph({
- siteName: 'My Website',
- description: 'This is a description of my website',
- templateTitle: 'My Template',
- logo: 'https://example.com/logo.png'
-});
-
-// ogUrl will be a string containing the URL for the OG image
-```
-
-The second and third functions, `getFromLocalStorage` and `getFromSessionStorage`, respectively, retrieve a value from either local or session storage. Both functions take in a `key` parameter and return the value associated with that key in the storage. If the storage is not available (e.g. if `window` or `sessionStorage` is undefined), the functions return `null`.
-
-Here is an example of how to use the `getFromLocalStorage` function:
-
-```
-const myValue = getFromLocalStorage('myKey');
-
-// myValue will be either the value associated with 'myKey' in local storage or null
-```
-
-Overall, these functions can be used to add functionality to a larger project. The `openGraph` function can be used to generate OG images for a website, while the `getFromLocalStorage` and `getFromSessionStorage` functions can be used to retrieve values from storage.
-## Questions:
- 1. What is the purpose of the `openGraph` function?
- - The `openGraph` function generates an Open Graph URL based on the provided parameters such as site name, description, logo, and template title.
-
-2. What is the purpose of the `getFromLocalStorage` function?
- - The `getFromLocalStorage` function retrieves a value from the local storage of the browser based on the provided key.
-
-3. What is the purpose of the `getFromSessionStorage` function?
- - The `getFromSessionStorage` function retrieves a value from the session storage of the browser based on the provided key.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/lib/logger.md b/.autodoc/docs/markdown/foundation/src/lib/logger.md
deleted file mode 100644
index a794f2e8d..000000000
--- a/.autodoc/docs/markdown/foundation/src/lib/logger.md
+++ /dev/null
@@ -1,27 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/lib/logger.ts)
-
-The code above is a logger function that is used to log information during development. It is designed to only log information when the `showLogger` constant is set to true. This function takes two parameters: `object` and `comment`. The `object` parameter is the object that needs to be logged, while the `comment` parameter is an optional string that can be used to provide additional information about the log.
-
-The logger function uses the `console.log()` method to output the log information. The log information is formatted using a template literal that includes the `typeof window` check to ensure that the function works in both the browser and server environments. The log information includes the path name of the current page, the comment (if provided), and the object that needs to be logged.
-
-This logger function is useful in the larger project because it allows developers to log information during development without cluttering the console with unnecessary logs. By setting the `showLogger` constant to true, developers can easily see the information they need to debug the application. Here is an example of how this logger function can be used in the larger project:
-
-```
-import logger from '@/utils/logger';
-
-function myFunction() {
- const myObject = { name: 'John', age: 30 };
- logger(myObject, 'This is my object');
-}
-```
-
-In the example above, the `myFunction()` function creates an object called `myObject` and passes it to the `logger()` function along with a comment. If the `showLogger` constant is set to true, the logger function will output the log information to the console. This information can be used to debug the application and identify any issues that may be present.
-## Questions:
- 1. What is the purpose of the `showLogger` constant and where is it defined?
-- `showLogger` is used to determine whether or not to log information and is likely defined in the `env` module.
-
-2. What is the significance of the `lg` snippet mentioned in the `comment` parameter?
-- The `lg` snippet is likely a shorthand for a comment template used by the developer to quickly generate comments for logging purposes.
-
-3. What is the purpose of the `%c` and `color` parameters in the `console.log` statement?
-- The `%c` parameter is used to apply CSS styles to the logged text, and the `color` parameter sets the color of the text to a specific shade of blue.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/404.md b/.autodoc/docs/markdown/foundation/src/pages/404.md
deleted file mode 100644
index 7a2bb42e6..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/404.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/404.tsx)
-
-This code defines a React component called `NotFoundPage` that renders a custom 404 error page for a web application. The component imports several other components and icons from the project's codebase, including `Layout`, `ArrowLink`, and `Seo`, as well as the `RiAlarmWarningFill` icon from the `react-icons/ri` library.
-
-When the `NotFoundPage` component is rendered, it returns a JSX template that includes the imported components and icon. The `Layout` component provides a consistent layout for the page, while the `Seo` component sets the page's metadata, including the title. The `ArrowLink` component renders a link to the home page of the application.
-
-The main content of the page is contained within a `section` element with a white background. The content is centered vertically and horizontally using flexbox, and includes the `RiAlarmWarningFill` icon, which is animated to flicker and has a red color. The icon is followed by a heading that reads "Page Not Found" in large text, and a link to the home page of the application.
-
-This component can be used in a larger web application to provide a custom 404 error page that matches the application's branding and design. The `NotFoundPage` component can be imported and used in a routing system to handle requests for pages that do not exist. For example, in a Next.js application, the `NotFoundPage` component could be used as the fallback page for undefined routes by defining a custom 404 page in the `pages/404.js` file:
-
-```javascript
-import NotFoundPage from '@/components/NotFoundPage';
-
-export default function Custom404() {
- return
-
- );
-}
-
-export default HomePage;
-```
-
-```tsx
-// MyApp.tsx
-import { AppProps } from 'next/app';
-import HomePage from './HomePage';
-
-import '@/styles/globals.css';
-import '@/styles/colors.css';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
-
-function MyApp({ Component, pageProps }: AppProps) {
- return {title}
-Welcome to the homepage!
-
-
- );
-}
-
-export default App;
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code is for a carousel component that displays images of different animals and some text.
-
-2. What libraries or frameworks are being used in this code?
-- This code is using Next.js, React-Slick, and Next/Image.
-
-3. What is the future upgrade mentioned in the code?
-- The future upgrade mentioned in the code is an AI chat feature that will be available for all Zoo Animals.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/animals/Content.md b/.autodoc/docs/markdown/foundation/src/pages/animals/Content.md
deleted file mode 100644
index 4d86c9a7f..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/animals/Content.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/animals/Content.tsx)
-
-The `Content` function in this file is responsible for rendering a component that displays a title and content in a specific layout. The function takes in two parameters, `title` and `content`, both of which are strings. The `title` parameter is used to display the title of the content, while the `content` parameter is used to display the actual content.
-
-The component is rendered using JSX, which is a syntax extension for JavaScript that allows for the creation of HTML-like elements. The component is wrapped in a `div` element with a class of `bg-black` and `md:px-64`, which sets the background color to black and adds padding to the left and right sides of the component on medium-sized screens and above.
-
-Inside the `div` element, there is another `div` element with a class of `flex` and `max-md:flex-col max-md:px-4 justify-between py-20`. This sets the layout of the component to a flexbox with a column layout on screens smaller than medium-sized screens and adds padding to the left and right sides of the component on screens smaller than medium-sized screens. It also adds space between the title and content using `justify-between` and adds padding to the top and bottom of the component using `py-20`.
-
-Inside the second `div` element, there are two `div` elements. The first `div` element has a class of `relative md:w-1/2 max-md:w-full md:pr-32 max-md:pb-8` and is used to display the title. It is positioned relative to its normal position and has a width of half the screen on medium-sized screens and above. It also adds padding to the right side of the component on medium-sized screens and below and padding to the bottom of the component on screens smaller than medium-sized screens.
-
-The second `div` element has a class of `w-1/2 max-md:w-full flex justify-between space-x-16` and is used to display the content. It has a width of half the screen on medium-sized screens and above and is a flexbox with space between the elements using `justify-between`. It also adds space between the elements using `space-x-16`.
-
-Inside the second `div` element, there is a `p` element with a class of `flex-1 text-white text-xl md:columns-2 gap-12`. This sets the text color to white, the font size to extra large, and adds two columns on medium-sized screens and above. It also adds space between the columns using `gap-12`. The `span` element inside the `p` element uses the `dangerouslySetInnerHTML` prop to render the `content` parameter as HTML.
-
-Finally, the `Content` function is exported as the default export of the file, which allows it to be imported and used in other files in the project. For example, in another file in the project, the `Content` component could be imported and used like this:
-
-```
-import Content from './path/to/Content';
-
-function MyComponent() {
- return (
-
-
- );
-}
-```
-
-This would render the `Content` component with a title of "My Title" and content of "My content
". -## Questions: - 1. What is the purpose of this code? - - This code defines a React component called `Content` that takes in a `title` and `content` as props and returns a styled div with the `title` displayed in a large font and the `content` displayed in a smaller font with HTML formatting. - -2. What styling classes are being used in this code? - - The code uses several Tailwind CSS classes for styling, including `bg-black`, `md:px-64`, `max-md:flex-col`, `max-md:px-4`, `py-20`, `relative`, `md:w-1/2`, `max-md:w-full`, `md:pr-32`, `max-md:pb-8`, `text-white`, `text-4xl`, `w-1/2`, `flex`, `justify-between`, `space-x-16`, `flex-1`, `text-xl`, and `md:columns-2`. - -3. What is the purpose of the `dangerouslySetInnerHTML` prop? - - The `dangerouslySetInnerHTML` prop is used to render the `content` prop as HTML, which allows for the use of HTML tags and formatting within the `content` string. However, it is important to note that using this prop can pose a security risk if the `content` string is not properly sanitized. \ No newline at end of file diff --git a/.autodoc/docs/markdown/foundation/src/pages/animals/Header.md b/.autodoc/docs/markdown/foundation/src/pages/animals/Header.md deleted file mode 100644 index dd5460886..000000000 --- a/.autodoc/docs/markdown/foundation/src/pages/animals/Header.md +++ /dev/null @@ -1,36 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/animals/Header.tsx) - -The `Header` function in this code file is a React component that renders a header section for a website. The header includes an image that flips when clicked, a title, a description, and two links for purchasing and adding items to a cart. The header also includes a navigation bar for mobile devices that displays links to different animal pages. - -The `useState` hook is used to create a state variable `flip` that is initially set to `false`. This variable is used to determine whether the image should be flipped or not. When the image is clicked, the `setFlip` function is called with the opposite value of `flip`, which causes the image to flip. - -The `ReactCardFlip` component is used to create a flipping effect for the image. It takes two `Image` components as children, each with a different image source. When the `isFlipped` prop is set to `true`, the second `Image` component is displayed, and when it is set to `false`, the first `Image` component is displayed. - -The `Link` components are used to create two buttons for purchasing and adding items to a cart. They are styled with different colors and borders to differentiate them. The `href` prop is set to `#` for both links, indicating that they are not functional in this code file. - -The navigation bar for mobile devices is created using `Link` components that link to different animal pages. The `className` prop is used to style the links with white text and a black background. The `active` class is added to the second link to indicate the current page. - -This `Header` component can be used in a larger project as a reusable header section for different pages. The image, title, and description can be customized for each page, and the links can be made functional by adding appropriate URLs. The navigation bar can also be customized with different links and styles. Here is an example of how this component can be used in a larger project: - -``` -import Header from './Header'; - -function HomePage() { - return ( -
-
- );
-}
-
-export default HomePage;
-```
-## Questions:
- 1. What is the purpose of the `ReactCardFlip` component and how does it work?
- - The `ReactCardFlip` component is used to flip between two images of an Amur Leopard trading card. It works by toggling the `isFlipped` state between `true` and `false` when the user clicks on a button, which triggers the flip animation.
-2. What is the significance of the `max-md` class name used throughout the code?
- - The `max-md` class name is used to apply styles that only affect screen sizes up to a certain width (in this case, the maximum width for medium-sized screens). This allows for responsive design that adapts to different screen sizes.
-3. What is the purpose of the `Link` components and how do they work?
- - The `Link` components are used to create clickable links to other pages within the website. They work by using the `href` prop to specify the URL of the destination page, and the `className` prop to apply styling to the link. When clicked, the link will navigate to the specified page.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/animals/[animal].md b/.autodoc/docs/markdown/foundation/src/pages/animals/[animal].md
deleted file mode 100644
index 008000a15..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/animals/[animal].md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/animals/[animal].tsx)
-
-This code defines the homepage of the zoo project using React. It imports various components from the project's file structure and renders them in a specific order to create the homepage.
-
-The `Layout` component is imported from `@/components/layout/Layout` and is used to define the overall structure of the page. The `Seo` component is imported from `@/components/Seo` and is used to define the search engine optimization settings for the page. The `Navbar` component is imported from `@/components/Navbar` and is used to create the navigation bar at the top of the page.
-
-The `Header` component is imported from `@/pages/animals/Header` and is used to create the header section of the page. The `Avatars` component is imported from `@/components/animal/Item` and is used to display a list of animal avatars. The `Content` component is imported from `@/pages/animals/Content` and is used to display information about the Amur leopard. The `Carousel` component is imported from `@/pages/animals/Carousel` and is used to display a carousel of images of various animals.
-
-The `Aiding` component is imported from `@/components/Aiding` and is used to display information about how to aid the zoo. The `Newsletter` component is imported from `@/components/Newsletter` and is used to display a newsletter subscription form. The `Footer` component is imported from `@/components/Footer` and is used to create the footer section of the page.
-
-The `HomePage` function is the main function that defines the structure of the page. It defines an array of animal avatars and passes it to the `Avatars` component as a prop. It also passes a title and content to the `Content` component as props. The content includes HTML tags for formatting.
-
-Overall, this code creates the homepage of the zoo project using various components that are imported from the project's file structure. It displays information about the Amur leopard, a carousel of animal images, and various sections for aiding the zoo and subscribing to a newsletter. It can be used as a starting point for creating other pages in the project.
-
-Example usage:
-
-```jsx
-import HomePage from '@/pages/HomePage';
-
-function App() {
- return (
- Welcome to the Zoo!
-Explore our collection of rare and endangered animals.
-
-
- );
-}
-```
-## Questions:
- 1. What components are being imported in this file?
-- The file is importing various components from different directories such as Layout, Seo, Navbar, StartCollecting, Newsletter, Footer, Header, Animal_Item, Animals, Donation, Volunteer, Campaign, Aiding, TradingCard, CardList, Support, Avatars, Content, and Carousel.
-
-2. What is the purpose of the `avatars` constant?
-- The `avatars` constant is an array of objects that contain information about different types of leopards such as their title, image, and href. It is used to display these avatars on the page using the `Avatars` component.
-
-3. What is the content being displayed on the page?
-- The page displays information about the Amur leopard, including its speed, agility, and behavior. It also includes a carousel of images and information about how to aid in the conservation of this species.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/api/hello.md b/.autodoc/docs/markdown/foundation/src/pages/api/hello.md
deleted file mode 100644
index c96891284..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/api/hello.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/api/hello.ts)
-
-This code is a simple Next.js API route that returns a JSON response with a name property set to 'Bambang'. The purpose of this code is to provide a basic example of how to create an API route using Next.js.
-
-The code imports the NextApiRequest and NextApiResponse types from the 'next' module. These types are used to define the types of the req and res parameters in the hello function. The req parameter is an instance of the NextApiRequest type, which represents the incoming HTTP request. The res parameter is an instance of the NextApiResponse type, which represents the outgoing HTTP response.
-
-The hello function is the main function of this code. It takes in the req and res parameters and uses the res parameter to send a JSON response with a name property set to 'Bambang'. The res.status(200) method sets the HTTP status code of the response to 200, which means the request was successful. The .json() method serializes the response object to JSON and sends it as the response body.
-
-This code can be used as a starting point for creating more complex API routes in a larger project. For example, if the project required an API route to retrieve data from a database, the hello function could be modified to query the database and return the results as a JSON response.
-
-Here is an example of how this code could be used in a larger project:
-
-```javascript
-import { NextApiRequest, NextApiResponse } from 'next';
-
-export default function getData(req: NextApiRequest, res: NextApiResponse) {
- // Query the database to get the data
- const data = queryDatabase();
-
- // Send the data as a JSON response
- res.status(200).json(data);
-}
-```
-
-In this example, the getData function queries the database to get some data and sends it as a JSON response using the res.status(200).json() methods. This function could be used as an API route in a larger project to retrieve data from a database.
-## Questions:
- 1. What is the purpose of this API route?
- This API route is a simple example that returns a JSON response with a name property set to 'Bambang'.
-
-2. What is the expected input for this API route?
- This API route does not expect any input as it does not use the `req` parameter.
-
-3. What is the expected output format for this API route?
- The expected output format for this API route is a JSON object with a single property named 'name' set to a string value. The HTTP status code returned is 200.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/collect/CardList.md b/.autodoc/docs/markdown/foundation/src/pages/collect/CardList.md
deleted file mode 100644
index 845a132d0..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/collect/CardList.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/collect/CardList.tsx)
-
-The `CardList` function in the `zoo` project is responsible for rendering a list of trading cards on a webpage. The function imports the `Image` component from the `next/image` library, which is used to display the images of the trading cards.
-
-The function defines an array called `cardlist` that contains objects with the `img` property set to the file path of each trading card image. The function then returns a JSX element that contains a `div` with a black background color. Inside this `div`, there is another `div` with a grid layout that displays the trading cards in a 3-column layout.
-
-The `map` method is used to iterate over the `cardlist` array and render an `Image` component for each trading card. The `src` attribute of the `Image` component is set to the `img` property of each object in the `cardlist` array. The `width` and `height` attributes are set to 800 pixels, which is the size of the trading card images.
-
-This function can be used in the larger `zoo` project to display a collection of trading cards on a webpage. The `cardlist` array can be updated with new trading cards, and the `CardList` function will automatically render the updated list of cards.
-
-Example usage of the `CardList` function:
-
-```
-import CardList from './CardList';
-
-function TradingCardsPage() {
- return (
-
-
- );
-}
-
-export default TradingCardsPage;
-```
-
-In this example, the `TradingCardsPage` component renders a heading and the `CardList` component to display a collection of trading cards.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a component called `CardList` that renders a grid of trading card images using the Next.js `Image` component.
-
-2. Where are the trading card images sourced from?
- The trading card images are sourced from the `/images` directory, but it is unclear where this directory is located relative to the `zoo` project.
-
-3. Why are there duplicate entries in the `cardlist` array?
- It is unclear why there are duplicate entries for the `img` property in the `cardlist` array. This may be intentional or a mistake that needs to be corrected.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/collect/Header.md b/.autodoc/docs/markdown/foundation/src/pages/collect/Header.md
deleted file mode 100644
index bdfece93e..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/collect/Header.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/collect/Header.tsx)
-
-The `Header` function in this code file is responsible for rendering the header section of the zoo website. It imports two components from the Next.js library, `Link` and `Image`, which are used to create links to different animal pages and display an image of an elephant, respectively.
-
-The header is contained within a `div` element with a black background color. The header is divided into two sections, which are aligned vertically on smaller screens and horizontally on larger screens. The first section contains a heading that reads "Animals we support." The heading is styled with white text and is responsive, changing size based on the screen size. The second section contains an image of an elephant and a list of links to different animal pages.
-
-The list of links is created using the `Link` component from Next.js. Each link is styled with white text and has a hover effect. When clicked, the link takes the user to a different page on the website that contains information about the animal. The links are hardcoded in the `Header` function, but they could be generated dynamically based on data from a database or API.
-
-The `Image` component is used to display an image of an elephant on the right side of the header. The image is responsive and changes size based on the screen size. The `src` attribute specifies the path to the image file, which is located in the `public/images` directory. The `width` and `height` attributes specify the dimensions of the image in pixels.
-
-Overall, the `Header` function is an important component of the zoo website that provides users with easy access to information about different animals. It is responsive and visually appealing, with a black background, white text, and an image of an elephant. The links to different animal pages are hardcoded, but could be generated dynamically based on data from a database or API.
-## Questions:
- 1. What is the purpose of this code?
- - This code is for rendering the header section of a web page related to a project called zoo. It includes a title and links to different animal pages.
-
-2. What is the role of the `next/link` and `next/image` modules?
- - The `next/link` module is used to create links to different animal pages, while the `next/image` module is used to display an image of a collectible elephant.
-
-3. What is the significance of the class names used in the code?
- - The class names are used for styling the elements using CSS. They are used to specify the layout, font size, padding, margin, and other visual properties of the header and the links.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/collect/Support.md b/.autodoc/docs/markdown/foundation/src/pages/collect/Support.md
deleted file mode 100644
index 9afb6af39..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/collect/Support.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/collect/Support.tsx)
-
-The `Support` function in the `zoo` project returns a JSX element that renders a section of the project's website. The purpose of this section is to inform visitors about the project's mission to support endangered species through the sale of digital collectibles.
-
-The JSX element returned by the `Support` function contains a `div` element with a black background and padding. Inside this `div`, there is another `div` element with a flexbox layout and padding. The `flex` class is used to arrange the child elements of this `div` in a row on larger screens and in a column on smaller screens.
-
-The `h1` element inside the second `div` contains the main heading of the section, which is displayed in white text and has varying font sizes depending on the screen size. The `p` elements contain paragraphs of text that describe the project's mission and how it works. These paragraphs are also displayed in white text and have varying font sizes depending on the screen size.
-
-The `Support` function is exported as the default export of the module, which means that it can be imported and used in other parts of the project. For example, if another component needs to display the `Support` section on a different page of the website, it can import the `Support` function and render it as a child element.
-
-Here is an example of how the `Support` function can be used in another component:
-
-```
-import Support from './Support';
-
-function HomePage() {
- return (
- My Trading Cards
-
-
- );
-}
-
-export default HomePage;
-```
-
-In this example, the `HomePage` component imports the `Support` function from the `Support.js` module and renders it as a child element inside a `div` element. This will display the `Support` section below the main heading of the page.
-## Questions:
- 1. What is the purpose of this code?
-
- This code defines a React component called `Support` that returns a JSX element representing a section of a webpage related to supporting endangered species through digital collectibles.
-
-2. What libraries or frameworks are being used in this code?
-
- This code is using React, as evidenced by the use of JSX syntax and the `export default` statement at the end of the file. It is also using Tailwind CSS classes to style the HTML elements.
-
-3. What is the expected output of this code?
-
- The expected output of this code is a section of a webpage with a black background, containing a heading and three paragraphs of text in white font. The text describes the purpose and benefits of purchasing digital collectibles to support endangered species, and encourages the reader to take action. The layout of the text is responsive, with different styles applied depending on the screen size.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/collect/TradingCard.md b/.autodoc/docs/markdown/foundation/src/pages/collect/TradingCard.md
deleted file mode 100644
index ef0928289..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/collect/TradingCard.md
+++ /dev/null
@@ -1,40 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/collect/TradingCard.tsx)
-
-The `TradingCard` function in this file is responsible for rendering a trading card component on a web page. The component includes an image of a trading card, a title, and a description. The purpose of this component is to provide users with a visual representation of the trading cards available on the website and encourage them to explore and learn more about the animals featured on the cards.
-
-The component is built using the Next.js framework and includes two imported modules: `Image` and `Link`. The `Image` module is used to display the image of the trading card, while the `Link` module is used to create a link to the page where users can view all of the trading cards available on the website.
-
-The component is structured using HTML-like syntax, with the `className` attribute used to apply CSS classes to the various elements. The `div` element with the class `bg-black` sets the background color of the component to black, while the `h1` element with the class `text-white` sets the color of the text to white.
-
-The `Image` component is used to display the image of the trading card. The `src` attribute specifies the path to the image file, while the `width` and `height` attributes set the dimensions of the image. The `alt` attribute is left blank, indicating that the image is purely decorative and does not require an alternative text description.
-
-The `Link` component is used to create a link to the page where users can view all of the trading cards available on the website. The `href` attribute specifies the URL of the page, while the `className` attribute applies CSS classes to the link. The link includes a text label and an SVG icon, which are styled using CSS.
-
-Overall, the `TradingCard` component is a simple but effective way to showcase the trading cards available on the website and encourage users to explore and learn more about the animals featured on the cards. It can be easily integrated into the larger project by importing and rendering the component wherever trading cards are displayed. For example:
-
-```
-import TradingCard from './TradingCard';
-
-function TradingCardPage() {
- return (
- Welcome to the Zoo Project
-
-
- );
-}
-
-export default TradingCardPage;
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code is for a TradingCard component that displays an image of a trading card and some text, with a link to view all cards.
-
-2. What libraries or frameworks are being used in this code?
-- This code is using the Next.js framework and the Image and Link components from the Next.js library.
-
-3. What is the expected output of this code?
-- The expected output of this code is a TradingCard component that displays an image of a trading card, some text, and a link to view all cards. The component is styled with some responsive design using CSS classes.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/collect/index.md b/.autodoc/docs/markdown/foundation/src/pages/collect/index.md
deleted file mode 100644
index abe8e48b7..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/collect/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/collect/index.tsx)
-
-This code defines the `HomePage` component for the `zoo` project. The component is a functional component that returns a JSX expression. The purpose of this component is to render the entire home page of the `zoo` website.
-
-The `HomePage` component imports various components from the `@/components` and `@/pages` directories. These components include `Layout`, `Seo`, `Navbar`, `Header`, `Aiding`, `TradingCard`, `CardList`, `Support`, `Animal_Item`, `Animals`, `Donation`, `Volunteer`, `StartCollecting`, `Campaign`, `Newsletter`, and `Footer`.
-
-The `Layout` component is a higher-order component that wraps the entire page content. The `Seo` component is responsible for setting the meta tags for the page. The `Navbar` component renders the navigation bar for the website. The `Header` component renders the header section of the home page. The `Aiding`, `TradingCard`, `CardList`, and `Support` components render various sections of the home page related to collecting and trading cards. The `Animal_Item` and `Animals` components render the details of individual animals and a list of animals, respectively. The `Donation` and `Volunteer` components render sections related to donations and volunteering. The `StartCollecting` component renders a section that encourages users to start collecting cards. The `Campaign` component renders a section related to ongoing campaigns. The `Newsletter` component renders a section for subscribing to the newsletter. The `Footer` component renders the footer section of the home page.
-
-This `HomePage` component is used as the main entry point for the home page of the `zoo` website. It imports and renders all the necessary components to display the entire home page.
-
-Example usage:
-```jsx
-import HomePage from '@/pages/HomePage';
-
-function App() {
- return (
- Trading Cards
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `Layout` component being imported?
-- The `Layout` component is likely responsible for providing a consistent layout structure for the entire application.
-
-2. What is the difference between the `Animal_Item` and `Animals` components?
-- Without further context, it is unclear what the difference is between these two components. It is possible that `Animal_Item` is responsible for rendering a single animal detail, while `Animals` is responsible for rendering a list of animals.
-
-3. What is the purpose of the `TradingCard`, `CardList`, and `Support` components?
-- Without further context, it is unclear what the purpose of these components is. It is possible that they are related to a feature for collecting or trading animal-themed cards.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/donation/Header.md b/.autodoc/docs/markdown/foundation/src/pages/donation/Header.md
deleted file mode 100644
index ad452112a..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/donation/Header.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/donation/Header.tsx)
-
-The `Header` function in this code file is a React component that renders a donation header for the Zoo Labs Foundation website. The component imports the `useState` hook from React and the `Image` component from the `next/image` library. It also imports the `Switch` component from the `react-switch` library.
-
-The `Header` function returns a JSX element that contains the donation header. The header is divided into two sections: the left section contains the donation form and the right section contains an image. The left section is further divided into four parts: a title, a heading, a paragraph, and a donation form.
-
-The title is a short statement that reads "End the road to extinction". The heading is a call to action that reads "Donate to the Zoo Labs Foundation". The paragraph is a description of the foundation's mission and purpose. The donation form contains three elements: a switch, an input field, and a button.
-
-The switch is a toggle button that allows the user to switch between a one-time donation and a monthly donation. The input field allows the user to enter the amount they wish to donate. The button is a call to action that reads "Donate Now".
-
-The right section contains an image that is floated to the right. The image is a visual representation of the foundation's mission and purpose.
-
-The `Header` function exports the component so that it can be used in other parts of the Zoo Labs Foundation website. For example, the component can be imported into the homepage of the website and rendered as a header at the top of the page.
-
-Here is an example of how the `Header` component can be used in a React application:
-
-```
-import React from 'react';
-import Header from './Header';
-
-function App() {
- return (
-
-
- );
-}
-
-export default App;
-```
-## Questions:
- 1. What is the purpose of the `Switch` component and how does it work?
- - The `Switch` component is used to toggle between monthly and one-time donations. It works by calling the `handleChange` function when it is toggled, which updates the `checked` state variable.
-2. What is the purpose of the `Image` component and how is it positioned on the page?
- - The `Image` component is used to display an image of a donation header. It is positioned on the right side of the page using the `float-right` class.
-3. What is the purpose of the `useState` hook and how is it used in this code?
- - The `useState` hook is used to create a state variable called `checked` and a function called `setChecked` to update it. It is used to keep track of whether the monthly donation switch is toggled on or off.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/donation/index.md b/.autodoc/docs/markdown/foundation/src/pages/donation/index.md
deleted file mode 100644
index 2493c0b2c..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/donation/index.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/donation/index.tsx)
-
-This code is a React component that renders the homepage of a website. It imports several components from the project's source code and uses them to build the page layout.
-
-The `Layout` component is the top-level container for the page, and it wraps all the other components. The `Seo` component is responsible for setting the metadata for the page, such as the title and description. The `Navbar` component is the website's navigation menu, and it provides links to other pages on the site. The `Header` component is a custom component that displays a banner image and some text. The `StartCollecting` component is a form that allows users to donate money to the website. The `Campaign` component displays information about the website's current fundraising campaign. The `Newsletter` component is a form that allows users to sign up for the website's newsletter. Finally, the `Footer` component contains links to social media and other information about the website.
-
-This component is likely used as the main entry point for the website, and it is responsible for rendering the content that users see when they first visit the site. Other components and pages may be linked to from this page, but this component is the starting point for the user's journey through the site.
-
-Here is an example of how this component might be used in a larger project:
-
-```jsx
-import * as React from 'react';
-import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-
-import HomePage from '@/pages/HomePage';
-import AboutPage from '@/pages/AboutPage';
-import ContactPage from '@/pages/ContactPage';
-
-export default function App() {
- return (
- Welcome to the Zoo Labs Foundation website!
-
-
- );
-}
-```
-
-This will render the `Header` component at the top of the `MyPage` component.
-
-Overall, this code demonstrates how React components can be used to create reusable UI elements that can be composed together to build complex web pages. The use of the Next.js `Image` component also shows how images can be optimized for performance and accessibility in a Next.js project.
-## Questions:
- 1. What is the purpose of the `Image` import from 'next/image'?
- - The `Image` import is used to display an image on the webpage with optimized performance and accessibility.
-
-2. What is the significance of the `className` attributes used in the `div` and `h1` tags?
- - The `className` attributes are used to apply CSS styles to the corresponding HTML elements.
-
-3. What is the purpose of the `export default Header` statement at the end of the code?
- - The `export default` statement is used to export the `Header` function as the default export of this module, allowing it to be imported and used in other parts of the project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/getinvolved/index.md b/.autodoc/docs/markdown/foundation/src/pages/getinvolved/index.md
deleted file mode 100644
index 9dfcc4209..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/getinvolved/index.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/getinvolved/index.tsx)
-
-This code defines the homepage of the Zoo project, a website dedicated to conservation efforts for endangered species. The code imports various React components from the project's components directory and renders them within a Layout component.
-
-The rendered components include a Navbar, Seo, Header, InvolvedContent, Comments, Donation, Volunteer, StartCollecting, Campaign, Newsletter, and Footer. These components provide information about the Zoo's conservation programs, on-the-ground activities, animal rescue efforts, data collection, legal policies, and opportunities for involvement through volunteering, donating, and collecting.
-
-The InvolvedContent component is used multiple times to display information about the Zoo's various initiatives. It takes in props such as an image, title, and content and renders them in a specific layout based on the type and direction props. The Comments component allows users to leave comments on the page, while the Donation and Volunteer components provide ways for users to contribute to the Zoo's efforts.
-
-Overall, this code defines the structure and content of the Zoo project's homepage, providing users with information about the organization's conservation efforts and ways to get involved. It can be used as a starting point for further development of the project's website and can be customized to fit the specific needs of the organization.
-
-Example usage:
-```
-import HomePage from '@/pages/HomePage';
-
-function App() {
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What components are being imported and used in this code?
-- The code is importing and using various components such as Layout, Seo, Navbar, Header, InvolvedContent, Comments, Donation, Volunteer, StartCollecting, Campaign, Newsletter, and Footer.
-
-2. What is the purpose of this code?
-- This code is rendering a homepage for the Zoo Labs Foundation website, which includes various sections such as information about their conservation programs, on-ground activities, rescuing animals, collecting data, legal avenues, and ways to get involved through volunteering, donating, and signing up for their newsletter.
-
-3. What is the significance of the "type" and "direction" props being passed to the InvolvedContent component?
-- The "type" prop is used to determine the layout of the InvolvedContent component, with a value of 1 indicating a left-aligned layout and a value of 2 indicating a right-aligned layout. The "direction" prop is used to determine the order in which the image and content are displayed, with a value of 1 indicating that the image is displayed before the content and a value of 2 indicating that the content is displayed before the image.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/index.md b/.autodoc/docs/markdown/foundation/src/pages/index.md
deleted file mode 100644
index 702402305..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/index.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/index.tsx)
-
-This code defines the `HomePage` component for the `zoo` project. The component is a functional component that returns a JSX element. The `HomePage` component is composed of several other components imported from the `@/components` directory.
-
-The `Layout` component is the top-level component that wraps all the other components. It provides a consistent layout for the entire page. The `Seo` component is used to set the metadata for the page, such as the title and description. The `Navbar` component is the navigation bar that appears at the top of the page.
-
-The `Intro` component is used to display an introduction to the page. It takes in several props, including `breadcrumbs`, `title`, and `comment`, which are used to customize the content of the component. The `Comment` component is a section for user comments. The `Principles` component displays the guiding principles of the `zoo` project. The `Donation` component is used to solicit donations from users.
-
-The `AnimalDetail` component is used to display detailed information about a specific animal. It is wrapped in a `div` with a black background. The `AnimalItems` component displays a list of animals with brief descriptions. The `Safeguard` component displays information about how the `zoo` project is safeguarding wildlife. The `StartCollecting` component is used to encourage users to start collecting donations. The `Newsletter` component is used to encourage users to sign up for the `zoo` project's newsletter. The `Footer` component is the footer that appears at the bottom of the page.
-
-Overall, the `HomePage` component is the main landing page for the `zoo` project. It provides an overview of the project's mission, principles, and activities. It also provides users with opportunities to donate, learn more about specific animals, and sign up for the newsletter. The component is composed of several smaller components that are used to display specific types of content.
-
-Example usage:
-
-```jsx
-import HomePage from '@/pages/HomePage';
-
-function App() {
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What components are being imported and used in this file?
-- The file is importing and using various components such as Layout, Intro, Seo, Navbar, Comment, Principles, Donation, AnimalDetail, AnimalItems, Safeguard, StartCollecting, Newsletter, and Footer.
-
-2. What is the purpose of the HomePage function?
-- The HomePage function is the default export of the file and it returns a JSX element that renders the imported components in a specific order to create the homepage of the website.
-
-3. What is the significance of the "breadcrumbs" and "comment" props passed to the Intro component?
-- The "breadcrumbs" prop is used to display the hierarchy of the website and the "comment" prop is used to display a short description of the foundation's mission. These props are used to provide context and information to the user about the website and its purpose.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/foundation/src/pages/terms/index.md b/.autodoc/docs/markdown/foundation/src/pages/terms/index.md
deleted file mode 100644
index 8001d424e..000000000
--- a/.autodoc/docs/markdown/foundation/src/pages/terms/index.md
+++ /dev/null
@@ -1,77 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/foundation/src/pages/terms/index.tsx)
-
-This code defines the homepage of the Zoo Labs Foundation website. The purpose of this code is to display the Privacy Policy of the organization. The code imports several components from the `@/components` directory, including `Layout`, `Seo`, `Navbar`, `Newsletter`, and `Footer`. These components are used to structure the page and provide additional functionality, such as search engine optimization and email newsletter subscription.
-
-The `HomePage` function returns a JSX element that contains the imported components and the Privacy Policy content. The content is structured using HTML tags and CSS classes to define the layout and styling of the page. The Privacy Policy content is divided into sections that explain how the organization collects, uses, and protects personal information. The content also includes information about user rights and choices, as well as contact information for the organization.
-
-This code can be used as a template for other pages on the Zoo Labs Foundation website. By importing and using the `Layout`, `Seo`, `Navbar`, `Newsletter`, and `Footer` components, other pages can be structured and styled consistently with the homepage. The Privacy Policy content can also be modified to create other legal documents, such as Terms of Service or a CCPA Privacy Notice for California Residents.
-
-Here is an example of how this code can be used to create a Terms of Service page:
-
-```
-import * as React from 'react';
-
-import Layout from '@/components/layout/Layout';
-import Seo from '@/components/Seo';
-import Navbar from '@/components/Navbar';
-import Newsletter from '@/components/Newsletter';
-import Footer from '@/components/Footer';
-
-export default function TermsOfServicePage() {
- return (
-
-
- Terms of Service
-
- This is the Terms of Service page for Zoo Labs Foundation. By using our website or services, you agree to the terms of this agreement. We may update this agreement from time to time, so please review it periodically to stay informed about any changes.
- 1. Acceptance of Terms
-By using our website or services, you agree to the terms of this agreement. If you do not agree to these terms, you should not use our website or services.
-2. Use of Website and Services
-You may use our website and services only for lawful purposes and in accordance with these terms. You agree not to use our website or services:
-(a) In any way that violates any applicable federal, state, local, or international law or regulation.
-(b) To engage in any conduct that restricts or inhibits anyone's use or enjoyment of the website or services, or which, as determined by us, may harm Zoo Labs Foundation or users of the website or services or expose them to liability.
-(c) To impersonate or attempt to impersonate Zoo Labs Foundation, a Zoo Labs Foundation employee, another user, or any other person or entity.
-(d) To engage in any other conduct that restricts or inhibits anyone's use or enjoyment of the website or services, or which, as determined by us, may harm Zoo Labs Foundation or users of the website or services or expose them to liability.
-3. Intellectual Property
-The website and its entire contents, features, and functionality (including but not limited to all information, software, text, displays, images, video, and audio, and the design, selection, and arrangement thereof), are owned by Zoo Labs Foundation, its licensors, or other providers of such material and are protected by United States and international copyright, trademark, patent, trade secret, and other intellectual property or proprietary rights laws.
-4. Disclaimer of Warranties
-YOUR USE OF THE WEBSITE, ITS CONTENT, AND ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE IS AT YOUR OWN RISK. THE WEBSITE, ITS CONTENT, AND ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE ARE PROVIDED ON AN "AS IS" AND "AS AVAILABLE" BASIS, WITHOUT ANY WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED. NEITHER ZOO LABS FOUNDATION NOR ANY PERSON ASSOCIATED WITH ZOO LABS FOUNDATION MAKES ANY WARRANTY OR REPRESENTATION WITH RESPECT TO THE COMPLETENESS, SECURITY, RELIABILITY, QUALITY, ACCURACY, OR AVAILABILITY OF THE WEBSITE. WITHOUT LIMITING THE FOREGOING, NEITHER ZOO LABS FOUNDATION NOR ANYONE ASSOCIATED WITH ZOO LABS FOUNDATION REPRESENTS OR WARRANTS THAT THE WEBSITE, ITS CONTENT, OR ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE WILL BE ACCURATE, RELIABLE, ERROR-FREE, OR UNINTERRUPTED, THAT DEFECTS WILL BE CORRECTED, THAT OUR SITE OR THE SERVER THAT MAKES IT AVAILABLE ARE FREE OF VIRUSES OR OTHER HARMFUL COMPONENTS, OR THAT THE WEBSITE OR ANY SERVICES OR ITEMS OBTAINED THROUGH THE WEBSITE WILL OTHERWISE MEET YOUR NEEDS OR EXPECTATIONS.
-5. Limitation of Liability
-IN NO EVENT WILL ZOO LABS FOUNDATION, ITS AFFILIATES, OR THEIR LICENSORS, SERVICE PROVIDERS, EMPLOYEES, AGENTS, OFFICERS, OR DIRECTORS BE LIABLE FOR DAMAGES OF ANY KIND, UNDER ANY LEGAL THEORY, ARISING OUT OF OR IN CONNECTION WITH YOUR USE, OR INABILITY TO USE, THE WEBSITE, ANY WEBSITES LINKED TO IT, ANY CONTENT ON THE WEBSITE OR SUCH OTHER WEBSITES, INCLUDING ANY DIRECT, INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES, INCLUDING BUT NOT LIMITED TO, PERSONAL INJURY, PAIN AND SUFFERING, EMOTIONAL DISTRESS, LOSS OF REVENUE, LOSS OF PROFITS, LOSS OF BUSINESS OR ANTICIPATED SAVINGS, LOSS OF USE, LOSS OF GOODWILL, LOSS OF DATA, AND WHETHER CAUSED BY TORT (INCLUDING NEGLIGENCE), BREACH OF CONTRACT, OR OTHERWISE, EVEN IF FORESEEABLE.
-6. Indemnification
-You agree to defend, indemnify, and hold harmless Zoo Labs Foundation, its affiliates, licensors, and service providers, and its and their respective officers, directors, employees, contractors, agents, licensors, suppliers, successors, and assigns from and against any claims, liabilities, damages, judgments, awards, losses, costs, expenses, or fees (including reasonable attorneys' fees) arising out of or relating to your violation of these terms or your use of the website or services, including, but not limited to, any use of the website's content, services, and products other than as expressly authorized in these terms or your use of any information obtained from the website.
-7. Governing Law and Jurisdiction
-All matters relating to the website and these terms and any dispute or claim arising therefrom or related thereto (in each case, including non-contractual disputes or claims), shall be governed by and construed in accordance with the internal laws of the State of California without giving effect to any choice or conflict of law provision or rule (whether of the State of California or any other jurisdiction). Any legal suit, action, or proceeding arising out of, or related to, these terms or the website shall be instituted exclusively in the federal courts of the United States or the courts of the State of California in each case located in the City and County of San Francisco although we retain the right to bring any suit, action, or proceeding against you for breach of these terms in your country of residence or any other relevant country. You waive any and all objections to the exercise of jurisdiction over you by such courts and to venue in such courts.
-8. Changes to These Terms
-We may revise and update these terms from time to time in our sole discretion. All changes are effective immediately when we post them, and apply to all access to and use of the website thereafter. Your continued use of the website following the posting of revised terms means that you accept and agree to the changes. You are expected to check this page from time to time so you are aware of any changes, as they are binding on you.
-9. Contact Us
-If you have any questions, concerns, or requests regarding these terms or our privacy practices, please contact us at:
-Zoo Labs Foundation
-
-hello@zoo.ngo
-415-373-2496
-
-We will make every effort to respond to your inquiries and address any concerns as quickly as possible.
-
-
Welcome to my web page!
-This is some sample text.
- - -``` - -In this example, the font file is preloaded using the `link` element with the `rel` attribute set to "preload". This tells the browser to fetch the font file as soon as possible, but not to block the rendering of the page. The `as` attribute is set to "font" to indicate that this is a font file, and the `type` attribute is set to "font/woff2" to specify the file type. The `crossorigin` attribute is included to allow the font file to be loaded from a different domain if necessary. - -Overall, this code is a small but important part of a larger project that aims to optimize the performance of a web page by reducing the number of requests made to the server. By specifying a cache control directive for the font file, the browser can store it locally and avoid requesting it from the server on subsequent page loads, resulting in faster page load times and a better user experience. -## Questions: - 1. What is the purpose of this code? - This code defines a JSON object with a single header that specifies the cache control settings for a font file. - -2. Where is this code used in the project? - It is unclear where this code is used in the project without additional context. - -3. Are there any other headers or files that have cache control settings defined? - It is unclear if there are any other headers or files with cache control settings defined without additional context or inspection of other files in the project. \ No newline at end of file diff --git a/.autodoc/docs/markdown/lab/gulpfile.md b/.autodoc/docs/markdown/lab/gulpfile.md deleted file mode 100644 index f5811c845..000000000 --- a/.autodoc/docs/markdown/lab/gulpfile.md +++ /dev/null @@ -1,39 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/lab/gulpfile.js) - -This code is a Gulp task that compiles Less files into CSS, applies PostCSS plugins, and minifies the resulting CSS using the csso plugin. The compiled CSS is then saved to the `public` directory. - -The task starts by requiring the necessary dependencies: `gulp`, `gulp-less`, `gulp-postcss`, `gulp-debug`, `gulp-csso`, `autoprefixer`, and `less-plugin-npm-import`. - -The `gulp.task` function defines a new task called `less`. This task takes all Less files in the `src/themes` directory that end with `-theme.less` and compiles them into CSS. The `debug` function is used to log the names of the Less files being processed. - -The `gulpless` function is used to compile the Less files into CSS. The `javascriptEnabled` option is set to `true` to enable JavaScript evaluation in Less files. The `less-plugin-npm-import` plugin is used to allow importing of Less files from installed npm packages using the `~` prefix. - -The resulting CSS is then piped through the `postcss` function, which applies the `autoprefixer` plugin to add vendor prefixes to CSS rules. - -Finally, the `csso` function is used to minify the CSS. The `debug` option is set to `true` to log the size reduction achieved by the minification. - -The resulting CSS is saved to the `public` directory using the `gulp.dest` function. - -This task can be used as part of a larger build process for a web application that uses Less for styling. It allows developers to write Less code and have it automatically compiled and minified into CSS that is ready for production use. - -Example usage: - -``` -// gulpfile.js - -const gulp = require('gulp'); -const lessTask = require('./zoo/less-task'); - -gulp.task('build', gulp.series(lessTask)); -``` - -This code defines a `build` task that runs the `less` task defined in the `less-task.js` file located in the `zoo` directory. When the `build` task is run, all Less files in the `src/themes` directory are compiled and minified into CSS and saved to the `public` directory. -## Questions: - 1. What is the purpose of this code? - This code is a Gulp task that compiles Less files into CSS, applies PostCSS plugins, and minifies the resulting CSS before outputting it to a `public` directory. - -2. What are the dependencies required for this code to run? - This code requires several dependencies to run, including `gulp`, `gulp-less`, `gulp-postcss`, `gulp-debug`, `gulp-csso`, `autoprefixer`, and `less-plugin-npm-import`. - -3. What is the input and output of this code? - The input of this code is any Less files located in the `src/themes` directory that match the pattern `*-theme.less`. The output of this code is minified CSS files that are output to the `public` directory. \ No newline at end of file diff --git a/.autodoc/docs/markdown/lab/public/index.md b/.autodoc/docs/markdown/lab/public/index.md deleted file mode 100644 index 939ba0f29..000000000 --- a/.autodoc/docs/markdown/lab/public/index.md +++ /dev/null @@ -1,25 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/lab/public/index.html) - -This code is an HTML template file for a web application called "Lab". The file contains metadata and links to various resources that are used by the web application. The purpose of this file is to provide a basic structure for the web application and to ensure that all necessary resources are included. - -The file starts with a DOCTYPE declaration that specifies the version of HTML being used. The next section contains the head element, which includes various meta tags that provide information about the web application, such as the character set, viewport settings, and theme color. The head element also includes links to the favicon and apple-touch-icon, which are small images that are used to represent the web application in the browser and on mobile devices. - -The next section of the file includes a link to the manifest.json file, which provides metadata about the web application that is used when it is installed on a user's device. The manifest.json file includes information such as the name of the web application, its icons, and its start URL. - -The body element of the file contains a div element with an id of "root". This is where the content of the web application will be rendered. The file also includes a noscript element that displays a message if JavaScript is not enabled in the user's browser. - -Finally, the file includes a comment that provides instructions for starting the development server and building the web application for production. - -Overall, this file is an essential part of the web application and provides a basic structure and necessary resources for the application to function properly. Developers can use this file as a starting point for building their web application and customize it as needed. For example, they can add additional meta tags, links to external resources, and modify the content of the body element to create a unique user interface. -## Questions: - 1. What is the purpose of this HTML file? - - This HTML file serves as a template for a web app created using scaffold-eth, with metadata for mobile devices and desktops, and a title of "Lab". - -2. What is the significance of the %PUBLIC_URL% placeholder in the code? - - The %PUBLIC_URL% placeholder is used to reference files inside the `public` folder during the build, and will be replaced with the URL of the `public` folder. This allows for correct referencing of files with client-side routing and a non-root public URL. - -3. What are the recommended commands for development and production of this web app? - - The recommended commands for development are `npm start` or `yarn start`, and for production are `npm run build` or `yarn build`. \ No newline at end of file diff --git a/.autodoc/docs/markdown/lab/public/manifest.md b/.autodoc/docs/markdown/lab/public/manifest.md deleted file mode 100644 index 9f9a19639..000000000 --- a/.autodoc/docs/markdown/lab/public/manifest.md +++ /dev/null @@ -1,40 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/lab/public/manifest.json) - -This code is a JSON object that defines the configuration for a web application. Specifically, it sets the metadata for the application's icons, name, start URL, display mode, and theme and background colors. - -The `short_name` and `name` properties define the name of the application, with the former being a shorter version that may be used in places where space is limited. The `icons` property is an array of objects that define the icons for the application, with each object specifying the source file, size, and type. This allows the application to have different icons for different devices and contexts. - -The `start_url` property specifies the URL that the application should load when it is launched. In this case, it is set to "." which means the application will load the index.html file in the root directory. - -The `display` property specifies the display mode for the application, with "standalone" meaning that the application should be launched in its own window without any browser UI. This is useful for creating web applications that look and feel like native applications. - -The `theme_color` and `background_color` properties define the colors for the application's theme and background, respectively. These colors can be used to customize the appearance of the application and provide a consistent look and feel across different devices and platforms. - -Overall, this code is an important part of the configuration for a web application and helps to ensure that the application looks and behaves consistently across different devices and contexts. Here is an example of how this code might be used in an HTML file: - -```html - - - - - -Welcome to My App
-This is a web application that uses the latest web technologies.
- - -``` - -In this example, the `link` element specifies the location of the `manifest.json` file that contains the configuration for the application. This allows the browser to load the correct icons and other metadata for the application. -## Questions: - 1. What is the purpose of this code? - This code is a JSON file that defines the metadata for a web application, including its name, icons, start URL, and display settings. - -2. What is the significance of the different icon sizes and types? - The different icon sizes and types allow the web application to be displayed properly on different devices and platforms, such as desktops, mobile devices, and browsers. - -3. What is the difference between "display" and "background_color"? - "Display" refers to how the web application should be displayed to the user, such as in a standalone window or as part of a browser tab. "Background_color" refers to the color of the background of the web application. \ No newline at end of file diff --git a/.autodoc/docs/markdown/lab/public/robots.md b/.autodoc/docs/markdown/lab/public/robots.md deleted file mode 100644 index 57d8ea3f3..000000000 --- a/.autodoc/docs/markdown/lab/public/robots.md +++ /dev/null @@ -1,22 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/lab/public/robots.txt) - -This code is a standard robots.txt file that is used to communicate with web crawlers and search engines about which pages or sections of a website should be crawled and indexed. The file starts with a comment that provides a link to the official documentation for the robots.txt protocol. - -The first line of the file specifies the user-agent that the following rules apply to. In this case, the wildcard symbol (*) is used to indicate that the rules apply to all user-agents. - -The following lines contain the rules for the web crawlers and search engines. Each rule consists of a directive and a value. The most common directives are "Disallow" and "Allow". The "Disallow" directive tells the web crawler not to crawl a specific page or section of the website, while the "Allow" directive tells the web crawler that it is allowed to crawl a specific page or section of the website. - -In this specific file, there are no rules specified, which means that all pages and sections of the website are allowed to be crawled by any web crawler or search engine. - -This file is an important part of any website as it helps to ensure that search engines are able to crawl and index the website correctly. Without a robots.txt file, search engines may crawl and index pages that should not be visible to the public, such as admin pages or pages with sensitive information. - -An example of how this file can be used in the larger project is to specify rules for specific user-agents. For example, if there is a web crawler that is causing issues with the website, the robots.txt file can be updated to disallow that specific user-agent from crawling the website. This can help to improve the performance and security of the website. -## Questions: - 1. What is the purpose of this code and how does it relate to the overall functionality of the zoo project? - - This code is the contents of a `robots.txt` file, which is used to instruct web crawlers on which pages of a website they are allowed to access. It is important for the SEO and security of the website, but does not directly relate to the functionality of the zoo project. - -2. Why is the `User-agent: *` line included and what does it mean? - - The `User-agent: *` line specifies that the following rules apply to all web crawlers. This means that any crawler that accesses the website will be subject to the rules outlined in the `robots.txt` file. - -3. Are there any other rules or directives that could be included in this `robots.txt` file? - - Yes, there are several other directives that can be included in a `robots.txt` file, such as `Disallow` to block specific pages or directories, `Allow` to override a `Disallow` directive, and `Sitemap` to specify the location of the website's sitemap. However, it is up to the website owner to determine which directives are necessary for their specific website. \ No newline at end of file diff --git a/.autodoc/docs/markdown/lab/scripts/create_contracts.md b/.autodoc/docs/markdown/lab/scripts/create_contracts.md deleted file mode 100644 index 000f55b48..000000000 --- a/.autodoc/docs/markdown/lab/scripts/create_contracts.md +++ /dev/null @@ -1,59 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/lab/scripts/create_contracts.js) - -This code checks if a file called "hardhat_contracts.json" exists in the "./src/contracts/" directory. If the file does not exist, the code creates an empty JSON object and writes it to the file. - -This code is likely used in a larger project to ensure that a specific file exists and is properly formatted before other parts of the project attempt to read from or write to it. The file "hardhat_contracts.json" may contain important information or configurations for the project, and this code ensures that it is present and ready to be used. - -Here is an example of how this code may be used in a larger project: - -```javascript -const fs = require("fs"); - -function readContracts() { - let contracts = {}; - - if (fs.existsSync("./src/contracts/hardhat_contracts.json")) { - try { - contracts = JSON.parse(fs.readFileSync("./src/contracts/hardhat_contracts.json")); - } catch (error) { - console.log(error); - } - } else { - console.log("src/contracts/hardhat_contracts.json not found."); - } - - return contracts; -} - -function writeContracts(contracts) { - try { - fs.writeFileSync("./src/contracts/hardhat_contracts.json", JSON.stringify(contracts)); - console.log("src/contracts/hardhat_contracts.json updated."); - } catch (error) { - console.log(error); - } -} - -let contracts = readContracts(); - -// Do something with contracts... - -writeContracts(contracts); -``` - -In this example, the `readContracts` function first checks if the "hardhat_contracts.json" file exists and is properly formatted. If it is, the function reads the contents of the file and returns it as a JSON object. If the file does not exist or is not properly formatted, the function returns an empty object. - -The `writeContracts` function takes a JSON object as an argument and writes it to the "hardhat_contracts.json" file. - -The `contracts` variable is initialized by calling `readContracts`, and then some operation is performed on it. Finally, the updated `contracts` object is written back to the "hardhat_contracts.json" file by calling `writeContracts`. - -Overall, this code ensures that the "hardhat_contracts.json" file exists and is properly formatted, allowing other parts of the project to safely read from and write to it. -## Questions: - 1. What is the purpose of this code? - This code checks if a file called "hardhat_contracts.json" exists in the "./src/contracts/" directory, and if it doesn't, it creates an empty JSON file with that name. - -2. What happens if there is an error while writing the file? - If there is an error while writing the file, the error message will be logged to the console. - -3. What is the expected output of this code? - If the file doesn't exist and is successfully created, the message "src/contracts/hardhat_contracts.json created." will be logged to the console. If the file already exists, nothing will happen. If there is an error while writing the file, the error message will be logged to the console. \ No newline at end of file diff --git a/.autodoc/docs/markdown/lab/scripts/ipfs.md b/.autodoc/docs/markdown/lab/scripts/ipfs.md deleted file mode 100644 index 3f1103263..000000000 --- a/.autodoc/docs/markdown/lab/scripts/ipfs.md +++ /dev/null @@ -1,27 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/lab/scripts/ipfs.js) - -This code is a script that deploys a web application to the InterPlanetary File System (IPFS) and publishes it to the IPNS (InterPlanetary Name System). IPFS is a distributed file system that allows users to store and access files in a decentralized manner. IPNS is a naming system built on top of IPFS that allows users to create human-readable names for IPFS content. - -The script uses the ipfs-http-client library to interact with the IPFS network. It also uses the chalk and readline libraries for console output formatting. The script defines the IPFS gateway and IPNS gateway URLs, as well as the options for adding files to IPFS. - -The `pushDirectoryToIPFS` function takes a path to a directory and recursively adds its contents to IPFS using the `ipfs.add` method. The function returns the response from IPFS, which includes the content identifier (CID) of the added content. - -The `publishHashToIPNS` function takes an IPFS hash (CID) and publishes it to IPNS using the `ipfs.name.publish` method. The function returns the response from IPFS, which includes the IPNS name. - -The `nodeMayAllowPublish` function checks if the IPFS node allows publishing IPNS names. It does this by comparing the node's host URL to a blacklist of known nodes that do not allow IPNS publishing. - -The `deploy` function deploys the web application to IPFS and publishes it to IPNS. It first adds the contents of the `./build` directory to IPFS using `pushDirectoryToIPFS`. If the add operation fails, the function returns false. Otherwise, it publishes the IPFS hash to IPNS using `publishHashToIPNS` if the IPFS node allows it. Finally, the function outputs the IPFS and IPNS URLs for accessing the deployed application. - -To use this script, the user needs to have an IPFS node running. They can then run the script to deploy their web application to IPFS and publish it to IPNS. The script can be integrated into a larger project as part of a continuous deployment pipeline to automatically deploy new versions of the application to IPFS and IPNS. -## Questions: - 1. What is the purpose of this code? - - This code is used to deploy an application to IPFS (InterPlanetary File System) and publish it to IPNS (InterPlanetary Name System) for easy access. - -2. What are the dependencies of this code? - - This code depends on the `ipfs-http-client`, `chalk`, and `readline` packages. - -3. What is the difference between IPFS and IPNS? - - IPFS is a distributed file system that allows users to store and access files in a decentralized manner, while IPNS is a naming system that allows users to assign human-readable names to IPFS content. IPNS names can be updated to point to new content, while IPFS content is immutable. \ No newline at end of file diff --git a/.autodoc/docs/markdown/lab/scripts/s3.md b/.autodoc/docs/markdown/lab/scripts/s3.md deleted file mode 100644 index cb1508e20..000000000 --- a/.autodoc/docs/markdown/lab/scripts/s3.md +++ /dev/null @@ -1,33 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/lab/scripts/s3.js) - -This code is responsible for creating an AWS S3 bucket and uploading a directory to it. The code first imports the necessary dependencies, including the `s3-folder-upload` package and the `fs` module. It then sets the name of the directory to be uploaded to the `build` directory and the name of the S3 bucket to be created to `testbucket.xyz`. - -The code then checks if a bucket name has been set and exits the process if it has not. It also reads the AWS credentials from a file called `aws.json` and sets the bucket name in the credentials object. - -The code then creates an S3 service object and uses it to create a new bucket with the specified name. It also sets the bucket's website configuration to use `index.html` as the index document and `index.html` as the error document. - -Once the bucket is created, the code uploads the contents of the `build` directory to the bucket using the `s3FolderUpload` function from the `s3-folder-upload` package. - -This code can be used as part of a larger project to automate the deployment of a static website to an S3 bucket. By running this code, developers can create a new bucket and upload the contents of the `build` directory to it with a single command. - -Example usage: - -``` -// Import the code from the file -const deployToS3 = require('./path/to/s3.js'); - -// Call the function to create the bucket and upload the directory -deployToS3(); -``` -## Questions: - 1. What is the purpose of this code? - - This code is used to create an S3 bucket and upload a directory to it. - -2. What is the significance of the `aws.json` file? - - The `aws.json` file contains the AWS credentials required to access the S3 bucket. It is read by the code to authenticate the user. - -3. What are the options available for the `s3FolderUpload` method? - - The `s3FolderUpload` method takes an optional `options` parameter that can be used to configure the upload process. The available options are `useFoldersForFileTypes` and `useIAMRoleCredentials`. \ No newline at end of file diff --git a/.autodoc/docs/markdown/lab/scripts/watch.md b/.autodoc/docs/markdown/lab/scripts/watch.md deleted file mode 100644 index ae73f87e6..000000000 --- a/.autodoc/docs/markdown/lab/scripts/watch.md +++ /dev/null @@ -1,22 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/lab/scripts/watch.js) - -The code above is a Node.js script that watches for changes in a specific directory and runs a command to compile and generate new files whenever a change is detected. The purpose of this script is to automate the process of compiling and generating files, which can be time-consuming and error-prone if done manually. - -The script uses two Node.js modules: `node-watch` and `child_process`. `node-watch` is used to watch for changes in the `./src/themes` directory, while `child_process` is used to execute the command to compile and generate files. - -The `run` function is responsible for executing the command to compile and generate files. It uses the `exec` method from the `child_process` module to run the command `npx gulp less`. This command is used to compile `.less` files into `.css` files using the Gulp task runner. The function also logs the output of the command to the console. - -The `watch` function is used to watch for changes in the `./src/themes` directory. Whenever a change is detected, the function logs the name of the file that was changed to the console and calls the `run` function to compile and generate new files. - -Finally, the script calls the `run` function once at the beginning to compile and generate files for the first time. - -This script can be used in a larger project to automate the process of compiling and generating files whenever changes are made to the source files. For example, in a web development project, this script can be used to compile `.less` files into `.css` files whenever changes are made to the `.less` files. This can save time and reduce errors by automating a repetitive and error-prone task. -## Questions: - 1. What does this code do? - This code sets up a watch on the `./src/themes` directory and runs a Gulp task to compile LESS files whenever a change is detected in that directory. - -2. What dependencies does this code have? - This code requires the `node-watch` and `child_process` modules to be installed. - -3. What command should be run to start this code? - This code can be started by running the file with Node.js (`node filename.js`) or by incorporating it into a larger Node.js project. \ No newline at end of file diff --git a/.autodoc/docs/markdown/lab/src/App.md b/.autodoc/docs/markdown/lab/src/App.md deleted file mode 100644 index 5104637b8..000000000 --- a/.autodoc/docs/markdown/lab/src/App.md +++ /dev/null @@ -1,37 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/App.css) - -The code provided is a CSS file that defines the styling for the `.App` class. The purpose of this code is to center the text within any HTML element that has the `.App` class applied to it. This code can be used in conjunction with HTML and JavaScript to create a user interface for a web application. - -For example, if we have an HTML file with the following code: - -``` -
-
-```
-
-The CSS code provided will center the text within the `div` element that has the `.App` class applied to it. This will result in the text "Welcome to the Zoo!" and "Explore our collection of animals." being centered horizontally within the `div` element.
-
-This code can be further customized by adding additional CSS rules to the `.App` class or by creating new classes and applying them to different HTML elements. For example, we could add a background color to the `.App` class to give the `div` element a colored background:
-
-```
-.App {
- text-align: center;
- background-color: #f2f2f2;
-}
-```
-
-Overall, this code is a small but important part of a larger project that involves creating a user interface for a web application. By defining the styling for different HTML elements, we can create a visually appealing and user-friendly interface for users to interact with.
-## Questions:
- 1. What is the purpose of this code?
-
- This code sets the text alignment to center for the `.App` class.
-
-2. Where is this code being used in the project?
-
- It is not clear where this code is being used in the project. It could be used in a CSS file or in a JavaScript file that manipulates the CSS.
-
-3. Are there any other CSS properties being applied to `.App`?
-
- It is not clear from this code snippet if there are any other CSS properties being applied to `.App`. Additional code would need to be examined to determine this.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/components/Account.md b/.autodoc/docs/markdown/lab/src/components/Account.md
deleted file mode 100644
index 8b69677cb..000000000
--- a/.autodoc/docs/markdown/lab/src/components/Account.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Account.jsx)
-
-The `Account` component is a React component that displays an Ethereum account's address, balance, and wallet. It also allows users to log in to existing accounts and log out.
-
-The component takes in several props, including `address`, `userSigner`, `localProvider`, `mainnetProvider`, `price`, `minimized`, `web3Modal`, `loadWeb3Modal`, `logoutOfWeb3Modal`, and `blockExplorer`.
-
-The `address` prop is the Ethereum address to display the balance for. The `userSigner` prop is the signer for the user's wallet. The `localProvider` prop is the provider for the local network. The `mainnetProvider` prop is the provider for the main Ethereum network. The `price` prop is the price of ether to convert the balance to dollars. The `minimized` prop is a boolean that determines whether the component should be minimized or not. The `web3Modal`, `loadWeb3Modal`, and `logoutOfWeb3Modal` props are used to log in and log out of existing accounts. The `blockExplorer` prop is the URL for the block explorer to use.
-
-The component uses the `useThemeSwitcher` hook to get the current theme. It then displays the address, balance, and wallet if the component is not minimized. If the component is minimized, it displays nothing.
-
-The component also displays buttons to log in and log out of existing accounts if the `web3Modal` prop is provided. If the `web3Modal` has a cached provider, it displays a "logout" button. If the `web3Modal` does not have a cached provider, it displays a "connect" button.
-
-Overall, the `Account` component is a useful component for displaying Ethereum account information and allowing users to log in and log out of existing accounts. It can be used in a larger project to display account information and provide account management functionality.
-
-Example usage:
-
-```
-Welcome to the Zoo!
-Explore our collection of animals.
-
-
- );
-}
-
-export default UserAvatar;
-```
-
-In this example, the `UserAvatar` component renders a blockie image and a user name for a given Ethereum address. The `Blockie` component is used to generate the blockie image, with the `address` prop passed in from the `UserAvatar` props and additional props for size and scale. The resulting component can be used throughout the project to visually identify users by their Ethereum addresses.
-## Questions:
- 1. What is the purpose of the "react-blockies" library?
- - The "react-blockies" library is used to provide a blockie image for an address.
-
-2. What happens if the "props.address" is not provided or is not a string?
- - If "props.address" is not provided or is not a string, the function will return an empty span element.
-
-3. What is the purpose of the spread operator in the return statement?
- - The spread operator is used to pass all the remaining props to the "Blockies" component.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/components/BytesStringInput.md b/.autodoc/docs/markdown/lab/src/components/BytesStringInput.md
deleted file mode 100644
index f446e8af2..000000000
--- a/.autodoc/docs/markdown/lab/src/components/BytesStringInput.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/BytesStringInput.jsx)
-
-The `BytesStringInput` component is a React component that displays an input field with options to convert between a string and a bytes32 value. It is imported from the `antd` library and uses the `useState` and `useEffect` hooks from React. It also uses the `utils` and `constants` objects from the `ethers` library.
-
-The component takes in several props, including `value`, `placeholder`, `autoFocus`, and `onChange`. The `value` prop specifies the initial string value, while the `placeholder` prop specifies the placeholder text for the input field. The `autoFocus` prop specifies whether the input field should be focused automatically when the component is mounted. The `onChange` prop is a callback function that is called whenever the input value changes.
-
-The component has two modes: "STRING" and "BYTES32". The current mode is stored in the `mode` state variable, which is initialized to "STRING". The current value is stored in the `value` state variable, which is initialized to `constants.HashZero`. The displayed value is stored in the `display` state variable, which is initially undefined.
-
-The component renders an `Input` component from the `antd` library, with the `placeholder`, `autoFocus`, `value`, and `onChange` props set to the corresponding state variables. It also renders an `addonAfter` prop, which is a button that toggles between the "STRING" and "BYTES32" modes. The `addonAfter` prop is set to the result of calling the `option` function with the appropriate title ("STRING 🔀" or "BYTES32 🔀").
-
-The `option` function returns a `div` element that displays the given title and toggles the mode when clicked. If the mode is "STRING", it converts the current value to bytes32 if necessary and sets the `display` state variable to the result. If the mode is "BYTES32", it converts the current value to a string if necessary and sets the `display` state variable to the result.
-
-The `useEffect` hook is used to update the `display` state variable when the `currentValue` changes. If the `currentValue` is falsy, it sets the `display` state variable to an empty string.
-
-The `onChange` callback function is called whenever the input value changes. If the mode is "STRING", it formats the input value as a bytes32 string using the `utils.formatBytes32String` function and sets the `value` and `display` state variables to the result. If the mode is "BYTES32", it sets the `value` and `display` state variables to the input value.
-
-Overall, the `BytesStringInput` component provides a convenient way to convert between string and bytes32 values in a React application. It can be used in various parts of the larger project where such conversions are needed. For example, it could be used in a form where the user needs to enter a bytes32 value, or in a table where bytes32 values need to be displayed as strings.
-## Questions:
- 1. What is the purpose of this code?
-
- This code displays an input field that allows the user to convert between a string and a bytes32 value.
-
-2. What are the features of this code?
-
- The code allows the user to specify an initial string value, provides a placeholder for the input, and allows the input change to be controlled by the onChange function.
-
-3. What is the significance of the constants.HashZero value?
-
- The constants.HashZero value is used as the default value for the bytes32 value if no other value is provided.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/components/Contract/DisplayVariable.md b/.autodoc/docs/markdown/lab/src/components/Contract/DisplayVariable.md
deleted file mode 100644
index 3e7ad638a..000000000
--- a/.autodoc/docs/markdown/lab/src/components/Contract/DisplayVariable.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Contract/DisplayVariable.jsx)
-
-The `DisplayVariable` component is a React component that displays the value of a smart contract function and provides a way to refresh the value. It takes in several props, including `contractFunction`, which is a function that returns the value of a smart contract function, `functionInfo`, which contains information about the smart contract function, `refreshRequired`, which is a boolean that indicates whether the component needs to be refreshed, and `triggerRefresh`, which is a function that triggers a refresh of the component.
-
-The component uses the `useState` hook to store the value of the smart contract function, and the `useCallback` hook to define a function that refreshes the value of the smart contract function. The `useEffect` hook is used to call the refresh function when the component mounts, when the `refreshRequired` prop changes, or when the `contractFunction` prop changes.
-
-The component renders a row with three columns. The first column displays the name of the smart contract function, the second column displays the value of the smart contract function, and the third column displays a refresh button. The `tryToDisplay` function is used to format the value of the smart contract function for display.
-
-This component can be used in a larger project that interacts with a smart contract. It provides a simple way to display the value of a smart contract function and refresh it when necessary. Here is an example of how this component could be used:
-
-```
-import DisplayVariable from "./DisplayVariable";
-
-const MyComponent = ({ myContract }) => {
- const [refreshRequired, setRefreshRequired] = useState(false);
-
- const refresh = () => {
- setRefreshRequired(true);
- };
-
- return (
-
-
- );
-};
-```
-
-In this example, `MyComponent` displays the value of a smart contract function called `getMyValue` and provides a refresh button. The `refresh` function updates the `refreshRequired` state, which triggers a refresh of the `DisplayVariable` component.
-## Questions:
- 1. What is the purpose of the `tryToDisplay` function imported from `./utils`?
- - The `tryToDisplay` function is used to format the display of the `variable` state value in the returned JSX.
-2. What is the purpose of the `refreshRequired` and `triggerRefresh` props passed to the component?
- - The `refreshRequired` prop is used to trigger a refresh of the displayed variable when it changes, and the `triggerRefresh` prop is a function that sets the `refreshRequired` state value to `true`.
-3. What is the purpose of the `Divider` component from `antd` used in the returned JSX?
- - The `Divider` component is used to visually separate the displayed variable from other components on the page.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/components/Contract/FunctionForm.md b/.autodoc/docs/markdown/lab/src/components/Contract/FunctionForm.md
deleted file mode 100644
index 1c9a06434..000000000
--- a/.autodoc/docs/markdown/lab/src/components/Contract/FunctionForm.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Contract/FunctionForm.jsx)
-
-The `FunctionForm` component is a React component that renders a form for interacting with a smart contract function. It takes in several props, including `contractFunction`, which is the function to be called, `functionInfo`, which contains information about the function, `provider`, which is the Ethereum provider to use, `gasPrice`, which is the gas price to use for the transaction, and `triggerRefresh`, which is a function to trigger a refresh of the component.
-
-The component uses the Ant Design library to render the form elements, including `Input`, `Button`, `Col`, `Row`, and `Divider`. It also uses the `react-blockies` library to render a blockie for an Ethereum address.
-
-The form is dynamically generated based on the inputs of the function. For each input, an `Input` element is rendered with a suffix that provides additional functionality based on the type of the input. For example, if the input is of type `bytes32`, a button is rendered that allows the user to convert the input to a bytes32 string. If the input is of type `uint256`, a button is rendered that allows the user to convert the input to wei.
-
-If the function is payable, an additional `Input` element is rendered for the transaction value.
-
-When the user clicks the button to call the function, the component constructs the arguments for the function based on the values in the form inputs, and then calls the function using the `contractFunction` and `tx` functions. If the function is a read-only function, the result is displayed in the form. If the function is a transaction, the transaction is sent and the user is prompted to confirm the transaction in their wallet.
-
-Overall, the `FunctionForm` component provides a convenient way for users to interact with smart contract functions in a user-friendly way. It abstracts away many of the details of interacting with the Ethereum network and provides a simple interface for users to input values and call functions.
-## Questions:
- 1. What is the purpose of the `Transactor` function and how is it used in this code?
-- The `Transactor` function is used to create a transaction object that can be used to send transactions to the Ethereum network. It takes in the `provider` and `gasPrice` as arguments and returns a function that can be used to send transactions.
-2. What is the purpose of the `tryToDisplay` function and where is it used in this code?
-- The `tryToDisplay` function is used to convert the return value of a contract function into a human-readable format. It is used in the `onClick` event of the button to display the return value of the contract function.
-3. What is the purpose of the `inputs` array and how is it populated?
-- The `inputs` array is used to store the input fields for the contract function. It is populated by mapping over the `functionInfo.inputs` array and creating an input field for each input. The input fields are then pushed into the `inputs` array.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/components/Contract/index.md b/.autodoc/docs/markdown/lab/src/components/Contract/index.md
deleted file mode 100644
index 1c54cd11e..000000000
--- a/.autodoc/docs/markdown/lab/src/components/Contract/index.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Contract/index.jsx)
-
-The `Contract` component is a React component that displays information about a smart contract. It takes in several props, including `customContract`, `account`, `gasPrice`, `signer`, `provider`, `name`, `show`, `price`, `blockExplorer`, and `chainId`.
-
-The component first uses the `useContractLoader` hook to load all contracts available on the specified `provider` and `chainId`. If a `customContract` is provided, it uses that instead. It then checks if the contract is deployed at the specified address using the `useContractExistsAtAddress` hook.
-
-The component then filters the contract's functions to only display those that are of type "function" and are not excluded by the `show` prop. If a function is queryable (i.e. has no inputs), it displays the return value using the `DisplayVariable` component. If a function has inputs, it displays a form using the `FunctionForm` component to allow users to provide these inputs.
-
-Finally, the component renders a `Card` from the `antd` library that displays the contract's name, address, and account information. If the contract is deployed, it displays the contract functions. Otherwise, it displays a loading message that instructs the user to run `yarn run chain` and `yarn run deploy` to deploy the contract.
-
-This component can be used to display information about any smart contract in a React application. For example, it could be used in a decentralized application to display information about a user's deployed smart contracts or to allow users to interact with a specific smart contract.
-
-Example usage:
-
-```
-
- {
- setAmount(value);
- }}
- />
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `useState` hooks in this code?
-- The `useState` hooks are used to manage the state of `mode`, `display`, and `value` variables in the component.
-
-2. How does the code handle conversion between USD and ETH?
-- The code provides an option to convert between USD and ETH by clicking on the displayed currency symbol. When the currency is changed, the `display` state is updated with the converted value if it exists.
-
-3. What is the purpose of the `useEffect` hook in this code?
-- The `useEffect` hook is used to update the `display` state when the `currentValue` changes. If `currentValue` is undefined, the `display` state is set to an empty string.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/components/Faucet.md b/.autodoc/docs/markdown/lab/src/components/Faucet.md
deleted file mode 100644
index d88e66bc1..000000000
--- a/.autodoc/docs/markdown/lab/src/components/Faucet.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Faucet.jsx)
-
-The `Faucet` component is a React component that displays a local faucet to send ETH to a given address. It also provides a wallet to convert between USD and ETH. The component imports several dependencies, including `@ant-design/icons`, `antd`, `eth-hooks`, `react`, `react-blockies`, and `../helpers`.
-
-The component takes in several props, including `price`, `localProvider`, `ensProvider`, and `placeholder`. The `price` prop is used to provide the price of ether and convert between USD and ETH in a wallet. The `localProvider` prop is used to send ETH to a given address. The `ensProvider` prop is used to replace the address with an ENS name (e.g. "0xa870" => "user.eth") or to enter an ENS name directly instead of an address. The `placeholder` prop is used to provide a placeholder value for the input.
-
-The component uses the `useState` hook to manage the `address` and `faucetAddress` state variables. It uses the `useEffect` hook to get the faucet address from the local provider. It then uses the `useCallback` hook to update the address when a new value is entered.
-
-The component also uses the `Transactor` helper function from `../helpers` to send ETH to the given address. It renders an `Input` component with a `prefix` of a `Blockies` component that displays a blocky representation of the address. It also renders a `Tooltip` component with a `Button` component that sends ETH to the given address and a `Wallet` component that displays the wallet.
-
-Overall, the `Faucet` component provides a simple way to send ETH to a given address and manage a wallet. It is designed to be used as a reusable component in a larger project.
-
-Example usage:
-
-```
-Current amount: {amount} ETH
-Current value: ${amount * price}
-
-
- );
-}
-
-export default HomePage;
-```
-
-In this example, the `Header` component is imported and used at the top of the `HomePage` component to display the consistent header for the page. The `HomePage` component also includes a heading and paragraph to provide content specific to the page.
-
-Overall, the `Header` component provides a reusable and consistent header for pages within the `zoo` project, enhancing the user experience and branding of the project.
-## Questions:
- 1. What is the purpose of the `PageHeader` component from the `antd` library?
-- The `PageHeader` component is used to display a header on a page.
-
-2. Why is the `Header` function exported as the default export?
-- The `Header` function is exported as the default export to allow other files to import and use it as needed.
-
-3. Why is there an anchor tag wrapping the `PageHeader` component?
-- The anchor tag is used to create a link to the `https://github.com/zoo-labs/savage` URL, which will open in a new tab when clicked.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/components/Provider.md b/.autodoc/docs/markdown/lab/src/components/Provider.md
deleted file mode 100644
index d79366275..000000000
--- a/.autodoc/docs/markdown/lab/src/components/Provider.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Provider.jsx)
-
-The `Provider` component in this file is responsible for rendering a button that displays information about an Ethereum provider. The component takes in a `provider` prop, which is an object that represents an Ethereum provider. The component uses the `eth-hooks` library to get the current block number and to poll the provider for network and signer information.
-
-When the component is first rendered, it sets the initial state for `showMore`, `status`, `network`, `signer`, and `address`. It then uses the `usePoller` hook to poll the provider every 1377 milliseconds for network and signer information. If the provider has a `getNetwork` function, the component calls it to get the current network information. If the network has a `chainId` greater than 0, the component sets the `status` state to "success". Otherwise, it sets the `status` state to "warning". If the provider has a `getSigner` function, the component calls it to get the current signer information. It then sets the `signer` state to the new signer and the `address` state to the new signer's address.
-
-If the `provider` prop is undefined or does not have a `getNetwork` function, or if the `network` state or `network.chainId` is undefined, the component returns a button that displays the `props.name` and a `Badge` component with the `status` state. If the `showMore` state is true, the component also displays the `network.chainId` and `network.name`.
-
-If the `signer` state is defined and the `address` state is truthy, the component also displays the `address` using the `Address` component.
-
-Overall, this component is useful for displaying information about an Ethereum provider and can be used in a larger project to help users understand the current state of the provider. For example, it could be used in a dApp to display information about the user's connected wallet and network. Here is an example usage of the `Provider` component:
-
-```jsx
-import { ethers } from "ethers";
-import Provider from "./Provider";
-
-function App() {
- const [provider, setProvider] = useState();
-
- useEffect(() => {
- const newProvider = new ethers.providers.Web3Provider(window.ethereum);
- setProvider(newProvider);
- }, []);
-
- return (
- Welcome to the Zoo!
-Explore our collection of animals and exhibits.
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `Provider` component?
-- The `Provider` component is used to display information about a blockchain provider, including its network and signer address.
-
-2. What external libraries or packages are being used in this code?
-- The code is importing `Badge`, `Button`, `useBlockNumber`, and `usePoller` from the `antd` and `eth-hooks` libraries.
-
-3. What is the significance of the `1377` argument passed to the `usePoller` hook?
-- The `1377` argument is the interval in milliseconds at which the `usePoller` hook will execute the provided callback function. In this case, it will execute the callback function every 1377 milliseconds (or approximately every 1.4 seconds).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/components/Ramp.md b/.autodoc/docs/markdown/lab/src/components/Ramp.md
deleted file mode 100644
index 6f8c7af0e..000000000
--- a/.autodoc/docs/markdown/lab/src/components/Ramp.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Ramp.jsx)
-
-The `Ramp` component is a React component that displays the current price of Ethereum (ETH) and provides options to buy ETH through various services or get testnet ETH. The component uses the `RampInstantSDK` to open Ramp directly in the application.
-
-To use the `Ramp` component, you can import it and include it in your React application like this:
-
-```
-My dApp
- {provider && ( -
-
- );
-}
-```
-## Questions:
- 1. What library is being used for the switch component?
- - The `Switch` component is being imported from the `antd` library.
-
-2. What is the purpose of the `useEffect` hook?
- - The `useEffect` hook is used to update the `localStorage` value for the current theme whenever it changes.
-
-3. Why is there a commented out section of code?
- - The commented out code is used to avoid a flicker when the theme is changed, but it is not currently being used in the code.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/components/Timeline.md b/.autodoc/docs/markdown/lab/src/components/Timeline.md
deleted file mode 100644
index 03c59006b..000000000
--- a/.autodoc/docs/markdown/lab/src/components/Timeline.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/Timeline.jsx)
-
-The code in this file is a React component that displays a timeline for the usage of the scaffold-eth tool. The timeline consists of several items, each represented by a dot and a description. The purpose of this component is to provide a visual guide for users of the scaffold-eth tool, showing them the steps they need to take to get started with the tool and build something on Ethereum.
-
-The component uses the Ant Design library to create a Timeline component, which is styled to display the items on the right side of the timeline. Each item is represented by a Timeline.Item component, which contains a dot and a Text component that displays the description of the item. The dot is represented by an icon from the Ant Design library, and the Text component contains the description of the item, which may include links to external resources.
-
-The component takes several props, which are used to conditionally render some of the items in the timeline. For example, the props `chainIsUp`, `hasOwner`, `isNotSmoort`, `hasEther`, `contractHasEther`, and `amOwnerOfContract` are used to conditionally delete some of the items in the timeline, depending on whether certain conditions are met. This allows the component to provide a customized timeline for each user, based on their specific needs and progress.
-
-Overall, this component is a useful tool for users of the scaffold-eth tool, providing them with a clear and concise guide to the steps they need to take to get started with the tool and build something on Ethereum. Here is an example of how this component might be used in a larger project:
-
-```
-import React from "react";
-import TimelineDisplay from "./TimelineDisplay";
-
-function App() {
- return (
- Welcome to the Zoo!
-
-
- );
-}
-
-export default App;
-```
-
-In this example, the TimelineDisplay component is rendered inside an App component, which is the main component of the larger project. The TimelineDisplay component is passed several props, which are used to customize the timeline based on the user's progress. The component is displayed on the page, providing the user with a clear and concise guide to the steps they need to take to get started with the scaffold-eth tool and build something on Ethereum.
-## Questions:
- 1. What is the purpose of this code?
-- This code displays a timeline for scaffold-eth usage.
-
-2. What external libraries or dependencies does this code use?
-- This code uses the following external libraries: "@ant-design/icons", "antd", "react", and "react-blockies".
-
-3. What is the significance of the different colored dots in the timeline?
-- The different colored dots in the timeline represent the status of certain tasks, with green indicating completion and blue indicating that the task still needs to be done.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/components/TokenBalance.md b/.autodoc/docs/markdown/lab/src/components/TokenBalance.md
deleted file mode 100644
index faf67a2da..000000000
--- a/.autodoc/docs/markdown/lab/src/components/TokenBalance.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/components/TokenBalance.jsx)
-
-The `TokenBalance` function in the `zoo` project is a React component that displays the balance of a specified token. The component takes in several props, including the name and address of the token contract, as well as an optional balance and dollar multiplier.
-
-The function first uses the `useTokenBalance` hook from the `eth-hooks` library to retrieve the current balance of the token. It then converts the balance to a float and formats it to two decimal places. If a balance prop is provided, it uses that instead of the retrieved balance.
-
-If a dollar multiplier prop is provided and the component is in dollar mode (which is the default), it multiplies the balance by the dollar multiplier and formats it to two decimal places with a dollar sign. Otherwise, it simply displays the balance with four decimal places.
-
-The component returns a span element that displays the token balance along with an optional image prop. The span element is also clickable, toggling between dollar mode and regular mode when clicked.
-
-This component can be used in the larger project to display the balance of a specific token in a user's wallet or in a trading interface. It provides a simple and customizable way to display token balances with the option to toggle between different display modes.
-
-Example usage:
-
-```
-Welcome to My Ethereum App
-
-
- );
-}
-```
-
-In the example above, the `useBalance` hook is used to retrieve the balance of an Ethereum address and display it in a React component. The `provider` and `address` props are passed to the hook to retrieve the balance. The balance is then displayed in the component using the `balance` variable returned by the hook.
-## Questions:
- 1. What does this code do?
-
- This code is a custom React hook called `useBalance` that takes in a provider and an address and returns the balance in ETH corresponding to the given address. It also has the ability to change the provider to access balances on different chains and can update the balance on every new block if no pollTime is passed.
-
-2. What is the purpose of the `useCallback` hook in this code?
-
- The `useCallback` hook is used to memoize the `pollBalance` function so that it only gets recreated when the `provider` or `address` values change. This helps to optimize performance by preventing unnecessary re-renders.
-
-3. What is the purpose of the `usePoller` hook in this code?
-
- The `usePoller` hook is used to poll the balance at a specified interval (`pollTime`) and update the balance state accordingly. It only runs if a `pollTime` value greater than 0 is passed in and if both the `provider` and `address` values are truthy.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/BurnerSigner.md b/.autodoc/docs/markdown/lab/src/hooks/BurnerSigner.md
deleted file mode 100644
index 591e38746..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/BurnerSigner.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/BurnerSigner.js)
-
-The code is a custom React hook called `useBurnerSigner` that generates and manages a private key for a wallet. It uses the `useState` and `useEffect` hooks from the React library to manage state and side effects respectively. The `ethers` library is used to create and manage the wallet.
-
-The hook takes a `provider` parameter, which is an Ethereum provider that is used to connect to the blockchain. The hook returns a `signer` object that is used to sign transactions on the blockchain.
-
-The hook first checks if there is a stored private key in the browser's local storage. If there is no stored key, a new key is generated using the `ethers` library and stored in the local storage. If there is a stored key, it is retrieved from the local storage.
-
-The hook then creates a new wallet using the stored private key and connects it to the provided `provider`. The resulting `signer` object is set as the state of the hook and returned.
-
-This hook can be used in a larger project that requires a private key to sign transactions on the Ethereum blockchain. It abstracts away the complexity of managing a private key and provides a simple interface to access the `signer` object. Here is an example of how the hook can be used in a React component:
-
-```
-import useBurnerSigner from './useBurnerSigner';
-
-function MyComponent({ provider }) {
- const signer = useBurnerSigner(provider);
-
- async function handleTransaction() {
- const tx = await signer.sendTransaction({
- to: '0x123...',
- value: ethers.utils.parseEther('1.0')
- });
- console.log(tx.hash);
- }
-
- return (
-
- );
-}
-```
-
-In this example, the `useBurnerSigner` hook is used to get a `signer` object that is used to send a transaction to an Ethereum address. The `handleTransaction` function uses the `signer` object to send a transaction and logs the transaction hash to the console.
-## Questions:
- 1. What is the purpose of this code and how is it used in the zoo project?
-- This code exports a custom hook called `useBurnerSigner` that returns a signer object. It is likely used to authenticate transactions on the Ethereum blockchain in the zoo project.
-
-2. What external libraries or dependencies does this code rely on?
-- This code relies on the `react` and `ethers` libraries.
-
-3. What is the significance of the `metaPrivateKey` key and how is it used?
-- The `metaPrivateKey` key is used to store a private key in local storage. If the key is not found, a new key is generated and stored. The private key is used to create a new wallet object, which is then connected to the provider to create a signer object.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/ContractExistsAtAddress.md b/.autodoc/docs/markdown/lab/src/hooks/ContractExistsAtAddress.md
deleted file mode 100644
index 9a5f405b5..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/ContractExistsAtAddress.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/ContractExistsAtAddress.js)
-
-## Code Explanation: `useContractExistsAtAddress`
-
-The `useContractExistsAtAddress` function is a custom React hook that checks whether a smart contract exists on the blockchain. It takes two parameters: `provider` and `contractAddress`. `provider` is an object that represents the Ethereum provider (e.g. `localProvider`, `mainnetProvider`, etc.) and `contractAddress` is the address of the smart contract that we want to check.
-
-The function uses the `useState` hook to create a state variable called `contractIsDeployed` and initializes it to `false`. This variable will be used to store the result of the contract existence check.
-
-The function also uses the `useEffect` hook to perform the contract existence check. The `useEffect` hook is called whenever the `provider` or `contractAddress` parameters change. Inside the hook, the function first checks if the `contractAddress` is a valid Ethereum address using the `isAddress` function from the `ethers` library. If the address is invalid, the function returns `false`.
-
-If the address is valid, the function uses the `getCode` method of the `provider` object to retrieve the bytecode stored at the `contractAddress`. If the bytecode is not equal to `0x0`, then a contract exists at that address and the `contractIsDeployed` state variable is set to `true`.
-
-Finally, the function returns the `contractIsDeployed` state variable.
-
-## How to Use
-
-To use the `useContractExistsAtAddress` hook, you can import it from the `zoo` module and call it in your React component. Here's an example:
-
-```javascript
-import useContractExistsAtAddress from 'zoo';
-
-function MyComponent({ provider, contractAddress }) {
- const contractIsDeployed = useContractExistsAtAddress(provider, contractAddress);
-
- // Use the contractIsDeployed variable to conditionally render content
- return (
- Address: {address}
-Balance: {balance}
-
- {contractIsDeployed ?
- );
-}
-```
-
-In this example, we pass in the `provider` and `contractAddress` variables as props to the `MyComponent` function. We then call the `useContractExistsAtAddress` hook with these variables to get the `contractIsDeployed` result. We can then use this result to conditionally render content based on whether the contract exists or not.
-## Questions:
- 1. What is the purpose of the `ethers` and `react` imports?
-- The `ethers` import is used to access the `getCode` function to check if a contract exists at a given address, while the `react` import is used to define a custom React hook.
-
-2. How does the `useContractExistsAtAddress` function determine if a contract is deployed?
-- The function checks the bytecode stored at the provided contract address using the `getCode` function from the `provider` object. If the bytecode is not equal to "0x0", then a contract is deployed at that address.
-
-3. Can this function be used to check for contract existence on different blockchain networks?
-- Yes, the function can be used to check for contract existence on different blockchain networks by changing the `provider` object passed as an argument to the function. For example, passing a `mainnetProvider` object would check for contract existence on the Ethereum mainnet.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/ContractLoader.md b/.autodoc/docs/markdown/lab/src/hooks/ContractLoader.md
deleted file mode 100644
index 3ce482ead..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/ContractLoader.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/ContractLoader.js)
-
-The `useContractLoader` function is responsible for loading local contracts and providing options to read values from contracts or write transactions into them. This function is designed to be used in a React application and utilizes the `useEffect` and `useState` hooks from the React library.
-
-The function takes two parameters: `providerOrSigner` and `config`. `providerOrSigner` is an object that represents the Ethereum provider or signer that will be used to interact with the contracts. `config` is an optional object that can be used to configure the function's behavior.
-
-The function first checks to see if `providerOrSigner` has a signer or not. If it does, it uses the signer's provider. If not, it uses the providerOrSigner object as both the provider and signer. It then gets the network ID from the provider and uses it to determine which contracts to load.
-
-The function looks for two files: `contracts.json` and `external_contracts.js`. `contracts.json` contains a list of contracts that were deployed using Hardhat, while `external_contracts.js` contains a list of contracts that were deployed externally. The function combines the contracts from both files and creates a new object that maps contract names to contract instances.
-
-If `config.customAddresses` is defined, the function uses the custom addresses specified in the configuration object instead of the addresses specified in the contract files.
-
-The function returns the contracts object, which can be used to interact with the loaded contracts.
-
-Here is an example of how to use this function:
-
-```
-import { useContractLoader } from 'zoo';
-
-function MyComponent() {
- const contracts = useContractLoader(providerOrSigner);
-
- // read a value from a contract
- const purpose = useContractReader(contracts, 'MyContract', 'purpose');
-
- // write a transaction to a contract
- const tx = useTransactor(contracts);
- tx(contracts.MyContract.setPurpose(newPurpose));
-
- // ...
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-
- This code loads local contracts and provides options to read values from contracts or write transactions into them.
-
-2. How can I use this code?
-
- You can use this code by importing the `useContractLoader` function and passing in a provider or signer as the first argument. You can also pass in a configuration object as the second argument to customize the behavior of the function.
-
-3. What are some of the features of this code?
-
- This code provides options to read values from contracts using a local provider and write transactions into contracts using a user provider. It also includes examples of how to use the `ContractReader.js` and `Transactor.js` hooks to interact with contracts. Additionally, the configuration object can be used to hardcode the chainId, hardhat network name, custom contract addresses, and external contracts.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/ContractReader.md b/.autodoc/docs/markdown/lab/src/hooks/ContractReader.md
deleted file mode 100644
index acdd6f61e..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/ContractReader.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/ContractReader.js)
-
-## Code Explanation
-
-The `useContractReader` function is a custom React hook that enables the user to read values from smart contracts and keep track of them in the local React states. The function takes in several parameters, including the `contracts` object, which contains the loaded contracts, the `contractName`, which specifies the name of the contract, the `functionName`, which specifies the name of the variable in the contract, and the `args` array, which contains the arguments required by the function.
-
-The function also takes in a `pollTime` parameter, which specifies the time interval for updating the value. If no `pollTime` is specified, the function will update on every new block. The `formatter` parameter is an optional function that can be used to format the value returned by the contract function. The `onChange` parameter is a callback function that is called whenever the value changes.
-
-The function uses the `useState` hook to create a state variable `value` that holds the current value of the contract variable. It also creates a state variable `tried` that is used to keep track of whether the function has been called at least once.
-
-The function uses the `useEffect` hook to call the `onChange` function whenever the `value` changes. It also uses the `useOnBlock` and `usePoller` hooks to update the `value` at regular intervals. The `useOnBlock` hook is used to update the `value` whenever a new block is mined, while the `usePoller` hook is used to update the `value` at regular intervals specified by the `pollTime` parameter.
-
-If the `tried` variable is false and the `contracts` object is not null, the function calls the `updateValue` function to update the `value` variable.
-
-## Example Usage
-
-```javascript
-import useContractReader from "./useContractReader";
-
-const MyComponent = ({ readContracts }) => {
- const purpose = useContractReader(readContracts, "MyContract", "purpose");
- return Contract is deployed!
:Contract is not deployed.
} -{purpose}
;
-};
-```
-
-In the above example, the `useContractReader` hook is used to read the value of the `purpose` variable from the `MyContract` contract. The `readContracts` object is passed as a parameter to the hook, which contains the loaded contracts. The `purpose` variable is then displayed in the component.
-## Questions:
- 1. What is the purpose of this code?
-
- This code enables reading values from contracts and keeping track of them in local React states.
-
-2. How can a developer use this code?
-
- A developer can use this code by calling the `useContractReader` function and passing in the necessary parameters such as `readContracts`, `contractName`, `functionName`, `args`, `pollTime`, `formatter`, and `onChange`.
-
-3. What are the features of this code?
-
- The features of this code include providing `readContracts` by loading contracts, specifying the name of the contract and the variable in the contract to keep track of, passing an `args` array if the function requires, passing `pollTime` to specify the time interval for updates, and using a `formatter` to format the value returned by the contract function. Additionally, the `onChange` function can be used to trigger an action when the value changes.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/Debounce.md b/.autodoc/docs/markdown/lab/src/hooks/Debounce.md
deleted file mode 100644
index f894f16ef..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/Debounce.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/Debounce.js)
-
-The `useDebounce` function is a custom React hook that allows for the debouncing of a value. Debouncing is a technique used to limit the number of times a function is called by delaying its execution until a certain amount of time has passed since the last time it was called. This is useful in scenarios where a function is called frequently, such as in response to user input, but the function's execution is resource-intensive and should be limited to prevent performance issues.
-
-The `useDebounce` function takes two parameters: `value` and `delay`. `value` is the value that needs to be debounced, and `delay` is the amount of time in milliseconds that needs to pass before the debounced value is updated. The function returns the debounced value.
-
-The function uses the `useState` and `useEffect` hooks from React. `useState` is used to create a state variable called `debouncedValue`, which is initialized with the `value` parameter. `useEffect` is used to set up a timer that updates the `debouncedValue` state variable after the specified `delay` has passed since the last update to the `value` parameter. The `useEffect` hook also returns a cleanup function that clears the timer when the component unmounts or when the `value` parameter changes.
-
-This custom hook can be used in a variety of scenarios where debouncing is needed, such as in search bars or auto-complete fields. Here is an example of how to use the `useDebounce` hook in a search bar component:
-
-```
-import React, { useState } from "react";
-import useDebounce from "./useDebounce";
-
-function SearchBar() {
- const [searchTerm, setSearchTerm] = useState("");
- const debouncedSearchTerm = useDebounce(searchTerm, 500);
-
- function handleSearch(event) {
- setSearchTerm(event.target.value);
- }
-
- // Perform search using debounced search term
- // ...
-
- return (
-
- );
-}
-```
-
-In this example, the `searchTerm` state variable is updated on every change to the search bar input. However, the actual search is performed using the `debouncedSearchTerm` variable, which is updated only after 500 milliseconds have passed since the last update to `searchTerm`. This prevents the search function from being called too frequently and improves performance.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom React hook called `useDebounce` that returns a debounced value of the input `value` after a specified `delay`.
-
-2. What are the parameters of the `useDebounce` function?
- The `useDebounce` function takes two parameters: `value` (the input value to be debounced) and `delay` (the time in milliseconds to wait before returning the debounced value).
-
-3. How does the `useDebounce` hook work?
- The `useDebounce` hook uses the `useState` and `useEffect` hooks from React to maintain the current `debouncedValue` state and update it after the specified `delay`. It returns the `debouncedValue` after each update.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/EventListener.md b/.autodoc/docs/markdown/lab/src/hooks/EventListener.md
deleted file mode 100644
index 4f2b882b3..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/EventListener.md
+++ /dev/null
@@ -1,57 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/EventListener.js)
-
-## Code Explanation: useEventListener
-
-The `useEventListener` function is a custom React hook that enables the user to keep track of events. It is designed to be used in conjunction with the `readContracts` function and the `ContractLoader.js` file.
-
-### Features
-
-The `useEventListener` function has several features that make it useful for tracking events:
-
-- Provide `readContracts` by loading contracts (see more on `ContractLoader.js`)
-- Specify the name of the contract, in this case it is "YourContract"
-- Specify the name of the event in the contract, in this case we keep track of "SetPurpose" event
-- Specify the provider
-
-### Usage
-
-To use the `useEventListener` function, you need to pass in the following parameters:
-
-- `contracts`: an object containing the contracts you want to track events for
-- `contractName`: the name of the contract you want to track events for
-- `eventName`: the name of the event you want to track
-- `provider`: the provider you want to use to track events
-- `startBlock`: the block number from which you want to start tracking events
-- `args`: optional arguments to pass to the event listener
-
-Here is an example of how to use the `useEventListener` function:
-
-```javascript
-const setPurposeEvents = useEventListener(readContracts, "YourContract", "SetPurpose", localProvider, 1);
-```
-
-This will track the "SetPurpose" event for the "YourContract" contract using the `localProvider` provider, starting from block number 1.
-
-### Implementation
-
-The `useEventListener` function uses the `useState` and `useEffect` hooks to keep track of updates to the event listener.
-
-When the component mounts, the function checks if the `provider` and `startBlock` parameters are defined. If they are, it resets the events block to the specified start block.
-
-Next, the function checks if the `contracts` object and the `contractName` parameter are defined. If they are, it adds an event listener to the specified contract and event name. When the event is triggered, the function extracts the block number and event arguments and adds them to the `updates` state using the `setUpdates` function.
-
-Finally, the function returns the `updates` state, which contains an array of all the updates to the event listener.
-
-Overall, the `useEventListener` function is a useful tool for tracking events in a React application. It is flexible and can be used with a variety of providers and contracts.
-## Questions:
- 1. What is the purpose of this code?
-
- This code enables the user to keep track of events and provides a hook called `useEventListener` to do so.
-
-2. How do I use this code in my project?
-
- To use this code, you can import the `useEventListener` hook and pass in the required parameters such as `readContracts`, `contractName`, `eventName`, `provider`, and `startBlock`.
-
-3. What are the features of this code?
-
- This code provides the ability to load contracts, specify the name of the contract and event, and specify the provider. It also allows the user to reset the events block and remove listeners.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/ExchangePrice.md b/.autodoc/docs/markdown/lab/src/hooks/ExchangePrice.md
deleted file mode 100644
index 4d2db0db9..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/ExchangePrice.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/ExchangePrice.js)
-
-The code is a custom React hook that fetches the current price of a token on the Uniswap decentralized exchange. It uses the Uniswap SDK to interact with the exchange and the `eth-hooks` library to poll for the price at a specified interval.
-
-The hook takes three arguments: `targetNetwork`, `mainnetProvider`, and `pollTime`. `targetNetwork` is an object that contains the current price of the token, or `null` if the price is not available. `mainnetProvider` is a web3 provider that is used to interact with the Ethereum network. `pollTime` is an optional argument that specifies the interval at which the price should be polled. If it is not provided, the default value of 9777 milliseconds is used.
-
-The hook returns the current price of the token as a floating-point number. If the price is not available, it returns 0.
-
-The `pollPrice` function is called by the `usePoller` hook at the specified interval. It first checks if `mainnetProvider` is defined, and if not, it returns 0. If `targetNetwork.price` is defined, it sets the price to that value. Otherwise, it creates a new `Token` object for the token with the specified address and decimal places. It then fetches the pair data for the token and WETH using the `Fetcher` object from the Uniswap SDK. It creates a new `Route` object using the pair data and the WETH token, and sets the price to the mid price of the route.
-
-This hook can be used in a larger project to display the current price of a token on the Uniswap exchange. It can be used in conjunction with other hooks and components to build a custom dashboard or trading interface. For example, it could be used to display the current price of a token in a chart or table, or to trigger a trade when the price reaches a certain threshold.
-
-Example usage:
-
-```
-import useExchangePrice from './useExchangePrice';
-
-function MyComponent() {
- const price = useExchangePrice({ price: 1.23 }, mainnetProvider, 5000);
-
- return (
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code is a custom hook called `useExchangePrice` that fetches the current price of a token on Uniswap and returns it.
-
-2. What dependencies are required for this code to work?
-- This code requires the "@uniswap/sdk" and "eth-hooks" packages to be imported, as well as the "react" package for the useState hook.
-
-3. What parameters does the `useExchangePrice` function take?
-- The `useExchangePrice` function takes three parameters: `targetNetwork` (an object containing the current network and price of the token), `mainnetProvider` (a provider for the Ethereum mainnet), and `pollTime` (an optional parameter for the polling interval in milliseconds).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/GasPrice.md b/.autodoc/docs/markdown/lab/src/hooks/GasPrice.md
deleted file mode 100644
index d18f7f976..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/GasPrice.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/GasPrice.js)
-
-The code is a custom React hook called `useGasPrice` that fetches the current gas price for a specified Ethereum network and speed. Gas price is the amount of Ether required to execute a transaction on the Ethereum network. The hook uses the `axios` library to make an HTTP GET request to the Eth Gas Station API to retrieve the current gas prices.
-
-The `useGasPrice` hook takes two arguments: `targetNetwork` and `speed`. `targetNetwork` is an object that contains information about the Ethereum network, including the current gas price. If `targetNetwork` has a `gasPrice` property, the hook sets the gas price to that value. If not, the hook makes an HTTP GET request to the Eth Gas Station API to retrieve the current gas prices.
-
-The `speed` argument is an optional parameter that specifies the speed at which the transaction should be executed. If `speed` is not provided, the hook defaults to "fast". The hook then multiplies the gas price by 100000000 to convert it to wei, the smallest unit of Ether.
-
-The `loadGasPrice` function is an asynchronous function that is called by the `usePoller` hook every 39999 milliseconds (approximately 40 seconds). `loadGasPrice` checks if the `targetNetwork` object has a `gasPrice` property. If it does, the hook sets the gas price to that value. If not, the hook makes an HTTP GET request to the Eth Gas Station API to retrieve the current gas prices. If the device is online, the hook retrieves the gas prices and sets the new gas price if it is different from the current gas price. If there is an error, the hook logs the error to the console.
-
-The `usePoller` hook is a custom hook that takes two arguments: a function to be called and a delay in milliseconds. The `usePoller` hook calls the specified function every `delay` milliseconds. In this case, the `loadGasPrice` function is called every 39999 milliseconds to retrieve the current gas prices.
-
-The `useGasPrice` hook returns the current gas price, which can be used in other parts of the project to estimate the cost of executing a transaction on the Ethereum network.
-
-Example usage:
-
-```
-import useGasPrice from "./useGasPrice";
-
-function MyComponent() {
- const gasPrice = useGasPrice({ gasPrice: 20000000000 }, "fast");
- // gasPrice is the current gas price in wei
- // use gasPrice to estimate the cost of executing a transaction on the Ethereum network
- return (
- Current price: {price}
-
-
- );
-}
-```
-## Questions:
- 1. What does this code do?
-- This code exports a custom React hook called `useGasPrice` that fetches the current gas price for a specified Ethereum network and speed using the EthGasStation API.
-
-2. What parameters does the `useGasPrice` hook take?
-- The `useGasPrice` hook takes two parameters: `targetNetwork` (an object representing the target Ethereum network) and `speed` (a string representing the desired speed of the gas price).
-
-3. What is the purpose of the `usePoller` hook in this code?
-- The `usePoller` hook is used to repeatedly call the `loadGasPrice` function every 39999 milliseconds (or approximately 40 seconds) to update the gas price in real-time.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/LocalStorage.md b/.autodoc/docs/markdown/lab/src/hooks/LocalStorage.md
deleted file mode 100644
index 6f116b493..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/LocalStorage.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/LocalStorage.js)
-
-The code defines a custom React hook called `useLocalStorage` that allows for storing and retrieving data from the browser's local storage. The hook takes three arguments: `key`, `initialValue`, and `ttl`.
-
-The `key` argument is a string that serves as the identifier for the data being stored. The `initialValue` argument is the default value that will be returned if no data is found in local storage for the given key. The `ttl` argument is an optional time-to-live value that specifies the number of milliseconds that the data should be considered valid for. If the data is retrieved from local storage and its `expiry` time has passed, the hook will return the `initialValue` and remove the expired data from local storage.
-
-The hook uses the `useState` hook from React to manage the state of the stored value. The initial state is set using a function that attempts to retrieve the data from local storage using the provided `key`. If the data is found, it is parsed from JSON and returned. If the parsed data is an object with `expiry` and `value` properties, the hook checks if the data has expired based on the current time and the `ttl` value. If the data has expired, the hook removes it from local storage and returns the `initialValue`. Otherwise, the `value` property is returned.
-
-The hook returns an array with two values: the current stored value and a function to update the stored value. The update function takes a new value and saves it to local storage using the provided `key`. If the `ttl` argument is provided, the function creates an object with the `value` and `expiry` properties and saves it to local storage. Otherwise, it saves the value directly.
-
-This hook can be used in a larger React project to store and retrieve data from local storage. For example, it could be used to store user preferences or settings that persist across sessions. Here is an example usage of the hook:
-
-```
-import useLocalStorage from './useLocalStorage';
-
-function App() {
- const [count, setCount] = useLocalStorage('count', 0, 60000);
-
- function handleClick() {
- setCount(count + 1);
- }
-
- return (
- Current gas price: {gasPrice} wei
-
-
- );
-}
-```
-
-In this example, the `count` value is stored in local storage with the key `'count'`. The initial value is `0` and the `ttl` is set to `60000` milliseconds (1 minute). The `setCount` function updates the stored value and persists it to local storage. The `handleClick` function increments the `count` value when the button is clicked.
-## Questions:
- 1. What does this code do?
-- This code exports a custom hook called `useLocalStorage` that allows for storing and retrieving data from local storage in a React component.
-
-2. What is the purpose of the `ttl` parameter?
-- The `ttl` parameter stands for "time to live" and is an optional parameter that specifies the number of milliseconds that the stored value should be considered valid. If the stored value has expired, it will be deleted from local storage and the initial value will be returned.
-
-3. What happens if an error occurs while trying to retrieve or store data in local storage?
-- If an error occurs while trying to retrieve or store data in local storage, the hook will log the error to the console and return the initial value.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/LookupAddress.md b/.autodoc/docs/markdown/lab/src/hooks/LookupAddress.md
deleted file mode 100644
index 57c842c8b..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/LookupAddress.md
+++ /dev/null
@@ -1,38 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/LookupAddress.js)
-
-The code in this file is a React hook that allows a user to get the Ethereum Name Service (ENS) name from a given address and provider. The code imports the `utils` module from the `ethers` library and the `useEffect` and `useState` hooks from the `react` library.
-
-The `lookupAddress` function takes in a provider and an address as arguments. It first checks if the address is valid using the `isAddress` method from the `utils` module. If the address is valid, it looks up the ENS name associated with the address using the `lookupAddress` method from the provider. It then resolves the ENS name to an address using the `resolveName` method from the provider. If the resolved address matches the original address, it returns the ENS name. Otherwise, it returns the original address. If the address is not valid, it returns 0.
-
-The `useLookupAddress` function takes in a provider and an address as arguments. It uses the `useState` hook to set the initial state of the ENS name to the address. It then uses the `useEffect` hook to check if the ENS name is already cached in `localStorage`. If it is, it sets the ENS name to the cached value. If it is not, it calls the `lookupAddress` function to get the ENS name and sets the state to the returned value. It also caches the ENS name in `localStorage` with a timestamp of 6 hours.
-
-To use this hook, a user can import it into their React component and call it with the provider and address as arguments. For example:
-
-```
-import useLookupAddress from './path/to/useLookupAddress';
-
-const MyComponent = ({ provider, address }) => {
- const ensName = useLookupAddress(provider, address);
-
- return (
- Count: {count}
- -
-
- );
-};
-```
-
-This hook provides a convenient way for users to get the ENS name associated with an Ethereum address, which can be useful in various Ethereum applications.
-## Questions:
- 1. What is the purpose of the `lookupAddress` function?
-
- The `lookupAddress` function takes a provider and an address as input and returns the corresponding ENS name for the address, if available. It also ensures that the reported ENS name resolves to the given address.
-
-2. What is the purpose of the `useLookupAddress` function?
-
- The `useLookupAddress` function is a custom React hook that takes a provider and an address as input and returns the corresponding ENS name for the address, if available. It also caches the ENS name in local storage to avoid unnecessary lookups.
-
-3. What is the purpose of the commented out `useLocalStorage` line?
-
- The `useLocalStorage` line is a custom hook that is not used in the code. It is commented out because there were synchronization issues with it, and the developer decided to write directly to local storage instead.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/Nonce.md b/.autodoc/docs/markdown/lab/src/hooks/Nonce.md
deleted file mode 100644
index b3540ccdf..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/Nonce.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/Nonce.js)
-
-The code above is a custom React hook called `useNonce` that is used to retrieve the nonce of a given Ethereum address. The nonce is a unique number that is used to prevent replay attacks on transactions.
-
-The hook takes in two parameters: `mainnetProvider` and `address`. `mainnetProvider` is an instance of a web3 provider that is connected to the Ethereum mainnet, while `address` is the Ethereum address for which the nonce is being retrieved.
-
-The hook uses the `useState` hook from React to create a state variable called `nonce` and initialize it to 0. The `useState` hook returns an array with two elements: the current state value and a function to update the state value. In this case, `nonce` is the current state value and `setNonce` is the function to update it.
-
-The `Nonce` function is defined inside the `useNonce` hook and is called immediately after it is defined. The `Nonce` function is an async function that retrieves the nonce for the given address using the `getTransactionCount` method of the `mainnetProvider`. The `getTransactionCount` method returns the number of transactions sent from the given address.
-
-If the `address` parameter is truthy (i.e., not null or undefined), the `getNonce` function is called to retrieve the nonce and update the `nonce` state variable using the `setNonce` function.
-
-Finally, the `useNonce` hook returns the `nonce` state variable, which can be used in other parts of the application to sign transactions with the correct nonce.
-
-Here is an example of how the `useNonce` hook can be used in a React component:
-
-```
-import useNonce from './useNonce';
-
-function MyComponent({ mainnetProvider, address }) {
- const nonce = useNonce(mainnetProvider, address);
-
- // Use the nonce to sign a transaction
- const signedTx = signTransaction({ nonce, ...otherTxData });
-
- return (
- Address: {address}
-ENS Name: {ensName}
-
-
- );
-}
-```
-
-Overall, the `useNonce` hook is a useful utility function for any Ethereum application that needs to sign transactions with the correct nonce.
-## Questions:
- 1. What is the purpose of this code and how is it used in the zoo project?
- This code defines a custom hook called `useNonce` that retrieves the transaction count for a given address on the Ethereum mainnet using a provided provider. It is likely used in the zoo project to interact with the Ethereum blockchain.
-
-2. What is the significance of the `useState` hook being used in this code?
- The `useState` hook is used to define a state variable called `nonce` and a function called `setNonce` that can be used to update the value of `nonce`. This allows the `useNonce` hook to store and update the nonce value over time.
-
-3. Why is the `getNonce` function defined as an async function and what does it do?
- The `getNonce` function is defined as an async function because it needs to wait for the `mainnetProvider.getTransactionCount` function to return a value before it can update the `nonce` state variable using `setNonce`. It retrieves the transaction count for the provided address on the Ethereum mainnet.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/OnBlock.md b/.autodoc/docs/markdown/lab/src/hooks/OnBlock.md
deleted file mode 100644
index 082205f98..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/OnBlock.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/OnBlock.js)
-
-The code is a custom React hook called `useOnBlock` that is designed to help call a function regularly in time intervals. The hook takes in three parameters: `provider`, `fn`, and `args`.
-
-The `provider` parameter is an object that is used to listen for events. The `fn` parameter is the function that will be called at regular intervals. The `args` parameter is an optional array of arguments that will be passed to the function when it is called.
-
-The hook uses the `useRef` and `useEffect` hooks from React to keep track of the latest function and to turn on the listener if both the function and provider are present. The `useRef` hook is used to store the latest function in a mutable reference that persists across renders. The `useEffect` hook is used to update the reference to the latest function whenever it changes.
-
-When the function and provider are present, the hook sets up a listener for the "block" event on the provider object. The listener function is called whenever a new block is added to the blockchain. If the `DEBUG` flag is set to true, the function logs the block number, the function being called, the arguments being passed, and the provider's listeners.
-
-The listener function then checks if there are any arguments to be passed to the function. If there are, it calls the saved function with the arguments. If there are no arguments, it simply calls the saved function.
-
-This hook can be used in a larger project to listen for events on a blockchain and call a function at regular intervals. For example, it could be used to update the UI with the latest block number or to fetch new data from a blockchain API.
-
-Here is an example of how the `useOnBlock` hook could be used in a React component:
-
-```
-import { useState } from "react";
-import useOnBlock from "./useOnBlock";
-
-function MyComponent({ provider }) {
- const [blockNumber, setBlockNumber] = useState(0);
-
- useOnBlock(provider, () => {
- setBlockNumber(blockNumber + 1);
- });
-
- return (
- Nonce: {nonce}
-Signed transaction: {signedTx}
-
-
- );
-}
-```
-
-In this example, the `MyComponent` component takes in a `provider` object as a prop. The component uses the `useState` hook to keep track of the current block number. The `useOnBlock` hook is used to listen for new blocks on the `provider` object and update the block number in the component's state. The updated block number is then displayed in the component's UI.
-## Questions:
- 1. What is the purpose of this code?
- This code is a custom React hook called `useOnBlock` that sets up a listener for Ethereum block events and calls a provided function at regular intervals.
-
-2. What is the significance of the `DEBUG` constant?
- The `DEBUG` constant is used to toggle console logging of block events, the provided function, and the provider's listeners. It is set to `false` by default.
-
-3. What happens if either the `fn` or `provider` arguments are not provided?
- If either the `fn` or `provider` arguments are not provided, the listener will not be turned on and the hook will not do anything.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/Poller.md b/.autodoc/docs/markdown/lab/src/hooks/Poller.md
deleted file mode 100644
index 65ccfff34..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/Poller.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/Poller.js)
-
-The code above is a custom React hook called `usePoller` that allows a function to be called regularly at specified time intervals. This hook takes in three parameters: `fn`, `delay`, and `extraWatch`.
-
-The `fn` parameter is the function that will be called at each interval. The `delay` parameter is the time interval in milliseconds between each call of the function. The `extraWatch` parameter is an optional parameter that can be used to trigger the function to run again if it changes.
-
-The hook uses the `useEffect` and `useRef` hooks from React. The `useRef` hook is used to store the latest version of the `fn` parameter. The `useEffect` hook is used to update the stored `fn` parameter whenever it changes.
-
-The hook then sets up an interval using the `setInterval` function. The `setInterval` function takes in the `tick` function and the `delay` parameter. The `tick` function simply calls the stored `fn` parameter. The `useEffect` hook also returns a cleanup function that clears the interval using the `clearInterval` function.
-
-Finally, the hook runs the `fn` function at the start using another `useEffect` hook. This hook is triggered whenever the `extraWatch` parameter changes.
-
-This hook can be used in a larger project to regularly call a function, such as updating data from an API or refreshing a component. Here is an example of how to use this hook:
-
-```
-import React, { useState } from "react";
-import usePoller from "./usePoller";
-
-function App() {
- const [count, setCount] = useState(0);
-
- usePoller(() => {
- setCount(count + 1);
- }, 1000);
-
- return (
- Current block number: {blockNumber}
-
-
- );
-}
-
-export default App;
-```
-
-In this example, the `usePoller` hook is used to update the `count` state variable every second. The `setCount` function is called inside the `usePoller` hook to update the state. The updated `count` value is then displayed in the component.
-## Questions:
- 1. What does this code do?
- This code exports a custom React hook called `usePoller` that takes in a function, a delay time, and an extra watch value as arguments. It sets up an interval to call the function regularly at the specified delay time, and also runs the function at the start and whenever the extra watch value changes.
-
-2. What is the purpose of the `useRef` hook in this code?
- The `useRef` hook is used to create a mutable reference to the latest version of the function passed in as an argument to `usePoller`. This reference is then used in the interval setup to ensure that the latest version of the function is always called.
-
-3. Why is there an `eslint-disable-next-line` comment in this code?
- The `eslint-disable-next-line` comment is used to disable the eslint rule that requires a `return` statement in the second `useEffect` hook. This is because the `return` statement is conditionally executed based on the value of `delay`, and eslint cannot determine this at compile time.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/ResolveName.md b/.autodoc/docs/markdown/lab/src/hooks/ResolveName.md
deleted file mode 100644
index d7741b8b8..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/ResolveName.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/ResolveName.js)
-
-The code in this file provides a custom React hook called `useResolveName` that can be used to get the address corresponding to a given ENS name using a specified Ethereum provider. The hook takes two parameters: `provider`, which is the Ethereum provider to use for resolving the ENS name, and `ensName`, which is the ENS name to resolve.
-
-The hook uses the `useState` and `useEffect` hooks from the React library to manage state and side effects. Specifically, it initializes the `address` state to the Ethereum constant `AddressZero`, which represents the null address, and then uses the `useEffect` hook to asynchronously resolve the ENS name and update the `address` state when the `provider` or `ensName` parameters change.
-
-The hook returns the resolved `address` state, which can be used in other parts of the application to interact with the Ethereum network using the resolved address.
-
-This code is useful in the larger project because it provides a simple and reusable way to resolve ENS names to Ethereum addresses using a specified provider. For example, it could be used in a decentralized application to look up the address of a user's ENS name and then interact with their Ethereum account on the network. Here is an example usage of the hook:
-
-```
-import { ethers } from "ethers";
-import useResolveName from "./useResolveName";
-
-const MyComponent = () => {
- const mainnetProvider = new ethers.providers.InfuraProvider("mainnet");
- const addressFromENS = useResolveName(mainnetProvider, "austingriffith.eth");
-
- // Use the resolved address in the component
- return Count: {count}
-Resolved address: {addressFromENS}
;
-};
-```
-## Questions:
- 1. What is the purpose of the `ethers` library being imported?
-- The `ethers` library is being used to access the `constants` object which contains the `AddressZero` constant.
-
-2. How does the `useResolveName` function work?
-- The `useResolveName` function takes in a provider and an ENS name as arguments, and returns the corresponding address for the given ENS name using the `resolveName` method of the provider.
-
-3. What is the expected output of using the `useResolveName` function?
-- The expected output of using the `useResolveName` function is the address corresponding to the given ENS name.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/TokenList.md b/.autodoc/docs/markdown/lab/src/hooks/TokenList.md
deleted file mode 100644
index dca36df77..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/TokenList.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/TokenList.js)
-
-# `useTokenList` function
-
-The `useTokenList` function is a custom React hook that retrieves a token list from a specified URI and returns an array of tokens. A token list is a JSON file that contains information about tokens, such as their name, symbol, and contract address. The function takes two optional parameters: `tokenListUri` and `chainId`.
-
-## How to use
-
-To use the `useTokenList` function, import it into a React component and call it. By default, it returns the Uniswap token list. You can also pass a custom token list URI as the first parameter to retrieve a different token list. If you pass a `chainId` as the second parameter, the function will filter the token list to only include tokens that belong to that chain.
-
-```javascript
-import useTokenList from './useTokenList';
-
-const MyComponent = () => {
- const tokenList = useTokenList(); // returns Uniswap tokens
- const customTokenList = useTokenList('https://mycustomtokenlist.com', 1); // returns tokens for chainId 1
- // ...
-};
-```
-
-## Features
-
-- Retrieves a token list from a specified URI
-- Returns an array of tokens
-- Optional `chainId` parameter to filter tokens by chainId
-
-## Implementation
-
-The `useTokenList` function uses the `useState` and `useEffect` hooks from React. It initializes a state variable `tokenList` as an empty array and sets the default token list URI to the Uniswap token list. When the component mounts or the `tokenListUri` parameter changes, the function calls an asynchronous `getTokenList` function that fetches the token list from the specified URI. If the `chainId` parameter is passed, the function filters the token list to only include tokens that belong to that chain. Finally, the function sets the `tokenList` state variable to an array of tokens extracted from the token list JSON.
-## Questions:
- 1. What is the purpose of this code?
-
- This code defines a custom React hook called `useTokenList` that fetches a tokenlist and returns an array of tokens from it. The tokenlist URI and chainId can be optionally specified as parameters.
-
-2. What is the format of the tokenlist that this code fetches?
-
- The code expects the tokenlist to be in JSON format, with an array of objects containing information about each token. The relevant information for this code is the `tokens` property of the JSON object.
-
-3. What happens if the user is offline when this code is executed?
-
- If the user is offline, the code will not attempt to fetch the tokenlist and will not update the state of the `tokenList` variable.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/UserSigner.md b/.autodoc/docs/markdown/lab/src/hooks/UserSigner.md
deleted file mode 100644
index 15dde09cd..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/UserSigner.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/UserSigner.js)
-
-The `useUserSigner` function is a custom React hook that returns a signer object for a user. A signer is an object that can sign Ethereum transactions and messages. The function takes two arguments: `injectedProvider` and `localProvider`. The `injectedProvider` is a provider object that is injected into the browser by a wallet like Metamask. The `localProvider` is a provider object that is created by the application itself, using a library like ethers.js.
-
-The function first initializes a state variable `signer` using the `useState` hook. It also calls another custom hook `useBurnerSigner` with the `localProvider` argument. The `useBurnerSigner` hook returns a burner signer object that can be used for testing purposes.
-
-The function then uses the `useMemo` hook to memoize the `signer` state variable. If `injectedProvider` is truthy, it gets the signer object from the provider and sets it as the `signer` state. If `localProvider` is falsy, it sets the `signer` state to `undefined`. If neither `injectedProvider` nor `localProvider` is truthy, it sets the `signer` state to the burner signer object returned by `useBurnerSigner`.
-
-The function returns the `signer` state variable. This hook can be used in a React component to get the signer object for the user. For example:
-
-```
-import { useWeb3React } from "@web3-react/core";
-import useUserSigner from "./useUserSigner";
-
-function MyComponent() {
- const { library } = useWeb3React();
- const signer = useUserSigner(library.getSigner(), library);
-
- // Use the signer object to sign transactions or messages
-}
-```
-
-In this example, the `useWeb3React` hook is used to get the `library` object, which is a provider object injected by the Web3 React library. The `library.getSigner()` method returns the signer object for the current user. The `library` object is also passed as the `localProvider` argument to `useUserSigner`. The `signer` object returned by `useUserSigner` can then be used to sign transactions or messages.
-## Questions:
- 1. What is the purpose of the `useMemo` hook in this code?
- - The `useMemo` hook is used to memoize the function that sets the signer based on the provider, so that it only runs when the dependencies (`injectedProvider`, `localProvider`, and `burnerSigner`) change.
-2. What is the `useBurnerSigner` function and how is it used in this code?
- - The `useBurnerSigner` function is imported from another file and is used to get a burner signer from the local provider. It is used in the `useUserSigner` function to set the signer to the burner signer if no injected provider is available.
-3. What are the possible values that can be returned by the `useUserSigner` function?
- - The `useUserSigner` function returns the signer, which can be either an injected signer (if `injectedProvider` is available), a burner signer (if no `injectedProvider` is available and `localProvider` is available), or `undefined` (if no `injectedProvider` or `localProvider` is available).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/hooks/index.md b/.autodoc/docs/markdown/lab/src/hooks/index.md
deleted file mode 100644
index 91de9580e..000000000
--- a/.autodoc/docs/markdown/lab/src/hooks/index.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/hooks/index.js)
-
-This code exports a series of custom React hooks from various files within the `zoo` project. These hooks are designed to provide functionality for interacting with Ethereum smart contracts and other blockchain-related tasks.
-
-For example, the `useContractLoader` hook can be used to load a smart contract from its address on the blockchain, while the `useContractReader` hook can be used to read data from a smart contract. The `useGasPrice` hook provides the current gas price for transactions on the Ethereum network, and the `useResolveName` hook can be used to resolve an Ethereum address to its corresponding ENS name.
-
-These hooks can be imported and used in other parts of the `zoo` project to simplify the process of interacting with the blockchain. For example, a component that needs to read data from a smart contract can use the `useContractReader` hook to do so without having to write custom code to interact with the contract.
-
-Here is an example of how the `useGasPrice` hook could be used in a React component:
-
-```
-import { useGasPrice } from 'zoo';
-
-function GasPriceDisplay() {
- const gasPrice = useGasPrice();
-
- return (
-
- Current gas price: {gasPrice} wei
-
- );
-}
-```
-
-Overall, this code provides a set of reusable hooks that can be used throughout the `zoo` project to simplify interactions with the Ethereum blockchain.
-## Questions:
- 1. What is the purpose of this code file?
-- This code file exports various custom hooks from different files within the `zoo` project.
-
-2. What are some examples of the custom hooks being exported?
-- Some examples of the custom hooks being exported include `useBalance`, `useContractLoader`, `useLocalStorage`, and `useUserSigner`.
-
-3. How can a developer use these custom hooks in their own code?
-- A developer can import the desired custom hook from this file and use it in their own code by calling the hook function and passing in any necessary parameters.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/index.md b/.autodoc/docs/markdown/lab/src/index.md
deleted file mode 100644
index ac858aa04..000000000
--- a/.autodoc/docs/markdown/lab/src/index.md
+++ /dev/null
@@ -1,54 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/index.jsx)
-
-This code sets up the environment for a React application that interacts with a GraphQL subgraph. It imports necessary dependencies from external libraries such as Apollo Client and React CSS Theme Switcher.
-
-The `themes` object contains two properties, `dark` and `light`, which are URLs to CSS files for the respective themes. These themes can be switched using the `ThemeSwitcherProvider` component from the React CSS Theme Switcher library. The `prevTheme` variable retrieves the previously selected theme from local storage, or defaults to "light" if no theme has been selected before.
-
-The `subgraphUri` variable is the URL to the GraphQL subgraph that the application will interact with. This URL is specific to the project and may need to be changed depending on the subgraph being used.
-
-The `client` variable creates a new instance of the Apollo Client with the `subgraphUri` and an `InMemoryCache`. This client will be used to make GraphQL queries to the subgraph.
-
-Finally, the `ReactDOM.render()` method renders the `App` component wrapped in the `ApolloProvider` and `ThemeSwitcherProvider` components. The `ApolloProvider` component provides the `client` instance to the `App` component, allowing it to make GraphQL queries. The `ThemeSwitcherProvider` component provides the theme switching functionality to the `App` component.
-
-Overall, this code sets up the environment for a React application that interacts with a GraphQL subgraph and provides theme switching functionality. It can be used as a starting point for building a frontend for a dApp that uses a subgraph to query data from the blockchain.
-
-Example usage:
-
-```jsx
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
-import { ThemeSwitcherProvider } from "react-css-theme-switcher";
-import "./index.css";
-
-const themes = {
- dark: `${process.env.PUBLIC_URL}/dark-theme.css`,
- light: `${process.env.PUBLIC_URL}/light-theme.css`,
-};
-
-const prevTheme = window.localStorage.getItem("theme");
-
-const subgraphUri = "http://localhost:8000/subgraphs/name/scaffold-eth/your-contract";
-
-const client = new ApolloClient({
- uri: subgraphUri,
- cache: new InMemoryCache(),
-});
-
-ReactDOM.render(
-
-
-```
-## Questions:
- 1. What is the purpose of the imported LESS files?
- - The imported LESS files are used to style the components of the `antd` library, which is likely being used in the `zoo` project.
-
-2. Why are there shared variables commented out?
- - The shared variables are likely commented out because they have been extracted to their own file for easier management and organization.
-
-3. What is the purpose of the `.highlight` class?
- - The `.highlight` class is used to apply a specific background color to elements that need to be highlighted in the UI.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/views/ExampleUI.md b/.autodoc/docs/markdown/lab/src/views/ExampleUI.md
deleted file mode 100644
index 60fbe08cc..000000000
--- a/.autodoc/docs/markdown/lab/src/views/ExampleUI.md
+++ /dev/null
@@ -1,52 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/views/ExampleUI.jsx)
-
-The code is a React component that provides a user interface for interacting with a smart contract. The component receives several props, including the contract's address, provider, and read and write contracts. The UI displays the current purpose of the contract and allows the user to set a new purpose by entering text into an input field and clicking a button. When the button is clicked, the component calls the setPurpose function on the write contract with the new purpose as an argument. The component also displays the user's address, balance, and contract address, as well as several example buttons that demonstrate how to send value and call functions on the contract.
-
-The UI also includes a section for displaying events emitted by the contract. This section is commented out by default, but can be uncommented by adding an emit statement to the setPurpose function in the contract. Finally, the UI includes several example components from the ant.design library, such as buttons, sliders, and date pickers.
-
-This component can be used as a starting point for building a more complex UI for a smart contract. Developers can modify the component to display additional contract data, add new functions for interacting with the contract, or replace the example components with custom components.
-
-Example usage:
-
-```jsx
-import ExampleUI from "./ExampleUI";
-
-function App() {
- const [purpose, setPurpose] = useState("");
- const [setPurposeEvents, setSetPurposeEvents] = useState([]);
- const [address, setAddress] = useState("");
- const [mainnetProvider, setMainnetProvider] = useState("");
- const [localProvider, setLocalProvider] = useState("");
- const [yourLocalBalance, setYourLocalBalance] = useState("");
- const [price, setPrice] = useState("");
- const [tx, setTx] = useState("");
- const [readContracts, setReadContracts] = useState("");
- const [writeContracts, setWriteContracts] = useState("");
-
- // set values for props
-
- return (
- This text is highlighted
-
-
- );
-}
-```
-## Questions:
- 1. What is the purpose of the `useTokenList` hook and where does it get its data from?
-- The `useTokenList` hook returns an array of tokens and gets its data from the tokenlist located at `https://raw.githubusercontent.com/SetProtocol/uniswap-tokenlist/main/set.tokenlist.json`.
-2. What is the purpose of the `AddressInput` component and what props does it take?
-- The `AddressInput` component is a web3 specific component used for inputting addresses and takes a prop called `ensProvider` which is used for resolving ENS names.
-3. What is the purpose of the `usePrice` hook and what value does it return?
-- The `usePrice` hook is used to load the current price and returns the value of `price`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/views/Subgraph.md b/.autodoc/docs/markdown/lab/src/views/Subgraph.md
deleted file mode 100644
index e0e808db3..000000000
--- a/.autodoc/docs/markdown/lab/src/views/Subgraph.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/views/Subgraph.jsx)
-
-The `Subgraph` component is a React component that renders a UI for interacting with a subgraph. A subgraph is a tool provided by The Graph that allows developers to index and query data from a blockchain. The component imports several dependencies, including `@apollo/client`, `antd`, and `graphiql`, and defines a function called `graphQLFetcher` that fetches data from the subgraph using the `fetch` API.
-
-The component then defines a GraphQL query called `EXAMPLE_GRAPHQL` that retrieves data from the subgraph, including the `id`, `purpose`, `createdAt`, and `sender` fields. The query is then passed to the `gql` function from `@apollo/client` to create a GraphQL document called `EXAMPLE_GQL`. The `useQuery` hook from `@apollo/client` is then used to execute the query and retrieve the data. The `loading` and `data` variables are destructured from the result of the `useQuery` hook.
-
-The component also defines a table called `purposeColumns` that specifies the columns to be displayed in the UI. The table includes columns for the `purpose`, `sender`, and `createdAt` fields. The `render` function for the `sender` column uses the `Address` component from `../components` to display the `id` field of the `sender` object.
-
-The component defines a state variable called `newPurpose` using the `useState` hook. The `newPurpose` variable is initialized to the string "loading...". The component also defines a `deployWarning` variable that displays a warning message if the subgraph has not been deployed.
-
-The component renders a UI that includes several sections of text that provide instructions for deploying and using a subgraph. The UI also includes an input field and a button that allow the user to set the `purpose` field of a contract. The `tx` function is passed to the component as a prop and is used to call the `setPurpose` function on the contract.
-
-The UI also includes a table that displays the data retrieved from the subgraph, as well as a GraphiQL editor that allows the user to execute GraphQL queries against the subgraph. If the `data` variable is null, the UI displays either a loading message or the `deployWarning` message.
-
-Overall, the `Subgraph` component provides a simple UI for interacting with a subgraph and retrieving data from a blockchain. The component can be used as part of a larger project that requires indexing and querying blockchain data.
-## Questions:
- 1. What is the purpose of the `Subgraph` component?
-- The `Subgraph` component is used to display data from a GraphQL subgraph and provides functionality to set a new purpose value.
-2. What external libraries are being used in this code?
-- The code is using several external libraries including `@apollo/client`, `antd`, `graphiql`, and `isomorphic-fetch`.
-3. What is the purpose of the `highlight` object?
-- The `highlight` object is used to style a highlighted section of text in the component's rendered output. However, it is currently commented out and not being used.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/lab/src/views/index.md b/.autodoc/docs/markdown/lab/src/views/index.md
deleted file mode 100644
index 5034eadb8..000000000
--- a/.autodoc/docs/markdown/lab/src/views/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/lab/src/views/index.js)
-
-This code exports three modules from the `zoo` project: `ExampleUI`, `Hints`, and `Subgraph`.
-
-`ExampleUI` is likely a user interface component that provides an example of how to use a particular feature or functionality within the larger `zoo` project. It may contain buttons, input fields, or other interactive elements that allow the user to interact with the feature in question.
-
-`Hints` is likely a module that provides hints or suggestions to the user on how to use the `zoo` project. This could be in the form of tooltips, pop-ups, or other types of notifications that appear when the user hovers over or clicks on certain elements within the project.
-
-`Subgraph` is likely a module that provides a subgraph of the larger `zoo` project. This could be a smaller, more focused view of a particular feature or functionality within the project, allowing the user to more easily understand and interact with that feature.
-
-Overall, this code is important for the `zoo` project because it allows other parts of the project to easily import and use these three modules. For example, if another component within the project needs to display an example of how to use a particular feature, it can simply import `ExampleUI` and use it within its own code.
-
-Example usage:
-
-```
-import { ExampleUI, Hints, Subgraph } from 'zoo';
-
-// Use ExampleUI component
-Child components go here
-
-
-
- )
-}
-```
-
-In this example, the `MyVideoPlayer` component renders a video element and the `MediaPlayButton` component. The `mediaRef` prop of the `MediaPlayButton` component is set to the `videoRef` object, which is a reference to the video element. This allows the `MediaPlayButton` component to control the play/pause behavior of the video element.
-## Questions:
- 1. What does this code do?
-- This code exports a React component called `MediaPlayButton` that renders a button with a play/pause icon. When clicked, it plays or pauses an audio or video element passed as a prop.
-
-2. What external libraries does this code use?
-- This code uses two external libraries: `@fortawesome/react-fontawesome` and `@fortawesome/free-solid-svg-icons`. These libraries provide the FontAwesomeIcon component and the faPlay/faPause icons used in the button.
-
-3. What is the purpose of the `useEffect` hook in this code?
-- The `useEffect` hook is used to set up event listeners on the media element passed as a prop. When the media starts playing, it sets the `playing` state to true, and when it pauses, it sets the `playing` state to false. The hook also cleans up the event listeners when the component unmounts.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/components/TokenMedia/TokenFallback.md b/.autodoc/docs/markdown/ui/src/components/TokenMedia/TokenFallback.md
deleted file mode 100644
index 7c66dfc26..000000000
--- a/.autodoc/docs/markdown/ui/src/components/TokenMedia/TokenFallback.md
+++ /dev/null
@@ -1,41 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/components/TokenMedia/TokenFallback.tsx)
-
-The `TokenFallback` component is a React functional component that renders a fallback UI for when content is not available for a given token. It takes in several props, including `style`, `className`, `token`, `chainId`, and `onRefreshClicked`.
-
-The component first uses the `useReservoirClient` hook to get the current client instance, and then uses the `chainId` prop to determine which chain to use. If `chainId` is not provided, it defaults to the current chain.
-
-The component then renders a `Flex` container with `justify`, `align`, and `direction` props set to center the child elements. The `gap` and `aspectRatio` CSS properties are also set on the container.
-
-Inside the container, the component conditionally renders an `img` element if the `token` prop has a `collection` object with an `image` property. The image is displayed with a width and height of 64 pixels, and a border radius of 8 pixels.
-
-Next, a `Text` component is rendered with the text "No Content Available". The `style` prop is set to "body2", and the `textAlign` CSS property is set to center the text.
-
-Finally, a `Button` component is rendered with the text "Refresh". When clicked, the `onRefreshClicked` prop is called, and a POST request is made to the Reservoir API to refresh the token. The request includes the `token` ID in the request body, and the `Content-Type` header is set to "application/json".
-
-This component can be used in the larger project as a fallback UI for when content is not available for a given token. It provides a way for users to refresh the token content if it becomes stale.
-
-Example usage:
-
-```
-import TokenFallback from './TokenFallback'
-
-function MyComponent() {
- return (
-
- console.log('Refresh clicked')}
- />
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `TokenFallback` component?
-- The `TokenFallback` component is a fallback UI for when there is no content available for a token.
-
-2. What is the `useReservoirClient` hook and where is it defined?
-- The `useReservoirClient` hook is defined in the `../../hooks` module and is used to retrieve the Reservoir client instance.
-
-3. What is the `paths` object imported from `@reservoir0x/reservoir-sdk` used for?
-- The `paths` object is used to define the types for the request and response parameters for the `/tokens/refresh/v1` endpoint.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/components/TokenMedia/index.md b/.autodoc/docs/markdown/ui/src/components/TokenMedia/index.md
deleted file mode 100644
index 0c5101e29..000000000
--- a/.autodoc/docs/markdown/ui/src/components/TokenMedia/index.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/components/TokenMedia/index.tsx)
-
-The `TokenMedia` component is a React functional component that renders different types of media based on the type of token passed to it. The component takes in a `token` object, which is an object that contains information about the token, such as its media type, image, and collection. The component also takes in a `preview` boolean, which determines whether the media should be displayed as a preview or not.
-
-The `TokenMedia` component uses the `useTokens` and `useModelViewer` hooks to retrieve data about the token and to render the 3D model viewer, respectively. The component also uses the `ThemeContext` context to retrieve the theme of the application and set the border radius of the media element.
-
-The `TokenMedia` component renders different types of media based on the `mediaType` of the token. If the `mediaType` is an image, the component renders an `img` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is a video, the component renders a `video` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is an audio file, the component renders an `audio` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is a 3D model, the component renders a `model-viewer` element with the `src` attribute set to the `media` property of the token. If the `mediaType` is an HTML file, the component renders an `iframe` element with the `src` attribute set to the `media` property of the token.
-
-If the `mediaType` is not recognized or if there is an error loading the media, the component renders a fallback element. The fallback element can be customized by passing a `fallback` function to the component.
-
-The `TokenMedia` component also provides options to customize the style and behavior of the media elements. These options include `style`, `className`, `modelViewerOptions`, `videoOptions`, `audioOptions`, `iframeOptions`, `onError`, and `onRefreshToken`.
-
-Overall, the `TokenMedia` component is a versatile component that can render different types of media based on the type of token passed to it. It provides options to customize the style and behavior of the media elements and can be used in a larger project to display media associated with tokens.
-
-Example usage:
-
-```jsx
-import TokenMedia from './TokenMedia'
-
-const token = {
- media: 'https://example.com/video.mp4',
- image: 'https://example.com/image.png',
- collection: 'example-collection',
- tokenId: 'example-token',
-}
-
-function App() {
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `extractMediaType` function?
-- The `extractMediaType` function takes a token object and returns the media type of the token (e.g. mp4, mp3, png, etc.) based on the file extension of the media URL.
-
-2. What are the different types of media that this component can render?
-- The component can render images (png, jpeg, jpg, gif), videos (mp4), audio (mp3, wav), 3D models (gltf, glb), HTML, SVG, and other media types.
-
-3. What is the purpose of the `fallback` prop?
-- The `fallback` prop is a function that takes the media type of the token as an argument and returns a fallback element to render if there is an error loading the media. If no fallback function is provided, a default `TokenFallback` component is rendered.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/components/cart/CartCheckoutModal.md b/.autodoc/docs/markdown/ui/src/components/cart/CartCheckoutModal.md
deleted file mode 100644
index c01203aa1..000000000
--- a/.autodoc/docs/markdown/ui/src/components/cart/CartCheckoutModal.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/components/cart/CartCheckoutModal.tsx)
-
-The `CartCheckoutModal` component is a React component that renders a modal for the checkout process of a shopping cart. It receives several props that contain information about the items in the cart, the total price, the currency, the chain, and the transaction status.
-
-The component uses several other components and libraries to render the modal, including `DialogPrimitive`, `framer-motion`, `@stitches/react`, and `@fortawesome/react-fontawesome`. It also uses several custom components from the project, such as `TokenCheckout`, `SigninStep`, and `ApprovalCollapsible`.
-
-The modal has several states depending on the transaction status. If the status is `Approving`, the modal shows a list of items to be approved, and the user is prompted to sign in to their wallet. If the status is `Finalizing`, the modal shows a message indicating that the transaction is being finalized on the blockchain. If the status is `Complete`, the modal shows a message indicating whether the transaction was successful or not, and provides a link to view the transaction on the blockchain.
-
-The component also uses several hooks to retrieve data and manage state, such as `useContext`, `useState`, `useEffect`, and custom hooks like `useCoinConversion`.
-
-Overall, the `CartCheckoutModal` component is an important part of the shopping cart feature of the project, providing a user-friendly interface for the checkout process and integrating with various blockchain-related libraries and services.
-
-Example usage:
-
-```jsx
-
-
- )}
- Total price: {totalPrice}
--
- {items.map(item => (
-
- {item.name} - ))} -
- View cart} />
-
- )
-}
-```
-
-In this example, three `CartToast` components are rendered with different `kind` and `message` props. The third toast also includes a link to the cart page.
-
-Overall, the `CartToast` component is a simple and flexible way to display feedback messages to the user in a consistent and customizable way.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `CartToast` that displays a message with an optional link and an icon based on the type of message (success, error, or warning).
-
-2. What external dependencies does this code rely on?
-- This code relies on the `react`, `@fortawesome/react-fontawesome`, and `@fortawesome/free-solid-svg-icons` packages.
-
-3. What are the available props for the `CartToast` component?
-- The available props for the `CartToast` component are `kind` (string, optional), `message` (string, required), and `link` (ReactNode, optional). The `kind` prop can be one of three values: `'success'`, `'error'`, or `'warning'`. If `kind` is not provided, it defaults to `'success'`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/constants/wrappedContractNames.md b/.autodoc/docs/markdown/ui/src/constants/wrappedContractNames.md
deleted file mode 100644
index 8a77b4987..000000000
--- a/.autodoc/docs/markdown/ui/src/constants/wrappedContractNames.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/constants/wrappedContractNames.ts)
-
-The code above defines a constant variable called `wrappedContractNames` which is a Record object that maps numbers to strings. The purpose of this code is to provide a mapping between the network IDs of various Ethereum-based blockchains and the names of the wrapped tokens used on those networks.
-
-The keys of the `wrappedContractNames` object are the network IDs, and the values are the names of the wrapped tokens used on those networks. For example, the network ID 1 is associated with the wrapped Ether token (WETH), while the network ID 137 is associated with the wrapped Matic token (WMATIC).
-
-This code is likely used in other parts of the larger project to facilitate the use of wrapped tokens across different Ethereum-based blockchains. For example, if a user wants to interact with a smart contract on the Polygon network (network ID 137), they would need to use WMATIC instead of WETH. By referencing the `wrappedContractNames` object, the project can easily determine which wrapped token to use for a given network ID.
-
-Here is an example of how this code might be used in another part of the project:
-
-```
-import wrappedContractNames from 'zoo'
-
-const networkId = 137
-const wrappedTokenName = wrappedContractNames[networkId]
-
-// Use wrappedTokenName to interact with smart contracts on the Polygon network
-```
-
-In this example, the `wrappedContractNames` object is imported from the `zoo` module. The code then retrieves the name of the wrapped token associated with the Polygon network (network ID 137) by accessing the `wrappedContractNames` object with the network ID as the key. The resulting `wrappedTokenName` variable can then be used to interact with smart contracts on the Polygon network.
-## Questions:
- 1. **What is the purpose of this code?**\
-A smart developer might ask what this code is used for and how it fits into the overall functionality of the `zoo` project. Based on the code, it appears to be defining a mapping of contract names to contract numbers for various tokens.
-
-2. **What is the significance of the numbers used as keys in the `wrappedContractNames` object?**\
-A smart developer might ask why specific numbers were chosen as keys in the `wrappedContractNames` object. Based on the code, it seems that each number corresponds to a specific blockchain or network.
-
-3. **What is the reason for exporting `wrappedContractNames` as the default export?**\
-A smart developer might ask why `wrappedContractNames` is being exported as the default export of the `zoo` module. Based on the code, it seems that this mapping of contract names to contract numbers is a fundamental piece of data that may be used throughout the `zoo` project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/constants/wrappedContracts.md b/.autodoc/docs/markdown/ui/src/constants/wrappedContracts.md
deleted file mode 100644
index 639cc2d87..000000000
--- a/.autodoc/docs/markdown/ui/src/constants/wrappedContracts.md
+++ /dev/null
@@ -1,23 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/constants/wrappedContracts.ts)
-
-This code defines a constant variable called `wrappedContracts` which is a Record object that maps numbers to Ethereum contract addresses. The numbers represent different Ethereum networks, with 1 being the main Ethereum network, 5 being the Goerli test network, 10 being the Optimism network, 137 being the Polygon network, and 42161 being the Arbitrum network. The corresponding contract addresses are for wrapped versions of various tokens, which are tokens that have been "wrapped" to be compatible with a different network or protocol.
-
-This code is likely used in the larger project to provide a centralized location for storing the contract addresses of wrapped tokens on different networks. Other parts of the project can import this file and use the `wrappedContracts` object to interact with the wrapped tokens on the appropriate network. For example, if a user wants to trade a wrapped token on the Polygon network, the code can reference the contract address stored in `wrappedContracts[137]` to interact with that token.
-
-Here is an example of how this code could be used in a larger project:
-
-```
-import wrappedContracts from './zoo/wrappedContracts'
-
-const polygonWrappedTokenAddress = wrappedContracts[137]
-// Use the polygonWrappedTokenAddress to interact with the wrapped token on the Polygon network
-```
-## Questions:
- 1. What is the purpose of this code?
- - This code defines a constant object `wrappedContracts` that maps network IDs to contract addresses.
-
-2. What is the data type of `wrappedContracts` and what does it represent?
- - `wrappedContracts` is a `Record` type with keys of type `number` and values of type `string`. It represents a mapping of network IDs to contract addresses.
-
-3. Where is this code being used/imported?
- - It is being exported as a default export from the `zoo` module, so it can be imported and used in other parts of the project that depend on it.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/index.md b/.autodoc/docs/markdown/ui/src/hooks/index.md
deleted file mode 100644
index 7a76ff7ee..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/index.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/index.ts)
-
-This code exports a variety of custom React hooks from the `zoo` project. React hooks are a way to reuse stateful logic across components in a React application.
-
-The exported hooks can be divided into two categories: public and internal. Public hooks are intended to be used by other developers who are consuming the `zoo` project, while internal hooks are used within the `zoo` project itself.
-
-The public hooks include `useCollections`, `useTokens`, `useListings`, and others. These hooks likely provide functionality related to interacting with collections, tokens, and listings within the `zoo` project. For example, `useCollections` may provide a way to fetch and manage collections of tokens within the project.
-
-The internal hooks include `useCopyToClipboard`, `useMediaQuery`, `useTimeSince`, and others. These hooks are likely used within the `zoo` project to provide common functionality across components. For example, `useCopyToClipboard` may provide a way to copy text to the clipboard, which could be used in multiple components within the project.
-
-Overall, this code provides a way for developers to reuse common stateful logic across components within the `zoo` project. By exporting these hooks, other developers can easily consume and integrate them into their own components. For example, a developer working on a new feature within the `zoo` project may use the `useCollections` hook to fetch and manage collections of tokens within their component.
-## Questions:
- 1. What is the purpose of this file?
-- This file exports various custom hooks from the `zoo` project, both for internal and external use.
-
-2. What are some examples of functionality provided by the exported hooks?
-- The exported hooks include functionality such as accessing collections, tokens, listings, and bids, as well as media queries, time formatting, and pre-approval checks.
-
-3. Are there any dependencies or requirements for using these hooks?
-- It is unclear from this code whether there are any dependencies or requirements for using these hooks, as the implementation of each hook is contained in its respective file.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useAttributes.md b/.autodoc/docs/markdown/ui/src/hooks/useAttributes.md
deleted file mode 100644
index 86c4d9754..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useAttributes.md
+++ /dev/null
@@ -1,54 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useAttributes.ts)
-
-The code is a React hook that fetches data from a Reservoir API endpoint and returns the response along with some additional metadata. The hook takes in three optional parameters: `collection`, `chainId`, and `swrOptions`.
-
-The `collection` parameter is a string that specifies the name of the collection to fetch data from. If `collection` is not provided, the `path` variable will be set to `null`.
-
-The `chainId` parameter is an integer that specifies the ID of the chain to fetch data from. If `chainId` is not provided, the `chain` variable will be set to the current chain of the Reservoir client.
-
-The `swrOptions` parameter is an object that contains options for the `useSWR` hook, which is used to fetch the data.
-
-The hook first gets the Reservoir client using the `useReservoirClient` hook. It then constructs the API endpoint URL using the `collection` and `chain` variables. If `collection` is not provided, the `pathname` variable will be set to `null`.
-
-The `path` variable is then constructed using the `pathname` variable and the `URL` constructor. If `collection` is not provided, `path` will be set to `null`.
-
-The `useSWR` hook is then called with the `path` variable, along with the Reservoir API key and version. The `revalidateOnMount` option is set to `true` by default, and any additional options passed in through `swrOptions` are merged with the default options.
-
-The hook then returns an object containing the response data, the `attributes` array from the response data, the `mutate` function for updating the data, any errors that occurred during the fetch, and a boolean indicating whether the hook is currently fetching data.
-
-This hook can be used in a larger project to fetch data from a Reservoir API endpoint and use that data to render components or update state. For example, the `attributes` array returned by the hook could be mapped over to render a list of attributes for a given collection.
-
-Example usage:
-
-```
-import useReservoirAttributes from './useReservoirAttributes'
-
-function MyComponent() {
- const { data, error, isValidating } = useReservoirAttributes('myCollection', 1)
-
- if (error) {
- return Error: {error.message}
- }
-
- if (!data) {
- return Loading...
- }
-
- return (
- -
- {data.map((attribute) => (
-
- {attribute.name} - ))} -
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `Cart` and `CartContext` imports?
-- The `Cart` and `CartContext` imports are likely part of a larger context system for managing a shopping cart in an e-commerce application.
-
-2. What is the `useSyncExternalStore` hook doing?
-- The `useSyncExternalStore` hook is likely syncing the local state of the `cart` object with an external data source, such as a server or database.
-
-3. What is the purpose of the `selector` argument in the `useCart` function?
-- The `selector` argument is likely a function that selects specific data from the `Cart` object, allowing the returned object to only expose the necessary data and methods for the component using the hook.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useChainCurrency.md b/.autodoc/docs/markdown/ui/src/hooks/useChainCurrency.md
deleted file mode 100644
index 1941cd424..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useChainCurrency.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useChainCurrency.ts)
-
-The code is a utility function that is used to retrieve the native currency of a given blockchain network. The function takes an optional parameter `chainId` which is the unique identifier of the blockchain network. If the `chainId` is not provided, the function retrieves the current chain from the `reservoir-sdk` library.
-
-The function then searches for the chain with the given `chainId` in the list of chains provided by the `useNetwork()` hook from the `wagmi` library. If the chain is not found, the function returns the native currency of the first chain in the list.
-
-If the chain is found, the function checks if the chain is an Ethereum chain by checking if the chain id is in the list of Ethereum chain ids. If the chain is an Ethereum chain or if the chain does not have a native currency, the function returns the default Ethereum currency object with the name 'Ethereum', symbol 'ETH', and 18 decimals. If the chain is not an Ethereum chain and has a native currency, the function returns the native currency object of the chain.
-
-This function can be used in a larger project to retrieve the native currency of a given blockchain network. For example, if a user wants to display the native currency of a selected blockchain network in a user interface, this function can be used to retrieve the currency information and display it to the user.
-
-Example usage:
-
-```
-import getChainCurrency from 'zoo'
-
-const chainId = 1 // Example chain id
-const currency = getChainCurrency(chainId)
-
-console.log(currency) // { name: 'Ethereum', symbol: 'ETH', decimals: 18, address: '0x0000000000000000000000000000000000000000', chainId: 1 }
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a function `getChainCurrency` that returns the native currency of a specified or current chain, and a default function that calls `getChainCurrency` with the current network's chains.
-
-2. What external libraries or dependencies does this code use?
-- This code imports `@reservoir0x/reservoir-sdk`, `ethers`, and `wagmi`.
-
-3. What is the expected input and output of the `getChainCurrency` function?
-- The `getChainCurrency` function expects an array of `Chain` objects and an optional `chainId` number as input, and returns an object with properties `name`, `symbol`, `decimals`, `address`, and `chainId`. If the specified chain is not found or does not have a native currency, it returns the default Ethereum currency object.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useCoinConversion.md b/.autodoc/docs/markdown/ui/src/hooks/useCoinConversion.md
deleted file mode 100644
index 943fd2caf..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useCoinConversion.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useCoinConversion.ts)
-
-This code is a function that retrieves the current price of a cryptocurrency from the CoinGecko API. It uses the React library and the SWR library to handle data fetching and caching. The function takes in three optional parameters: `vs_currency`, `symbols`, and `id`.
-
-The `vs_currency` parameter specifies the currency in which the price should be returned (e.g. USD, EUR). The `symbols` parameter specifies the cryptocurrency symbol(s) for which the price should be returned (e.g. BTC, ETH). If multiple symbols are provided, they should be separated by commas. The `id` parameter specifies the cryptocurrency ID(s) for which the price should be returned. If `id` is not provided, it will be derived from the `symbols` parameter using a mapping provided in the `coinIds` property of the `coinGecko` object in the `ProviderOptionsContext`.
-
-The function first retrieves the `coinGecko` object from the `ProviderOptionsContext` using the `useContext` hook. It then creates a base URL for the API request using the `createBaseUrl` function. If a proxy is specified in the `coinGecko` object, it will be used in the URL. Otherwise, if an API key is specified, it will be included in the URL. If neither a proxy nor an API key is specified, the default CoinGecko API URL will be used.
-
-If multiple symbols are provided, the `id` parameter is derived by mapping each symbol to its corresponding ID in the `coinIds` property of the `coinGecko` object and joining them with commas. If only one symbol is provided, the `id` parameter is derived from the `coinIds` property of the `coinGecko` object.
-
-The function then uses the `useSWR` hook to fetch the data from the API. If `vs_currency` is provided, the API request URL will include the `vs_currency`, `symbols`, and `id` parameters. Otherwise, the URL will be `null`. The `refreshInterval` option is set to 5 minutes to refresh the data periodically.
-
-Finally, if the data is successfully retrieved and contains a `current_price` property, the function returns the `current_price`. Otherwise, it returns `null`.
-
-This function can be used in a larger project to display the current price of a cryptocurrency in a user interface. For example, it could be used in a dashboard that displays real-time cryptocurrency prices. Here is an example usage of the function:
-
-```
-import useCurrentPrice from './useCurrentPrice'
-
-function CryptoPrice({ symbol }) {
- const price = useCurrentPrice('USD', symbol)
- return Shopping Cart
--
- {data.items.map((item) => (
-
- - {item.name} - {item.price} - - - ))} -
Total: {data.total}
- -{symbol}: {price}
-}
-
-function CryptoDashboard() {
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
- This code is a function that retrieves current prices for cryptocurrencies using the CoinGecko API and returns the price of the first coin in the response data.
-
-2. What parameters does the function take?
- The function takes three optional parameters: `vs_currency` (a string representing the currency to convert the price to), `symbols` (a string or comma-separated list of cryptocurrency symbols), and `id` (a string representing the cryptocurrency ID).
-
-3. What is the role of the `useSWR` hook in this code?
- The `useSWR` hook is used to fetch data from the CoinGecko API and cache the response. It takes a URL as its first argument and an options object as its third argument, which includes a `refreshInterval` property that determines how often the data should be refreshed.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useCollectionActivity.md b/.autodoc/docs/markdown/ui/src/hooks/useCollectionActivity.md
deleted file mode 100644
index 8d710a520..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useCollectionActivity.md
+++ /dev/null
@@ -1,46 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useCollectionActivity.ts)
-
-This code exports a function that retrieves collection activity data from a Reservoir API endpoint. The function takes in three optional parameters: `options`, `swrOptions`, and `chainId`.
-
-`options` is an object that contains query parameters for the API request. If `options` is not provided or does not contain any of the required parameters (`collection`, `collectionsSetId`, or `community`), the function returns null. Otherwise, the function constructs a URL for the API request using the `baseApiUrl` property of the Reservoir client and the provided query parameters.
-
-`swrOptions` is an object that contains configuration options for the SWR library, which is used to handle caching and revalidation of the API response. By default, the function revalidates the API response on mount and does not revalidate the first page.
-
-`chainId` is an optional parameter that specifies the ID of the Reservoir chain to use for the API request. If `chainId` is provided, the function searches for the corresponding chain in the Reservoir client's `chains` array. Otherwise, the function uses the current chain of the Reservoir client.
-
-The function then calls the `useInfiniteApi` hook from the `./` module, passing in a callback function that constructs the API request URL and returns an array containing the URL, Reservoir API key, and client version. The `useInfiniteApi` hook handles fetching and caching the API response, and returns an object containing the response data and metadata.
-
-Finally, the function extracts the `activities` array from the response data and returns an object containing the `activities` array and the response metadata.
-
-This function can be used to retrieve collection activity data from a Reservoir API endpoint in a React application. For example, the function could be called in a `useEffect` hook to fetch and display the collection activity data when a component mounts.
-
-Example usage:
-
-```
-import useCollectionActivity from './useCollectionActivity'
-
-function CollectionActivity() {
- const { data, error } = useCollectionActivity({ collection: 'myCollection' })
-
- if (error) {
- return Error: {error.message}
- }
-
- return (
- -
- {data.map(activity => (
-
- {activity.title} - ))} -
Error: {error.message}
- if (!data) return Loading...
-
- return (
-
- {data.map(collection => (
-
- )
-}
-```
-## Questions:
- 1. What does this code do?
-- This code exports a function that retrieves collections data from a Reservoir API endpoint using SWR and returns it in a paginated format.
-
-2. What are the parameters of the exported function and what do they do?
-- The function takes in three optional parameters: `options`, `swrOptions`, and `chainId`. `options` is an object that contains query parameters for the API request. `swrOptions` is an object that contains options for the SWR hook. `chainId` is an optional parameter that specifies the ID of the chain to use for the API request.
-
-3. What is the purpose of the `useInfiniteApi` and `useReservoirClient` hooks?
-- The `useInfiniteApi` hook is used to fetch data from the Reservoir API endpoint in a paginated format. The `useReservoirClient` hook is used to retrieve the Reservoir client instance, which is used to get the base API URL and API key for the API request.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useCopyToClipboard.md b/.autodoc/docs/markdown/ui/src/hooks/useCopyToClipboard.md
deleted file mode 100644
index 2451db5e6..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useCopyToClipboard.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useCopyToClipboard.ts)
-
-The code above defines a custom React hook called `useCopyToClipboard`. This hook is designed to allow users to copy text to their clipboard and provides a visual cue to indicate that the copy was successful.
-
-The hook takes an optional parameter called `successTime` which is set to 1000 milliseconds (1 second) by default. This parameter determines how long the visual cue indicating a successful copy will be displayed.
-
-The hook uses the `useState` hook from React to create a state variable called `copied` which is initially set to `false`. The `copy` function is defined within the hook and takes an optional parameter called `content` which is the text to be copied to the clipboard.
-
-The `copy` function uses the `navigator.clipboard.writeText` method to write the `content` to the clipboard. If the `copied` state variable is `false`, the `setCopied` function is called to update the state variable to `true`. A `setTimeout` function is then used to set the `copied` state variable back to `false` after the `successTime` has elapsed.
-
-The `useCopyToClipboard` hook returns an object with two properties: `copy` and `copied`. The `copy` property is a reference to the `copy` function defined within the hook. The `copied` property is a boolean value that indicates whether or not the text has been successfully copied to the clipboard.
-
-This hook can be used in a larger project to provide users with an easy way to copy text to their clipboard. For example, it could be used in a form where users need to copy a generated password or a shareable link.
-
-Here is an example of how the `useCopyToClipboard` hook could be used in a React component:
-
-```
-import React from 'react'
-import useCopyToClipboard from './useCopyToClipboard'
-
-const MyComponent = () => {
- const { copy, copied } = useCopyToClipboard()
-
- const handleCopy = () => {
- copy('Text to be copied to clipboard')
- }
-
- return (
- {collection.name}
- ))}
-
-
-
- {copied &&
- )
-}
-
-export default MyComponent
-```
-
-In this example, the `useCopyToClipboard` hook is called and the `copy` function is passed the text to be copied to the clipboard. The `copied` state variable is used to conditionally render a message indicating that the text has been successfully copied to the clipboard.
-## Questions:
- 1. What does this code do?
- This code exports a custom hook called `useCopyToClipboard` that allows users to copy content to their clipboard and sets a `copied` state to true for a specified amount of time.
-
-2. What is the purpose of the `successTime` parameter?
- The `successTime` parameter is an optional parameter that specifies the amount of time in milliseconds that the `copied` state should remain true after content has been successfully copied to the clipboard.
-
-3. What is the purpose of the `useState` hook?
- The `useState` hook is used to create a state variable called `copied` that is initially set to `false`. This state variable is used to determine whether or not content has been successfully copied to the clipboard and to set the `copied` property of the returned object.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useDynamicTokens.md b/.autodoc/docs/markdown/ui/src/hooks/useDynamicTokens.md
deleted file mode 100644
index 0662e4859..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useDynamicTokens.md
+++ /dev/null
@@ -1,45 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useDynamicTokens.ts)
-
-The code is a function that returns a modified version of the `useTokens` hook from the `./` module. The `useTokens` hook is used to fetch token data from a remote API and return it to the calling component. The modified version of the hook adds dynamic pricing information to the token data based on the contents of the user's shopping cart.
-
-The function takes three optional parameters: `options`, `swrOptions`, and `chainId`. `options` is an object that can be used to configure the behavior of the `useTokens` hook. `swrOptions` is an object that can be used to configure the behavior of the `swr` library, which is used by the `useTokens` hook to cache the token data. `chainId` is an optional parameter that specifies the ID of the blockchain network to use when fetching token data.
-
-The function first calls the original `useTokens` hook to fetch the token data. It then uses the `useCart` hook to fetch the user's shopping cart data. The shopping cart data is used to modify the token data in two ways: first, it adds an `isInCart` property to each token object that indicates whether the token is already in the user's cart; second, it modifies the `floorAsk` price of each token object to reflect the user's position in any dynamic pricing pools that the token is a part of.
-
-The modified token data is returned to the calling component along with the original `useTokens` hook's return values and the `useCart` hook's cart actions. The calling component can use this data to display token information to the user and allow them to add or remove tokens from their cart.
-
-Here is an example of how the modified `useTokens` hook might be used in a larger project:
-
-```jsx
-import useDynamicTokens from './zoo'
-
-function TokenList() {
- const { data: tokens, addToCart } = useDynamicTokens()
-
- return (
- Text copied to clipboard!
} --
- {tokens.map((token) => (
-
-
-
{token.name}
-{token.description}
-Price: {token.market.floorAsk.price.amount}
- {token.isInCart ? ( - - ) : ( - - )} -
- ))}
-
-
- )
-}
-
-export default MyComponent
-```
-
-In the example above, `MyComponent` takes an `initialCount` prop that is used as the default value for the state. `useFallbackState` is used to create the state value, and `setCount` is used to update the state when the button is clicked.
-
-Overall, `useFallbackState` is a simple but useful hook that can help ensure that a component always has a valid state value to work with.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom React hook called `useFallbackState` that can be used to set and manage state in a component.
-
-2. What is the `useStateType` type used for?
- The `useStateType` type is used to define the type of the state that is managed by the `useFallbackState` hook. It is a tuple that contains the current state value and a function to update the state.
-
-3. How does the `useFallbackState` hook work?
- The `useFallbackState` hook takes in a default value and an optional `useStateType` tuple. If the `useStateType` tuple is provided, it is returned as is. Otherwise, the hook initializes a new state using the default value and returns it. This allows components to use a fallback state if a custom state is not provided.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useInfiniteApi.md b/.autodoc/docs/markdown/ui/src/hooks/useInfiniteApi.md
deleted file mode 100644
index b8fb76085..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useInfiniteApi.md
+++ /dev/null
@@ -1,67 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useInfiniteApi.ts)
-
-This code exports a custom hook that uses the `useSWRInfinite` hook from the `swr` library to fetch data in a paginated manner. The hook takes in three arguments: `getKey`, `options`, and `limit`.
-
-`getKey` is a function that takes in two arguments: `pageIndex` and `previousPageData`. It returns an array of parameters that will be used to fetch the data for the current page. `pageIndex` is the index of the current page, starting from 0. `previousPageData` is an array of the data from the previous page.
-
-`options` is an object that contains configuration options for the `useSWRInfinite` hook.
-
-`limit` is an optional argument that specifies the maximum number of items to fetch per page.
-
-The hook returns an object that contains the same properties as the `useSWRInfinite` hook, as well as additional properties: `hasNextPage`, `isFetchingInitialData`, `isFetchingPage`, `resetCache`, and `fetchNextPage`.
-
-`hasNextPage` is a boolean that indicates whether there are more pages to fetch. It is determined by checking if the current page has the maximum number of items specified by `limit`, or if the current page has a continuation token.
-
-`isFetchingInitialData` is a boolean that indicates whether the initial data is being fetched.
-
-`isFetchingPage` is a boolean that indicates whether the current page is being fetched.
-
-`resetCache` is a function that resets the cache and clears the list of fetched keys.
-
-`fetchNextPage` is a function that fetches the next page of data. It can only be called if `hasNextPage` is true and `isFetchingPage` is false.
-
-This hook can be used in a larger project to fetch data in a paginated manner and display it to the user. For example, it can be used to fetch a list of items from an API and display them in a table with pagination.
-
-Example usage:
-
-```
-import usePaginatedData from './usePaginatedData'
-
-function MyComponent() {
- const { data, error, hasNextPage, isFetchingInitialData, isFetchingPage, fetchNextPage, resetCache } = usePaginatedData(
- (pageIndex, previousPageData) => {
- // return an array of parameters to fetch the data for the current page
- },
- {
- // configuration options for the useSWRInfinite hook
- },
- 10 // fetch 10 items per page
- )
-
- if (error) return Count: {count}
- -Error
- if (!data) return Loading...
-
- return (
-
- {data.map(item => (
- // render each item
- ))}
- {hasNextPage && (
-
- )}
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `useSWRInfinite` hook and how is it used in this code?
-- The `useSWRInfinite` hook is used to fetch data in a paginated manner. It takes a function that returns the data for a given page index and previous page data, and returns an object with properties like `data`, `error`, `size`, `setSize`, etc.
-
-2. What is the significance of the `limit` parameter in the function signature?
-- The `limit` parameter is an optional parameter that specifies the maximum number of items to be returned per page. It is used to determine whether there are more pages to fetch based on the length of the collections array in the last page of data.
-
-3. What is the purpose of the `resetCache` function and how is it used?
-- The `resetCache` function is used to reset the cache of the `useSWRInfinite` hook and clear the list of keys that have been fetched so far. It is called when the user wants to start fetching data from the beginning, and it returns a promise that resolves when the cache has been reset.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useListingPreapprovalCheck.md b/.autodoc/docs/markdown/ui/src/hooks/useListingPreapprovalCheck.md
deleted file mode 100644
index bc4ee21d7..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useListingPreapprovalCheck.md
+++ /dev/null
@@ -1,49 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useListingPreapprovalCheck.ts)
-
-The code is a React hook that lists a token on multiple marketplaces. It takes in an array of `Marketplace` objects, a `tokenId` string, and a `collectionId` string as arguments. The `Marketplace` object has an `orderbook` property and an `orderKind` property. The `tokenId` and `collectionId` are used to create a token string.
-
-The hook uses the `useEffect` hook to listen for changes in the `client`, `signer`, `tokenId`, `collectionId`, and `marketplaces` variables. If all of these variables are defined and the `marketplaces` array is not empty, the hook creates an array of `Listings` objects using the `marketplaces` array. Each `Listing` object has a `token` property that is set to the token string created from the `tokenId` and `collectionId` arguments, a `weiPrice` property that is set to a fixed value of 100000000000000000, an `orderbook` property that is set to the `orderbook` property of the corresponding `Marketplace` object, and an `orderKind` property that is set to the `orderKind` property of the corresponding `Marketplace` object.
-
-The hook then calls the `listToken` method of the `client.actions` object with the `listings` array, `signer`, and `precheck` set to `true`. The `listToken` method returns a promise that resolves to an array of `Execute` objects. The hook then searches for the first `Execute` object that has a `kind` property set to `'transaction'` and an `items` property that is not empty. If such an object is found, the hook sets the `unapprovedMarketplaces` state to an array of `Marketplace` objects that have not been approved for listing on the corresponding marketplaces. The hook then sets the `isFetching` state to `false`. If no such object is found, the hook checks if the `unapprovedMarketplaces` state is not empty and sets it to an empty array if it is not. The hook then sets the `isFetching` state to `false`.
-
-If any of the `client`, `signer`, `tokenId`, `collectionId`, or `marketplaces` variables change and the `unapprovedMarketplaces` state is not empty, the hook sets the `unapprovedMarketplaces` state to an empty array.
-
-The hook returns an object with a `data` property set to the `unapprovedMarketplaces` state and an `isFetching` property set to the `isFetching` state.
-
-This hook can be used in a larger project to list a token on multiple marketplaces and keep track of the marketplaces that have not been approved for listing. The `unapprovedMarketplaces` state can be used to display a list of marketplaces that need approval, and the `isFetching` state can be used to display a loading spinner while the token is being listed.
-
-Example usage:
-
-```
-import useListToken from './useListToken'
-import { marketplaces } from './marketplaces'
-
-function MyComponent({ tokenId, collectionId }) {
- const { data: unapprovedMarketplaces, isFetching } = useListToken(marketplaces, tokenId, collectionId)
-
- return (
-
- {isFetching &&
- )
-}
-```
-## Questions:
- 1. What does this code do?
-The code exports a function that takes in an array of marketplaces, a tokenId, and a collectionId as arguments. It then uses these arguments to create listings and list a token on the marketplaces. The function returns an object with the unapproved marketplaces and a boolean indicating whether the function is currently fetching data.
-
-2. What external dependencies does this code rely on?
-The code relies on several external dependencies, including React, a custom hook called useReservoirClient, a custom type called Marketplace, a custom type called Listings, a custom hook called useSigner, and a library called @reservoir0x/reservoir-sdk.
-
-3. What is the purpose of the useEffect hook in this code?
-The useEffect hook is used to trigger the listing of a token on the marketplaces when certain dependencies change. These dependencies include the signer, the client, the tokenId, the collectionId, and the marketplaces array. When these dependencies change, the useEffect hook creates listings for the token on each marketplace and then lists the token on the marketplaces. The hook also sets the unapprovedMarketplaces state based on the response from the listing API.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useListings.md b/.autodoc/docs/markdown/ui/src/hooks/useListings.md
deleted file mode 100644
index cd79e237a..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useListings.md
+++ /dev/null
@@ -1,25 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useListings.ts)
-
-This code exports a function that retrieves a list of asks (sell orders) from a Reservoir API endpoint. The function takes in three parameters: `options`, `swrOptions`, and `enabled`, as well as an optional `chainId`.
-
-`options` is an object that contains query parameters to be sent with the API request. `swrOptions` is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. `enabled` is a boolean that determines whether the API request should be made or not. `chainId` is an optional parameter that specifies which blockchain network to make the API request on.
-
-The function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines which blockchain network to make the API request on based on the `chainId` parameter. If `chainId` is not specified, it defaults to the current chain of the Reservoir client.
-
-The function then uses the `useInfiniteApi` hook to make the API request. This hook takes in a function that generates the API request URL and returns an array containing the URL, API key, and client version. The function also handles pagination by passing in a `pageIndex` parameter and `previousPageData` object. If pagination is not enabled or there is no more data to fetch, the function returns null.
-
-The API response is then flattened and the `orders` property of each page is extracted into a single array of listings. This array is returned along with the SWR response object.
-
-This function can be used to retrieve a list of asks from the Reservoir API and display them in a UI component. The `options` parameter can be used to filter the results based on various criteria, such as token ID or price. The `swrOptions` parameter can be used to customize the caching and revalidation behavior of the response. The `enabled` parameter can be used to conditionally fetch data based on user input or other factors. The `chainId` parameter can be used to fetch data from a specific blockchain network.
-## Questions:
- 1. What is the purpose of the `useReservoirClient` function and how is it used in this code?
-- A smart developer might ask what the `useReservoirClient` function does and how it is used in this code.
-- `useReservoirClient` is a custom hook that returns a client object with methods for interacting with a Reservoir API. It is used to retrieve the current chain and base API URL for the client.
-
-2. What is the `useInfiniteApi` function and how is it used in this code?
-- A smart developer might ask what the `useInfiniteApi` function does and how it is used in this code.
-- `useInfiniteApi` is a custom hook that fetches data from an API endpoint using SWR (React's data fetching library). It is used to fetch data for the `Asks` type and `AsksQuery` type.
-
-3. What is the purpose of the `listings` variable and how is it generated?
-- A smart developer might ask what the `listings` variable is used for and how it is generated.
-- `listings` is an array of orders retrieved from the API endpoint. It is generated by flattening the `orders` array from each page of data returned by the `useInfiniteApi` hook. If there is no data, it defaults to an empty array.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useMarketplaces.md b/.autodoc/docs/markdown/ui/src/hooks/useMarketplaces.md
deleted file mode 100644
index dad64db4a..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useMarketplaces.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useMarketplaces.ts)
-
-The code is a React hook that fetches and processes data about marketplaces that support a given collection. The hook takes in four optional parameters: `collectionId`, `listingEnabledOnly`, `royaltyBps`, and `chainId`. It returns a tuple containing an array of `Marketplace` objects and a function to update that array.
-
-The `Marketplace` type is defined as an intersection of the first element of the `marketplaces` array in the response schema and an object with three additional properties: `isSelected`, `price`, and `truePrice`. The `isSelected` property is a boolean that indicates whether the marketplace is currently selected. The `price` and `truePrice` properties are numbers or strings that represent the price of the item in the marketplace and the true price after fees, respectively. The `fee` property is an object with two properties: `bps` and `percent`, which represent the fee in basis points and percentage, respectively.
-
-The hook uses the `useReservoirClient` hook from another file to get a client object that contains information about the Reservoir API. It then uses the `useSWR` hook to fetch data about the supported marketplaces for the given collection. If `collectionId` is not provided, the hook returns an empty array.
-
-Once the data is fetched, the hook processes it by filtering out marketplaces that do not have listing enabled or have an orderbook of 'x2y2' (an internal Reservoir orderbook). It then updates the `Marketplace` objects in the array by setting their `price`, `truePrice`, and `isSelected` properties, and calculating their fees based on the orderbook and `royaltyBps` parameters. If the orderbook is 'reservoir', the hook also sets the `name`, `domain`, and `imageUrl` properties based on local data obtained from the `getLocalMarketplaceData` function.
-
-Finally, the hook returns the updated `marketplaces` array and a function to update it. This hook can be used in a larger project to display a list of marketplaces that support a given collection and allow the user to select a marketplace to purchase the item. The `listingEnabledOnly` parameter can be used to filter out marketplaces that do not have listing enabled, and the `royaltyBps` parameter can be used to calculate the fees for marketplaces that use the OpenSea orderbook. The `chainId` parameter can be used to specify the chain to use for fetching the data.
-## Questions:
- 1. What is the purpose of the `useSWR` hook and how is it used in this code?
-- The `useSWR` hook is used for data fetching and caching. It takes a key and a fetcher function as arguments, and returns the data and a revalidation function. In this code, it is used to fetch data from a supported marketplaces API endpoint for a given collection.
-
-2. What is the significance of the `Marketplace` type and how is it used in this code?
-- The `Marketplace` type is a custom type that extends a schema from the `@reservoir0x/reservoir-sdk` library. It adds additional properties such as `isSelected`, `price`, `truePrice`, and `fee`. It is used to define the shape of the data returned from the API endpoint and to manipulate and update the data in the `useEffect` hook.
-
-3. What is the purpose of the `getLocalMarketplaceData` function and how is it used in this code?
-- The `getLocalMarketplaceData` function is a custom function that retrieves data from a local JSON file. It is used to update the `name`, `domain`, `fee`, and `imageUrl` properties of a `Marketplace` object if the `orderbook` property is equal to `'reservoir'`. This allows for customization of the marketplace data based on the local environment.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useMediaQuery.md b/.autodoc/docs/markdown/ui/src/hooks/useMediaQuery.md
deleted file mode 100644
index a16bccaa6..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useMediaQuery.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useMediaQuery.ts)
-
-The code defines a custom React hook called `useMediaQuery` that allows developers to check if a given CSS media query matches the current viewport. The hook takes a single argument, `query`, which is a string representing the media query to be evaluated.
-
-The hook uses the `useState` and `useEffect` hooks from React to manage state and side effects. The `useState` hook initializes a boolean value `matches` to `false`. The `useEffect` hook is used to subscribe to changes in the media query and update the `matches` state accordingly.
-
-Inside the `useEffect` hook, the `window.matchMedia` method is used to create a new `MediaQueryList` object that represents the given `query`. The `matches` property of the `MediaQueryList` object is then compared to the current value of `matches` state. If they are different, the `setMatches` function is called to update the state.
-
-A listener function is also defined that updates the `matches` state whenever the `change` event is fired on the `MediaQueryList` object. This listener is added to the `MediaQueryList` object using the `addEventListener` method. Finally, the `useEffect` hook returns a cleanup function that removes the listener using the `removeEventListener` method.
-
-The `useMediaQuery` hook is intended to be used in other React components to conditionally render content based on the result of the media query. For example, a component could use the hook to determine if the viewport is wide enough to display a sidebar, and only render the sidebar if the media query matches.
-
-Here is an example usage of the `useMediaQuery` hook:
-
-```
-import useMediaQuery from './useMediaQuery'
-
-const MyComponent = () => {
- const isWide = useMediaQuery('(min-width: 768px)')
-
- return (
-
-
- )}
- Unapproved Marketplaces:
--
- {unapprovedMarketplaces.map((marketplace) => (
-
- {marketplace.name} - ))} -
- {isWide ?
- )
-}
-```
-
-In this example, the `MyComponent` component uses the `useMediaQuery` hook to check if the viewport width is at least 768 pixels. If it is, the `Sidebar` component is rendered, otherwise it is not. The `Content` component is always rendered.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom React hook called `useMediaQuery` that returns a boolean value indicating whether a given media query matches the current viewport.
-
-2. How does this code handle changes to the media query?
- The code sets up a listener for changes to the media query using `addEventListener` and updates the `matches` state using `setMatches` whenever the query matches change.
-
-3. What dependencies does this code have?
- This code imports `useEffect` and `useState` from the `react` library, indicating that it is intended to be used within a React application.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useModelViewer.md b/.autodoc/docs/markdown/ui/src/hooks/useModelViewer.md
deleted file mode 100644
index d289369cf..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useModelViewer.md
+++ /dev/null
@@ -1,46 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useModelViewer.ts)
-
-This code defines a custom React hook called `useModelViewer` that enables the use of the Google Model Viewer library in a React application. The hook takes a boolean `enabled` parameter that determines whether or not to enable the Model Viewer functionality.
-
-The `useEffect` hook is used to manage the lifecycle of the Model Viewer library. When the `enabled` parameter is true and the `modelViewerInjected` flag is false, the `importScript` function is called to dynamically load the Model Viewer library from the specified URL. The `importScript` function creates a new `script` element and appends it to the `body` of the HTML document.
-
-The `importScript` function checks for the existence of the `document` object before creating the `script` element to avoid errors in non-browser environments. The `script` element is set to load asynchronously and its `type` attribute is set to `'module'` to indicate that it is an ES6 module.
-
-Once the Model Viewer library is loaded, the `modelViewerInjected` flag is set to true to prevent unnecessary re-loading of the library. The `useEffect` hook is dependent on the `enabled` parameter, so any changes to this parameter will trigger the hook to re-run and potentially load or unload the Model Viewer library.
-
-This hook can be used in a larger React project to enable the display of 3D models using the Google Model Viewer library. For example, a product catalog website could use this hook to display interactive 3D models of products to customers.
-
-Example usage:
-
-```
-import React, { useState } from 'react'
-import useModelViewer from './useModelViewer'
-
-const ProductDetail = ({ product }) => {
- const [modelViewerEnabled, setModelViewerEnabled] = useState(false)
- useModelViewer(modelViewerEnabled)
-
- return (
-
-
- )
-}
-```
-
-In this example, the `useModelViewer` hook is used to enable or disable the Model Viewer library based on the state of the `modelViewerEnabled` variable. When the user clicks the button, the `modelViewerEnabled` state is toggled and the Model Viewer library is either loaded or unloaded. If the library is enabled, a `model-viewer` element is rendered with the URL of the 3D model and alt text.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom React hook called `useModelViewer` that conditionally injects a script for the Google Model Viewer library into the document if the hook is enabled.
-
-2. What is the significance of the `modelViewerInjected` variable?
- The `modelViewerInjected` variable is used to ensure that the script for the Google Model Viewer library is only injected once, even if the `useModelViewer` hook is called multiple times.
-
-3. What is the `importScript` function doing?
- The `importScript` function creates a new `script` element with the specified `src` URL and appends it to the `body` of the document. The `type` attribute is set to `'module'` to indicate that the script is a JavaScript module.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useMutationObservable.md b/.autodoc/docs/markdown/ui/src/hooks/useMutationObservable.md
deleted file mode 100644
index 4628f950b..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useMutationObservable.md
+++ /dev/null
@@ -1,46 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useMutationObservable.ts)
-
-The code above defines a custom React hook called `useMutationObservable`. This hook is used to observe changes to a specified DOM element and execute a callback function when a change occurs.
-
-The hook takes three arguments: `callback`, `el`, and `options`. The `callback` argument is a function that will be executed when a mutation occurs. The `el` argument is an optional parameter that specifies the DOM element to observe. The `options` argument is also optional and is used to configure the `MutationObserver` instance that will be created.
-
-The hook uses the `useState` and `useEffect` hooks from React. The `useState` hook is used to store the `MutationObserver` instance, while the `useEffect` hook is used to create and manage the `MutationObserver` instance.
-
-When the hook is called, it first checks if the `observer` state variable is already set. If it is, the existing observer is disconnected. This is done to ensure that only one observer is active at a time.
-
-Next, the hook checks if the `el` argument is defined and if the `MutationObserver` API is available in the current environment. If either of these conditions is not met, the hook returns early and does not create an observer.
-
-If the `el` argument is defined and the `MutationObserver` API is available, a new `MutationObserver` instance is created with the specified `callback` function and `options`. The observer is then attached to the specified `el` element using the `observe` method. Finally, the observer instance is stored in the `observer` state variable using the `setObserver` function.
-
-The `useEffect` hook also returns a cleanup function that is used to disconnect the observer when the component using the hook is unmounted.
-
-This hook can be used in a larger project to monitor changes to specific DOM elements and trigger actions based on those changes. For example, it could be used to detect changes to a form input and update the state of a parent component accordingly. Here is an example usage of the hook:
-
-```
-import useMutationObservable from './useMutationObservable'
-
-const MyComponent = () => {
- const [value, setValue] = useState('')
-
- const handleMutation = () => {
- // Update state based on mutation
- }
-
- const inputRef = useRef(null)
-
- useMutationObservable(handleMutation, inputRef.current, { attributes: true })
-
- return (
- setValue(e.target.value)} ref={inputRef} />
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom React hook called `useMutationObservable` which sets up a `MutationObserver` to watch for changes to a specified DOM element and calls a callback function when changes occur.
-
-2. What arguments does the `useMutationObservable` function take?
- The `useMutationObservable` function takes three optional arguments: a `MutationCallback` function to be called when changes occur, an optional `HTMLElement` to observe for changes, and optional `MutationObserverInit` options to configure the observer.
-
-3. What does the `useEffect` hook do in this code?
- The `useEffect` hook sets up and tears down the `MutationObserver` based on changes to the `el`, `callback`, and `options` inputs. It also returns a cleanup function to disconnect the observer when the component unmounts.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useOnChainRoyalties.md b/.autodoc/docs/markdown/ui/src/hooks/useOnChainRoyalties.md
deleted file mode 100644
index 18907e81d..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useOnChainRoyalties.md
+++ /dev/null
@@ -1,49 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useOnChainRoyalties.ts)
-
-The code is a React hook that retrieves royalty information for a given NFT (non-fungible token) from the Manifold smart contract. The hook takes in several props, including the contract address, token ID, value, and chain ID.
-
-The code first imports necessary dependencies, including the `wagmi` library for interacting with Ethereum, `ethers` for working with Ethereum data types, and a custom hook called `useChainCurrency` for retrieving the currency used on the specified blockchain.
-
-The `MANIFOLD_ABI` constant defines the ABI (application binary interface) for the Manifold smart contract, which includes a single function called `getRoyaltyView`. This function takes in the token address, token ID, and value, and returns two arrays: one containing the addresses of the royalty recipients, and another containing the corresponding amounts of royalties to be paid to each recipient.
-
-The hook then determines the correct Manifold contract address based on the specified chain ID, and retrieves the currency used on the blockchain using the `useChainCurrency` hook. If a value is not provided, the default value of 1 is used.
-
-Finally, the hook calls the `useContractRead` hook from the `wagmi` library, passing in the necessary arguments to retrieve the royalty information from the Manifold contract. The `enabled` prop is used to determine whether the hook should be executed, based on whether all required props are present. The `cacheTime` prop specifies how long the result should be cached before being refreshed.
-
-This hook can be used in a larger project to display royalty information for a given NFT, such as the percentage of royalties that will be paid to each recipient. An example usage of this hook might look like:
-
-```
-import useRoyaltyInfo from './useRoyaltyInfo'
-
-function NFTDetails({ contract, tokenId }) {
- const royaltyInfo = useRoyaltyInfo({ contract, tokenId, enabled: true })
-
- return (
- {product.name}
- - {modelViewerEnabled && ( -
-
- )
-}
-```
-
-This component would display the royalty information for the specified NFT, including the addresses of the royalty recipients and the corresponding percentages of royalties to be paid to each recipient.
-## Questions:
- 1. What is the purpose of this code?
-- This code is a React hook that reads data from a smart contract on the Ethereum blockchain. Specifically, it retrieves royalty information for a given NFT (non-fungible token) and returns the recipients and amounts of the royalties.
-
-2. What external dependencies does this code have?
-- This code imports several modules from the 'wagmi' and 'ethers' libraries, as well as a custom hook called 'useChainCurrency' from a local file. It also relies on the Ethereum blockchain to retrieve data from a smart contract.
-
-3. What are the possible values for the 'chainId' parameter?
-- The 'chainId' parameter is an integer that specifies which Ethereum network to interact with. The possible values are 1 (mainnet), 5 (goerli testnet), and 137 (Polygon/Matic network).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useOwnerListings.md b/.autodoc/docs/markdown/ui/src/hooks/useOwnerListings.md
deleted file mode 100644
index 88d9ec576..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useOwnerListings.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useOwnerListings.ts)
-
-The code in this file is a function that exports a hook for retrieving listings from a decentralized exchange. The function takes in three optional parameters: a query object, SWR configuration options, and a chain ID.
-
-The function first imports the `useListings` hook from another file in the same directory and the `useAccount` hook from the `wagmi` library. It also imports the `paths` object from the `@reservoir0x/reservoir-sdk` library and the `SWRConfiguration` type from the `swr` library.
-
-The function then defines a `queryOptions` object with a `maker` property set to the user's address retrieved from the `useAccount` hook. If a `query` parameter is passed in, the function merges it with the `queryOptions` object using the spread operator.
-
-Finally, the function returns the result of calling the `useListings` hook with the `queryOptions`, `swrOptions`, and a boolean indicating whether the user's address is defined. The `chainId` parameter is also passed to the `useListings` hook.
-
-This hook can be used in a larger project to retrieve listings from a decentralized exchange and display them to the user. Here is an example of how the hook can be used:
-
-```
-import useExchangeListings from './useExchangeListings'
-
-function ExchangeListings() {
- const { data, error } = useExchangeListings()
-
- if (error) return Royalty Information
- {royaltyInfo.loading &&Loading...
} - {royaltyInfo.error &&Error: {royaltyInfo.error.message}
} - {royaltyInfo.data && ( --
- {royaltyInfo.data.recipients.map((recipient, i) => (
-
- - {recipient}: {royaltyInfo.data.amounts[i]}% - - ))} -
Error: {error.message}
- if (!data) return Loading...
-
- return (
- -
- {data.map(listing => (
-
- {listing.name} - ))} -
-
- )
-}
-
-export default Post
-```
-
-In this example, the `TimeSince` component is used to display the time elapsed since the post was made. The `timestamp` prop is passed to the component to calculate the relative time.
-## Questions:
- 1. What does this code do?
- This code exports a function that takes in a timestamp and returns a string representing the time since that timestamp in relative time (e.g. "2 hours ago").
-
-2. What libraries are being used in this code?
- This code imports two libraries: `react` and `dayjs`. It also imports a specific plugin from `dayjs` called `relativeTime`.
-
-3. What is the purpose of the `useEffect` hook in this code?
- The `useEffect` hook is used to update the `timeSince` state variable whenever the `timestamp` prop changes. If `timestamp` is not provided, `timeSince` is set to an empty string.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useTokenActivity.md b/.autodoc/docs/markdown/ui/src/hooks/useTokenActivity.md
deleted file mode 100644
index e12e221b7..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useTokenActivity.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useTokenActivity.ts)
-
-This code exports a function that retrieves activity data for a given token from a Reservoir API endpoint. The function takes in a token string, an optional query object, SWRInfiniteConfiguration options, and an optional chainId number.
-
-The function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines the chain to use based on the provided chainId or the current chain of the client.
-
-The function then uses the `useInfiniteApi` hook from the `./` module to fetch the activity data. This hook takes in a function that generates the URL and parameters for the API request based on the current page index and previous page data. The function also sets the API key and version from the client. The `useInfiniteApi` hook returns an object with the response data and methods for fetching additional pages of data.
-
-The function then flattens the activity data from the response into a single array and returns an object that includes the response object and the flattened activity data.
-
-This function can be used to retrieve activity data for a specific token in a Reservoir API. The optional query object can be used to filter the results. The SWRInfiniteConfiguration options can be used to configure the caching behavior of the `useInfiniteApi` hook. The chainId parameter can be used to specify a specific chain to use for the API request.
-
-Example usage:
-
-```
-import useTokenActivity from './useTokenActivity'
-
-function MyComponent() {
- const { data, error, size, setSize } = useTokenActivity('myToken')
-
- if (error) return Posted {
This is a post
-Error: {error.message}
- if (!data) return Loading...
-
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `useInfiniteApi` hook being used in this code?
-- The `useInfiniteApi` hook is being used to fetch data from an API endpoint in a paginated manner, allowing for infinite scrolling.
-
-2. What is the significance of the `TokenActivityQuery` and `TokenActivityResponse` types?
-- The `TokenActivityQuery` and `TokenActivityResponse` types are used to define the structure of the query parameters and response data for the `/tokens/{token}/activity/v4` endpoint.
-
-3. What is the purpose of the `setParams` function being used in this code?
-- The `setParams` function is being used to set the query parameters for the API endpoint URL based on the `TokenActivityQuery` object, which is then used to fetch the data.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useTokenOpensea.md b/.autodoc/docs/markdown/ui/src/hooks/useTokenOpensea.md
deleted file mode 100644
index a32b2ed95..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useTokenOpensea.md
+++ /dev/null
@@ -1,50 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useTokenOpensea.ts)
-
-The code is a TypeScript module that exports a function that fetches data from the OpenSea API using the useSWR library. The function takes in three parameters: `contract`, `tokenId`, and `swrOptions`. `contract` is a string that represents the contract address of the token, `tokenId` is a number or string that represents the ID of the token, and `swrOptions` is an optional object that contains configuration options for the useSWR hook.
-
-The function constructs a URL using the `contract` and `tokenId` parameters and passes it to the useSWR hook as a key. The useSWR hook fetches the data from the OpenSea API using the provided URL and returns an object that contains the response data, a `mutate` function to update the data, an `error` object if there was an error fetching the data, and a boolean `isValidating` flag that indicates whether the hook is currently fetching data.
-
-The response data is of type `OpenSeaTokenResponse`, which is an object that contains information about the token, including whether it supports the Wyvern protocol and information about the payment tokens associated with the token's collection.
-
-This function can be used in the larger project to fetch data about tokens from the OpenSea API. For example, if the project has a feature that displays information about a specific token, this function can be used to fetch the data for that token and display it to the user. Here is an example of how the function can be used:
-
-```
-import useOpenSeaToken from './path/to/openSeaToken'
-
-function TokenDetails({ contract, tokenId }) {
- const { response, error, isValidating } = useOpenSeaToken(contract, tokenId)
-
- if (error) {
- return -
- {data.map((activity) => (
-
- {activity.description} - ))} -
Error fetching token data
- }
-
- if (isValidating) {
- return Loading token data...
- }
-
- return (
-
-
- )
-}
-```
-
-This example component uses the `useOpenSeaToken` function to fetch data about a token with the specified `contract` and `tokenId`. It displays the name and description of the token's collection, as well as a list of the payment tokens associated with the collection. If there is an error fetching the data, it displays an error message, and if the data is still being fetched, it displays a loading message.
-## Questions:
- 1. What is the purpose of this code?
- This code is a function that fetches data from the OpenSea API for a given contract and token ID using the `useSWR` hook.
-
-2. What is the expected input for this function?
- The function takes in two optional parameters: `contract` (a string representing the contract address) and `tokenId` (a number or string representing the token ID). It also takes in an optional `swrOptions` object for configuring the `useSWR` hook.
-
-3. What is the expected output of this function?
- The function returns an object with four properties: `response` (the data fetched from the API), `mutate` (a function for updating the data), `error` (an error object if there was an error fetching the data), and `isValidating` (a boolean indicating whether the data is currently being fetched).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useTokenOpenseaBanned.md b/.autodoc/docs/markdown/ui/src/hooks/useTokenOpenseaBanned.md
deleted file mode 100644
index d82999e49..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useTokenOpenseaBanned.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useTokenOpenseaBanned.ts)
-
-This code is a React hook that checks whether a given token is banned on the OpenSea marketplace. The hook takes in two optional parameters: `contract`, which is a string representing the contract address of the token, and `tokenId`, which is a number or string representing the ID of the token.
-
-The hook uses the `useState` and `useEffect` hooks from React to manage state and perform side effects. Specifically, it initializes a boolean state variable `isBanned` to `false`, and then uses the `useEffect` hook to perform an API call to the `isOpenSeaBanned` function from the `@reservoir0x/reservoir-sdk` library. This function takes in an array of token IDs and returns a Promise that resolves to an object mapping each token ID to a boolean value indicating whether it is banned on OpenSea.
-
-If `contract` and `tokenId` are both provided, the hook constructs a token string in the format `contract:tokenId` and passes it to `isOpenSeaBanned`. It then updates the `isBanned` state variable based on the result of the API call. If there is an error with the API call, the hook logs the error to the console and sets `isBanned` to `false`. If `contract` and `tokenId` are not both provided, the hook simply sets `isBanned` to `false`.
-
-The hook returns the `isBanned` state variable, which can be used in the larger project to conditionally render components or perform other logic based on whether a token is banned on OpenSea. For example, a developer could use this hook to prevent users from attempting to buy or sell banned tokens on their marketplace.
-
-Example usage:
-
-```
-import useOpenSeaBanned from './useOpenSeaBanned'
-
-function MyComponent({ contract, tokenId }) {
- const isBanned = useOpenSeaBanned(contract, tokenId)
-
- if (isBanned) {
- return {response.collection.name}
-{response.collection.description}
--
- {response.collection.payment_tokens.map((token) => (
-
- - {token.name} ({token.symbol}) - - ))} -
This token is banned on OpenSea.
- } else { - returnThis token is not banned on OpenSea.
- } -} -``` -## Questions: - 1. What is the purpose of this code? - This code is a React hook that checks if a given token on a given contract is banned on OpenSea. - -2. What is the '@reservoir0x/reservoir-sdk' package used for? - The '@reservoir0x/reservoir-sdk' package is used to check if a given token is banned on OpenSea. - -3. What happens if either the contract or tokenId parameters are not provided? - If either the contract or tokenId parameters are not provided, the hook will return false for isBanned. \ No newline at end of file diff --git a/.autodoc/docs/markdown/ui/src/hooks/useTokens.md b/.autodoc/docs/markdown/ui/src/hooks/useTokens.md deleted file mode 100644 index 0e029dc7c..000000000 --- a/.autodoc/docs/markdown/ui/src/hooks/useTokens.md +++ /dev/null @@ -1,50 +0,0 @@ -[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useTokens.ts) - -This code exports a function that retrieves token details from a Reservoir API endpoint. The function takes in three optional parameters: `options`, `swrOptions`, and `chainId`. - -`options` is an object that contains query parameters to be sent with the API request. If `options` is not provided or is falsey, the function returns null. - -`swrOptions` is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. The default options are set to revalidate on mount and not on the first page. - -`chainId` is an optional parameter that specifies the ID of the chain to use for the API request. If `chainId` is provided, the function searches for the chain with the matching ID in the client's list of chains. If `chainId` is not provided, the function uses the current chain from the client. - -The function then calls `useInfiniteApi` from the `./` module, passing in a callback function and the `swrOptions` object. The callback function takes in two parameters: `pageIndex` and `previousPageData`. `pageIndex` is the index of the current page being fetched, and `previousPageData` is the data from the previous page. - -The callback function constructs the API endpoint URL using the `chain` object and the `/tokens/v6` endpoint path. It then sets the query parameters using the `options` object and the `setParams` function from the `@reservoir0x/reservoir-sdk` module. If `normalizeRoyalties` is not specified in the query parameters and the client has a `normalizeRoyalties` property, the function sets `normalizeRoyalties` to the client's value. - -If `previousPageData` is truthy and has a `continuation` property, the function sets the `continuation` query parameter to the value of `previousPageData.continuation`. This allows the function to fetch subsequent pages of data. If `previousPageData` is falsy and `pageIndex` is greater than 0, the function returns null. - -The callback function then returns an array containing the constructed URL, the chain's API key, and the client's version. This array is used by `useInfiniteApi` to make the API request. - -The function then extracts the `tokens` array from the API response data and returns an object containing the `response` object from `useInfiniteApi` and the `tokens` array. - -This function can be used to fetch token details from the Reservoir API and handle pagination of the response data using the SWR library. An example usage of this function might look like: - -``` -import useTokens from './useTokens' - -function TokenList() { - const { data, error, size, setSize } = useTokens({ limit: 10 }) - - if (error) returnError fetching tokens
- if (!data) return Loading...
-
- return (
-
- {data.map((token) => (
-
- )
-}
-```
-## Questions:
- 1. What does this code do?
-- This code exports a function that retrieves token details from a Reservoir API endpoint using SWR for infinite scrolling.
-
-2. What are the input parameters for the exported function?
-- The exported function takes in three optional parameters: `options` for query parameters, `swrOptions` for SWR configuration, and `chainId` for the chain ID to use.
-
-3. What is the purpose of the `response` variable?
-- The `response` variable is used to fetch data from the Reservoir API endpoint using the `useInfiniteApi` hook from the `./` module. It also handles pagination and sets query parameters for the API request.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useUserCollections.md b/.autodoc/docs/markdown/ui/src/hooks/useUserCollections.md
deleted file mode 100644
index 37b1eff12..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useUserCollections.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useUserCollections.ts)
-
-This code exports a function that retrieves collections belonging to a specified user from a Reservoir API endpoint. The function takes in four optional parameters: `user`, `options`, `swrOptions`, and `chainId`.
-
-The `user` parameter is a string that specifies the user whose collections are to be retrieved. The `options` parameter is an object that contains query parameters to be included in the API request. The `swrOptions` parameter is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. The `chainId` parameter is an optional number that specifies the ID of the Reservoir chain to use for the API request.
-
-The function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines the Reservoir chain to use for the API request based on the `chainId` parameter or the current chain of the client.
-
-The function then uses the `useInfiniteApi` hook to make the API request. This hook takes in a function that generates the URL and query parameters for the API request based on the current page index and previous page data. The function also checks if a `user` parameter has been provided and returns `null` if it has not.
-
-The API request URL is generated using the `URL` constructor and the `baseApiUrl` property of the Reservoir chain. The query parameters are generated using the `offset` and `limit` properties of the `options` parameter or default values if they are not provided. The `setParams` function from the `@reservoir0x/reservoir-sdk` library is used to set the query parameters on the URL.
-
-The `useInfiniteApi` hook returns an object that contains the API response data and metadata. The `collections` property of the response data is flattened into a single array using the `flatMap` method. The function then returns an object that includes the flattened `collections` array and the other properties of the API response metadata.
-
-This function can be used to retrieve collections belonging to a specified user from a Reservoir API endpoint. It can be called with the `user` parameter to retrieve the collections for a specific user, or without the `user` parameter to return `null`. The `options` parameter can be used to specify query parameters for the API request, such as the `limit` parameter to control the number of collections returned per page. The `swrOptions` parameter can be used to configure the caching and revalidation behavior of the API response. The `chainId` parameter can be used to specify the Reservoir chain to use for the API request if it is different from the current chain of the client.
-## Questions:
- 1. What is the purpose of the `useInfiniteApi` hook being used in this code?
-- The `useInfiniteApi` hook is being used to fetch data from an API endpoint in a paginated manner, allowing for infinite scrolling.
-
-2. What is the significance of the `UserCollections` and `UserCollectionsQuery` types?
-- The `UserCollections` type represents the schema of the response data that is expected from the API endpoint being called, while the `UserCollectionsQuery` type represents the query parameters that can be passed to the API endpoint.
-
-3. What is the purpose of the `chainId` parameter and how is it used in the code?
-- The `chainId` parameter is an optional parameter that specifies the ID of a blockchain network. It is used to construct the base URL for the API endpoint being called, and is also used to retrieve the API key for the specified network from the `client` object.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useUserTokens.md b/.autodoc/docs/markdown/ui/src/hooks/useUserTokens.md
deleted file mode 100644
index c70177a1d..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useUserTokens.md
+++ /dev/null
@@ -1,25 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useUserTokens.ts)
-
-This code exports a default function that retrieves a list of tokens for a given user from a Reservoir API endpoint. The function takes in four parameters: `user`, `options`, `swrOptions`, and `chainId`.
-
-The `user` parameter is a string that represents the user whose tokens are being retrieved. The `options` parameter is an optional object that contains query parameters to be included in the API request. The `swrOptions` parameter is an optional object that contains configuration options for the SWR library, which is used to cache and manage the API response. The `chainId` parameter is an optional number that represents the ID of the blockchain network to use for the API request.
-
-The function first retrieves the Reservoir client object using the `useReservoirClient` hook. It then determines the blockchain network to use based on the `chainId` parameter or the current network of the client object.
-
-The function then uses the `useInfiniteApi` hook from the `./` module to make the API request. This hook takes in a callback function that is called each time a new page of data is requested. The callback function constructs the API endpoint URL using the `user` parameter and the `chain` object, and sets the query parameters using the `options` object. If there is previous page data available, the callback function adds the `continuation` parameter to the query to retrieve the next page of data. The callback function also sets the `normalizeRoyalties` parameter in the query if it is not already set and the client object has a `normalizeRoyalties` property.
-
-The `useInfiniteApi` hook returns an object that contains the API response data, including an array of token objects. The function extracts this array from the response and returns it along with the other properties of the response object.
-
-This function can be used in the larger project to retrieve a list of tokens for a given user from the Reservoir API. The function can be called with the `user` parameter and optionally with the `options`, `swrOptions`, and `chainId` parameters to customize the API request and response caching behavior. The returned token array can then be used to display the user's tokens in the application.
-## Questions:
- 1. What is the purpose of this code and what does it do?
-
- This code exports a function that retrieves user tokens from a Reservoir API endpoint. It uses the Reservoir SDK and SWR library to handle API requests and pagination.
-
-2. What parameters does the exported function take and what are their types?
-
- The exported function takes four parameters: `user` (string or undefined), `options` (UserTokenQuery or false), `swrOptions` (SWRInfiniteConfiguration), and `chainId` (number or undefined).
-
-3. What is the structure of the response data returned by the exported function?
-
- The response data returned by the exported function is an object that includes the data returned by the Reservoir API endpoint. The `data` property of the response object is an array of user tokens, and the other properties of the response object are metadata related to the API request and pagination.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useUserTopBids.md b/.autodoc/docs/markdown/ui/src/hooks/useUserTopBids.md
deleted file mode 100644
index 77fba018b..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useUserTopBids.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useUserTopBids.ts)
-
-This code exports a function that retrieves a user's top bids from a Reservoir API endpoint. The function takes in four optional parameters: `user`, `options`, `swrOptions`, and `chainId`.
-
-The `user` parameter is a string that specifies the user whose top bids are being retrieved. The `options` parameter is an object that contains additional query parameters to be included in the API request. The `swrOptions` parameter is an object that contains options for the SWR library, which is used to handle caching and revalidation of the API response. The `chainId` parameter is an optional number that specifies the ID of the blockchain network to use for the API request.
-
-The function first retrieves the Reservoir client using the `useReservoirClient` hook. It then determines the chain to use for the API request based on the `chainId` parameter or the current chain of the client.
-
-The function then uses the `useInfiniteApi` hook to make the API request. This hook takes in a function that generates the URL and query parameters for the API request based on the current page index and previous page data. The function also handles setting the `normalizeRoyalties` query parameter based on the client's settings. The `useInfiniteApi` hook returns an object that contains the API response data and metadata.
-
-Finally, the function extracts the `topBids` data from the API response and returns it along with the metadata from the `useInfiniteApi` hook.
-
-This function can be used in the larger project to retrieve a user's top bids from the Reservoir API and display them in the user interface. The function can be called with the desired user ID and any additional query parameters, and the resulting data can be displayed using the metadata returned by the `useInfiniteApi` hook. For example:
-
-```
-import useTopBids from './useTopBids'
-
-function TopBids({ user }) {
- const { data, size, setSize } = useTopBids(user)
-
- return (
- {token.name}
- ))}
-
-
- {data.map((bid) => (
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a function that retrieves a user's top bids from a Reservoir API endpoint and returns them in a paginated format using SWR.
-
-2. What are the input parameters for the exported function?
-- The function takes in four optional parameters: `user` (string), `options` (object), `swrOptions` (object), and `chainId` (number).
-
-3. What is the expected output of the exported function?
-- The function returns an object that includes the paginated data retrieved from the Reservoir API endpoint, as well as additional metadata provided by the SWR library. The data is flattened into an array of bids.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useUsersActivity.md b/.autodoc/docs/markdown/ui/src/hooks/useUsersActivity.md
deleted file mode 100644
index 37ac31ab8..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useUsersActivity.md
+++ /dev/null
@@ -1,49 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useUsersActivity.ts)
-
-This code exports a function that retrieves user activity data from a Reservoir API endpoint. The function takes in optional parameters for filtering the data and pagination options, as well as a Reservoir client object and a chain ID.
-
-The function first retrieves the Reservoir client object using the `useReservoirClient` hook. It then determines the chain to use for the API request based on the provided chain ID or the current chain of the client.
-
-The function then uses the `useInfiniteApi` hook to make the API request and handle pagination. It constructs the API endpoint URL and query parameters based on the provided options and pagination data. It then returns an array containing the URL, API key, and client version to be used in the API request.
-
-Finally, the function maps over the API response data to extract the activity data and returns it along with the pagination data from the `useInfiniteApi` hook.
-
-This function can be used in the larger project to retrieve user activity data from the Reservoir API and display it in the UI. For example, it could be used to display a user's recent activity on their profile page or to show a feed of recent activity across the platform.
-
-Example usage:
-
-```
-import useUserActivity from './useUserActivity'
-
-function UserProfile({ userId }) {
- const { data: activities, isLoading, isError } = useUserActivity(userId)
-
- if (isLoading) {
- return {bid.amount}
- ))}
-
- Loading...
- }
-
- if (isError) {
- return Error loading user activity.
- }
-
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of the `useInfiniteApi` hook being imported from the `./` module?
-- The smart developer might wonder what the `useInfiniteApi` hook does and how it is implemented within the `zoo` project.
-
-2. What is the expected format of the response data from the API endpoint `/users/activity/v5`?
-- The smart developer might want to know what the `UsersActivityResponse` type represents and how it is used within the `useInfiniteApi` hook.
-
-3. What is the purpose of the `chainId` parameter and how is it used within the function?
-- The smart developer might be curious about the `chainId` parameter and how it is used to determine the `chain` variable, which is then used to construct the API endpoint URL.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useWrappedBalance.md b/.autodoc/docs/markdown/ui/src/hooks/useWrappedBalance.md
deleted file mode 100644
index 493754507..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useWrappedBalance.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useWrappedBalance.ts)
-
-This code is a function that retrieves the balance of a specific token on the current blockchain network. The function imports a list of wrapped contract addresses from a separate file and uses the `useBalance` function from the `wagmi` library to retrieve the balance of the specified token.
-
-To use this function, the user must provide parameters to the `useBalance` function, which are passed to the function as an argument to this function. The function then calls the `useZooClient` function to retrieve the current blockchain network and uses it to determine the contract address of the specified token. If the current network is not in the list of wrapped contract addresses, the function defaults to the mainnet contract address.
-
-The function then calls the `useBalance` function with the specified parameters and the determined contract address. The function returns an object containing the balance of the specified token and the contract address used to retrieve the balance.
-
-Here is an example of how this function can be used:
-
-```
-import useTokenBalance from './useTokenBalance'
-
-const params = {
- account: '0x1234567890abcdef',
- decimals: 18,
-}
-
-const tokenBalance = useTokenBalance(params)
-
-console.log(tokenBalance.balance) // prints the balance of the specified token
-console.log(tokenBalance.contractAddress) // prints the contract address used to retrieve the balance
-```
-
-Overall, this function is a useful tool for retrieving the balance of a specific token on the current blockchain network. It can be used in conjunction with other functions in the `zoo` project to provide users with information about their token holdings.
-## Questions:
- 1. What is the purpose of the `wrappedContracts` constant imported from `../constants/wrappedContracts`?
-- `wrappedContracts` is likely a mapping of chain IDs to contract addresses for wrapped tokens, used to determine the contract address based on the current chain.
-
-2. What is the `useBalance` function being imported from `wagmi`, and what are the possible parameters that can be passed to it?
-- `useBalance` is likely a function provided by the `wagmi` library for retrieving the balance of a given token. The possible parameters that can be passed to it are not clear from this code snippet.
-
-3. What is the expected return value of this function?
-- This function is expected to return an object with two properties: `balance`, which is the balance of the specified token, and `contractAddress`, which is the contract address of the specified token on the current chain.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/hooks/useZooClient.md b/.autodoc/docs/markdown/ui/src/hooks/useZooClient.md
deleted file mode 100644
index 62a596f9d..000000000
--- a/.autodoc/docs/markdown/ui/src/hooks/useZooClient.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/hooks/useZooClient.ts)
-
-The code above is a React functional component that exports a function that returns the context object of the `ZooClientProvider`. The `ZooClientProvider` is a higher-order component that provides the context for the `ZooClient` component and its children.
-
-The `useContext` hook is used to access the context object provided by the `ZooClientProvider`. The `useContext` hook takes the `ZooClientContext` object as an argument and returns the current context value for that context.
-
-This code can be used in the larger project to provide access to the `ZooClient` context object in any component that needs it. For example, if a component needs to access the `ZooClient` context object to retrieve data or perform an action, it can simply import this function and call it to get the context object.
-
-Here is an example of how this code can be used in a component:
-
-```
-import React from 'react'
-import getZooClientContext from './getZooClientContext'
-
-function MyComponent() {
- const zooClientContext = getZooClientContext()
-
- // Use the zooClientContext object to retrieve data or perform an action
-
- return (
- // JSX for the component
- )
-}
-
-export default MyComponent
-```
-
-In this example, the `getZooClientContext` function is imported and called to get the `zooClientContext` object. The `zooClientContext` object can then be used in the component to retrieve data or perform an action.
-
-Overall, this code provides a simple and reusable way to access the `ZooClient` context object in any component that needs it.
-## Questions:
- 1. What is `ZooClientContext` and where is it defined?
-- `ZooClientContext` is likely a context object defined in `ZooClientProvider` located in the parent directory.
-
-2. What is the purpose of this code?
-- This code exports a function that returns the value of `ZooClientContext` using the `useContext` hook from React.
-
-3. How is this code intended to be used in the project?
-- This code is likely used to provide access to the `ZooClientContext` throughout the project by importing and calling the exported function.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/img/EthIconGlyph.md b/.autodoc/docs/markdown/ui/src/img/EthIconGlyph.md
deleted file mode 100644
index 408a34d22..000000000
--- a/.autodoc/docs/markdown/ui/src/img/EthIconGlyph.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/img/EthIconGlyph.tsx)
-
-This code exports a React component that renders an SVG image. The SVG image consists of two polygons, one on top of the other, forming a shape that resembles a house. The polygons are defined using the `path` element, which takes a `d` attribute that specifies the shape of the polygon using a series of commands. The `fill` attribute is set to black, which fills the shape with black color.
-
-The component takes no props and returns the SVG image. It sets the width to "auto" and the height to "100%", which means the image will scale to fit its container. The `viewBox` attribute defines the position and size of the viewport, which is the visible area of the SVG image. In this case, the viewport starts at x=5, y=0 and has a width of 15 and a height of 24.
-
-This component can be used in a larger project as a decorative element, such as a logo or an icon. It can be imported and rendered like any other React component. For example:
-
-```
-import React from 'react';
-import HouseIcon from './HouseIcon';
-
-const MyComponent = () => {
- return (
- User Activity
--
- {activities.map((activity) => (
-
- {activity.description} - ))} -
-
- );
-};
-```
-
-This code imports the `HouseIcon` component from the file where it is defined and renders it inside a `div` element. The resulting output will be a heading followed by the SVG image of the house.
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a React component that renders an SVG image.
-
-2. What does the viewBox attribute do?
-- The viewBox attribute defines the position and dimensions of the SVG image's viewport.
-
-3. Can the color of the SVG image be changed?
-- Yes, the fill attribute can be changed to any valid CSS color value to change the color of the SVG image.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/img/EthIconGray.md b/.autodoc/docs/markdown/ui/src/img/EthIconGray.md
deleted file mode 100644
index 5d7865b10..000000000
--- a/.autodoc/docs/markdown/ui/src/img/EthIconGray.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/img/EthIconGray.tsx)
-
-This code exports a React component that renders an SVG image. The image consists of six paths that form a shape resembling a hexagon with two of its sides cut off. The hexagon is divided into three sections, each with a different color. The top section is colored dark gray (#343434), the bottom section is colored light gray (#8C8C8C), and the middle section is divided into four smaller sections, two of which are colored black (#141414) and two of which are colored dark brown (#393939 and #3C3C3B).
-
-The SVG has a viewBox of "5 0 15 24", meaning that the image is 15 units wide and 24 units tall, and its top-left corner is located at (5,0) in the SVG coordinate system. The SVG also has a clipPath that defines a rectangular area with the same dimensions as the SVG and fills it with white. This clipPath is applied to the group of paths that form the hexagon, effectively masking them so that they only appear within the rectangular area defined by the clipPath.
-
-This component can be used in a larger project as a decorative element or icon. It can be imported and rendered like any other React component, for example:
-
-```
-import HexagonIcon from './path/to/HexagonIcon'
-
-function MyComponent() {
- return (
- Welcome to my house
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports an SVG component that renders a specific image.
-
-2. What is the significance of the viewBox attribute in the SVG element?
-- The viewBox attribute defines the position and dimensions of the SVG viewport.
-
-3. What is the purpose of the clipPath element and its child rect element?
-- The clipPath element defines a clipping path that restricts the visible area of the SVG image, and the rect element inside it specifies the dimensions of the clipping path.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/img/EthIconPurple.md b/.autodoc/docs/markdown/ui/src/img/EthIconPurple.md
deleted file mode 100644
index 860029bcb..000000000
--- a/.autodoc/docs/markdown/ui/src/img/EthIconPurple.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/img/EthIconPurple.tsx)
-
-This code exports a React component that renders an SVG image of a flag. The flag is composed of five paths, each with a different fill color. The dimensions of the SVG are set to "auto" for the width and "100%" for the height, which means the SVG will scale to fit its container element. The viewBox attribute defines the position and dimensions of the SVG's viewport, which is set to (5, 0, 15, 24).
-
-The first path element fills the top left corner of the flag with a light blue color (#8A92B2). The second path element fills the top right and bottom left corners of the flag with a darker blue color (#62688F). The third path element fills the center of the flag with a dark blue color (#454A75). The fourth path element fills the bottom left corner of the flag with the same light blue color as the first path element. The fifth path element fills the bottom right corner of the flag with the same darker blue color as the second path element.
-
-This component can be used in a larger project as a decorative element or icon. It can be imported and rendered in any React component that needs to display a flag. For example:
-
-```
-import React from 'react';
-import Flag from './Flag';
-
-const CountryInfo = ({ country }) => {
- return (
- Welcome to my app!
-Here's a cool hexagon icon:
-
-
- );
-};
-
-export default CountryInfo;
-```
-
-In this example, the `CountryInfo` component displays information about a country and renders the `Flag` component as a decorative element. The `Flag` component can be customized with CSS styles or additional props to change its appearance or behavior.
-## Questions:
- 1. What is the purpose of this code?
-
- This code exports a React component that renders an SVG image of a shape resembling a flag.
-
-2. What are the dimensions of the SVG image?
-
- The SVG image has a variable width and a height of 100%. The viewBox attribute specifies the dimensions of the visible area as 5 units from the left, 0 units from the top, 15 units wide, and 24 units tall.
-
-3. What do the different path elements represent?
-
- The different path elements represent different parts of the flag shape, with different fill colors. The first path element represents the top left corner of the flag, the second path element represents the bottom left and top right corners of the flag, the third path element represents the center of the flag, and the last two path elements represent the bottom right corner of the flag.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/img/WEthIcon.md b/.autodoc/docs/markdown/ui/src/img/WEthIcon.md
deleted file mode 100644
index 031ea65f7..000000000
--- a/.autodoc/docs/markdown/ui/src/img/WEthIcon.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/img/WEthIcon.tsx)
-
-This code exports a React component that renders an SVG image of a stylized arrow. The arrow is composed of six path elements, each with a different fill color. The arrow is oriented vertically and has a triangular shape with a wider base at the bottom. The SVG element has a dynamic width and a fixed height of 100% of its container. The viewBox attribute defines the coordinate system used to draw the paths, and the xmlns attribute specifies the XML namespace for SVG elements.
-
-This component can be used in a larger project as a visual element to indicate direction or movement. It can be styled and positioned using CSS to fit the design of the application. Here is an example of how to use this component in a React application:
-
-```
-import React from 'react';
-import Arrow from './Arrow';
-
-const App = () => (
- {country.name}
-Capital: {country.capital}
-Population: {country.population}
-
-
-);
-
-export default App;
-```
-
-In this example, the Arrow component is imported and rendered inside a div element. The resulting output will be the arrow image displayed below the heading.
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a React component that renders an SVG image of a stylized arrow.
-
-2. What are the dimensions of the SVG image?
-- The SVG image has a variable width and a fixed height of 100%, and a viewBox of "0 0 15 24".
-
-3. What do the different path elements represent?
-- The different path elements represent different parts of the arrow image, each with a different fill color.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/img/WethApproval.md b/.autodoc/docs/markdown/ui/src/img/WethApproval.md
deleted file mode 100644
index aba89f0bc..000000000
--- a/.autodoc/docs/markdown/ui/src/img/WethApproval.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/img/WethApproval.tsx)
-
-This code exports a React component that renders an SVG image of a polygonal shape resembling a bird. The SVG image has a width and height of 56 units and a viewbox of 0 0 56 56. The image is composed of several paths and a rectangle, each with a different fill color.
-
-The rectangle has a width and height of 56 units and rounded corners with a radius of 8 units. It is filled with a light gray color with an opacity of 0.2, giving it a translucent appearance.
-
-The paths are used to create the shape of the bird. The first path starts at the top of the bird's head and goes down to the left wing. It is filled with a dark pink color. The second path starts at the left wing and goes down to the tail. It is filled with a darker shade of pink. The third path starts at the tail and goes up to the right wing. It is filled with the same dark pink color as the second path. The fourth path starts at the right wing and goes up to the top of the bird's head, completing the shape. It is filled with a dark red color.
-
-This component can be used in a larger project as a decorative element or icon. It can be imported and rendered in any React component that needs to display an image of a bird. For example, it can be used in a nature-themed website or app, or in a game that involves birds. Here is an example of how to use this component in a React component:
-
-```
-import BirdIcon from './path/to/bird-icon'
-
-function MyComponent() {
- return (
- Welcome to my app
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports an SVG component that renders a specific design of a zoo-related icon.
-
-2. What dependencies are required for this code to work?
-- This code requires React and SVGProps from the 'react' library.
-
-3. Can the size and colors of the icon be customized?
-- Yes, the size of the icon can be customized by changing the width and height values in the SVG element. The colors of the icon can also be customized by changing the fill values of the different path and rect elements.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/index.md b/.autodoc/docs/markdown/ui/src/index.md
deleted file mode 100644
index 7886e7ec4..000000000
--- a/.autodoc/docs/markdown/ui/src/index.md
+++ /dev/null
@@ -1,48 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/index.ts)
-
-This code exports various modules, hooks, themes, and components that are part of the larger project called "zoo".
-
-The "Providers" section exports two providers: "ReservoirKitProvider" and "ReservoirClientProvider". These providers are likely used to provide data and functionality to other parts of the project.
-
-The "Hooks" section exports a variety of hooks that can be used throughout the project. These hooks include "useCollections", "useTokens", "useBids", and many others. Hooks are a way to reuse stateful logic across components in React, so these hooks likely provide some common functionality that is used throughout the project.
-
-The "Themes" section exports two themes: "lightTheme" and "darkTheme". These themes likely define the color scheme and styling for various components in the project.
-
-The "Components" section exports a variety of components that can be used throughout the project. These components include modals for buying, bidding, and listing items, as well as components for displaying token media and managing a user's cart.
-
-Overall, this code exports a variety of modules, hooks, themes, and components that are likely used throughout the larger "zoo" project. Developers working on the project can import and use these exports as needed to build out the functionality and user interface of the project.
-
-Example usage:
-
-```
-import { useCollections } from 'zoo';
-
-function MyComponent() {
- const { collections, loading, error } = useCollections();
-
- if (loading) {
- return Welcome to the Bird Game!
-Can you spot the bird in this image?
-Loading collections...
;
- }
-
- if (error) {
- return Error loading collections: {error.message}
;
- }
-
- return (
-
- {collections.map(collection => (
-
- );
-}
-```
-
-In this example, the "useCollections" hook is imported from the "zoo" project and used to fetch and display a user's collections. The hook returns an object with the collections, loading state, and any errors that occurred during the fetch. The collections are then mapped over and displayed in the component.
-## Questions:
- 1. What is the purpose of the `types/parcel.d.ts` file being referenced at the top of the code?
- - The `types/parcel.d.ts` file is being referenced to provide type definitions for the code in this file.
-2. What is the `ReservoirKitProvider` and `ReservoirClientProvider` being exported for?
- - The `ReservoirKitProvider` and `ReservoirClientProvider` are being exported as providers for the `ReservoirKit` library.
-3. What is the purpose of the various modal components being exported?
- - The various modal components being exported are used for different actions related to buying, bidding, and listing tokens in the `ReservoirKit` library.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/lib/defaultExpirationOptions.md b/.autodoc/docs/markdown/ui/src/lib/defaultExpirationOptions.md
deleted file mode 100644
index b81a2b637..000000000
--- a/.autodoc/docs/markdown/ui/src/lib/defaultExpirationOptions.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/lib/defaultExpirationOptions.ts)
-
-This code defines an array of `ExpirationOption` objects and exports it as the default export of the module. Each `ExpirationOption` object represents a different expiration time option that can be selected by a user in the larger project.
-
-Each `ExpirationOption` object has four properties: `text`, `value`, `relativeTime`, and `relativeTimeUnit`. The `text` property is a string that represents the display text for the option. The `value` property is a string that represents the value of the option. The `relativeTime` property is a number that represents the relative time for the option. The `relativeTimeUnit` property is a string that represents the unit of time for the option.
-
-For example, the first `ExpirationOption` object represents an option for a 1 hour expiration time. The `text` property is "1 Hour", the `value` property is "hour", the `relativeTime` property is 1, and the `relativeTimeUnit` property is "h".
-
-This code can be used in the larger project to provide users with a list of expiration time options to choose from. The `expirationOptions` array can be imported into other modules and used to populate a dropdown menu or other UI element. For example, the following code could be used to create a dropdown menu of expiration time options:
-
-```
-import expirationOptions from './path/to/expirationOptions'
-
-const dropdown = document.createElement('select')
-
-expirationOptions.forEach(option => {
- const optionElement = document.createElement('option')
- optionElement.value = option.value
- optionElement.text = option.text
- dropdown.appendChild(optionElement)
-})
-
-document.body.appendChild(dropdown)
-```
-
-This code creates a `select` element and populates it with `option` elements for each `ExpirationOption` object in the `expirationOptions` array. The `value` and `text` properties of each `option` element are set to the corresponding properties of the `ExpirationOption` object. The resulting dropdown menu can be appended to the `body` of the document or another element in the UI.
-## Questions:
- 1. What is the purpose of the `ExpirationOption` type?
-- The `ExpirationOption` type is likely used to define the structure of objects that represent different expiration options.
-
-2. What is the significance of the `relativeTime` and `relativeTimeUnit` properties?
-- The `relativeTime` property represents the amount of time for the expiration option, while the `relativeTimeUnit` property represents the unit of time (e.g. hours, days, weeks, months).
-
-3. How is this module intended to be used in the `zoo` project?
-- It is unclear from this code alone how this module is intended to be used in the `zoo` project, but it likely provides a list of expiration options that can be used in some part of the project's functionality.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/lib/getLocalMarketplaceData.md b/.autodoc/docs/markdown/ui/src/lib/getLocalMarketplaceData.md
deleted file mode 100644
index 94ddd11f0..000000000
--- a/.autodoc/docs/markdown/ui/src/lib/getLocalMarketplaceData.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/lib/getLocalMarketplaceData.ts)
-
-The code is a JavaScript module that exports a function. The function retrieves metadata from the current web page and returns an object containing the page title and icon. The metadata is retrieved using the Reservoir SDK, which is imported from the '@reservoir0x/reservoir-sdk' module.
-
-The function first calls the `getClient()` function from the Reservoir SDK to get a client object. It then looks for a meta tag with the property 'reservoir:title' and retrieves its content attribute. If the title is not found, it checks if the client object exists and has a 'source' property. If so, it uses the 'source' property as the title. If the title is still not found, it uses the hostname of the current location as the title.
-
-Next, the function looks for a meta tag with the property 'reservoir:icon' and retrieves its content attribute. If the icon is not found, it looks for a link tag with a rel attribute containing the word 'icon' and retrieves its href attribute.
-
-Finally, the function returns an object containing the title and icon. This function can be used in a larger project to retrieve metadata from web pages and display it in a user interface. For example, a web browser extension could use this function to display the title and icon of the current web page in a popup window.
-
-Example usage:
-
-```
-import getPageMetadata from './getPageMetadata'
-
-const metadata = getPageMetadata()
-
-console.log(metadata.title) // prints the title of the current web page
-console.log(metadata.icon) // prints the icon of the current web page
-```
-## Questions:
- 1. What is the purpose of the `getClient` function from `@reservoir0x/reservoir-sdk` being imported?
-- The `getClient` function is used to get a client object from the Reservoir SDK.
-
-2. What is the purpose of the code that sets the `title` variable?
-- The code sets the `title` variable to the value of the `reservoir:title` meta tag content attribute, or the `client.source` property, or the hostname of the current location.
-
-3. What is the purpose of the code that sets the `icon` variable?
-- The code sets the `icon` variable to the value of the `reservoir:icon` meta tag content attribute, or the `href` attribute of the `link` tag with a `rel` attribute containing the word "icon".
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/lib/numbers.md b/.autodoc/docs/markdown/ui/src/lib/numbers.md
deleted file mode 100644
index dabc969a6..000000000
--- a/.autodoc/docs/markdown/ui/src/lib/numbers.md
+++ /dev/null
@@ -1,20 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/lib/numbers.ts)
-
-The `zoo` project contains a module that provides functions for formatting Ethereum (ETH) values into human-readable formats. The module exports three functions: `formatBN`, `formatNumber`, and `toFixed`.
-
-The `formatBN` function takes an ETH amount, a maximum number of decimal digits, and an optional number of decimals as arguments. It returns the ETH value as a string or `-` if the amount is `null` or `undefined`. The function first checks if the amount is `null` or `undefined` and returns `-` if it is. It then converts the amount to a number and formats it using the `Intl.NumberFormat` API. The function uses the `utils.formatUnits` function from the `ethers` library to convert the amount to a number if it is not already a number. The function also checks if the browser is Safari and applies a workaround for a bug in the `Intl.NumberFormat` API that affects the fraction part of the formatted value. The function returns the formatted value as a string.
-
-The `formatNumber` function takes an ETH amount and a maximum number of decimal digits as arguments. It returns the ETH value as a string or `-` if the amount is `null` or `undefined`. The function uses the `Intl.NumberFormat` API to format the amount with the specified number of decimal digits. The function returns the formatted value as a string.
-
-The `toFixed` function takes a number and a number of decimal digits as arguments. It returns the number as a string with the specified number of decimal digits. The function uses a regular expression to match the number of decimal digits and returns the matched value or the original number if no match is found.
-
-These functions can be used in the `zoo` project or in other projects that require formatting of ETH values. For example, the `formatBN` function can be used to format ETH values in a user interface that displays ETH balances or transaction amounts. The `formatNumber` function can be used to format ETH values in a chart or graph that displays historical ETH prices. The `toFixed` function can be used to format ETH values in a smart contract that requires a fixed number of decimal digits.
-## Questions:
- 1. What is the purpose of the `formatBN` function?
-- The `formatBN` function is used to convert ETH values to human-readable formats with a specified number of decimal digits.
-
-2. Why is there a check for Safari browser in the code?
-- There is a check for Safari browser in the code because Safari has a few bugs with the fraction part of `formatToParts`, sometimes rounding when unnecessary and when the amount is in the thousands not properly representing the value in compact display.
-
-3. What is the purpose of the `truncateFractionAndFormat` function?
-- The `truncateFractionAndFormat` function is used to truncate the fraction part of a number to a specified number of digits and format the number as a string. It is used in the `formatBN` function to format the parts of the number returned by `formatToParts`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/lib/optimizeImage.md b/.autodoc/docs/markdown/ui/src/lib/optimizeImage.md
deleted file mode 100644
index 502dbed36..000000000
--- a/.autodoc/docs/markdown/ui/src/lib/optimizeImage.md
+++ /dev/null
@@ -1,33 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/lib/optimizeImage.ts)
-
-The `optimizeImage` function in the `zoo` project takes in two parameters: `imageHref` and `width`. The `imageHref` parameter is a string that represents the URL of an image. The `width` parameter is a number that represents the desired width of the image.
-
-The purpose of this function is to optimize the image by resizing it to the desired width. The function first checks if the `imageHref` parameter is defined. If it is not defined, the function returns an empty string. If it is defined, the function creates a new `URL` object from the `imageHref` parameter.
-
-The function then checks if the host of the URL is `lh3.googleusercontent.com`. If it is, the function checks if the `imageHref` parameter includes either `=s` or `=w`. If it does, the function splits the `imageHref` parameter at the `=` character and replaces the value after the `=` with the desired width. If it does not include `=s` or `=w`, the function simply appends `=w` followed by the desired width to the `imageHref` parameter.
-
-If the host of the URL is not `lh3.googleusercontent.com`, the function simply returns the `imageHref` parameter.
-
-This function can be used in the larger `zoo` project to optimize images by resizing them to the desired width. For example, if there is a gallery of images in the project and the images are too large, this function can be used to resize them to a more appropriate size.
-
-Example usage:
-
-```
-import optimizeImage from './optimizeImage'
-
-const imageHref = 'https://example.com/image.jpg'
-const width = 500
-
-const optimizedImage = optimizeImage(imageHref, width)
-
-console.log(optimizedImage) // 'https://example.com/image.jpg=w500'
-```
-## Questions:
- 1. What is the purpose of this function?
- This function takes in an image URL and a width value, and returns a new URL with the specified width parameter added to the query string.
-
-2. What type of input does this function expect for the imageHref parameter?
- This function expects a string or undefined value for the imageHref parameter.
-
-3. What is the significance of the URL host being 'lh3.googleusercontent.com'?
- If the URL host is 'lh3.googleusercontent.com', the function will check if the imageHref already includes a width or size parameter in the query string. If it does, the function will replace it with the new width value. If it does not, the function will add the width parameter to the query string.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/lib/swr.md b/.autodoc/docs/markdown/ui/src/lib/swr.md
deleted file mode 100644
index 31aacdbbe..000000000
--- a/.autodoc/docs/markdown/ui/src/lib/swr.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/lib/swr.ts)
-
-The code in this file is responsible for defining default headers and a default fetcher function for use in the larger project. It also defines default options for the SWRConfig component from the 'swr' library.
-
-The `defaultHeaders` function takes two optional parameters, `apiKey` and `clientVersion`, and returns an object containing default headers for use in HTTP requests. The function sets the `x-rkui-version` header to the version number from the project's package.json file. If an `apiKey` parameter is provided, the function sets the `x-api-key` header to the value of the parameter. If a `clientVersion` parameter is provided, the function sets the `x-rkc-version` header to the value of the parameter.
-
-The `defaultFetcher` function takes a single parameter, `params`, which can be either a string or an array of strings. If `params` is an array, the function extracts the first three elements and assigns them to `resource`, `apiKey`, and `clientVersion`, respectively. If `params` is a string, the function assigns it to `resource`. The function then calls `defaultHeaders` with `apiKey` and `clientVersion` as arguments to get the default headers for the request. The function then uses `fetch` to make the HTTP request with the specified `resource` and `headers`. If the response has a `deprecation` header set to `true`, the function logs a warning to the console. The function then returns the response body as a JSON object. If an error occurs during the request, the function throws the error.
-
-The `swrDefaultOptions` object defines default options for the `SWRConfig` component from the 'swr' library. The object sets the `fetcher` option to the `defaultFetcher` function defined in this file, and sets `revalidateOnFocus` to `false`.
-
-This code can be used in the larger project to provide default headers and a default fetcher function for HTTP requests. The `defaultHeaders` function can be used to set default headers for all requests, or modified to set headers for specific types of requests. The `defaultFetcher` function can be used to make HTTP requests with the default headers, or modified to handle specific types of requests. The `swrDefaultOptions` object can be passed as a prop to the `SWRConfig` component to set default options for data fetching with the 'swr' library.
-
-Example usage:
-
-```
-import { defaultHeaders, defaultFetcher, swrDefaultOptions } from 'path/to/zoo'
-
-// Set default headers for all requests
-const headers = defaultHeaders('my-api-key', '1.0.0')
-
-// Make a GET request with default headers
-const response = await defaultFetcher('https://example.com/api/data', headers)
-
-// Pass default options to SWRConfig component
-{collection.name}
- ))}
- This is the content of my modal.
-
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a React component called `Progress` that displays a title, an icon (either a cube or a wallet), and a link to a block explorer website.
-
-2. What are the required props for the `Progress` component?
-- The required prop is `title`, which is a string. The optional props are `txHash`, which is a string, and `blockExplorerBaseUrl`, which is a string.
-
-3. What external libraries or dependencies does this code use?
-- This code imports several components from a custom library called `primitives`, as well as two icons from `@fortawesome/free-solid-svg-icons` and `@fortawesome/react-fontawesome`. It also imports a hook called `useNetwork` from `wagmi`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/ProgressBar.md b/.autodoc/docs/markdown/ui/src/modal/ProgressBar.md
deleted file mode 100644
index 1e6e25d2d..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/ProgressBar.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/ProgressBar.tsx)
-
-The code defines a React functional component called `ProgressBar` that renders a progress bar with a number of segments equal to the `max` prop. The `value` prop determines how many segments are filled with a gradient color, while the remaining segments are unfilled. The component uses the `Flex` primitive from a `primitives` module to create a horizontal layout for the progress bar segments.
-
-The `ProgressBar` component takes in two props: `value` and `max`. `value` is a number that represents the progress of the bar, while `max` is the total number of segments in the bar. The component also accepts any additional props that can be passed to the `Flex` primitive.
-
-The component uses the `Array` constructor to create an array of length `max`, and then maps over it to create `max` number of `Flex` components. Each `Flex` component represents a segment of the progress bar. The `key` prop is set to the index of the segment in the array.
-
-The `css` prop is used to style each `Flex` component. The `height` is set to 4 pixels, and the `borderRadius` is set to a large value to create a rounded rectangle shape. The `flex` property is set to 1 to allow the segments to fill the available space. The `background` property is set to a linear gradient that transitions from a `$neutralBorderHover` color to an `$accentSolid` color. The `backgroundSize` is set to 200% to allow the gradient to fill the entire segment. The `backgroundPosition` is set to `left` for segments that are filled, and `right` for segments that are unfilled. The `transition` property is set to `all 0.5s ease` to create a smooth animation when the progress changes.
-
-The `ProgressBar` component can be used in a larger project to display progress for various tasks, such as file uploads, form submissions, or loading data. It can be customized by passing additional props to the `Flex` component, such as `justifyContent` or `alignItems`, to change the layout of the progress bar. Here is an example of how the `ProgressBar` component can be used:
-
-```
-import ProgressBar from './ProgressBar'
-
-function UploadForm() {
- const [progress, setProgress] = useState(0)
-
- function handleUpload() {
- // code to upload file
- // update progress as file is uploaded
- setProgress(progress + 1)
- }
-
- return (
-
- )
-}
-```
-## Questions:
- 1. What does this code do?
- This code exports a React component called `ProgressBar` that renders a progress bar with a number of segments equal to the `max` prop and a number of filled segments equal to the `value` prop.
-
-2. What are the required props for this component?
- The required props for this component are `value`, which is a number representing the number of filled segments, and `max`, which is a number representing the total number of segments.
-
-3. What is the purpose of the `Flex` component being imported?
- The `Flex` component is being imported from a file located at `../primitives` and is used to create a flexbox container for the progress bar segments.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/QuantitySelector.md b/.autodoc/docs/markdown/ui/src/modal/QuantitySelector.md
deleted file mode 100644
index 1f80620dc..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/QuantitySelector.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/QuantitySelector.tsx)
-
-The `QuantitySelector` component is a reusable React component that provides a user interface for selecting a quantity within a given range. It takes in several props, including `max`, `min`, `quantity`, and `setQuantity`, which are used to determine the range of valid quantities and to update the selected quantity.
-
-The component is composed of three main elements: two buttons for incrementing and decrementing the quantity, and an input field for displaying and editing the current quantity. The buttons are styled using the `QuantityButton` component, which is a styled version of the `Button` component from the `../primitives` directory. The input field is styled using the `QuantityInput` component, which is a styled version of the `input` HTML element.
-
-The `QuantitySelector` component uses the `PseudoInput` component to group the buttons and input field together and apply additional styling. The `PseudoInput` component is a custom component that wraps the `div` HTML element and applies some additional styles to make it look like an input field.
-
-When the user clicks on the increment or decrement buttons, the `setQuantity` function is called with the new quantity value. The `onChange` and `onBlur` event handlers on the input field are used to update the quantity when the user types in a new value or leaves the input field. If the user enters an invalid value, such as a value outside of the valid range or a non-numeric value, the quantity is not updated.
-
-Overall, the `QuantitySelector` component provides a simple and reusable way to allow users to select a quantity within a given range. It can be used in a variety of contexts, such as in an e-commerce application for selecting the quantity of a product to purchase.
-
-Example usage:
-
-```
-import QuantitySelector from './QuantitySelector'
-
-function ProductPage() {
- const [quantity, setQuantity] = useState(1)
-
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a React component called `QuantitySelector` that renders a quantity selector UI element with buttons to increment and decrement the quantity and an input field to display and edit the quantity.
-
-2. What are the required props for the `QuantitySelector` component?
-- The `QuantitySelector` component requires four props: `max` (number), `min` (number), `quantity` (number), and `setQuantity` (function that takes a number as argument and returns void). It also accepts an optional `css` prop for custom styling.
-
-3. What external libraries or components are used in this code?
-- This code imports several components and libraries: `React` and `CSSProperties` from the `react` package, `Button` from a custom `../primitives` module, `PseudoInput` from another custom `../primitives/PseudoInput` module, `styled` from a custom `../../stitches.config` module, and `FontAwesomeIcon`, `faMinus`, and `faPlus` from the `@fortawesome/react-fontawesome` and `@fortawesome/free-solid-svg-icons` packages.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/SigninStep.md b/.autodoc/docs/markdown/ui/src/modal/SigninStep.md
deleted file mode 100644
index d465fb464..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/SigninStep.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/SigninStep.tsx)
-
-The code above defines a React functional component called `SigninStep` that renders a sign-in step for the Blur application. The component imports the `FontAwesomeIcon` and `Flex` components from external libraries and the `Text` component from an internal library called `primitives`. It also imports the `faPenNib` icon from the `@fortawesome/free-solid-svg-icons` library and the `CSS` type from the `@stitches/react` library.
-
-The `SigninStep` component takes a single prop called `css` of type `CSS`, which is used to style the component. The component renders a `Flex` container with a column direction, centered content, and a neutral text color. The container includes two `Text` components that display the sign-in message and a description of the approval process. Finally, the component renders a `FontAwesomeIcon` component that displays the `faPenNib` icon.
-
-This component can be used in the larger project as a step in the sign-in process for the Blur application. It provides a simple and visually appealing interface for users to sign in and complete the approval process. The `css` prop allows for customization of the component's styling to fit the overall design of the application.
-
-Example usage:
-
-```jsx
-import SigninStep from './SigninStep'
-
-function SigninPage() {
- return (
- Product Name
-Price: $10.00
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this component?
- - This component is a sign-in step for the Blur application, which displays a title, subtitle, and an icon.
-
-2. What libraries and dependencies are being used in this code?
- - This code is using the `@fortawesome/react-fontawesome`, `@fortawesome/free-solid-svg-icons`, `@stitches/react`, and `react` libraries.
-
-3. What are the props that can be passed to this component?
- - The only prop that can be passed to this component is `css`, which is of type `CSS`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/Stat.md b/.autodoc/docs/markdown/ui/src/modal/Stat.md
deleted file mode 100644
index c7d5e1469..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/Stat.md
+++ /dev/null
@@ -1,29 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/Stat.tsx)
-
-The code defines a React component called `Stat` that renders a statistic with a label and a value. The component takes several props, including `label` (a string or React element), `value` (a string, number, or null), `symbol` (an optional string), `asNative` (a boolean indicating whether the value is a native cryptocurrency), `asWrapped` (a boolean indicating whether the value is a wrapped cryptocurrency), and `address` (an optional string representing the cryptocurrency address).
-
-The component renders a `Flex` container with a light gray background, rounded corners, and padding. The container has two child elements: a `Flex` container for the label and a value element. The label is rendered as a child of the `Flex` container with some spacing. The value element is conditionally rendered based on the `asNative` and `asWrapped` props. If `asNative` is true and `asWrapped` is false, the `FormatCryptoCurrency` component is used to format the value as a native cryptocurrency. If `asWrapped` is true and `asNative` is false, the `FormatWrappedCurrency` component is used to format the value as a wrapped cryptocurrency. If neither `asNative` nor `asWrapped` is true, the value is rendered as a `Text` element with a default style and an optional ellipsis if the value is too long.
-
-The `Stat` component also has a static `toString` method that returns a CSS class name that can be used to style the component.
-
-This component can be used in a larger project to display various statistics related to cryptocurrencies. The `asNative` and `asWrapped` props allow the component to handle different types of cryptocurrencies, while the `symbol` and `address` props provide additional context for the value. The `Stat` component can be used multiple times in a single page or application to display different statistics. For example, it could be used to display the total value of a user's cryptocurrency holdings, the price of a specific cryptocurrency, or the amount of a cryptocurrency that has been staked.
-
-Example usage:
-
-```
-
- {tokens.map((token) => (
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React functional component called `TokenLineItem` that renders a token with its details and an optional error message if it is not tradable on OpenSea.
-
-2. What are the required props for this component?
-- The only required prop for this component is `price`, which is a number representing the price of the token.
-
-3. What are some optional props that can be passed to this component?
-- Some optional props that can be passed to this component include `tokenDetails`, `collection`, `usdConversion`, `isSuspicious`, `isUnavailable`, `warning`, `currency`, `expires`, `sourceImg`, `css`, `showRoyalties`, and `quantity`. These props are used to customize the appearance and behavior of the token and its details.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/TokenPrimitive.md b/.autodoc/docs/markdown/ui/src/modal/TokenPrimitive.md
deleted file mode 100644
index 16d355585..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/TokenPrimitive.md
+++ /dev/null
@@ -1,51 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/TokenPrimitive.tsx)
-
-The `TokenPrimitive` component is a React functional component that renders a token item or collection. It receives a set of props that define the item or collection to be rendered, such as `img`, `name`, `collection`, `currencyContract`, `currencyDecimals`, `currencySymbol`, `source`, `price`, `usdPrice`, `expires`, `warning`, `isOffer`, `isUnavailable`, `priceSubtitle`, `royaltiesBps`, and `quantity`.
-
-The component uses the `styled` function from the `stitches.config` module to create a styled `img` component. It then renders a set of `Box`, `Flex`, `Text`, `Grid`, `FormatCurrency`, and `FormatCryptoCurrency` components from the `primitives` module, which are used to structure and format the content of the token item or collection. Additionally, the component renders an `InfoTooltip` component from the `primitives` module, which displays a tooltip with information about the creator royalties.
-
-The `TokenPrimitive` component renders the token item or collection by first rendering a `Flex` component that displays the item or collection name and price subtitle. It then renders another `Flex` component that displays the item or collection image, name, collection, quantity, and expiration date. The component also renders a `Grid` component that displays the item or collection source, price, USD price, and warning.
-
-The `TokenPrimitive` component is used in the larger project to display token items and collections in various parts of the application, such as in search results, user profiles, and marketplaces. For example, the component can be used to display a user's token collection in their profile page, or to display search results for a specific token item.
-
-Example usage:
-
-```jsx
-import TokenPrimitive from './TokenPrimitive'
-
-const token = {
- img: 'https://example.com/token.jpg',
- name: 'Token Name',
- collection: 'Token Collection',
- currencyContract: '0x1234567890abcdef',
- currencyDecimals: 18,
- currencySymbol: 'ETH',
- source: 'https://example.com/source.png',
- price: 1.23,
- usdPrice: 100.00,
- expires: '2022-01-01',
- warning: 'This token is not for sale',
- isOffer: false,
- isUnavailable: false,
- priceSubtitle: 'Token Price',
- royaltiesBps: 100,
- quantity: 10,
-}
-
-const App = () => {
- return (
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code file?
-- This code file defines a React functional component called `TokenPrimitive` that renders a token with various properties such as name, image, price, and source.
-
-2. What external dependencies does this code file use?
-- This code file imports several components and utilities from other files in the project, including `styled` from `stitches.config`, `Box`, `Flex`, `Text`, `Grid`, `FormatCurrency`, `FormatCryptoCurrency`, and `InfoTooltip` from `../primitives`.
-
-3. What props can be passed to the `TokenPrimitive` component?
-- The `TokenPrimitive` component accepts several optional props, including `img`, `name`, `collection`, `currencyContract`, `currencyDecimals`, `currencySymbol`, `source`, `price`, `usdPrice`, `expires`, `warning`, `isOffer`, `isUnavailable`, `priceSubtitle`, `royaltiesBps`, and `quantity`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/TransactionProgress.md b/.autodoc/docs/markdown/ui/src/modal/TransactionProgress.md
deleted file mode 100644
index c2cd74ea1..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/TransactionProgress.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/TransactionProgress.tsx)
-
-The `TransactionProgress` component is a React functional component that displays a progress bar for a transaction. It takes in two props: `fromImg`, which is a string representing the image source of the sender, and `toImgs`, which is an array of strings representing the image sources of the recipients. The component is built using the `Flex` and `Box` primitives from the `../primitives` module, which are used to create a flexible layout for the progress bar.
-
-The `Img` component is a styled component that renders an image with a fixed width and height, a border radius of 4, and object-fit set to cover. It is used to display the sender and recipient images in the progress bar. The `ProgressDot` component is another styled component that renders a small circle with a border radius of 50%, a width and height of 5, and a background color. It is used to display the progress dots in the progress bar.
-
-The `loadingStart`, `loadingMiddle`, and `loadingEnd` keyframes are CSS animations that define the animation for the progress dots. They use the `$neutralSolid` and `$accentText` colors from the `stitches.config` module to create a pulsing effect on the dots.
-
-The `TransactionProgress` component renders a `Flex` container with the `fromImg` image on the left, the progress dots in the middle, and the `toImgs` images on the right. The progress dots are rendered using the `ProgressDot` component with the `loadingStart`, `loadingMiddle`, and `loadingEnd` animations applied to them. The `toImgs` images are rendered using the `Img` component in a loop.
-
-This component can be used in a larger project to display the progress of a transaction, such as a payment or transfer of funds. It provides a visual representation of the transaction progress and can be customized with different images and colors to match the project's branding. Here is an example of how the `TransactionProgress` component can be used:
-
-```
-
-
- )
-}
-```
-
-In this example, the `TokenStatsHeader` component is used in the `App` component to render the header section for a token or collection. The `token` and `collection` objects are passed as props to the `TokenStatsHeader` component.
-## Questions:
- 1. What are the dependencies of this file?
-- This file imports `useTokens` and `useCollections` from a file located two directories up, and `React`, `FC`, and `styled` from other packages.
-
-2. What is the purpose of the `TokenStatsHeader` component?
-- The `TokenStatsHeader` component takes in a `token` and a `collection` as props and returns a styled box containing information about either the token or the collection.
-
-3. What is the purpose of the `optimizeImage` function?
-- The `optimizeImage` function takes in an image URL and a size and returns a new URL with the size appended to it, which is used to display the image in the `Img` component.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/bid/TokenStatsItem.md b/.autodoc/docs/markdown/ui/src/modal/bid/TokenStatsItem.md
deleted file mode 100644
index c3d823449..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/bid/TokenStatsItem.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/bid/TokenStatsItem.tsx)
-
-The `TokenStatsItem` component is a React functional component that renders a single item in a list of tokens. It takes two props: `token` and `collection`. The `token` prop is an optional object that contains information about the token being displayed, while the `collection` prop is a required object that contains information about the collection that the token belongs to.
-
-The component uses the `optimizeImage` function from the `lib/optimizeImage` module to optimize the image that is displayed for the token. If the `token` prop is defined and contains an `image` property, that image is used. Otherwise, the `image` property of the `collection` prop is used. The `optimizeImage` function resizes the image to a maximum width of 600 pixels.
-
-The component renders a `Box` component from the `primitives` module, which contains a `Text` component that displays the word "Item" as a subtitle. Below that, an `Img` component is rendered, which displays the optimized image for the token. If the image is not available, the `Img` component is hidden. The `Img` component is styled to have a width of 100% on small screens, and a fixed height and width of 150 pixels on larger screens.
-
-Below the image, a `Text` component is rendered that displays the name of the token. If the `token` prop is defined and contains a `name` property, that name is used. Otherwise, the `tokenId` property of the `token` prop is used. The `Text` component is styled to have a font size of "h6" and to be ellipsified if it overflows its container.
-
-Finally, a `Box` component is rendered that contains a `Text` component that displays the name of the collection that the token belongs to. The `Text` component is styled to have a font size of "subtitle2" and to be ellipsified if it overflows its container.
-
-This component is likely used in a larger project that displays a list of tokens and their associated information. The `TokenStatsItem` component is responsible for rendering a single item in that list, and is likely used in a loop to render multiple items. The component is designed to be responsive, with the image and text sizes adjusting based on the screen size.
-## Questions:
- 1. What are the dependencies of this file?
-- This file imports `useTokens` and `useCollections` from a file located two levels up in the directory, as well as `Box` and `Text` from a file located one level up in the directory. It also imports `React` and `FC` from the `react` library, and `styled` from a file located in the `stitches.config` directory.
-
-2. What is the purpose of the `optimizeImage` function?
-- The `optimizeImage` function takes an image URL and a size parameter, and returns a new URL that points to an optimized version of the image with the specified size. This is used to ensure that images are not too large and do not slow down the rendering of the page.
-
-3. What is the expected shape of the `Props` object?
-- The `Props` object is expected to have two properties: `token`, which is an optional object that has a `token` property that is also optional, and `collection`, which is a required object. The `token` object is expected to have a `name` and `tokenId` property, and the `collection` object is expected to have a `name` property.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/bid/TransactionBidDetails.md b/.autodoc/docs/markdown/ui/src/modal/bid/TransactionBidDetails.md
deleted file mode 100644
index 5143850ea..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/bid/TransactionBidDetails.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/bid/TransactionBidDetails.tsx)
-
-The `TransactionBidDetails` component is a React functional component that renders a section of a user interface for displaying details about a bid on a token. It takes in three props: `token`, `collection`, and `bidData`.
-
-The `token` prop is an object that contains information about the token being bid on. The `collection` prop is an object that contains information about the collection that the token belongs to. The `bidData` prop is an object that contains information about the bid, including the offer price, the currency used for the bid, and the expiration time of the bid.
-
-The component uses several other components and hooks from the project to render the UI. The `TokenStatsHeader` component is used to display information about the token and collection at the top of the section. The `SelectedAttribute` component is used to display information about the attribute of the token being bid on. The `FormatWrappedCurrency` component is used to format the offer price of the bid.
-
-The `useState` hook is used to manage the state of the `value` variable, which is used to store the formatted offer price of the bid. The `useTimeSince` hook is used to calculate the time since the bid expiration time.
-
-The component renders a `Flex` container that contains the `TokenStatsHeader` component and a `Box` container. The `Box` container contains the `SelectedAttribute` component and a `Flex` container that displays the offer price and expiration time of the bid. The `Flex` container uses the `FormatWrappedCurrency` component to display the offer price and the `useTimeSince` hook to display the expiration time.
-
-This component can be used in a larger project to display details about a bid on a token. It can be used in conjunction with other components and hooks from the project to create a complete user interface for buying and selling tokens. For example, it could be used in a bidding interface that allows users to bid on tokens in a collection.
-## Questions:
- 1. What are the required props for the `TransactionBidDetails` component?
-- The required props for the `TransactionBidDetails` component are `collection` of type `NonNullable
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `CurrencySelector` that renders a dropdown menu for selecting a cryptocurrency.
-
-2. What are the required props for this component?
-- The required props are `currencies`, an array of `Currency` objects, and `currency` and `setCurrency`, which represent the currently selected currency and a function for updating it, respectively.
-
-3. What external dependencies does this code rely on?
-- This code relies on the `@stitches/react` library for CSS styling and the `../../primitives` and `../../types/Currency` modules for other components and types, respectively.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/list/ListingStat.md b/.autodoc/docs/markdown/ui/src/modal/list/ListingStat.md
deleted file mode 100644
index 9b6274118..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/list/ListingStat.md
+++ /dev/null
@@ -1,57 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/list/ListingStat.tsx)
-
-This code defines a React component called `ListingStat` that renders a single listing in a marketplace. The component takes in several props, including the listing object, the URL of an image for the marketplace, and a currency object.
-
-The component renders a `Flex` container with a column direction, which contains two child elements: a `Flex` container with a row direction, and a `Text` element. The row container contains two child elements: a `FormatCryptoCurrency` component, which formats the price of the listing in the specified currency, and an `Img` element, which displays the marketplace image. The `Text` element displays the expiration time of the listing, or "No Expiration" if there is no expiration time.
-
-The `styled` function from the `stitches.config` module is used to create a styled `Img` element with a fixed width and height. The `useTimeSince` hook from the `hooks` module is used to calculate the time since the listing's expiration time, if it exists.
-
-The `ListingStat` component is exported as the default export of the module. The `toString` method is also defined on the component, which returns a CSS class name that can be used to style the component.
-
-This component can be used in a larger project to display individual listings in a marketplace, with the price, expiration time, and marketplace image. It can be used in conjunction with other components to build a larger marketplace UI. For example, it could be used in a list view of all marketplace listings, or in a modal that displays more detailed information about a single listing.
-
-Here is an example of how the `ListingStat` component could be used in a larger React application:
-
-```
-import React from 'react';
-import ListingStat from './ListingStat';
-
-function Marketplace() {
- const listings = [
- {
- id: 1,
- weiPrice: 1000000000000000000,
- expirationTime: Date.now() + 86400000,
- },
- {
- id: 2,
- weiPrice: 500000000000000000,
- expirationTime: null,
- },
- ];
-
- return (
- Selected currency: {selectedCurrency.symbol}
-
- {listings.map((listing) => (
-
- );
-}
-```
-
-This example defines a `Marketplace` component that renders a list of `ListingStat` components, passing in sample data for the listings, marketplace image, and currency. The `key` prop is used to ensure that each `ListingStat` component has a unique identifier.
-## Questions:
- 1. What is the purpose of this code and what does it do?
- This code defines a React component called `ListingStat` that renders a listing with a price and expiration time, along with an image. It uses various imported components and hooks to achieve this.
-
-2. What props does the `ListingStat` component expect and what are their types?
- The `ListingStat` component expects three props: `listing` of type `Listings[0]`, `marketImg` of type `string`, and `currency` of type `Currency`. `Listings` and `Currency` are imported types from other files.
-
-3. What is the significance of the `ListingStat.toString` method?
- The `ListingStat.toString` method returns a CSS class name that can be used to style the component. This is useful for styling components with CSS-in-JS libraries like `styled-components` or `stitches`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/list/MarketplacePriceInput.md b/.autodoc/docs/markdown/ui/src/modal/list/MarketplacePriceInput.md
deleted file mode 100644
index 0060e3a66..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/list/MarketplacePriceInput.md
+++ /dev/null
@@ -1,56 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/list/MarketplacePriceInput.tsx)
-
-The `MarketplacePriceInput` component is a React component that renders an input field for a marketplace listing price. It takes in several props, including the marketplace object, the collection object, the currency object, an array of currencies, and several callback functions.
-
-The component calculates the profit of the listing based on the marketplace fee, the collection royalties, the true price of the listing, and the quantity of the listing. It then renders the input field, the currency selector, and the profit and USD price of the listing.
-
-The component also conditionally renders the marketplace image, the currency icon and symbol, and the currency selector based on the `nativeOnly` and `currencies` props. If `nativeOnly` is true and there is more than one currency in the `currencies` array, the component renders the `CurrencySelector` component. Otherwise, it renders the currency icon and symbol.
-
-This component can be used in a larger project that involves creating a marketplace for buying and selling items. It can be used to allow users to input the listing price for their items and to calculate the profit and USD price of the listing. The component can also be customized to fit the design and functionality of the larger project.
-
-Example usage:
-
-```
-import MarketplacePriceInput from './MarketplacePriceInput'
-
-const MyComponent = () => {
- const marketplace = { /* marketplace object */ }
- const collection = { /* collection object */ }
- const currency = { /* currency object */ }
- const currencies = [ /* array of currencies */ ]
-
- const handleCurrencyChange = (currency) => {
- // handle currency change
- }
-
- const handlePriceChange = (e) => {
- // handle price change
- }
-
- const handlePriceBlur = (e) => {
- // handle price blur
- }
-
- return (
-
- {marketplaces.map((marketplace) => (
- handleSelection(marketplace)}
- />
- ))}
-
- )
-}
-
-export default MarketplaceList
-```
-
-In this example, the `MarketplaceList` component renders a list of marketplaces using the `MarketplaceToggle` component. The `marketplaces` array contains information about each marketplace, including its name, image URL, and fee percentage. The `selectedMarketplaces` state variable is an array that keeps track of which marketplaces are currently selected.
-
-The `handleSelection` function is called when the user clicks on a toggle switch. If the selected marketplace is already in the `selectedMarketplaces` array, it is removed. Otherwise, it is added to the array.
-
-Overall, the `MarketplaceToggle` component is a reusable component that can be used to render a toggle switch for a marketplace in a larger project. It is flexible and can be customized to fit the specific needs of the project.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a React component called `MarketplaceToggle` that renders a toggle switch for a marketplace with its name, image, and fee percentage.
-
-2. What are the props expected by the `MarketplaceToggle` component?
- The `MarketplaceToggle` component expects two props: `marketplace`, which is an object containing information about the marketplace being toggled, and `onSelection`, which is a function that gets called when the toggle switch is clicked.
-
-3. What are the dependencies of this code?
- This code depends on the `React` library and several components from a custom `primitives` library, as well as a custom `useMarketplaces` hook that provides information about marketplaces.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/list/Token.md b/.autodoc/docs/markdown/ui/src/modal/list/Token.md
deleted file mode 100644
index b47c405ad..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/list/Token.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/list/Token.tsx)
-
-The `Token` component is a React functional component that renders a single NFT (non-fungible token) item. It receives two optional props: `token` and `collection`. The `token` prop is an object that contains information about the NFT, such as its name, image, and collection. The `collection` prop is an object that contains information about the collection that the NFT belongs to, such as its name and image.
-
-The component first uses the `optimizeImage` function from the `lib` directory to optimize the image of the NFT. This function takes an image URL and a maximum width as arguments and returns a new URL that points to an optimized version of the image. The optimized image is then used as the source of an `Img` component, which is a styled `img` HTML element.
-
-The `Token` component then renders a `Box` component that contains the `Img` component, the name of the NFT, and the name of the collection that the NFT belongs to. The `Box` component is styled to have a fixed width of 120 pixels and a margin of 4 pixels on the right side. On screens with a width of 600 pixels or more (using the `@bp1` media query), the `Box` component has a width of 100% and no margin.
-
-The name of the NFT is rendered as an `h6` HTML element with ellipsis overflow and a flex property of 1, which allows it to take up the remaining horizontal space in the `Box` component. If the `token` prop is not provided or does not contain a name, the component renders the NFT's `tokenId` instead.
-
-The name of the collection is rendered as a `Text` component with a `subtitle2` style and ellipsis overflow. If the `token` prop is not provided or does not contain a collection name, the component does not render anything.
-
-This component can be used in a larger project that displays a collection of NFTs, such as a marketplace or a gallery. It can be used to render a grid of NFT items, each with its own name and image. The `Token` component can be customized by passing different `token` and `collection` props, or by modifying its styles using the `styled` function from the `stitches.config` file. For example, the `Img` component can be styled to have a different border radius or object fit.
-## Questions:
- 1. What are the dependencies of this file?
-- The file imports `useTokens` and `useCollections` from a file located two directories up, and `React`, `FC`, and `styled` from other packages.
-
-2. What is the purpose of the `optimizeImage` function?
-- The `optimizeImage` function takes an image URL and a size and returns a new URL that points to an optimized version of the image with the specified size.
-
-3. What is the purpose of the `Token` component?
-- The `Token` component takes a `token` and a `collection` as props and renders an image, a name, and a collection name for the token. It also uses the `optimizeImage` function to optimize the image URL.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/list/TokenListingDetails.md b/.autodoc/docs/markdown/ui/src/modal/list/TokenListingDetails.md
deleted file mode 100644
index ac8baede3..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/list/TokenListingDetails.md
+++ /dev/null
@@ -1,44 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/list/TokenListingDetails.tsx)
-
-The `TokenListingDetails` component is a React functional component that renders a token and its associated listing data. It takes in several props, including a `token` object, a `collection` object, an array of `listingData`, and a `currency` object.
-
-The `Token` component is imported from a file called `Token` and is used to render the token. The `ListingStat` component is imported from a file called `ListingStat` and is used to render the listing data.
-
-The component is wrapped in a `Flex` component from a file called `Flex` and a `Box` component from a file called `Box`. These components are used to create a flexible layout that adjusts based on the screen size.
-
-The `TokenListingDetails` component maps over the `listingData` array and renders a `ListingStat` component for each item in the array. The `ListingStat` component takes in several props, including a `listing` object, a `marketImg` string, and a `currency` object.
-
-The `TokenListingDetails` component is exported as the default export of the file. This allows other files to import and use the component in their own React components.
-
-This component is likely used in a larger project that involves displaying tokens and their associated listing data. It could be used in a marketplace application where users can buy and sell tokens.
-
-Example usage:
-
-```
-import TokenListingDetails from './TokenListingDetails'
-
-function App() {
- const token = { /* token object */ }
- const collection = { /* collection object */ }
- const listingData = [ /* array of listing data objects */ ]
- const currency = { /* currency object */ }
-
- return (
-
-
- )
-}
-```
-
-In this example, `MyComponent` renders an `ItemToggle` component and either an `ItemList` or a `CurrencyConverter` component, depending on the value of `isItemsToggled`. The `currency` prop is passed down from the `useChainCurrency` hook. The `isItemsToggled` and `setIsItemsToggled` props are used to manage the state of the toggle group.
-## Questions:
- 1. What is the purpose of the `ItemToggle` component?
-- The `ItemToggle` component is a toggle group that allows the user to switch between displaying items or currency.
-
-2. What is the significance of the `useChainCurrency` hook?
-- The `useChainCurrency` hook is used to retrieve the currency data for the current chain.
-
-3. What is the expected behavior when the user clicks on one of the toggle buttons?
-- When the user clicks on one of the toggle buttons, the `isItemsToggled` state is updated to reflect the user's selection. If the user selects "items", `isItemsToggled` is set to `true`, otherwise it is set to `false`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/modal/sweep/SweepItem.md b/.autodoc/docs/markdown/ui/src/modal/sweep/SweepItem.md
deleted file mode 100644
index a00f43f0c..000000000
--- a/.autodoc/docs/markdown/ui/src/modal/sweep/SweepItem.md
+++ /dev/null
@@ -1,16 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/modal/sweep/SweepItem.tsx)
-
-The code defines a React functional component called `SweepItem`. This component takes in four props: `name`, `image`, `amount`, and `currency`. The `name` prop is a string that represents the name of the item being swept. The `image` prop is a string that represents the URL of the image of the item being swept. The `amount` prop is a number that represents the amount of the item being swept. The `currency` prop is an object that is returned from the `useChainCurrency` hook.
-
-The purpose of this component is to display a single item that is being swept. The item is displayed as a small card with the item's image, name, and amount. The card is wrapped in a tooltip that displays the item's name when the user hovers over the card.
-
-The component uses several other components from the `primitives` module, including `Flex`, `FormatCryptoCurrency`, `Img`, and `Text`. The `Flex` component is used to create a container for the card that allows for flexible layout. The `Img` component is used to display the item's image. The `Text` component is used to display the item's name in the tooltip. The `FormatCryptoCurrency` component is used to format the item's amount as a cryptocurrency value.
-
-The `SweepItem` component is likely used in a larger project that involves sweeping multiple items. It could be used in a wallet application that allows users to sweep multiple types of cryptocurrencies into their wallet. The component could be reused for each type of cryptocurrency being swept, with the `name`, `image`, `amount`, and `currency` props being passed in for each type.
-## Questions:
- 1. What is the purpose of the `useChainCurrency` hook and how is it used in this code?
-- The `useChainCurrency` hook is used to retrieve information about a specific cryptocurrency chain, and it is passed as a prop to the `SweepItem` component.
-2. What is the expected format of the `image` prop and how is it used in this code?
-- The `image` prop is expected to be a string representing the URL of an image, and it is used as the `src` attribute of an `Img` component.
-3. What is the purpose of the `Tooltip` component and how is it configured in this code?
-- The `Tooltip` component is used to display a tooltip when the user hovers over the `Flex` component. It is configured to display the `name` prop as the content of the tooltip, and to position the tooltip above the `Flex` component with a small offset.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/Anchor.md b/.autodoc/docs/markdown/ui/src/primitives/Anchor.md
deleted file mode 100644
index a39411c57..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/Anchor.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Anchor.tsx)
-
-This code exports a styled anchor component that can be used in a React project. The component is defined using the `styled` function from the `stitches.config` module, which allows for the creation of custom styles for HTML elements. The resulting `StyledAnchor` component has several variants that can be used to customize its appearance, including color and font weight.
-
-The `StyledAnchor` component is defined with default styles that include a transparent background, a pointer cursor, and a font size of 16 pixels. The font family is set to `$body`, which is a variable defined in the `stitches.config` module. The color and text decoration are set to `inherit`, which means they will inherit the styles of the parent element.
-
-The `StyledAnchor` component also has a `$$focusColor` variable that is defined as `$colors$neutralTextContrast`. This variable is used to set the color of the component when it is in focus. When the component is in focus, it will have a border radius of 4 pixels and a box shadow that is 2 pixels wide and the color of `$$focusColor`.
-
-The `StyledAnchor` component has three color variants: `primary`, `gray`, and `error`. The `primary` variant has a color of `$accentText` and changes to `$accentSolidHover` when hovered over. The `gray` variant has a color of `$neutralText` and changes to `$accentText` when hovered over. The `error` variant has a color of `$errorAccent`.
-
-The `StyledAnchor` component also has two weight variants: `heavy` and `medium`. The `heavy` variant has a font weight of 700, while the `medium` variant has a font weight of 500.
-
-Finally, the `StyledAnchor` component is exported using the `forwardRef` function from React. This allows the component to forward a ref to its child component, which can be useful for accessing the DOM node of the child component. The `StyledAnchor` component takes in a `children` prop and any other props that are passed to it, and renders an anchor element with the `StyledAnchor` styles applied to it.
-
-Overall, this code provides a customizable anchor component that can be used in a React project. The component has several variants that can be used to customize its appearance, and it can forward a ref to its child component if needed. Here is an example of how the `StyledAnchor` component could be used in a React project:
-
-```
-import React from 'react'
-import StyledAnchor from './StyledAnchor'
-
-function MyComponent() {
- return (
-
- Click me!
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a styled anchor component using React and Stitches CSS-in-JS library.
-
-2. What are the available variants for the styled anchor component?
-- The available variants are `color` and `weight`. `color` has three options: `primary`, `gray`, and `error`. `weight` has two options: `heavy` and `medium`.
-
-3. What is the purpose of the `forwardRef` function in this code?
-- The `forwardRef` function is used to forward the `ref` attribute from the parent component to the `StyledAnchor` component, allowing the parent component to access the `ref` of the `StyledAnchor`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/Box.md b/.autodoc/docs/markdown/ui/src/primitives/Box.md
deleted file mode 100644
index 9d020c16e..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/Box.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Box.tsx)
-
-This code is a styled component that creates a div element with specific CSS properties. The purpose of this code is to provide a reusable styled component that can be used throughout the larger project.
-
-The `import` statement at the beginning of the code imports the `styled` function from the `stitches.config` file located in a parent directory. This function is used to create a styled component by passing in the HTML element to be styled (in this case, a div) and an object containing CSS properties and their values.
-
-The CSS properties included in this object are `boxSizing`, `borderStyle`, and `borderWidth`. The `boxSizing` property sets the sizing behavior of the element's box model, while `borderStyle` and `borderWidth` set the style and width of the element's border.
-
-By exporting this styled component as the default export of this file, it can be easily imported and used in other files within the project. For example, if a component needs a div element with the same styling as defined in this file, it can simply import this component and use it like so:
-
-```
-import StyledDiv from './path/to/this/file'
-
-function MyComponent() {
- return (
- Collapsible content goes here
-
-
- )
-}
-```
-
-In this example, the `DatePicker` component is used to render a date picker. The `value` prop is set to the `date` state variable, and the `onChange` prop is set to a function that updates the `date` state variable when the user selects a new date.
-## Questions:
- 1. What is the purpose of this code?
- - This code exports a custom input component that wraps around the `Flatpickr` component from the `react-flatpickr` library, and maps the `onChange`, `value`, `defaultValue`, and `options` props from `Flatpickr` to the custom input component.
-
-2. What dependencies are required for this code to work?
- - This code requires the `react`, `react-dom`, and `react-flatpickr` libraries to be installed.
-
-3. What is the expected format for the `options` prop?
- - The `options` prop is an object that can contain any of the options supported by the `Flatpickr` component, with the addition of a `dateFormat` option that is set to `'m/d/Y h:i K'` by default.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/Dialog.md b/.autodoc/docs/markdown/ui/src/primitives/Dialog.md
deleted file mode 100644
index 8e0c193a0..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/Dialog.md
+++ /dev/null
@@ -1,43 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Dialog.tsx)
-
-The code is a React component that provides a customizable dialog box that can be used in a larger project. The dialog box is composed of two main components: the `Overlay` and the `Content`. The `Overlay` is a full-screen, semi-transparent background that appears behind the `Content` when the dialog box is open. The `Content` is the actual dialog box that appears on top of the `Overlay`.
-
-The `Dialog` component is the main component that wraps the `Overlay` and `Content` components. It takes in several props, including `trigger`, `portalProps`, `onOpenChange`, `open`, and `size`. The `trigger` prop is the element that triggers the opening of the dialog box. The `portalProps` prop is an object that contains props that are passed to the `DialogPrimitive.DialogPortal` component. The `onOpenChange` prop is a callback function that is called when the dialog box is opened or closed. The `open` prop is a boolean that determines whether the dialog box is open or closed. The `size` prop is an enum that determines the size of the dialog box.
-
-The `AnimatedOverlay` and `AnimatedContent` components are higher-order components that wrap the `Overlay` and `Content` components, respectively. They add animation to the opening and closing of the dialog box. The `StyledAnimatedContent` component is a styled version of the `AnimatedContent` component.
-
-The `useMediaQuery` hook is used to determine whether the screen size is less than or equal to 520px. If the screen size is less than or equal to 520px, the dialog box is displayed differently than if the screen size is greater than 520px.
-
-Overall, this code provides a customizable dialog box that can be used in a larger project. It is flexible and can be used in a variety of contexts. Below is an example of how the `Dialog` component can be used:
-
-```
-import { Dialog } from './Dialog'
-
-function App() {
- const [open, setOpen] = useState(false)
-
- return (
-
-
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a Dialog component that can be used to create modal dialogs in a React application.
-
-2. What external libraries or dependencies does this code use?
-- This code uses several external libraries and dependencies, including Stitches for styling, Radix UI for dialog components, React for building the UI, and Framer Motion for animations.
-
-3. What props can be passed to the Dialog component?
-- The Dialog component accepts several props, including trigger (the element that triggers the dialog), portalProps (props to pass to the dialog portal), onOpenChange (a callback function that is called when the dialog is opened or closed), open (a boolean indicating whether the dialog is open or closed), and size (an enum indicating the size of the dialog).
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/ErrorWell.md b/.autodoc/docs/markdown/ui/src/primitives/ErrorWell.md
deleted file mode 100644
index 6467f3db0..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/ErrorWell.md
+++ /dev/null
@@ -1,32 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/ErrorWell.tsx)
-
-The code above defines a React component called `ErrorWell` that renders an error message with an icon. The component takes two props: `message` and `css`. The `message` prop is an optional string that represents the error message to be displayed. If no message is provided, a default message will be displayed. The `css` prop is an object that contains CSS styles to be applied to the component.
-
-The component is composed of two child components: `Flex` and `Text`. The `Flex` component is a custom component that renders a flexible container with a set of predefined styles. The `Text` component is another custom component that renders text with a set of predefined styles.
-
-The `ErrorWell` component renders a `Flex` component with the following styles:
-
-- `color: '$errorAccent'`: sets the text color to a predefined error accent color.
-- `p: '$4'`: sets the padding to a predefined value.
-- `gap: '$2'`: sets the gap between child elements to a predefined value.
-- `background: '$wellBackground'`: sets the background color to a predefined well background color.
-- `...css`: applies any additional styles passed in through the `css` prop.
-
-The `Flex` component has one child element, a `FontAwesomeIcon` component from the `@fortawesome/react-fontawesome` library. This component renders an icon of a circle with an exclamation point inside. The icon is imported from the `@fortawesome/free-solid-svg-icons` library.
-
-The `Flex` component also has a second child element, a `Text` component. This component renders the error message passed in through the `message` prop, or a default message if no message is provided. The text is styled using the `style` prop with a value of "body3" and the `color` prop with a value of "errorLight".
-
-This component can be used in the larger project to display error messages to users in a consistent and visually appealing way. Developers can pass in custom styles through the `css` prop to customize the appearance of the error message. Here is an example of how the component can be used:
-
-```
-
-
- )
-}
-
-export default Header
-```
-
-In this example, the `EthLogo` component is used to display the Ethereum logo next to the application name in the header of the page.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a React component called `EthLogo` that displays one of three different Ethereum icons based on the current theme.
-
-2. What is the `ThemeContext` and where does it come from?
- The `ThemeContext` is imported from a file called `ReservoirKitProvider` located in the parent directory. It is used to access the current theme of the application.
-
-3. What is the `ReservoirKitThemeContext` and how is it used?
- The `ReservoirKitThemeContext` is imported from a file called `stitches.config` located in the parent directory. It is used to define the type of the `ethIcon` property in the theme object, which is then used to determine which Ethereum icon to display in the `EthLogo` component.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/Flex.md b/.autodoc/docs/markdown/ui/src/primitives/Flex.md
deleted file mode 100644
index 614c2fa5d..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/Flex.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Flex.tsx)
-
-This code defines a set of CSS properties for a flexible container element using the Stitches library. The `flexCss` object contains properties for `display`, `boxSizing`, `borderStyle`, and `borderWidth`, as well as several variants for `align`, `justify`, `direction`, and `wrap`. These variants allow for different alignment, justification, direction, and wrapping options for the flexible container element.
-
-The `styled` function from the Stitches library is used to create two styled components: a default `div` element and an `AnimatedFlex` component that uses the `motion` library from Framer Motion. Both components use the `flexCss` object to define their CSS properties.
-
-This code can be used in the larger project to create flexible container elements with different alignment, justification, direction, and wrapping options. For example, the `AnimatedFlex` component can be used to create animated flexible container elements with the same set of options. Here is an example of how the `AnimatedFlex` component can be used:
-
-```
-import { AnimatedFlex } from 'zoo'
-
-const MyComponent = () => {
- return (
- My Ethereum App
-
-
- )
-}
-```
-
-This will display the formatted cryptocurrency amount along with the corresponding icon for Ethereum (ETH).
-## Questions:
- 1. What is the purpose of the `FormatCryptoCurrency` component?
-- The `FormatCryptoCurrency` component is used to format and display cryptocurrency amounts along with their corresponding icons and symbols.
-
-2. What external libraries or dependencies does this code use?
-- This code imports several external libraries and dependencies, including `FormatCrypto`, `React`, `ethers` from the `constants` module, `CryptoCurrencyIcon`, `useNetwork` from the `wagmi` module, `Tooltip`, and `Anchor`.
-
-3. What is the significance of the `blockExplorerBaseUrl` variable?
-- The `blockExplorerBaseUrl` variable is used to determine the base URL for the block explorer associated with the active blockchain network. If no block explorer is associated with the network, the default URL is set to `https://etherscan.io`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/FormatCurrency.md b/.autodoc/docs/markdown/ui/src/primitives/FormatCurrency.md
deleted file mode 100644
index 8d93ee9e8..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/FormatCurrency.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/FormatCurrency.tsx)
-
-The `FormatCurrency` component is a React functional component that formats a given amount of money into a currency format. It takes in a `Props` object that contains the `amount` to be formatted, the `currency` to format the amount in, and the `maximumFractionDigits` to be displayed.
-
-The `FormatCurrency` component uses the `useState` and `useEffect` hooks to manage the state of the formatted value. The `useState` hook initializes the `formattedValue` state to an empty string. The `useEffect` hook is used to update the `formattedValue` state whenever the `amount` or `maximumFractionDigits` props change.
-
-The `useEffect` hook first checks if the `amount` prop is truthy. If it is, it calculates the lowest possible value based on the `maximumFractionDigits` prop and checks if the `amount` is less than that value. If the `amount` is less than the lowest possible value, the `formattedValue` state is set to `<` concatenated with the formatted lowest possible value. Otherwise, the `amount` is formatted using the `Intl.NumberFormat` constructor and the `formattedValue` state is set to the formatted amount. If the `amount` prop is falsy, the `formattedValue` state is set to an empty string.
-
-Finally, the `FormatCurrency` component returns a `Text` component with the `formattedValue` state as its child. The `Text` component also receives any additional props passed to the `FormatCurrency` component and sets its `style` and `color` props to default values if they are not provided.
-
-This component can be used in a larger project to format currency values in a consistent and localized way. For example, it can be used to format prices in an e-commerce website or financial application. Here is an example usage of the `FormatCurrency` component:
-
-```
-Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
- Item 1
- Item 2
- Item 3
-
- 
-
- )
-}
-```
-
-In the example above, the `Img` component is used to display an image with the `src` attribute set to `"https://example.com/image.jpg"` and the `alt` attribute set to `"Example Image"`. If the image fails to load, the `Img` component will display a placeholder icon instead.
-## Questions:
- 1. What does this code do?
- This code exports a React component called `Img` that renders an image. If the image fails to load, it displays a fallback icon instead.
-
-2. What dependencies does this code have?
- This code imports several dependencies, including `@fortawesome/free-solid-svg-icons`, `@fortawesome/react-fontawesome`, `@stitches/react`, and `react`. It also uses the `useState` and `useEffect` hooks from `react`.
-
-3. What is the purpose of the `useEffect` hook in this code?
- The `useEffect` hook is used to reset the `imageBroken` state to `false` whenever the `src` prop changes. This ensures that the fallback icon is only displayed when the image fails to load, not when the `src` prop is updated.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/InfoTooltip.md b/.autodoc/docs/markdown/ui/src/primitives/InfoTooltip.md
deleted file mode 100644
index 3d7e73c38..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/InfoTooltip.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/InfoTooltip.tsx)
-
-The code above is a React component that renders an information tooltip with an icon. The tooltip is displayed when the user hovers over the icon. The component takes in four props: `side`, `content`, `width`, and `kind`.
-
-The `side` prop determines the position of the tooltip relative to the icon. It can be set to `top`, `bottom`, `left`, or `right`. The `content` prop is the text that will be displayed in the tooltip. The `width` prop determines the width of the tooltip. The `kind` prop is optional and can be set to either `'info'` or `'error'`. If it is set to `'error'`, the tooltip will be styled with an error accent color.
-
-The component uses the `Popover` and `Box` components from an external library, as well as the `FontAwesomeIcon` component from the `@fortawesome/react-fontawesome` library. The `Popover` component is responsible for displaying the tooltip when the user hovers over the icon. The `Box` component is used to wrap the icon and apply styles to it. The `FontAwesomeIcon` component renders the icon itself, which is an information circle by default.
-
-This component can be used in a larger project to provide users with additional information or context about certain elements on the page. For example, it could be used to provide definitions for technical terms or to explain the purpose of certain buttons or links. Here is an example of how the component could be used:
-
-```
-import InfoTooltip from './InfoTooltip'
-
-const MyComponent = () => {
- return (
-
-
-
-
- )
-}
-```
-
-In this example, an `InfoTooltip` component is added to a button to provide users with information about what the button does. The tooltip will be displayed on the right side of the button when the user hovers over the icon. The text in the tooltip will read "Click this button to save your changes." and the width of the tooltip will be 200 pixels.
-## Questions:
- 1. What is the purpose of this code?
-- This code defines a React component called `InfoTooltip` that renders a popover with an icon and text content.
-
-2. What are the required and optional props for this component?
-- The required props are `side`, `content`, and `width`, while the optional prop is `kind` which can be either `'info'` or `'error'`.
-
-3. What other components or libraries are being imported and used in this code?
-- This code imports and uses the `FontAwesomeIcon` component from the `@fortawesome/react-fontawesome` library, as well as the `faInfoCircle` icon from the `@fortawesome/free-solid-svg-icons` library. It also imports the `Box`, `Popover`, and `Text` components from an unknown module or library represented by `'.'`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/Input.md b/.autodoc/docs/markdown/ui/src/primitives/Input.md
deleted file mode 100644
index 708ea846f..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/Input.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Input.tsx)
-
-The `Input` component in this file is a custom input field that can be used in a React application. It is built using the `styled` function from the `stitches.config` file, which allows for the creation of custom styles for HTML elements.
-
-The `StyledInput` component is created using the `styled` function and is passed an `'input'` string as its first argument. This creates a new component that is an input field with custom styles. The styles include resetting all default styles with `all: 'unset'`, setting the width to `100%`, adding padding, setting the border radius, font family, font size, and text color. The background color is set to `$inputBackground`, which is a variable defined in the `stitches.config` file. The `$$focusColor` variable is also defined in the `stitches.config` file and is used to set the color of the input field when it is in focus.
-
-The `StyledInput` component also includes styles for the placeholder text and focus state. Additionally, there are styles for removing the up and down arrows on number inputs in webkit browsers and for displaying number inputs as text fields in Firefox.
-
-The `Input` component is then created using the `forwardRef` function from React. This allows the `ref` to be passed to the `StyledInput` component. The `Input` component also accepts several props, including `icon`, `containerCss`, and `iconCss`. The `icon` prop is used to add an icon to the input field, the `containerCss` prop is used to add custom styles to the container of the input field, and the `iconCss` prop is used to add custom styles to the icon.
-
-The `Input` component is a wrapper around the `StyledInput` component and includes the ability to add an icon to the input field. The `icon` prop is passed to a `Box` component that is absolutely positioned within the container of the input field. The `StyledInput` component is then rendered within a `Flex` component, which allows for the icon and input field to be displayed side by side.
-
-Overall, this file provides a reusable `Input` component that can be used throughout a React application. It includes custom styles for the input field and the ability to add an icon to the input field.
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a custom input component that can be used in a React application. It includes styling for the input and an optional icon.
-
-2. What external libraries or dependencies does this code use?
-- This code uses the `stitches.config` and `@stitches/react` libraries for styling, as well as the `react` library for building the component.
-
-3. What props can be passed to the `Input` component?
-- The `Input` component accepts props for the input element, as well as additional props for an optional icon and custom styling for the container and icon. These props are passed as an object with the `icon`, `containerCss`, and `iconCss` properties.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/Loader.md b/.autodoc/docs/markdown/ui/src/primitives/Loader.md
deleted file mode 100644
index 3ed4b6355..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/Loader.md
+++ /dev/null
@@ -1,56 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Loader.tsx)
-
-This code defines a React component called `Loader` that displays a spinning icon to indicate that content is loading. The component imports several dependencies, including the `faSpinner` icon from the `@fortawesome/free-solid-svg-icons` library, the `styled` function from a `stitches.config` file, and the `motion` and `FontAwesomeIcon` components from the `framer-motion` and `@fortawesome/react-fontawesome` libraries, respectively.
-
-The `Loader` component is defined as a function that takes in props of type `ComponentPropsWithoutRef
- {isLoading ? (
-
- )
-}
-
-export default App
-```
-
-In this example, the `Loader` component is conditionally rendered based on the value of the `isLoading` state variable. When `isLoading` is `true`, the `Loader` component is displayed, and when `isLoading` is `false`, the fetched data is rendered instead. This provides a visual cue to the user that content is being loaded and prevents them from interacting with the page until the data is ready.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a Loader component that displays a spinning icon while content is loading.
-
-2. What libraries or frameworks are being used in this code?
- This code imports several libraries including '@fortawesome/free-solid-svg-icons', 'react', '@fortawesome/react-fontawesome', 'framer-motion', and a custom library called 'stitches.config'.
-
-3. What styling is applied to the Loader component?
- The Loader component is styled using the 'stitches.config' library to center the icon horizontally and vertically and set the color to '$neutralText'.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/Popover.md b/.autodoc/docs/markdown/ui/src/primitives/Popover.md
deleted file mode 100644
index 1a0ac1137..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/Popover.md
+++ /dev/null
@@ -1,37 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Popover.tsx)
-
-The code defines a custom React component called `RKPopover` that wraps the `Popover` component from the `@radix-ui/react-popover` library. The `RKPopover` component takes in several props, including `content`, `side`, and `width`, which are used to customize the appearance and behavior of the popover.
-
-The `RKPopover` component renders a `Popover.Root` component that contains a `Popover.Trigger` and a `Popover.Content`. The `Popover.Trigger` component is a wrapper around the `children` prop, which is passed in as a child of the `RKPopover` component. The `Popover.Content` component contains an `Arrow` component and a `Box` component that wraps the `content` prop.
-
-The `Arrow` component is a custom styled component that renders a small arrow that points to the `Popover.Trigger` component. The `Box` component is another custom styled component that wraps the `content` prop and applies some styles to it, including padding, a maximum width, and a background color.
-
-The `RKPopover` component is designed to be used as a customizable popover that can be triggered by clicking on a button or other element. The `content` prop can be used to pass in any React node, such as text, images, or other components, that will be displayed inside the popover. The `side` prop can be used to specify which side of the trigger element the popover should appear on, and the `width` prop can be used to specify the width of the popover.
-
-Here is an example of how the `RKPopover` component might be used in a larger project:
-
-```
-import React from 'react'
-import RKPopover from './components/RKPopover'
-
-const MyComponent = () => {
- return (
-
- {/* Render data here */}
-
- )}
-
- Hello, world!
} side="right" width="200px">
-
-
-
- )
-}
-```
-
-In this example, the `RKPopover` component is used to create a popover that appears to the right of a button when it is clicked. The `content` prop is set to a simple `div` element that contains the text "Hello, world!", and the `width` prop is set to 200 pixels.
-## Questions:
- 1. What is the purpose of this code and how is it used in the zoo project?
- This code defines a custom popover component called `RKPopover` that is used to display content in a popover. It is likely used throughout the zoo project wherever a popover is needed.
-
-2. What is the significance of the `styled` function and how is it used in this code?
- The `styled` function is used to create custom styled components for the `Arrow` and `Content` components of the popover. It allows for easy customization of the appearance of these components using CSS-in-JS syntax.
-
-3. What are the available props for the `RKPopover` component and how are they used?
- The available props for the `RKPopover` component include `content`, `side`, and `width`, which are used to specify the content to display in the popover, the side of the trigger element to display the popover on, and the width of the popover, respectively. These props are passed down to the `Popover` components as well as the custom `Box` component used to display the content.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/PseudoInput.md b/.autodoc/docs/markdown/ui/src/primitives/PseudoInput.md
deleted file mode 100644
index 0841d264e..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/PseudoInput.md
+++ /dev/null
@@ -1,30 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/PseudoInput.tsx)
-
-The code above is a styled component that creates a PseudoInput element. The purpose of this component is to provide a consistent and customizable input element that can be used throughout the larger project.
-
-The component is created using the styled function from the Stitches library, which allows for easy creation of custom styles for HTML elements. The first argument passed to the styled function is the HTML element to be styled, in this case a div. The second argument is an object containing the CSS properties and values to be applied to the element.
-
-The CSS properties applied to the PseudoInput element include resetting all default styles with "all: unset", setting the width to "auto", adding padding and a border radius, setting the font family, size, and weight, and defining the text and background colors. These styles can be easily customized by modifying the values in the object passed to the styled function.
-
-The PseudoInput component is then exported as the default export of the module, allowing it to be imported and used in other parts of the project. For example, if a form component needs an input element, it can import the PseudoInput component and use it like so:
-
-```
-import PseudoInput from './path/to/PseudoInput'
-
-function Form() {
- return (
-
- )
-}
-```
-
-Overall, the PseudoInput component provides a reusable and customizable input element that can be used throughout the larger project, helping to maintain consistency and reduce code duplication.
-## Questions:
- 1. What is the purpose of the `styled` function and where is it imported from?
- - The `styled` function is used to create a styled component and it is imported from the `stitches.config` file located in the parent directory.
-2. What is the significance of the `all: 'unset'` property in the style object?
- - The `all: 'unset'` property resets all CSS properties to their initial values, which ensures that no unwanted styles are inherited by the component.
-3. What is the `$space` variable used for in the `borderRadius` property?
- - The `$space` variable is likely a value defined in the `stitches.config` file and is used to set the border radius to a specific value based on the design system's spacing scale.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/ScrollArea.md b/.autodoc/docs/markdown/ui/src/primitives/ScrollArea.md
deleted file mode 100644
index 3ed360560..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/ScrollArea.md
+++ /dev/null
@@ -1,36 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/ScrollArea.tsx)
-
-The code defines a custom scrollable area component called `RKScrollArea` using the `@radix-ui/react-scroll-area` package and the `stitches.config` file. The component has a fixed height of 322 pixels, a border radius of `$space$2`, and a box shadow of `0 2px 10px $inputBackground`. It also has a transparent background color and inherits the border radius of its parent element.
-
-The `RKScrollArea` component has four child components: `ScrollAreaViewport`, `ScrollAreaScrollbar`, `ScrollAreaThumb`, and `ScrollAreaCorner`. The `ScrollAreaViewport` component is the container for the scrollable content. The `ScrollAreaScrollbar` component is the container for the scroll bar and has two orientations: vertical and horizontal. The `ScrollAreaThumb` component is the draggable handle of the scrollbar. The `ScrollAreaCorner` component is the corner where the vertical and horizontal scrollbars meet.
-
-The `RKScrollArea` component takes in any children components and passes them to the `ScrollAreaViewport` component. The `ScrollAreaScrollbar` component has two `orientation` props: `vertical` and `horizontal`. The `ScrollAreaThumb` component is a child of the `ScrollAreaScrollbar` component and is responsible for the draggable handle of the scrollbar. The `ScrollAreaCorner` component is a child of the `ScrollArea` component and is responsible for the corner where the vertical and horizontal scrollbars meet.
-
-The `RKScrollArea` component can be used in any part of the project where a custom scrollable area is needed. For example, it can be used in a long list of items where the user needs to scroll through the list. The component can be styled using the `stitches.config` file to match the design of the project.
-
-Example usage:
-
-```
-import RKScrollArea from './path/to/RKScrollArea'
-
-const longList = ['item1', 'item2', 'item3', ...]
-
-const MyComponent = () => {
- return (
- {item}
- ))}
-
-
- )
-}
-```
-
-In this example, the Slider component is used to render a slider that updates the value in state when the user drags the thumb. The current value is displayed in a paragraph element.
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom slider component using React and the Radix UI Slider library.
-
-2. What are the styled components used in this code and what are their styles?
- The code defines four styled components: `SliderRoot`, `SliderTrack`, `SliderRange`, and `SliderThumb`. `SliderRoot` sets the overall style of the slider, `SliderTrack` sets the style of the track that the thumb slides on, `SliderRange` sets the style of the range between the start and end points of the thumb, and `SliderThumb` sets the style of the thumb itself.
-
-3. What props can be passed to the `Slider` component?
- The `Slider` component accepts all props that can be passed to the `SliderRoot` component, which is defined as `ComponentPropsWithoutRefValue: {value}
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
- This code defines a custom switch component using React and the Radix UI library.
-
-2. What are the styles applied to the switch component?
- The switch component has a width of 46, a height of 24, a rounded border, and a background color that changes when checked. The thumb of the switch has a width and height of 20, a rounded border, and a background color that also changes when checked. The switch has a focus style that adds a box shadow and a border color.
-
-3. What are the dependencies of this code?
- This code depends on React, the Stitches CSS-in-JS library, and the Radix UI library.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/Text.md b/.autodoc/docs/markdown/ui/src/primitives/Text.md
deleted file mode 100644
index f8393c663..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/Text.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/Text.tsx)
-
-This code exports a styled `span` component using the `styled` function from the `stitches.config` module. The purpose of this code is to provide a flexible and customizable way to style text elements in the larger project.
-
-The component has default styles for `color`, `fontFamily`, `letterSpacing`, and `margin`. It also has two variants: `color` and `style`.
-
-The `color` variant allows the user to specify the color of the text using a set of predefined options. These options include `base`, `subtle`, `error`, `errorLight`, `accent`, `success`, and `button`. The `style` variant allows the user to specify the style of the text using a set of predefined options. These options include `h2`, `h3`, `h4`, `h5`, `h6`, `subtitle1`, `subtitle2`, `body1`, `body2`, `body3`, and `tiny`.
-
-The `italic` and `ellipsify` variants allow the user to add additional styles to the text. The `italic` variant takes a boolean value and adds italic styling to the text if `true`. The `ellipsify` variant takes a boolean value and adds ellipsis styling to the text if `true`.
-
-The `compoundVariants` property allows the user to combine multiple variants together. In this case, it combines the `tiny` style with the `base` color.
-
-The `defaultVariants` property sets the default values for the `style` and `color` variants. In this case, the default style is `body1` and the default color is `base`.
-
-Overall, this code provides a flexible and customizable way to style text elements in the larger project. Here is an example of how this component can be used to style a `h1` element with the `accent` color and `h2` style:
-
-```
-import Text from './Text'
-
-
-
-
-
-
- )
-}
-```
-## Questions:
- 1. What is the purpose of this code?
-- This code exports a custom Tooltip component that uses the `@radix-ui/react-tooltip` and `@radix-ui/react-popover` libraries to display tooltips and popovers. It also uses the `@react-hookz/web` library to determine if the device is a small screen.
-
-2. What are the props that can be passed to the Tooltip component?
-- The Tooltip component accepts the following props: `children`, `content`, `open`, `defaultOpen`, `onOpenChange`, and `delayDuration`. It also accepts any additional props that can be passed to the `Popover.Content` or `TooltipPrimitive.Content` components.
-
-3. What is the difference between the Tooltip and Popover components?
-- The Tooltip component is used for small devices and displays a tooltip when the user hovers over the trigger element. The Popover component is used for larger devices and displays a popover when the user clicks on the trigger element.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/primitives/index.md b/.autodoc/docs/markdown/ui/src/primitives/index.md
deleted file mode 100644
index ffcff71a1..000000000
--- a/.autodoc/docs/markdown/ui/src/primitives/index.md
+++ /dev/null
@@ -1,28 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/primitives/index.ts)
-
-This code exports a series of components from the `zoo` project. These components are used to create a user interface for the larger project.
-
-Each export statement is followed by the name of the component and the file path where it can be found. The components include `Anchor`, `Box`, `Button`, `Flex`, `EthLogo`, `FormatWrappedCurrency`, `FormatCurrency`, `FormatCryptoCurrency`, `Input`, `Text`, `Grid`, `Loader`, `Switch`, `Select`, `Slider`, `Popover`, `ToggleGroup`, `ToggleGroupButton`, `DateInput`, `ErrorWell`, `CryptoCurrencyIcon`, `Tooltip`, and `Img`.
-
-These components can be imported into other files within the `zoo` project or in other projects that use the `zoo` library. For example, if a developer wants to use the `Button` component in a file, they can import it like this:
-
-```
-import { Button } from 'zoo';
-```
-
-Then they can use the `Button` component in their code like this:
-
-```
-
-```
-
-Overall, this code serves as a way to organize and export the various components used in the `zoo` project. By exporting them in this way, other developers can easily use these components in their own code without having to manually copy and paste the code for each component.
-## Questions:
- 1. What is the purpose of this code?
- This code exports various components from different files located in the `zoo` project.
-
-2. What are some examples of the components being exported?
- Some examples of the components being exported include `Anchor`, `Box`, `Button`, `Flex`, `Input`, `Text`, `Grid`, `Loader`, `Switch`, `Select`, `Slider`, `Popover`, `ToggleGroup`, `DateInput`, `ErrorWell`, `CryptoCurrencyIcon`, `Tooltip`, and `Img`.
-
-3. Are there any dependencies required for these components to work?
- It is unclear from this code whether there are any dependencies required for these components to work. Additional information or documentation may be needed to determine this.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/themes/ReservoirKitTheme.md b/.autodoc/docs/markdown/ui/src/themes/ReservoirKitTheme.md
deleted file mode 100644
index f846885ad..000000000
--- a/.autodoc/docs/markdown/ui/src/themes/ReservoirKitTheme.md
+++ /dev/null
@@ -1,71 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/themes/ReservoirKitTheme.ts)
-
-The code defines interfaces and types for the ReservoirKitTheme and ReservoirKitOverrides objects, as well as a ReservoirKitThemeColors object. The ReservoirKitTheme object contains properties for radii, fonts, colors, and assets. The radii property is an object with a single property, borderRadius, which is a string. The fonts property is an object with properties for body, button, and headline, which are all strings. The colors property is an object of type ReservoirKitThemeColors, which contains a variety of color properties for different parts of the UI. The assets property is an object with a single property, ethIcon, which is a string that can be one of three values: 'glyph', 'gray', or 'purple'.
-
-The ReservoirKitOverrides type is an object that can contain any of the properties of the ReservoirKitTheme object, allowing for customization of the theme. The ReservoirKitSharedTheme type is a subset of the ReservoirKitTheme type, containing only the fonts and radii properties. The sharedThemeConfig function takes an optional overrides parameter of type ReservoirKitOverrides and returns a ReservoirKitSharedTheme object. The function sets the borderRadius property of the radii object to the value of the borderRadius property of the overrides object, or '4px' if it is not defined. The body, button, and headline properties of the fonts object are set to the values of the font, buttonFont, and headlineFont properties of the overrides object, respectively, or 'sans-serif' if they are not defined.
-
-This code is part of the larger ReservoirKit project and provides a way to define and customize the theme of the UI. The ReservoirKitTheme object can be used to define the default theme, while the ReservoirKitOverrides object can be used to customize the theme for specific use cases. The sharedThemeConfig function provides a way to generate a ReservoirKitSharedTheme object from an overrides object, which can be used to apply the customized theme to components. For example, the following code could be used to create a customized button component:
-
-```
-import { sharedThemeConfig } from 'zoo';
-
-const overrides = {
- borderRadius: '8px',
- font: 'Roboto',
- buttonFont: 'Roboto',
- buttonTextColor: '#FFFFFF',
- buttonTextHoverColor: '#CCCCCC',
- primaryColor: '#FF0000',
- primaryHoverColor: '#CC0000',
- wellBackground: '#FFFFFF',
- textColor: '#000000',
- headerBackground: '#FFFFFF',
- contentBackground: '#FFFFFF',
- footerBackground: '#FFFFFF',
- overlayBackground: '#000000',
- popoverBackground: '#FFFFFF',
- borderColor: '#000000',
- ethIcon: 'purple',
-};
-
-const sharedTheme = sharedThemeConfig(overrides);
-
-const Button = () => {
- return (
-
- );
-};
-```
-
-In this example, the overrides object is used to customize the button component's appearance, and the sharedTheme object is used to provide default values for any properties that are not defined in the overrides object. The sharedTheme object is generated using the sharedThemeConfig function, which sets the default values for the fonts and radii properties based on the overrides object. The button component uses the sharedTheme object to set the default values for the borderRadius, fontFamily, and color properties, and the overrides object to set the customized values for the backgroundColor, borderColor, and padding properties. The onMouseEnter and onMouseLeave event handlers use the overrides object to set the customized values for the backgroundColor and color properties when the button is hovered over.
-## Questions:
- 1. What is the purpose of the `ReservoirKitTheme` interface?
-- The `ReservoirKitTheme` interface defines the structure of a theme object that contains properties for radii, fonts, colors, and assets.
-
-2. What is the difference between the `ReservoirKitThemeColors` interface and the `ReservoirKitOverrides` type?
-- The `ReservoirKitThemeColors` interface defines the structure of a colors object that contains specific color values for different parts of the UI, while the `ReservoirKitOverrides` type defines optional overrides for specific theme properties.
-
-3. What is the purpose of the `sharedThemeConfig` function?
-- The `sharedThemeConfig` function returns a shared theme object that contains only the `radii` and `fonts` properties from the `ReservoirKitTheme` interface, with optional overrides applied if provided.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/themes/Theme.md b/.autodoc/docs/markdown/ui/src/themes/Theme.md
deleted file mode 100644
index 96a55f43c..000000000
--- a/.autodoc/docs/markdown/ui/src/themes/Theme.md
+++ /dev/null
@@ -1,18 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/themes/Theme.ts)
-
-The code defines an interface called `Theme` that describes the visual style of a web application. The `Theme` interface has four properties: `radii`, `fonts`, `colors`, and `assets`. The `radii` property is an object with a single property `borderRadius` that specifies the border radius of elements in the application. The `fonts` property is an object with three properties that specify the font family for the body, button, and headline text in the application. The `colors` property is an object that defines the color palette for the application. It has several properties that specify the accent, neutral, and secondary colors, as well as colors for specific components like buttons and headers. The `assets` property is an object with a single property `ethIcon` that specifies the style of an Ethereum icon.
-
-The `Theme` interface is used as a type for the `ThemeColors` interface, which defines the specific colors for the application. The `ThemeColors` interface has several properties that correspond to the colors defined in the `colors` property of the `Theme` interface.
-
-The `ThemeOverrides` type is an object that can be used to override specific properties of the `Theme` interface. It has several optional properties that correspond to the properties of the `Theme` interface that can be overridden.
-
-The `SharedTheme` type is a subset of the `Theme` interface that includes only the `fonts` and `radii` properties. The `SharedThemeConfig` function takes an optional `ThemeOverrides` object and returns a `SharedTheme` object with the `radii` and `fonts` properties set according to the overrides. If an override is not provided, the default value from the `Theme` interface is used.
-
-This code is part of a larger project that defines the visual style of a web application. The `Theme` interface provides a high-level description of the style, while the `ThemeColors` interface provides the specific colors. The `ThemeOverrides` type allows for customization of the style, and the `SharedThemeConfig` function provides a way to generate a `SharedTheme` object with the default or overridden values for the `radii` and `fonts` properties. This code can be used throughout the project to ensure a consistent visual style. For example, the `Theme` interface can be used to define the style of a component library, while the `ThemeColors` interface can be used to define the colors of specific components. The `SharedThemeConfig` function can be used to generate a `SharedTheme` object that can be passed to components to ensure consistent styling.
-## Questions:
- 1. What is the purpose of the `Theme` interface and what are its properties?
-- The `Theme` interface defines the structure of a theme object and includes properties for `radii`, `fonts`, `colors`, and `assets`.
-2. What is the purpose of the `ThemeColors` interface and what are its properties?
-- The `ThemeColors` interface defines the structure of a theme's color palette and includes properties for accent, neutral, secondary, general, and component colors.
-3. What is the purpose of the `SharedThemeConfig` function and what does it return?
-- The `SharedThemeConfig` function returns an object with properties for `radii` and `fonts` that can be used to create a shared theme across components. It accepts an optional `ThemeOverrides` object to customize the theme.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/themes/darkTheme.md b/.autodoc/docs/markdown/ui/src/themes/darkTheme.md
deleted file mode 100644
index f06323fa8..000000000
--- a/.autodoc/docs/markdown/ui/src/themes/darkTheme.md
+++ /dev/null
@@ -1,31 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/themes/darkTheme.ts)
-
-The code defines a function that returns a theme object for a project called ReservoirKit. The function takes an optional parameter called `overrides` which is an object that can be used to override the default theme values. The function imports color variables from a package called `@radix-ui/colors` and a shared theme configuration object from a file called `ReservoirKitTheme`.
-
-The returned theme object contains a `colors` property which is an object that defines various color variables used throughout the project. The `assets` property is an object that defines various asset variables used throughout the project. The `...sharedTheme` syntax is used to merge the `sharedTheme` object with the returned theme object.
-
-The `colors` object contains various color variables for accent, neutral, secondary, and general colors. These variables are used to define the color scheme for various components in the project. For example, the `accentBase` variable defines the base color for accent components, and the `neutralBase` variable defines the base color for neutral components.
-
-The `assets` object contains various asset variables used throughout the project. For example, the `ethIcon` variable defines the color of an Ethereum icon used in the project.
-
-The `overrides` parameter can be used to override any of the default theme values. For example, the `accentBorderHover` variable can be overridden by passing an object with a `primaryColor` property to the function.
-
-Example usage:
-
-```
-import ReservoirKitTheme from './ReservoirKitTheme'
-
-const myOverrides = {
- primaryColor: '#FF0000',
- buttonTextHoverColor: '#00FF00'
-}
-
-const myTheme = ReservoirKitTheme(myOverrides)
-```
-## Questions:
- 1. What is the purpose of the `ReservoirKitTheme` and `ReservoirKitOverrides` objects?
-- The `ReservoirKitTheme` object defines the theme for the ReservoirKit component library, while the `ReservoirKitOverrides` object allows for customization of the theme.
-2. What is the significance of the `...` syntax used in the `colors` object?
-- The `...` syntax is the spread operator, which allows for the merging of multiple objects into a single object. In this case, it is used to merge multiple color objects into the `colors` object.
-3. What is the purpose of the `assets` object?
-- The `assets` object defines any additional assets used by the ReservoirKit component library, such as icons. The `ethIcon` property allows for customization of the Ethereum icon color.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/themes/index.md b/.autodoc/docs/markdown/ui/src/themes/index.md
deleted file mode 100644
index 9be8760ac..000000000
--- a/.autodoc/docs/markdown/ui/src/themes/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/themes/index.ts)
-
-This code exports three items from the `zoo` project's `ReservoirKitTheme` module: `lightTheme`, `darkTheme`, and `ReservoirKitTheme`.
-
-The `lightTheme` and `darkTheme` exports are default exports, meaning that they are the primary exports of their respective modules. These exports likely contain pre-defined styles and color schemes for the `zoo` project's user interface.
-
-The `ReservoirKitTheme` export is a type export, meaning that it defines a type that can be used throughout the `zoo` project. This type is likely used to ensure consistency in the styling and theming of the project's components.
-
-This code is useful for other modules within the `zoo` project that need to access the pre-defined themes or the `ReservoirKitTheme` type. For example, a component that needs to display a button may import the `lightTheme` and use it to style the button. Alternatively, a component that needs to define a custom theme may import the `ReservoirKitTheme` type to ensure that it adheres to the project's established theming conventions.
-
-Here is an example of how the `lightTheme` export may be used in a component:
-
-```
-import React from 'react';
-import { lightTheme } from 'zoo';
-
-const MyButton = () => {
- return (
-
- );
-};
-```
-
-Overall, this code is a crucial part of the `zoo` project's theming system and allows for consistent and cohesive styling throughout the project.
-## Questions:
- 1. **What is the purpose of this code file?**\
-A smart developer might wonder what this code file is responsible for. Based on the code, it appears to be exporting different themes and a type related to a ReservoirKitTheme.
-
-2. **What is the difference between the lightTheme and darkTheme exports?**\
-A smart developer might want to know the difference between the two theme exports. Without further context or documentation, it is unclear what distinguishes the lightTheme from the darkTheme.
-
-3. **What is the ReservoirKitTheme type used for?**\
-A smart developer might be curious about the ReservoirKitTheme type and where it is used in the project. Without additional information, it is unclear what this type represents and how it is utilized.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/themes/lightTheme.md b/.autodoc/docs/markdown/ui/src/themes/lightTheme.md
deleted file mode 100644
index d74702e69..000000000
--- a/.autodoc/docs/markdown/ui/src/themes/lightTheme.md
+++ /dev/null
@@ -1,39 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/themes/lightTheme.ts)
-
-The code is a module that exports a function that returns a theme object for the ReservoirKit UI library. The function takes an optional `overrides` object as an argument, which can be used to customize the theme. The theme object contains a set of color and asset values that are used throughout the UI library to ensure a consistent look and feel.
-
-The function first imports a set of color values from the `@radix-ui/colors` package and a `sharedThemeConfig` function and `ReservoirKitTheme` and `ReservoirKitOverrides` types from a local `ReservoirKitTheme` module. The `sharedThemeConfig` function is used to generate a set of shared theme values that are used across all ReservoirKit themes.
-
-The function then creates a new `sharedTheme` object by calling the `sharedThemeConfig` function with the `overrides` argument. The `sharedTheme` object is then merged with a set of color and asset values to create the final theme object that is returned by the function.
-
-The color values are defined using a combination of the imported color values and some custom values that are defined using the `$` syntax. The `$` syntax is used to reference other color values within the theme object, allowing for easy customization of the theme.
-
-The asset values are defined using a set of key-value pairs, where the key is the name of the asset and the value is a string that represents the asset value. The `ethIcon` asset is defined using the `overrides` argument, allowing for easy customization of the asset.
-
-Overall, this code is an important part of the ReservoirKit UI library, as it defines the color and asset values that are used throughout the library. Developers can use this code to customize the theme of their ReservoirKit-based applications by passing in their own `overrides` object to the exported function. For example, a developer could customize the `accentSolid` color value by passing in an `overrides` object with a `primaryColor` property set to their desired color value.
-
-Example usage:
-
-```
-import ReservoirKitTheme from './zoo'
-
-const myOverrides = {
- primaryColor: '#ff0000',
- overlayBackground: '#000000',
- ethIcon: 'white',
-}
-
-const myTheme = ReservoirKitTheme(myOverrides)
-
-console.log(myTheme.colors.accentSolid) // outputs '#ff0000'
-console.log(myTheme.assets.ethIcon) // outputs 'white'
-```
-## Questions:
- 1. What is the purpose of the `ReservoirKitTheme` and `ReservoirKitOverrides` objects?
-- The `ReservoirKitTheme` object defines the theme colors for the project, while the `ReservoirKitOverrides` object allows for customization of those colors.
-
-2. What is the significance of the `...` syntax used in the `colors` object?
-- The `...` syntax is used to spread the properties of each imported color object (e.g. `indigo`, `red`, etc.) into the `colors` object, allowing for easy access to those colors.
-
-3. What is the purpose of the `assets` object?
-- The `assets` object defines any additional assets used in the project, such as icons, and allows for customization of those assets through the `overrides` parameter.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/types/Currency.md b/.autodoc/docs/markdown/ui/src/types/Currency.md
deleted file mode 100644
index ea61fdd9d..000000000
--- a/.autodoc/docs/markdown/ui/src/types/Currency.md
+++ /dev/null
@@ -1,42 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/types/Currency.ts)
-
-The code above defines a TypeScript type called `Currency`. This type is used to represent a cryptocurrency and contains the following properties:
-
-- `contract`: a string representing the contract address of the cryptocurrency.
-- `symbol`: a string representing the ticker symbol of the cryptocurrency.
-- `decimals`: an optional number representing the number of decimal places used by the cryptocurrency. If this property is not provided, it defaults to 18.
-- `coinGeckoId`: an optional string representing the ID of the cryptocurrency on the CoinGecko platform.
-
-This type can be used throughout the larger project to represent different cryptocurrencies. For example, if the project has a feature that allows users to view the prices of different cryptocurrencies, the `Currency` type can be used to represent each cryptocurrency and its associated information.
-
-Here is an example of how the `Currency` type can be used in TypeScript code:
-
-```
-import { Currency } from 'zoo';
-
-const bitcoin: Currency = {
- contract: '0x123abc...',
- symbol: 'BTC',
- decimals: 8,
- coinGeckoId: 'bitcoin'
-};
-
-const ethereum: Currency = {
- contract: '0x456def...',
- symbol: 'ETH',
- coinGeckoId: 'ethereum'
-};
-```
-
-In this example, we import the `Currency` type from the `zoo` module. We then create two `Currency` objects, one representing Bitcoin and the other representing Ethereum. The `bitcoin` object has a `decimals` property of 8, while the `ethereum` object does not have a `decimals` property and therefore defaults to 18.
-
-Overall, the `Currency` type defined in this code is a useful tool for representing cryptocurrencies in the larger project.
-## Questions:
- 1. What is the purpose of this code and where is it being used in the project?
- This code defines a TypeScript type called `Currency` which has properties for contract, symbol, decimals, and coinGeckoId. It is likely being used throughout the project to represent different currencies.
-
-2. What is the expected format for the `contract` and `symbol` properties?
- The code does not provide any information on the expected format for these properties. It would be helpful to have additional documentation or comments explaining what values are valid for these properties.
-
-3. When is the `decimals` property used and what does it represent?
- The `decimals` property is optional and it is unclear from the code when it is used and what it represents. Additional documentation or comments would be helpful to clarify its purpose.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/types/ExpirationOption.md b/.autodoc/docs/markdown/ui/src/types/ExpirationOption.md
deleted file mode 100644
index fd7fa3654..000000000
--- a/.autodoc/docs/markdown/ui/src/types/ExpirationOption.md
+++ /dev/null
@@ -1,54 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/types/ExpirationOption.ts)
-
-This code defines a TypeScript type called `ExpirationOption`. This type is used to represent an option for an expiration date in a larger project called `zoo`.
-
-The `ExpirationOption` type has four properties: `text`, `value`, `relativeTime`, and `relativeTimeUnit`. The `text` property is a string that represents the text to be displayed for the option. The `value` property is a string that represents the value of the option. The `relativeTime` property is a number or null that represents the relative time of the option. The `relativeTimeUnit` property is a `ManipulateType` or null that represents the unit of the relative time.
-
-This type can be used in various parts of the `zoo` project where expiration options need to be represented. For example, it could be used in a form where users can select an expiration option for a particular animal exhibit.
-
-Here is an example of how this type could be used in code:
-
-```
-import { ExpirationOption } from 'zoo'
-
-const options: ExpirationOption[] = [
- {
- text: '1 day',
- value: '1',
- relativeTime: 1,
- relativeTimeUnit: 'day'
- },
- {
- text: '1 week',
- value: '7',
- relativeTime: 1,
- relativeTimeUnit: 'week'
- },
- {
- text: '1 month',
- value: '30',
- relativeTime: 1,
- relativeTimeUnit: 'month'
- }
-]
-
-// Use the options in a form
-
-```
-
-In this example, an array of `ExpirationOption` objects is defined and then used to populate a dropdown select element in a form. The `text` property of each option is displayed as the text of the option in the select element, and the `value` property is used as the value of the option.
-## Questions:
- 1. What is the purpose of the `ExpirationOption` type?
- - The `ExpirationOption` type is used to represent an option for an expiration date, including its text, value, relative time, and relative time unit.
-
-2. What is the `ManipulateType` import used for?
- - The `ManipulateType` import is used to define the type of the `relativeTimeUnit` property in the `ExpirationOption` type.
-
-3. What other files or modules might depend on this code?
- - Other files or modules that deal with expiration dates or options in the `zoo` project might depend on this code, as well as any external libraries that use the `ExpirationOption` type.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/types/parcel.d.md b/.autodoc/docs/markdown/ui/src/types/parcel.d.md
deleted file mode 100644
index 80648953d..000000000
--- a/.autodoc/docs/markdown/ui/src/types/parcel.d.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/types/parcel.d.ts)
-
-This code is a collection of TypeScript module declarations that provide type information for various resources used in the larger project.
-
-The first two modules, 'data-url:*' and 'url:*', declare a constant string value and export it as the default value. These modules likely provide type information for resources that are accessed via URLs, such as images or other assets.
-
-The next three modules, '*.jpg', '*.gif', and '*.css', declare that any files with these extensions should be treated as modules by the TypeScript compiler. This allows the project to import these files as modules and use them in the code. For example, if there is a file named 'styles.css' in the project, it can be imported and used in a TypeScript file like this:
-
-```typescript
-import styles from './styles.css';
-
-// Use the styles object
-```
-
-Finally, the 'JSX' module declares an interface for the IntrinsicElements of a 'model-viewer' component. This likely provides type information for a custom component used in the project that renders a 3D model viewer.
-
-Overall, this code provides type information for various resources and components used in the larger project, allowing for better type checking and code completion in TypeScript files.
-## Questions:
- 1. What is the purpose of the `declare module` statements?
- - The `declare module` statements are used to declare external modules and their types for use in the project. In this case, it is declaring modules for data URLs, URLs, image files, and CSS files.
-
-2. What is the significance of the `JSX` module and its `IntrinsicElements` interface?
- - The `JSX` module is used to define the types for JSX elements in TypeScript. The `IntrinsicElements` interface is used to define the types for the HTML elements that can be used in JSX.
-
-3. What is the expected behavior of the `'model-viewer'` element in the `IntrinsicElements` interface?
- - The `'model-viewer'` element is expected to be of type `any`, meaning it can accept any props and children. This allows for flexibility in using the `model-viewer` element in JSX.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/src/types/wagmi.md b/.autodoc/docs/markdown/ui/src/types/wagmi.md
deleted file mode 100644
index 3e82dff05..000000000
--- a/.autodoc/docs/markdown/ui/src/types/wagmi.md
+++ /dev/null
@@ -1,34 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/src/types/wagmi.ts)
-
-This code imports the `useBalance` function from the `wagmi` library and defines a new type called `UseBalanceToken`.
-
-The `useBalance` function is likely used to retrieve the balance of a specific token for a user's account. The function takes in a token parameter, which is likely the token symbol or contract address. The returned value is the balance of that token for the user's account.
-
-The `UseBalanceToken` type is defined as a non-nullable type that extracts the `token` parameter from the `useBalance` function's first parameter. This type can be used to ensure that the `token` parameter passed into the `useBalance` function is not null or undefined.
-
-This code may be used in the larger project to retrieve and display a user's token balances. For example, if the project has a dashboard that displays a user's portfolio, this code could be used to retrieve the balances of each token in the portfolio and display them to the user.
-
-Here is an example of how this code could be used:
-
-```
-import { useBalance } from 'wagmi'
-
-function getTokenBalance(token: string) {
- const balance = useBalance(token)
- return balance
-}
-
-const tokenBalance = getTokenBalance('ETH')
-console.log(tokenBalance) // Output: 10.5
-```
-
-In this example, the `getTokenBalance` function takes in a `token` parameter and calls the `useBalance` function with that parameter. The returned value is then returned by the `getTokenBalance` function and logged to the console. This code would retrieve the balance of the `ETH` token for the user's account and log it to the console.
-## Questions:
- 1. What is the purpose of the `useBalance` function imported from the 'wagmi' library?
- - The `useBalance` function is being imported to this file from the 'wagmi' library, but its purpose is not clear from this code snippet alone.
-
-2. What is the `UseBalanceToken` type and how is it being defined?
- - The `UseBalanceToken` type is being defined as a non-nullable parameter of the `useBalance` function, specifically the first parameter's 'token' property.
-
-3. How is this code being used within the larger 'zoo' project?
- - It is not clear from this code snippet how this code is being used within the larger 'zoo' project.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/ui/stitches.config.md b/.autodoc/docs/markdown/ui/stitches.config.md
deleted file mode 100644
index 4a6bc41f3..000000000
--- a/.autodoc/docs/markdown/ui/stitches.config.md
+++ /dev/null
@@ -1,22 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/ui/stitches.config.ts)
-
-The code is importing the `createStitches` function from the `@stitches/react` library and using it to create a set of utility functions and styles for a theme called `ReservoirKitTheme`.
-
-The `createStitches` function returns an object with several properties that can be used to create styles and components. These properties include `createTheme`, `keyframes`, `styled`, `globalCss`, `getCssText`, `theme`, and `config`.
-
-The `createTheme` property can be used to create a new theme object that can be used to customize the styles of the application. The `keyframes` property can be used to create CSS animations. The `styled` property can be used to create styled components. The `globalCss` property can be used to apply global styles to the entire application. The `getCssText` property can be used to retrieve the CSS text for the styles that have been created. The `theme` property contains the current theme object, and the `config` property contains the configuration options for the `createStitches` function.
-
-The code also defines several utility functions for creating margin, padding, and dimension styles. These functions take a value as an argument and return an object with the appropriate CSS property and value. For example, the `m` function takes a margin value and returns an object with a `margin` property set to that value.
-
-Finally, the code exports a type called `ReservoirKitThemeContext` that extends the `theme` object and adds an `assets` property with an `ethIcon` value. This type can be used to provide context for the `ReservoirKitTheme` throughout the application.
-
-Overall, this code provides a set of utility functions and styles that can be used to create a custom theme for an application. The `ReservoirKitTheme` can be customized by modifying the values in the `theme` object, and the utility functions can be used to create styles for components and layouts. The `ReservoirKitThemeContext` type can be used to provide context for the theme throughout the application.
-## Questions:
- 1. What is the purpose of the `ReservoirKitTheme` import?
-- The `ReservoirKitTheme` import is used to define the type of the `ethIcon` asset in the `ReservoirKitThemeContext`.
-
-2. What are the available breakpoints for media queries?
-- The available breakpoints for media queries are `bp1`, `bp2`, `bp3`, and `bp4`.
-
-3. What is the purpose of the `prefix` option in `createStitches`?
-- The `prefix` option is used to add a prefix to all class names generated by Stitches, which can help avoid naming conflicts with other CSS libraries or frameworks. In this case, the prefix is set to `rk`.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouter2.md b/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouter2.md
deleted file mode 100644
index 3f933ee4f..000000000
--- a/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouter2.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/zdk/research/MultiRouting/src/MultiRouter2.ts)
-
-The code provided is a TypeScript implementation of a multi-router system for decentralized exchanges. The system is designed to allow for efficient trading between different tokens on a blockchain network. The code is divided into several classes, each of which represents a different type of multi-router.
-
-The `MultiRouter` class is an abstract class that defines the basic interface for all multi-routers. It has three abstract methods: `calcOutByIn`, `calcPrice`, and `calcInputByPrice`. These methods are used to calculate the output amount, price, and input amount, respectively, for a given trade.
-
-The `MultiRouterConstantProduct` class is a concrete implementation of the `MultiRouter` class that is used for trading between tokens with a constant product pool. This type of pool is used when the product of the token balances is constant. The `calcOutByIn` method calculates the output amount for a given input amount, while the `calcPrice` method calculates the price of a given input amount. The `calcInputByPrice` method calculates the input amount for a given price.
-
-The `MultiRouterConstantMean` class is another concrete implementation of the `MultiRouter` class that is used for trading between tokens with a constant mean pool. This type of pool is used when the mean of the token balances is constant. The `calcOutByIn` method calculates the output amount for a given input amount, while the `calcPrice` method calculates the price of a given input amount. The `calcInputByPrice` method calculates the input amount for a given price.
-
-The `MultiRouterHybrid` class is a concrete implementation of the `MultiRouter` class that is used for trading between tokens with a hybrid pool. This type of pool is used when the token balances are not constant and the pool is a combination of a constant product and a constant mean pool. The `calcOutByIn` method calculates the output amount for a given input amount, while the `calcPrice` method calculates the price of a given input amount. The `calcInputByPrice` method calculates the input amount for a given price.
-
-The `MultiRouterParallel` class is a concrete implementation of the `MultiRouter` class that is used for trading between tokens with multiple pools. This type of pool is used when there are multiple pools available for trading. The `findBestDistributionWithoutTransactionCost` method is used to find the best distribution of tokens for a given input amount. The `findBestDistribution` method is used to find the best distribution of tokens for a given input amount and gas price. The `calcOutByIn` method calculates the output amount for a given input amount, while the `calcPrice` method calculates the price of a given input amount. The `calcInputByPrice` method calculates the input amount for a given price.
-
-The `MultiRouterSerial` class is a concrete implementation of the `MultiRouter` class that is used for trading between tokens with a serial pool. This type of pool is used when there is a sequence of pools available for trading. The `calcOutByIn` method calculates the output amount for a given input amount, while the `calcPrice` method calculates the price of a given input amount. The `calcInputByPrice` method calculates the input amount for a given price.
-
-Overall, the code provides a flexible and efficient system for trading between different tokens on a blockchain network. The different types of multi-routers allow for different trading scenarios to be handled, and the abstract `MultiRouter` class provides a consistent interface for all multi-routers.
-## Questions:
- 1. What is the purpose of the `MultiRouter` abstract class and its three abstract methods?
-- The `MultiRouter` abstract class serves as a blueprint for other router classes to inherit from. The three abstract methods (`calcOutByIn`, `calcPrice`, and `calcInputByPrice`) must be implemented by any class that inherits from `MultiRouter`.
-2. What is the difference between `MultiRouterConstantProduct` and `MultiRouterConstantMean` classes?
-- `MultiRouterConstantProduct` is used for pools with a constant product formula, while `MultiRouterConstantMean` is used for pools with a weighted average formula.
-3. What is the purpose of the `findBestDistribution` method in the `MultiRouterParallel` class?
-- The `findBestDistribution` method is used to find the optimal distribution of input tokens across multiple sub-routers in the `MultiRouterParallel` class. It takes into account transaction costs and gas prices to determine the best distribution.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouter3.md b/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouter3.md
deleted file mode 100644
index 47e4823df..000000000
--- a/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouter3.md
+++ /dev/null
@@ -1,26 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/zdk/research/MultiRouting/src/MultiRouter3.ts)
-
-The `Graph` class in the `zoo` project is responsible for finding the best route for a given trade between two tokens. It does this by constructing a graph of all the pools that contain the two tokens and then finding the path with the highest output. The graph is constructed by creating a `Vertice` object for each token and an `Edge` object for each pool. The `Edge` object contains information about the pool, the two vertices it connects, and the amount of liquidity that has been passed between them. The `Vertice` object contains information about the token and a list of all the edges that connect it to other vertices.
-
-The `Graph` class has several methods that are used to find the best route. The `findBestPath` method takes the starting and ending tokens, as well as the amount of input, and returns the path with the highest output. It does this by using Dijkstra's algorithm to find the shortest path between the two vertices. The `addPath` method takes a path and applies the swaps necessary to move liquidity along that path. The `findBestRoute` method takes the starting and ending tokens, as well as the amount of input, and returns the best route. It does this by calling `findBestPath` multiple times and applying the swaps necessary to move liquidity along each path. Finally, the `getRouteLegs` method returns an array of `RouteLeg` objects that describe the path taken by the trade.
-
-Overall, the `Graph` class is a critical component of the `zoo` project as it enables users to find the best route for a given trade. This is essential for ensuring that trades are executed efficiently and that users get the best possible price. Below is an example of how the `Graph` class might be used in the larger project:
-
-```javascript
-const pools = [pool1, pool2, pool3]; // an array of all the pools in the system
-const graph = new Graph(pools); // create a new graph object
-const route = graph.findBestRoute(token1, token2, amountIn); // find the best route for a trade between token1 and token2
-console.log(route); // print the details of the best route
-```
-## Questions:
- 1. What is the purpose of the `Graph` class and how is it used in the project?
-- The `Graph` class represents a graph of `Vertice` and `Edge` objects that model liquidity pools and routes between them.
-- It is used to find the best path and route for a given input amount between two tokens, taking into account gas costs and liquidity constraints.
-
-2. What is the significance of the `GasConsumption` constant in the `Edge` class?
-- The `GasConsumption` constant represents the amount of gas consumed by a swap operation in the corresponding liquidity pool.
-- It is used to calculate the gas cost of a swap and to determine whether a swap is profitable based on the resulting output amount.
-
-3. How does the `findBestRoute` method in the `Graph` class handle multiple iterations of finding the best path and route?
-- The `findBestRoute` method divides the input amount into `steps` equal parts and finds the best path and route for each part.
-- It then aggregates the output amount, gas cost, and total output amount for all iterations to determine the final route.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouterMath.md b/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouterMath.md
deleted file mode 100644
index 70aef434d..000000000
--- a/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouterMath.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/zdk/research/MultiRouting/src/MultiRouterMath.ts)
-
-The code in this file provides utility functions for computing liquidity and prices in different types of pools. The file imports two types, `Pool` and `PoolType`, from another file called `MultiRouterTypes`.
-
-The first four functions, `ConstantMeanParamsFromData`, `ConstantMeanDataFromParams`, `HybridParamsFromData`, and `HybridDataFromParams`, are helper functions for converting between different representations of pool parameters. The `ConstantMean` and `Hybrid` pool types use different parameterizations than the `ConstantProduct` and `Weighted` pool types, so these functions are used to convert between the two.
-
-The `HybridComputeLiquidity` function computes the liquidity of a `Hybrid` pool. It first checks if the liquidity has already been computed and stored in a cache. If not, it computes the liquidity using a loop that iteratively solves for the value of `D` that satisfies a certain equation. The `HybridgetY` function computes the value of `y` for a given `x` in a `Hybrid` pool.
-
-The `calcOutByIn` function computes the amount of output tokens that will be received for a given amount of input tokens in a given pool. It first determines the type of the pool and then uses a different formula for each type. The `calcInByOut` function computes the amount of input tokens required to receive a given amount of output tokens in a given pool. It also determines the type of the pool and uses a different formula for each type.
-
-The `calcPrice` function computes the price of a given input amount in a given pool. It determines the type of the pool and uses a different formula for each type. The `calcInputByPrice` function computes the amount of input tokens required to achieve a given effective price in a given pool. It determines the type of the pool and uses a different formula for each type.
-
-The remaining functions are utility functions for performing mathematical operations. The `ASSERT` function checks if a given condition is true and logs an error message if it is not. The `closeValues` function checks if two values are close to each other within a given accuracy. The `calcSquareEquation` function solves a quadratic equation. The `revertPositive` function finds the input value that produces a given output value for a given function.
-
-Overall, this file provides a set of utility functions for computing liquidity and prices in different types of pools. These functions are used in other parts of the `zoo` project to implement the logic for swapping tokens between different pools.
-## Questions:
- 1. What is the purpose of the `zoo` project?
-- The code is a part of the `zoo` project, but the code itself does not provide information about the purpose of the project.
-
-2. What are the different types of pools supported by this code?
-- The code supports three types of pools: ConstantProduct, Weighted, and Hybrid.
-
-3. What is the purpose of the `revertPositive` function?
-- The `revertPositive` function is used to find a value of `x` such that `f(x) = out`, where `f` is a continuous, monotone growth function defined everywhere. It returns `0` if there is no such `x` or if `f` is not defined everywhere.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouterTypes.md b/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouterTypes.md
deleted file mode 100644
index f627f2218..000000000
--- a/.autodoc/docs/markdown/zdk/research/MultiRouting/src/MultiRouterTypes.md
+++ /dev/null
@@ -1,24 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/zdk/research/MultiRouting/src/MultiRouterTypes.ts)
-
-This file contains several interfaces and an enum that are used to define different aspects of a decentralized exchange (DEX) in the larger zoo project.
-
-The `Token` interface defines the properties of a token that can be traded on the DEX, including its name and gas price. This interface can be used to create instances of tokens that can be added to the DEX.
-
-The `PoolType` enum defines the different types of pools that can be created on the DEX. These include ConstantProduct, Weighted, and Hybrid pools. This enum can be used to specify the type of pool that should be created when adding a new pool to the DEX.
-
-The `Pool` interface defines the properties of a pool on the DEX, including its address, the tokens it contains (defined using the `Token` interface), its type (defined using the `PoolType` enum), its reserves, and its fee. This interface can be used to create instances of pools that can be added to the DEX.
-
-The `RouteLeg` interface defines the properties of a leg of a trade route on the DEX, including the token being traded, the quantity being traded, and the address of the pool being used for the trade. This interface can be used to create instances of trade routes that can be executed on the DEX.
-
-The `Route` interface defines the properties of a trade route on the DEX, including the amount of the input token, the amount of the output token, the legs of the route (defined using the `RouteLeg` interface), the gas spent on the trade, and the total amount of the output token. This interface can be used to execute trades on the DEX.
-
-Overall, these interfaces and enum provide a way to define and interact with different aspects of the DEX in the larger zoo project. Developers can use these definitions to create and manage tokens, pools, and trade routes on the DEX. For example, a developer could create a new pool using the `Pool` interface and add it to the DEX, or execute a trade using the `Route` interface.
-## Questions:
- 1. What is the purpose of the `Token` interface?
-- The `Token` interface defines the structure of a token object, which includes a name and gas price.
-
-2. What is the significance of the `PoolType` enum?
-- The `PoolType` enum defines the different types of pools that can be used, including ConstantProduct, Weighted, and Hybrid.
-
-3. What information is included in the `Route` interface?
-- The `Route` interface includes information about the amount of input and output, the legs of the route, the gas spent, and the total amount of output.
\ No newline at end of file
diff --git a/.autodoc/docs/markdown/zdk/research/MultiRouting/src/TopologicalSort.md b/.autodoc/docs/markdown/zdk/research/MultiRouting/src/TopologicalSort.md
deleted file mode 100644
index 8a85c0a12..000000000
--- a/.autodoc/docs/markdown/zdk/research/MultiRouting/src/TopologicalSort.md
+++ /dev/null
@@ -1,72 +0,0 @@
-[View code on GitHub](zoo-labs/zoo/blob/master/zdk/research/MultiRouting/src/TopologicalSort.ts)
-
-The code defines a class called `TopologicalSort` which implements a topological sorting algorithm. Topological sorting is a way of ordering a directed graph's vertices such that for every directed edge from vertex A to vertex B, vertex A comes before vertex B in the ordering. This is useful in many applications, such as scheduling tasks that depend on each other.
-
-The `TopologicalSort` class takes two generic type parameters: `KeyType` and `ValueType`. `KeyType` is the type of the keys used to identify nodes in the graph, while `ValueType` is the type of the values associated with each node. The class has several methods:
-
-- `constructor(nodes: Map