From c16743a0cb45708e0da3d1af16453027a58a6f79 Mon Sep 17 00:00:00 2001 From: NickJ202 Date: Thu, 15 Feb 2024 11:42:59 -0500 Subject: [PATCH] othent / catch upload errors --- .eslintrc.js | 11 ++- .gitignore | 1 + package.json | 2 + src/assets/othent.svg | 5 + src/helpers/config.ts | 9 +- src/helpers/types.ts | 1 + src/providers/ArweaveProvider.tsx | 135 ++++++++++++++------------ src/views/Landing/Profile/Profile.tsx | 6 +- src/views/Landing/Profile/styles.ts | 2 +- src/views/Upload/index.tsx | 37 ++++--- src/wallet/WalletBlock/styles.ts | 4 +- 11 files changed, 130 insertions(+), 83 deletions(-) create mode 100644 src/assets/othent.svg diff --git a/.eslintrc.js b/.eslintrc.js index 0199e99..4d1f929 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -16,7 +16,16 @@ module.exports = { { groups: [ ['^react', '^@?\\w'], - ['^arweave', 'arbundles', '@irys/sdk', '^warp', '^permaweb-orderbook', '^@permaweb/stampjs', '^@?\\w'], + [ + '^arweave', + 'arbundles', + '@irys/sdk', + '^warp', + '^permaweb-orderbook', + '^permaweb-sdk', + '^@permaweb/stampjs', + '^@?\\w', + ], ['^(@|api)(/.*|$)', '^(@|gql)(/.*|$)'], [ '^(@|app)(/.*|$)', diff --git a/.gitignore b/.gitignore index 74dc188..6bf6ff4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ **node_modules** **dist** **package-lock.json** +**yarn.lock** **dist** **cache** **logs** diff --git a/package.json b/package.json index a2b95ad..0184558 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "arbundles": "^0.10.1", "arweave-wallet-connector": "^1.0.2", "permaweb-orderbook": "^1.6.52", + "permaweb-sdk": "git+ssh://git@github.com:permaweb/permaweb-sdk.git#a0b2eadc5948084137642bf9fa9a931c2e895d01", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^7.2.9", @@ -34,6 +35,7 @@ "redux-thunk": "^2.4.2", "styled-components": "^5.3.6", "timers-browserify": "^2.0.12", + "typescript": "^5.3.3", "warp-contracts": "1.4.26", "warp-contracts-plugin-deploy": "1.0.8", "warp-contracts-plugin-signature": "1.0.15-beta.1" diff --git a/src/assets/othent.svg b/src/assets/othent.svg new file mode 100644 index 0000000..64412c3 --- /dev/null +++ b/src/assets/othent.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/helpers/config.ts b/src/helpers/config.ts index f5e1943..050042d 100644 --- a/src/helpers/config.ts +++ b/src/helpers/config.ts @@ -23,6 +23,7 @@ import logo from 'assets/logo.svg'; import menu from 'assets/menu.svg'; import miniPlayerActive from 'assets/miniplayer-active.svg'; import miniPlayerInactive from 'assets/miniplayer-inactive.svg'; +import othent from 'assets/othent.svg'; import pause from 'assets/pause.svg'; import play from 'assets/play.svg'; import search from 'assets/search.svg'; @@ -84,6 +85,7 @@ export const ASSETS = { wallets: { arconnect: arconnect, arweaveApp: arweaveApp, + othent: othent, }, x: x, }; @@ -141,7 +143,7 @@ export const TAGS = { '{"evaluationOptions":{"sourceType":"redstone-sequencer","allowBigInt":true,"internalWrites":true,"unsafeClient":"skip","useConstructor":true}}', document: 'Document', followDataProtocol: 'Follow', - license: 'yRj4a5KMctX_uOmKWCFJIjmY8DeJcusVk6-HzLiM_t8', + license: 'dE0rmDfl9_OWjkDznNEXHaSO_JohJkRolvMzaCroUdw', profileVersions: { '1': 'Account-0.3', }, @@ -234,7 +236,10 @@ export const CONTENT_TYPES = { textPlain: 'text/plain', }; -export const AR_WALLETS = [{ type: WalletEnum.arConnect, logo: ASSETS.wallets.arconnect }]; +export const AR_WALLETS = [ + { type: WalletEnum.arConnect, logo: ASSETS.wallets.arconnect }, + { type: WalletEnum.othent, logo: ASSETS.wallets.othent }, +]; export const WALLET_PERMISSIONS = ['ACCESS_ADDRESS', 'ACCESS_PUBLIC_KEY', 'SIGN_TRANSACTION', 'DISPATCH', 'SIGNATURE']; diff --git a/src/helpers/types.ts b/src/helpers/types.ts index 287cf6f..b456c46 100644 --- a/src/helpers/types.ts +++ b/src/helpers/types.ts @@ -132,6 +132,7 @@ export type FullProfileType = ProfileType & { export enum WalletEnum { arConnect = 'arconnect', arweaveApp = 'arweave.app', + othent = 'othent', } export type TagType = { name: string; value: string }; diff --git a/src/providers/ArweaveProvider.tsx b/src/providers/ArweaveProvider.tsx index fb33eed..1cd4d15 100644 --- a/src/providers/ArweaveProvider.tsx +++ b/src/providers/ArweaveProvider.tsx @@ -5,6 +5,7 @@ import Arweave from 'arweave'; import { bufferTob64Url } from 'arweave/node/lib/utils.js'; import { ArweaveWebWallet } from 'arweave-wallet-connector'; import { ArconnectSigner } from 'arbundles'; +import { Othent } from 'permaweb-sdk/dist/helpers/wallet'; import { getCurrentProfile } from 'gql'; @@ -84,6 +85,67 @@ export function ArweaveProvider(props: ArweaveProviderProps) { const [turboBalance, setTurboBalance] = React.useState(null); const [profile, setProfile] = React.useState(null); + React.useEffect(() => { + (async function () { + if (localStorage.getItem('walletType')) { + try { + await handleConnect(localStorage.getItem('walletType') as any); + } catch (e: any) { + console.error(e); + } + } + })(); + }, []); + + React.useEffect(() => { + (async function () { + if (walletAddress) { + try { + setAvailableBalance(await getARBalance(walletAddress)); + } catch (e: any) { + console.error(e); + } + } + })(); + }, [walletAddress]); + + React.useEffect(() => { + (async function () { + if (wallet && walletAddress) { + try { + setProfile(await getCurrentProfile({ address: walletAddress })); + } catch (e: any) { + console.error(e); + } + } + })(); + }, [wallet, walletAddress, walletType]); + + async function handleConnect(walletType: WalletEnum.arConnect | WalletEnum.othent | WalletEnum.arweaveApp) { + let walletObj: any = null; + switch (walletType) { + case WalletEnum.arConnect: + handleArConnect(); + break; + case WalletEnum.othent: + handleOthent(); + break; + case WalletEnum.arweaveApp: + handleArweaveApp(); + break; + default: + if (window.arweaveWallet || walletType === WalletEnum.arConnect) { + handleArConnect(); + break; + } else { + handleArweaveApp(); + break; + } + } + setWalletModalVisible(false); + return walletObj; + } + async function handleArConnect() { if (!walletAddress) { if (window.arweaveWallet) { @@ -93,6 +155,7 @@ export function ArweaveProvider(props: ArweaveProviderProps) { setWallet(window.arweaveWallet); setWalletType(WalletEnum.arConnect); setWalletModalVisible(false); + localStorage.setItem('walletType', WalletEnum.arConnect); } catch (e: any) { alert(e); } @@ -102,6 +165,16 @@ export function ArweaveProvider(props: ArweaveProviderProps) { } } + async function handleOthent() { + Othent.init(); + // @ts-ignore -- othent ignores permissions, so no point passing in + await window.arweaveWallet.connect(); + setWallet(window.arweaveWallet); + setWalletAddress(Othent.getUserInfo().walletAddress); + setWalletType(WalletEnum.othent); + localStorage.setItem('walletType', WalletEnum.othent); + } + async function handleArweaveApp() { const wallet = new ArweaveWebWallet({ name: APP.name, @@ -114,28 +187,7 @@ export function ArweaveProvider(props: ArweaveProviderProps) { }); setWallet(wallet); setWalletType(WalletEnum.arweaveApp); - } - - async function handleConnect(walletType: WalletEnum.arConnect | WalletEnum.arweaveApp) { - let walletObj: any = null; - switch (walletType) { - case WalletEnum.arConnect: - handleArConnect(); - break; - case WalletEnum.arweaveApp: - handleArweaveApp(); - break; - default: - if (window.arweaveWallet || walletType === WalletEnum.arConnect) { - handleArConnect(); - break; - } else { - handleArweaveApp(); - break; - } - } - setWalletModalVisible(false); - return walletObj; + localStorage.setItem('walletType', WalletEnum.arweaveApp); } async function handleDisconnect() { @@ -143,6 +195,7 @@ export function ArweaveProvider(props: ArweaveProviderProps) { setWallet(null); setWalletAddress(null); setProfile(null); + if (localStorage.getItem('walletType')) localStorage.removeItem('walletType'); } async function getARBalance(walletAddress: string) { @@ -191,44 +244,6 @@ export function ArweaveProvider(props: ArweaveProviderProps) { } } - React.useEffect(() => { - async function handleWallet() { - let walletAddress: string | null = null; - try { - walletAddress = await global.window.arweaveWallet.getActiveAddress(); - - if (walletType !== WalletEnum.arweaveApp) { - setWalletType(WalletEnum.arConnect); - setWallet(window.arweaveWallet); - } - } catch {} - if (walletAddress) { - setWalletAddress(walletAddress as any); - setAvailableBalance(await getARBalance(walletAddress)); - } - } - - handleWallet(); - - window.addEventListener('arweaveWalletLoaded', handleWallet); - - return () => { - window.removeEventListener('arweaveWalletLoaded', handleWallet); - }; - }, [walletType]); - - React.useEffect(() => { - (async function () { - if (wallet && walletAddress) { - try { - setProfile(await getCurrentProfile({ address: walletAddress })); - } catch (e: any) { - console.error(e); - } - } - })(); - }, [wallet, walletAddress, walletType]); - return ( <> {walletModalVisible && ( diff --git a/src/views/Landing/Profile/Profile.tsx b/src/views/Landing/Profile/Profile.tsx index e20a001..5402ad8 100644 --- a/src/views/Landing/Profile/Profile.tsx +++ b/src/views/Landing/Profile/Profile.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { ReactSVG } from 'react-svg'; -import { getFullProfile } from 'gql'; +import { getFullProfile } from 'permaweb-sdk/dist/gql'; +import { FullProfileType } from 'permaweb-sdk/dist/helpers/types'; import { Button } from 'components/atoms/Button'; import { Loader } from 'components/atoms/Loader'; @@ -9,7 +10,6 @@ import { AssetsTable } from 'components/organisms/AssetsTable'; import { CollectionsTable } from 'components/organisms/CollectionsTable'; import { ASSETS, REDIRECTS } from 'helpers/config'; import { getTxEndpoint } from 'helpers/endpoints'; -import { FullProfileType } from 'helpers/types'; import { checkAddress, formatAddress } from 'helpers/utils'; import { useLanguageProvider } from 'providers/LanguageProvider'; @@ -61,7 +61,7 @@ export default function Profile(props: { address: string }) { function getHeaderDetails() { return ( -

{fullProfile.channelTitle ? fullProfile.channelTitle : formatAddress(fullProfile.walletAddress, false)}

+

{fullProfile.displayName ? fullProfile.displayName : formatAddress(fullProfile.walletAddress, false)}

{`${getHandle()}`} diff --git a/src/views/Landing/Profile/styles.ts b/src/views/Landing/Profile/styles.ts index 28b0a6f..757867f 100644 --- a/src/views/Landing/Profile/styles.ts +++ b/src/views/Landing/Profile/styles.ts @@ -126,7 +126,7 @@ export const HeaderAddress = styled.button` svg { width: 15px; fill: ${(props) => props.theme.colors.font.primary}; - margin: 5px 0 0 0; + margin: 2.5px 0 0 0; } &:hover { opacity: 0.75; diff --git a/src/views/Upload/index.tsx b/src/views/Upload/index.tsx index 5c4ea42..a111b9f 100644 --- a/src/views/Upload/index.tsx +++ b/src/views/Upload/index.tsx @@ -267,26 +267,29 @@ export default function Upload() { if (contractResponse) uploadedAssetsList.push(contractResponse); if (index < uploadReducer.data.contentList.length) setUploadPercentage(0); } catch (e: any) { - console.error(e); + console.error(e.message); + setAssetsResponseError(e.message); + setUploadPercentage(0); + dispatch(uploadActions.clearUpload()); } } - switch (uploadReducer.uploadType) { - case 'collection': - try { - await handleUploadCollection(uploadedAssetsList); - } catch (e: any) { - console.error(e); - } - break; - case 'assets': - if (uploadedAssetsList.length) { + if (uploadedAssetsList.length) { + switch (uploadReducer.uploadType) { + case 'collection': + try { + await handleUploadCollection(uploadedAssetsList); + } catch (e: any) { + console.error(e); + } + break; + case 'assets': setAssetsResponse(`${language.assetsCreated}!`); dispatch(uploadActions.setUploadActive(false)); dispatch(uploadActions.clearUpload()); setUploadPercentage(0); - } - break; + break; + } } } } @@ -400,7 +403,13 @@ export default function Upload() { - {assetsResponse ? language.assetsCreatedInfo : language.errorOccurred} + + {assetsResponse + ? language.assetsCreatedInfo + : assetsResponseError + ? assetsResponseError + : language.errorOccurred} +