metafam / thegame Goto Github PK

Back button doesn't do anything when on the first step. I would assume it would cancel out of the flow and go back to the main view.

Write a script to take all the user data we have in https://github.com/MetaFam/TheSource (project.json and addressBook.json) and put it into the appropriates tables in our Database

Need to manage the state for the setup screens and decide how much stuff if actually a separate page vs just on the same page.

https://www.figma.com/file/zDHqledo5H2aKR3KDvbur8/Meta-Game?node-id=1713%3A317

Includes what step of the form the user is on, what screen / components to render, and managing the input states of each screen in a clean way. Once a user finishes adding skills for example, we will update the backend with that info, but still need a way to manage local state within that screen

• Main user info card should be more compact with image on left and name to the right
• Need to get rid of the static "role" section and the collab/trust buttons which dont do anything right now
• A bunch of "add a section" boxes show up, should make it so that it only shows up if you are logged in and looking at your own profile (same with the "X" / close button on the sections, only show for the authenticated user)

This will make development work a lot easier if we have existing sample data in the DB to work with

Docs: https://hasura.io/docs/1.0/graphql/manual/migrations/advanced/seed-data-migration.html#seed-data-migration

Front end devs should be able to iterate without needing to deploy the entire environment locally

• Allow users to update their role on frontend + add the role field to Player table in Hasura
  -̶ ̶S̶k̶i̶l̶l̶s̶ ̶s̶h̶o̶u̶l̶d̶ ̶b̶e̶ ̶c̶o̶l̶o̶r̶ ̶c̶o̶d̶e̶d̶
• Allow people to specify their "top skills" (max 3) + other skills as a separate list
  -̶ ̶C̶o̶n̶n̶e̶c̶t̶ ̶N̶F̶T̶ ̶g̶a̶l̶l̶e̶r̶y̶ ̶s̶e̶c̶t̶i̶o̶n̶ ̶t̶o̶ ̶3̶B̶o̶x̶ ̶d̶a̶t̶a̶
• Allow players to set their Timezone
  -̶ ̶H̶i̶d̶e̶ ̶s̶e̶c̶t̶i̶o̶n̶ ̶o̶n̶ ̶t̶h̶e̶ ̶p̶r̶o̶f̶i̶l̶e̶ ̶w̶h̶e̶r̶e̶ ̶t̶h̶e̶ ̶u̶s̶e̶r̶ ̶d̶o̶e̶s̶n̶'̶t̶ ̶h̶a̶v̶e̶ ̶a̶n̶y̶ ̶d̶a̶t̶a̶

Allow users to link their BrightID to their player profiles
Show a "verified" checkmark beside the name if users are BrightID verified
Store info in our DB

Simplify the DB schema to only the essentials we need for profiles

Setup a remote schema for Aragon DAOs so we can look up what DAOs a user is a member of

Subgraph for tokens: https://thegraph.com/explorer/subgraph/aragon/aragon-tokens-mainnet
Subgraph for DAO data: https://thegraph.com/explorer/subgraph/aragon/aragon-mainnet

Docs on remote schemas: https://hasura.io/docs/1.0/graphql/manual/remote-schemas/
Docs on remote joins: https://hasura.io/blog/remote-joins-a-graphql-api-to-join-database-and-other-data-sources/

Example queries to load all the orgs a user is a member of from the tokens subgraph:

query getTokensForHolder($ethAddress: Bytes!) {
  tokenHolders(where: {address: $ethAddress}) {
    id
    tokenAddress
  }
}

# Take the token addresses from above query and make this query:
query getOrgForTokens($tokenAddresses: [Bytes!]) {
  miniMeTokens(where: {address_in: $tokenAddresses}) {
    id
    orgAddress
  }
}

Example query to load the organizations from the orgAddresses in the query above:

query getOrgs($orgIds: [ID!]) {
  organizations(where: {id_in: $orgIds}) {
    id
    address
  }
}

https://everest.link/

Can use this as a data source for list of projects/guilds in the web3 space

We want to be able to query the 3box API for a users profile information. Should set up a query action that uses 3Box JS to load this data

