From e7f1dab34230503896100979238e57577406ae68 Mon Sep 17 00:00:00 2001 From: Nikita Sukhachev Date: Thu, 8 Aug 2024 20:31:06 +0700 Subject: [PATCH] feat: add share buttons --- packages/site/src/pages/index.tsx | 25 ++++ packages/snap/package.json | 2 +- packages/snap/snap.manifest.json | 4 +- packages/snap/src/index.tsx | 85 ++++++++----- packages/snap/src/types.ts | 1 + packages/snap/src/ui.tsx | 201 ++++++++++++++++++------------ yarn.lock | 4 +- 7 files changed, 206 insertions(+), 116 deletions(-) diff --git a/packages/site/src/pages/index.tsx b/packages/site/src/pages/index.tsx index a05d4c0..7001003 100644 --- a/packages/site/src/pages/index.tsx +++ b/packages/site/src/pages/index.tsx @@ -114,11 +114,26 @@ const Index = () => { await invokeSnap({ method: 'hello' }); }; + const installSnap = async () => { + try { + const result = await window.ethereum.request({ + method: 'wallet_requestSnaps', + params: { + 'npm:nomis': {}, + }, + }); + console.log('Snap installed:', result); + } catch (error) { + console.error('Error installing snap:', error); + } + }; + return ( Welcome to template-snap + Get started by editing src/index.ts @@ -128,6 +143,16 @@ const Index = () => { An error happened: {error.message} )} + Install snap, + }} + fullWidth + /> + {!isMetaMaskReady && ( { - return renderTransactionUi( - convertCAIP2ToHex(chainId), - transaction.from, - transaction.to, - ); + try { + return renderTransactionUi( + convertCAIP2ToHex(chainId), + transaction.from, + transaction.to, + ); + } catch (error) { + const message = error instanceof Error ? error.message : 'Unknown error'; + + return { content: renderMainUiWithError(message) }; + } }; export const onUserInput: OnUserInputHandler = async ({ id, event }) => { - if (event.name === 'calculate-score') { - await snap.request({ - method: 'snap_updateInterface', - params: { - id, - ui: renderMainUiWithLoading(), - }, - }); - - const [account, chainId] = await Promise.all([getAccount(), getChainId()]); - - try { - const { score, scoreName, url } = await calculateScore(chainId, account); - + try { + if (event.name === 'calculate-score') { await snap.request({ method: 'snap_updateInterface', params: { id, - ui: renderMainUiWithScore(score, scoreName, url), + ui: renderMainUiWithLoading(), }, }); - } catch { + + const [account, chainId] = await Promise.all([ + getAccount(), + getChainId(), + ]); + + try { + const { score, scoreName, url } = await calculateScore( + chainId, + account, + ); + + await snap.request({ + method: 'snap_updateInterface', + params: { + id, + ui: renderMainUiWithScore(score, scoreName, url), + }, + }); + } catch { + await snap.request({ + method: 'snap_updateInterface', + params: { + id, + ui: renderMainUiWithError('Failed to calculate score'), + }, + }); + } + } + + if (event.name === 'back') { + const [account, chainId] = await Promise.all([ + getAccount(), + getChainId(), + ]); + + const ui = await renderMainUi(account, chainId); + await snap.request({ method: 'snap_updateInterface', params: { id, - ui: renderMainUiWithError(), + ui, }, }); } - } - - if (event.name === 'back') { - const [account, chainId] = await Promise.all([getAccount(), getChainId()]); - - const ui = await renderMainUi(account, chainId); + } catch (error) { + const message = error instanceof Error ? error.message : 'Unknown error'; await snap.request({ method: 'snap_updateInterface', params: { id, - ui, + ui: renderMainUiWithError(message), }, }); } diff --git a/packages/snap/src/types.ts b/packages/snap/src/types.ts index 464c220..0ce36f2 100644 --- a/packages/snap/src/types.ts +++ b/packages/snap/src/types.ts @@ -7,6 +7,7 @@ export type Holder = { image: string; tokenId: string; updated_ms: string; + referralCode: string; }; export type Score = { diff --git a/packages/snap/src/ui.tsx b/packages/snap/src/ui.tsx index 6276b54..6f1a5e6 100644 --- a/packages/snap/src/ui.tsx +++ b/packages/snap/src/ui.tsx @@ -16,46 +16,97 @@ import { import { getScore } from './api'; -export const renderMainUi = async (account: string, chainId: string) => { - const { score, scoreName, url, image, tokenId, updated_ms } = await getScore( - chainId, - account, +export const renderMainUiWithError = (error: string) => { + return ( + + {error} +
+ +
+ ); +}; - const imageSrc = await getImageComponent(image, { width: 400 }); +export const renderMainUi = async (account: string, chainId: string) => { + try { + const { score, scoreName, url, image, tokenId, updated_ms, referralCode } = + await getScore(chainId, account); - return ( - - {`${scoreName} Score: ${score || 'unknown'}`} - - - {score > 0 && ( + let imageSrc; + + if (image) { + imageSrc = await getImageComponent(image, { width: 400 }); + } + + const twitterShareText = `I've just unlocked my potential with ${scoreName} Score by @0xNomis! What is your web3 reputation like? https://nomis.cc${url} %23OnchainReputation %23Nomis`; + + const shareText = `I've just unlocked my potential with ${scoreName} Score by Nomis! What is your web3 reputation like? https://nomis.cc${url} %23OnchainReputation %23Nomis`; + + if (!score) { + return ( + + {scoreName} Score: unknown + + + + Mint your score + +
+ +
+ + + ); + } + + return ( + + {`${scoreName} Score: ${score || 'unknown'}`} + + {imageSrc ? : null} {String(score)} - )} - {score > 0 && ( {String(tokenId)} - )} - {score > 0 && ( {new Date(updated_ms).toLocaleString('en-Us')} - )} - - - Mint your score - -
- -
+ + + Mint your score + +
+ +
+ + {referralCode ? : null} + {referralCode ? ( + + + + Share in X + + + + + Share in Telegram + + + + ) : null} - - ); + ); + } catch (error) { + const message = error instanceof Error ? error.message : 'Unknown error'; + + return renderMainUiWithError(message); + } }; export const renderMainUiWithLoading = () => { @@ -63,6 +114,12 @@ export const renderMainUiWithLoading = () => { Calculating score... + +
+ +
); }; @@ -91,83 +148,63 @@ export const renderMainUiWithScore = ( ); }; -export const renderMainUiWithError = () => { - return ( - - Failed to calculate score -
- -
- - ); -}; - export const renderTransactionUi = async ( chainId: string, senderAccount: string, recipientAccount: string, ) => { - const [senderData, recipientData] = await Promise.all([ - getScore(chainId, senderAccount), - getScore(chainId, recipientAccount), - ]); + try { + const [senderData, recipientData] = await Promise.all([ + getScore(chainId, senderAccount), + getScore(chainId, recipientAccount), + ]); + + if (recipientData.isHolder) { + let imageSrc; - if (recipientData.isHolder) { - const imageSrc = await getImageComponent(recipientData.image, { - width: 400, - }); + if (recipientData.image) { + imageSrc = await getImageComponent(recipientData.image, { width: 400 }); + } + + return { + content: ( + + + Recipient {recipientData.scoreName} Score:{' '} + {String(recipientData.score)} + + + {imageSrc?.value ? : null} + + + {senderData.isHolder ? 'Update your score' : 'Get your score'} + + + + ), + }; + } return { content: ( - Recipient {recipientData.scoreName} Score:{' '} - {String(recipientData.score)} + Recipient doesn't have a {senderData.scoreName} Score - - Get your score + {senderData.isHolder ? 'Update your score' : 'Get your score'} ), }; - } + } catch (error) { + const message = error instanceof Error ? error.message : 'Unknown error'; - if (!senderData.isHolder) { return { - content: ( - - Get your {senderData.scoreName} Score - - - - Get your score - - - - ), + content: renderMainUiWithError(message), }; } - - const imageSrc = await getImageComponent(senderData.image, { width: 400 }); - - return { - content: ( - - - Your {senderData.scoreName} Score: {String(senderData.score)} - - - - - - Update your score - - - - ), - }; }; diff --git a/yarn.lock b/yarn.lock index 4d7fe61..ae507dd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14438,9 +14438,9 @@ __metadata: languageName: node linkType: hard -"nomis-snap@workspace:packages/snap": +"nomis@workspace:packages/snap": version: 0.0.0-use.local - resolution: "nomis-snap@workspace:packages/snap" + resolution: "nomis@workspace:packages/snap" dependencies: "@jest/globals": ^29.5.0 "@metamask/auto-changelog": ^3.4.4