Merge branch 'release/v0.3.0'

.prettierignore

@@ -0,0 +1,3 @@
+.next
+node_modules
+.prettierrc

.prettierrc

@@ -1,3 +1,25 @@
 {
-  "printWidth": 80
+  "printWidth": 80,
+  "importOrderSeparation": false,
+  "importOrderSortSpecifiers": true,
+  "importOrder": [
+    "<TYPES>",
+    "^react$",
+    "^next(.*)$",
+    "",
+    "^config(.*)$",
+    "^components(.*)$",
+    "",
+    "^features(.*)$",
+    "",
+    "^@(.*)$",
+    "",
+    "store",
+    "",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^[./]",
+    "",
+    ".css$"
+  ]
 }

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.preferences.importModuleSpecifier": "non-relative"
+}

README.md

@@ -1,8 +1,20 @@
 # Axelar Satellite
 
-### Coding convetion
+### Standards
 
+- Eslint
 - 2 spaces tabs
 - use barrel exports
 - use named expors instead of default ones (tree shaking)
 - make sure prettify is configured in your vs code (cmd + p and "> format document", then select prettify)
+
+### Project structure (inspired by atomic design)
+
+```
+.
+├── components -> reusable/global components
+├── features -> self contained complex components
+├── hooks -> global hooks
+├── pages -> main screens + nextjs specifics
+├── store -> global store
+```

components/common/Blockable.tsx

@@ -1,7 +1,9 @@
 import React, { PropsWithChildren } from "react";
+
+import { useSwapStore } from "store";
+
 import cn from "classnames";
 
