### Install and Run XRPL Explorer (npm) Source: https://github.com/ripple/explorer/blob/staging/README.md Commands to install dependencies, start the development server, build for production, and run the production server for the XRPL Explorer project. ```bash npm install npm start npm run build npm run prod-server ``` -------------------------------- ### Copy Example Environment File Source: https://github.com/ripple/explorer/blob/staging/README.md Command to copy the example environment configuration file to a new file for local customization. ```bash cp .env.example .env ``` -------------------------------- ### Clean and Reformat package.json with fixpack Source: https://github.com/ripple/explorer/blob/staging/CONTRIBUTING.md Installs `fixpack` globally and uses it to reformat the `package.json` file, ensuring consistency and adherence to best practices. ```bash npm install -g fixpack fixpack ``` -------------------------------- ### Check for Node Security Issues with nsp Source: https://github.com/ripple/explorer/blob/staging/CONTRIBUTING.md Installs `nsp` (Node Security Platform) globally and uses it to check the project's dependencies for known security vulnerabilities, providing a summary of any issues found. ```bash npm install -g nsp nsp check --output summary ``` -------------------------------- ### Example Japanese Translation File Source: https://github.com/ripple/explorer/blob/staging/docs/translating.md This is an example of a translations.json file for the Japanese language (ja-JP). It contains key-value pairs where values are the translated strings or null to fallback to English. ```json { "example.key": "日本語の翻訳", "another.key": null } ``` -------------------------------- ### Update Module Dependencies with npm-check-updates Source: https://github.com/ripple/explorer/blob/staging/CONTRIBUTING.md Installs `npm-check-updates` globally, checks for available updates to package dependencies, and updates the `package.json` file. This helps in keeping the project's dependencies current. ```bash npm install -g npm-check-updates ncu ncu -u ``` -------------------------------- ### Google Tag Manager Initialization Script Source: https://github.com/ripple/explorer/blob/staging/docs/analytics.md This script should be placed as high as possible in the section of your HTML. It initializes the Google Tag Manager dataLayer and asynchronously loads the GTM script. Ensure the GTM ID ('GTM-KCQZ3L8' in this example) is correct for your project. ```html ``` -------------------------------- ### Run XRPL Explorer Unit Tests Source: https://github.com/ripple/explorer/blob/staging/README.md Commands to execute unit tests for the XRPL Explorer project, including options for watch mode and coverage reporting. ```bash npm test npm run test:coverage ``` -------------------------------- ### Basic Git Commands for Contributing Source: https://github.com/ripple/explorer/blob/staging/CONTRIBUTING.md Provides essential Git commands for setting up a local repository, including cloning, adding remotes, fetching, pulling, and creating/pushing new branches for development work. ```bash $ git clone git@github.com:username/explorer.git --branch staging $ cd explorer $ git remote add upstream git@github.com:ripple/explorer.git $ git fetch upstream staging $ git checkout staging $ git checkout -b your-branch-name $ git push --set-upstream origin your-branch-name $ git fetch upstream staging $ git pull upstream staging ``` -------------------------------- ### Configure XRPL Explorer for Testnet Mode Source: https://github.com/ripple/explorer/blob/staging/README.md Instructions to modify the .env file to connect the XRPL Explorer to the testnet network and display a TESTNET banner. ```bash VITE_RIPPLED_HOST=s.altnet.rippletest.net VITE_ENVIRONMENT=testnet ``` -------------------------------- ### Configure XRPL Explorer for Devnet Mode Source: https://github.com/ripple/explorer/blob/staging/README.md Instructions to modify the .env file to connect the XRPL Explorer to the devnet network and display a TESTNET banner. ```bash VITE_RIPPLED_HOST=s.devnet.rippletest.net VITE_ENVIRONMENT=devnet ``` -------------------------------- ### Debug XRPL Explorer Unit Tests in Chrome Source: https://github.com/ripple/explorer/blob/staging/README.md Steps to debug unit tests by inserting 'debugger;' statements, running in debug mode, and inspecting via Chrome's 'about:inspect'. ```bash npm run test:debug ``` -------------------------------- ### Initialize Google Tag Manager in XRPL Explorer (JavaScript) Source: https://github.com/ripple/explorer/blob/staging/src/index.html This script initializes Google Tag Manager for the XRPL Explorer. It ensures the 'dataLayer' is available and asynchronously loads the GTM tracking script from Google's servers. This is typically used for analytics and marketing purposes. ```javascript window.dataLayer = window.dataLayer || []; (function(w,d,s,l,i){ w[l]=w[l]||[]; w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); var f=d.getElementsByTagName(s)[0], j=d.createElement(s), dl=l!='dataLayer'?'&l='+l:''; j.async=true; j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','<%- VITE_GTM_ID -%>'); ``` -------------------------------- ### Git Configuration with Aliases (.gitconfig) Source: https://github.com/ripple/explorer/blob/staging/CONTRIBUTING.md This is a standard Git configuration file that sets the user's name and email. It also defines several useful aliases for common Git commands, such as checkout, commit, status, branch, and log formatting. ```gitconfig ## This is Git's per-user configuration file. [user] name = %YOUR_NAME% email = %YOUR_EMAIL% [alias] co = checkout ci = commit st = status br = branch hist = log --pretty=format:"%h %ad | %s%d [%an]" --graph --date=short type = cat-file -t dump = cat-file -p unstage = reset HEAD -- last = log -1 HEAD ``` -------------------------------- ### Create and Push a New Branch for Development Source: https://github.com/ripple/explorer/blob/staging/CONTRIBUTING.md Fetches the latest changes from the 'staging' branch of the upstream repository, checks out the 'staging' branch locally, creates a new branch for your work, and pushes this new branch to your GitHub fork. This ensures your development is based on the latest code and is ready for collaboration. ```git $ git fetch upstream staging $ git checkout staging $ git checkout -b your-branch-name $ git push --set-upstream origin your-branch-name ``` -------------------------------- ### Configure VS Code for Development Source: https://github.com/ripple/explorer/blob/staging/CONTRIBUTING.md Configures Visual Studio Code settings for optimal development of the Ripple Explorer. This includes disabling delete confirmation, enabling format on save, activating stylelint, and excluding specific directories and files from the explorer view. ```json { "explorer.confirmDelete": false, "editor.formatOnSave": true, "stylelint.enable": true, "files.exclude": { "node_modules/": true, "coverage/": true, "build/": true, "src/**/*.css": true } } ``` -------------------------------- ### Clone Ripple Explorer Repository and Set Upstream Source: https://github.com/ripple/explorer/blob/staging/CONTRIBUTING.md Clones the Ripple Explorer repository from GitHub, specifically targeting the 'staging' branch, and configures the 'upstream' remote for tracking the original repository. This is a foundational step for contributing to the project. ```git $ git clone git@github.com:username/explorer.git --branch staging $ cd explorer $ git remote add upstream git@github.com:ripple/explorer.git ``` -------------------------------- ### Configure Git User Information Source: https://github.com/ripple/explorer/blob/staging/CONTRIBUTING.md Sets the global Git user email and name. This information is used to identify the author of commits and is essential for proper version control tracking. ```git git config --global user.email your@some-email.com git config --global user.name “Your Name Here” ``` -------------------------------- ### Pull Latest Changes into Local Branch Source: https://github.com/ripple/explorer/blob/staging/CONTRIBUTING.md Fetches the latest changes from the 'staging' branch of the upstream repository and merges them into your current local branch. This command is used to keep your local development branch synchronized with the main project. ```git $ git fetch upstream staging $ git pull upstream staging ``` -------------------------------- ### Display Git Branch Name in Shell Prompt (Bash) Source: https://github.com/ripple/explorer/blob/staging/CONTRIBUTING.md This script defines a function to parse the current Git branch name and uses it to colorize the branch information in the Bash prompt (PS1). It relies on `git branch` and `sed` commands. The output is formatted to be directly usable in the PS1 environment variable. ```bash function parse_git_branch () { git branch 2> /dev/null | sed -e '/^[^*]/d' -e 's/* $.*$/ (\1)/' } RED="\[\033[0;31m\]" YELLOW="\[\033[0;33m\]" GREEN="\[\033[0;32m\]" NO_COLOR="\[\033[0m\]" PS1="$GREEN\u@\h$NO_COLOR:\w$YELLOW$(parse_git_branch)$NO_COLOR$ " ``` -------------------------------- ### Use useRouteParams Hook Source: https://github.com/ripple/explorer/blob/staging/docs/routing.md A custom hook that leverages `RouteDefinition` to provide type-safe access to route parameters, derived from the route definition. It wraps `react-router`'s `useRouteParams`. ```typescript const { id = '', assetType = 'issued' } = useRouteParams(ACCOUNT_ROUTE) ``` -------------------------------- ### Use RouteLink Component Source: https://github.com/ripple/explorer/blob/staging/docs/routing.md A wrapper around `react-router`'s `Link` component that accepts a `RouteDefinition` and type-checked route parameters. This ensures that the parameters passed to the link match the defined route structure. ```jsx {owner} ``` ```jsx {owner} ``` -------------------------------- ### Define Account Route with Type Checking Source: https://github.com/ripple/explorer/blob/staging/docs/routing.md Defines a route with type-checked parameters for account details, including optional ID, tab, and asset type. This `RouteDefinition` object is used by `useRouteParams` and `RouteLink` for type safety. ```typescript export const ACCOUNT_ROUTE: RouteDefinition < { id?: string tab?: 'assets' | 'transactions' assetType?: 'issued' | 'nfts' } > = { path: '/accounts/:id?/:tab?/:assetType?' } ``` -------------------------------- ### Google Tag Manager NoScript Fallback Source: https://github.com/ripple/explorer/blob/staging/docs/analytics.md This noscript tag should be placed immediately after the opening tag. It provides a fallback for users who have JavaScript disabled, allowing them to still be tracked via Google Tag Manager's noscript iframe. ```html ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.