https://docs.3box.io/build/plugins/profile-edit

https://www.figma.com/file/zDHqledo5H2aKR3KDvbur8/Meta-Game?node-id=1713%3A317

Setup some basic react components that handle the layout for the profile setup screens (e.g. title, next button, progress bars, etc + responsive layout for mobile). Don't have to setup each individual component, just the reusable page structure where we can drop in the specific components for each screen

The cards on player profiles have good margins on the sides, so they look good:

The cards don't have that, so they stretch & look weird on widescreen:

The cards should always be bigger vertically than horizontally.

What the original design looks like:

I have no idea how that is supposed to be done, so I'll just leave it at this.

Allow people to scan QR Code to verify their profiles with BrightID

To test out this micro frontend approach, we can start with trying to integrate the wiki into mymeta. Options:

https://single-spa.js.org/docs/module-types

• Seems better for route based micro-frontends (probably more applicable for something like the wiki), but might also work for the modular profile sections.

https://bit.dev

• Seems better for component based micro front ends (e.g. profile modular sections)

• crashes without any error message when opened in a non web3 browser (TypeError: Cannot read property 'enable' of undefined). Should use web3 modal so people can connect with non metamask browsers (e.g. WalletConnect)
• images aren't persisted, when I reload a map the image is broken
• When I change ethereum accounts and refresh, I get infinite loading state
• Also get an infinite loading state when I load it on a mobile app browser (Coinbase Wallet, metamask mobile, etc)
• When I refresh, I see my old map again, but the name of the map gets reset to "metamap". Should make it so it either persists the name and the map, or neither, and give a warning if the user is going to close it without saving changes.

Setup the scaffolding for a NextJS app with ChakraUI. Can use static generation for now.

Potentially useful links:

• https://nextjs.org/docs/basic-features/typescript
• https://github.com/formik/tsdx
• https://github.com/rangle/radius
• https://github.com/relay-tools/relay-hooks/blob/master/examples/suspense/nextjs-ssr/relay/withData.tsx

On here: https://wiki.metagame.wtf/docs/enter-metagame/roles-in-metagame#the-fundster

The link to "Seeds" goes to a broken page here:
https://wiki.metagame.wtf/docs/handbook/xp

• Color code each skill based on its category
• Make sure that the select list stays open when you add a skill https://react-select.com/home#animated-components

Current instance: https://github.com/MetaFam/TheSource

New example instance: https://github.com/sourcecred/example-instance

Currently blocked until identities and initiatives are implemented for the new instance system

Should set the URL for the map so people can share the link and it will load that specific map. Probably need to have it scoped to the user that created it so there is no naming conflicts. In addition, the URL should be updated in the address bar when the user saves it.

Would also be good to show a dropdown list of the existing maps the user has already created instead of having to type it out and click "load". If the user is saving a map that already exists, the button should say "Update" instead of "Save". If its a new map, it should be "Create" instead of "Save"

This issue was generated by todo based on a TODO comment in 68bba02 when #138 was merged. cc @MetaFam.

This issue was generated by todo based on a TODO comment in c54c399 when #32 was merged. cc @MetaFam.

Can't connect my Gnosis Safe Multisig with walletconnect.

MyMeta Design:

MyMeta Currently:

Let's disregard the custom backgrounds for now & focus on what's missing or misplaced:

Missing:

• Timezone.
• A container displaying NFTs.
• Allow people to "add new block".

Misplaced:

• XP & Rank should be next to "MetaGame" in the membership section.
• The contact links (github & twitter) should be moved from below the name into its own container below the "about me" container.

Inspiration:

• https://poolside.fm
• https://live.ethonline.org/
• https://github.com/arturbien/React95

https://www.figma.com/file/n36ggiRBQEGzRUbGxWfkMX/Meta-Game-(Copy)?node-id=3003%3A37

• Prettier
• lint-staged
• husky

Example setup here: https://github.com/raid-guild/gatsby-typescript-dapp-starter

Setup GitHub actions to run type check, linting, etc on pull requests

