[Demand] Cryptocurrency Features (Stage 1)

neruthes commented 4 years ago

Metadata

Field	Value
Previous Stage	...
Figma Link	Dashboard "Wallets" Tab / Composing / Viewing
Expected UX prototype due	2020-01-10
Actual UX prototype release	2020-01-10
Expected engineering due	2020-01-17 (FRI)
Corresponding Pull Request	-
Completion Version	-

Catalogue

Dashboard "Wallets" Tab
- Wallet Card
- AddWallet Section
- Red Packets History
- Red Packet Detail Page
Red Packet Card
Post Composing
- List of Plugins
- Plugin Modal
Red Packet Plugin Modal Content
- Create New Red Packet
- Select Existing Red Packet
Post Affixing Canvas (PAC)
Red Packet PAC

Part 1: Dashboard "Wallets" Tab

Components

Wallet Card
AddToken Modal
SendRedPacket Modal
RedPacketsHistory Modal: List
RedPacketsHistory Modal: Detail

Component: Wallet Card

Area: Name

Name of the corresponding Persona.

Area: Wallet Address

Generated by the public key according to related Ethereum standards. Can be copied into the clipboard.

Area: Red Packets History Button

Click to open RedPacketsHistory modal.

Area: Send Red Packet Button

Click to open SendRedPacket modal.

Area: List of Tokens

Each cell is a balance view of the token, indicating Token Symbol, Token Name, and currently available balance (calculated by real on-chain balance subtracting locally frozen balance).

The precision of the balance number remains to be specified. The current draft strategy: if (balance < 10000) { display literal value with 5 significant digits } else { display a string like "123K" or "1.23M" or "12.3B", totaling 3 significant digits }.

The tokens are sorted by Unicode dictionary order, ascending by codepoint.

When the Persona tries opening a Red Packet which is denominated in a token which is not in the list, the denominated token is automatically added into the list.

Area: Edit List Button

Click to change the balance values into "Delete" text label buttons (same to the ones used in PersonaCard/ProfileCell/Connected) and itself to a Done text label button, which upon clicking makes the list back to a for-display state. ETH itself may not be deleted.

Area: Add Token Button

Click to invoke AddToken modal.

Component: AddWallet Section

Component: AddToken Modal

The user may give a token contract to add it to the list of tokens.

Component: SendRedPacket Modal

The list contains all social networks which the current Persona has Profiles connected.

Component: RedPacketsHistory Modal: List

The list contains all red packets which are created by the current Persona and every red packet which the current Persona tried to open (including "coming to late", "network error", and "cannot pay gas fee"). The list does not contain any red packet which the current Persona saw but did not try to open.

Area: Red Packet Card

See DimensionDev/Tessercube-iOS#87-567398827.

Component: RedPacketsHistory Modal: Detail

Area: "Say Thanks" Button

The button will be visible when certain conditions are satisfied. Elaborations are defined at scenarios which invoke this modal.

Area: Source

This is the URL of the post where the current Persona initially tried opening.

Note that a Red Packet may appear in multiple Posts. All such Posts present the same Red Packet.

The scope of Red Packet is within Persona. Each Persona manage its relation with the same Red Packet. However, there are such exceptions:

Number of collected shares: Whenever this field is updated, other Personae automatically receive the new number without initiating another query on the blockchain.

Area: Message

This is the attached message from the sender.

Area: List of Openers

Each cell is a summary of the opener.

The name is the nickname of the receiving Persona, which is specified when a collection operation is executed on the Ethereum network. However, if the receiving Persona is a local Persona (defined as whose private key exists in the local database), this field will always show the current nickname of this Persona, instead of the on-blockchain name.

The wallet address is the wallet address of the receiving Persona, which is by the public key according to related Ethereum standards.

The number on the right is the amount the receiver collected. The serialization strategy conform to the one used in WalletCard/ListOfTokens.

Part 2: Red Packet Card

Figma Link

