Our mission is to make Americans better protected, and to do so we use data science and AI to transform the way employers and their workforce choose and use their health insurance and benefits - without the hassle

Nayya

Recently while working on a project, I had to create a functionality where users can download an excel file consisting of some data. In this process, since I am a big fan of E2E Testing with , I decided to write a test suite that could make sure that the excel is being downloaded correctly and also consists of the correct data that our users would expect. Cypress.io This article assumes a basic understanding of cypress. Disclaimer If you haven't tried e2e testing with cypress before, I would highly recommend skipping over to the section and following some of the getting started guides. References 📦 Installation 1) Assuming you have a repo named , create a new folder in it named . dashboard-ui e2e 2) into that folder and execute the following commands inside it cd npm init
npm install cypress --save-dev 3) Update the project’s scripts by opening and updating your scripts to the following: package.json : { : , : } "scripts" "cy:run" "cypress run --headless -b chrome" "cy:open" "cypress open" 4) You should also see some default folders and files created by cypress for you after you have installed cypress. 5) The test that we will write will go inside folder. integration ⚙️ Functionality For the sake of simplicity, let's say our application only has one feature where users can click on a button, which can download an excel file comprising of some data in it. download template On click of the download template button a file gets downloaded which looks something like this: Demo 🧪 E2E Testing 1) Create a new file inside folder with the name . integration ExcelDownload.spec.js 2) Inside this file our test would first start with checking for existence of our button and then we will click on it. cy.get( )
  .should( )
  .click(); "[data-test-id=export-template-btn" "be.visible" 3) After clicking on it, the file should ideally have been downloaded and now we need to somehow read that file and check if it exists and also check if it consists of the right data in it. 4) To do that, we will first need to install another npm package which can parse the excel and convert it to a json npm install node-xlsx --save-dev 5) After this inside your file we will create a new task plugins/index.js xlsx = ( ).default; fs = ( ); path = ( ); .exports = { on( , {
    parseXlsx({ filePath }) { ( { { jsonData = xlsx.parse(fs.readFileSync(filePath));
          resolve(jsonData);
        } (e) {
          reject(e);
        }
      });
    }
  });
}; const require "node-xlsx" const require "fs" const require "path" module ( ) => on, config // `on` is used to hook into various events Cypress emits "task" return new Promise ( ) => resolve, reject try const catch This function will parse our excel file and convert it to json. 6) Finally let’s complete our test for excel file download data = [ , , , , , , ]; cy.get( )
    .should( )
    .click(); cy.wait( ); cy.parseXlsx( ).then( { expect(jsonData[ ].data[ ]).to.eqls(data);
  }
); // data to check against const "id" "config_sku" "simple_sku" "fallback_type" "field" "value" "command" // check for existence of the button on the ui and then click it "[data-test-id=export-template-btn" "be.visible" // arbitrary wait so that the download can complete 2000 // call the parseXlsx task we created above to parse the excel and return data as json "/Users/Downloads/overrides-template.xlsx" => jsonData // finally we write the assertion rule to check if that data matches the data we expected the excel file to have. 0 0 7) With this we can be sure that our excel download functionality is working as expected. Test Execution 8) The only caveat here is how do you know the download path for your CI/CD Pipeline or how can you change that path to something else. The solution to that is built into cypress. Again inside file we will create another task. plugins/index.js on( , (browser = {}, launchOptions) => { downloadDirectory = path.join(__dirname, , ) (browser.family === ) {
   launchOptions.preferences.default[ ] = { : downloadDirectory }
  } launchOptions;
}); "before:browser:launch" const '..' 'excelDownloads' if 'chromium' 'download' default_directory return Here we are changing the default directory of download to a directory named inside of cypress folder. excelDownloads https://docs.cypress.io/api/plugins/browser-launch-api.html#Change-download-directory 💡 Conclusion In conclusion, E2E tests are really important for every app and you should write one too because this is the closest you can get to test how an actual user will use your application. And as says: @tlakomy Sleep better at night with e2e tests and cypress.io 👯 Share this article if you found it helpful! You can follow me on twitter for more updates. @VivekNayyar09 Also please don't forget to maintain social distance to prevent the virus from spreading and wash your hands regularly. Stay safe and stay at home. 🚀 References https://softchris.github.io/pages/cypress.html https://docs.cypress.io/guides/getting-started/installing-cypress.html#System-requirements https://dev.to/tlakomy/sleeping-better-at-night-with-cypress-io-59m2 https://blog.logrocket.com/how-to-write-useful-end-to-end-tests-with-cypress/ Previously published at https://dev.to/viveknayyar/e2e-testing-of-excel-downloads-with-cypress-21fb

E2E Testing of Excel Downloads with Cypress

