#patching discord's UI

1 messages · Page 1 of 1 (latest)

rugged cedar
#

thread about patching discord's UI

#

as ven said, discord wrote some code that uses react

react is a library that takes a tree of components, and translates them to HTML (well, not really, that is react-dom)

#

we can modify that code before it is loaded

#

hence why patches require a restart

#

they can only be applied at startup

night frost
#

Okay so how so how do I find the actual Data I want from the html I want

rugged cedar
#

you can modify a function in any way you want, since it is just a string

#

you don't find data from the html

#

the html is the output, not the input

night frost
#

Can I find the input by knowing the output ?

rugged cedar
#

yes

#

but not programmatically

#

you have to find it by hand

#

and then make the patch

night frost
#

I see

rugged cedar
#

it is a bundle of modules that discord has

keen escarp
#

for the love of god do not look at that

rugged cedar
#

patches have 3 key things

find, a plain string that determines what module to modify from the bundle

keen escarp
#

you can find the module with react devtools element picker

rugged cedar
#

match, regex that matches the exact substring you want to edit

#

replace a string or function that replaces that substring you matched

night frost
#

This is what I know rn

image-3.png image-4.png image-5.png
rugged cedar
#

yes the react devtools may help finding what component is rendering a particular element

but sometimes what you want to patch is not directly responsible for rendering an element

night frost
#

So I need to find out what's actually rendering the unordered list then patching the code I want it to do with replace?

#

Like adding a modal with search and stuff?

rugged cedar
#

I can show you in a stream what the process is

#

no need to have mic

night frost
#

Could you send me a video?
I am on mobile and I need to walk my dog.
As for my lack of knowledge I am just going off old js Knowledge, Java and intuition.

rugged cedar
#

sure, but with a video you can't do live questions, if that ain't a problem then I'll make one

night frost
#

I would appreciate if you could show a few versions

#

Like something similar to what I am looking at but not that

night frost
night frost
rugged cedar
#

Timezones be like

night frost
#

timezones do cause problems

night frost
night frost
rugged cedar
#

the timezones align, and I am free for the next 2 hours

#

I am kinda too lazy to make a video

#

can I just stream it?

#

we'll both be muted

night frost
#

rooThink sorry I was a bit busy with wii stuff

night frost
night frost
night frost
night frost
# 

            className: V.friendsButtonContainer,
            children: [(0,
            i.jsx)(U.Qj, {
                interactiveClassName: l ? V.friendsBadge : void 0,
                selected: t,
                route: k.Z5c.FRIENDS,
                icon: E.FriendsIcon,
                text: H.Z.Messages.FRIENDS

would this be what I am looking for?

I just found this in the section and it seems to be pretty important

#

the main class is

V.friendsButtonContainer

with the children variant being

H.Z.Messages.FRIENDS

# 
let {selected: t, ...n} = e
          , s = (0,
        o.JA)("friends")
          , r = (0,
        d.e7)([P.Z], ()=>P.Z.getPendingCount())
          , {enabled: l} = N.w.useExperiment({
            location: "Friends Tab"
        }, {
            autoTrackExposure: !1
        })
          , [c,u] = a.useState(!1);
        return (0,
        i.jsxs)("div", {
            className: V.friendsButtonContainer,
            children: [(0,
            i.jsx)(U.Qj, {
                interactiveClassName: l ? V.friendsBadge : void 0,
                selected: t,
                route: k.Z5c.FRIENDS,
                icon: E.FriendsIcon,
                text: H.Z.Messages.FRIENDS,
                onMouseEnter: ()=>{
                    u(!0)
                }
night frost
#

So..

night frost
#

Ideas?

night frost
night frost
#

please send me an example when you can, thanks