List of States in Terms of Interaction Design

Send

Sending
Network Error
Failure, Cannot Afford Gas
Base
Open, Opening
Open, Opened
Open, Too Late
Open, Network Error
Refund Available
Refunded

Receive

Ready
Network Error
Failure, Cannot Afford Gas
Open, Opening
Open, Opened
Open, Too Late
Open, Network Error

Part 3: Post Composing

List of Plugins

In the Composition Modal, there will be a list of Plugins. Currently, the only available plugin is Red Packet.

Each plugin is identified by a versioned package name (e.g. com.maskbook.redpacket:1, meaning version 1 of com.maskbook.redpacket). Multiple versions of the same package must not coexist.

In this list, if a plugin is preinstalled and starts with com.maskbook., it should be displayed by its human-readable nickname instead of package name.

When the chip is clicked, a modal for the plugin will appear.

The modal must have an AppBar which has a "Close" button to exit the modal. The title of the modal is Plugin: ${packageName.toLowerCase()} (for ordinary plugins) or Plugin: ${humanReadbleNickname} (for com.maskbook.*)

The content of the modal determines how it operates inside.

Each plugin operates its isolated database tables and communicate with Maskbook and other plugins through to-be-defined protocols such as JSON RPC.

Part 4: Red Packet Plugin Modal Content

Tab: Create

Field	Description
Token	Dropdown selection, candidates are tokens in `WalletCard/ListOfTokens`.
Split Mode	Dropdown selection, candidates are `Average` and `Random`. This choice is lost when the modal is closed.
Amount	`Amount per Share` for Average mode. `Total Amount` for Random mode.
Shares	Must be positive integer.
Attached Message	See DimensionDev/Tessercube-iOS#87 for its specifications.

The balance line will show the currently available balance (as defined afore) of the selected token, with supplemental ETH balance (same serialization strategy with modification, retaining only 2 significant digits instead).

The text of the "Create" button is Pack ${TotalAmount.maxSignificantDigits(3)} ${TokenSymbol}.

When the total amount of the Red Packet exceeds the balance, the "Create" button will be disabled, and the number and the token symbol in the balance line will be red and bold. A tooltip ("Insufficient balance") will appear above the "Create" button when the mouse cursor hovers it.

Tab: Select

The user may click an option to decide which Red Packet is expected to be published in the post. The list shows the Red Packets which are successfully deployed are are valid and are created by the current persona and have at least 1 uncollected share (as far as Maskbook knows). Incoming Red Packets, expired Red Packets, and fully collected Red Packets will not appear in the list.

The first option in the list is to remove the existing Red Packet in the Post. If there is no Red Packet in the Post, this option will not appear.

Part 5: Post Affixing Canvas (PAC)

When Maskbook detects plugin-specific data, the data will be passed to the post content interpreter of the plugin, rendering an HTML document which Maskbook will put in a canvas (not a <canvas> tag) beneath the decrypted post content. The width of the canvas is always 355 px (for screens which have odd pixels per row) or 356 px (for screens which have even pixels per row). When the screen is too narrow in terms of logical pixels, a downsampling will be made.

An operation by the user inside the canvas may affect the content of the canvas or open a modal, where the plugin is free to display any content on a full-page basis.

Part 6: Red Packet PAC

Base

Opening

When the user clicks the "Open Red Packet" button, the button will become disabled (text: Opening...), and Red Packet plugin background will try to collect a share of the Red Packet.

Receive-Opened

If the Red Packet is one that the current Persona is already opened by the current Persona and is not created by the current persona, the "Open Red Packet" button will be replaced by a "Say Thanks" button. Also there should be a "View Details" borderless button, which upon clicking will open a CanvasSideRedPacketDetail modal, which looks perfectly similar to RedPacketsHistoryModal/Detail-Alt but the left button on the left of the AppBar will be replaced by a "Close" button and the "Source" field will be omitted.

