Categories
Apps Crypto

Xamarin & Metamask Mobile

NFT Gallery is going from strength to strength. One issue I have with it though is the user having to paste their Ethereum address into the wallet page. As anyone can paste any public wallet address, you can have anyones collection on your phone. So I have been thinking how to integrate Web3 tech into the app.

Web3 means cryptocurrencies, blockchain technology and the one problem is that it mostly lives in web browsers. Most people who use Ethereum access it via the Metamask browser plug in. In the mobile world you can’t really have plug ins and so Metamask exists as its own app, Metamask Mobile (or MMM for short). This lets you manage your accounts and interact with Dapps via the built in browser.

So how do you get two apps to talk to each other? The answer is deeplinks. MMM has a couple of deeplinks that allow you to trigger things in the app. One is to open a Dapp (or a website). The trick is to open a webpage in MMM, get the users Eth address and then trigger a deeplink back into your app. Luckily I know a smattering of Javascript and had played with deeplinks on a previous project.

Deep link communication loop

First of all you create a web page on an https web server. Mine is here. The gist of it is that Metamask injects a javascript object called “ethereum” into the web page and the code interacts with that. Debugging it on the desktop was quite easy but in the app, it worked slightly differently. To debug you need to build your own debug version of MMM and remotely connect from the desktop to view your javascript. I got it working though.

To call MMM and get it to run your code you do something like this in c#.

await Browser.OpenAsync($"https://metamask.app.link/dapp/www.redfivesoftware.com/Web3Metamask.htm?return=http://" + AppName);

This opens a url on the device, which opens the deeplink into the app, which in turn opens your web page in the browser tab. In this case Web3Metamask.htm. Currently I pass one parameter in which is the start of the url that calls back to my app.

Then it is simply a case of overriding the OnAppLinkRequestReceived in your App class and processing the URI that was passed back into you. 

    protected override void OnAppLinkRequestReceived(Uri uri)
    {
        Logger.Info(uri.AbsolutePath);

        string url = uri.AbsolutePath;

        var bits= url.Split("/",StringSplitOptions.RemoveEmptyEntries);

        switch (bits[0])
        {
            //{nftgallery:///address/0xce41b49d28800de3ba9925f68d82129dfc4b870b}
            case "address":
                string address = bits[1];
                App.SettingsViewModel.UserAddress = address;

                break;

            default:
                break;
        }

        base.OnAppLinkRequestReceived(uri);
    }

And now you have your eth address. In the next post I will show how to get details of NFTs from OpenSea using their API.

Categories
Crypto

Types of NFT

There has been a lot of press about NFTs recently and some people think that an NFT is just an NFT and if you buy one you will make a profit. There are lots of different types of NFT though and some have more worth/value than others.

All NFTs have the same basic structure. They are a smart contract on the Ethereum blockchain and they can be assigned to a wallet. The only way to move it is to assign it to another wallet.

De-Fi

Decentralized finance is an area that is taking off at the moment. The idea is that it builds crypto banks and exchanges in a decentralized manner. That is ones that are simply smart contracts living on the internet as opposed to companies based in countries with legal implications. These produced the first popular NFTs in the form of tokens that in exchange for liquidity gave you some discount or advantage.

Then there is the whole SushiSwap thing which I have never really got my head round.

Art

This is my area of interest and the area that really hit the headlines recently. People are saying that NFT are a new form of art when what they are is a new form of buying and selling art. In the old days, you sold a picture and that was all you saw of the income from that picture. In the NFT art world, smart contracts have artist royalties built in, so each resale trickles a few % back to the original artist. Some of the NFTs have the actual artwork “built in” while some are essentially simple receipts saying you paid someone for something on this date.

Collectibles

When I was a kid I got through a lot of bubble gum collecting trading cards for my favourite films. then when I grew up I discovered the cult of the vinyl toy. Both these things are collectibles. NBA has something called Top Shots which is the modern hi-tech equivalent of trading cards. You buy packs of “moments” which are little video clips and some are rarer/worth more than others. It is worth noting that Top Shots is running on its own blockchain which is controlled by NBA. This means you can only buy and sell on their markerplace.

The you get things like CryptoPunks and CryptoKitties. They are just things that look cool and fun to have in your collection. You can’t really do anything with them apart from buy and sell them.