Hola people!!! 🥑 It’s been a while since I have written a blog and now since most of us are working from home, the time that used to go in commute is now saved and I thought why not utilize this time and write about my recent experience of fixing a security vulnerability. So if any of you in the recent time have seen something like this image below and have no clue how to fix it then this article is for you. When I saw it, I had no clue either but with some research I could fix this. 🔬 Problem: So what this means is one of the dependencies in your has some security implications which can be exploited by an attacker and can cause problems for you, your product or the company you work for. package.json For example: https://snyk.io/vuln/npm:eslint:20180222 This vulnerability could have caused a Regular Expression Denial of Service 💡 Finding: In order to find potential vulnerabilities in your repo, you can either do 1) npm audit — which should show you an output like the following image: 2) Github security policy can also notify you — something like the following image: Today when I started working I had to deal with this error where and were being reported as security vulnerabilities. acorn minimist 🎉 Solution Solution to this problem is in steps:- 📦 npm update 1) This is the first thing you should do and it's the simplest one too. Run npm update — https://docs.npmjs.com/cli-commands/update.html Delete your package-lock.json file or for yarn users, delete your yarn.lock file. In an ideal world this would work, but there might be some dependency which does not follow semver and might get updated too. So a better solution here would be to only delete the lines corresponding to the vulnerable package in your package-lock.json(or yarn.lock) file. Run npm install again In an ideal scenario, this should have upgraded your dependencies to the next semver version and those libraries might have already fixed the version of there transitive dependencies. 🔭 npm audit 2) But if that did not fix your issue, which for did not fix for me, then follow the below mentioned steps: minimist 2.1) To fix any dependency, you need to first know which npm package depends on that. npm audit This will tell you the packages which are vulnerable. This tells me that is required by and that is required by minimist mkdirp mocha. A quick glance into package-lock.json can give you more information around the affected version. In my case mocha(7.1.0) -> mkdirp(0.5.1) -> minimist(0.0.8) — the vulnerable version. 🔑 Resolutions key 3) And finally the fix was: 3.1) First npm install the non-vulnerable version, which in my case was 1.2.5 npm install minimist --save-dev For and users yarn npm 3.2) Add a resolutions key in your package.json file { : { : }
} "resolutions" "minimist" "^1.2.5" For npm users, we need one more step for that resolutions key to work. 3.3) Use npm-force-resolutions ( ) https://www.npmjs.com/package/npm-force-resolutions : { : } "scripts" "preinstall" "npx npm-force-resolutions" 3.4) After that run npm install That’s it. That solves the dependency issues which can not be updated using either npm update or by uninstalling and reinstalling a new dependency. To check if the dependency works correctly npm ls minimist This should give you an output like the image below 🔥 Disclaimer If some packages are only compatible with an older version, then this change might break your app. So be careful while resolving to a particular version and test your app before releasing this change. 👯 Share this article if you found it helpful! You can follow me on twitter for more updates. @VivekNayyar09 Also please don’t forget to maintain social distance to prevent the virus from spreading and wash your hands regularly. Stay safe and stay at home. Previously published at https://dev.to/viveknayyar/fixing-security-vulnerabilities-in-npm-dependencies-in-less-than-3-mins-2p5g

How to fix Security Vulnerabilities in NPM Dependencies in 3 Minutes

( Magical land of React Suspense, Concurrent React and React.lazy API) in his talk “ ” at JSConf Iceland 2018 said: Dan Abramov Beyond React 16 We’ve built a generic way to ensure that high-priority updates like user input don’t get blocked by rendering low-priority updates. Let’s understand what this means and also get introduced to some of the new features coming to React, some of which have been released as part of the latest stable release and some of them are still in mode and it’s quite possible that the implementation of the api might change over time. unstable Things we got introduced to in the talk: Suspense Defer set state with react-cache scheduler Concurrent React ModeCode splitting with React.lazy Suspense React.Suspense in simple words means we can suspend the rendering of our component or components until some condition is met( for example data from an endpoint or a resource is loaded) and until then show a fallback(for-example a spinner) Why do we need this? If suspense is all about just showing a spinner till data loads, can we not do that today as well? I mean we have been doing the same thing since a long time by keeping a loading state as true and till the data is not fetched we show a spinner and when data fetch is complete we set the loading state to false. An example of how we have been currently doing it: state = { : , : } loading true data null So the question is if it can be done even today then what is it that suspense is bringing into our codebase? The answer to that is yes it’s still possible to use loading state and play around with it to show/hide the spinner but as the application grows complex this becomes tedious to manage. For example:- <RestaurantDetail> <RestaurantAlbums /> <RestaurantReviews>
        <RestaurantReviewDetail>
        <RestaurantReviewDetail>
        <RestaurantReviewDetail>
        {...}
    </RestaurantReviews>