-import { useSwapStore } from "../../store";
 import { SwapStatus } from "../../utils/enums";
 
 export const Blockable: React.FC<PropsWithChildren> = (props) => {

components/common/ConnectIndicator.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import Image from "next/image";
+
 import { useWalletStore } from "../../store";
+
 import { useIsTerraConnected } from "../../hooks/terra/useIsTerraConnected";
 
 export const ConnectIndicator = () => {
   const { wagmiConnected, keplrConnected } = useWalletStore();
-  const { isTerraConnected, isTerraInitializingOrConnected} = useIsTerraConnected();
+  const { isTerraConnected, isTerraInitializingOrConnected } =
+    useIsTerraConnected();
 
   return (
     <div className="flex items-center flex-column">
@@ -32,7 +35,11 @@ export const ConnectIndicator = () => {
           <Image height={18} width={18} src="/assets/wallets/kepler.logo.svg" />
         )}
         {isTerraConnected && (
-          <Image height={18} width={18} src="/assets/wallets/terra-station.logo.svg" />
+          <Image
+            height={18}
+            width={18}
+            src="/assets/wallets/terra-station.logo.svg"
+          />
         )}
       </div>
     </div>

components/common/GetLink.tsx

@@ -7,11 +7,7 @@ type LinkProps = {
   linkDescription: string;
 };
 
-export const Link: FC<LinkProps> = ({
-  linkDescription,
-  linkTitle,
-  url,
-}) => {
+export const Link: FC<LinkProps> = ({ linkDescription, linkTitle, url }) => {
   return (
     <a
       className="flex items-center mb-5 space-x-2"

components/common/InputWrapper.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from "react";
+
 import cn from "classnames";
 
 type InputWrapperProps = PropsWithChildren & {

components/layout/Layout.tsx

@@ -1,8 +1,10 @@
 import React, { PropsWithChildren } from "react";
+
+import packages from "../../package.json";
 import { Navbar } from "./Navbar";
-import { dependencies, version } from "../../package.json";
 
 export const Layout: React.FC<PropsWithChildren> = ({ children }) => {
+  const { dependencies, version } = packages;
   return (
     <>
       <header>

components/layout/Navbar.tsx

@@ -1,12 +1,14 @@
 import React from "react";
 import Image from "next/image";
+
+import { useApplicationStateStore } from "../../store";
+
 import {
   FAQ_MODAL,
   GETTING_STARTED_MODAL,
   SUPPORT_MODAL,
   TOS_MODAL,
 } from "../../config/constants";
-import { useApplicationStateStore } from "../../store";
 import { ConnectButton } from "../swap/parts";
 
 const SatelliteLogo = () => {

components/layout/VideoBackground.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef } from "react";
+
 import { useSwapStore } from "../../store";
+
 import { SwapStatus } from "../../utils/enums";
 
 export const VideoBackground = () => {
@@ -19,7 +21,10 @@ export const VideoBackground = () => {
       id="myVideo"
       poster="https://axelar-mainnet.s3.us-east-2.amazonaws.com/video-poster.png"
     >
-      <source src="https://axelar-mainnet.s3.us-east-2.amazonaws.com/video.mp4" type="video/mp4" />
+      <source
+        src="https://axelar-mainnet.s3.us-east-2.amazonaws.com/video.mp4"
+        type="video/mp4"
+      />
     </video>
   );
 };

components/modal/EvmAssetWarningModal.tsx

@@ -1,11 +1,21 @@
 import { useCallback, useEffect, useState } from "react";
 import Image from "next/image";
-import { useAccount } from "wagmi";
+
+import {
+  getSelectedAssetName,
+  getSelectedAssetNameDestChain,
+  getSelectedAssetSymbol,
+  getSelectedAssetSymbolDestinationChain,
+  getUnwrappedAssetSymbol,
+  isAXLToken,
+  useSwapStore,
+} from "../../store";
+
 import cn from "classnames";
+import { useAccount } from "wagmi";
 
 import { tokenContractDocs } from "../../config/constants";
 import { useGetAssetBalance } from "../../hooks";
-import { getSelectedAssetName, getSelectedAssetNameDestChain, getSelectedAssetSymbol, getSelectedAssetSymbolDestinationChain, isAXLToken, useSwapStore } from "../../store";
 import { copyToClipboard } from "../../utils";
 import { SwapStatus } from "../../utils/enums";
 import { AddressShortener } from "../common";
@@ -15,9 +25,15 @@ export const EvmAssetWarningModal = () => {
     (state) => state
   );
   const selectedAssetSymbolOnSrcChain = useSwapStore(getSelectedAssetSymbol);
-  const selectedAssetSymbolOnDestinationChain = useSwapStore(getSelectedAssetSymbolDestinationChain);
+  const unwrappedAssetSymbol = useSwapStore(getUnwrappedAssetSymbol);
+  const { shouldUnwrapAsset } = useSwapStore((state) => state);
+  const selectedAssetSymbolOnDestinationChain = useSwapStore(
+    getSelectedAssetSymbolDestinationChain
+  );
   const selectedAssetNameSrcChain = useSwapStore(getSelectedAssetName);
-  const selectedAssetNameOnDestinationChain = useSwapStore(getSelectedAssetNameDestChain);
+  const selectedAssetNameOnDestinationChain = useSwapStore(
+    getSelectedAssetNameDestChain
+  );
   const hasSelectedAXLToken = useSwapStore(isAXLToken);
 
   const { balance } = useGetAssetBalance();
@@ -44,7 +60,7 @@ export const EvmAssetWarningModal = () => {
     setShowAssetWarning(false);
   }, [setShowAssetWarning]);
 
-  const tokenAddress = asset?.chain_aliases[srcChain.chainName.toLowerCase()]
+  const tokenAddress = asset?.chain_aliases[srcChain.chainName?.toLowerCase()]
     ?.tokenAddress as string;
 
   return (
@@ -63,38 +79,48 @@ export const EvmAssetWarningModal = () => {
           <div>
             <div>
               Only send{" "}
-              <span className="font-bold">{selectedAssetNameSrcChain} {hasSelectedAXLToken ? `(might be ${selectedAssetSymbolOnSrcChain} in Metamask)` : null} </span>
+              <span className="font-bold">
+                {selectedAssetNameSrcChain}{" "}
+                {hasSelectedAXLToken
+                  ? `(might be ${selectedAssetSymbolOnSrcChain} in Metamask)`
+                  : null}{" "}
+              </span>
               to this deposit address on
               <strong className="capitalize"> {srcChain.chainName}</strong>
               <div>Any other tokens sent to this address will be lost.</div>
             </div>
 
             <div className="py-2 text-center">
               <div className="mt-2">
-                <div className="font-light text-gray-300">
-                  {selectedAssetNameSrcChain} token contract address |{" "}
-                  <strong className="capitalize">{srcChain.chainName}</strong>
-                  <div className="flex items-center justify-center font-bold gap-x-2">
-                    <AddressShortener value={tokenAddress} />
-                    <div
-                      className="cursor-pointer"
-                      onClick={() => copyToClipboard(tokenAddress)}
-                    >
-                      <Image
-                        src={"/assets/ui/copy.svg"}
-                        height={16}
-                        width={16}
-                      />
+                {!asset?.is_gas_token && (
+                  <div className="font-light text-gray-300">
+                    {selectedAssetNameSrcChain} token contract address |{" "}
+                    <strong className="capitalize">{srcChain.chainName}</strong>
+                    <div className="flex items-center justify-center font-bold gap-x-2">
+                      <AddressShortener value={tokenAddress} />
+                      <div
+                        className="cursor-pointer"
+                        onClick={() => copyToClipboard(tokenAddress)}
+                      >
+                        <Image
+                          src={"/assets/ui/copy.svg"}
+                          height={16}
+                          width={16}
+                        />
+                      </div>
                     </div>
                   </div>
-                </div>
+                )}
               </div>
               {address && (
                 <div className="mt-2">
                   <div className="font-light text-gray-300">
                     Connected wallet balance |{" "}
                     <strong className="">
-                      {balance} {hasSelectedAXLToken ? selectedAssetNameSrcChain : selectedAssetSymbolOnSrcChain}
+                      {balance}{" "}
+                      {hasSelectedAXLToken
+                        ? selectedAssetNameSrcChain
+                        : selectedAssetSymbolOnSrcChain}
                     </strong>
                     <div className="flex items-center justify-center font-bold gap-x-2">
                       <AddressShortener value={address} />
@@ -120,10 +146,18 @@ export const EvmAssetWarningModal = () => {
           <div className="mt-5">
             <span>
               The recipient will receive{" "}
-              <span className="font-bold">{selectedAssetNameOnDestinationChain}</span> on{" "}
-              <span className="capitalize">{destChain.chainName}</span>. If your
-              recipient doesn’t support{" "}
-              <span className="font-bold">{selectedAssetNameOnDestinationChain}</span>{" "}
+              <span className="font-bold">
+                {shouldUnwrapAsset && unwrappedAssetSymbol
+                  ? unwrappedAssetSymbol
+                  : selectedAssetNameOnDestinationChain}
+              </span>{" "}
+              on <span className="capitalize">{destChain.chainName}</span>. If
+              your recipient doesn’t support{" "}
+              <span className="font-bold">
+                {shouldUnwrapAsset && unwrappedAssetSymbol
+                  ? unwrappedAssetSymbol
+                  : selectedAssetNameOnDestinationChain}
+              </span>{" "}
               <strong className="font-bold text-red-400">
                 the funds will be lost!
               </strong>

components/modal/ModalWindow.tsx

@@ -1,6 +1,8 @@
 import { FC } from "react";
-import { FAQ_MODAL, TOS_MODAL } from "../../config/constants";
+
 import { useApplicationStateStore } from "../../store";
+
+import { FAQ_MODAL, TOS_MODAL } from "../../config/constants";
 import { FAQ } from "./content/FAQ";
 import { GettingStarted } from "./content/GettingStarted";
 import { Support } from "./content/Support";

components/modal/content/FAQ.tsx

@@ -1,7 +1,13 @@
 import { FC, useState } from "react";
-import { docsLinks, FAQ_MODAL, tokenContractDocs } from "../../../config/constants";
+
 import { useApplicationStateStore } from "../../../store";
 
+import {
+  FAQ_MODAL,
+  docsLinks,
+  tokenContractDocs,
+} from "../../../config/constants";
+
 type FAQProps = {};
 
 export const FAQ: FC<FAQProps> = ({}) => {
@@ -110,18 +116,25 @@ const FAQs = [
     title: "Can I move non-Axelar Wrapped assets via Satellite?",
     text: (
       <div>
-        No. Satellite supports moving of Axelar Wrapped Assets only. Before you deposit your tokens to the deposit address, please verify that you’re using the correct token contract. If you send a non-Axelar wrapped asset to the deposit address, it will be lost.
+        Yes, we do support a limited amount of native assets such as AVAX, ETH,
+        FTM, MATIC, GLMR...etc. Before you deposit your tokens to the deposit
+        address, please verify that you’re using the correct token contract. If
+        you send a non-Axelar wrapped asset or a native asset we do not support
+        to the deposit address,{" "}
+        <b className="text-red-400 underline">it will be lost</b>!
         <div className="mt-5">
-          See the {" "}
+          See the{" "}
           <a
-            href={tokenContractDocs[process.env.NEXT_PUBLIC_ENVIRONMENT as string]}
+            href={
+              tokenContractDocs[process.env.NEXT_PUBLIC_ENVIRONMENT as string]
+            }
             className="link link-primary"
             target="_blank"
             rel="noopener noreferrer nofollow"
           >
             docs
-          </a>
-          {" "}for a list of token contracts supported by Satellite on the mainnet.
+          </a>{" "}
+          for a list of token contracts supported by Satellite on the mainnet.
         </div>
       </div>
     ),

components/modal/content/GettingStarted.tsx

@@ -1,10 +1,12 @@
 import { FC } from "react";
+
+import { useApplicationStateStore } from "../../../store";
+
 import {
-  docsLinks,
   GETTING_STARTED_MODAL,
+  docsLinks,
   tokenContractDocs,
 } from "../../../config/constants";
-import { useApplicationStateStore } from "../../../store";
 import { Link } from "../../common/GetLink";
 
 type GettingStartedProps = {};
@@ -29,7 +31,9 @@ export const GettingStarted: FC<GettingStartedProps> = ({}) => {
       })}
       {Link({
         url: tokenContractDocs[process.env.NEXT_PUBLIC_ENVIRONMENT as string],
-        linkTitle: `Token Contracts & Channel IDs (${process.env.NEXT_PUBLIC_ENVIRONMENT as string})`,
+        linkTitle: `Token Contracts & Channel IDs (${
+          process.env.NEXT_PUBLIC_ENVIRONMENT as string
+        })`,
         linkDescription: `An IMPORTANT document with token contract addresses for all
         supported assets.`,
       })}
@@ -48,6 +52,3 @@ export const GettingStarted: FC<GettingStartedProps> = ({}) => {
     </div>
   );
 };
-
-
-