From 107d58cf1db201525223e734059cca24ae51152b Mon Sep 17 00:00:00 2001
From: Henrique Barcelos <hbarcelos909@gmail.com>
Date: Fri, 23 Jul 2021 14:16:19 -0300
Subject: [PATCH] fix: fixed params for xDAI Chain

---
 src/api/side-chain/chain-params.js        |  2 +-
 src/components/alternative-chain-court.js | 95 +++++++++++++++++------
 2 files changed, 72 insertions(+), 25 deletions(-)

diff --git a/src/api/side-chain/chain-params.js b/src/api/side-chain/chain-params.js
index 686bbb0..32e4a1a 100644
--- a/src/api/side-chain/chain-params.js
+++ b/src/api/side-chain/chain-params.js
@@ -12,7 +12,7 @@ const supportedSideChains = {
   // xDai
   100: {
     chainId: 100,
-    chainName: "xDAI",
+    chainName: "xDAI Chain",
     nativeCurrency: { name: "xDAI", symbol: "xDAI", decimals: 18 },
     rpcUrls: [ensureEnv("REACT_APP_WEB3_FALLBACK_XDAI_HTTPS_URL")],
     blockExplorerUrls: [getBaseUrl(100)],
diff --git a/src/components/alternative-chain-court.js b/src/components/alternative-chain-court.js
index 988739a..4e25dcf 100644
--- a/src/components/alternative-chain-court.js
+++ b/src/components/alternative-chain-court.js
@@ -51,17 +51,6 @@ export default function AlternativeChainCourt() {
 
   return isSupportedSideChain(destinationChainId) ? (
     <DestinationChainIdContext.Provider value={destinationChainId}>
-      <AlternativeChainBanner
-        message={
-          <>
-            Kleros Court is now{" "}
-            <StyledResponsiveBannerButton type="link" onClick={switchNetwork}>
-              available on {chainIdToNetworkName[destinationChainId]}
-            </StyledResponsiveBannerButton>
-            .
-          </>
-        }
-      />
       <StyledWrapper>
         <AlternativeChainCourtWrapper />
       </StyledWrapper>
@@ -110,13 +99,56 @@ function SideChainCourtDecisionTree() {
   const switchNetwork = useSwitchNetwork(destinationChainId);
 
   return hasErrors || hasAnyBalance ? (
-    <AlternativeChainCourtLink
-      ButtonComponent={StyledButtonLink}
-      destinationChainId={destinationChainId}
-      onClick={switchNetwork}
-    />
+    <>
+      <AlternativeChainCourtLink
+        ButtonComponent={StyledButtonLink}
+        destinationChainId={destinationChainId}
+        onClick={switchNetwork}
+      />
+      <AlternativeChainBanner
+        message={
+          <>
+            Kleros Court is now available on{" "}
+            {
+              <AlternativeChainCourtLink
+                ButtonComponent={StyledResponsiveBannerButton}
+                icon={null}
+                destinationChainId={destinationChainId}
+                text={chainIdToNetworkName[destinationChainId]}
+              />
+            }
+            .
+          </>
+        }
+      />
+    </>
   ) : (
-    <SideChainCourtModal balance={balance} rawBalance={rawBalance} errors={errors} />
+    <>
+      <SideChainCourtModal balance={balance} rawBalance={rawBalance} errors={errors} />
+      <AlternativeChainBanner
+        message={
+          <>
+            Kleros Court is now available on{" "}
+            {
+              <SideChainCourtModal
+                balance={balance}
+                rawBalance={rawBalance}
+                errors={errors}
+                trigger={
+                  <AlternativeChainCourtLink
+                    ButtonComponent={StyledResponsiveBannerButton}
+                    icon={null}
+                    destinationChainId={destinationChainId}
+                    text={chainIdToNetworkName[destinationChainId]}
+                  />
+                }
+              />
+            }
+            .
+          </>
+        }
+      />
+    </>
   );
 }
 
@@ -244,7 +276,7 @@ const StyledWrapper = styled.div`
   }
 `;
 
-function SideChainCourtModal({ balance, rawBalance, errors }) {
+function SideChainCourtModal({ balance, rawBalance, errors, trigger }) {
   const [visible, setVisible] = React.useState(false);
   const destinationChainId = useDestinationChainId();
 
@@ -253,6 +285,17 @@ function SideChainCourtModal({ balance, rawBalance, errors }) {
   const [autoSwitchEnabled, setAutoSwitchEnabled] = React.useState(false);
   const hasAnyBalance = [balance, rawBalance].some((value) => (value ? toBN(value).gt(toBN("0")) : false));
 
+  const triggerElement = React.cloneElement(trigger, {
+    destinationChainId,
+    onClick: (e) => {
+      if (typeof trigger.props?.onClick === "function") {
+        trigger.props.onClick(e);
+      }
+
+      setVisible(true);
+    },
+  });
+
   React.useEffect(() => {
     if (autoSwitchEnabled && hasAnyBalance) {
       switchNetwork();
@@ -261,11 +304,7 @@ function SideChainCourtModal({ balance, rawBalance, errors }) {
 
   return (
     <>
-      <AlternativeChainCourtLink
-        ButtonComponent={StyledButtonLink}
-        destinationChainId={destinationChainId}
-        onClick={() => setVisible(true)}
-      />
+      {triggerElement}
       <StyledModal
         centered
         closable
@@ -319,12 +358,17 @@ function SideChainCourtModal({ balance, rawBalance, errors }) {
 SideChainCourtModal.propTypes = {
   balance: t.oneOfType([t.string, t.any.isRequired]),
   rawBalance: t.oneOfType([t.string, t.any.isRequired]),
+  trigger: t.element,
   errors: t.shape({
     balance: t.instanceOf(Error),
     rawBalance: t.instanceOf(Error),
   }),
 };
 
+SideChainCourtModal.defaultProps = {
+  trigger: <AlternativeChainCourtLink ButtonComponent={StyledButtonLink} />,
+};
+
 const StyledModal = styled(Modal)`
   .ant-modal-header {
     border: none;
@@ -383,7 +427,10 @@ const StyledButtonLink = styled(ButtonLink)`
   }
 `;
 
-const StyledResponsiveBannerButton = styled(Button)`
+const StyledResponsiveBannerButton = styled(Button).attrs((props) => ({
+  ...props,
+  type: props.type ?? "link",
+}))`
   color: inherit;
   line-height: inherit;
   height: auto;