</RestaurantDetail> < /> RestaurantInfo In the above example we can have 4 api calls: 1) component making one api call for getting basic information about a Restaurant <RestaurantInfo /> 2) api to fetch all the images of that Restaurant 3) api to fetch all reviews 4) api to fetch some details around those individual reviews like comments, likes etc. <RestaurantAlbums /> <RestaurantReviews /> <RestaurantReviewDetail /> The problem with the above code structure is that we need to somehow manage the loading state and data fetching states for all those api calls that are happening above. So what is the solution? For the above problem we have multiple solutions which can be as follows: Delegate all api calling logic into the parent container and let all of them wait until all data fetching is complete and pass data to child components as props. The problem with this approach is now the parent needs to be aware of all api calls which are needed by child components and also maintain a complex state for all these api responses. Make all the child components smart/stateful components and let each of them manage their own and states. This is complex since converting a stateless component to a stateful component is not something we would want to do. loading data The third solution is using Suspense With Suspense it works differently. How? With suspense and react-cache, we can use our same functional component and still fetch data from it. The difference here being instead of fetching data from a lifecycle method like we will fetch this data from inside of . componentDidMount render How is this even possible? This becomes possible using react-cache and suspense Now a word of caution, is still unstable and it’s implementation or api might change over time. react-cache An example of how to use react-cache to create a restaurant list fetching resource:- {
  unstable_createResource,
} ; restaurantListResource = unstable_createResource( { ( {
    fetch( )
      .then( res.json())
      .then( { { restaurants } = response;
        resolve(restaurants);
      });
  });
}); import from "react-cache" const => () return new Promise ( ) => resolve, reject "https://8kq2vljq58.sse.codesandbox.io/restaurants" => res => response const react-cache In the above code snippet we are using and as the name suggests this is still unstable_createResource unstable. unstable_createResource takes a function as one of its arguments and a hash function as the second argument which is used to create the key for the hash map which caches the data. The whole suspense and suspended rendering magic comes into play with this because this function unstable_createResource throws a promise. (Dan’s tweet about cache throwing a promise and react catching it) A layman implementation of what it might look like could be: unstable_createResource = { resolved = (); {
    read(key) => { (!resolved.has(key)) { method(...args)
          .then( resolved.set(key, val));
      } resolved.get(key);
    }
  };
} const ( ) => method let new Map return if throw => val return If you notice, it returns an object with a function which takes as a param which is usually the hash key of the hash map and if the data is not fetched yet then this read function will as we see on line no 6. read key throw a promise The actual implementation of this function can be found here:- https://github.com/facebook/react/blob/master/packages/react-cache/src/ReactCache.js#L142 Who will catch this promise? will catch this promise like how they used to catch the error thrown by React render. More information on Error Boundaries can be found on reactjs.org: Error Boundaries https://reactjs.org/docs/error-boundaries.html So now with our component would look something like this: unstable_createResource RestaurantList RestaurantList = { restaurants = restaurantListResource.read(); ( <h2 className="f3 fw4 pa3 mv0">Restaurant List</h2> <div className="cf pa2">{renderRestaurants(restaurants)}</div> );
}; const => () // if no restaurants are found in the cache, the suspense will throw a promise const // this line will have to wait until that promise resolves return < > article </ > article Who will implement componentDidCatch? This is where from react comes into play. has a sort of mechanism which will catch this promise and show a fallback until the promise is resolved. Suspense React.Suspense componentDidCatch React, { Suspense } ; RestaurantListContainer = { ( <RestaurantList /> );
}; import from 'react' const => props return < = ' '}> Suspense fallback { Loading... </ > Suspense This concludes the topic of using React.Suspense to suspend rendering until data fetching is complete and until then show a fallback. We learnt about in this topic and how it can be used to throw a promise and suspend rendering. react-cache Concurrent React To take advantage of the asynchronous capabilities of concurrent React, We change the way we render our root element. <App /> Where we do this in standard React: render(&lt;App /&gt;, document.get ); . ReactDOM ElementById(' ') root We do this for concurrent React: create ).render(&lt;App /&gt;); . ReactDOM Root( . (' ') document getElementById root That is all that needs to be changed to enable Concurrent React. This brings us with a new magical capability which is:- prop- this is the time in after which our fallback component will show up. This will avoid screen flickering issue which usually occurs on faster network where the loader shows up for few ms and then the data comes immediately. This will make sure that for faster networks Spinner will never show up thereby avoiding screen flickering. maxDuration ms React.StrictMode If you are developing in React 16.6, what has been recommended is to wrap <React.StrictMode> around <App /> so any unsupported features you may integrate will be prompted as warnings in your development console. Wrap strict mode around your app like so: ReactDOM.render( <App /> < > React.StrictMode , document.getElementById('root')); </ > React.StrictMode Defer Mode in Concurrent React We can defer certain setState calls and let it wait until some other important operations like data fetching finishes for example clicking on a restaurant card and not rendering the detail page until all the data for the detail page has been loaded. This is the kind of stuff it allows you to do: To use this we need another api which is part of an package called as unstable npm scheduler { unstable_scheduleCallback defer } https://www.npmjs.com/package/schedule _blank ; import as from "<a href=" r" target=" ">scheduler</a>" To defer a setState call we can do like the function below where I am delaying showing the detail page until the data for that page is loaded. { unstable_scheduleCallback defer } ;
...

toggleDetailPage = { (id) { .setState({ : id
    });
    defer( { .setState({ : });
    });
  } { .setState({ : id, : });
  }
}; import as from "scheduler" => id if this id => () this showDetail true else this id showDetail false Defer is also able to somewhat catch the thrown promises, and only apply the state changes after all of the child async operations are completed. Complete example with concurrent react, createResource, Suspense and defer mode can be found here https://codesandbox.io/s/kwjjovx5wo Here is what Dan had to say about this whole set state defer: Code Splitting with React.lazy and React.Suspense The React.lazy function lets you render a dynamic import as a regular component. Before: React ; RestaurantListComponent ; { ( <RestaurantListComponent /> );
} import from 'react' import from './RestaurantList' ( ) function App return < > div </ > div : In the above implementation the will be part of your main bundle and will not be lazy-loaded. Note RestaurantListComponent After: React, { Suspense, lazy } ; RestaurantListComponent = lazy( ( )); { ( <RestaurantListComponent /> );
} import from 'react' const => () import './RestaurantList' // code-splitted, on demand loaded component ( ) function App return < = > Suspense fallback "Loading..." </ > Suspense : With this approach, will be a code splitted component loaded on demand. Note RestaurantListComponent Example of lazily loaded component in a chunk “ 1.chunk.js” How to use these API’s? React.Suspense with React.lazy is a stable API and can be installed from npm as the latest stable version of react and react-dom npm react react-dom install react-cache and scheduler are unstable. Here is how you can still use them: npm install react@ -alpha - next
npm install react-dom@ -alpha - next
npm install react-cache@ -alpha npm install scheduler@ 16.7 .0 .2 16.7 .0 .2 2.0 .0 .1 0.11 .2 Conclusion To conclude, I am really excited about all these api’s to be stable soon. What are your thoughts on these features? Let me know in the comments section! 😊 Here is the roadmap from the React team for the upcoming releases: https://reactjs.org/blog/2018/11/27/react-16-roadmap.html Resources React lazy, Suspense and Concurrent React Breakdown with Examples Beyond React 16: Time Slicing and Suspense API Dan’s JSCONF talk React Suspense: Async Rendering in React What’s new in React — Presentation Fresh Concurrent React Twitter thread around this topic Special thanks to for reviewing this 😊 Sara Vieira

