Skip to content

Commit

Permalink
Merge branch 'development' of github.com:multiversx/mx-explorer-dapp …
Browse files Browse the repository at this point in the history
…into next
  • Loading branch information
radumojic committed Nov 13, 2024
2 parents e9f0ad3 + 24fe2f0 commit b85b2ad
Show file tree
Hide file tree
Showing 11 changed files with 294 additions and 65 deletions.
43 changes: 43 additions & 0 deletions .github/workflows/build-docker-image.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
name: Publish Docker image

on:
workflow_dispatch:

jobs:
push_to_registry:
name: Push Docker image to Docker Hub
runs-on: ubuntu-latest
permissions:
packages: write
contents: read
attestations: write
steps:
- name: Check out the repo
uses: actions/checkout@v4

- name: Set up Node.js
uses: actions/setup-node@v2
with:
node-version: '18' # Specify your Node.js version

- name: Log in to Docker Hub
uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}

- name: Extract metadata (tags, labels) for Docker
id: meta
uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
with:
images: multiversx/mx-explorer-dapp

- name: Build and push Docker image
id: push
uses: docker/build-push-action@3b5e8027fcad23fda98b2e3ac259d8d67585f671
with:
context: .
file: ./Dockerfile
push: true
tags: ${{ steps.meta.outputs.tags }}
labels: ${{ steps.meta.outputs.labels }}
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ dist-ssr
/src/config/*
!/src/config/helpers
!/src/config.devnet.ts
!/src/config.placeholder.ts
!/src/config.devnet-old.ts
!/src/config.testnet.ts
!/src/config.mainnet.ts
Expand All @@ -58,6 +59,7 @@ dist-ssr
*.sh
!prepare-free-icons.sh
!prepare-pro-icons.sh
!entrypoint.sh

# Editor directories and files
.vscode/*
Expand Down
23 changes: 23 additions & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
# Use the official Node.js image
FROM node:18 AS build

# Set the working directory
WORKDIR /app

COPY . .

# Install dependencies
RUN yarn install
RUN yarn copy-placeholder-config & yarn build

# Production image
FROM nginx:alpine

# Copy the build files to the Nginx HTML directory
COPY --from=build /app/build /usr/share/nginx/html
COPY ./entrypoint.sh .
RUN chmod +x entrypoint.sh

# Expose port 80
EXPOSE 80
CMD ["./entrypoint.sh"]
18 changes: 18 additions & 0 deletions docker-compose.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
version: "3.9"

services:
test:
ports:
- 127.0.0.1:80:80
container_name: explorer
build:
context: .
dockerfile: Dockerfile
environment:
START_NAME_STOP: testnet
START_CHAIN_ID_STOP: D
START_EGLD_LABEL_STOP: xEGLD
START_WALLET_ADDRESS_STOP: https://testnet-wallet.multiversx.com
START_EXPLORER_ADDRESS_STOP: https://testnet-explorer.multiversx.com
START_NFT_EXPLORER_ADDRESS_STOP: https://testnet.xspotlight.com
START_API_ADDRESS_STOP: https://testnet-api.multiversx.com
38 changes: 38 additions & 0 deletions entrypoint.sh
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
#!/bin/sh
# Replaces envs if defined
if [ -n "$START_NAME_STOP" ]; then
echo "Name defined: ${START_NAME_STOP}, replacing in config"
find /usr/share/nginx/html/ -type f -exec sed -i 's|START_NAME_STOP|'${START_NAME_STOP}'|g' {} +
fi

if [ -n "$START_CHAIN_ID_STOP" ]; then
echo "Chain ID defined: ${START_CHAIN_ID_STOP}, replacing in config"
find /usr/share/nginx/html/ -type f -exec sed -i 's|START_CHAIN_ID_STOP|'${START_CHAIN_ID_STOP}'|g' {} +
fi

if [ -n "$START_EGLD_LABEL_STOP" ]; then
echo "egldLabel defined: ${START_EGLD_LABEL_STOP}, replacing in config"
find /usr/share/nginx/html/ -type f -exec sed -i 's|START_EGLD_LABEL_STOP|'${START_EGLD_LABEL_STOP}'|g' {} +
fi

if [ -n "$START_WALLET_ADDRESS_STOP" ]; then
echo "WalletAdress defined: ${START_WALLET_ADDRESS_STOP}, replacing in config"
find /usr/share/nginx/html/ -type f -exec sed -i 's|START_WALLET_ADDRESS_STOP|'${START_WALLET_ADDRESS_STOP}'|g' {} +
fi

if [ -n "$START_EXPLORER_ADDRESS_STOP" ]; then
echo "Explorer address defined: ${START_EXPLORER_ADDRESS_STOP}, replacing in config"
find /usr/share/nginx/html/ -type f -exec sed -i 's|START_EXPLORER_ADDRESS_STOP|'${START_EXPLORER_ADDRESS_STOP}'|g' {} +
fi

if [ -n "$START_NFT_EXPLORER_ADDRESS_STOP" ]; then
echo "NFT Explorer address defined: ${START_NFT_EXPLORER_ADDRESS_STOP}, replacing in config"
find /usr/share/nginx/html/ -type f -exec sed -i 's|START_NFT_EXPLORER_ADDRESS_STOP|'${START_NFT_EXPLORER_ADDRESS_STOP}'|g' {} +
fi

if [ -n "$START_API_ADDRESS_STOP" ]; then
echo "API address defined: ${START_API_ADDRESS_STOP}, replacing in config"
find /usr/share/nginx/html/ -type f -exec sed -i 's|START_API_ADDRESS_STOP|'${START_API_ADDRESS_STOP}'|g' {} +
fi

exec nginx -g 'daemon off;'
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,16 +62,19 @@
"build": "cross-env VITE_APP_CACHE_BUST=$(git rev-parse --short HEAD || echo 'local') vite build && yarn version:make",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"copy-placeholder-config": "run-script-os",
"copy-devnet-config": "run-script-os",
"copy-mainnet-config": "run-script-os",
"copy-testnet-config": "run-script-os",
"copy-multiple-config": "run-script-os",
"copy-base-interceptor": "run-script-os",
"copy-placeholder-config:nix": "cp ./src/config/config.placeholder.ts ./src/config/index.ts",
"copy-devnet-config:nix": "cp ./src/config/config.devnet.ts ./src/config/index.ts",
"copy-mainnet-config:nix": "cp ./src/config/config.mainnet.ts ./src/config/index.ts",
"copy-testnet-config:nix": "cp ./src/config/config.testnet.ts ./src/config/index.ts",
"copy-multiple-config:nix": "cp ./src/config/config.multiple.ts ./src/config/index.ts",
"copy-base-interceptor:nix": "cp ./src/interceptors/Interceptor.tsx ./src/interceptors/index.tsx",
"copy-placeholder-config:windows": "copy .\\src\\config\\config.placeholder.ts .\\src\\config\\index.ts",
"copy-devnet-config:windows": "copy .\\src\\config\\config.devnet.ts .\\src\\config\\index.ts",
"copy-mainnet-config:windows": "copy .\\src\\config\\config.mainnet.ts .\\src\\config\\index.ts",
"copy-testnet-config:windows": "copy .\\src\\config\\config.testnet.ts .\\src\\config\\index.ts",
Expand Down
152 changes: 94 additions & 58 deletions src/assets/scss/_bootstrap-overrides.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,110 +2,146 @@

.card {
&.card-black {
--#{$prefix}card-bg: var(--#{$prefix}#{$prefix}black);
--card-bg: var(--black);
}
}

.btn-primary {
--#{$prefix}btn-color: var(--#{$prefix}neutral-900);
--#{$prefix}btn-bg: var(--#{$prefix}primary);
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5);

--#{$prefix}btn-hover-color: var(--#{$prefix}neutral-900);
--#{$prefix}btn-hover-bg: var(--#{$prefix}primary-200);
--btn-color: var(--neutral-900);
--btn-bg: var(--primary);
--btn-border-color: transparent;
--btn-hover-border-color: transparent;
--btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--btn-focus-shadow-rgb), 0.5);

--btn-hover-color: var(--neutral-900);
--btn-hover-bg: var(--primary-200);
}

.btn {
--#{$prefix}btn-active-bg: var(--#{$prefix}primary);
--#{$prefix}btn-active-border-color: var(--#{$prefix}primary);
--#{$prefix}btn-active-color: var(--#{$prefix}neutral-900);
--btn-active-bg: var(--primary);
--btn-active-border-color: var(--primary);
--btn-active-color: var(--neutral-900);
}

.btn-outline-primary {
border-width: 1px;
--#{$prefix}btn-color: var(--#{$prefix}primary);
--#{$prefix}btn-border-color: var(--#{$prefix}primary);
--#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-200);
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5);
--#{$prefix}btn-hover-color: var(--#{$prefix}neutral-900);
--#{$prefix}btn-hover-bg: var(--#{$prefix}primary);
--btn-color: var(--primary);
--btn-border-color: var(--primary);
--btn-hover-border-color: var(--primary-200);
--btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--btn-focus-shadow-rgb), 0.5);
--btn-hover-color: var(--neutral-900);
--btn-hover-bg: var(--primary);
}

.btn-dark {
--#{$prefix}btn-color: var(--#{$prefix}body-color);
--#{$prefix}btn-bg: var(--#{$prefix}neutral-800);
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-focus-box-shadow: none;

--#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
--#{$prefix}btn-hover-bg: var(--#{$prefix}neutral-900);

--#{$prefix}btn-active-color: var(--#{$prefix}body-color);
--#{$prefix}btn-active-bg: var(--#{$prefix}neutral-900);
--#{$prefix}btn-active-border-color: var(--#{$prefix}primary);
--btn-color: var(--body-color);
--btn-bg: var(--neutral-800);
--btn-border-color: transparent;
--btn-hover-border-color: transparent;
--btn-focus-box-shadow: none;

--btn-hover-color: var(--body-color);
--btn-hover-bg: var(--neutral-900);

--btn-active-color: var(--body-color);
--btn-active-bg: var(--neutral-900);
--btn-active-border-color: var(--primary);
}

.btn-dark-alt {
--#{$prefix}btn-bg: var(--#{$prefix}neutral-900);
--#{$prefix}btn-hover-bg: var(--#{$prefix}black);
--#{$prefix}btn-active-bg: var(--#{$prefix}black);
--btn-bg: var(--neutral-900);
--btn-hover-bg: var(--black);
--btn-active-bg: var(--black);
}

.btn-dark-980 {
--#{$prefix}btn-color: var(--#{$prefix}neutral-600);
--#{$prefix}btn-bg: var(--#{$prefix}neutral-980);
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-focus-box-shadow: none;

--#{$prefix}btn-hover-color: var(--#{$prefix}primary);
--#{$prefix}btn-hover-bg: var(--#{$prefix}black);

--#{$prefix}btn-active-color: var(--#{$prefix}primary);
--#{$prefix}btn-active-bg: var(--#{$prefix}black);
--#{$prefix}btn-active-border-color: transparent;
--btn-color: var(--neutral-600);
--btn-bg: var(--neutral-980);
--btn-border-color: transparent;
--btn-hover-border-color: transparent;
--btn-focus-box-shadow: none;

--btn-hover-color: var(--primary);
--btn-hover-bg: var(--black);

--btn-active-color: var(--primary);
--btn-active-bg: var(--black);
--btn-active-border-color: transparent;
}
.btn-dark-gradient {
--btn-font-weight: 500;
--btn-font-family: var(--font-headings-regular);
--btn-color: var(--neutral-400);
--btn-bg: linear-gradient(
90deg,
rgba(117, 127, 154, 0.3),
rgba(215, 221, 232, 0.3)
);
--btn-border-color: transparent;
--btn-focus-box-shadow: none;

--btn-hover-color: var(--neutral-400);
--btn-hover-bg: linear-gradient(
90deg,
rgba(117, 127, 154, 0.4),
rgba(215, 221, 232, 0.4)
);
--btn-hover-border-color: var(--border-color);

--btn-active-color: var(--btn-hover-color);
--btn-active-bg: var(--btn-hover-bg);
--btn-active-border-color: var(--border-color);

--btn-disabled-opacity: 0.65;
--btn-disabled-color: var(--neutral-400);
--btn-disabled-bg: var(--neutral-800);
--btn-disabled-border-color: var(--border-color);

color: var(--neutral-400);
background: linear-gradient(
90deg,
rgba(117, 127, 154, 0.3),
rgba(215, 221, 232, 0.3)
);
}
.form-select,
.form-control {
background-color: var(--#{$prefix}neutral-800);
color: var(--#{$prefix}neutral-500);
background-color: var(--neutral-800);
color: var(--neutral-500);
&::placeholder {
color: var(--#{$prefix}neutral-500);
color: var(--neutral-500);
}
&:focus {
color: var(--#{$prefix}neutral-400);
background-color: var(--#{$prefix}neutral-800);
box-shadow: 0 0 0 1px rgba(var(--#{$prefix}primary-rgb), 0.5);
color: var(--neutral-400);
background-color: var(--neutral-800);
box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.5);
}
&:focus-visible {
border: 0;
outline: 0;
}
&.form-control-dark {
background-color: var(--#{$prefix}black);
background-color: var(--black);
}
}

.input-group-text {
background-color: var(--#{$prefix}neutral-800);
color: var(--#{$prefix}neutral-500);
background-color: var(--neutral-800);
color: var(--neutral-500);
&:hover {
color: var(--#{$prefix}primary);
color: var(--primary);
}
}

.input-group-black {
.form-control {
background-color: var(--#{$prefix}black);
background-color: var(--black);
&:focus {
background-color: var(--#{$prefix}black);
background-color: var(--black);
}
}
.input-group-text {
background-color: var(--#{$prefix}black);
background-color: var(--black);
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export const TransactionsInPoolTable = ({
totalTransactionsInPool,
title = (
<h5 data-testid='title' className='table-title d-flex align-items-center'>
Live Transactions In Pool <PulsatingLed className='ms-2 mt-1' />
{totalTransactionsInPool} Transactions In Pool{' '}
<PulsatingLed className='ms-2 mt-1' />
</h5>
),
dataChanged = false,
Expand All @@ -42,7 +43,7 @@ export const TransactionsInPoolTable = ({
}: TransactionsInPoolTableUIType) => {
const { type } = useGetTransactionInPoolFilters();
return (
<div className='transactions-table transactions-in-pool-table'>
<div className='transactions-table transactions-in-pool-table'>
<div className='card'>
<div className='card-header'>
<div className='card-header-item table-card-header d-flex justify-content-between align-items-center flex-wrap gap-3'>
Expand Down
2 changes: 1 addition & 1 deletion src/components/TransactionsTable/components/MethodList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const MethodList = () => {
<div className='card-header-item table-card-header d-flex justify-content-between align-items-center flex-wrap gap-3'>
<ul className='list-inline m-0 d-flex flex-wrap gap-2'>
{method && (
<li className='list-inline-item ms-2'>
<li className='list-inline-item'>
<div className='badge badge-outline badge-outline-green text-capitalize d-flex align-items-center justify-content-center pe-0'>
{method}
<div
Expand Down
Loading

0 comments on commit b85b2ad

Please sign in to comment.