https://github.com/push-protocol/push-dapp
The Push Protocol Dapp
https://github.com/push-protocol/push-dapp
dapp ethereum reactjs solidity web3 web3-react
Last synced: about 1 year ago
JSON representation
The Push Protocol Dapp
- Host: GitHub
- URL: https://github.com/push-protocol/push-dapp
- Owner: push-protocol
- License: other
- Created: 2021-12-29T11:49:57.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-29T10:57:57.000Z (over 1 year ago)
- Last Synced: 2024-10-29T12:09:37.468Z (over 1 year ago)
- Topics: dapp, ethereum, reactjs, solidity, web3, web3-react
- Language: TypeScript
- Homepage: https://app.push.org
- Size: 1.44 GB
- Stars: 45
- Watchers: 4
- Forks: 40
- Open Issues: 75
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- License: license-v1
Awesome Lists containing this project
README
Push Protocol is a web3 communication network, enabling cross-chain notifications, messaging, video, and NFT chat for dapps, wallets, and services.🚀
# Push Protocol dApp
Welcome to the repository for the decentralized application (dApp) of the Push Protocol. This repository contains the frontend code that powers our user-facing application, enabling users to interact with the Push Protocol in a user-friendly and intuitive manner.
The Push Protocol is a web3 communication protocol that enables cross-chain notifications and messaging for decentralized applications (dApps), wallets, and services. Our dApp is the gateway for users to access and utilize these functionalities.
In this repository, you will find the code that powers various aspects of the Push dApp, from user interface components to state management and interaction with blockchain networks. We have built our dApp to be responsive, user-friendly, and to provide a seamless experience for interacting with the Push Protocol.
We invite you to explore, contribute, and help us build the future of web3 communication. Your contributions will help us improve the user experience and add new features to our dApp, making web3 communication more accessible and efficient for everyone.
---
## 📚 Table of Contents
- [Modules](#-modules)
- [Getting Started](#getting-started)
- [Resources](#resources)
- [Contributing](#contributing)
---
## 🧩 Modules
Airdrop
| File | Summary | Module |
| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------ |
| AirdropModule.tsx | This code snippet is a React component that renders a gratitude drop page. It uses web3 to connect to the Ethereum network and retrieve a user's information on whether they are eligible to claim $PUSH tokens. The page also includes a section of frequently asked questions. Finally, there is an option for the user to claim their $PUSH tokens if they are eligible and if they have not claimed it before. The component contains various different states that impacts its render conditions such as loading, claimable and verified. | src/modules/airdrop/AirdropModule.tsx |
Alias
| File | Summary | Module |
| :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------ |
| getAliasDetails.ts | The provided code implements a function `getAliasDetails`, which takes an account and a chain ID as input and returns information about the specified account's alias. | src/services/alias/getAliasDetails.ts |
| | The function utilizes the `PushAPI` module to communicate with the server and the `aliasChainIdToChainName` utility function to translate the blockchain version to a readable format. | |
| | If an error occurs, it throws an instance of the Error class. | |
| index.ts | The code exports all functionality available in the "getAliasDetails" module. This allows any file that imports this "export" statement to access the functions, variables, and other features defined in the original "getAliasDetails" module. | src/services/alias/index.ts |
Api
| File | Summary | Module |
| :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :--------------- |
| ipfs.ts | The provided code snippet exports two functions. The'getFromIPFS' function makes a GET request to an IPFS endpoint for a specific CID and returns a formatted message object including the CID. The'postIPFS' function makes a POST request to an IPFS endpoint with the provided data and returns the CID hash. This code also sets the BASE_URL for the API depending on the environment. | src/api/ipfs.ts |
| index.js | This code snippet exports multiple functions that simplify making HTTP requests using Axios library in a React project, including GET, POST, and tooling POST requests. It uses an API URL provided by a configuration file. It also exports additional functionality related to ipfs implementation. | src/api/index.js |
Blurs
| File | Summary | Module |
| :--------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------- |
| BlurBG.tsx | The code snippet defines a component named BlurBG that generates a blurry background effect using styled-components package and ItemVV2 styled-component. The BlurBG component accepts props including the level of blur, z-index, and additional styles, to adjust certain parameters in generating the effect. It also exports the created module default that could be referenced in other parts of the code base. | src/components/reusables/blurs/BlurBG.tsx |
| BlurBGClouds.tsx | The code snippets creates a component, BlurBGClouds, that is used for creating a blurred background effect. The component accepts no parameters and returns two overlapping background circles with blurred edges using various style attributes like background color, border-radius, aspect ratio, and filter. | src/components/reusables/blurs/BlurBGClouds.tsx |
Channeldashboard
| File | Summary | Module |
| :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------ |
| ChannelOwnerDashboard.tsx | The code snippet imports and uses various packages and components within a React Web3 application. It defines a functional component called "ChannelOwnerDashboard" which displays various components based on the state of channel details fetched from a database. It includes logic for editing, deleting and updating channels as well as fetching and displaying details such as aliases. | src/modules/channelDashboard/ChannelOwnerDashboard.tsx |
| channelDashboardModule.tsx | This code defines a React component for a dashboard module that displays a loading screen while any necessary channel data is loaded, then renders the ChannelOwnerDashboard component. Toast notifications can also be triggered, and the component's appearance is responsively styled based on screen size. Additionally, Google Analytics tracking is implemented on component mount. | src/modules/channelDashboard/channelDashboardModule.tsx |
Channels
| File | Summary | Module |
| :--------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- |
| ChannelsModule.tsx | The provided code is a React component that displays a Channels module in a user interface. It also includes style components to adjust the appearance of the module on different devices and a React-GA package for website analytics. It uses internal components, configs, and constants for the desired behavior. | src/modules/channels/ChannelsModule.tsx |
| getChannelDelegates.ts | The code snippet uses the @pushprotocol/restapi library and a configuration file to define a Props type. The function, getChannelDelegates, fetches the channel delegates by calling the Push API with the given channelCaipAddress value and returns the response. If an error occurs, it throws a new error object. | src/services/channels/getChannelDelegates.ts |
| getChannelsSearch.ts | The code snippet exports a function that uses an API endpoint to search for channels based on a query string. The function accepts some optional parameters for setting the pagination and sorting options as necessary. It returns an array of channel data if the search is successful, or throws an error otherwise. | src/services/channels/getChannelsSearch.ts |
| getChannels.ts | The provided code exports an async function named "getChannels" that receives four optional arguments to include pagination, sorting, and ordering. The function builds an endpoint based on the arguments and calls an HTTP get request to retrieve data. The function returns an array containing the channels data or throws an error message if the request fails. | src/services/channels/getChannels.ts |
| index.ts | This code aims to export three modules: "getChannelDelegates", "getChannels", and "getChannelsSearch". These modules enable retrieving information about channels available to users data on the delegates associated with each individual channel. Overall, these exports aim to make gathering channel data more efficient. | src/services/channels/index.ts |
Chat
| File | Summary | Module |
| :--------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------- |
| ChatSidebarSection.tsx | The provided code snippet contains a React component for the chat sidebar section, which includes various internal and external components, such as a search bar, intent feed, message feed, and profile header. The component also utilizes multiple hooks and functions for handling user interactions and fetching data from APIs, and it includes various styled components for rendering the UI elements. | src/sections/chat/ChatSidebarSection.tsx |
| ChatBoxSection.tsx | This code snippet is a functional React component that imports a ChatBox from an internal component and displays it within a section called ChatBoxSection. The ChatBoxSection takes in two props, setVideoCallInfo and showGroupInfoModal, and is centered using internal SharedStylingV2. | src/sections/chat/ChatBoxSection.tsx |
| ChatModule.tsx | The given code is a React component for a chat application that uses the Web3 library for blockchain interactions. It handles user connection, chat message retrieval, and updates, as well as the display of chat boxes, sidebars, and modals for group information and group creation. | src/modules/chat/ChatModule.tsx |
| | | |
Chatbox
| File | Summary | Module |
| :---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------- |
| ChatBox.tsx | The code implements a feature-rich chat box component in a React application with Web3 integration, enabling messaging capabilities, group chats, and video calling. It utilizes libraries, components, and APIs to handle message sending, receiving, and display, while employing context and state management for a seamless user experience. | src/components/chat/w2wChat/chatBox/ChatBox.tsx |
| | | |
| HeaderMessage.tsx | This code snippet is a React component for displaying a chat message header. It includes conditional rendering of encryption status based on chat context, and links to encryption documentation. Styling is managed through styled-components package. | src/components/chat/w2wChat/chatBox/HeaderMessage.tsx |
Chatqr
| File | Summary | Module |
| :------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------ |
| chatQR.tsx | The code defines a React component for generating and displaying a QR code. The QR code contains encrypted user information needed for chat functionality and can be displayed in different layouts and loading states. The component uses various hooks and contexts for data and styling customization. | src/components/chat/w2wChat/chatQR/chatQR.tsx |
| mobileView.tsx | The code defines a functional React component, MobileView, that renders instructions for users on how to use push chat on their computers. The component imports and uses several other components and features, including styled components, icons, and context. It also utilizes media queries to allow for responsiveness across device screens. | src/components/chat/w2wChat/chatQR/mobileView.tsx |
Chats
| File | Summary | Module |
| :------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------ |
| Chats.tsx | This is a React component that renders different message types (text, images, Twitter links, etc.) for a chat interface. It uses external packages such as Styled Components and TwitterTweetEmbed. It also includes some helper functions to retrieve the sender's profile information, shorten wallet addresses, and resolve ENS names. | src/components/chat/w2wChat/chats/Chats.tsx |
| getGroup.ts | The provided code snippet exports a function "getGroup" that takes a string parameter and a function, "setInvalidSearch". The function calls two other helper functions, "getGroupbyChatId" and "getGroupByName", which return an "IGroup" object. If neither helper function yields a result, the setInvalidSearch function is called to handle the missing group. Ultimately, this function returns an "IGroup" object or undefined. | src/services/chats/getGroup.ts |
| getChats.ts | This code exports a function'getChats' that takes in various options like the account, pgpPrivateKey, chatId, threadHash and limit in order to retrieve a list of chats. If provided with a threadhash it retrieves details of the conversation and its message history. It then returns chatResponse, lastThreadHash, and lastListPresent variables for the fetched threads except when no conversation threads are available. | src/services/chats/getChats.ts |
| getGroupByName.ts | The provided code snippet defines and exports a function'getGroupByName' which uses the PushProtocol API and provided configuration data to retrieve a specified group's information. The function returns a promise for an object conforming to an interface defining a group object (of type IGroup). The try...catch block ensures the function throws an error if an error occurs during execution. | src/services/chats/getGroupByName.ts |
| getGroupByChatId.ts | The code imports the PushAPI and appConfig modules, and the IGroup type interface. The function getGroupbyChatId takes a chat ID argument, calls the PushAPI to get a group, and returns a Promise containing the retrieved group. If any errors occur, the function logs them and throws a new error with the error message. | src/services/chats/getGroupByChatId.ts |
| index.ts | The code exports all functions and/or variables from the module named "getChats". This allows other modules to import and access all exports within "getChats". | src/services/chats/index.ts |
Chatsnap
| File | Summary | Module |
| :----------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------- |
| ChatSnap.tsx | The provided code snippet consists of a React component named ChatSnap that renders individual conversation snaps in a messaging app. Its core functionalities include displaying user profile information, formatting chat messages, displaying timestamps, and providing click functionality. It also uses multiple imported modules and styles to create an attractive layout. | src/components/chat/chatsnap/ChatSnap.tsx |
Components
| File | Summary | Module |
| :-------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------- |
| Settings.tsx | This code is a basic React component that includes the use of styled-components package and the Web3-react core library. It creates a component called Settings which renders an empty styled Container. There is an unused React useEffect hook that is left empty. | src/components/Settings.tsx |
| ChannelDeactivateModalContent.tsx | The code snippet contains a React component which displays a modal for deactivating a channel. It uses various external and internal components and packages, including loaders, icons, and styled-components. Upon confirming deactivation, the component sends a transaction and updates the channel details in the state. | src/components/ChannelDeactivateModalContent.tsx |
| NavigationLoaderButton.js | The code imports React and packages such as'styled-components', and has an internal component named'NavigationLoaderButton'. The component has a function that returns a div containing an image, a span text, and some UI styling; it is used to show that the page is being loaded or fetching resources. Overall, the code snippet defines the UI for this'Loading Button' component that can be included in a larger web application developed using React. | src/components/NavigationLoaderButton.js |
| AliasSetup.js | The provided code snippet is a React component that displays a loading screen message while setting up a channel on the Alias network. It uses external packages like React spinners and styled components and also imports internal components like Button, Item, Section, H3, and Span with shared styling. Redux selectors and configurations are also utilized within the code. | src/components/AliasSetup.js |
| ViewNotificationItem.js | This code snippet contains a component called ViewNotificationItem that renders notification data. It uses the React framework and Web3React library. It also includes styled components, a loading animation from an external package, and a time formatting function from the moment.js library. | src/components/ViewNotificationItem.js |
| DelegateInfo.js | This code defines a React component "DelegateInfo" that displays delegate information. It also includes a "WalletInfoContent" component and several styled components for various display types. The code handles clipping and copying of addresses, as well as hover and click events for the wallet display. | src/components/DelegateInfo.js |
| SearchFilter.jsx | The provided code snippet is a React component that allows users to filter notifications by applying various search criteria such as keywords, date range, and channels. It utilizes external packages such as react-multi-select-component and react-datetime-picker to provide a user-friendly UI for filtering notifications. Additionally, it includes constants and a useState hook to manage state changes dynamically. | src/components/SearchFilter.jsx |
| NavButton.js | The code snippet contains a React component named NavButton that creates a button with icon, link, and other attributes. It also includes some CSS style components such as LeftBarPrimarySectionIcon and LeftBarPrimaryItemIcon that set the styles for specific icons. These can be used in a navigation bar or similar UI. | src/components/NavButton.js |
| BlockiesIdenticon.js | The provided code snippet is a React component that sets up and renders an identicon using blockies library. After importing the Blockies component, users can customize it using options like color and size, and the component will update as needed in response to these changes. Once the component has mounted, blockies are rendered using the provided options. | src/components/BlockiesIdenticon.js |
| SendNotifications.tsx | The "SendNotifications" component is a React form that allows users to send notifications through the EPNS API. It provides options for selecting the notification type, recipient(s), subject, message, media URL, and CTA link, with toast notifications for success or error messages. | src/components/SendNotifications.tsx |
| UpdateChannelTooltipContent.tsx | The provided code snippet is a TypeScript/React component called UpdateChannelTooltipContent. It showcases a channel update through a tooltip with the channel's name, description, and logo. It uses styled-components to style its child components. The component takes in props for the channel name, description, logo source, and a height value. | src/components/UpdateChannelTooltipContent.tsx |
| ViewInfoItem.js | The code snippet provides a React component that displays several links and information for using the Push (EPNS) App and Browser Extension. It is styled using the styled-components package and imports configurations from an external appConfig file. | src/components/ViewInfoItem.js |
| VerifiedTooltipContent.tsx | This code exports a React component called'VerifiedTooltipContent', which accepts props for displaying a verified name and icon. It is styled using styled-components and uses conditional rendering for adjusting the container's border radius based on the height of the component. | src/components/VerifiedTooltipContent.tsx |
| ThemeToggleStyle.css | The provided code snippet contains CSS code that sets border-box sizing for all elements, declares variables for colors and transitions, and styles a dark mode toggle switch with a sliding circle. The toggle switch has a parent container and uses the clip path property to hide the checkbox input. The switch changes appearance from dark to light mode with a transition animation. | src/components/ThemeToggleStyle.css |
| Switch.js | This code snippet defines a reusable Switch component in React that accepts 3 props: a boolean isOn which denotes whether the switch is on or off, a function handleToggle which toggles the boolean value, and a string onColor which is the color when the switch is on. It renders a switch toggle button and a label, styled based on the state of the switch. | src/components/Switch.js |
| MetaInfoDisplayer.js | The code provides a react component for displaying meta information about various URLs. It includes parameters for icon display, text, background color, and click/hover callbacks. The component is styled with styled-components and includes CSS classes for flexbox alignment. | src/components/MetaInfoDisplayer.js |
| UnderProgressModal.js | The code snippet provides a styled and animated modal component called UnderProgressModal, with a provided image. The modal component has a toggle function and includes a close button. Additionally, it has a social media contact section visible on the footer by default. | src/components/UnderProgressModal.js |
| ComingSoon.js | This code snippet defines a simple functional React component called ComingSoon that renders an h2 element with the text "Coming Soon!!". The component is then exported as a default module for use in other parts of the application. | src/components/ComingSoon.js |
| Bell.js | The code snippet is a React component called "Bell" which renders an icon of a bell that the user can click, and the bell will ring with a tadaaa animation and show a badge with the number of notifications marked as "badgeCount". It also includes some styling with CSS. | src/components/Bell.js |
| ChannelSettings.jsx | The code snippet defines a React component named "ChannelSettings" which contains a "Settings" icon. When clicked, this icon toggles the display of a dropdown menu. The component also imports styled-components and other necessary components for the dropdown menu. | src/components/ChannelSettings.jsx |
| FaucetInfo.tsx | This code snippet defines a React functional component named'FaucetInfo' that renders a UI as per provided props. The UI contains an anchor link and a minter, which opens yield a modal upon pressing on mint' then checks for the available balance to display information on the screen as per the value. The component uses external packages, such as'styled-components' and'react', and internal components such as ButtonV2, ImageV2, etc. | src/components/FaucetInfo.tsx |
| ChannelDetails.js | This is a React component that provides the details and functionalities of a particular channel including channel name, state, creation date, subscribers count and expiry date/time. It also renders buttons for editing or deleting the channel, displays a note in case of channel expiry and shows details of the verifying network. | src/components/ChannelDetails.js |
| InfoTooltip.js | The provided code snippet is a React component that displays an information tooltip using the Material-UI package and the AiFillInfoCircle icon from the react-icons package. The component takes in two props, a title to display in the tooltip and an Infocolor to specify the color of the icon. | src/components/InfoTooltip.js |
| AllNFTsV2.js | The code initializes and sets states to fetch and display NFT data using React, Web3 and ethers libraries. It retrieves NFT data from an Ethereum blockchain-based smart contract and fetches NFT metadata using IPFS. It then renders the collected data item(s) using a styled-component and a loading spinner while waiting for the data to be fetched. | src/components/AllNFTsV2.js |
| PreviewNotif.js | The provided code snippet defines a React component called `PreviewNotif` which renders a notification preview using data from a Redux store and the Web3React library. It also includes styled components for an overlay and a preview space. The code uses several external packages and internal components including `NotificationItem`, `Item`, and `Span`. | src/components/PreviewNotif.js |
| VerifyAlias.js | This code is implementing a React component that verifies an alias address on a web3-connected blockchain. It utilizes external packages like react-icons and react-spinners. Additionally, it dispatches some actions and makes calls to smart contracts using a signer from ethers library. Finally, it renders buttons and spans that help facilitate the verification process.`, | src/components/VerifyAlias.js |
| TransferNFTv2.js | The code snippet imports essential React and Web3 elements and several packages and components necessary for building the TransferNFTv2 component. The TransferNFTv2 component accepts tokenId and initiates the transfer of the NFT to a recipient address through the handleTransferNFT function. The function checks that the recipient address field is not empty, sets an appropriate info message, and waits for a transaction to complete before relaying the success or failure of the transfer. | src/components/TransferNFTv2.js |
| MyNFTsV2.js | The code snippet imports react components and packages, and defines a MyNFTs function that fetches and displays details of NFTs available in an Ethereum account. The function uses the Web3-react core and ethers.js libraries, as well config and helper functions to connect with the Mainnet blockchain. The NFT data is fetched using IPFS metadata, and displayed using a ViewNFTV2Item bookmark component. | src/components/MyNFTsV2.js |
| ChainsSelect.tsx | The code defines a ChainsSelect component that renders a dropdown menu with options for different blockchain networks. It fetches network details and logos from internal configs and upon selection updates the corresponding value state. The component also provides button styling via styled-components and dropdown functionality via an internally-defined Dropdown component. | src/components/ChainsSelect.tsx |
| AliasProcessing.js | This code snippet is a React component for displaying the progress of alias processing by rendering different components based on the processing state. It uses styled-components for styling and reads the processing state from Redux state store. The component is composed of Tabs and a Step indicating which stage the user is in the processing flow. | src/components/AliasProcessing.js |
| ProfileModal.tsx | This code provides a React component for a profile modal that displays dropdown values. It includes a button to close the modal, and utilizes styled components for CSS styling. The dropdown values can include icons, links, and functions for interactive elements. | src/components/ProfileModal.tsx |
| ViewDelegateeItem.js | The provided code snippet is a React component that renders a delegatee item. The component interacts with Web3 and various internal/external helper functions to execute delegation and display appropriate messages or loading icons during delegation transactions or Ethereum network requests. The component offers the user two transaction mode options, gasless or withgas. | src/components/ViewDelegateeItem.js |
| TransferNFT.js | The code defines a React component for transferring a specific non-fungible token (NFT) between Ethereum addresses. It uses the Web3React library to connect to an Ethereum node via Web3, and triggers a transaction on interaction with the Transfer button, setting the transaction details and handling errors and loading states using conditional rendering. | src/components/TransferNFT.js |
| AddDelegateModalContent.tsx | The code snippet is a React component for an add delegate modal that allows a user to provide a delegate address to send notifications on behalf of a channel. The modal features input validation, error handline, and uses styled-component for custom styling. It also utilizes a toast component to display success/error messages. | src/components/AddDelegateModalContent.tsx |
| ChannelSettingsDropdown.tsx | This is a React component that displays a dropdown menu with different actions a user can take on a channel. The actions include adding/subtracting delegates, adding a subgraph, and activating/deactivating the channel. The component uses various external packages and internal components, dependencies, and modals. | src/components/ChannelSettingsDropdown.tsx |
| NotificationToast.js | This code snippet is a React component named NotificationToast that displays a notification using React Toastify library. The component accepts a notification object and a callback function to clear the toast. It also includes some styling with Styled Components. | src/components/NotificationToast.js |
| ThemeToggle.js | The code is a React component that provides a toggle button to change between light and dark themes. It updates the body's background and foreground CSS variables, modifies the HTML class, and has the state of the toggle button to store whether the theme is enabled or not. The component uses an useEffect hook with its state positioned with a callback within an onClick event listener. | src/components/ThemeToggle.js |
| ChangeNetwork.tsx | The provided code is a React component for changing the user's wallet network using Web3. It obtains the current chain ID and library from Web3React, fetches network alias details from Redux store and renders a UI component for changing the network using handleChangeNetwork method. Lastly, it shows a toast message via useToast hook after the network change process is lively completed. | src/components/ChangeNetwork.tsx |
| MobileNavButton.js | The code snippet defines a React component called MobileNavButton, which creates a navigation button that is responsive and customizable. It uses certain icons and internal and external components, as well as a function that toggles a submenu and various CSS styles. | src/components/MobileNavButton.js |
| ViewNFTItem.js | This code snippet is a React component for rendering an NFT and related actions. It utilizes the Web3 library to interact with the blockchain, external packages such as React Player and styled-components for styling, and internal reusable components. The component includes logic for claiming NFT rewards and renders NFT status and claim badges. | src/components/ViewNFTItem.js |
| Profile.tsx | The provided code snippet is a React component that displays a wallet profile consisting of an identicon, an Ethereum Name Service name, and a shortened account address. The component requires the Web3 library and dependencies such as styled components and app context types. | src/components/Profile.tsx |
| MyNFTs.js | The code defines a React component `MyNFTs` that uses the Ethereum Web3 library to fetch, process and display a user's Non-Fungible Tokens (NFTs). It fetches NFT balances and details, from a contract instance, utilizes helper and primitive React components, and uses styled components for styling. The function updates the state to re-render the view upon user interactions. | src/components/MyNFTs.js |
| Dropdown.tsx | The provided code snippet defines a React component called Dropdown that renders a list of dropdown menu items. The component takes an array of dropdownValues as props, each of which must include a title and icon, and optionally a link, textColor, or function. The Dropdown component styles the menu items with CSS and handles copying wallet addresses to the clipboard. | src/components/Dropdown.tsx |
| ChainIndicator.tsx | The provided code is a React component designed to display a dropdown menu allowing users to switch between Ethereum Networks. It is connected to the web3 provider through the useWeb3React hook, and dynamically generates dropdown values based on allowed network IDs found in appConfig. The component is styled using styled-components and emoji are utilized in adding visual touches. | src/components/ChainIndicator.tsx |
| blockies.js | This code snippet contains functionality to generate icon images with randomly colored pixels using the Xorshift PRNG implementation. It allows customization of the icon's size, color, and background color. The code is modular with the option to use it as a Node.js module or a JavaScript library in a browser. | src/components/blockies.js |
| ChannelInfo.tsx | The provided code snippet includes a React component called ChannelInfo, which comprises a form for creating a timebound or normal channel on a web application. The component uses various external packages like react-dropdown and react-datetime-picker along with multiple functions and sub-components. The form fields range from basic info like name, description, and URL to more complex ones like network selection and channel expiry date picker. The component also includes validation logic for input fields when clicked on next. | src/components/ChannelInfo.tsx |
| Offchain.js | The code snippet uses libraries like ethers and eth-sig-util to create an Ethereum signed message using typed data. It creates typedData, domain, type, and payload objects, and then uses the private key to sign the message. The recovered account can then be verified using eth-sig-util. The code is part of the Epicenter Protocol Notification System application. | src/components/Offchain.js |
| AllNFTs.js | The provided React code snippet fetches all the details of minted NFTs stored on the Ethereum blockchain and displays them in a ViewNFTItem component. The code utilizes Web3React and ethers.js libraries as well as custom helper functions for blockchain interaction. The NFT fetching process is triggered upon account and contract instances update within useEffect hooks, and a loading spinner is presented while fetching data. | src/components/AllNFTs.js |
| DisplayNotice.js | This code snippet exports a functional React component called DisplayNotice, which takes in a title and theme as props, and uses styled-components library to create a dynamic notice element with customizable color themes based on the props passed in. An animation effect is also included using the react-animation library. | src/components/DisplayNotice.js |
| StakingInfo.tsx | This code snippet defines a component called StakingInfo that allows users to stake tokens for creating a channel. Users can also import and mint tokens as well as view their balance. The component utilizes external packages such as styled-components and internal components such as LoaderSpinner, among others. | src/components/StakingInfo.tsx |
| Faucets.js | The code includes a React component that renders a dropdown menu containing URLs to faucets for various testnet environments. The dropdown menu is styled using styled-components and also responds to click events. | src/components/Faucets.js |
| ViewNFTsV2Item.js | The code is a React component for displaying and interacting with an NFT (non-fungible token). It leverages web3-react and ethers for connecting with the blockchain, and includes functionality for claiming a reward, displaying the NFT, and transferring ownership. It also uses various external packages like Skeleton and React-Toastify to improve user experience. | src/components/ViewNFTsV2Item.js |
| SearchFilter.css | The provided code snippet contains CSS rules that mainly manipulate the styling of a date and time picker form field. It specifies the size, alignment, positioning, and formatting of different UI components such as buttons, input fields, dropdown menus, and text labels. The CSS code includes media queries to make the design responsive and adjusts the styles according to the screen size and orientation. | src/components/SearchFilter.css |
| InboxComponent.js | The code is a React component that renders an inbox/spam box interface with search and filter functionality, using styled components and icon packages. The component maintains state for displaying inbox vs spam and toggling the search and filter options. It also uses an external Feedbox and SpamBox component and a GLOBALS config file. | src/components/InboxComponent.js |
| UploadLogo.jsx | The code provides a React component named UploadLogo which allows a user to upload an image, crop it, and then submit it. It depends on various internal and external components including ImageClipper and LoaderSpinner, while accessing various libraries like ethers and styled-components. It also uses web3-react functionality for blockchain integration. | src/components/UploadLogo.jsx |
| UniswapWidget.tsx | The code snippet provides a React component that renders a Uniswap swap widget. It uses the `useWeb3React` hook for web3 integration, external packages such as `styled-components` and `react-use`, and internal configs such as addresses and appConfig. The component receives props, including default token amounts and an onClose callback function. It utilizes references and click away hooks to handle modal closing and applies a custom theme to the widget. | src/components/UniswapWidget.tsx |
| TimerItem.js | The provided code snippet is a React component that displays a countdown timer for a specified date/time configured in an external file. The component uses hooks to manage state and to update the timer in real-time. It also includes conditional rendering for displaying additional content and a button that links to an external URL. | src/components/TimerItem.js |
| SharedStyling.js | The provided code is a collection of styled components in React, defining various styles for different HTML elements. It includes styles for sections, headings, paragraphs, images, links, buttons, forms, inputs, and text areas. The styles are customized using props and media queries for responsive design. | src/components/SharedStyling.js |
| | | |
| InitState.tsx | This code consists of React and Web3 essentials with internal and external components to initialize the contract provider and check user ownership in the Channel. It also checks if the user is an alias or not and fetches their delegators. This code snippet has five hooks written in which InitState() initializes contract provider parameters, checkUserForChannelOwnership() checks if the user is the channel admin, and fetches channel information for more details. checkUserForEthAlias() checks if the user is a channel admin for the Ethereum network and also sends channel details for get alias metadata. checkUserForAlias() checks if the user is a previously registered alias to EPNS. | src/components/InitState.tsx |
| ShowDelegates.jsx | This code snippet is a React component that allows users to manage delegates for a specific channel. The component uses Web3React to obtain user account and chainId information, and allows for removal of delegated users. It also utilizes several external packages, including styled-components and react-icons. | src/components/ShowDelegates.jsx |
| RemoveDelegateModalContent.tsx | The provided code snippet is a React component that renders a modal for removing a delegate. It includes input fields for the delegate's address, confirmation buttons, and styling. Upon validation and execution, the dynamic toast library is called to display success or error alerts. | src/components/RemoveDelegateModalContent.tsx |
| NavigationButton.js | The provided code snippet includes a React component named NavigationButton, which renders an item in the navigation bar. NavigationButton receives multiple props including item, data, sectionID, active, and bg, and both external and internal dependencies are imported. When rendered, the NavigationButton component conditionally displays various components and applies different styled-components styles depending on the sectionID and other props passed to it. | src/components/NavigationButton.js |
| NewTag.tsx | The code defines a "NewTag" component, which renders a styled "New" label. The styling includes customizations for the font family, size, color, background, padding, and margin, and is based on a shared styling component ("SpanV2") defined in a separate file. The "NewTag" component can be used throughout the project to indicate new content or functionality. | src/components/NewTag.tsx |
| ProcessingInfo.js | The code provides a React component that displays a LinearProgress bar, and a message indicating the current progress of a certain process, along with a loading spinner. It also uses some third-party packages and internal components and configurations. The appearance of the component varies depending on the screen size. | src/components/ProcessingInfo.js |
| ChannelReactivateModalContent.tsx | The provided code snippet is a React component that represents a modal for reactivating a channel. It handles the reactivation process, displays channel details, and allows users to approve and deposit push tokens. | src/components/ChannelReactivateModalContent.tsx |
| | | |
| AliasVerificationModal.js | The provided code snippet is a React component that handles the verification of a user's alias on the Ethereum blockchain. It uses Web3 for blockchain interaction, external packages for UI, and internal components and configs for various functionalities such as post requests and contract verification. | src/components/AliasVerificationModal.js |
| ChannelLoading.tsx | This code provides a React component for displaying a loading skeleton while waiting for data to load. The skeleton consists of rectangular shapes created with MUI's Skeleton package and styled with styled-components. Additionally, a LoaderSpinner component is included for displaying a loading spinner with a title during longer loading times. | src/components/ChannelLoading.tsx |
| PoolCard.js | The provided code snippet is a React component that represents a pool card in a decentralized finance (DeFi) application. It includes functionalities such as depositing tokens, withdrawing tokens, and harvesting rewards from the pool. The component interacts with the Web3 library and uses various external packages and internal components for styling and functionality. | src/components/PoolCard.js |
| | | |
| ViewChannelItem.js | | src/components/ViewChannelItem.js |
| | | |
| AddSubgraphModalContent.tsx | This is a React component that displays a modal for adding a subgraph. It includes input fields for subgraph ID and poll time, with validation and error messages. The component also handles communication with the parent component to add the subgraph and display success/failure messages. | src/components/AddSubgraphModalContent.tsx |
Config
| File | Summary | Module |
| :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------- |
| Globals.js | The code provides constants for device sizes and margin/padding values, global variables for links, storage, and constants, adjustments for box shadow, radius, and blur, and a set of predefined color values. | src/config/Globals.js |
| config-dev.js | The code snippet defines environmental configurations for a decentralized app (dapp), including API calls related settings, allowed networks, core network data, analytics settings, external links, and smart contract-related information, including addresses and chain details. It exports the configurations in two objects-config and addresses. | src/config/config-dev.js |
| Themization.js | The code defines two theme objects, themeLight and themeDark, which represent light and dark color schemes, respectively. Each theme contains various color properties for different components of a user interface, such as background, text, borders, buttons, modals, and more. | src/config/Themization.js |
| | | |
| channelTuts.js | The code snippet defines an object that lists various partners of the Ethereum Push Notification Service (EPNS) along with their information such as maintainer address, YouTube videos, and articles. The object is exported as "channelsTuts" variable to be used in other parts of the code. | src/config/channelTuts.js |
| config-localhost.js | The code snippet provides environmental configurations for the dapp, including API call details, allowed networks, network-related data, analytics and Firebase settings, external links, smart contract addresses, and chain details. It uses the config and addresses objects to group the related information into separate categories. The CHAIN_DETAILS object contains a label, name, chain ID, RPC URL, and communication address for each allowed network. | src/config/config-localhost.js |
| config-general.js | The code exports environmental configurations for a decentralized application (dapp) in different environments, which include API keys and internal components' ABI definitions. The components include various smart contract ABIs used for interacting with the Ethereum blockchain such as ERC20, EPNS, staking, Uniswap and more. | src/config/config-general.js |
| index.js | This code snippet dynamically loads the appropriate configuration based on the value of a specifc environment variable. It combines the dynamic configuration with a separate general configuration and exports these settings with some associated addresses and ABI information. | src/config/index.js |
| config-prod.js | The code snippet provides environmental and smart contract configurations for the Ethereum Push Notification Service (EPNS) decentralized application (dapp). The configurations include API URLs, addresses of EPNS-related smart contracts, allowed networks, and Google Analytics configurations, among others, to support communication, notifications, and transaction functionalities in the dapp. | src/config/config-prod.js |
| config-staging.js | The code snippet provides environmental configurations for a dapp, including API endpoints, network details, smart contract addresses, and external links. These configurations are stored in constants and can be easily retrieved whenever needed. Users can switch between different networks seamlessly with the provided chain details. | src/config/config-staging.js |
| NavigationList.js | The code defines a navigation list component with various menu items, including inbox, channels, chat, send notifications, governance, incentives, and more, based on different global configurations. Each menu item can have properties such as icons, titles, links, new tab, loading, hidden, header tag, and drilldown to sub-menu items. The code also imports a LoaderSpinner component and some themization configurations. | src/config/NavigationList.js |
| custom.d.ts | This code snippet is defining a module that can import any file with a ".svg" extension. The module sets the variable "content" to be of type "any" and exports it as the default content of the file. This enables importing SVGs as modules in a TypeScript or JavaScript project. | src/config/custom.d.ts |
| W2WConfig.ts | The code defines an object containing a Giphy API key and a base64-encoded profile picture. It then exports the object as a default. | src/config/W2WConfig.ts |
Contexts
| File | Summary | Module |
| :----------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------ |
| VideoCallContext.tsx | This is a React component providing an interface for implementing a video calling feature using Web3 and third-party tools. It sets up a context for holding the state, elements and data of the video call alongside their methods/workflows such as handling incoming calls, initializing the video asynchronously, toggling video/audio states, sending/receiving video meta data, etc. | src/contexts/VideoCallContext.tsx |
| ChatUserContext.tsx | The code initializes and exports a global chat user context through a ChatUserContextProvider component. It integrates the data from PushAPI, web3-react, ethers, and w2w in order to provide real-time information, decrypt PGP keys, and facilitate the creation of new chat users, and is used in APP.tsx. The context also includes necessary states and hooks, such as blocked loading visibility, QRCode visibility, local and connected peers, and more. | src/contexts/ChatUserContext.tsx |
| NavigationContext_old.js | The provided code creates a NavigationContext using the createContext hook and a NavigationContextProvider using the useState hook in React. The NavigationContextProvider is exported as a default. The component takes in a single props parameter, creating a value object containing the state and setState derived from the useState hook and rendering it within the NavigationContext.Provider element. This allows for accessing the state and updating it across components within the app that are also subscribed to the created NavigationContext. | src/contexts/NavigationContext_old.js |
| NavigationContext.tsx | The code exports a context provider for React applications, along with a context object that contains the initial state of null for navigationSetup and a callback function named setNavigationSetup, which sets the state for navigationSetup. | src/contexts/NavigationContext.tsx |
| | Any child component inside this provider can access these values via the useContext hook. | |
| AppContext.tsx | This code defines a React AppContext and its provider component called AppContextProvider. It creates a state variable called web3NameList, using the useState hook, and provides it to the context via the provider component. This allows any nested component access to this global state variable. | src/contexts/AppContext.tsx |
| NotificationContext.tsx | The code snippet provides a NotificationContext object with its initial value and a setter function. It also defines a NotificationContextProvider component that is used to wrap other components as children and provides them with NotificationContext. The NotificationContext can be used to manage notifications and update their count within the wrapped components. | src/contexts/NotificationContext.tsx |
Createchannel
| File | Summary | Module |
| :--------------------- | :-----------------------------------