Magic of React Suspense with concurrent react and React.lazy API

I finally started working on a React native app last week and to be honest I have been thinking of doing so since an year now, but always lacked the motivation to start. A few weeks back I was reading this book “The Subtle Art of Not Giving a F*ck” and I came across this quote which gave me a final push to start writing a React Native App. The quote is: Action isn’t just the effect of motivation; it’s also the cause of it. And with that thought, let’s begin. Intent This article is about how to have a custom component for header, bottom tab navigation when you are using and how to style it since it took me one complete day to figure out all of it! It really took a lot of research, google search and reading all the github solutions by others, of which some did work and some did not. React-Navigation Here is how the final screen with custom header and tab look like: The entire code can be found here and can be tested with . expo So lets begin 😄 Pre-Requisites We are using 0.55.2 version and 2.0.0 React Native React navigation Follow the getting started guide from here to create a new react native app from scratch and then create a routes file similar to the one mentioned below. _This page will help you install and build your first React Native app. If you already have React Native installed, you…_facebook.github.io Getting Started · React Native Alternatively you can also install package. create-react-native Your route file should look like the following gist: is a function that returns a React component. It takes and, optionally, [createStackNavigator](https://reactnavigation.org/docs/en/hello-react-navigation.html) a route configuration object an options object Approach In this section, I have put down all the FAQs about customizing the header.We will use the solution for each of them to create our customized header. How do I use a custom header for my React navigation? Solution: Inside the options object of , we have .Inside this object we can specify our custom header like this. _createStackNavigator_ _navigationOptions_ header: props => <CustomHeader {...props} /> Also this won’t work unless you also make the background transparent for the react navigation header with this line of code:- headerStyle: {backgroundColor: "transparent"} Finally, after adding the custom header, our code will look like the following gist: And the CustomHeader.js file in my case looked like this: What if I do not want a custom header and just want to style my header? Solution:- Use **headerStyle** How do I style my header title? Solution: Use **headerTitleStyle** How do I change the color of the back arrow? Solution: Use **headerTintColor** headerTintColor: “#fff” How do I hide the back arrow? Solution:- Use and set it to **headerLeft** **null** headerLeft: null What if I do not want to show a header for some screens? Solution: Set **header** to **null** header: null The final code after all the changes would look like this: That pretty much should solve most of the customization regarding custom header. Up next is if I am using a for bottom tab navigation, how do I style the header for tabs and the bottom navigation? TabNavigator With TabNavigation and Header, the process is slightly complicated. You cannot have this tab approach if you wish to have different headerTitle for your header with respect to each tab. So the solution here is putting each of your tab screen inside a stackNavigator. For example:- Frequently Asked Questions about Bottom TabBar? How do I put a custom bottom navigation bar for React navigation? Solution: React Navigation TabNavigator accepts a property **tabBarComponent** . We can specify our custom component here. tabBarComponent: CustomTabBarBottom How do I style my bottom TabBar? Solution: Use object and the property to style your bottom tab bar. **tabBarOptions** **style** How do I add icons to my bottom navbar? Solution: Use object property. **navigationOptions** **tabBarIcon** How do I hide the bottom tab bar for some detailed screens which are sub screen’s of a parent tab? For example you might have a movie tab which shows a list of movies and on clicking on any of those you would want to show the details of that movie and would want to hide the bottom navbar and disable swiping as well. In all such cases, here is what you need to do: From your parent tab when you navigate to the details page, send it a param of **hideTabBar: true** this.props.navigation.navigate('DetailsScreen', {hideTabBar: true}); 2. Now inside of your , have code like this: **navigationOptions** **TabNavigator** Finally after all the changes, the tab router looks like this: Conclusion Hopefully this article saves someone’s time while getting started with React Native. React native is fun to play around and to create cool apps 😍 ✨ Give this article a clap if you found it helpful! And do share the amazing apps that you all have created or are working on in the comments section. Let’s all learn together… 😃 You can follow me on twitter for more updates on what I am experimenting with. @VivekNayyar09 For further reading, please refer to the following links:- React Native getting started fluent-conf-restaurant-app React Navigation Custom Header Github Issue(this helped me a lot to debug my issues)

How to use a Custom Header and Custom bottom tab bar for React Native with React Navigation?

🕵️‍ Confusion: When I first started working with React, I always had this confusion that even though my functional component has no reference to React(since I could not see any mention of React keyword in the component), then why do I need to have at the top of my file. 😕 import React from “react"; This is how we create a simple functional component in react:- 🔬 Problem: This code looks like a very simple function with some html inside it but it fails to work if we use it without import React from "react" The problem here is if it’s just some function with html inside it, then it should work without the import statement 🤔 😍 Finding: After reading more about it and after seeing the code which get’s generated after transpilation, I could finally understand why it’s needed 😯 The reason is because of 😃The code which looked like plain html to me is actually JSX 🙇 JSX So after babel transpilation, this is how the same code looks var App = function App() {return React.createElement("div",null,"Hello World!!!");}; The important thing to focus here is and this is the reason why we need to import React at the start of any functional component. 🎉 🙌 React.createElement Hope this helps anyone who is starting with React and is confused about why is needed. import React from “react" For further reading as to understand what gets transpiled to what, please try the Babel REPL The compiler for writing next generation JavaScriptbabeljs.io Babel · The compiler for writing next generation JavaScript Give this article a clap if you found it helpful! You can follow me on twitter for more updates on what I am experimenting with. @VivekNayyar09

Why import React from “react” in a functional component?

and it brings lots of exciting changes. One of the features that got me excited is better error handling. Previously, runtime errors during rendering could put React in a broken state. React 16 is here With React 16, instead of unmounting the whole app every time there’s an error, you can use error boundaries. Think of error boundaries like try-catch statements, but for React components. Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the crashed component tree. A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info). With error boundaries, even if one of your component’s results in an error, the entire react app would not get unmounted and instead only the erroneous component would display a fallback UI and the entire app would still be fully functional. To demonstrate the usage of an error boundary in a React App, we would be taking an example of an e-commerce website which has a product listing page to display what all products are available for sale. The final page would look something like this:- If you were to notice the last product card, it shows a kind of an error template. Because of Error Boundaries in React 16, we were able to place a fallback UI template for that particular component and still render the entire app. An Error Boundary class component can be created in the following manner:- And we can then wrap any of our component’s inside Error Boundary component to catch error’s and display a fallback UI. For example:- <ErrorBoundary>  <ProductCard /></ErrorBoundary> The method works like a JavaScript block, but for components. Only can be error boundaries. componentDidCatch() catch {} class components Inside we set the state to true and then inside our render method based on whether hasError is true or false we render either the fallback UI or the React Component’s that we wanted to render as children’s. componentDidCatch() hasError For our app we have primarily three components:- ProductList Component ( Smart Component) Product Component (Presentational Component) Header Component (Presentational Component) For styling I am using React Toolbox . The code for the Component is as follows:- ProductList As you can see the Product Component is wrapped inside Error Boundary. And the code for component is:- Product In the above Product.js code we are calling props.product.name.toUpperCase() So whenever a product has no name to it, then the function would be called with and would result in an error which would eventually result in of the entire react app. toUpperCase undefined unmounting But with Error Boundary in place, we can catch these error’s and render a fallback UI like the one below:- I hope this demo helps in understanding Error Boundaries of React 16. React 16 has many more great features shipped in and I would be discussing more about them in my next article. The entire code for the above demo app can be found on my github repo, the link for the same is:- _React-16---Error-Boundaries - Repo to demonstrate the usage of Error Boundaries in React 16_github.com vivek12345/React-16---Error-Boundaries For further reading, please refer to the following links:- Error Handling in React 16 Egghead.io React Error Handling

