Merge pull request #128 from sultanpeyek/feature/bonfida-twitter-handling

[FEATURE] Implement Bonfida Twitter Handling

js/packages/web/package.json

@@ -4,6 +4,7 @@
   "dependencies": {
     "@ant-design/icons": "^4.4.0",
     "@babel/preset-typescript": "^7.12.13",
+    "@bonfida/spl-name-service": "0.1.12",
     "@cloudflare/stream-react": "^1.1.0",
     "@craco/craco": "^5.7.0",
     "@oyster/common": "0.0.1",
@@ -88,7 +89,8 @@
     "gh-pages": "^3.1.0",
     "npm-link-shared": "0.5.6",
     "prettier": "^2.1.2",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.3",
+    "webpack-dev-server": "3.11.0"
   },
   "peerDependencies": {
     "react": "*",

js/packages/web/src/views/auction/index.tsx

@@ -1,7 +1,8 @@
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { Row, Col, Button, Skeleton, Carousel } from 'antd';
 import { AuctionCard } from '../../components/AuctionCard';
+import { Connection, PublicKey } from '@solana/web3.js';
 import {
   AuctionView as Auction,
   AuctionViewItem,
@@ -19,6 +20,7 @@ import {
   Identicon,
   MetaplexModal,
   shortenAddress,
+  useConnection,
   useConnectionConfig,
   fromLamports,
   useMint,
@@ -26,6 +28,7 @@ import {
   AuctionState,
 } from '@oyster/common';
 import { MintInfo } from '@solana/spl-token';
+import { getHandleAndRegistryKey } from '@bonfida/spl-name-service';
 import useWindowDimensions from '../../utils/layout';
 import { CheckOutlined } from '@ant-design/icons';
 import { useMemo } from 'react';
@@ -202,6 +205,28 @@ const BidLine = (props: { bid: any; index: number; mint?: MintInfo, isCancelled?
   const bidder = bid.info.bidderPubkey.toBase58();
   const isme = wallet?.publicKey?.toBase58() === bidder;
 
+  // Get Twitter Handle from address
+  const connection = useConnection();
+  const [bidderTwitterHandle, setBidderTwitterHandle] = useState('');
+  useEffect(() => {
+    const getTwitterHandle = async (
+      connection: Connection,
+      bidder: PublicKey,
+    ): Promise<string | undefined> => {
+      try {
+        const [twitterHandle] = await getHandleAndRegistryKey(
+          connection,
+          bidder,
+        );
+        setBidderTwitterHandle(twitterHandle);
+      } catch (err) {
+        console.warn(`err`);
+        return undefined;
+      }
+    };
+    getTwitterHandle(connection, bidder);
+  }, [bidderTwitterHandle]);
+
   return (
     <Row
       style={{
@@ -251,7 +276,15 @@ const BidLine = (props: { bid: any; index: number; mint?: MintInfo, isCancelled?
             }}
             address={bidder}
           />{' '}
-          {shortenAddress(bidder)}
+          {bidderTwitterHandle ? (
+            <a
+              target="_blank"
+              title={shortenAddress(bidder)}
+              href={`https://twitter.com/${bidderTwitterHandle}`}
+            >{`@${bidderTwitterHandle}`}</a>
+          ) : (
+            shortenAddress(bidder)
+          )}
           {isme && <span style={{ color: '#6479f6' }}>&nbsp;(you)</span>}
         </Row>
       </Col>

js/yarn.lock

@@ -1247,6 +1247,25 @@
     "@babel/helper-validator-identifier" "^7.14.0"
     to-fast-properties "^2.0.0"
 
+"@bonfida/spl-name-service@0.1.12":
+  version "0.1.12"
+  resolved "https://registry.npmjs.org/@bonfida/spl-name-service/-/spl-name-service-0.1.12.tgz#ab186fe0c907efe66cb6818e2f429f9f4b3ab0d2"
+  integrity sha512-zVZiOjhZK+VZAs4aqOmxj6vplbGGwcin/gJ3Xm/gn+wV1GzgeqDkYrrDJclEpQ7WcmA4WV/Pad6tWfPtGt12/g==
+  dependencies:
+    "@solana/spl-token" "0.1.4"
+    "@solana/web3.js" "^1.11.0"
+    bip32 "^2.0.6"
+    bn.js "^5.1.3"
+    borsh "^0.4.0"
+    bs58 "4.0.1"
+    buffer-layout "^1.2.0"
+    core-util-is "^1.0.2"
+    crypto "^1.0.1"
+    crypto-ts "^1.0.2"
+    fs "^0.0.1-security"
+    tweetnacl "^1.0.3"
+    webpack-dev-server "^3.11.2"
+
 "@chaitanyapotti/random-id@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@chaitanyapotti/random-id/-/random-id-1.0.3.tgz#f52f647cfe9f79fc7723ea2b01b0ad3889204002"