Portal 3.2 Beta to Mainnet

README.md

@@ -17,13 +17,13 @@ It's possible to embed Bridge link with fallback into your dApp.
 #### Directing users to the particular pair of chains
 
 ```
-http://[BASE_BRIDGE_URL]/?from=[FROM_CHAIN_NAME]&to=[TO_CHAIN_NAME]&token=[TOKEN_SYMBOL]&type=[TOKEN_TYPE]&from-app=[FROM_APP_NAME]&to-app=[TO_APP_NAME]
+http://[BASE_PORTAL_URL]/bridge/?from=[FROM_CHAIN_NAME]&to=[TO_CHAIN_NAME]&token=[TOKEN_SYMBOL]&type=[TOKEN_TYPE]&from-app=[FROM_APP_NAME]&to-app=[TO_APP_NAME]
 ```
 
 Example:
 
 ```
-http://[BASE_BRIDGE_URL]/?from=elated-tan-skat&to=green-giddy-denebola&token=skl&type=erc20&from-app=ruby&to-app=nftb
+https://[BASE_PORTAL_URL]/bridge/?from=elated-tan-skat&to=green-giddy-denebola&token=usdc&type=erc20&from-app=sushiswap&to-app=bit-hotel
 ```
 
 #### Customizing transfer parameters
@@ -42,13 +42,11 @@ Optional params:
 - `from-app` - when transfering from a Hub chain, it's possible to specify the name of the app to transfer from
 - `to-app` - when transfering to a Hub chain, it's possible to specify the name of the app to transfer to
 
-
 Will be available in the future:
 
 - `fallback-url` - URL with fallback link to redirect user after the transfer is completed (should be encoded)
 - `fallback-text` - Text to display on the fallback button (should be encoded)
 
-
 In JS you can use the following function to encode the URL:
 
 ```js
@@ -58,31 +56,40 @@ function encodeUrl(url) {
 ```
 
 ## Getting Started