Error Boundaries in React 16

In this exclusive interview, Andrey Nayman, co-founder of Magic Square, shares his journey in the blockchain industry and the inspirations behind creating a community-driven App Store. Ishan Pandey: Hi Andrey, great to have you here. To start off, could you share a bit about your background and what inspired you to co-found Magic Square? Andrey Nayman: I've been in the blockchain industry since 2013. My experiences leading various tech companies inspired me to start Magic Square. We're building a community-driven App Store that makes using decentralized apps simpler and safer. I’m passionate about using my blockchain knowledge to create something valuable and innovative for users worldwide. Ishan Pandey: Magic Square offers a unique ecosystem for discovering Web3 projects. Can you explain what sets Magic Store apart from other platforms in the space? Andrey Nayman: Magic Square is all about putting users first. Imagine it like a big online store, but instead of selling physical items, we present Web3 Apps. Magic Store is a way for users to discover all trusted Dapps and engage with them in one place. What makes us different is that we check every app really carefully before putting it in our store. This makes our platform safe and easy to use, whether you're new to Web3 or already an expert. Ishan Pandey: Given the diverse offerings within the Magic Square ecosystem like Magic Karma and Hot Offers, how do these features enhance the user experience and engagement? Andrey Nayman: Magic Karma and Hot Offers are innovative features designed to enhance the user experience on Magic Square. Magic Karma serves as our reputation system – users receive daily rewards for contributing to the Magic Ecosystem, such as trying out new apps or participating in community activities, earning them points. These points can then be exchanged for exciting rewards. On the other hand, Hot Offers form our engagement layer, where users can complete tasks provided by the listed projects and receive real payments for their efforts. Together, these features keep our users happy and engaged while using our platform. Ishan Pandey: The $SQR token plays a central role in the Magic Square community. Could you discuss how it integrates into the ecosystem and what its benefits are for users? Andrey Nayman: The $SQR token is like the heart of Magic Square. Users earn $SQR as a reward for doing things on our platform every day. You can stake $SQR to unlock special benefits if you're a member. You'll get paid in $SQR when you earn rewards through Hot Offers. We also use $SQR to reach the right people in our marketing efforts. To join Launchpad sales, you must stake even more $SQR. So, $SQR is important for everyone using Magic Square. It's what keeps everything running smoothly and helps our community grow. Ishan Pandey: Community-driven platforms depend heavily on user participation. How does Magic Square encourage community involvement in project voting and validation? Andrey Nayman: Community is at the core of every crypto project. At Magic Square, we believe in bringing the crypto community together in one place. Here, users can decide which projects make it onto our platform, shaping their future. Our community moderators actively gather feedback, which our product team uses to create a roadmap aligned with their needs. To make our community feel valued and engaged, we offer daily rewards through Karma Points and exciting opportunities through Hot Offers. We also host regular surveys where users can share their ideas and feedback, ensuring our platform evolves based on their input. Ishan Pandey: Affiliate programs are common in Web3, but Magic Boost offers a unique twist. Can you elaborate on how this program works and what its advantages are for both users and developers? Andrey Nayman: Affiliate programs are common in Web3, but Magic Boost offers a unique twist. Here's how it works: Users can easily monetize their communities by sharing affiliate offers from listed projects. With one click, they share these offers on social media. When their friends engage and convert, users receive instant payouts. This benefits the user by allowing them to earn effortlessly while supporting their favorite projects. For developers, Magic Boost expands their reach and boosts user acquisition, enhancing app visibility and credibility. Ishan Pandey: Looking forward, what are some key developments or milestones that the Magic Square community can anticipate in the near future? Andrey Nayman: In the near future, our Launchpad will be a big focus. It's designed to help projects grow steadily and connect with our community. We'll customize our approach, using both public and private sales, to give projects the best chance of success. With our active community, we'll make sure these projects get plenty of attention. Stay tuned for more updates as we work together to shape the future of Web3! Don’t forget to like and share the story! Vested Interest Disclosure: This author is an independent contributor publishing via our business blogging program. HackerNoon has reviewed the report for quality, but the claims herein belong to the author. #DYOR. In this exclusive interview, Andrey Nayman, co-founder of Magic Square, shares his journey in the blockchain industry and the inspirations behind creating a community-driven App Store. Ishan Pandey: Hi Andrey, great to have you here. To start off, could you share a bit about your background and what inspired you to co-found Magic Square? Ishan Pandey: Hi Andrey, great to have you here. To start off, could you share a bit about your background and what inspired you to co-found Magic Square? Ishan Pandey: Hi Andrey, great to have you here. To start off, could you share a bit about your background and what inspired you to co-found Magic Square? Andrey Nayman: I've been in the blockchain industry since 2013. My experiences leading various tech companies inspired me to start Magic Square. We're building a community-driven App Store that makes using decentralized apps simpler and safer. I’m passionate about using my blockchain knowledge to create something valuable and innovative for users worldwide. Andrey Nayman: Ishan Pandey: Magic Square offers a unique ecosystem for discovering Web3 projects. Can you explain what sets Magic Store apart from other platforms in the space? Ishan Pandey: Magic Square offers a unique ecosystem for discovering Web3 projects. Can you explain what sets Magic Store apart from other platforms in the space? Ishan Pandey: Magic Square offers a unique ecosystem for discovering Web3 projects. Can you explain what sets Magic Store apart from other platforms in the space? Andrey Nayman: Magic Square is all about putting users first. Imagine it like a big online store, but instead of selling physical items, we present Web3 Apps. Magic Store is a way for users to discover all trusted Dapps and engage with them in one place. What makes us different is that we check every app really carefully before putting it in our store. This makes our platform safe and easy to use, whether you're new to Web3 or already an expert. Andrey Nayman: Ishan Pandey: Given the diverse offerings within the Magic Square ecosystem like Magic Karma and Hot Offers, how do these features enhance the user experience and engagement? Ishan Pandey: Given the diverse offerings within the Magic Square ecosystem like Magic Karma and Hot Offers, how do these features enhance the user experience and engagement? Ishan Pandey: Given the diverse offerings within the Magic Square ecosystem like Magic Karma and Hot Offers, how do these features enhance the user experience and engagement? Andrey Nayman: Magic Karma and Hot Offers are innovative features designed to enhance the user experience on Magic Square. Magic Karma serves as our reputation system – users receive daily rewards for contributing to the Magic Ecosystem, such as trying out new apps or participating in community activities, earning them points. These points can then be exchanged for exciting rewards. On the other hand, Hot Offers form our engagement layer, where users can complete tasks provided by the listed projects and receive real payments for their efforts. Together, these features keep our users happy and engaged while using our platform. Andrey Nayman: Ishan Pandey: The $SQR token plays a central role in the Magic Square community. Could you discuss how it integrates into the ecosystem and what its benefits are for users? Ishan Pandey: The $SQR token plays a central role in the Magic Square community. Could you discuss how it integrates into the ecosystem and what its benefits are for users? Ishan Pandey: The $SQR token plays a central role in the Magic Square community. Could you discuss how it integrates into the ecosystem and what its benefits are for users? Andrey Nayman: The $SQR token is like the heart of Magic Square. Users earn $SQR as a reward for doing things on our platform every day. You can stake $SQR to unlock special benefits if you're a member. You'll get paid in $SQR when you earn rewards through Hot Offers. We also use $SQR to reach the right people in our marketing efforts. Andrey Nayman: To join Launchpad sales, you must stake even more $SQR. So, $SQR is important for everyone using Magic Square. It's what keeps everything running smoothly and helps our community grow. Ishan Pandey: Community-driven platforms depend heavily on user participation. How does Magic Square encourage community involvement in project voting and validation? Ishan Pandey: Community-driven platforms depend heavily on user participation. How does Magic Square encourage community involvement in project voting and validation? Ishan Pandey: Community-driven platforms depend heavily on user participation. How does Magic Square encourage community involvement in project voting and validation? Andrey Nayman: Community is at the core of every crypto project. At Magic Square, we believe in bringing the crypto community together in one place. Here, users can decide which projects make it onto our platform, shaping their future. Our community moderators actively gather feedback, which our product team uses to create a roadmap aligned with their needs. To make our community feel valued and engaged, we offer daily rewards through Karma Points and exciting opportunities through Hot Offers. We also host regular surveys where users can share their ideas and feedback, ensuring our platform evolves based on their input. Andrey Nayman: Ishan Pandey: Affiliate programs are common in Web3, but Magic Boost offers a unique twist. Can you elaborate on how this program works and what its advantages are for both users and developers? Ishan Pandey: Affiliate programs are common in Web3, but Magic Boost offers a unique twist. Can you elaborate on how this program works and what its advantages are for both users and developers? Ishan Pandey: Affiliate programs are common in Web3, but Magic Boost offers a unique twist. Can you elaborate on how this program works and what its advantages are for both users and developers? Andrey Nayman: Affiliate programs are common in Web3, but Magic Boost offers a unique twist. Here's how it works: Users can easily monetize their communities by sharing affiliate offers from listed projects. With one click, they share these offers on social media. When their friends engage and convert, users receive instant payouts. This benefits the user by allowing them to earn effortlessly while supporting their favorite projects. For developers, Magic Boost expands their reach and boosts user acquisition, enhancing app visibility and credibility. Andrey Nayman: Ishan Pandey: Looking forward, what are some key developments or milestones that the Magic Square community can anticipate in the near future? Ishan Pandey: Looking forward, what are some key developments or milestones that the Magic Square community can anticipate in the near future? Ishan Pandey: Looking forward, what are some key developments or milestones that the Magic Square community can anticipate in the near future? Andrey Nayman: In the near future, our Launchpad will be a big focus. It's designed to help projects grow steadily and connect with our community. We'll customize our approach, using both public and private sales, to give projects the best chance of success. With our active community, we'll make sure these projects get plenty of attention. Stay tuned for more updates as we work together to shape the future of Web3! Andrey Nayman: Don’t forget to like and share the story! Vested Interest Disclosure: This author is an independent contributor publishing via our business blogging program. HackerNoon has reviewed the report for quality, but the claims herein belong to the author. #DYOR. Vested Interest Disclosure: This author is an independent contributor publishing via our business blogging program . HackerNoon has reviewed the report for quality, but the claims herein belong to the author. #DYOR. Vested Interest Disclosure: business blogging program business blogging program