"Say Thanks" button will appear only if the RedPacket is not created by the current Persona and is successfully opened by the current Persona.

Send-Opened

Notes

None.

neruthes commented 4 years ago

This PRD is mostly ready for delivery. Reviews are requested.

cc @yisiliu @Jack-Works @SunriseFox @guanbinrui

Jack-Works commented 4 years ago

Each plugin operates its isolated database tables

It is a good security feature but it's not easy in the current stage.

communicate with Maskbook and other plugins through to-be-defined protocols such as JSON RPC.

The plugin system is a big project so we should make it work first then add the plugin system in future

Question: Can a single wallet address operate two type of crypto currency (like ETH & USDT)?

Tedko commented 4 years ago

For: Question: Can a single wallet address operate two type of crypto currency (like ETH & USDT)?

Yes — as long as its on the same chain (here eth and USDT-on-eth-as-erc20)

Further more, you can derive them from the same private key (though it’s not secure)

On Fri, Jan 10, 2020 at 22:01 Jack Works notifications@github.com wrote:

Each plugin operates its isolated database tables

It is a good security feature but it's not easy in the current stage.

communicate with Maskbook and other plugins through to-be-defined protocols such as JSON RPC.

The plugin system is a big project so we should make it work first then add the plugin system in future

Question: Can a single wallet address operate two type of crypto currency (like ETH & USDT)?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/DimensionDev/Maskbook/issues/634?email_source=notifications&email_token=ABTAVTNSYG3VRWSGS6XD4LLQ5B5TRA5CNFSM4KFC3XUKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIT773A#issuecomment-573046764, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABTAVTIZAKYK227IWGVAUKTQ5B5TRANCNFSM4KFC3XUA .

neruthes commented 4 years ago

The plugin system is a big project so we should make it work first then add the plugin system in future

Well now you know why I started working on designing the new payload and the plugin system. ([I:b])

yisiliu commented 4 years ago

In the wallet card, how does it render the view if one has more than 2 tokens? They will appear on a list or directly append to the bottom?

guanbinrui commented 4 years ago

(e.g. it has already been opened by the current Persona or is created by the current Persona)

It's strange the creator can not open the red packet which they created.

Tedko commented 4 years ago

(e.g. it has already been opened by the current Persona or is created by the current Persona)

It's strange the creator can not open the red packet which they created.

Good point

neruthes commented 4 years ago

Note:

Red Packet card UI may be subject to adjustments. Prioritize other components instead.

neruthes commented 4 years ago

In the wallet card, how does it render the view if one has more than 2 tokens? They will appear on a list or directly append to the bottom?

I suppose that the length control of the list may be left to future stages. This feature does not look being worth the time working on, considering that our time is in extreme shortage.

neruthes commented 4 years ago

(e.g. it has already been opened by the current Persona or is created by the current Persona)

It's strange the creator can not open the red packet which they created.

Noted. I will review it soon.

neruthes commented 4 years ago

(e.g. it has already been opened by the current Persona or is created by the current Persona)

It's strange the creator can not open the red packet which they created.

Noted. I will review it soon.

Just concluded that it was a mistake. Now corrected.

neruthes commented 4 years ago

Edit:

Now only 5 significant digits are expected in List of Tokens for balance amounts lower than 10000.

neruthes commented 4 years ago

Amendment:

Procedure of collecting a Red Packet:

See the Red Packet in the news feed or a post detail page.
Click "Open Red Packet". The Red Packet card moves into "Receive-Opening" state, with the button becoming disabled with some kind of animation indicating that the system is responding.
If success:
- If page has been closed already:
- Send the user a notification telling that the Red Packet has been collected, which upon clicking will direct the user to the detail page of the post where the Red Packet is located.
- Else:
- Let the user know that it has been opened, by automatically opening the corresponding RedPacketDetail modal in the page, where the user can easily know that it has been opened.
Else:
- If page has been closed already:
- Notify the user that the collection was not successful, by sending a notification which upon clicking directs the user to Dashboard / Wallets / RedPacketHistoryModal[ThisPersona] / RedPacketDetailView, where the user can know that the collection was not successful.
- Else:
- Open RedPacketDetail modal in the page, where the user can know that the collection was not successful.

