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>
Fix modal styles not loading correctly (#2 )
2024-03-14 14:02:46 +05:30 · 2024-03-07 12:10:25 +05:30 · 2024-03-06 18:33:57 +05:30
14 changed files with 101 additions and 88 deletions
--- a/advanced/dapps/react-dapp-v2/package.json
+++ b/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",
--- a/advanced/dapps/react-dapp-v2/src/components/Banner.tsx
+++ b/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-size: cover;
+  background: url(https://avatars.githubusercontent.com/u/5237680) no-repeat;
+  background-size: 50% auto;
  background-position: center;
+  margin-top: 2rem;
 `;

 const Banner = () => (
--- a/advanced/dapps/react-dapp-v2/src/components/Blockchain.tsx
+++ b/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>
--- a/advanced/dapps/react-dapp-v2/src/components/Header.tsx
+++ b/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>
--- a/advanced/dapps/react-dapp-v2/src/components/Pairing.tsx
+++ b/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>
        )}
--- a/advanced/dapps/react-dapp-v2/src/components/Peer.tsx
+++ b/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;
--- a/advanced/dapps/react-dapp-v2/src/constants/default.ts
+++ b/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",
 }

--- a/advanced/dapps/react-dapp-v2/src/contexts/JsonRpcContext.tsx
+++ b/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);
--- a/advanced/dapps/react-dapp-v2/src/helpers/namespaces.ts
+++ b/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":
--- a/advanced/dapps/react-dapp-v2/src/helpers/utilities.ts
+++ b/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") {
--- a/advanced/dapps/react-dapp-v2/src/pages/_document.tsx
+++ b/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()
+    }
+  }
+}
--- a/advanced/dapps/react-dapp-v2/src/pages/index.tsx
+++ b/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>
--- a/advanced/dapps/react-dapp-v2/yarn.lock
+++ b/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"
--- a/dapps/ethereum-provider/src/App.tsx
+++ b/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",