Andrey Nayman Reveals the Vision Behind Magic Square's Unique Web3 Ecosystem

This paper is available on arxiv under CC 4.0 license.
Authors:
(1) Xiaofei Sun, Zhejiang University & xiaofei_sun@zju.edu.cn;
(2) Xiaoya Li, Shannon.AI, Bytedance & xiaoya_li@shannonai.com;
(3) Shengyu Zhang, Zhejiang University & sy_zhang@zju.edu.cn;
(4) Shuhe Wang, Peking University & wangshuhe@stu.pku.edu.cn;
(5) Fei Wu, Zhejiang University & wufei@zju.edu.cn;
(6) Jiwei Li, Zhejiang University &  jiwei_li@zju.edu.cn;
(7) Tianwei Zhang, Nanyang Technological University & tianwei.zhang@ntu.edu.sg;
(8) Guoyin Wang, Bytedance & guoyin.wang@bytedance.com. Table of Links Abstract and Introduction
Related Work
LLM Negotiation for Sentiment Analysis
Experiments
Ablation Studies
Conclusion and References 5 Ablation Studies In this section, we perform ablation studies on the Twitter dataset to better understand the mechanism behind the negotiation framework. 5.1 Who takes which role matters In the negotiation framework, there are two roles, the generator and the discriminator, which two separate LLMs take. Table 2 shows the performance for setups where GPT-3.5 and GPT-4 take different roles. As can be seen, when GPT-3.5 acts as the generator, and GPT-4 acts as the discriminator (G3.5-D4 for short), the performance (68.8) is better than single GPT-3.5 without negotiation (65.2), but worse than single GPT-4 without negotiation (69.5). In contrast, negotiation-based configurations with GPT-4 acting as the generator (G4-D3.5 and G4-D4) consistently outperforms standalone GPT-4 or GPT-3.5 models without negotiation. These results underscore the pivotal role that the generator plays in influencing the negotiation outcome. Furthermore, we observe G4- D3.5 can beat G4-D4. We attribute such advantage to the hypothesis that utilizing heterogeneous LLMs for distinct roles could optimize the negotiation’s performance. 5.2 Consensus Percentage Table 3 consensus percentage for different setups. As can be seen, when GPT-4 acts as the generator, the negotiation is more likely to reach a consensus, or reach a consensus in fewer turns. The explanation is intuitive: for the twitter task, we can see from table 1 that GPT-4 obtains better performances that GPT-3.5, which means the reasoning process for GPT-4 is more sensible than 3.5, making the decision of the former more likely to be agreed on. 5.3 Effect of the Reasoning Process In the negotiation process, LLMs are asked to articulate the reason process, a strategy akin to CoT(Wei et al., 2022b). We examine the importance for listing reasons in negotiation by removing the reasoning process and asking LLMs to only output decisions. Results are shown in Table 4. As can be seen, for the three setups, single GPT-3.5, where only GPT-3.5 is used without negotiation, single GPT-4, where only GPT-4 is used without negotiation, and GPT-3.5+GPT-4 where negotiation is employed, performances all degrade when the reasoning process is removed. But interestingly, we see a greater degrade (-2.3) for the negotiation than the single model setup (-1.2 for single-GPT-3.5 and -0.9 for single-GPT-4). This is in accord with our expectation as the reasoning process is of greater significance in the negotiation setup. This paper is available on arxiv under CC 4.0 license. Authors: (1) Xiaofei Sun, Zhejiang University & xiaofei_sun@zju.edu.cn; (2) Xiaoya Li, Shannon.AI, Bytedance & xiaoya_li@shannonai.com; (3) Shengyu Zhang, Zhejiang University & sy_zhang@zju.edu.cn; (4) Shuhe Wang, Peking University & wangshuhe@stu.pku.edu.cn; (5) Fei Wu, Zhejiang University & wufei@zju.edu.cn; (6) Jiwei Li, Zhejiang University &  jiwei_li@zju.edu.cn; (7) Tianwei Zhang, Nanyang Technological University & tianwei.zhang@ntu.edu.sg; (8) Guoyin Wang, Bytedance & guoyin.wang@bytedance.com. This paper is available on arxiv under CC 4.0 license. Authors: (1) Xiaofei Sun, Zhejiang University & xiaofei_sun@zju.edu.cn; (2) Xiaoya Li, Shannon.AI, Bytedance & xiaoya_li@shannonai.com; (3) Shengyu Zhang, Zhejiang University & sy_zhang@zju.edu.cn; (4) Shuhe Wang, Peking University & wangshuhe@stu.pku.edu.cn; (5) Fei Wu, Zhejiang University & wufei@zju.edu.cn; (6) Jiwei Li, Zhejiang University &  jiwei_li@zju.edu.cn; (7) Tianwei Zhang, Nanyang Technological University & tianwei.zhang@ntu.edu.sg; (8) Guoyin Wang, Bytedance & guoyin.wang@bytedance.com. Table of Links Abstract and Introduction Related Work LLM Negotiation for Sentiment Analysis Experiments Ablation Studies Conclusion and References Abstract and Introduction Abstract and Introduction Related Work Related Work LLM Negotiation for Sentiment Analysis LLM Negotiation for Sentiment Analysis Experiments Experiments Ablation Studies Ablation Studies Conclusion and References Conclusion and References 5 Ablation Studies In this section, we perform ablation studies on the Twitter dataset to better understand the mechanism behind the negotiation framework. 5.1 Who takes which role matters In the negotiation framework, there are two roles, the generator and the discriminator, which two separate LLMs take. Table 2 shows the performance for setups where GPT-3.5 and GPT-4 take different roles. As can be seen, when GPT-3.5 acts as the generator, and GPT-4 acts as the discriminator (G3.5-D4 for short), the performance (68.8) is better than single GPT-3.5 without negotiation (65.2), but worse than single GPT-4 without negotiation (69.5). In contrast, negotiation-based configurations with GPT-4 acting as the generator (G4-D3.5 and G4-D4) consistently outperforms standalone GPT-4 or GPT-3.5 models without negotiation. These results underscore the pivotal role that the generator plays in influencing the negotiation outcome. Furthermore, we observe G4- D3.5 can beat G4-D4. We attribute such advantage to the hypothesis that utilizing heterogeneous LLMs for distinct roles could optimize the negotiation’s performance. 5.2 Consensus Percentage Table 3 consensus percentage for different setups. As can be seen, when GPT-4 acts as the generator, the negotiation is more likely to reach a consensus, or reach a consensus in fewer turns. The explanation is intuitive: for the twitter task, we can see from table 1 that GPT-4 obtains better performances that GPT-3.5, which means the reasoning process for GPT-4 is more sensible than 3.5, making the decision of the former more likely to be agreed on. 5.3 Effect of the Reasoning Process In the negotiation process, LLMs are asked to articulate the reason process, a strategy akin to CoT(Wei et al., 2022b). We examine the importance for listing reasons in negotiation by removing the reasoning process and asking LLMs to only output decisions. Results are shown in Table 4. As can be seen, for the three setups, single GPT-3.5, where only GPT-3.5 is used without negotiation, single GPT-4, where only GPT-4 is used without negotiation, and GPT-3.5+GPT-4 where negotiation is employed, performances all degrade when the reasoning process is removed. But interestingly, we see a greater degrade (-2.3) for the negotiation than the single model setup (-1.2 for single-GPT-3.5 and -0.9 for single-GPT-4). This is in accord with our expectation as the reasoning process is of greater significance in the negotiation setup.

NAYYA

nayya.com

-- employees

Since n.d.

COMPANY RANKING

NAYYA

EVERGREEN INDEX #7486

Representing this company? Click here to claim and customize this page!

Nayya WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

NAYYA

nayya.com

-- employees

Since n.d.

COMPANY RANKING

NAYYA

EVERGREEN INDEX #7486

RELATED COMPANIESRANK

STORIES ABOUT NAYYA

Representing this company? Click here to claim and customize this page!

Nayya WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!