• Add IANA timezone to player table + migration
• Add new screen to profile setup flow (after "availability")
• Read from new column on player page

On here: https://wiki.metagame.wtf/docs/enter-metagame/roles-in-metagame#the-fundster

The link to "list of reasons" goes to s broken page here:
https://wiki.metagame.wtf/docs/handbook/for-investors

https://www.figma.com/file/zDHqledo5H2aKR3KDvbur8/Meta-Game?node-id=1713%3A317

Create component to add / remove a list of skills, preferably with autocomplete. Can use downshift to handle the logic: https://github.com/downshift-js/downshift

Feel free to use mock data

https://www.figma.com/file/zDHqledo5H2aKR3KDvbur8/Meta-Game?node-id=1713%3A32

Here's the login screen. The design isn't up to date, but the two options we want here for signing in are web3Modal (metamask, walletconnect, etc) and https://magic.link with email for anyone that doesn't have an existing ETH account. For the scope of this issue, we will implement web3modal first.

You can see how the existing implementation works in the app-react package for inspiration, and can probably re-use code from there for web3 provider and what not.

Old repo: https://github.com/MetaFam/bot

If we can move this into this repo it will let us easily build more features on top of it. We should probably re-write it in TypeScript as well since Discord.js has pretty good TS support.

Currently the bot updates files in TheSource repo for sourcecred to use, but once we implement generating the identities file from the database then we can update it to push the data into our DB directly. However, with the new ledger stuff that @decentralion is working on, that might be wasted effort since the way identities are being linked is changing. They will all be going into the ledger now, so we might want to have a representation of that in our database. e.g. when a user is created, we push the identity to the ledger file on github)

We can also start implementing other bot functionality such as fetching your XP, your SEED balance, etc once we have this here

Blocked until #21 is closed

Every time the new output data is calculated on our sourcecred instance, we need to push that data into the appropriate table in our database so we can efficiently look up how much XP each user has and where they got it from, etc. Example of the new output format: https://github.com/sourcecred/example-instance/tree/master/output

Context

Currently we use Moloch / Aragon as a means for discovering DAOs and other external guilds. There is a Daohaus API for exploring these DAOs, however, any given guild / DAO must use Moloch / Aragon for this API to know about them. We have observed that almost every organization who has expressed interest in becoming a Metagame guild has their own discord server, however. And that discord provides a robust API that can be leveraged to easily onboard guilds.

Design

We will create a Discord Bot that can be used to both onboard guilds and provide a way of interacting with MetaGame.

