[desktop-wallet][1000 USD] Avatar System

[ItsANameToo]

About This Project

Improve the Avatar System to give additional options for avatars. These will be selectable from the Avatar selection screen and will be the primary options.

Options

File upload A simple file selection from the current computer to allow users to use a photo or picture to be used as an avatar. A UI is needed to be able to crop/zoom/rotate images so they fit the avatar area.

Plugin capability/interface The ability to have a plugin fetch an image via a URL to present as an avatar. This would also need to be a cacheable image in the event that the service is offline or no longer available. To refrain from doing unnecessary requests, it only updates on the first launch of the application. Ideally, this is using an interface with the plugin sandbox so that the plugin system itself can deal with caching of new designs.

The difficulty level of this bounty is estimated as advanced. The reward for completion of this project is set at $1000 (paid in ARK Ѧ).

Requirements for completion:

• Maintain the existing avatar functionality as a backup, as it also allows custom avatars via a plugin
• Implement the two options as described above

Necessary Skills:

• Electron
• Vue.JS
• Tailwind
• Jest

Note Tests are required for any new functionality

Applying For This Project

To apply for this project, please read more about the process below before leaving a comment with the following:

1. A brief proposal relating to the project (e.g. Your experience, how you wish to approach the project, estimated time to completion etc.)
2. Your name and a contact email address (or another form of contact, eg. Slack username)

The Process

If your application for the project is successful we'll contact you using the details you provided, assign the project to you and mark it as in progress. You'll be required to check in regularly with the ARK team to discuss progress and development. We'll also use these updates to ensure that the PR is being completed to a satisfactory standard. If we determine that the project isn't being completed to a satisfactory standard and that this cannot be achieved with minor amends or within a satisfactory timeframe, we hold the right to dismiss the PR and reopen the project to other applicants.

To deliver the project your PR must be submitted to the respective repo. ARK repo maintainers will then leave comments and request amends if necessary. All amends requested by maintainers must be resolved before completion, and all projects must comply with our code standards and contribution guidelines (found at: https://docs.ark.io/guidebook/contribution-guidelines/). After you've submitted your project, we'll review against the brief to ensure it meets the criteria and deliverables.

Once your project is approved as complete a member of the ARK team will follow up to discuss payment. You'll need to submit an invoice and payment will be issued in (Ѧ) ARK (equivalent to the USD reward value assigned to the project), sent to an address of your choosing. We may need to request additional information regarding your identity in order to comply with our own internal Know Your Customer (KYC) guidelines.

If you're unsuccessful in applying for this particular project, please consider applying for others. Thanks for your interest and good luck with your application!

[Highjhacker]

I'd like to apply for this T0. I already started to work on it a few days ago and already got some prototype working at the moment. This project would require a proper design from team that I would implement. The time required for the completion of this project shouldn't be more than two or three weeks, at this point I just need to finish the cropping functionality, implement a proper design and write tests.

Jolan Beer / @Highjhacker

[dq-mlnck]

With this issue being open again I'd like to apply to fix it. I have a degree in design but have spent the last 13 years focused on development with full time jobs while using projects like these to help keep my design skills honed. The languages required are well within my wheelhouse, and I would have no problem running the UI by the Ark team for approval or updates. And I'm confident I could have this turned around in 18 days.

This seems like it would be the perfect way to get familiar with the Ark codebase! Jack Melnick - @mlnck [Ark slack]

D'oh - I just realized I was logged into a very sparse github account when i posted this. I'm not sure if it would make a difference or not, but here is one that I've used far longer, if not for more disassociated projects. https://github.com/mlnck I would be happy to answer any questions you had as well.

Thanks again for the consideration!

[ItsANameToo]

Hey @dq-mlnck, thanks for the interest in this issue. We'll need a little more time to get to a final decision, due to some other priorities at the moment and having to check again what the previous progress on this issue was. Once that's settled, we'll let you know more!

[adamrefaey]

Hello, I'm Mustafa Refaey. I'm a Senior Full-Stack Developer with skills in Blockchain/Backend/Frontend. I've been in the blockchain community for over a year, learning; And I have, recently, graudated from ConsenSys Academy Blockchain Developer Bootcamp. I've also developed a DApp: https://github.com/mustafarefaey/PrivateStamp

I've had a quick inspection of the code and I believe this is how I should approach the solution:

For Get operation: Update availableAvatars method in SelectionAvatar component to add the cached image (image path) which should be saved in the store.

For Set operation: Make a new component that handles manipulating (creating + cropping) an image and add it to availableAvatars method in SelectionAvatar in an object with the component property set to its name as a string to be inject into the InputGridItem component.

This component should have a button (with upload icon for example) as a trigger of a modal

The modal should have two methods of retrieving an image: 1) via a URL (text input) 2) via a local file (file input) After retreiving the image in either way and probably we'd have it as a Blob/Image/base64 encoded; we can manipulate it either using a 3rd party package like vue-cropperjs https://www.npmjs.com/package/vue-cropperjs Or we can build the functionality from scratch.

After manipulating the image we can save it in the filesystem, probably in the user's home directory to keep it between installations of the wallet, and save the path in the store (So we won't need to fetch again ever).

As for the tests, We can start with the test `when the button is clicked the modal is open and its elements are visible, and then later on add more tests.

Estimated time: 3 weeks. Actual work will take much less than that, but I'm committed to other projects.

You can contact me via my LinkedIn: https://www.linkedin.com/in/mustafarefaey

[ItsANameToo]

@dq-mlnck @mustafarefaey apologies for the delay. We've looked into the existing code that was created the first time the issue was assigned, and came to the conclusion that it's in a nearly finished state. There are some tweaks necessary, but it's no longer in a state that constitutes a bounty to further implement it. Therefore we'll be closing this issue, and hope to see you apply for any of the other open issues. In addition you can also propose a project yourself, or help out with smaller PRs and earn bounties along the way. You can read more about this at https://blog.ark.io/ark-development-and-security-bounty-program-a95122d06879