Some people also saw the invention of smart contracts as a way to write games the ran decentrally on the web. A lot of these were collectible card games like Magic: The Gathering and Yu-Gi-Oh. You buy packs of cards and fight against other players.

Virtual Real Estate

The final area is 3D virtual worlds like CryptoVoxels and Decentraland. I tend to label this area “Third Life” as it feels a lot like an extension of the old “second Life” game. You buy a plot of land, build a virtual house and populate it virtual nik-naks that people have made and sold. That’s it.

So there you have it, seceral distinct use cases for NFTs. The only problem with all these things is that (in the short term at least) their success is pushing the price of Ethereum up and that is in turn pushing up Gas fees. This means it is harder to actually do anything with these NFTs. It now costs nearlt $100 to mint an artwork and up to $1000 to do any De-Fi transactions.

There other blockchains out there such as Wax and Neo which do smart contracts. They don’t have the momentum though to overtake Ethereum.

Categories
Uncategorized

Renaming an App

Earlier this week I decided to rename one of my apps. OpenSeaGallery was a good name to start with but it seemed to be giving people the impression it was an official app for OpenSea. It got a few bad review on android for things that were nothing to do with the app. Thing is, once an app has been around for a while there are references and links to it everywhere. So in this post I will look at the places you need to change the apps name.

Code

This is the easy one. For android you just change one of the attributes in the MainActivity and for iOS you change a couple of strings in the info.plist. all you are doing ischanging the string that appears under the icon on the phones home screen.

You should also change any references to web pages and social media accounts that use the old name.

Stores

Of course you will first have checked that there are no opther apps with the name you want to use in either store. For iOS you simply create a new version of your app and change the name in the “App Information” tab. For android you gointo the Google Play Console and change the name in the “Main store listing” tab of the “Store Presence” section. This will take immediate effect. You don’t even have to add a release.

Website