• MyMeta "Join as guild" page: If a guild expresses interest in joining MetaGame, they can navigate to a "Join as a guild" page within MyMeta. This will provide some introductory text about MetaGame as well as a Discord auth URL that can be clicked to add the bot to their Discord server.
• Once accepting the various permissions required by the bot, the user will be redirected back to MyMeta, at which time we will attempt to fetch the necessary metadata to create the Guild in MetaGame.
  • We can match existing guilds by manually add a discord_id to the existing guilds in our DB
  • Initial data to collect and allow editing:
    • guildname (basically a username for a guild)
    • description
    • discord_invite_url (just the code, we will prepend "https://discord.gg/" to the input field
    • join_button_url
    • logo (fetch the image and display, allow editing the URL. Editing will display the new image)
    • moloch_address ?
    • name
    • type enum: FUNDING | SOCIAL | SERVICE | PROJECT | RESEARCH
    • website_url
  • We will also fetch all the roles for the discord server and populate a multi-select widget. This will allow the user to select the roles that indicate membership in the guild. We will also ask for roles that indicate some sort of administrator / owner status.
• On submission, add the guild + metadata. Save the discord server ID on the guild table and discord membership role IDs in a new JSONB column. Also, query the list of members in the discord server, filter by whatever roles count as members, match the member's discord ID with our player.discord_id and insert the match into the GuildPlayer table. Only add discord guild members that already have player accounts in MetaGame.

Prerequisites

• Refactor the DB to better match this deeper Discord integration. Move discord_id from player_account / discord to main player table, as well as adding a discord_id to the guild table. Migrate all the data along the way.
• Move the guild-specific columns from the player table in guild_player. Not sure at this point what these are.
• Get #355 merged and deployed with the new MetaGame bot. It would be nice to dogfood the initial onboarding with the MetaGame (Metafam) discord server, but we can probably (hopefully?) sufficiently test with dev discord servers.

Forthcoming

These should be broken into separate issues:

• Get your XP / Stats / Player card
• Onboarding enhancements: Add eth address, discord ID, discourse ID in mymeta player setup flow?
• Edit "memberships" section of profile setup to query the discord servers the bot has access to, determine if the player is already a member of one or more, and display a list of matched servers (like it does now with DAOs) that are pre-checked.

The UX of MetaMaps isn't ideal right now:

• Lines are static and cannot be moved with the objects
• squares and circles don't have any text / labels, hard to know what they are for
• can't pan or zoom the graph
• Not mobile/touch friendly

It would be advantageous for us to leverage existing libraries instead of trying to implement all these complicated interactions on our own. Can have something much more battle tested and sophisticated that way.

Top contender is VisJS. There's a React wrapper available here.

VisJS has an easy way to serialize the graph to JSON, which will make it easy to save / load: https://visjs.github.io/vis-network/examples/network/other/saveAndLoad.html

Example on how to add / edit nodes and edges with labels: https://visjs.github.io/vis-network/examples/network/other/manipulationEditEdgeNoDrag.html

Example showing interactions like having a popup on hover: https://visjs.github.io/vis-network/examples/network/events/interactionEvents.html

Overall, there's lots of fun stuff we can do with this, but for the scope of the issue, lets aim to have a working MVP with:

• data loading / saving from 3Box
• adding nodes / edges with labels
• Ability to edit / delete nodes / edges
• Lightly styled with the MetaGame theme
• Ability to add a URL and/or image to nodes
• Standard UX best practives, e.g. highlight on hover / select, etc. Should be built in since it works like that in examples

We can start with just one type of shape for now (rounded rectangle).

I imagine this will also be useful for things like the skill tree, where we can use the hierarchal layouts shown here: https://visjs.github.io/vis-network/examples/network/layout/hierarchicalLayout.html

Add the profile edit widget near the end of the "about you" section of profile setup flow:

https://3box.github.io/3box-profile-edit-react/examples/dist/
https://github.com/3box/3box-profile-edit-react

Following Friday's product design raid, we're moving onto building the platform.

Platform Design

Not sure if we're building mobile-first from the get-go, but this is how I see it working on desktop vs. mobile.

• The main differences are that on mobile, the "journal & goals" tabs would be collapsed by default & there would be no navigation bar, but the floating MG crystal instead. It would give the "navigation bar buttons" on single press, and open the full app drawer on double tap.
• If making the mobile version like this makes it impossible to have a single build for both mobile & desktop, we can drop the navigation bar from the desktop version and have also have a floating crystal that slowly follows the mouse as you navigate the page.

For anyone who missed out, here's the full outline of the platform:

v0.1 - A navigation bar with an app drawer & an empty background.

• A) navigation bar
• B) nav. with app drawer open
  A user must be able to open any of these "apps" inside an iframe window, as suggested in this issue.
• First version of the app drawer ✅
• Second version issues

v0.11 - The beginning of a dashboard in the background.

• The design is super-rudimentary, a mockup sort of thing. But unless it gets updated in the coming few days, just go with it. Simply have these containers that display XP & Seeds to begin with, you can drop the morale & carbon footprint for now.

v0.12 - A better dashboard.

@Polycarpik' Journal quest should be ready before this step, so it can be integrated as suggested in the "v0.11" rendering above.
The dashboard itself should have a better design by then, and it shouldn't just display "XP & Seeds" but also "+% this week" for each of them. Hopefully we also get the morale indicator by then & someone to estimate our carbon footprint.

v0.13 - Make it mine! Populating the dashboard.

• Mine as in yours, not as in mining.
• We should have a login by then. metagame.wtf will be the public version, and then my.metagame.wtf is the post-login version where you can customize the theme, the dashboard etc.
  Custom backgrounds to begin with.
