Add support for cosmos chains (#3)

* Display session topic in header

* increase font

* display complete topic on hover

* Display 0 instead of null

* Dont show balances if assets object is empty

* Revert changing 0 to null if assets do not exist

---------

Co-authored-by: Adw8 <adwait@deepstacksoft.com>
Co-authored-by: Shreerang Kale <shreerangkale@gmail.com>

advanced/dapps/react-dapp-v2/package.json

@@ -39,6 +39,7 @@
     "react-dom": "^17.0.2",
     "react-hot-toast": "^2.4.1",
     "react-scripts": "^4.0.3",
+    "react-tooltip": "^5.26.3",
     "solana-wallet": "^1.0.1",
     "styled-components": "^5.2.0",
     "tronweb": "^4.4.0",

advanced/dapps/react-dapp-v2/src/components/Blockchain.tsx

@@ -139,6 +139,7 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
     typeof account !== "undefined" && typeof balances !== "undefined"
       ? balances[account]
       : [];
+
   return (
     <React.Fragment>
       <SAccount
@@ -160,7 +161,7 @@ const Blockchain: FC<PropsWithChildren<BlockchainProps>> = (
             </Column>
           ) : (
             <>
-              {!!assets && assets.length ? (
+              {!!assets && assets.length && assets[0].balance !== '' ? (
                 <SFullWidthContainer>
                   <h6>Balances</h6>
                   <Column center>

advanced/dapps/react-dapp-v2/src/components/Header.tsx

@@ -67,8 +67,9 @@ const Header = (props: HeaderProps) => {
       {session ? (
         <>
           <SActiveSession>
-            <p>{`Connected to`}</p>
-            <p>{session.peer.metadata.name}</p>
+              <p style={{ fontSize: "15px" }}>{`Connected to`}</p>
+              <p style={{ fontSize: "15px" }}>{session.peer.metadata.name}</p>
+              <p style={{ fontSize: "15px" }}>Session Topic: {session.topic}</p>
           </SActiveSession>
           <SHeaderActions>
             <GithubLogoContainer>

advanced/dapps/react-dapp-v2/src/components/Pairing.tsx

@@ -16,12 +16,12 @@ const SPairingContainer = styled.div`
 `;
 
 const Pairing = (props: PairingProps) => {
-  const { peerMetadata } = props.pairing;
+  const { peerMetadata, topic } = props.pairing;
   return (
     <SPairingContainer onClick={props.onClick}>
       <div>
         {typeof peerMetadata !== "undefined" ? (
-          <Peer oneLiner metadata={peerMetadata} />
+          <Peer oneLiner metadata={peerMetadata} topic={topic} />
         ) : (
           <div>{`Unknown Wallet`}</div>
         )}

advanced/dapps/react-dapp-v2/src/components/Peer.tsx

@@ -2,6 +2,7 @@ import { SignClientTypes } from "@walletconnect/types";
 import * as React from "react";
 import styled from "styled-components";
 import { colors, fonts } from "../styles";
+import { Tooltip } from "react-tooltip";
 
 const SPeerOneLiner = styled.div`
   display: flex;
@@ -54,13 +55,29 @@ const SName = styled(SCenter as any)`
 interface PeerProps {
   oneLiner?: boolean;
   metadata: SignClientTypes.Metadata;
+  topic: string | undefined;
 }
+const truncateTopic = (topic: string | undefined, maxLength: number) => {
+  if (topic) {
+    return topic.length > maxLength
+      ? `${topic.substring(0, maxLength)}...${topic.slice(-3)}`
+      : topic;
+  }
+};
 
-const Peer = (props: PeerProps) =>
-  props.oneLiner ? (
+const Peer = (props: PeerProps) => {
+  const topic = props.topic;
+  const truncatedTopic = truncateTopic(props.topic, 3);
+
+  return props.oneLiner ? (
     <SPeerOneLiner>
       <img src={props.metadata.icons[0]} alt={props.metadata.name} />
-      <div>{props.metadata.name}</div>
+      <div>
+        <a data-tooltip-id="my-tooltip" data-tooltip-content={topic}>
+          {props.metadata.name} - {truncatedTopic}
+        </a>
+        <Tooltip id="my-tooltip" />
+      </div>
     </SPeerOneLiner>
   ) : (
     <SPeerCard>
@@ -70,5 +87,6 @@ const Peer = (props: PeerProps) =>
       <SUrl>{props.metadata.url}</SUrl>
     </SPeerCard>
   );
+};
 
 export default Peer;

advanced/dapps/react-dapp-v2/src/constants/default.ts

@@ -6,6 +6,7 @@ if (!process.env.NEXT_PUBLIC_PROJECT_ID)
 export const DEFAULT_MAIN_CHAINS = [
   // mainnets
   "eip155:1",
+  "cosmos:cosmoshub-4",
 ];
 
 export const DEFAULT_TEST_CHAINS = [

advanced/dapps/react-dapp-v2/yarn.lock

@@ -1784,6 +1784,26 @@
     "@ethersproject/properties" "^5.7.0"
     "@ethersproject/strings" "^5.7.0"
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.1"
+
+"@floating-ui/dom@^1.6.1":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
 "@gar/promisify@^1.0.1":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
@@ -5653,6 +5673,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.3.0:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 clean-css@^4.2.3:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
@@ -13351,6 +13376,14 @@ react-scripts@^4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
+react-tooltip@^5.26.3:
+  version "5.26.3"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.26.3.tgz#bcb9a53e15bdbf9ae007ddf8bf413a317a637054"
+  integrity sha512-MpYAws8CEHUd/RC4GaDCdoceph/T4KHM5vS5Dbk8FOmLMvvIht2ymP2htWdrke7K6lqPO8rz8+bnwWUIXeDlzg==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+    classnames "^2.3.0"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"