My website is a bog standard wordpress website. Each of my apps has a separate page based on the name of the app. Obviously that had to be renamed and updated to reflect the new app name. Now this leaves the matter of any other p[ages on the internet that link to that page. In the end I installed a redirection plug in and set up a redirect from the old page name to the new one.

Socials

My apps also have Facebook pages that needed renaming. That was fairly simple.

Categories
Crypto

Buying NFTs

Everyone is doing it, everyone is hopping on the NFT bandwagon. What is an NFT? In short it is a virtual thing that you buy, you can say you own and that you can sell afterwards. It has something to do with blockchains and is perfectly safe if you know what you are doing.

Buying

To buy and NFT you need some magical internet money. This is called Ethereum. You also need a wallet to keep your money in. You can buy Eth at a lot of different websites but the easiest way is to use Metamask. This is a Chrome browser plug in that lets you buy, send and receive Eth and acts as your username/password for any sites you will be visiting.

You could also use any of the following wallets. Fortmatic, WalletConnect, Coinbase Wallet and MyEtherWallet, but I haven’t personally used them.

Metamask

Once it is installed click on the little fox icon, set up and account and buy some Eth. Then back up your accounts “seed phrase”. With crypto, rather than have a username and password, you get assigned an address and a private key. You need both to things but if you forget one, there is no “forgot password?” feature.

Shopping

You have your money, so lets hit the shops. There are lots of them out there but the big ones are SuperRare, Rarible, NiftyGateway, MyBae, Makers Place, Known Origin and Async Art.

The sites selling NFTs all work the same way so lets look at Rarible. To buy something you have to first connect your wallet to the site. Click “Connect Wallet” in the top right and choose your wallet. Some windows will pop up asking if you wish to connect the two things together. You may be asked to “sign” things, which is their way of getting you to click ok.

Once signed in you may have a profile you can set up with name and avatar, etc. Again this usually involves you signing something, just to prove it is actually you.

Once that is done you can look for things to buy. There is art, virtual real estate, trading cards, business things, Cryptokitties. You name it.

Buying

Once you have found something you like, you click the buy button. Some things go to auction and some have a “buy now” facility. We will assume the latter. Again some windows should pop up asking you to sign things but watch out.

Fees

Most of the signing has been free so far but when you come to make the purchase there will be fees. As of writing this, the cost of buying and NFT is the price of the NFT plus $70. So if you are buying a Pepe meme for $20 you will end up paying $90 in total. Whether you still want to buy NFTs after that is up to you.

Viewing

Now you have your NFT, what can you do with it? Well, the most obvious thing to do is look at it. You can view it on your computer screen but you can also access it on your phone. Nft Gallery is an app for iOS and Android that syncs with your Ethereum wallet and lets you view, collect and cast your NFTs.

Categories
Crypto

Creating NFTs

On the back of the cryptocurrency boom, NFTs are currently all the rage. It is a catch all name for something that can have a lot of different uses. I have been dabbling in the #CryptoArt space for a year now and have exhibited and sold a few bits. It is a confusing world so I thought I would knock up a quick guide to making your own NFTs.

Get some Ethereum

The first step is to get some Ethereum. There are lots of ways to do this but I guess the easiest way would be to buy some straight into Metamask. MetaMask is a wallet for keeping your magic internet money in so it makes sense to deposit it straight into there. It is a browser extension so install it in chrome, click the little fox icon and explore it. The next two steps are

  • Buy some Ethereum.
  • Back up yor wallet.
  • Back up yor wallet again.

Did I mention backing up your wallet? That wallet address thing is your identity from now on, so if you lose access to it you lose anything in it. There is no way of resetting you password or anything like that.

Pick a Website

There are many places to create (or”mint”) your art, but the big ones are SuperRare, Rarible, NiftyGateway, MyBae, Makers Place, Known Origin and Async Art.

It is worth noting that some are like proper art galleries where you are vetted and can only create if you are accepted by them. These normally require some sort of background check and video introduction. Some are more like copy shops where anyone can mint anything they like.

Mint your art

Once you have found a site you like, you shoudl join it. See the post Buying NFTs for more details on joining a website. The jist in you link your ethereum wallet to the site and use that as your username and password.

Next get your artwork. This must be 100% your own creation. It can be an image, video, song or some other sort of thing. If the image is big (or it is an mp3, etc) then it is good to have a thumbnail. This can be average size as this is what is usually displayed.

Next click the “create” button. Give it a name and a description. Your first choice is to mint a single or a multiple. There is only one Mona Lisa which makes it rare and valuable. If you just want to get your name out though, do a multiple of 50 and give them away. If you are doing several related pieces, then you can give them a Collection Name, otherwise they get assigned to the website you mint them on.

You can give it proerties but they are only really used for things like trading game cards. You can set a royalty. This is how much of future sales of that NFT go back to you. Finally some let you set a “buy now” price. If you don’t do this then it goes into an auction where peole can bid on it.

Finally you hit the “create Item” button and it mints your NFT. For a price. Your wallet will pop up a few message boxes asking you to sign things. One of these will include the fees for the minting. Warning, these can be high. It may cost you $70 to mint something that costs $50. In which case you are going to lose money. It is worth keeping the maths in mind when you come to this stage.

Viewing your NFT

Now you have your NFT, what can you do with it? Well, the most obvious thing to do is look at it. You can view it on your computer screen but you can also access it on your phone. Nft Gallery is an app for iOS and Android that syncs with your Ethereum wallet and lets you view, collect and cast your NFTs.

Categories
Apps

Dark Mode for Xamarin Apps

This week I have mostly been trying to get Dark Mode working with one of my Xamarin Forms Shell apps. This is the new feature available on most mobile OSs where the screen goes white on black (rather then black on white) to reduce glare at night. There is no “out the box” solution but after much googling and a bit of fiddling I found something that works.

There were three main changes I had to make to get it working.

  1. Modify the Shell part of the app.
  2. Modify the content of the various ContentPages.
  3. Modify the splash screen.

Starting with points 1 & 2, I referred to these two posts for their approach. Read them but bear in mind I had the following issues. The general idea is that you have two resource dictionaries, one for the light screen and one for the dark screen. The elements have the same names so you can swap them over at run time and it applies the new colours to the existing controls.

Shell & ContentPages

I am quite new to using StaticResources. Hot Reload is great as you can edit the XAML and see it update on the device. This light/dark approach means that the resources are compiled and switched at runtime. This means Hot Reload doesn’t work as the XAML doesn’t have a direct “live” link to the app. This just means you have to get it all looking nice with the XAML as part of the app or page and then copy it to the light/dark ResourceDictionary when you have finished. You might also want to separate out and DataTemplates into another ResourceDictionary that uses the other two.

I also found that this process didn’t work for the Shell objects themselves. by that I mean the UI that presents itself when the app starts up. Navigation bars and Tab bars, but not modal pages. In these cases I defined the Shell colours like this.

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:views="clr-namespace:GalleryApp.Views"
        BackgroundColor="{AppThemeBinding Light=SteelBlue, Dark=Black}"
        ForegroundColor="{AppThemeBinding Light=White, Dark=White}"
        TitleColor="{AppThemeBinding Light=White, Dark=White}"
        DisabledColor="{AppThemeBinding Light=Green, Dark=Green}"
        UnselectedColor="{AppThemeBinding Light=LightGray, Dark=DarkGray}"
        FlyoutBackgroundColor="{AppThemeBinding Light=White, Dark={OnPlatform Gray, iOS=Gray, Android=LightGray, UWP=Gray}}"
        x:Class="GalleryApp.AppShell">

While in the content pages definitions it was used as

<Style TargetType="NavigationPage">
    <Setter Property="BarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
    <Setter Property="BarTextColor" Value="White" />
    <Setter Property="BackgroundColor" Value="{StaticResource BackgroundColor}" />
</Style>

Also occasionally I needed a DynamicResource instead of a static one. Half a template would update and half wouldn’t. Also it pays to check ALL of your screens work.

Splash Screens

These aren’t essential but are nice to have. Especially if your existing splash screen is light and bright. For this I mainly used this blog post as a reference. It explains everything you need to know , but as I had done a splashscreen before this was fairly familiar. The only thing I had trouble with was editing the iOS storyboard. I ended up adding the ViewController in XCode rather than in Visual Studio.

Categories
Uncategorized

Build Discrepancies

I have just released version 1.0.2 of OpenSeaGallery. If you looked you will see the Android version was out about a week before the iOS one. I has them both set up in The AppCentre and when I tried pushing the new versions, iOS gave me some fairly serious errors.

Now you have to upload the first version into the Apple app store via the visual studio uploader. It only really handles updates and not initial releases. I had updated a few nugets and stuff like that but the app store sent me an automated email stating I was using some private APIs and UIWebView was depreciated. None of my changes were that drastic and the first version had gone through fine. I swapped out the Chromecast library for a better one and updated all the nugets again. I re-submitted it about ten times and it still came back with that error.

Then I thought, visual studio uploaded the first version fine, so what about the second? I fiddled about with my profiles and certificates and what do you know? Version two uploaded fine. It is now available on the store. This means there is something about my project that causes the AppCentre to build it differently to visual studio.

Where do you start? I guess it must be something in the project file or the references that is causing the issue. I tried googling it and making changes like this but to no avail. I think my only option is to rebuild the iOS project file again from scratch, comparing it with projects I know that do work.

Categories
Apps Uncategorized

Adventure Game Engine

Many years ago I wrote a “choose your own path” adventure game for the iPhone. Its engine was compact, simple and very flexible, even though I wrote it in an afternoon. The game was rubbish and I always thought it deserved better.

Apparently a few years later I rewrote it in .Net possibly with an eye to makeing another app for it. Anyway I think the public probably have more use for it than I do now, so I am making it freely available.

At its heart it is a bunch of “pages” with “options” that take you to other pages. You could write a simple game with just that. It also, however, has variables. These are things like flags, text and numbers. You can display these in the game (“your name is Shaun, you have 6 pickled eggs”) and you can also use them to control what text is displayed and what optiuons are available to the user. Add in the ability to randomise things and you have a game that never plays the same way twice.

Another idea is that the same game can have different front ends. You can play it in a DOS box with coloured text and keyboard input but play it on a phone (iOS and Android coming at some point) and it will be fancy coloured HTML with hyperlinks, pictures and buttons. You could probably even stick it on a web site.

Currently I am just finishing the basic functionality. This includes

  • Load
  • Save
  • Colouring text
  • “Hot reload” while editing
  • Maybe some sort of validation for game editing
Categories
Apps Uncategorized

Why I Wrote WebcomiX

I have always been into comics and computers. Webcomics are a nice combination of the two. I remember reading McClouds “Understanding Comics” and the high tech sequel “Reinventing Comics” when they first came out. Shortly after that I discovered XKCD and the rest is history.

The thing is though, that was 20 years ago and webcomics havn’t really progressed. CDs and DVDs gave way to streaming, talking to peole gave way to social media and web comics are still first/last/prev/next with a homepage that shows the latest episode. I hate to say it but any media that hasn’t advanced in 20 years is a evolutionary dead end, and that includes webcomics. And no, having a button to share it on facebook is not a major advance.

any media that hasn’t advanced in 20 years is a dead end

Me

Now some will say that “if it ain’t broke, don’t fix it”. That is fine but webcomics are broke. The main problem is reading a serial. You have a website that insists on showing you the latest episode even if you are five episodes behind. That means going back till you find the place you left off. A few webcomics let you save yours spot but not many. I am guessing this is a throwback to when the “tin foil hats” were wary of having cookies and javascript enabled on their computer. Those two technologies ARE the internet these days.

Which brings us to the second problem. There is no such thing as a standard webcomic site. Most are hand coded, some are based on wordpress and some are done through “publishers”. Where is the menu, where are the navigation buttons, can I hide ALL those comments? Some are one story, some are lots of “chapters” or “books”. When I relaunched “The Nurbs” a few years back I looked at wordpress and couldn’t even get the webcomic friendly theses to install. In the end I wrote my own. Again.

Then there are the strips themselves. Computer screens are landscape and phones are portrait. Most webcomics seem stuck in a past where it is either comic book dimensions or newspaper (3 frames) funnies dimensions. Not sure what Scott would make of that. Of course, there is no money in the webcomic as such. It is all about the kickstarter for the printed collection or getting syndicated in old media. The format is designed to suit the authors dreams.

So I am guessing the average fan has a folder in the browser bookmarks full of comics and they update the bookmarks as they read each episode. Then somehow they have to sync that with their RSS feed which tells them when new episodes are out. It is messy. It is why I wrote webcomiX.

It started off as a personal coding project which I released into the wild as I thought others may enjoy it. They did. You can browse the Library of webcomics and add the ones you like to your Favourites screen. This lets you read the comic with big clear navigation buttons, while keeping your place in serials AND notifying you when new episodes are out. What’s not to like.

I have tried to do right by the comics. I will remove it if you ask and I contacted as many of the creators as I could to tell them about the app. It shows the whole page for the comic so that should count to their advertising turnover. You see THEIR ads and THEIR shops and THEIR Patreon links. I have one ad in the app on the Favoutrites page which doesn’t make any money. Fifteen years of apps and blogs and I still have not reached Googles minimum payent requirements. At least when apple did ads I could just about break even.

Categories
Apps Uncategorized

All About The App

By the look of it, Comic Chameleon, the only other web comic app out there has called it a day. There has only really been them and WebcomiX and now they are gone.

From what I gather, they took a fairly different approach to comics than we did. They scraped the comics from the artists websites and in return promised a % of revenue. I don’t know how many active users they had but to pay themselves and 100+ comic creators must have been tricky.

One thing that we can learn from them is that if you are in the app market space, then it is ALL about the app. You can have brilliant ideas and the best of intentions but if the app isn’t front and centre then you are lost.

To begin with they started off as an iPhone only app. Not only that but they picked the wrong technology to make their app. There is no excuse for not supporting tablets these days. However when you installed it on an iPad you just got the system 2x blow up of the iPhone version. I am guessing they used one of those iOS/HTML/CSS hybrid systems that were popular in the early 10s. I am also guessing they didn’t have an in house programmer as they only did ten updates in seven years.

Then five years ago they did a Kickstarter to raise money for the Android app. Whatever tech they were using obviously wasn’t cross platform. They now had two apps to maintain and add features to. Even five years ago it would have been possibly to write an app that was both modern and cross platform, rather than a pure android one. they should have bitten the bullet.

Finally their app may have been a bit too high maintenance. Like comixology, it did the thing where you could read a comic one panel at a time. I am guessing someone spent a lot of time counting panels and adding it to the database. This also made the app a bit confusing as different things happened depending on where you swiped or tapped.

I will admit WebcomiX has got a bit lax at times. However there is a new version of iOS and Android every year that usually breaks something. There are new screen sizes and UI paradigms (?) to consider. There are even new things that your development tools add that can be used. The upcoming 3.1 release of WebcomiX builds on a lot of features added to Xamarin.Forms 4. One, it is a new version and you have to move to it at some point. Two, the deep linking means you could launch comics from notifications and the Home search bar. No one asked for it but they are getting it.

Still, it is a shame to see another app bite the dust after all these years. While we did the same thing, I don’t think we were ever competitors.