Additional Operations:

Suggest the user to reply/comment the post, by presenting a "Say Thanks" button in the RedPacketDetail view right below the RedPacket card, which upon clicking directs the user to publish a reply/comment with default text "Thank you!".
If the modal is in-page:
- The button will invoke the reply/comment in-page.
Else:
- The button will invoke the reply/comment in a new tab.

Note that this "Say Thanks" button will appear only if:

The Red Packet is not created by the current Persona; and
The Red Packet is successfully opened by the current persona.

Related Questions:

Is it feasible to get the PostLocator of a post without actually visiting the page? cc @Jack-Works

neruthes commented 4 years ago

Discussion Summary:

Cryptocurrency features on Facebook will be delayed till #397 is finished.

neruthes commented 4 years ago

Edit:

Fixed a minor detail in RedPacketDetailModal / List of Openers.

Previously, the image accidentally contained social network indicator icons in the cells.

SunriseFox commented 4 years ago

Fixed a minor detail in RedPacketDetailModal / List of Openers.

Better demonstrate it right here as I have no way to browse the proto's catalog nor diff the changes.

neruthes commented 4 years ago

Fixed a minor detail in RedPacketDetailModal / List of Openers.

Better demonstrate it right here as I have no way to browse the proto's catalog nor diff the changes.

Added.

neruthes commented 4 years ago

Update:

Red Packet plugin modal now has multiple steps when creating a Red Packet.

During the creation procedure (rendering as S.a.1), the modal content tells Plugin Modal Manager that requestConfirmationBeforeClose is set to be true.

With requestConfirmationBeforeClose being true, when the user clicks "Close" button in the AppBar of the modal, the modal will prompt a confirmation dialogue.

# Close Modal?

As requested by this plugin, a confirmation is required to close the modal.

[Cancel]  [OK]

neruthes commented 4 years ago

Any information for latest progress?

neruthes commented 4 years ago

Update:

Since now, Wallets are Personae are absolutely decoupled. All previously written coupling logics are dismantled. Updates will be pushed into the main article on a case-by-case basis.

General principles:

If a Red Packet is opened by one local wallet, it cannot be opened by another local wallet; it is considered to be bound to that particular local wallet. This connection will expire when the local wallet is deleted.
For operations which implicitly uses current Persona as the wallet, now the user must manually select a wallet before or within the operations.
Every wallet has its own Red Packet history list.

SunriseFox commented 4 years ago

Note: time is short

Maybe no time to make adjustments

neruthes commented 4 years ago

Update:

Since Facebook support is delayed and Wallet is decoupled from Persona, this modal will have 1 and only 1 button, "Twitter.com".

neruthes commented 4 years ago

Update:

Added:

AddWallet Section
Create Wallet
Backup Wallet
Import Wallet

AddWallet Section

Create Wallet

Backup Wallet

Import Wallet

neruthes commented 4 years ago

Note:

Only when current token is not ETH shall this piece of text (in parentheses) be shown.

neruthes commented 4 years ago

Question

How can the first wallet come into existence?

Possible Solutions

Require the user to create one when opening a Red Packet or creating a Red Packet.
Automatically generate one upon installation, with default name "Wallet ${walletAddress.slice(0,6)}".

neruthes commented 4 years ago

Note

When composing a post, if there is a Red Packet attached, only "Everyone" is allowed to be the recipients. The user may not manually change recipients. Switches and chips are disabled.

This restriction will be removed in future.

neruthes commented 4 years ago

Looks like many of this issue have been implemented and released. Why does this issue remain open? Should any pull request have closed this issue?

neruthes commented 4 years ago

Discussion Summary

Should have been closed by #672.

DimensionDev / Maskbook