Merge pull request #140 from Cerebellum-Network/release/0.25.0

Release 0.25.0

CHANGELOG.md

@@ -3,6 +3,9 @@
 ## vNext
 ...
 
+## v0.25.0
+- Added ability to select destination address from Polkadot-JS Web Extension or paste it manually.
+
 ## v0.24.0
 - Migrated to WalletConnect v2
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@Cerebellum-Network/chainbridge-ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "private": true,
   "engines": {
     "node": "^16.0.0"

src/Components/Custom/AddressSelectInput.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import {SelectInput} from "@chainsafe/common-components";
+import {useField} from "formik";
+import {DestinationChainContext} from "../../Contexts/Adaptors/interfaces";
+
+interface IAddressSelectInput {
+    addresses: DestinationChainContext["addresses"];
+    name: string;
+};
+
+const AddressSelectInput: React.FC<IAddressSelectInput> =
+    ({
+         addresses,
+         name,
+     }) => {
+        const [field, meta, helpers] = useField(name);
+
+        return (
+            <SelectInput
+                value={field.value}
+                label="Select a destination address from Polkadot.js Extension"
+                options={addresses}
+                onChange={(address) => {
+                    helpers.setValue(address);
+                }}
+                placeholder="Select a destination address"
+            />
+        );
+    };
+
+export default AddressSelectInput;

src/Components/Pages/TransferPage.tsx

@@ -1,17 +1,19 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { makeStyles, createStyles, ITheme } from "@chainsafe/common-theme";
 import AboutDrawer from "../../Modules/AboutDrawer";
 import ChangeNetworkDrawer from "../../Modules/ChangeNetworkDrawer";
 import PreflightModalTransfer from "../../Modules/PreflightModalTransfer";
 import {
-  Button,
-  Typography,
-  // QuestionCircleSvg,
-  SelectInput,
-  NavLink,
+    Button,
+    Typography,
+    // QuestionCircleSvg,
+    SelectInput,
+    NavLink,
+    CheckboxInput,
 } from "@chainsafe/common-components";
 import { Form, Formik } from "formik";
 import AddressInput from "../Custom/AddressInput";
+import AddressSelectInput from "../Custom/AddressSelectInput";
 import clsx from "clsx";
 import TransferActiveModal from "../../Modules/TransferActiveModal";
 import { useChainbridge } from "../../Contexts/ChainbridgeContext";
@@ -278,6 +280,9 @@ const useStyles = makeStyles(({ constants, palette }: ITheme) =>
       marginBottom: constants.generalUnit * 3,
       fontSize: 8,
     },
+    destinationAddressCheckbox: {
+        margin: "24px 0px",
+    },
     addressInput: {
       "& > div > input": {
         fontSize: "12px !important",
@@ -411,6 +416,7 @@ const TransferPage = () => {
     checkSupplies,
   } = useChainbridge();
 
+  const [shouldPasteDestinationAddressManually, setShouldPasteDestinationAddressManually] = useState(false);
   const { accounts, selectAccount, disconnect } = useHomeBridge();
   const [aboutOpen, setAboutOpen] = useState<boolean>(false);
   const [walletConnecting, setWalletConnecting] = useState(false);
@@ -424,6 +430,8 @@ const TransferPage = () => {
     tokenSymbol: "",
   });
 
+  const isDestinationAddressListExists = useMemo(() => Boolean(destinationBridge.addresses.length), [destinationBridge.addresses]);
+
   // This is a workaround for Ethereum networks uncaught exception bug
   useEffect(() => {
     const unhandledRejection = !!localStorage.getItem(UNHANDLED_REJECTION);
@@ -750,20 +758,36 @@ const TransferPage = () => {
                     </section>
                   </section>
                   <section>
-                    <AddressInput
-                      disabled={!destinationChainConfig}
-                      name="receiver"
-                      label="Destination Address"
-                      placeholder="Please enter the receiving address..."
-                      className={classes.address}
-                      classNames={{
-                        input: classes.addressInput,
-                      }}
-                      senderAddress={`${address}`}
-                      sendToSameAccountHelper={
-                        destinationChainConfig?.type === homeConfig?.type
-                      }
-                    />
+                      {!shouldPasteDestinationAddressManually &&
+                      isDestinationAddressListExists ? (
+                          <AddressSelectInput
+                              name="receiver"
+                              addresses={destinationBridge.addresses}
+                          />
+                      ): (
+                          <AddressInput
+                              disabled={!destinationChainConfig}
+                              name="receiver"
+                              label="Destination Address"
+                              placeholder="Please enter the receiving address..."
+                              className={classes.address}
+                              classNames={{
+                                  input: classes.addressInput,
+                              }}
+                              senderAddress={`${address}`}
+                              sendToSameAccountHelper={
+                                  destinationChainConfig?.type === homeConfig?.type
+                              }
+                          />
+                      )}
+                      {isDestinationAddressListExists && (
+                          <CheckboxInput
+                              className={classes.destinationAddressCheckbox}
+                              label="Paste a destination address manually"
+                              value={shouldPasteDestinationAddressManually}
+                              onChange={() => setShouldPasteDestinationAddressManually(!shouldPasteDestinationAddressManually)}
+                          />
+                      )}
                   </section>
                   <FeesFormikWrapped
                     amountFormikName="tokenAmount"

src/Contexts/Adaptors/EVMAdaptors/EVMDestinationAdaptorProvider.tsx

@@ -317,6 +317,7 @@ export const EVMDestinationAdaptorProvider = ({
     <DestinationBridgeContext.Provider
       value={{
         disconnect: async () => {},
+        addresses: [],
       }}
     >
       {children}

src/Contexts/Adaptors/SubstrateDestinationAdaptor.tsx

@@ -1,4 +1,8 @@
 import React, { useCallback, useEffect, useState } from "react";
+import {
+  web3Accounts,
+  web3Enable,
+} from "@polkadot/extension-dapp";
 import { DestinationBridgeContext } from "../DestinationBridgeContext";
 import { useNetworkManager } from "../NetworkManagerContext";
 import {
@@ -7,7 +11,7 @@ import {
   VoteStatus,
   getTransferTxHashByNonce,
 } from "./SubstrateApis/ChainBridgeAPI";
-import { IDestinationBridgeProviderProps } from "./interfaces";
+import { DestinationChainContext, IDestinationBridgeProviderProps } from "./interfaces";
 
 import { ApiPromise } from "@polkadot/api";
 import {
@@ -43,6 +47,8 @@ export const SubstrateDestinationAdaptorProvider = ({
   } = useNetworkManager();
 
   const [initialising, setInitialising] = useState(false);
+  const [addresses, setAddresses] = useState<DestinationChainContext["addresses"]>([]);
+
   useEffect(() => {
     // Once the chain ID has been set in the network context, the destination configuration will be automatically
     // set thus triggering this
@@ -254,13 +260,28 @@ export const SubstrateDestinationAdaptorProvider = ({
     }
   }, [transactionStatus, fallback, initFallbackMechanism]);
 
+  useEffect(() => {
+    web3Enable('Cere Bridge').then(() => {
+      web3Accounts().then((injectedAccountsWithMeta) => {
+        const transformAddress = (address: string) => `${address.slice(0,5)}...${address.slice(-5)}`;
+
+        setAddresses(injectedAccountsWithMeta.map(({address, meta}) => ({
+            value: address,
+            label: `${meta.name} ( ${transformAddress(address)} )`,
+        })));
+
+      })
+    });
+  }, [web3Accounts, web3Enable])
+
   return (
     <DestinationBridgeContext.Provider
       value={{
         disconnect: async () => {
           if (api?.isConnected) await api?.disconnect();
           setApi(undefined);
         },
+        addresses,
       }}
     >
       {children}

src/Contexts/Adaptors/interfaces.tsx

@@ -68,4 +68,5 @@ export interface HomeChainAdaptorContext {
 
 export interface DestinationChainContext {
   disconnect: () => Promise<void>;
+  addresses: Array<{ value: string; label: string }>;
 }

src/Contexts/NetworkManagerContext.tsx

@@ -285,7 +285,7 @@ const NetworkManagerProvider = ({ children }: INetworkManagerProviderProps) => {
       return (
         <DestinationBridgeContext.Provider
           value={{
-            disconnect: async () => {},
+            disconnect: async () => {}, addresses: [],
           }}
         >
           {children}

src/Layouts/AppWrapper.tsx

@@ -53,7 +53,7 @@ const useStyles = makeStyles(
       },
       pageArea: {
         height: "100%",
-        overflow: "auto",
+        overflow: "visible",
         boxShadow: "20px 4px 72px rgba(85, 85, 85, 0.15)",
         borderRadius: 4,
         width: "fit-content",