uwu-labs / waifusion-site Goto Github PK
View Code? Open in Web Editor NEWThe new Waifusion dApp website in React (old website in v1 branch)
Home Page: https://waifusion.io
License: MIT License
The new Waifusion dApp website in React (old website in v1 branch)
Home Page: https://waifusion.io
License: MIT License
After the user purchases or burns a waifu to get one from the dungeon, they are presented with a confirmation popup after it finishes.
The component for this confirmation popup is revealComplete.js
.
The solidity function that reveals the waifus unfortunately does not return the waifus that were just revealed:
function revealWaifus() external
So implementing this won't be as straigtforward as using the response from that.
One way this could be achieved, is to get the list of waifus that the user owns, before revealing.
Then get the list that they own after revealing, then do a diff to find the ones that are new and show those.
Seeing as the ETH and BSC version of the Waifusion site is so similar, it might be a good idea to combine them into the same branch, then check the current URL the user's on (e.g. either waifusion.sexy or waifusionbsc.sexy) and adjust the RPC URL, dungeon contract address and a couple other things based on that. We could also have a global variable override for development purposes.
This would make the development workflow a lot easier as we wouldn't have to keep merging master into the bsc branch and it would generally unify the codebase.
Currently for alert popups like failed validation, we just use alert("message")
.
Instead we should build a custom alert popup with a dispatch that we can use to show it.
It should say that the user has 10 minutes
The dungeon contract code has been moved to https://github.com/waifusion/contracts - this website should only contain the website React code, which will basically just need us to delete the contract code here and move the contents of the client
directory to the project root.
Some users are committing but not revealing.
Then the reveal times out and they lose their Waifu.
A warning should be added to let users know that they will need to reveal shortly after the commit.
Any questions on the requirements, @0xKiwi is the best person to help :)
So instructions for integrating the wrapper, the wrapper has 4 functions.
https://github.com/chase-manning/waifusion-dungeon/blob/master/contracts/NFTXDungeonWrapper.sol
The contract needs to deploy a contract for every unique address, it does this in checkChild() and it is already run the first time a user tries anything, so don't worry about doing that.
But, this child contract is actually what spends the users tokens, and the address is generated based on some eth stuff called CREATE2, you can check what this address is by calling userWrapperAddr() returns (address) which returns the address that the user should approve WET, and their NFTX-WAIFU (0x0F10E6ec76346c2362897BFe948c8011BB72880F) tokens for.
Once it is approved, using it should be very straight forward and just use the commitWaifusWithNFTX(uint256 num) and revealWaifusWithNFTX() function.
When you build the gastby app it outputs the build data into the public directory.
Since this can be generated from the source code, this should be removed from source control.
Add an input field for buying and save result to state.
Validation should be added for not entering a value higher than 20.
The page will likely error out when all the waifus are gone.
Or at least it will look strange.
A page should be added for a nice display for when they have all gone.
Maybe a message reading something like All Waifus have been rescued from the Dungeon! Thanks Anon
A cool feature idea is to add a graveyard
tab that shows the Waifus that have been burned.
All the waifus that have been burned are owned by the same address 0x0000000000000000000000000000000000080085
.
So we can use this to get the list of waifus owned bu that address (similar to what we do on the wallet page, but with a hard coded address).
It could also have a count for how many Waifus have been burned and maybe even how much WET has been burned.
Currently, img
tags are globally set to margin-bottom: 1.45rem;
which will cause issues as the project expands - we should remove this and style images individually.
If you visit any page on https://waifusion.sexy, you'll notice that some resources take a while to load, and while they do, it causes them to be rendered to the page incorrectly for <1 second which creates an undesirable UX - not sure on the fix ATM, but I think it's something to do with Gatsby loading in the JS after the original style HTML - might also be related to Styled Components, not sure - will update this issue as I find more.
A video of the issue has been attached.
As Waifusion expands, we're needing to add support for other languages, namely Japanese, so we can expand our worldwide appeal. There are contributors ready to add translations, so I've created an initial i18n file at src/i18n/strings.js which exports a {[language_code: string]: {[string_name: string]: string}} object to map languages to their respective strings.
With this, we'll also need to add a new function or hook to make it easy to use the current language strings that the user has selected from the file. In a perfect world, we should just be able to include {lang.WAIFU_NAME_PREFIX}
, for example, in a component and it should work. Open to suggestions on what people think the best way of going about this is.
Remove the no longer relevant pre-sale interface and replace with information about Waifus in Dungeon.
A page or section should be added that shows the rarity of certain traits.
The data for this can be found in this JSON:
{
"HeadAccessory": {
"mask": 508,
"hairclip": 2928,
"hairbow": 2431,
"": 7717,
"covidmask": 84,
"catgirl": 1296,
"maidhat": 341,
"dogemask": 436,
"ears": 174,
"fox": 173,
"topdogehat": 252,
"wojakwacdonaldshat": 22
},
"headaccessoryStyle": {
"stonks": 172,
"btc": 603,
"pink": 606,
"eth": 655,
"": 9025,
"uni": 446,
"white": 1049,
"sushi": 345,
"black": 1036,
"doge": 526,
"nyancat": 353,
"blue": 610,
"tabby": 426,
"smug": 336,
"bunny": 174
},
"Top": {
"gym": 971,
"90soutfit": 1795,
"schoolgirl": 5403,
"90s": 1306,
"lingerie": 571,
"punk": 1636,
"swimsuit": 1481,
"catgirl": 735,
"pjs": 982,
"kimono": 801,
"vampire": 303,
"maid": 326,
"wacdonalds": 25,
"bunny": 9,
"overalls": 9,
"plugsuit": 9
},
"TopColor": {
"": 5141,
"red": 1719,
"black": 2289,
"blue": 1385,
"navy": 163,
"tabby": 245,
"brown": 1802,
"pastel": 817,
"pink": 501,
"white": 2210,
"solojazz": 9,
"yellow": 81
},
"Bottom": {
"schoolgirl": 10776,
"punk": 1633,
"catgirl": 732,
"90soutfit": 1814,
"kimono": 800,
"lingerie": 244,
"maid": 326,
"": 36,
"wacdonalds": 1
},
"BottomColor": {
"brown": 8814,
"pastel": 1633,
"tabby": 244,
"blue": 919,
"white": 1226,
"red": 895,
"": 1080,
"black": 1470,
"yellow": 81
},
"Wings": { "": 14722, "angelwings": 1312, "fairywings": 246, "mech": 82 },
"WingsColor": { "": 15050, "black": 491, "white": 821 },
"Tail": { "": 12271, "catgirl": 3681, "fox": 410 },
"TailColor": { "": 12681, "tabby": 1228, "white": 1229, "black": 1224 },
"HandAccessory": {
"": 12268,
"pepebag": 411,
"katana": 819,
"nunchucks": 820,
"sushibag": 267,
"unifan": 306,
"hand": 613,
"pocky": 818,
"pepedoll": 20,
"leek": 20
},
"Skintone": { "light": 5345, "mid": 5348, "dark": 5343, "void": 326 },
"BodySize": { "petite": 8183, "busty": 8179 },
"Background": {
"classroom": 3273,
"cherryblossom": 2126,
"cleanbedroom": 3125,
"house": 2605,
"pool": 2451,
"nature": 2128,
"messybedroom": 326,
"void": 328
},
"BackgroundStyle": {
"normie": 2291,
"": 9637,
"sunset": 981,
"meme": 1146,
"day": 2144,
"redwick": 163
},
"Face": {
"sinister": 909,
"opensmile": 2723,
"surprised": 756,
"cat": 1225,
"sad": 1058,
"doki": 1212,
"neutral": 1365,
"angry": 1658,
"pouty": 2272,
"araara": 1515,
"smug": 1364,
"ahegao": 77,
"yandere": 228
},
"Hairstyle": {
"twintails": 2647,
"bob": 2615,
"curly": 1632,
"buns": 1632,
"pixie": 2618,
"afro": 161,
"long": 2613,
"plait": 978,
"drills": 1304,
"afrobuns": 162
},
"HairColor": {
"black": 2625,
"blonde": 2624,
"pink": 1635,
"white": 1304,
"green": 1632,
"blue": 1635,
"special": 651,
"coral": 1632,
"brown": 2624
},
"Eyes": {
"yellow": 2780,
"green": 3434,
"brown": 3437,
"blue": 3434,
"pink": 2783,
"heterochromia": 494
},
"SpeechBubble": {
"baka": 325,
"": 14726,
"senpai": 325,
"oniisama": 497,
"daisuki": 243,
"anonkun": 245,
"pogchamp": 1
},
"Socks": {
"schoolgirl": 13519,
"punkoutfit": 1728,
"bunny": 297,
"lingerie": 504,
"": 314
},
"SocksColor": {
"white": 1244,
"red": 231,
"": 12202,
"black": 1230,
"brown": 1203,
"pastel": 252
},
"NeckAccessory": {
"": 12730,
"chokerpunk": 1275,
"catgirl": 2356,
"hairclip": 1
}
}
The users wet balance should be checked while they are setting up the burn.
If they do not have enough to do the commit, it should not allow them to do the commit, and should show a meaningful error/warning instead.
Elements all alight oddly on mobile or similar sized screen
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.