fix: tipping (#1767)

- show modal connect to near if click tipping when wallet is near
- sign in to near website
- update near api js package
- add new translate

Author: rubenkristian

package.json

@@ -70,7 +70,7 @@
     "lodash": "^4.17.21",
     "millify": "^4.0.0",
     "mux.js": "^6.0.1",
-    "near-api-js": "^0.44.2",
+    "near-api-js": "^1.1.0",
     "next": "latest",
     "next-auth": "4.10.3",
     "next-http-proxy-middleware": "^1.2.4",

src/components/common/SendTipButton/SendTipButton.tsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import { useCookies } from 'react-cookie';
 import { shallowEqual, useSelector } from 'react-redux';
 
+import getConfig from 'next/config';
 import { useRouter } from 'next/router';
 
 import {
@@ -20,19 +21,25 @@ import ShowIf from '../show-if.component';
 import { useStyles } from './SendTipButton.style';
 
 import { COOKIE_INSTANCE_URL } from 'components/SelectServer';
+import * as nearAPI from 'near-api-js';
 import { PromptComponent } from 'src/components/atoms/Prompt/prompt.component';
 import { useUserHook } from 'src/hooks/use-user.hook';
 import { Comment } from 'src/interfaces/comment';
 import { ReferenceType } from 'src/interfaces/interaction';
+import { NetworkIdEnum } from 'src/interfaces/network';
 import { People } from 'src/interfaces/people';
 import { Post } from 'src/interfaces/post';
-import { User } from 'src/interfaces/user';
+import { User, Wallet } from 'src/interfaces/user';
 import { WalletDetail } from 'src/interfaces/wallet';
 import * as CommentAPI from 'src/lib/api/comment';
 import * as PostAPI from 'src/lib/api/post';
 import * as UserAPI from 'src/lib/api/user';
+import { Near } from 'src/lib/services/near-api-js';
 import i18n from 'src/locale';
 import { RootState } from 'src/reducers';
+import { UserState } from 'src/reducers/user/reducer';
+
+const { publicRuntimeConfig } = getConfig();
 
 type SendTipButtonProps = ButtonProps & {
   label?: string;
@@ -66,16 +73,23 @@ export const SendTipButton: React.FC<SendTipButtonProps> = props => {
   const [promptFailedTip, setPromptFailedTip] = useState(false);
   const [tipInfoOpened, setTipInfoOpened] = useState(false);
   const [prompWeb2Users, setPrompWeb2Users] = useState(false);
+  const [promptNearConnection, setPromptNearConnection] = useState(false);
 
   const { wallets } = user || { wallets: [] };
+  console.log('wallet', wallets);
 
-  const anonymous = useSelector<RootState, boolean>(
-    state => state.userState.anonymous,
+  const { anonymous, networks } = useSelector<RootState, UserState>(
+    state => state.userState,
     shallowEqual,
   );
 
   const isWeb2Users = !wallets.length && !anonymous;
 
+  const isNear =
+    wallets.length && (wallets[0] as Wallet).blockchainPlatform === 'near';
+
+  console.log('is near', isNear);
+
   const icon = (
     <SvgIcon
       color="inherit"
@@ -92,6 +106,10 @@ export const SendTipButton: React.FC<SendTipButtonProps> = props => {
     setPrompWeb2Users(false);
   };
 
+  const handleCloseNearWallet = () => {
+    setPromptNearConnection(false);
+  };
+
   const handleConnectWeb3Wallet = () => {
     router.push(`/wallet?type=manage`);
   };
@@ -118,6 +136,20 @@ export const SendTipButton: React.FC<SendTipButtonProps> = props => {
       return;
     }
 
+    if (isNear) {
+      const network = networks.find(
+        network => network.id === NetworkIdEnum.NEAR,
+      );
+
+      if (!network) return;
+      const near = await Near.connect(network);
+      const wallet = near.provider.wallet;
+      if (!wallet.isSignedIn()) {
+        setPromptNearConnection(true);
+        return;
+      }
+    }
+
     try {
       // if tipping to User
       if ('username' in reference) {
@@ -180,9 +212,53 @@ export const SendTipButton: React.FC<SendTipButtonProps> = props => {
       </Button>
 
       <PromptComponent
-        icon="tip"
-        title={i18n.t('Confirm.Anonymous.SendTip.Title')}
-        subtitle={i18n.t('Confirm.Anonymous.SendTip.Desc')}
+        icon="warning"
+        title={i18n.t('Tipping.Prompt_Near.Title')}
+        open={promptNearConnection}
+        subtitle={''}
+        onCancel={handleCloseNearWallet}>
+        <div className={styles.wrapperButtonFlex}>
+          <Button
+            variant="outlined"
+            color="secondary"
+            onClick={handleCloseNearWallet}>
+            {i18n.t('Tipping.Prompt_Near.Btn.Left')}
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={async () => {
+              const network = networks.find(
+                network => network.id === NetworkIdEnum.NEAR,
+              );
+
+              if (!network) return;
+              const near = await Near.connect(network);
+              const wallet = near.provider.wallet;
+
+              const keyStore =
+                new nearAPI.keyStores.BrowserLocalStorageKeyStore();
+              const signInOptions = {
+                contractId: publicRuntimeConfig.nearTippingContractId,
+                methodNames: ['claim_tip', 'batch_claim_tips'],
+                successUrl: publicRuntimeConfig.appAuthURL + router.asPath,
+                failureUrl: publicRuntimeConfig.appAuthURL + router.asPath,
+              };
+
+              await Promise.all([
+                keyStore.clear(),
+                wallet.requestSignIn(signInOptions),
+              ]);
+            }}>
+            {i18n.t('Tipping.Prompt_Near.Btn.Right')}
+          </Button>
+        </div>
+      </PromptComponent>
+
+      <PromptComponent
+        icon="warning"
+        title={i18n.t('Tipping.Prompt_Mobile.Title')}
+        subtitle={i18n.t('Tipping.Prompt_Mobile.Subtitle')}
         open={tipInfoOpened}
         onCancel={handleCloseTipInfo}>
         <div className={styles.wrapperButtonFlex}>

src/locale/en.json

@@ -749,6 +749,13 @@
       "Title": "Wallet Not Connected",
       "Subtitle": "You don’t have any wallet connected to your account, let’s try to connect your wallet to send tip"
     },
+    "Prompt_Near": {
+      "Title": "Allow connection to NEAR network?",
+      "Btn": {
+        "Left": "Cancel",
+        "Right": "Allow"
+      }
+    },
     "Prompt_Success": {
       "Title": "Tip sent!",
       "Subtitle_1": "Tip to ",

src/locale/id.json

@@ -745,6 +745,13 @@
       "Title": "Wallet Not Connected",
       "Subtitle": "You don’t have any wallet connected to your account, let’s try to connect your wallet to send tip"
     },
+    "Prompt_Near": {
+      "Title": "Allow connection to NEAR network?",
+      "Btn": {
+        "Left": "Cancel",
+        "Right": "Allow"
+      }
+    },
     "Prompt_Success": {
       "Title": "Tip terkirim!",
       "Subtitle_1": "Tip ke ",

src/locale/ru.json

@@ -737,6 +737,13 @@
       "Title": "Wallet Not Connected",
       "Subtitle": "You don’t have any wallet connected to your account, let’s try to connect your wallet to send tip"
     },
+    "Prompt_Near": {
+      "Title": "Allow connection to NEAR network?",
+      "Btn": {
+        "Left": "Cancel",
+        "Right": "Allow"
+      }
+    },
     "Prompt_Success": {
       "Title": "Отправлено!",
       "Subtitle_1": "Вознаградить ",

yarn.lock

@@ -7766,7 +7766,7 @@ bluebird@^3.3.5, bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-bn.js@5.2.0, bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9, bn.js@^5.0.0, bn.js@^5.1.1, bn.js@^5.2.0, bn.js@^5.2.1:
+bn.js@5.2.1, bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9, bn.js@^5.0.0, bn.js@^5.1.1, bn.js@^5.2.0, bn.js@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.1.tgz#0bc527a6a0d18d0aa8d5b0538ce4a77dccfa7b70"
   integrity sha512-eXRvHzWyYPBuB4NBy0cmYQjGitUrtqwbvlzP3G6VFnNRbsZQIxQ10PbKKHt8gZ/HW/D/747aDl+QkDqg3KQLMQ==
@@ -7792,10 +7792,10 @@ boolbase@^1.0.0:
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
-borsh@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/borsh/-/borsh-0.6.0.tgz#a7c9eeca6a31ca9e0607cb49f329cb659eb791e1"
-  integrity sha512-sl5k89ViqsThXQpYa9XDtz1sBl3l1lI313cFUY1HKr+wvMILnb+58xpkqTNrYbelh99dY7K8usxoCusQmqix9Q==
+borsh@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/borsh/-/borsh-0.7.0.tgz#6e9560d719d86d90dc589bca60ffc8a6c51fec2a"
+  integrity sha512-CLCsZGIBCFnPtkNnieW/a8wmreDmfUtjU2m9yHrzPXIlNbqVs0AQrSatSG6vdNYUqdc83tkQi2eHfF98ubzQLA==
   dependencies:
     bn.js "^5.2.0"
     bs58 "^4.0.0"
@@ -14519,13 +14519,13 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
 
-near-api-js@^0.44.2:
-  version "0.44.2"
-  resolved "https://registry.yarnpkg.com/near-api-js/-/near-api-js-0.44.2.tgz#e451f68f2c56bd885c7b918db5818a3e6e9423d0"
-  integrity sha512-eMnc4V+geggapEUa3nU2p8HSHn/njtloI4P2mceHQWO8vDE1NGpnAw8FuTBrLmXSgIv9m6oocgFc9t3VNf5zwg==
+near-api-js@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/near-api-js/-/near-api-js-1.1.0.tgz#907e807f052c1f043c6fbf28f61872de3c02235a"
+  integrity sha512-qYKv1mYsaDZc2uYndhS+ttDhR9+60qFc+ZjD6lWsAxr3ZskMjRwPffDGQZYhC7BRDQMe1HEbk6d5mf+TVm0Lqg==
   dependencies:
-    bn.js "5.2.0"
-    borsh "^0.6.0"
+    bn.js "5.2.1"
+    borsh "^0.7.0"
     bs58 "^4.0.0"
     depd "^2.0.0"
     error-polyfill "^0.1.3"