Вчера вечером я играл со своим шаблонным кодом Blockstack React и другими приложениями Blockstack и заметил одну вещь. Все приложения Blockstack будут иметь кнопку Войти с помощью Blockstack на своих страницах, но простого плагина для добавления этого нет.

Недавно я попытался написать Node SDK, PHP SDK и Python SDK для одного из моих побочных проектов и обнаружил, что это отличный опыт обучения. Я хотел попробовать сделать то же самое с React. После сообщения hackernoon я смог создать очень простую библиотеку компонентов React для кнопки Войти с помощью Blockstack. Результат этой библиотеки - изображение выше, и вы можете найти репо на Github.

Я хотел дать разработчику полный контроль. Они должны иметь возможность настраивать все, в то время как реализация занимает секунды. Есть два компонента SignInBlockstackButton и SignInBlockstackLiteButton. Для SignInBlockstackButton требуется одна опора - isSignedIn. Это проверено библиотекой blockstack.js, и я планирую интегрировать, поэтому никаких дополнительных свойств не требуется. Разница между ними в том, что SignInBlockstackButton функции входа и выхода включены и предварительно написаны, а SignInBlockstackLiteButton передает их как реквизиты. Я не буду рассматривать все варианты опоры, но включу их ниже:

<SignInBlockstackButton
  isSignedIn={this.state.isLoggedIn}
  
  signInBtnText="Custom Sign In Text"
  signOutBtnText="Custom Sign Out Text"
  
  includeBlockstackLogo={false}
  
  signOutRedirect="/custom-signout-page"
  
  renderNothing={false}
  
  textStyle={{
    fontSize: 24,
  }}
  imageStyle={{
    height: 100,
  }}
  signOutStyle={{
    backgroundColor: 'red',
  }}
  signInStyle={{
    backgroundColor: 'green',
  }}
  style={{
    backgroundColor: '#fff',
  }}
  defaultStyle={{}}
/>

Все реквизиты описаны в README.

Заключение

Определенно еще один отличный способ учиться, и я надеюсь, что люди воспользуются этим проектом.