From d14cc2c9a5cdb55b0719fafdf3cf3a0f51084d9f Mon Sep 17 00:00:00 2001 From: shawticus Date: Tue, 22 Nov 2022 01:58:57 -0800 Subject: [PATCH 01/14] purge wallet and get run to run --- packages/client/src/components/Mint/Mint.tsx | 74 ------ .../client/src/components/Mint/dabStuff.css | 60 ----- .../src/components/Mint/dabStuff.css.d.ts | 7 - .../src/components/PlugWallet/PlugWallet.tsx | 76 ------ .../src/components/PlugWallet/plugWallet.css | 117 -------- .../components/PlugWallet/plugWallet.css.d.ts | 7 - .../client/src/components/TabBar/TabBar.tsx | 24 +- packages/client/src/contexts/AppProviders.tsx | 4 +- packages/client/src/contexts/PlugProvider.tsx | 113 -------- .../spells/windows/EditorWindow/Minting.tsx | 251 ------------------ .../spells/windows/EditorWindow/index.jsx | 22 -- packages/core/tsconfig-release.json | 6 +- packages/server/src/database.ts | 9 +- .../connectors/voiceUtils/voiceJoin.ts | 2 +- packages/server/tsconfig.json | 4 +- packages/sharedb/tsconfig.json | 4 +- 16 files changed, 25 insertions(+), 755 deletions(-) delete mode 100644 packages/client/src/components/Mint/Mint.tsx delete mode 100644 packages/client/src/components/Mint/dabStuff.css delete mode 100644 packages/client/src/components/Mint/dabStuff.css.d.ts delete mode 100644 packages/client/src/components/PlugWallet/PlugWallet.tsx delete mode 100644 packages/client/src/components/PlugWallet/plugWallet.css delete mode 100644 packages/client/src/components/PlugWallet/plugWallet.css.d.ts delete mode 100644 packages/client/src/contexts/PlugProvider.tsx delete mode 100644 packages/client/src/workspaces/spells/windows/EditorWindow/Minting.tsx diff --git a/packages/client/src/components/Mint/Mint.tsx b/packages/client/src/components/Mint/Mint.tsx deleted file mode 100644 index c21f559f3..000000000 --- a/packages/client/src/components/Mint/Mint.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import './dabStuff.css' -import dip721v2_idl from '@psychedelic/dab-js/dist/idls/dip_721_v2.did' -import { useSnackbar } from 'notistack' - -export function Mint({ data, onSuccess = (any?) => {} }) { - const cipherCanister = '6hgw2-nyaaa-aaaai-abkqq-cai' - const whitelist = [cipherCanister] - const { enqueueSnackbar } = useSnackbar() - - const checkIndex = async () => { - const canisterId = cipherCanister - await (window as any).ic.plug.createAgent({ whitelist }) - const plugActor = await (window as any).ic.plug.createActor({ - canisterId, - interfaceFactory: dip721v2_idl, - }) - const totalSupply = await plugActor.totalSupply() - const tokenIndex = Number(totalSupply.toString()) - return tokenIndex + 1 - } - - const mintNFT = async () => { - var canisterId = cipherCanister - const principal = await (window as any).ic.plug.agent.getPrincipal() - const tokenIndex = await checkIndex() - console.log('token index', tokenIndex) - const whitelist = [canisterId] - await (window as any).ic.plug.createAgent({ whitelist }) - const plugActor = await (window as any).ic.plug.createActor({ - canisterId, - interfaceFactory: dip721v2_idl, - }) - const properties = [ - [ - 'location', - { - TextContent: - 'https://f2cug-hyaaa-aaaah-abkdq-cai.raw.ic0.app/0/preview.jpg', - }, - ], - ['type', { TextContent: 'spell' }], - [ - 'json', - { - TextContent: JSON.stringify(data), - }, - ], - ] - - try { - const mintResult = await plugActor.mint(principal, tokenIndex, properties) - console.log(mintResult) - if (mintResult.Err) { - enqueueSnackbar('Error minting spell', { variant: 'error' }) - return - } - enqueueSnackbar('Spell minted succesffuly!', { variant: 'success' }) - onSuccess(mintResult) - } catch (err) { - enqueueSnackbar('Error minting spell', { variant: 'error' }) - console.log(err) - } - } - - return ( - <> -
- -
- - ) -} diff --git a/packages/client/src/components/Mint/dabStuff.css b/packages/client/src/components/Mint/dabStuff.css deleted file mode 100644 index 05ae92296..000000000 --- a/packages/client/src/components/Mint/dabStuff.css +++ /dev/null @@ -1,60 +0,0 @@ -.functionPanel { - width: auto; - height: auto; - border: 1px solid lightgoldenrodyellow; - border-radius: 16px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.buttonContainer { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - margin: 10px; -} - -.buttonContainer h6 { - color: lightgoldenrodyellow; - font-size: 12px; - margin: 5px; -} - -input { - width: 100px; - margin-bottom: 5px; - background: silver; - border: 1px solid gray; -} - -select { - width: 100px; - margin-bottom: 5px; - background: silver; - border: 1px solid gray; - text-align: center; -} - -button { - background: none; - border: 1px solid #ffcf40; - border-radius: 6px; - font-size: 14px; - padding: 6px 10px; - color: lightgoldenrodyellow; - cursor: pointer; -} - -button:hover { - background-color: rgba(255, 255, 255, 0.1); -} - -button:disabled { - cursor: default; - background: none; - color: silver; - border: 1px solid rgba(255, 210, 67, 0.5); -} diff --git a/packages/client/src/components/Mint/dabStuff.css.d.ts b/packages/client/src/components/Mint/dabStuff.css.d.ts deleted file mode 100644 index 132b232e8..000000000 --- a/packages/client/src/components/Mint/dabStuff.css.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -// This file is automatically generated. -// Please do not change this file! -interface CssExports { - -} -export const cssExports: CssExports; -export default cssExports; diff --git a/packages/client/src/components/PlugWallet/PlugWallet.tsx b/packages/client/src/components/PlugWallet/PlugWallet.tsx deleted file mode 100644 index c83008c48..000000000 --- a/packages/client/src/components/PlugWallet/PlugWallet.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { usePlugWallet } from '@/contexts/PlugProvider' -import { useEffect, useState } from 'react' -import './plugWallet.css' - -export function PlugWallet({ - onConnect = (arg: string) => {}, - onFail = (arg: string) => {}, -}) { - const { userPrincipal, connected, login } = usePlugWallet() - - const [showMenu, setShowMenu] = useState(false) - const [currentBalance, setCurrentBalance] = useState('N/A') - const [tokenName, setTokenName] = useState('') - const [balanceLoading, setBalanceLoading] = useState(false) - - // handle turning balance loading back off when it is done - useEffect(() => { - if (tokenName !== '' && balanceLoading) setBalanceLoading(false) - }, [tokenName, balanceLoading]) - - useEffect(() => { - if (!connected || !userPrincipal) return - - grabBalance() - }, [connected, userPrincipal]) - - const grabBalance = async () => { - setBalanceLoading(true) - const response = await (window as any).ic.plug.requestBalance() - setCurrentBalance(response[0].amount.toString()) - setTokenName(response[0].name) - } - - const plugLogin = async () => { - // const onSuccess = async () => { - // await grabBalance() - // } - login() - - // Process the users wallet balance to show - } - - // Drops the menu - const toggleMenu = async () => { - setShowMenu(!showMenu) - } - - return ( - <> -
- -
-
- -
Logged In As: {userPrincipal}
-
-

Balance:

-

- {balanceLoading - ? 'Please Wait...' - : `${currentBalance} ${tokenName}`} -

-
-
-
-
- - ) -} diff --git a/packages/client/src/components/PlugWallet/plugWallet.css b/packages/client/src/components/PlugWallet/plugWallet.css deleted file mode 100644 index 64d4e1b78..000000000 --- a/packages/client/src/components/PlugWallet/plugWallet.css +++ /dev/null @@ -1,117 +0,0 @@ -.walletContainer { - float: left; - margin: 10px; - overflow: hidden; -} - -.plugMenu { - background: none; - border: 1px solid #ffcf40; - border-radius: 10px; - font-size: 14px; - padding: 8px 10px; - color: lightgoldenrodyellow; - cursor: pointer; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; -} - -.plugMenu:hover { - background-color: rgba(255, 255, 255, 0.1); -} - -.plugSettings { - display: none; - position: absolute; - background-color: #202020; - min-width: 160px; - max-width: 180px; - box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.6); - z-index: 10; -} - -.menuHeader button { - width: 80%; - margin: 15px 10%; - background: none; - border: 1px solid #ffcf40; - border-radius: 10px; - font-size: 12px; - padding: 8px 10px; - color: lightgoldenrodyellow; - cursor: pointer; -} - -.menuHeader button:hover { - background-color: #303030; -} - -.menuHeader button:disabled { - cursor: default; - background: none; - color: silver; - border: 1px solid rgba(255, 210, 67, 0.5); -} - -.menuHeader h6 { - display: block; - padding: 0px 16px; - height: auto; - margin: 0px; - color: lightgoldenrodyellow; -} - -.menuHeader p { - font-size: 16px; - color: #e7e7e7; - padding: 12px 16px; - margin: 0px; -} - -.balance { - display: flex; - flex-direction: row; - align-items: center; -} - -.menuBody p { - float: none; - color: #ffcf40; - padding: 12px 16px; - margin: 0px; - text-decoration: none; - text-align: left; - font-size: 18px; - display: block; - height: 16px; -} - -.menuBody p:hover { - background-color: #303030; - cursor: pointer; -} - -.showMenu { - display: block; -} - -.menuDivider { - height: 1px; - width: 100%; - background-color: #353535; -} - -.statusBubble { - height: 10px; - width: 10px; - border: 1px solid black; - border-radius: 360px; - margin-left: 6px; - background-color: rgba(255, 0, 0, 0.5); -} - -.statusBubble.connected { - background-color: rgba(0, 255, 0, 0.5); -} diff --git a/packages/client/src/components/PlugWallet/plugWallet.css.d.ts b/packages/client/src/components/PlugWallet/plugWallet.css.d.ts deleted file mode 100644 index 132b232e8..000000000 --- a/packages/client/src/components/PlugWallet/plugWallet.css.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -// This file is automatically generated. -// Please do not change this file! -interface CssExports { - -} -export const cssExports: CssExports; -export default cssExports; diff --git a/packages/client/src/components/TabBar/TabBar.tsx b/packages/client/src/components/TabBar/TabBar.tsx index 86f850d74..54b9fe061 100644 --- a/packages/client/src/components/TabBar/TabBar.tsx +++ b/packages/client/src/components/TabBar/TabBar.tsx @@ -7,7 +7,6 @@ import { useNavigate } from 'react-router-dom' import MenuBar from '../MenuBar/MenuBar' import CreateTab from './CreateTab' import css from './tabBar.module.css' -import { PlugWallet } from '../PlugWallet/PlugWallet' import { changeActive } from '@/state/tabs' import { RootState } from '@/state/store' import { LoginTab } from './LoginTab' @@ -29,17 +28,17 @@ const Tab = ({ tab, activeTab }) => { const updatedTabs = tabs.map(t => t.id === tab.id ? { - id: t.id, - changes: { - active: true, - }, - } + id: t.id, + changes: { + active: true, + }, + } : { - id: t.id, - changes: { - active: false, - }, - } + id: t.id, + changes: { + active: false, + }, + } ) dispatch(changeActive(updatedTabs)) navigate('/thoth') @@ -77,8 +76,7 @@ const TabBar = ({ tabs, activeTab }) => {
- - + {/* */}
) diff --git a/packages/client/src/contexts/AppProviders.tsx b/packages/client/src/contexts/AppProviders.tsx index 6801e60c5..9f95e6de0 100644 --- a/packages/client/src/contexts/AppProviders.tsx +++ b/packages/client/src/contexts/AppProviders.tsx @@ -7,7 +7,6 @@ import { import AuthProvider from './AuthProvider' import FeathersProvider from './FeathersProvider' -import PlugProvider from './PlugProvider' import PubSubProvider from './PubSubProvider' import SharedbProvider from './SharedbProvider' import ToastProvider from './ToastProvider' @@ -15,7 +14,7 @@ import WebSocketProvider from './WebSocketProvider' declare module '@mui/styles/defaultTheme' { // eslint-disable-next-line @typescript-eslint/no-empty-interface - interface DefaultTheme extends Theme {} + interface DefaultTheme extends Theme { } } const darkTheme = createTheme( @@ -34,7 +33,6 @@ const providers = [ FeathersProvider, WebSocketProvider, SharedbProvider, - PlugProvider, ] /** diff --git a/packages/client/src/contexts/PlugProvider.tsx b/packages/client/src/contexts/PlugProvider.tsx deleted file mode 100644 index 72d1a6e05..000000000 --- a/packages/client/src/contexts/PlugProvider.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { useContext, createContext, useState, useEffect } from 'react' -import { Principal } from '@dfinity/principal' - -interface PlugContext { - userPrincipal: string | null - setUserPrincipal: (principal: string) => void - login: ( - onSucces?: (arg?: any) => void, - onFail?: (arg?: any) => void - ) => Promise - connected: boolean - getUserPrincipal: () => Promise - getAgent: () => any - getPlug: () => any -} - -const Context = createContext(undefined!) - -export const usePlugWallet = () => useContext(Context) - -// Might want to namespace these -const PlugProvider = ({ children }) => { - const [userPrincipal, setUserPrincipalState] = useState(null) - const [connected, setConnected] = useState(false) - - useEffect(() => { - ;(async () => { - const plug = getPlug() - const hasLoggedIn = await plug.isConnected() - - if (!hasLoggedIn) return - - login() - })() - }) - - const setUserPrincipal = principal => { - setUserPrincipalState(principal) - } - - const getUserPrincipal = async () => { - if (!userPrincipal) return null - const principal = Principal.fromText(userPrincipal) - return principal - } - - const getAgent = () => { - return (window as any)?.ic?.plug.agent - } - - const getPlug = () => { - return (window as any)?.ic?.plug - } - - const login = async ( - onConnect = (arg?: any) => {}, - onFail = (arg?: any) => {} - ) => { - const plug = getPlug() - // check if (window as any).ic exists, and if (window as any).ic.plug exist - if (!plug) { - const error = 'Could not connect - Plug is not installed' - return onFail ? onFail(error) : console.error(error) - } - - // check if user is logged in - const hasLoggedIn = await plug.isConnected() - if (!hasLoggedIn) { - await plug.requestConnect() - } else { - await plug.createAgent() - } - - // Set connected state for rest of UI - setConnected(hasLoggedIn) - - // get the users principal that they are logged in as - const userPrincipalResponse = await ( - window as any - ).ic.plug.agent.getPrincipal() - - console.log('Logged in as: ' + userPrincipalResponse) - - // call onFail callback - if (!userPrincipalResponse) { - const error = 'Could not connect - User authentication failed' - return onFail ? onFail(error) : console.error(error) - } - - // Set the users principal to component state for use in UI - setUserPrincipal(userPrincipalResponse.toString()) - - console.log('user principal set', userPrincipalResponse.toString()) - - await onConnect(userPrincipalResponse.toString()) - - // activateDabFunctions(); - } - - const publicInterface: PlugContext = { - userPrincipal, - setUserPrincipal, - connected, - login, - getUserPrincipal, - getAgent, - getPlug, - } - - return {children} -} - -export default PlugProvider diff --git a/packages/client/src/workspaces/spells/windows/EditorWindow/Minting.tsx b/packages/client/src/workspaces/spells/windows/EditorWindow/Minting.tsx deleted file mode 100644 index 4e0e3dd6b..000000000 --- a/packages/client/src/workspaces/spells/windows/EditorWindow/Minting.tsx +++ /dev/null @@ -1,251 +0,0 @@ -import axios from 'axios' -import { useEffect, useState } from 'react' -import { Scrollbars } from 'react-custom-scrollbars-2' -import { getAllUserNFTs } from '@psychedelic/dab-js' -import { HttpAgent } from '@dfinity/agent' -import { useSnackbar } from 'notistack' - -import css from './editorwindow.module.css' - -import WindowToolbar from '@components/Window/WindowToolbar' -import { useAuth } from '@/contexts/AuthProvider' -import { useGetSpellQuery, useNewSpellMutation } from '@/state/api/spells' -import { SimpleAccordion } from '@components/Accordion' -import Input from '@components/Input/Input' -// import Panel from '@components/Panel/Panel' -// import { useModal } from '@/contexts/ModalProvider' - -// import { useEditor } from '@/workspaces/contexts/EditorProvider' -import { Mint } from '../../../../components/Mint/Mint' -import { usePlugWallet } from '@/contexts/PlugProvider' -import { useNavigate } from 'react-router' -import { thothApiRootUrl } from '@/config' - -const MintingView = ({ open, setOpen, spellId, close }) => { - const [nfts, setNfts] = useState(null) - const { getUserPrincipal, connected, userPrincipal } = usePlugWallet() - const { enqueueSnackbar } = useSnackbar() - const navigate = useNavigate() - - // const { serialize } = useEditor() - - const { user } = useAuth() - const { data: spell } = useGetSpellQuery( - { - spellId: spellId, - userId: user?.id as string, - }, - { - skip: !spellId, - } - ) - - const buildUrl = url => { - return `https://urltorunspellnft.com` - } - - // @ts-ignore - const getNFTCollections = async () => { - const host = 'https://ic0.app' - const agent = new HttpAgent({ host }) - const principal = await getUserPrincipal() - const collections = await getAllUserNFTs({ - agent, - user: principal, - }) - - return collections - } - - const getSpellNfts = async () => { - try { - const nftCollections = await getNFTCollections() - - const tokens = nftCollections.filter(c => c.name === 'Cipher')[0].tokens - - const spellNfts = tokens.map(t => ({ - index: Number(t.index.toString()), - spell: JSON.parse(t.metadata.json.value.TextContent), - url: t.url, - })) - - setNfts(spellNfts) - } catch (err) { - console.log('error getting nft collections') - } - } - - const onRefresh = () => { - ;(async () => { - await getSpellNfts() - })() - } - - const copy = url => { - const el = document.createElement('textarea') - el.value = url - document.body.appendChild(el) - el.select() - document.execCommand('copy') - document.body.removeChild(el) - enqueueSnackbar('Url copied') - } - - useEffect(() => { - console.log('userPrincipal', userPrincipal) - if (!connected || !userPrincipal) return - ;(async () => { - await getSpellNfts() - })() - }, [connected, userPrincipal]) - - const loadSpell = spell => { - if (!user) return - console.log('loading spell!', spell) - ;(async () => { - // Clean old user ID from the spell name - const cleanedName = spell.name.split('--')[0] - // make a new spell name for the new user - const name = `${cleanedName}--${user.id}` - // check if spell exists - - try { - const url = `${thothApiRootUrl}/game/spells/${name}?userId=${user.id}` - console.log('url', url) - const spellResponse = await axios.get(url) - - console.log('Spell response', spellResponse) - - if (!spellResponse) { - const savedSpell = await useNewSpellMutation({ - ...spell, - name, - userId: user.id, - user: user.id, - }) - - console.log('savedSpell', savedSpell) - - // check this call for errors - } - } catch (err) { - const url = `${thothApiRootUrl}/game/spells?userId=${user.id}` - const body = { - ...spell, - name, - userId: user.id, - user: user.id, - } - const savedSpell = await axios.post(url, body) - - console.log('savedSpell', savedSpell) - } - - navigate(`/thoth/${name}`) - })() - } - - // const { openModal, closeModal } = useModal() - // const { enqueueSnackbar } = useSnackbar() - - return ( -
-
-
- -
- Your Spell NFTs -
- - - - -
- - {!nfts || nfts.length === 0 ? ( -

- You have no NFTs in your wallet.
Press "Mint" to mint your - current spwell into an NFT. -

- ) : ( - <> - {nfts.map((nft, i) => { - return ( - - -
-

Endpoint URL

-
- - -
-
- - ) - })} - - )} - -
-
- ) -} - -export default MintingView diff --git a/packages/client/src/workspaces/spells/windows/EditorWindow/index.jsx b/packages/client/src/workspaces/spells/windows/EditorWindow/index.jsx index f17f8060f..6ef2f3db7 100644 --- a/packages/client/src/workspaces/spells/windows/EditorWindow/index.jsx +++ b/packages/client/src/workspaces/spells/windows/EditorWindow/index.jsx @@ -4,16 +4,12 @@ import { createNode } from 'rete-context-menu-plugin/src/utils' import WindowToolbar from '@/components/Window/WindowToolbar' import { Editor, useEditor } from '../../../contexts/EditorProvider' import Deployment from './Deployment' -import Minting from './Minting' import Select from '@components/Select/Select' import css from './editorwindow.module.css' -import { usePlugWallet } from '@/contexts/PlugProvider' const EditorWindow = ({ tab }) => { const { getNodes, getNodeMap, editor } = useEditor() const [deployOpen, setDeployOpen] = useState(false) - const [mintingOpen, setMintingOpen] = useState(false) - const { connected } = usePlugWallet() const nodeList = getNodes() const nodeMap = getNodeMap() @@ -70,10 +66,6 @@ const EditorWindow = ({ tab }) => { setDeployOpen(false) } - const closeMinting = () => { - setMintingOpen(false) - } - const EditorToolbar = () => { return ( @@ -90,14 +82,6 @@ const EditorWindow = ({ tab }) => { value={null} focusKey="cmd+p, ctl+p" /> - - - - - setViewingEvent(null)}> - Back to calendar - - - ) -} - -const EventForm = ({ - setShowingEventForm, - addEvent, - editEvent, - withEvent, - setViewingEvent, - preselectedDate, -}) => { - const newEvent = withEvent || { - name: '', - date: '', - time: '', - type: 'standard', - moreInfo: '', - } - if (!withEvent && !!preselectedDate) { - newEvent.date = dateToInputFormat(preselectedDate) - } - const [event, setEvent] = useState(newEvent) - - return ( - setShowingEventForm({ visible: false })} - title={`${withEvent ? 'Edit event' : 'Add a new event'}`} - > -
-