+
 To get started with the SKALE Portal, users can visit the [SKALE Portal](https://portal.skale.space/) website and click on the "Connect wallet" button. Users can then connect their wallets and select the source and destination blockchains for their transfers.
 
 ## Development Setup
+
 If you're interested in contributing to the SKALE Portal, follow these steps to set up your development environment:
 
 1. Clone the repository: `git clone --recurse-submodules https://github.com/skalenetwork/portal.git`
-2. Install dependencies: `cd portal && yarn install`
-3. Prepare metadata: `NETWORK_NAME=[SKALE NETWORK NAME - mainnet or staging] bash build.sh`
-4. Export Mainnet Ethereum endpoint to your env: `export VITE_MAINNET_ENDPOINT=XXX` or create `.env` file in the root dir
-5. Start the development server: `yarn start`
+2. Install dependencies: `cd portal && bun i`
+3. Build the project:
+
+- Mainnet env: `bun build:mainnet`
+- Testnet env: `bun build:testnet`
+
+4. Start the development server: `VITE_WC_PROJECT_ID=[PUT WALLETCONNECT PROJECT ID HERE] bun dev`
 
 The SKALE Portal is built using the Create React App TypeScript template and uses [Metaport](https://github.com/skalenetwork/metaport) and [ima-js](https://github.com/skalenetwork/ima-js) libraries.
 
 To contribute to the project, create a new branch with a descriptive name for your changes, make your changes, and submit a pull request.
 
-## Environment Variables
+### Required Environment Variables
 
 ```bash
-VITE_MAINNET_ENDPOINT= # mainnet endpoint, required
-VITE_WC_PROJECT_ID= # walletconnect project ID, optional
+VITE_WC_PROJECT_ID= # walletconnect project ID, REQUIRED
+```
+
+### Optional Environment Variables
+
+```bash
+VITE_MAINNET_ENDPOINT= # mainnet endpoint, optional
 VITE_TRANSAK_STAGING_ENV=true # set test env for transak, optional
 VITE_TRANSAK_API_KEY= # onramp API key, optional
 ```
 
-
 ## Security and Liability
 
 The SKALE Portal and code is WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

config/testnet.ts

@@ -2,6 +2,7 @@ import { type interfaces } from '@skalenetwork/metaport'
 
 export const METAPORT_CONFIG: interfaces.MetaportConfig = {
   skaleNetwork: 'testnet',
+  mainnetEndpoint: 'https://ethereum-holesky-rpc.publicnode.com',
   openOnLoad: true,
   openButton: true,
   debug: false,

generate-imports.cjs

@@ -21,7 +21,9 @@ const generateNamespaceExportsForDir = (dir) => {
     if (svgFiles.length === 0) return; // Skip folders without SVGs
 
     const namespaceExports = svgFiles.map(file => {
-        const variableName = path.basename(file, path.extname(file)).replace(/-([a-z])/g, (_, g) => g.toUpperCase()); // Convert kebab-case to camelCase
+        const variableName = path.basename(file, path.extname(file))
+            .replace(/^(_+)/, '$1')
+            .replace(/-([a-z0-9])/gi, (_, g) => g.toUpperCase());
         return `export * as ${variableName} from './${path.basename(file)}';`;
     }).join('\n');
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "portal",
   "private": true,
-  "version": "3.1.0",
+  "version": "3.2.0",
   "type": "module",
   "scripts": {
     "build:testnet": "NETWORK_NAME=testnet bash build.sh",
@@ -21,7 +21,7 @@
     "@mdx-js/rollup": "^2.3.0",
     "@mui/icons-material": "^5.15.14",
     "@mui/material": "^5.15.14",
-    "@skalenetwork/metaport": "3.1.0-develop.0",
+    "@skalenetwork/metaport": "3.2.0-develop.0",
     "@skalenetwork/skale-contracts-ethers-v6": "1.0.1",
     "@transak/transak-sdk": "^3.1.1",
     "@types/react-copy-to-clipboard": "^5.0.4",

packages/core/package.json

@@ -11,7 +11,6 @@
   },
   "author": "SKALE Labs",
   "devDependencies": {
-    "ethers": "*.*.*",
     "typescript": "^4.9.5"
   }
 }

packages/core/src/types/staking/Delegation.ts

@@ -69,3 +69,22 @@ export interface IDelegationInfo {
   delegationId: bigint
   delegationType: DelegationType
 }
+
+export interface IDelegationTotals {
+  proposed: {
+    count: number
+    amount: bigint
+  }
+  accepted: {
+    count: number
+    amount: bigint
+  }
+  delegated: {
+    count: number
+    amount: bigint
+  }
+  completed: {
+    count: number
+    amount: bigint
+  }
+}

src/App.scss

@@ -76,6 +76,10 @@ body {
   width: 100%;
 }
 
+.fullH {
+  height: 100%;
+}
+
 .mp__btnConnect {
   position: relative;
 
@@ -449,12 +453,8 @@ body::-webkit-scrollbar {
   box-shadow: none !important;
 }
 
-.btnerror {
-  background: #f4433621;
-}
-
-.btnwarning {
-  background: rgb(244 139 54 / 13%);
+.btnDisabled {
+  background: #262626;
 }
 
 .btnSmLoading {
@@ -543,6 +543,12 @@ body::-webkit-scrollbar {
   }
 }
 
+.MuiToggleButton-root {
+  border-radius: 25px !important;
+  padding: 4px 10px;
+  border: none !important;
+}
+
 .copyBoard {
   margin: 10px 0 !important;
   padding: 13pt 15pt !important;
@@ -559,8 +565,8 @@ body::-webkit-scrollbar {
 }
 
 code {
+  white-space: pre-wrap;
   overflow: hidden;
-  white-space: nowrap;
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
@@ -791,6 +797,22 @@ input[type=number] {
   }
 }
 
+.chipNotification {
+  background: #e94e4e;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  p {
+    color: #000000de !important;
+    font-weight: 600 !important;
+  }
+}
+
 .chipTrending {
   background: linear-gradient(180deg, #e56d36, #D0602D) !important;
 
@@ -825,12 +847,13 @@ input[type=number] {
 }
 
 .chipXs {
-  border-radius: 20px;
-  padding: 3px 6px;
+  border-radius: 15px;
+  padding: 6px 8px;
+  text-align: center;
 
   svg {
-    width: 14px;
-    height: 14px;
+    width: 12px;
+    height: 12px;
   }
 }
 
@@ -844,16 +867,6 @@ input[type=number] {
   }
 }
 
-.chipXs {
-  border-radius: 15px;
-  padding: 4px 6px;
-
-  svg {
-    width: 12px;
-    height: 12px;
-  }
-}
-
 .skChip {
   background: linear-gradient(180deg, rgb(52 52 52), rgb(31 31 31));
 }
@@ -885,6 +898,11 @@ input[type=number] {
   color: #3cda94;
 }
 
+.chip_REWARDS {
+  background: linear-gradient(180deg, #3d390f, #2a230a);
+  color: #dac83c;
+}
+
 .chip_ACCEPTED {
   background: linear-gradient(180deg, #233d0f, #0a1b07);
   color: #3cda4e;
@@ -1149,7 +1167,6 @@ input[type=number] {
   }
 }
 
-
 .trustedBadge {
   color: #0095f6;
 }
@@ -1158,12 +1175,6 @@ input[type=number] {
   color: #ffb817;
 }
 
-.validatorCard {
-  height: 100% !important;
-  cursor: pointer;
-}
-
-
 .pOneLine {
   overflow: hidden;
   white-space: nowrap;
@@ -1426,7 +1437,21 @@ input[type=number] {
   display: none;
 }
 
+.opacity0 {
+  opacity: 0;
+}
+
 .MuiTooltip-tooltip {
   font-size: 0.8rem !important;
   padding: 8px 12px !important;
+}
+
+.delegationFlowText {
+  border-top: 2px #4a4a4a solid;
+  margin: 0 10px;
+  padding: 2px 5px 0 5px;
+}
+
+.delegationFlowIcon {
+  margin-top: -20px;
 }