new release v0.4.4

package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@axelar-network/axelarjs-ui",
-	"version": "0.4.3",
+	"version": "0.4.4",
 	"private": true,
 	"dependencies": {
-		"@axelar-network/axelarjs-sdk": "0.4.8",
+		"@axelar-network/axelarjs-sdk": "0.4.14",
 		"@cosmjs/launchpad": "^0.26.5",
 		"@cosmjs/stargate": "^0.26.5",
 		"@keplr-wallet/cosmos": "0.9.9",

src/api/ConfirmDepositAPI.ts

@@ -0,0 +1,21 @@
+import { AXELAR_API } from "config/env"
+import { getTokenDenomForAxelarChain } from "config/token"
+import { ConfirmDepositRequest } from "interface/confirmDepositTypes"
+
+// We don't actually use it in the api server because every signer will use the same axelar account to sign transaction.
+const mockSignature =
+  "0x11ee4e3ff6a5fbd800abc8fbceed54a75002c37ec9312a3c72b6171627b7842125ff38259fe8f00b4e9de5c60aa7ec0ec8bb820bef93408d5bd42c812e6750d21c"
+
+export function confirmDeposit(req: ConfirmDepositRequest) {
+  req.token = getTokenDenomForAxelarChain(req.token)
+  req.signature = req.signature || mockSignature
+  return fetch(AXELAR_API + "/confirm_deposit_tx", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(req),
+  })
+    .then((res) => res.json())
+    .then((res) => res.data.base64Tx)
+}

src/components/CompositeComponents/PageHeader.tsx

@@ -80,6 +80,19 @@ const PageHeader = () => {
       </div>
     )
   }
+
+  const pillStyle =
+    process.env.REACT_APP_STAGE === "mainnet"
+      ? { color: `green`, fontSize: `smaller`, fontWeight: `bolder` }
+      : {
+          color: `white`,
+          fontSize: `smaller`,
+          fontWeight: `bolder`,
+          backgroundColor: `red`,
+          padding: `0.2em`,
+          borderRadius: `10px`
+        }
+
   return (
     <StyledPageHeader>
       <HeaderText>
@@ -132,9 +145,7 @@ const PageHeader = () => {
           </div>
         </>
         {HeaderDivider()}
-        <div
-          style={{ color: `green`, fontSize: `smaller`, fontWeight: `bolder` }}
-        >
+        <div style={pillStyle}>
           {(process.env.REACT_APP_STAGE || "").toUpperCase()}
         </div>
         {HeaderDivider()}

src/components/CompositeComponents/Selectors/ChainSelector/SelectedChainLogoAndText.tsx

@@ -14,10 +14,11 @@ export const SelectedChainLogoAndText = (props: IChainComponentProps) => {
   } catch (e) {
     image = require(`assets/svg/select-chain-eye.svg`)?.default
   }
+  const label = props.chainInfo?.chainName?.toLowerCase() === "osmosis-2" ? "Osmosis" : props.chainInfo?.chainName
   return (
     <BaseSelector
       image={<SVGImage height={`1.5em`} width={`1.5em`} src={image} />}
-      label={props.chainInfo?.chainName || "Select Chain"}
+      label={label || "Select Chain"}
     />
   )
 }

src/components/CompositeComponents/Selectors/ChainSelector/index.tsx

@@ -72,7 +72,7 @@ const ChainSelector = React.forwardRef((props: IChainSelectorProps, ref) => {
   }
   const chainDropdownOptions: ISearchItem[] = filteredChainList.map(
     (supportedChain: ChainInfo) => ({
-      title: supportedChain.chainName,
+      title: supportedChain?.chainName?.toLowerCase() === "osmosis-2" ? "Osmosis" : supportedChain.chainName,
       active: false,
       icon: require(`assets/svg/logos/${supportedChain?.chainSymbol}.svg`)
         ?.default,

src/components/Widgets/Mask.tsx

@@ -9,5 +9,7 @@ export const Mask = styled.div<IMaskProps>`
   position: absolute;
   width: 100%;
   height: 100%;
+  z-index: 10000;
+  background-color: rgba(0,0,0,0.25);
   ${(props) => (props.centered ? `${StyledCentered}` : null)}
 `

src/config/consts.ts

@@ -1,2 +1,6 @@
 export const SOURCE_TOKEN_KEY: string = "first-chain-selection"
 export const DESTINATION_TOKEN_KEY: string = "second-chain-selection"
+export const MS_UNTIL_CONFIRM_BTN_VISIBLE: number = parseInt(
+  process.env.REACT_APP_MS_UNTIL_CONFIRM_BTN_VISIBLE ||
+    (5 * 60 * 1000).toString()
+) // 5 mins