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/Banner.tsx

@@ -10,9 +10,10 @@ const SBannerWrapper = styled.div`
 const SBanner = styled.div`
   width: 275px;
   height: 45px;
-  background: url(/assets/walletconnect.png) no-repeat;
+  background: url(https://avatars.githubusercontent.com/u/5237680) no-repeat;
-  background-size: cover;
+  background-size: 50% auto;
   background-position: center;
+  margin-top: 2rem;
 `;
 
 const Banner = () => (

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 style={{ fontSize: "15px" }}>{`Connected to`}</p>
-            <p>{session.peer.metadata.name}</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) =>
+const Peer = (props: PeerProps) => {
-  props.oneLiner ? (
+  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,37 +6,13 @@ if (!process.env.NEXT_PUBLIC_PROJECT_ID)
 export const DEFAULT_MAIN_CHAINS = [
   // mainnets
   "eip155:1",
-  "eip155:10",
-  "eip155:100",
-  "eip155:137",
-  "eip155:324",
-  "eip155:42161",
-  "eip155:42220",
   "cosmos:cosmoshub-4",
-  "solana:4sGjMW1sUnHzSxGspuhpqLDx6wiyjNtZ",
-  "polkadot:91b171bb158e2d3848fa23a9f1c25182",
-  "mvx:1",
-  "tron:0x2b6653dc",
-  "tezos:mainnet",
-  "kadena:mainnet01",
 ];
 
 export const DEFAULT_TEST_CHAINS = [
   // testnets
   "eip155:5",
   "eip155:11155111",
-  "eip155:280",
-  "eip155:420",
-  "eip155:80001",
-  "eip155:421611",
-  "eip155:44787",
-  "solana:8E9rvCKLFQia2Y35HXjjpWzj8weVo44K",
-  "polkadot:e143f23803ac50e8f6f8e62695d1ce9e",
-  "near:testnet",
-  "mvx:D",
-  "tron:0xcd8690dc",
-  "tezos:testnet",
-  "kadena:testnet04",
 ];
 
 export const DEFAULT_CHAINS = [...DEFAULT_MAIN_CHAINS, ...DEFAULT_TEST_CHAINS];
@@ -50,7 +26,7 @@ export const DEFAULT_APP_METADATA = {
   name: "React App",
   description: "React App for WalletConnect",
   url: "https://walletconnect.com/",
-  icons: ["https://avatars.githubusercontent.com/u/37784886"],
+  icons: ["https://avatars.githubusercontent.com/u/5237680"],
   verifyUrl: "https://verify.walletconnect.com",
 };
 
@@ -58,7 +34,6 @@ export const DEFAULT_APP_METADATA = {
  * EIP155
  */
 export enum DEFAULT_EIP155_METHODS {
-  ETH_SEND_TRANSACTION = "eth_sendTransaction",
   PERSONAL_SIGN = "personal_sign",
 }
 

advanced/dapps/react-dapp-v2/src/contexts/JsonRpcContext.tsx

@@ -82,7 +82,6 @@ type TRpcRequestCallback = (
 interface IContext {
   ping: () => Promise<void>;
   ethereumRpc: {
-    testSendTransaction: TRpcRequestCallback;
     testSignTransaction: TRpcRequestCallback;
     testEthSign: TRpcRequestCallback;
     testSignPersonalMessage: TRpcRequestCallback;
@@ -232,45 +231,6 @@ export function JsonRpcContextProvider({
   // -------- ETHEREUM/EIP155 RPC METHODS --------
 
   const ethereumRpc = {
-    testSendTransaction: _createJsonRpcRequestHandler(
-      async (chainId: string, address: string) => {
-        const caipAccountAddress = `${chainId}:${address}`;
-        const account = accounts.find(
-          (account) => account === caipAccountAddress
-        );
-        if (account === undefined)
-          throw new Error(`Account for ${caipAccountAddress} not found`);
-
-        const tx = await formatTestTransaction(account);
-
-        const balance = BigNumber.from(balances[account][0].balance || "0");
-        if (balance.lt(BigNumber.from(tx.gasPrice).mul(tx.gasLimit))) {
-          return {
-            method: DEFAULT_EIP155_METHODS.ETH_SEND_TRANSACTION,
-            address,
-            valid: false,
-            result: "Insufficient funds for intrinsic transaction cost",
-          };
-        }
-
-        const result = await client!.request<string>({
-          topic: session!.topic,
-          chainId,
-          request: {
-            method: DEFAULT_EIP155_METHODS.ETH_SEND_TRANSACTION,
-            params: [tx],
-          },
-        });
-
-        // format displayed result
-        return {
-          method: DEFAULT_EIP155_METHODS.ETH_SEND_TRANSACTION,
-          address,
-          valid: true,
-          result,
-        };
-      }
-    ),
     testSignTransaction: _createJsonRpcRequestHandler(
       async (chainId: string, address: string) => {
         const caipAccountAddress = `${chainId}:${address}`;
@@ -319,7 +279,7 @@ export function JsonRpcContextProvider({
     testSignPersonalMessage: _createJsonRpcRequestHandler(
       async (chainId: string, address: string) => {
         // test message
-        const message = `My email is john@doe.com - ${Date.now()}`;
+        const message = `Hi from Urbit`;
 
         // encode message (hex)
         const hexMsg = encoding.utf8ToHex(message, true);

advanced/dapps/react-dapp-v2/src/helpers/namespaces.ts

@@ -63,7 +63,6 @@ export const getSupportedRequiredMethodsByNamespace = (namespace: string) => {
 export const getSupportedOptionalMethodsByNamespace = (namespace: string) => {
   switch (namespace) {
     case "eip155":
-      return Object.values(DEFAULT_EIP155_OPTIONAL_METHODS);
     case "cosmos":
     case "solana":
     case "polkadot":

advanced/dapps/react-dapp-v2/src/helpers/utilities.ts

@@ -200,7 +200,7 @@ export const fromWad = (wad: BigNumberish, decimals = 18): string => {
 };
 
 export const LOCALSTORAGE_KEY_TESTNET = "TESTNET";
-export const INITIAL_STATE_TESTNET_DEFAULT = true;
+export const INITIAL_STATE_TESTNET_DEFAULT = false;
 
 export function setLocaleStorageTestnetFlag(value: boolean): void {
   if (typeof window !== "undefined") {

advanced/dapps/react-dapp-v2/src/pages/_document.tsx

@@ -0,0 +1,32 @@
+import Document from 'next/document'
+import { ServerStyleSheet } from 'styled-components'
+
+// Reference: https://dev.to/rsanchezp/next-js-and-styled-components-style-loading-issue-3i68
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: any) {
+    const sheet = new ServerStyleSheet()
+    const originalRenderPage = ctx.renderPage
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App: any) => (props: any) =>
+            sheet.collectStyles(<App {...props} />),
+        })
+
+      const initialProps = await Document.getInitialProps(ctx)
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      }
+    } finally {
+      sheet.seal()
+    }
+  }
+}

advanced/dapps/react-dapp-v2/src/pages/index.tsx

@@ -146,13 +146,6 @@ const Home: NextPage = () => {
 
   const getEthereumActions = (): AccountAction[] => {
     const actions = {
-      [DEFAULT_EIP155_METHODS.ETH_SEND_TRANSACTION]: {
-        method: DEFAULT_EIP155_METHODS.ETH_SEND_TRANSACTION,
-        callback: async (chainId: string, address: string) => {
-          openRequestModal();
-          await ethereumRpc.testSendTransaction(chainId, address);
-        },
-      },
       [DEFAULT_EIP155_METHODS.PERSONAL_SIGN]: {
         method: DEFAULT_EIP155_METHODS.PERSONAL_SIGN,
         callback: async (chainId: string, address: string) => {
@@ -477,7 +470,6 @@ const Home: NextPage = () => {
     return !accounts.length && !Object.keys(balances).length ? (
       <SLanding center>
         <Banner />
-        <h6>{`Using v${version || "2.0.0-beta"}`}</h6>
         <SButtonContainer>
           <h6>Select chains:</h6>
           <SToggleContainer>

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"

dapps/ethereum-provider/src/App.tsx

@@ -10,7 +10,7 @@ const projectId = import.meta.env.VITE_PROJECT_ID as string;
 const provider = await EthereumProvider.init({
   projectId,
   chains: [1],
-  methods: ["personal_sign", "eth_sendTransaction"],
+  methods: ["personal_sign"],
   showQrModal: true,
   qrModalOptions: {
     themeMode: "light",