• Then, a player should be to take any app they opened inside a window, and pin it to their dashboard.

v0.2 - Start dApp integrations

• The very first deep dapp integration will probably be the front-end components for our Balancer-based Seed market. It will have its own "Seed subscription page", looking something like this.
• Following it, we should get in Paco's Mooni, to help people go directly Seeds to fiat.
• Then, something fun, let's get Audius in there! Talked to Cooper, seems ready.

Main Quests

• One of the most critical quests is @pakokrew's Seed Market. Its basically 2 lists, 1 listing all the things that players & guilds of MetaGame have in supply & all the things that they need. Basic supply & demand.
• ValueFeed - Building on @benoxmo's work @nicolas-law took it a step further, and now we need to take it multiple steps further. He said he wants to rewrite it in TypeScript, but that's beside the point of this post. The next big goal is to get a filtered feed of the most valuable things happening on Discord channels, Github & Discourse - onto the background of the platform, below the dashboard.
• Other than that, Quests: the questing system itself should be moved from Discord to the website. We need a place where we can post MetaGame quests, and for players to claim & complete them. We can start with something simple, eg. if we have the "quest complete" backend feed to Discord, we can easily loop it back to Sourcecred.
• After that, the user quests! Its different than the market itself because its about labor & smaller chunks of it. While the on the market itself, you post "hiring a front-end engineer", the "user quests" system is more like a bounty board for temp work.

Side Quests

• Install App: The app drawer should have an empty slot called "install app", which would ask the user "do you want to install it for yourself or MetaGame as a whole?" & "is this app useful for your project or MetaGame as a whole?" If the user wants it installed for MetaGame as a whole, an issue gets opened and its decided whether its good enough, and whether its useful for the user or MetaGame, then we can figure out whether the user needs to pay for the install or get rewarded.
• Calendar: A collaborative calendar for DAOs to align on meeting times. Think gcal + doodle but token curated. Now think MVP for that. We'll probably be doing this in collab with Gnosis and should be fairly well paid. Ping me for more info on this.
• JustAsk: MetaGame Quora, basically. Ask questions & reward answers with Seeds.
• DebateIt: A small app for making decisions. We usually discuss things on Discord or on forums, but things get buried in a stream. We need to have a fixed places for the "summary", "for" & "against". Something like this:
  
  If you want to build this, just ping me and I'll make a proper design 🤣

Trivial Quests

Just some fun things to do, could be high impact but fairly low effort.

• Ticker: Its a really small thing, just a ticker line at the bottom or the top of the screen, displaying the price of Seeds, community sentiment, news, in-game tips & player-broadcasted messages.
• 1MillionSeeds: Think 1million pixels but token curated. Extra mechanic: the screen space gets diluted as more Seeds are minted.
• Memecraft: A mini-app for photoshop battles & photoshop tennis. We're already playing photoshop tennis on Discord, but it would be cool to have a proper interface for it that keeps track of the images etc. Could have battles between them and whatnot.

Note: all the icons are simply emojis, the reason they may look different to you is because you're on another OS.

Our model names in our database currently have different casings.

Would be better to have all of them written the same way.

Suggested casing for example Player Account: player_account

• Rename all the models

• Rename Account -> player_account

• Update all the frontend/backend graphql queries

This issue was generated by todo based on a TODO comment in 95834c9. It's been assigned to @dan13ram because they committed the code.

Setup a remote schema for Moloch DAOs so we can look up what DAOs a user is a member of.

Subgraph link: https://thegraph.com/explorer/subgraph/odyssy-automaton/daohaus
Docs on remote schemas: https://hasura.io/docs/1.0/graphql/manual/remote-schemas/
Docs on remote joins: https://hasura.io/blog/remote-joins-a-graphql-api-to-join-database-and-other-data-sources/

Example query to fetch all the DAOs a user is a member of:

{
  members(where: {memberAddress: "<ETHADDRESS>"}) {
    moloch {
      id
      title
      version
    }
  }
}